:root{font-family:Quicksand,system-ui;color:#342b27;background:#fffaf5}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}header{height:67px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #eadcd2;box-shadow:0 3px 12px #6f4d3320;position:sticky;top:0;z-index:50}.logo{font:700 30px 'Baloo 2';text-shadow:1px 2px #ead1c1}nav{display:flex;align-items:center;gap:12px}nav a,nav button{padding:10px 13px;border:0;border-radius:10px;background:none;text-decoration:none;font-weight:700}nav .active{background:#f3d0b5}#menu{display:none;border:0;background:#f7ddc9;border-radius:8px;padding:7px 10px}main{max-width:1440px;margin:auto;padding:20px;display:grid;grid-template-columns:285px minmax(0,1fr);gap:22px}.tools{background:#fff;border:1px solid #e7d7ca;border-radius:18px;padding:17px;box-shadow:0 12px 30px #62432918;align-self:start;position:sticky;top:87px;max-height:calc(100vh - 106px);overflow:auto}.tools h3{font:700 19px 'Baloo 2';margin:4px 0 10px}.tools hr{border:0;border-top:1px dashed #ddc9b9;margin:17px 0}.tools small,.hint{color:#7d7169;font-size:11px}.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.swatch{aspect-ratio:1;border-radius:50%;border:2px solid #443a35;position:relative}.swatch.active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-weight:900}.tabs{display:flex;flex-wrap:wrap;gap:4px}.tabs button{border:0;border-radius:8px;background:#f8ddd5;padding:5px 8px;font-size:11px}.tabs .active{background:#acd180}.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:7px}.sticker-option{border:0;background:none;font-size:29px;padding:5px;border-radius:9px}.sticker-option:hover{background:#fff0e3;transform:scale(1.12)}.tool-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-buttons button,.workbar button{border:1px solid #ddc9ba;background:#fff;border-radius:9px;padding:8px;font-weight:700}.tool-buttons #export{grid-column:1/-1;background:#e9a57d}.work{min-width:0;overflow-x:auto}.workbar{height:42px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.workbar span{margin-right:auto;color:#6e7969;font-size:12px}.canvas{min-width:900px;min-height:635px;position:relative;overflow:hidden;border:1px solid #dfc7b1;border-radius:18px;box-shadow:0 12px 32px #5d3b231f;padding:27px 25px}.theme-peach{background-color:#fff4e6;background-image:linear-gradient(#dba97728 1px,transparent 1px),linear-gradient(90deg,#dba97728 1px,transparent 1px);background-size:26px 26px}.theme-green{background:#eff9eb;background-image:linear-gradient(#b4d0b1 1px,transparent 1px),linear-gradient(90deg,#b4d0b1 1px,transparent 1px);background-size:26px 26px}.theme-cream{background:#fff6dc;background-image:radial-gradient(#e2b774 1.5px,transparent 1.5px);background-size:17px 17px}.theme-purple{background:repeating-linear-gradient(45deg,#f4e8fb 0 15px,#e4d1f1 15px 30px)}.theme-blue{background:linear-gradient(#d7eff8,#f8fcff)}.theme-pink{background:linear-gradient(135deg,#ffe3e9,#fff4e9)}.theme-mint{background:linear-gradient(135deg,#e4faef,#c5e6d5)}.theme-sunset{background:linear-gradient(135deg,#ffdec6,#ffd0e3,#d4cff8)}.theme-yellow{background:#fff4bd;background-image:radial-gradient(#dda855 1.5px,transparent 1.5px);background-size:18px 18px}.theme-red{background:repeating-linear-gradient(0deg,#ffeaea 0 24px,#e98c8c 25px 26px),repeating-linear-gradient(90deg,transparent 0 24px,#e98c8c 25px 26px)}.title{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:3}.title input{width:55%;border:0;border-bottom:2px dashed transparent;background:none;text-align:center;font:700 27px 'Baloo 2';outline:0}.title input:focus{border-color:#cf956e}.schedule{display:grid;grid-template-columns:124px repeat(7,minmax(88px,1fr));gap:5px;position:relative;z-index:3;margin-top:10px}.head,.time,.cell,.session{min-height:45px;border-radius:9px;border:1px solid #755f4a16;display:flex;align-items:center;justify-content:center}.head{font:700 16px 'Baloo 2';box-shadow:0 2px 3px #5c3c2220}.head:first-child{background:#eee8e0}.day0{background:#f5a0a7}.day1{background:#86cabb}.day2{background:#ffd479}.day3{background:#b0d27d}.day4{background:#8fd2dc}.day5{background:#c5a0d8}.day6{background:#f29b91}.session{grid-column:1/-1;min-height:35px;justify-content:flex-start;padding:0 12px;background:#f8ca50;font:700 16px 'Baloo 2'}.session.afternoon{background:#f5a15d}.session.evening{background:#b8a4d9}.time{background:#fff6dfe8;font-size:13px;font-weight:700}.cell{background:#ffffff80;padding:4px;cursor:pointer}.cell.empty:after{content:'+';font-size:22px;color:#745f4a55}.cell.over{outline:3px dashed #87694e;outline-offset:-4px}.subject{width:100%;min-height:37px;border-radius:7px;display:grid;place-items:center;text-align:center;padding:3px;font-size:13px;font-weight:700;box-shadow:0 2px 4px #55351c24}.subject small{display:block;font-size:9px}#stickerLayer{position:absolute;inset:0;z-index:5;pointer-events:none}.placed{position:absolute;width:58px;height:58px;display:grid;place-items:center;font-size:44px;cursor:grab;pointer-events:auto;user-select:none;touch-action:none;filter:drop-shadow(0 2px 2px #543)}.placed.selected{outline:2px dashed #bd7658;border-radius:8px}.stools{display:none;position:absolute;top:-21px;right:-10px}.selected .stools{display:flex}.stools button{width:21px;height:21px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #777;font-size:11px}.decor{position:absolute;z-index:2;font-style:normal;font-size:31px;letter-spacing:-8px}.d1{top:5px;left:5px}.d2{top:5px;right:8px}.d3{bottom:5px;left:5px}.d4{bottom:5px;right:8px}.hint{text-align:center}.benefits{max-width:1200px;margin:10px auto 35px;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.benefits>div{background:#fff;border:1px solid #ead9cd;border-radius:14px;padding:16px;font-size:28px;box-shadow:0 7px 18px #56392312}.benefits b,.benefits small{display:block;font-size:15px;margin-left:45px}.benefits small{font-size:12px}.templates{background:#fff1e5;padding:42px 20px 65px;text-align:center}.templates h2{font:700 29px 'Baloo 2';margin:0}.templates p{margin-top:0;color:#7c6e65}#templateCards{max-width:950px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.template{background:#fff;border:1px solid #e5d0bf;border-radius:14px;overflow:hidden}.preview{height:140px;display:grid;place-items:center;font-size:50px}.template footer{display:flex;align-items:center;justify-content:space-between;padding:12px}.template button,.primary{border:1px solid #d48d65!important;background:#e9a57d!important;border-radius:8px;padding:7px 10px;font-weight:700}.backdrop{position:fixed;inset:0;background:#39271f70;backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.modal{width:min(460px,100%);max-height:90vh;overflow:auto;background:#fffaf5;border:2px solid #edd0ba;border-radius:19px;padding:24px;box-shadow:0 25px 70px #321d1440;position:relative}.modal.wide{width:min(650px,100%)}.modal>.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:27px}.modal h2{text-align:center;font:700 25px 'Baloo 2';margin:5px}.flower{text-align:center;font-size:40px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f3e2d5;border-radius:10px;padding:4px;margin:15px 0}.auth-tabs button{border:0;background:none;border-radius:7px;padding:8px;font-weight:700}.auth-tabs .active{background:#fff}.modal label{display:block;font-size:13px;font-weight:700;margin:10px 0}.modal input,.modal textarea{width:100%;border:1px solid #dbc7b8;border-radius:8px;background:#fff;padding:10px;margin-top:4px}.modal textarea{min-height:65px}.modal .submit{width:100%;border:0;border-radius:9px;background:#e09a70;padding:10px;font-weight:800}.error{color:#b84242;min-height:17px;font-size:12px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}#colors{display:flex;gap:8px;margin-top:6px}.color{width:30px;height:30px;border:2px solid transparent;border-radius:50%}.color.active{border-color:#40332e}.actions{display:flex;justify-content:flex-end;gap:7px;margin-top:16px}.actions button{border:1px solid #d8c3b3;background:#fff;border-radius:8px;padding:8px 11px}.actions #deleteSubject{margin-right:auto;background:#ffe0dd;color:#a83d37}.session-edit{border:1px solid #e5d2c3;border-radius:11px;padding:11px;margin:9px 0}.session-edit h3{font:700 18px 'Baloo 2';margin:0}.time-row{display:grid;grid-template-columns:1fr 20px 1fr 32px;gap:6px;align-items:center}.time-row input{margin:3px 0}.remove{border:0;background:#ffe0dd;border-radius:7px;height:32px}.add-time{border:1px dashed #c9a991;background:#fff7ef;border-radius:7px;padding:6px;margin-top:6px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,25px);opacity:0;background:#3d322d;color:#fff;padding:10px 17px;border-radius:10px;z-index:200;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}
.session{justify-content:space-between;min-height:38px;padding-right:8px}.session-actions{display:flex;gap:5px}.session-actions button{border:0;background:#ffffffa8;border-radius:7px;padding:4px 8px;font-size:11px;font-weight:800}.session-actions button:hover{background:#fff}.icon-picker{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:7px}.activity-icon{border:1px solid transparent;background:#fff3e9;border-radius:8px;font-size:21px;padding:5px}.activity-icon:hover{transform:scale(1.08)}.activity-icon.active{border-color:#b87351;background:#f7d6c0;box-shadow:0 0 0 2px #f7d6c066}.modal-note{text-align:center;color:#7d7169;font-size:12px;margin:0 0 10px}.cell{position:relative}.row-remove{position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:4;width:25px;height:25px;border:1px solid #d7a98c;border-radius:50%;background:#fff3e9;color:#a4533e;font-size:19px;font-weight:900;line-height:20px;padding:0;box-shadow:0 2px 5px #69452b2e}.row-remove:hover{background:#ffd9cf;transform:translateY(-50%) scale(1.08)}.tools{max-height:none;overflow:visible}.sticker-grid{width:100%;max-width:100%;grid-template-columns:repeat(5,minmax(0,1fr));max-height:275px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 10px 0 0;scrollbar-width:auto;scrollbar-color:#c8a68f #f8eee7}.sticker-option{min-width:0;width:100%;padding:4px 0;cursor:grab;touch-action:pan-y;user-select:none}.sticker-option:active{cursor:grabbing;transform:scale(.94)}.sticker-grid::-webkit-scrollbar{width:10px;height:0}.sticker-grid::-webkit-scrollbar-track{background:#f8eee7;border-radius:10px}.sticker-grid::-webkit-scrollbar-thumb{background:#b88f75;border-radius:10px;border:2px solid #f8eee7}
@media(max-width:900px){main{grid-template-columns:1fr;padding:12px}.tools{position:relative;top:0;max-height:none}.theme-grid,.sticker-grid{grid-template-columns:repeat(10,1fr)}.benefits,#templateCards{grid-template-columns:1fr}}@media(max-width:650px){header{height:58px}#menu{display:block}nav{display:none;position:absolute;top:58px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px}nav.open{display:flex}.theme-grid,.sticker-grid{grid-template-columns:repeat(5,1fr)}.cols{grid-template-columns:1fr}.icon-picker{grid-template-columns:repeat(6,1fr)}}
@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){html,body{touch-action:pan-x pan-y pinch-zoom}header{height:50px;padding:0 14px}.logo{font-size:23px}#menu{display:block}nav{display:none;position:absolute;top:50px;left:0;right:0;background:#fff;flex-direction:row;justify-content:center;padding:7px;box-shadow:0 5px 12px #5d3b2320}nav.open{display:flex}nav a,nav button{padding:7px 9px;font-size:12px}main{max-width:none;grid-template-columns:190px minmax(0,1fr);gap:8px;padding:8px;align-items:start}.tools{position:relative;top:0;padding:9px;max-height:none;min-width:0;overflow:visible;border-radius:13px}.tools h3{font-size:14px;margin:1px 0 4px}.tools hr{margin:7px 0}.theme-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}.swatch{border-width:1px}.tabs{gap:2px}.tabs button{padding:3px 4px;font-size:8px}.tools small{font-size:8px}.sticker-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:100px;gap:1px}.sticker-option{font-size:20px;padding:1px 0}.tool-buttons{gap:3px}.tool-buttons button{padding:5px 3px;font-size:9px}.tool-buttons #export{display:block;width:100%;grid-column:1/-1}.work{min-width:0;width:100%}.workbar{height:32px}.workbar span{font-size:9px}.workbar button{padding:4px 6px;font-size:9px}.canvas{width:100%;min-width:0;min-height:460px;padding:14px 20px 14px 12px}.title input{font-size:20px}.schedule{width:100%;gap:3px;padding-right:6px}.head,.time,.cell{min-height:36px}.session{min-height:30px;font-size:12px}.row-remove{right:-10px;width:21px;height:21px;font-size:16px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);margin:8px auto 18px}.templates{display:block;padding:24px 20px 36px}.hint{margin:4px 0}}

/* 2026 visual refresh v3: richer Vietnamese-inspired themes and corrected layout. */
:root{
  --ink:#272449;
  --muted:#706783;
  --line:#ffffffb8;
  --glass:#fffaf6bd;
  --pink:#f36a9a;
  --rose:#ff8ba8;
  --peach:#ff9b5f;
  --gold:#f5c644;
  --lavender:#9d82d5;
  --mint:#75d9ad;
  color:var(--ink);
  background:#efd9ef;
}
html{background:#ead8ee}
body{
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%,#ffb8d9 0,transparent 26%),
    radial-gradient(circle at 84% 16%,#ffc49f 0,transparent 30%),
    radial-gradient(circle at 72% 78%,#ffd1c8 0,transparent 32%),
    linear-gradient(135deg,#d8c9f1 0%,#f8c9d9 42%,#ffd7ba 100%);
  background-attachment:scroll;
}
header{
  height:72px;
  padding:0 max(4%,24px);
  background:linear-gradient(90deg,#fff9fcdf,#fff1e9d9);
  border-bottom:1px solid #fff;
  box-shadow:0 8px 30px #6d3d7430, inset 0 -1px 0 #efb7c780;
  backdrop-filter:none;
}
.logo{
  color:#71384f;
  font:800 30px 'Baloo 2';
  letter-spacing:.4px;
  text-shadow:0 2px 0 #fff,0 0 16px #ff9dc3;
}
.logo::after{content:' ✦';color:#ffc548;font-size:22px}
nav{gap:8px}
nav a,nav button{border-radius:12px;padding:10px 16px;transition:.2s ease}
nav a:hover,nav button:hover{background:#fff9;transform:translateY(-1px)}
nav .active{
  color:#5e2940;
  background:linear-gradient(135deg,#ffd08f,#ff9cae 55%,#d99eea);
  border:1px solid #fff8;
  box-shadow:0 7px 18px #ca65834a,inset 0 1px 0 #fff;
}
main{max-width:1640px;grid-template-columns:310px minmax(0,1fr);gap:18px;padding:18px 24px}
.tools{
  padding:18px;
  background:linear-gradient(160deg,#fffdfad1,#f7ebf2b8);
  border:1px solid #fff;
  border-radius:20px;
  box-shadow:0 18px 45px #684e7830,inset 0 1px 0 #fff;
  backdrop-filter:none;
}
.tools h3{font:800 17px Quicksand;margin:4px 0 12px;letter-spacing:.1px}
.tools h3::after{content:' ✦';color:#e59a46;font-size:12px}
.tools hr{border-top:1px dashed #aa85aa66}
.tools small,.hint{color:var(--muted)}
.theme-grid{display:block}
.color-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.swatch{
  border:2px solid #fff;
  box-shadow:
    0 4px 9px #75496635,
    inset 0 0 0 1px #7a5f7d26,
    inset 7px 9px 12px #ffffffa8,
    inset -7px -9px 13px #704c7040;
  transition:.2s ease;
}
.swatch::before{
  content:'';
  position:absolute;
  width:34%;
  height:24%;
  left:19%;
  top:13%;
  border-radius:50%;
  background:#ffffffc9;
  filter:blur(1px);
  transform:rotate(-24deg);
  pointer-events:none;
}
.swatch:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 14px #75496640}
.swatch.active{
  outline:2px solid #4c3159;
  outline-offset:3px;
  box-shadow:0 5px 13px #55345155,inset 0 0 0 3px #fff8,inset 7px 9px 12px #ffffffa8,inset -7px -9px 13px #704c7040;
}
.swatch.active:after{
  z-index:2;
  color:#2b2350;
  font:900 24px Quicksand;
  text-shadow:0 1px 0 #fff;
}
.heritage-heading{margin:20px 0 9px;padding-top:14px;border-top:1px dashed #9a769755;color:#51455d;font-size:11px;font-weight:900;letter-spacing:.5px}
.heritage-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.heritage-option{
  min-height:72px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:0;
  border:2px solid #fff;
  border-radius:12px;
  background:#eee;
  box-shadow:0 5px 13px #654a5b24,inset 0 1px 0 #fff;
  transition:.2s ease;
}
.heritage-option:hover{transform:translateY(-2px);box-shadow:0 8px 18px #654a5b38}
.heritage-option.active{border-color:#52335e;box-shadow:0 0 0 2px #fff,0 0 0 4px #52335e,0 8px 18px #654a5b38}
.heritage-option span{width:100%;position:relative;z-index:2;padding:6px 7px;background:linear-gradient(90deg,#20172fc9,#4b315bbd);color:#fff;font-size:10px;font-weight:900;text-align:left;text-shadow:0 1px 2px #0008}
.heritage-dongson{background:url('dong-son-heritage.webp') center/cover no-repeat}
.heritage-lacbird{background:url('chim-lac-heritage.webp') center/cover no-repeat}
.heritage-lotus{background:radial-gradient(ellipse at 50% 105%,#a85075 0 22%,transparent 23%),linear-gradient(135deg,#f2aabd,#f6dfd3)}
.heritage-bamboo{
  background:
    linear-gradient(125deg,#0a34285c,#f5d16b18),
    url('tre-viet-heritage.svg') center 43%/cover no-repeat;
}
.heritage-bamboo::after{
  content:'✦';
  position:absolute;
  top:8px;
  right:11px;
  color:#ffe993;
  font-size:17px;
  text-shadow:-28px 13px 0 #fff0acb8,0 0 9px #ffef9d;
  animation:bamboo-shine 2.8s ease-in-out infinite;
}
@keyframes bamboo-shine{50%{opacity:.45;transform:scale(.72) rotate(18deg)}}
.heritage-do-paper{background:repeating-linear-gradient(7deg,transparent 0 9px,#7256381a 10px 11px),linear-gradient(135deg,#cdb17c,#f1e5c7)}
.tabs{gap:5px}
.tabs button{padding:6px 9px;border:1px solid #ffffffb8;background:#ffffff82;color:#554c65}
.tabs .active{color:#442943;background:linear-gradient(135deg,#f6b1c8,#c8b3e7);box-shadow:0 4px 10px #a56d9e35}
.sticker-grid{gap:5px;padding:5px 9px 5px 2px;scrollbar-color:#c28eb1 #ffffff55}
.sticker-option{aspect-ratio:1;display:grid;place-items:center;background:#ffffff45;border:1px solid transparent;transition:.18s ease}
.sticker-option:hover{background:#fff;border-color:#efcada;transform:translateY(-2px) scale(1.08)}
.sticker-option.sticker-asset{
  min-height:0;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:5px;
  background:#ffffff45;
  border-color:transparent;
}
.sticker-option.sticker-asset img{
  width:36px;
  height:36px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px #50351f35);
}
.placed img{
  width:56px;
  height:56px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 3px 4px #50351f45);
}
.tool-buttons{gap:8px}
.tool-buttons button,.workbar button{
  border:1px solid #fff;
  color:#3e3851;
  background:linear-gradient(145deg,#ffffffdf,#f7eefaaf);
  border-radius:11px;
  box-shadow:0 4px 12px #60456120,inset 0 1px 0 #fff;
  transition:.2s ease;
}
.tool-buttons button:hover,.workbar button:hover{transform:translateY(-2px);box-shadow:0 7px 16px #60456130,inset 0 1px 0 #fff}
.tool-buttons #export{color:#4b2941;background:linear-gradient(135deg,#ffc77e,#f58baa)}
.workbar{height:52px;padding:0 3px;position:relative}
.workbar span{color:#52654e;background:#ffffffa8;border:1px solid #fff;border-radius:999px;padding:6px 10px;box-shadow:0 3px 10px #70566d18}
.workbar span::first-letter{color:#31ca64}
.workbar .user-badge,
#userBadge{
  min-width:132px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 16px;
  color:#41364f;
  background:linear-gradient(145deg,#fffdfbe8,#f7edf5d9);
  border:2px solid #fff;
  border-radius:15px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.1px;
  box-shadow:0 6px 15px #67465e2e,inset 0 1px 0 #fff;
  text-align:center;
  white-space:nowrap;
}
#userBadge::first-letter{color:#5b2b89}
.workbar #userBadge{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
}
.workbar #userBadge:hover{transform:translate(-50%,calc(-50% - 2px))}
.canvas{
  min-height:700px;
  border:1px solid #fff;
  border-radius:20px;
  box-shadow:0 22px 55px #76507835,inset 0 1px 0 #fff;
  padding:24px 24px 76px;
}
.theme-peach{
  background-color:#f9dfd9;
  background-image:
    linear-gradient(#ffffff25 50%,transparent 50%),
    linear-gradient(90deg,#ffffff25 50%,transparent 50%),
    linear-gradient(135deg,#f7cadb,#fbe1cc 55%,#e3d7f4);
  background-size:34px 34px,34px 34px,100% 100%;
}
.theme-green{background:linear-gradient(135deg,#d8f0df,#f7e4dc 52%,#d7e8da)}
.theme-cream{background:linear-gradient(135deg,#fff2d4,#ffe2c4 52%,#efd9e5)}
.theme-purple{background:linear-gradient(135deg,#e1d6f6,#f4d5e6 52%,#d9c9ef)}
.theme-blue{background:linear-gradient(135deg,#d9ecfa,#dbe4f7 50%,#ead9f0)}
.theme-pink{background:linear-gradient(135deg,#fbd3e3,#ffd8cb 52%,#edcfed)}
.theme-mint{background:linear-gradient(135deg,#d6f1e5,#e8f2df 52%,#dce5f5)}
.theme-sunset{background:linear-gradient(135deg,#ffcdb3,#f7b8d1 48%,#bca9e7)}
.theme-yellow{background:linear-gradient(135deg,#fff1b8,#ffd79d 52%,#f4d5dd)}
.theme-red{background:linear-gradient(135deg,#fac5ca,#ef9ca7 52%,#ecc6dd)}
.theme-dongson{
  background-color:#fff2c4;
  background-image:
    linear-gradient(110deg,#fff9e75f,#fff3c84f 45%,#ffe59f45),
    url('dong-son-heritage.webp');
  background-size:100% 100%,cover;
  background-position:center;
  background-repeat:no-repeat;
}
.theme-lacbird{
  background-color:#fff4d7;
  background-image:
    linear-gradient(110deg,#fffdf067,#fff8e852 48%,#ffe9ae45),
    url('chim-lac-heritage.webp');
  background-size:100% 100%,cover;
  background-position:center;
  background-repeat:no-repeat;
}
.theme-lotus{
  background-color:#f2c6cd;
  background-image:
    radial-gradient(ellipse at 50% 100%,#b95f7a2e 0 18%,transparent 19%),
    radial-gradient(ellipse at 0 50%,#fff7ed70 0 17%,transparent 18%),
    linear-gradient(135deg,#f4c4d0,#efd7c5 55%,#dcaebe);
  background-size:90px 55px,100px 70px,100% 100%;
}
.theme-bamboo{
  background-color:#2d7155;
  background-image:
    linear-gradient(112deg,#eff8d9d9 0%,#f8efd0c7 48%,#dcebc7cf 100%),
    url('tre-viet-heritage.svg');
  background-size:100% 100%,cover;
  background-position:center,center;
  background-attachment:scroll;
}
.theme-do-paper{
  background-color:#e5d1a8;
  background-image:
    repeating-linear-gradient(7deg,transparent 0 16px,#7d624312 17px 18px),
    repeating-linear-gradient(96deg,transparent 0 31px,#fff6d31f 32px 34px),
    linear-gradient(135deg,#d8c194,#f0e3c4 55%,#cfb486);
}
.title{
  min-height:66px;
  margin:-4px -24px 8px;
  padding:7px 60px;
  background:linear-gradient(90deg,#ffe6b7d9,#ffd99fe8 48%,#ffe9c3d9);
  border-top:1px solid #ffffffa8;
  border-bottom:1px solid #f2c47f9c;
  box-shadow:inset 0 1px 0 #fff8,0 5px 14px #a76b5b18;
}
.title input{
  color:#292754;
  width:min(760px,82%);
  font:800 clamp(25px,2.25vw,35px) Arial,'Segoe UI','Noto Sans',sans-serif;
  letter-spacing:.7px;
  line-height:1.2;
  text-shadow:0 2px 0 #fff,0 3px 9px #6b52712c;
}
.schedule{gap:5px;margin-top:8px}
.schedule{margin-bottom:34px}
.head,.time,.cell,.session{border:1px solid #fff9;box-shadow:0 2px 8px #67445f16}
.head{font:800 13px Quicksand;color:#36304e;background:#f7ebea}
.head:first-child{background:linear-gradient(135deg,#f6e6dd,#eadde9)}
.day0,.day1,.day2,.day3,.day4,.day5,.day6{color:#fff;text-shadow:0 1px 1px #5b315944}
.day0{background:linear-gradient(135deg,#ee7eaa,#dd6299)}
.day1{background:linear-gradient(135deg,#79d7bf,#57bdab)}
.day2{background:linear-gradient(135deg,#f8cf64,#eeb846)}
.day3{background:linear-gradient(135deg,#a6d689,#83bf69)}
.day4{background:linear-gradient(135deg,#7bd4e3,#58bbd1)}
.day5{background:linear-gradient(135deg,#b49ade,#967bc8)}
.day6{background:linear-gradient(135deg,#fa9b8d,#eb796e)}
.session{
  min-height:36px;
  color:#4d354a;
  background:linear-gradient(90deg,#f8ce4e,#f2bc3b);
  border-color:#ffe9a3;
  font:800 14px Quicksand;
  box-shadow:0 4px 12px #a8792c35,inset 0 1px 0 #fff7;
}
.session.afternoon{background:linear-gradient(90deg,#ff9d56,#f47e4b);border-color:#ffc397;color:#4e2d27}
.session.evening{background:linear-gradient(90deg,#aa8ed7,#8d74c5);border-color:#cdbded;color:#fff}
.session-actions button{background:#fff9;border:1px solid #fff;color:#51435c}
.time{color:#453c58;background:#fff3efdb;border-color:#fff;font-weight:800}
.cell{background:linear-gradient(100deg,#ffffffbf,#fff7f8a3);border-color:#fff;transition:.16s ease}
.cell:hover{background:#fff;box-shadow:0 4px 13px #895e8030;transform:translateY(-1px)}
.cell.empty:after{color:#936f8f58;font-weight:500}
.row-remove{border-color:#d4b4cc;background:#fff9fb;color:#86607c;box-shadow:0 3px 8px #6e4d6830}
.subject{border:1px solid #ffffffb8;box-shadow:0 4px 10px #543d512b}
.decor{display:none}

body[data-theme="dongson"],body[data-theme="lacbird"]{
  background-color:#f5d57e;
  background-image:
    linear-gradient(120deg,#fff3b9c7,#f5c85c7d 52%,#fff0b1a6),
    url('dong-son-heritage.webp');
  background-size:100% 100%,cover;
  background-position:center;
  background-attachment:scroll;
}
body[data-theme="lacbird"]{
  background-image:
    linear-gradient(120deg,#fff6d4d9,#f2ca7180 54%,#ffeab6bd),
    url('chim-lac-heritage.webp');
}
body[data-theme="dongson"] header,body[data-theme="lacbird"] header{
  background:linear-gradient(90deg,#fff8dedf,#f6d682d6,#fff8e4df);
  border-bottom-color:#d7a94380;
}
body[data-theme="dongson"] .tools,body[data-theme="lacbird"] .tools{
  background:linear-gradient(155deg,#fffbeddf,#f5dd9ac9);
  border-color:#fff3c9;
  box-shadow:0 18px 45px #7c571f32,inset 0 1px 0 #fff;
}
body[data-theme="dongson"] .logo,body[data-theme="lacbird"] .logo{
  color:#8a5b19;
  text-shadow:0 2px 0 #fff2bc,0 0 15px #dca33c;
}
body[data-theme="dongson"] nav .active,body[data-theme="lacbird"] nav .active{
  color:#55300f;
  background:linear-gradient(135deg,#f4cb69,#bd711f 58%,#e9a94c);
  box-shadow:0 7px 18px #8e5b274c,inset 0 1px 0 #fff6c9;
}
body[data-theme="dongson"] .title,body[data-theme="lacbird"] .title{
  background:linear-gradient(90deg,#fff4cbd9,#f3cf72e8 48%,#fff0bdd9);
  border-bottom-color:#c9973a8f;
}
.benefits{max-width:1320px;margin:14px auto 34px}
.benefits>div,.template{
  background:#fffaf6c7;
  border:1px solid #fff;
  box-shadow:0 12px 28px #73547325,inset 0 1px 0 #fff;
  backdrop-filter:none;
}
.templates{background:linear-gradient(180deg,#f8e2eacd,#edd9ed);border-top:1px solid #fff;padding-top:36px}
.template{transition:.2s ease}
.template:hover{transform:translateY(-4px);box-shadow:0 16px 34px #73547335}
.template button,.primary{color:#512d43!important;border:1px solid #fff!important;background:linear-gradient(135deg,#ffc275,#f187a9)!important;box-shadow:0 4px 12px #b9677b35}
.backdrop{background:#3b294b70;backdrop-filter:none}
.modal{background:linear-gradient(145deg,#fffdfb,#f7eaf4);border:1px solid #fff;box-shadow:0 28px 80px #38284066}
.auth-tabs{background:#eadce9}
.auth-tabs .active{box-shadow:0 3px 10px #63496220}
.modal input,.modal textarea{border-color:#d8c4d5;background:#fffdfc}
.modal .submit{color:#fff;background:linear-gradient(135deg,#bd769c,#9368b3);box-shadow:0 7px 18px #80517b4a}
#toast{background:#302942e8;border:1px solid #ffffff52;box-shadow:0 10px 28px #39283d55;backdrop-filter:none}
.benefits,.templates{content-visibility:auto;contain-intrinsic-size:420px}

@media(max-width:650px){
  header{background:#fff7fadf}
  nav{background:#fff7faf2;box-shadow:0 12px 24px #54365430}
}

/* Cross-device modal choices: valid markup and reliable iOS tap targets. */
.choice-field{min-width:0;border:0;padding:0;margin:12px 0}
.choice-field legend{padding:0;font-size:13px;font-weight:700}
#subjectModal{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#activityIcons,#colors{position:relative;z-index:2;grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
.activity-icon,.color{
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  min-width:44px;
  min-height:44px;
  margin:0;
}
#colors{display:grid;gap:8px;margin-top:7px}
.color{width:100%;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px #00000012}
.color.active{border-color:#40332e;box-shadow:0 0 0 3px #fff,0 0 0 5px #7a5b4a}
.activity-icon.active{transform:scale(.96)}
@media(max-width:520px){
  #colors{grid-template-columns:repeat(4,minmax(44px,1fr))}
  .icon-picker{grid-template-columns:repeat(5,minmax(44px,1fr))}
}
@media(max-width:360px){.icon-picker{grid-template-columns:repeat(4,minmax(44px,1fr))}}

/* Sticker touch controls: tap, drag, pinch and flip. */
.sticker-content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform-origin:center;
  will-change:transform;
  pointer-events:none;
}
.stools{
  top:-35px;
  right:-16px;
  z-index:8;
  gap:3px;
  filter:none;
}
.stools button{
  width:30px;
  height:30px;
  border:1px solid #fff;
  background:#fff;
  box-shadow:0 3px 9px #62485b70;
  font-size:15px;
  font-weight:900;
  touch-action:manipulation;
}
.placed:hover,.placed:active,.placed:focus,.placed:focus-within{outline:2px dashed #bd7658;border-radius:8px}
.placed:hover .stools,.placed:active .stools,.placed:focus .stools,.placed:focus-within .stools{display:flex}
.placed::before{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:0;
  border-radius:28px;
  pointer-events:auto;
  transform:scale(var(--sticker-scale,1));
  transform-origin:center;
}
.sticker-content{z-index:1}

@media(max-width:1120px){
  .workbar #userBadge{position:static;transform:none}
  .workbar #userBadge:hover{transform:translateY(-2px)}
}

@media(max-width:900px){
  main{grid-template-columns:1fr;padding:12px}
  .tools{position:relative;top:0;width:100%}
  .color-swatches{grid-template-columns:repeat(9,minmax(38px,1fr))}
  .heritage-grid{grid-template-columns:repeat(4,1fr)}
  .workbar{height:auto;min-height:52px;flex-wrap:wrap;justify-content:center;padding:7px 3px}
  .workbar span{margin-right:0}
  .workbar #userBadge{order:2}
  .workbar #editTimes,.workbar #addDay,.workbar #addSession{order:3}
}

@media(max-width:650px){
  .color-swatches{grid-template-columns:repeat(5,56px);justify-content:start;gap:12px}
  .heritage-grid{grid-template-columns:1fr 1fr}
  .workbar span{width:100%;text-align:center}
  .workbar #userBadge{min-width:150px}
  .canvas{padding-bottom:72px}
}