:root {
  --sky:#D1E9F6; --sky-d:#a8d0ee; --sky-dd:#5a9fc8;
  --cream:#F6EACB; --cream-d:#e0cc96; --cream-dd:#b89a40;
  --peach:#F1D3CE; --peach-d:#d9a89e; --peach-dd:#b06060;
  --mauve:#EECAD5; --mauve-d:#d0a0b8; --mauve-dd:#a06080;
  --mint:#d4edd8; --mint-d:#88c494;
  --white:#fffcf8; --bg:#f9f5ef;
  --ink:#3d3530; --ink-soft:#8a7e78; --ink-light:#c0b4ae;
  --r:20px; --shadow:0 4px 20px rgba(140,110,100,0.12);
  --shadow-hover:0 8px 32px rgba(140,110,100,0.2);
  --content-bg:
    radial-gradient(ellipse at 12% 8%, rgba(209,233,246,0.58) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 94%, rgba(238,202,213,0.36) 0%, transparent 40%),
    radial-gradient(ellipse at 52% 40%, rgba(241,211,206,0.26) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, transparent 20%),
    var(--bg);
  --modal-backdrop:rgba(100,80,70,0.3);
  --home-glow-a:rgba(209,233,246,0.52);
  --home-glow-b:rgba(238,202,213,0.34);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Sarabun',sans-serif;background:var(--bg);color:var(--ink);display:flex;}

body[data-theme="dark"]{
  --sky:#394756; --sky-d:#7ea7c8; --sky-dd:#e8f3fb;
  --cream:#5f543c; --cream-d:#b9a671; --cream-dd:#f5e1a6;
  --peach:#665154; --peach-d:#b88c90; --peach-dd:#ffe5df;
  --mauve:#564b5b; --mauve-d:#a992b2; --mauve-dd:#f2e4f7;
  --mint:#32463f; --mint-d:#7db592;
  --white:#343b45; --bg:#252a31;
  --ink:#f6f0e9; --ink-soft:#ddd2c8; --ink-light:#b7aea6;
  --shadow:0 12px 30px rgba(0,0,0,0.24);
  --shadow-hover:0 16px 38px rgba(0,0,0,0.32);
  --content-bg:
    radial-gradient(ellipse at 14% 10%, rgba(126,167,200,0.18) 0%, transparent 42%),
    radial-gradient(ellipse at 84% 92%, rgba(169,146,178,0.16) 0%, transparent 38%),
    radial-gradient(ellipse at 52% 36%, rgba(185,166,113,0.10) 0%, transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 18%),
    var(--bg);
  --modal-backdrop:rgba(8,10,12,0.62);
  --home-glow-a:rgba(126,167,200,0.18);
  --home-glow-b:rgba(169,146,178,0.15);
}

body[data-theme="moss"]{
  --sky:#d8e4d5; --sky-d:#8c9579; --sky-dd:#4f5644;
  --cream:#EACFA5; --cream-d:#ceb07d; --cream-dd:#7f6030;
  --peach:#E6BB96; --peach-d:#cb9870; --peach-dd:#85593c;
  --mauve:#BE9A98; --mauve-d:#AA7A79; --mauve-dd:#684847;
  --mint:#dce6d2; --mint-d:#8c9579;
  --white:#fffaf4; --bg:#f4ede4;
  --ink:#433833; --ink-soft:#8c7a73; --ink-light:#b09d96;
  --shadow:0 8px 24px rgba(121,98,89,0.12);
  --shadow-hover:0 12px 32px rgba(121,98,89,0.18);
  --content-bg:
    radial-gradient(ellipse at 14% 10%, rgba(140,149,121,0.18) 0%, transparent 42%),
    radial-gradient(ellipse at 84% 92%, rgba(190,154,152,0.20) 0%, transparent 38%),
    radial-gradient(ellipse at 52% 36%, rgba(234,207,165,0.24) 0%, transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, transparent 18%),
    var(--bg);
  --modal-backdrop:rgba(87,73,66,0.28);
  --home-glow-a:rgba(140,149,121,0.22);
  --home-glow-b:rgba(190,154,152,0.22);
}

/* ══════════ SIDEBAR ══════════ */
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--white);
  border-right:1.5px solid var(--peach);
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
  padding:0 0 20px;
}
.sb-logo{
  padding:16px 16px 12px;
  border-bottom:1.5px solid var(--peach);
  display:flex;align-items:center;gap:10px;
}
.sb-logo-text{font-family:'Itim',cursive;font-size:1rem;color:var(--ink);line-height:1.2;}
.sb-logo-text span{font-size:0.7rem;color:var(--ink-soft);font-family:'Sarabun',sans-serif;display:block;}
.logo-wrap{position:relative;flex-shrink:0;cursor:default;width:38px;height:38px;}
.logo-hint{
  position:absolute;inset:0;border-radius:12px;
  background:rgba(60,50,40,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:0.55rem;color:white;font-weight:700;
  opacity:0;transition:opacity 0.2s;text-align:center;line-height:1.3;
}
.logo-img-el{width:38px;height:38px;border-radius:12px;object-fit:cover;display:none;}
#logo-file-input{display:none;}

.sb-leaves{
  margin:12px 14px;
  background:linear-gradient(135deg,var(--mint),#eaf8ec);
  border-radius:14px;padding:10px 12px;
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--mint-d);
  cursor:pointer;
}
.sb-leaves-icon{font-size:1.4rem;}
.sb-leaves-num{font-family:'Itim',cursive;font-size:1.3rem;color:#2a7040;line-height:1;}
.sb-leaves-label{font-size:0.72rem;color:#3a8050;font-weight:600;}

.sb-section{padding:10px 14px 4px;font-size:0.68rem;font-weight:700;color:var(--ink-light);letter-spacing:1px;text-transform:uppercase;}
.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;margin:1px 8px;
  border-radius:12px;cursor:pointer;
  font-size:0.85rem;font-weight:500;color:var(--ink);
  transition:all 0.15s;
  position:relative;
}
.sb-item:hover{background:var(--cream);}
.sb-item.active{background:var(--sky);color:var(--sky-dd);font-weight:700;}
.sb-item .icon{font-size:1rem;width:20px;text-align:center;}
.sb-badge{
  margin-left:auto;background:var(--peach);color:var(--peach-dd);
  border-radius:8px;padding:1px 7px;font-size:0.68rem;font-weight:700;
}
.sb-badge.green{background:var(--mint);color:#2a7040;}

/* ══════════ MAIN CONTENT ══════════ */
.content{flex:1;min-width:0;height:100vh;overflow-y:auto;background:var(--content-bg);}
.page{display:none;width:100%;min-width:0;padding:28px 32px;max-width:none;}
.page.active{display:block;}
#page-home{max-width:none;}

/* ══════════ PAGE HEADER ══════════ */
.page-header{margin-bottom:24px;}
.page-title{font-family:'Itim',cursive;font-size:2rem;color:var(--ink);display:flex;align-items:center;gap:10px;}
.page-sub{font-size:0.85rem;color:var(--ink-soft);margin-top:4px;}

/* ══════════ CARDS ══════════ */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:16px;border:1.5px solid transparent;transition:all 0.2s;}
.card:hover{box-shadow:var(--shadow-hover);}
.card-title{font-family:'Itim',cursive;font-size:1.1rem;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:14px;}

/* ══════════ STATS ROW ══════════ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.stat-card{background:var(--white);border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow);border:1.5px solid transparent;transition:transform 0.2s;}
.stat-card:hover{transform:translateY(-3px);}
.stat-val{font-family:'Itim',cursive;font-size:2rem;line-height:1;}
.stat-lbl{font-size:0.72rem;color:var(--ink-soft);margin-top:4px;font-weight:600;}
.stat-val-mint{color:#2a7040;}

/* ══════════ BUTTON ══════════ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:12px;border:none;cursor:pointer;font-family:'Sarabun',sans-serif;font-size:0.85rem;font-weight:600;transition:all 0.2s;}
.btn:hover{transform:scale(1.03);}
.btn-sky{background:var(--sky-d);color:var(--sky-dd);}
.btn-peach{background:var(--peach);color:var(--peach-dd);}
.btn-cream{background:var(--cream);color:var(--cream-dd);}
.btn-mauve{background:var(--mauve);color:var(--mauve-dd);}
.btn-mint{background:var(--mint);color:#2a7040;}
.btn-danger{background:#ffe0e0;color:#a03030;}
.btn-sm{padding:5px 12px;font-size:0.78rem;}

/* ══════════ INPUT ══════════ */
input[type=text],input[type=date],textarea,select{
  width:100%;padding:9px 12px;border:1.5px solid var(--peach);
  border-radius:12px;font-family:'Sarabun',sans-serif;font-size:0.85rem;
  background:var(--white);color:var(--ink);outline:none;
  transition:border-color 0.2s;
}
input[type=text],input[type=date],select{
  min-height:41px;
}
input[type=text]:focus,input[type=date]:focus,textarea:focus,select:focus{border-color:var(--sky-d);}
textarea{resize:vertical;min-height:70px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.form-full{margin-bottom:12px;}
label{font-size:0.78rem;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:4px;}

/* ══════════ BADGE/CHIP ══════════ */
.chip{display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.72rem;font-weight:700;}
.chip-sky{background:var(--sky);color:var(--sky-dd);}
.chip-cream{background:var(--cream);color:var(--cream-dd);}
.chip-peach{background:var(--peach);color:var(--peach-dd);}
.chip-mauve{background:var(--mauve);color:var(--mauve-dd);}
.chip-mint{background:var(--mint);color:#2a7040;}
.chip-red{background:#ffe0e0;color:#a03030;}
.chip-clickable{
  border:none;cursor:pointer;font-family:'Sarabun',sans-serif;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform 0.15s, box-shadow 0.15s;
}
.chip-clickable:hover{transform:translateY(-1px);}
.chip-clickable.is-active{box-shadow:0 0 0 2px rgba(121,87,118,0.28);}

/* ══════════ TASK ITEM ══════════ */
.task-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-radius:14px;margin-bottom:8px;
  background:var(--white);border:1.5px solid transparent;
  transition:all 0.2s;cursor:pointer;
}
.task-item:hover{border-color:var(--sky-d);box-shadow:0 2px 10px rgba(140,110,100,0.08);}
.task-item.done{opacity:0.5;}
.task-item.done .task-text{text-decoration:line-through;color:var(--ink-soft);}
.task-cb{
  width:22px;height:22px;border-radius:8px;
  border:2px solid var(--mauve-d);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;background:var(--white);
}
.task-item.done .task-cb{background:var(--mauve);border-color:var(--mauve-dd);color:white;}
.task-main{flex:1;min-width:0;}
.task-text{
  font-size:0.88rem;font-weight:500;flex:1;min-width:0;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.55;
}
.task-meta{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap;}
.task-delete{margin-left:auto;opacity:0;font-size:0.8rem;color:var(--ink-light);padding:2px 6px;border-radius:6px;transition:opacity 0.2s;}
.task-item:hover .task-delete{opacity:1;}

/* ══════════ BUG ITEM ══════════ */
.bug-item{
  background:var(--white);border-radius:14px;padding:14px 16px;
  margin-bottom:10px;border:1.5px solid transparent;
  cursor:pointer;transition:all 0.2s;
}
.bug-item:hover{border-color:var(--peach-d);box-shadow:var(--shadow);}
.bug-title{font-weight:700;font-size:0.9rem;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.bug-root{font-size:0.8rem;color:var(--ink-soft);margin-top:4px;}
.bug-root strong{color:var(--peach-dd);}

/* ══════════ POMODORO ══════════ */
.home-pomo-helper{
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin-top:-4px;
  margin-bottom:6px;
}
.pomo-helper-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,252,248,0.82));
  border:1.5px solid var(--peach);
  border-radius:18px;
  padding:14px 16px;
  margin-bottom:16px;
}
.pomo-helper-title{
  font-size:0.92rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.pomo-helper-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.pomo-helper-item{
  background:rgba(255,255,255,0.6);
  border:1.5px solid rgba(225,192,184,0.65);
  border-radius:14px;
  padding:10px 12px;
  display:grid;
  gap:4px;
}
.pomo-helper-item strong{
  font-size:0.8rem;
  color:var(--ink);
}
.pomo-helper-item span{
  font-size:0.76rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.pomo-display{
  text-align:center;padding:30px 20px;
  background:linear-gradient(135deg,var(--sky),var(--cream));
  border-radius:24px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.pomo-time{
  font-family:'Itim',cursive;font-size:4.5rem;
  color:var(--ink);line-height:1;margin-bottom:8px;
  text-shadow:0 2px 8px rgba(100,80,60,0.15);
}
.pomo-label{font-size:0.88rem;color:var(--ink-soft);font-weight:600;}
.pomo-btns{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.pomo-log{max-height:200px;overflow-y:auto;}
.pomo-log-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;margin-bottom:6px;background:var(--cream);font-size:0.8rem;}

/* ══════════ LEAF ANIMATION ══════════ */
@keyframes leafFloat{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(-60px) rotate(20deg);opacity:0;}
}
.leaf-pop{position:fixed;pointer-events:none;z-index:9999;font-size:1.5rem;animation:leafFloat 1.2s ease-out forwards;}

/* ══════════ INBOX ══════════ */
.inbox-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;background:var(--white);border-radius:12px;
  margin-bottom:8px;border:1.5px solid transparent;
  transition:all 0.2s;
}
.inbox-item:hover{border-color:var(--cream-d);}
.inbox-main{flex:1;min-width:0;}
.inbox-text{
  font-size:0.88rem;
  line-height:1.55;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.inbox-text-sm{
  font-size:0.82rem;
}
.inbox-date{
  font-size:0.7rem;
  color:var(--ink-light);
}
.inbox-compose-row{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  align-items:flex-start;
}
.inbox-compose-wrap{
  flex:1 1 auto;
  min-width:0;
}
.inbox-compose-input{
  min-height:41px;
  max-height:160px;
  resize:none;
  overflow-y:hidden;
}
.inbox-compose-hint{
  margin-top:6px;
  font-size:0.73rem;
  color:var(--ink-light);
  line-height:1.5;
}

/* ══════════ HOME DASHBOARD ══════════ */
#page-home{
  position:relative;
  overflow:hidden;
}
#page-home > :not(.home-decor){
  position:relative;
  z-index:1;
}
.home-decor{
  position:absolute;
  inset:4px 22px auto;
  height:190px;
  pointer-events:none;
  z-index:0;
}
.home-decor-blob{
  position:absolute;
  border-radius:999px;
  filter:blur(14px);
  opacity:0.9;
}
.home-decor-blob-a{
  top:-24px;
  left:4%;
  width:260px;
  height:128px;
  background:var(--home-glow-a);
}
.home-decor-blob-b{
  top:10px;
  right:6%;
  width:220px;
  height:116px;
  background:var(--home-glow-b);
}
.home-decor-leaf{
  position:absolute;
  font-size:1.1rem;
  opacity:0.34;
  filter:drop-shadow(0 6px 18px rgba(144,118,102,0.16));
  animation:homeLeafSway 6.4s ease-in-out infinite;
  transform-origin:center;
}
.home-decor-leaf-1{top:10px;left:3%;animation-delay:0s;}
.home-decor-leaf-2{top:20px;right:10%;font-size:1.2rem;animation-delay:1.2s;}
.home-decor-leaf-3{top:92px;left:14%;font-size:0.98rem;animation-delay:2s;}
.home-decor-leaf-4{top:116px;right:16%;font-size:1rem;animation-delay:0.7s;}
.home-decor-leaf-5{top:48px;left:28%;font-size:0.9rem;animation-delay:2.8s;}
@keyframes homeLeafSway{
  0%,100%{transform:rotate(-8deg) translateY(0);}
  50%{transform:rotate(8deg) translateY(-8px);}
}
@keyframes homeStarTwinkle{
  0%,100%{transform:scale(0.92) translateY(0);opacity:0.2;}
  50%{transform:scale(1.16) translateY(-2px);opacity:0.62;}
}
.home-dashboard-layout{
  display:grid;
  gap:18px;
}
.home-main-top,
.home-main-bottom,
.home-side-column{
  min-width:0;
}
.home-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.home-focus-item,
.home-snapshot-item{
  background:var(--white);
  border-radius:16px;
  padding:14px 16px;
  border:1.5px solid var(--peach);
}
.home-focus-head,
.home-snapshot-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.home-focus-title,
.home-snapshot-title{
  font-weight:700;
  font-size:0.9rem;
  color:var(--ink);
}
.home-focus-sub,
.home-snapshot-sub{
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin-top:4px;
}
.home-focus-meta,
.home-snapshot-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.home-focus-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:10px;
  flex-wrap:wrap;
}
.home-empty-note{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,0.76);
  border:1.5px dashed var(--cream-d);
  font-size:0.82rem;
  color:var(--ink-soft);
  line-height:1.7;
}
@media(min-width:1180px){
  #page-home.home-no-bugs #home-leaves-stat{
    grid-column:span 2;
  }
  #page-home.home-no-bugs #home-pomo-card{
    grid-column:1 / -1;
  }
  .home-dashboard-layout{
    grid-template-columns:minmax(0,1.45fr) 380px;
    grid-template-areas:
      "top side"
      "bottom side";
    align-items:start;
  }
  .home-main-top{grid-area:top;}
  .home-main-bottom{grid-area:bottom;}
  .home-side-column{
    grid-area:side;
    position:sticky;
    top:28px;
    align-self:start;
  }
  .home-side-column .card{margin-bottom:0;}
  .home-side-column #home-next-list{
    max-height:calc(100vh - 240px);
    overflow:auto;
    padding-right:4px;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-decor-leaf{animation:none;}
}

/* ══════════ PLANNING ══════════ */
.planning-filter-note{
  margin:-4px 0 16px;
  font-size:0.78rem;
  color:var(--ink-soft);
}
.planning-view-switch{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.planning-view-switch .btn{
  min-height:41px;
  padding:9px 14px;
  justify-content:center;
}
.planning-layout{
  display:grid;
  gap:18px;
}
.planning-layout.is-wide-view{
  grid-template-columns:minmax(0,1fr);
}
.planning-layout.is-wide-view .planning-side{
  display:none;
}
.planning-layout.is-pm-view{
  grid-template-columns:minmax(0,1fr);
}
.planning-layout.is-pm-view .planning-side{
  display:none;
}
.planning-main,
.planning-side{
  min-width:0;
}
.planning-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.planning-board{
  padding:18px;
}
.planning-calendar-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.planning-calendar-label{
  font-family:'Itim',cursive;
  font-size:1.35rem;
  color:var(--ink);
}
.planning-calendar-sub{
  margin-top:4px;
  font-size:0.76rem;
  color:var(--ink-light);
  line-height:1.5;
}
.planning-calendar-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.planning-calendar-scroll{
  overflow-x:auto;
  padding-bottom:4px;
}
.planning-pm-scroll{
  display:none;
  overflow:auto;
  padding-bottom:4px;
}
.planning-project-scroll{
  display:none;
  overflow:auto;
  padding-bottom:4px;
}
.planning-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  min-width:860px;
  position:relative;
  align-items:stretch;
}
.planning-dow{
  padding:6px 4px;
  text-align:center;
  font-size:0.72rem;
  font-weight:700;
  color:var(--ink-light);
}
.planning-day{
  min-height:140px;
  background:rgba(255,255,255,0.92);
  border:1.5px solid rgba(223,205,188,0.95);
  border-radius:18px;
  padding:10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  user-select:none;
  position:relative;
  z-index:1;
}
.planning-day:hover{
  box-shadow:0 6px 18px rgba(120,92,82,0.08);
  border-color:var(--cream-d);
}
.planning-day.is-outside{
  opacity:0.42;
  background:rgba(255,255,255,0.5);
  min-height:100px;
}
.planning-day.is-today{
  border-color:var(--sky-d);
  box-shadow:0 0 0 3px rgba(175,214,232,0.32);
}
.planning-day.is-selected{
  background:linear-gradient(180deg, rgba(248,241,255,0.95), rgba(255,255,255,0.98));
  border-color:var(--mauve-d);
  box-shadow:0 10px 24px rgba(174,145,179,0.16);
}
.planning-day.is-range-start,
.planning-day.is-range-end{
  border-color:var(--peach-d);
}
.planning-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.planning-day-num{
  font-family:'Itim',cursive;
  font-size:1.1rem;
  color:var(--ink);
}
.planning-today-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:var(--sky);
  color:var(--sky-dd);
  font-size:0.66rem;
  font-weight:800;
}
.planning-day-body{
  flex:1;
  min-height:52px;
}
.planning-plan-pill,
.planning-more-pill{
  border:none;
  border-radius:12px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  gap:7px;
  text-align:center;
  cursor:pointer;
  font-family:'Sarabun',sans-serif;
  font-size:0.74rem;
  font-weight:700;
  transition:box-shadow 0.12s ease, background 0.12s ease;
}
.planning-plan-pill{
  width:auto;
  background:var(--plan-bg);
  color:var(--plan-fg);
  box-shadow:inset 0 0 0 1px var(--plan-border);
  justify-content:center;
  align-self:start;
  min-height:34px;
  margin-top:calc(40px + (var(--plan-lane, 0) * 36px));
  position:relative;
  z-index:2;
  overflow:hidden;
}
.planning-plan-pill:hover,
.planning-more-pill:hover{
  box-shadow:inset 0 0 0 1px var(--plan-border), 0 6px 14px rgba(120,92,82,0.12);
}
.planning-plan-pill.is-continued-start{
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}
.planning-plan-pill.is-continued-end{
  border-top-right-radius:6px;
  border-bottom-right-radius:6px;
}
.planning-plan-pill-emoji{
  flex-shrink:0;
  font-size:0.95rem;
}
.planning-plan-pill-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}
.planning-more-pill{
  width:100%;
  justify-content:center;
  background:rgba(255,255,255,0.9);
  color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px rgba(223,205,188,0.95);
}
.planning-empty{
  text-align:center;
  padding:12px 8px;
  color:var(--ink-soft);
}
.planning-empty-icon{
  font-size:2rem;
  margin-bottom:6px;
}
.planning-empty-title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.planning-empty-sub{
  font-size:0.78rem;
  line-height:1.6;
}
.planning-selection-summary{
  background:rgba(255,255,255,0.84);
  border:1.5px dashed var(--mauve-d);
  border-radius:16px;
  padding:12px 14px;
}
.planning-selection-range{
  font-family:'Itim',cursive;
  font-size:1.04rem;
  color:var(--ink);
}
.planning-selection-meta{
  margin-top:4px;
  font-size:0.76rem;
  color:var(--ink-soft);
}
.planning-selection-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.planning-list-item{
  background:rgba(255,255,255,0.94);
  border:1.5px solid var(--plan-border);
  border-left-width:6px;
  border-radius:18px;
  padding:14px 16px;
  margin-bottom:12px;
}
.planning-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.planning-list-title{
  font-weight:800;
  color:var(--ink);
}
.planning-list-sub{
  font-size:0.76rem;
  color:var(--ink-soft);
  margin-top:4px;
}
.planning-list-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.planning-list-note{
  margin-top:10px;
  font-size:0.8rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.planning-list-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.planning-pm-board{
  min-width:max-content;
}
.planning-pm-header,
.planning-pm-row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  align-items:stretch;
}
.planning-pm-header{
  position:sticky;
  top:0;
  z-index:4;
}
.planning-pm-head-sticky,
.planning-pm-member{
  position:sticky;
  left:0;
  z-index:3;
  background:var(--white);
}
.planning-pm-head-sticky{
  padding:10px 12px;
  border:1.5px solid rgba(223,205,188,0.95);
  border-right:none;
  border-top-left-radius:18px;
  display:flex;
  align-items:center;
  font-size:0.78rem;
  font-weight:800;
  color:var(--ink-soft);
}
.planning-pm-days{
  display:grid;
  grid-template-columns:repeat(var(--pm-days), 42px);
  gap:2px;
  padding:0 0 0 2px;
  background:transparent;
}
.planning-pm-day-chip{
  min-height:54px;
  padding:6px 4px;
  border:1.5px solid rgba(223,205,188,0.95);
  background:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:0.68rem;
  color:var(--ink-soft);
  text-align:center;
}
.planning-pm-day-chip.is-first{
  border-top-right-radius:18px;
}
.planning-pm-day-chip.is-weekend{
  background:var(--bg);
}
.planning-pm-day-chip.is-today{
  background:var(--sky);
  color:var(--sky-dd);
  border-color:var(--sky-d);
}
.planning-pm-day-chip strong{
  font-size:0.86rem;
  line-height:1;
  color:inherit;
}
.planning-pm-member{
  padding:12px;
  border-left:1.5px solid rgba(223,205,188,0.95);
  border-right:1px solid rgba(223,205,188,0.95);
  border-bottom:1.5px solid rgba(223,205,188,0.95);
  display:flex;
  align-items:center;
  gap:10px;
}
.planning-pm-member-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.75rem;
  font-weight:800;
  flex-shrink:0;
}
.planning-pm-member-name{
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
}
.planning-pm-member-sub{
  margin-top:3px;
  font-size:0.7rem;
  color:var(--ink-soft);
}
.planning-pm-track{
  display:grid;
  grid-template-columns:repeat(var(--pm-days), 42px);
  grid-template-rows:repeat(var(--pm-lanes, 1), 34px);
  gap:2px;
  padding:6px 0 6px 2px;
  min-height:calc((var(--pm-lanes, 1) * 34px) + ((var(--pm-lanes, 1) - 1) * 2px) + 12px);
  border-right:1.5px solid rgba(223,205,188,0.95);
  border-bottom:1.5px solid rgba(223,205,188,0.95);
  background:rgba(255,255,255,0.92);
  position:relative;
}
.planning-pm-cell{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(223,205,188,0.82);
}
.planning-pm-cell.is-weekend{
  background:var(--bg);
}
.planning-pm-cell.is-today{
  background:color-mix(in srgb, var(--sky) 45%, white);
  border-color:var(--sky-d);
}
.planning-pm-bar{
  border:none;
  border-radius:12px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  font-family:'Sarabun',sans-serif;
  font-size:0.76rem;
  font-weight:800;
  color:var(--plan-fg);
  background:var(--plan-bg);
  box-shadow:inset 0 0 0 1px var(--plan-border);
  cursor:pointer;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.planning-pm-bar:hover{
  box-shadow:inset 0 0 0 1px var(--plan-border), 0 6px 14px rgba(120,92,82,0.12);
}
.planning-pm-bar.is-tiny{
  padding:0 4px;
  justify-content:center;
}
.planning-pm-bar.is-tiny .planning-pm-bar-text{
  display:none;
}
.planning-pm-bar-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.planning-pm-empty{
  padding:16px;
  text-align:center;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.88);
  border:1.5px dashed var(--cream-d);
  border-radius:16px;
}
.planning-project-board{
  min-width:max-content;
}
.planning-project-header,
.planning-project-row{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  align-items:stretch;
}
.planning-project-header{
  position:sticky;
  top:0;
  z-index:4;
}
.planning-project-head-sticky,
.planning-project-member{
  position:sticky;
  left:0;
  z-index:3;
  background:var(--white);
}
.planning-project-head-sticky{
  padding:12px 14px;
  border:1.5px solid rgba(223,205,188,0.95);
  border-right:none;
  border-top-left-radius:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.planning-project-head-title{
  font-size:0.8rem;
  font-weight:800;
  color:var(--ink-soft);
}
.planning-project-head-sub{
  font-size:0.7rem;
  color:var(--ink-light);
}
.planning-project-months{
  display:grid;
  grid-template-columns:repeat(var(--project-days), 18px);
  grid-template-rows:42px 34px;
  gap:2px;
  padding:0 0 0 2px;
}
.planning-project-month-chip{
  padding:8px 8px 6px;
  border:1.5px solid rgba(223,205,188,0.95);
  background:var(--cream);
  font-size:0.76rem;
  font-weight:800;
  color:var(--ink);
  display:flex;
  align-items:center;
}
.planning-project-month-chip.is-first{
  border-top-right-radius:18px;
}
.planning-project-week-chip{
  border:1.5px solid rgba(223,205,188,0.95);
  background:rgba(255,255,255,0.82);
  color:var(--ink-light);
  font-size:0.68rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.planning-project-week-chip.is-today{
  background:var(--sky);
  border-color:var(--sky-d);
  color:var(--sky-dd);
}
.planning-project-member{
  padding:14px;
  border-left:1.5px solid rgba(223,205,188,0.95);
  border-right:1px solid rgba(223,205,188,0.95);
  border-bottom:1.5px solid rgba(223,205,188,0.95);
}
.planning-project-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  justify-content:space-between;
}
.planning-project-name{
  font-weight:800;
  color:var(--ink);
  line-height:1.25;
}
.planning-project-meta{
  margin-top:6px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.planning-project-sub{
  margin-top:8px;
  font-size:0.74rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.planning-project-dates{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.72rem;
  color:var(--ink-soft);
}
.planning-project-track{
  display:grid;
  grid-template-columns:repeat(var(--project-days), 18px);
  grid-template-rows:repeat(var(--project-lanes, 1), 34px);
  gap:2px;
  padding:6px 0 6px 2px;
  min-height:calc((var(--project-lanes, 1) * 34px) + ((var(--project-lanes, 1) - 1) * 2px) + 12px);
  border-right:1.5px solid rgba(223,205,188,0.95);
  border-bottom:1.5px solid rgba(223,205,188,0.95);
  background:rgba(255,255,255,0.92);
  position:relative;
}
.planning-project-cell{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(223,205,188,0.82);
}
.planning-project-cell.is-month-start{
  box-shadow:inset 2px 0 0 rgba(223,205,188,0.95);
}
.planning-project-cell.is-today{
  background:color-mix(in srgb, var(--sky) 45%, white);
  border-color:var(--sky-d);
}
.planning-project-today-line{
  width:2px;
  background:var(--peach-dd);
  border-radius:999px;
  opacity:0.85;
  pointer-events:none;
  justify-self:center;
  align-self:stretch;
}
.planning-project-bar{
  border:none;
  border-radius:12px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  font-family:'Sarabun',sans-serif;
  font-size:0.75rem;
  font-weight:800;
  color:var(--plan-fg);
  background:var(--plan-bg);
  box-shadow:inset 0 0 0 1px var(--plan-border);
  cursor:pointer;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.planning-project-bar:hover{
  box-shadow:inset 0 0 0 1px var(--plan-border), 0 6px 14px rgba(120,92,82,0.12);
}
.planning-project-bar.is-tiny{
  padding:0 4px;
}
.planning-project-bar.is-tiny .planning-project-bar-text{
  display:none;
}
.planning-project-bar-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.planning-project-empty{
  padding:16px;
  text-align:center;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.88);
  border:1.5px dashed var(--cream-d);
  border-radius:16px;
}
.planning-layout.is-pm-view .planning-board{
  padding-bottom:16px;
}
.planning-layout.is-project-view .planning-board{
  padding-bottom:16px;
}
.custom-select-shell{
  position:relative;
  width:100%;
}
.custom-select-native{
  display:none !important;
}
.custom-select-trigger{
  width:100%;
  min-height:41px;
  border:1.5px solid var(--peach);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 8px 9px 12px;
  text-align:left;
  font-family:'Sarabun',sans-serif;
  font-size:0.85rem;
  cursor:pointer;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.12s ease;
}
.custom-select-trigger:hover{
  border-color:var(--cream-d);
  background:#fffaf4;
}
.custom-select-shell.is-open .custom-select-trigger{
  border-color:var(--sky-d);
  box-shadow:0 0 0 3px rgba(168,208,238,0.15);
}
.custom-select-shell.is-disabled .custom-select-trigger,
.custom-select-trigger:disabled{
  cursor:not-allowed;
  opacity:0.68;
  background:#f9f3ed;
  box-shadow:none;
}
.custom-select-trigger-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.custom-select-trigger-arrow{
  width:24px;
  height:24px;
  border-radius:8px;
  background:var(--cream);
  color:var(--cream-dd);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0.65rem;
  transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.custom-select-shell.is-open .custom-select-trigger-arrow{
  transform:rotate(180deg);
  background:var(--sky);
  color:var(--sky-dd);
}
.custom-select-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:30;
  display:none;
  padding:8px;
  border-radius:18px;
  background:rgba(255,252,248,0.98);
  border:1.5px solid var(--peach);
  box-shadow:0 16px 36px rgba(100,80,70,0.16);
  backdrop-filter:blur(6px);
}
.custom-select-panel.open{
  display:block;
}
.custom-select-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:240px;
  overflow:auto;
}
.custom-select-option{
  width:100%;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  box-shadow:inset 0 0 0 1.5px rgba(223,205,188,0.92);
  padding:10px 12px;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  font-family:'Sarabun',sans-serif;
  font-size:0.84rem;
  font-weight:700;
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.custom-select-option:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(130,100,92,0.08), inset 0 0 0 1.5px var(--mauve-d);
  background:linear-gradient(180deg,#fffdfd 0%, #fff5fb 100%);
}
.custom-select-option.is-selected{
  box-shadow:0 10px 20px rgba(168,208,238,0.18), inset 0 0 0 1.5px var(--sky-d);
  background:linear-gradient(180deg,#fdfefe 0%, #f4fbff 100%);
}
.custom-select-option.is-disabled,
.custom-select-option:disabled{
  cursor:not-allowed;
  opacity:0.55;
  transform:none;
  box-shadow:inset 0 0 0 1.5px rgba(223,205,188,0.92);
}
.custom-select-empty{
  padding:12px 14px;
  border-radius:14px;
  font-size:0.78rem;
  line-height:1.6;
  background:linear-gradient(180deg,#fffaf0 0%, #fff4dd 100%);
  border:1.5px dashed var(--cream-d);
  color:var(--cream-dd);
}
.custom-date-shell{
  position:relative;
  width:100%;
}
.custom-date-native{
  display:none !important;
}
.custom-date-trigger{
  width:100%;
  min-height:41px;
  border:1.5px solid var(--peach);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px 9px 12px;
  text-align:left;
  font-family:'Sarabun',sans-serif;
  font-size:0.85rem;
  cursor:pointer;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.12s ease;
}
.custom-date-trigger:hover{
  border-color:var(--cream-d);
  background:#fffaf4;
}
.custom-date-shell.is-open .custom-date-trigger{
  border-color:var(--sky-d);
  box-shadow:0 0 0 3px rgba(168,208,238,0.15);
}
.custom-date-shell.is-disabled .custom-date-trigger,
.custom-date-trigger:disabled{
  cursor:not-allowed;
  opacity:0.68;
  background:#f9f3ed;
  box-shadow:none;
}
.custom-date-trigger-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.custom-date-trigger-icon{
  width:24px;
  height:24px;
  border-radius:8px;
  background:var(--cream);
  color:var(--cream-dd);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0.8rem;
}
.custom-date-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:35;
  display:none;
  width:min(320px, calc(100vw - 32px));
  padding:10px;
  border-radius:20px;
  background:rgba(255,252,248,0.98);
  border:1.5px solid var(--peach);
  box-shadow:0 16px 36px rgba(100,80,70,0.16);
  backdrop-filter:blur(6px);
}
.custom-date-shell.is-upward .custom-date-panel{
  top:auto;
  bottom:calc(100% + 8px);
}
.custom-date-panel.open{
  display:block;
}
.custom-date-calendar{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.custom-date-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.custom-date-label{
  font-family:'Itim',cursive;
  font-size:1rem;
  color:var(--ink);
}
.custom-date-nav{
  width:32px;
  height:32px;
  border:none;
  border-radius:10px;
  background:var(--sky);
  color:var(--sky-dd);
  font-family:'Sarabun',sans-serif;
  font-size:1rem;
  cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.custom-date-nav:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(168,208,238,0.18);
}
.custom-date-weekdays,
.custom-date-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.custom-date-weekdays span{
  text-align:center;
  font-size:0.7rem;
  font-weight:700;
  color:var(--ink-light);
}
.custom-date-day{
  min-height:34px;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  box-shadow:inset 0 0 0 1.5px rgba(223,205,188,0.92);
  color:var(--ink);
  font-family:'Sarabun',sans-serif;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.custom-date-day:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(130,100,92,0.08), inset 0 0 0 1.5px var(--mauve-d);
  background:linear-gradient(180deg,#fffdfd 0%, #fff5fb 100%);
}
.custom-date-day.is-outside{
  opacity:0.42;
}
.custom-date-day.is-today{
  box-shadow:inset 0 0 0 1.5px var(--sky-d);
}
.custom-date-day.is-selected{
  background:linear-gradient(180deg,#fdfefe 0%, #f4fbff 100%);
  box-shadow:0 10px 20px rgba(168,208,238,0.18), inset 0 0 0 1.5px var(--sky-d);
  color:var(--sky-dd);
}
.custom-date-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.custom-date-action{
  border:none;
  border-radius:12px;
  padding:8px 12px;
  background:var(--cream);
  color:var(--cream-dd);
  font-family:'Sarabun',sans-serif;
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
}
.custom-date-action.is-primary{
  background:var(--sky);
  color:var(--sky-dd);
}
.plan-assignee-combobox{
  position:relative;
}
.plan-assignee-input-wrap{
  position:relative;
}
.plan-assignee-input-wrap input[type=text]{
  padding-right:42px;
}
.plan-assignee-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Sarabun',sans-serif;
  font-size:0.8rem;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.plan-assignee-toggle:hover{
  background:var(--cream);
  color:var(--cream-dd);
}
.plan-assignee-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:30;
  display:none;
  padding:8px;
  border-radius:18px;
  background:rgba(255,252,248,0.98);
  border:1.5px solid var(--peach);
  box-shadow:0 16px 36px rgba(100,80,70,0.16);
  backdrop-filter:blur(6px);
}
.plan-assignee-panel.open{
  display:block;
}
.plan-assignee-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:220px;
  overflow:auto;
}
.plan-assignee-option{
  width:100%;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  box-shadow:inset 0 0 0 1.5px rgba(223,205,188,0.92);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  font-family:'Sarabun',sans-serif;
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.plan-assignee-option:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(130,100,92,0.08), inset 0 0 0 1.5px var(--mauve-d);
  background:linear-gradient(180deg,#fffdfd 0%, #fff5fb 100%);
}
.plan-assignee-option.is-active{
  box-shadow:0 10px 20px rgba(168,208,238,0.18), inset 0 0 0 1.5px var(--sky-d);
  background:linear-gradient(180deg,#fdfefe 0%, #f4fbff 100%);
}
.plan-assignee-option-icon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--sky);
  color:var(--sky-dd);
  font-size:0.95rem;
}
.plan-assignee-option-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:0.84rem;
  font-weight:700;
}
.plan-assignee-empty,
.plan-assignee-hint{
  padding:12px 14px;
  border-radius:14px;
  font-size:0.78rem;
  line-height:1.6;
}
.plan-assignee-empty{
  background:linear-gradient(180deg,#fffaf0 0%, #fff4dd 100%);
  border:1.5px dashed var(--cream-d);
  color:var(--cream-dd);
}
.plan-assignee-hint{
  background:linear-gradient(180deg,#f6fbff 0%, #eef8ff 100%);
  border:1.5px dashed var(--sky-d);
  color:var(--sky-dd);
}
.plan-sticker-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
  margin-bottom:14px;
}
.plan-sticker-chip{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.92);
  box-shadow:inset 0 0 0 1.5px rgba(223,205,188,0.95);
  cursor:pointer;
  font-size:1.05rem;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.plan-sticker-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(130,100,92,0.08), inset 0 0 0 1.5px var(--mauve-d);
}

@media(min-width:1180px){
  .planning-layout{
    grid-template-columns:minmax(0,1.55fr) 360px;
    align-items:start;
  }
  .planning-side{
    align-self:start;
  }
}

@media(max-width:700px){
  .planning-day{
    min-height:116px;
    padding:8px 8px 10px;
  }
  .planning-plan-pill,
  .planning-more-pill{
    padding:6px 8px;
    font-size:0.7rem;
  }
}

/* ══════════ KB ITEM ══════════ */
.kb-item{
  background:var(--white);border-radius:14px;padding:14px 16px;
  margin-bottom:10px;border:1.5px solid transparent;
  cursor:pointer;transition:all 0.2s;
}
.kb-item:hover{border-color:var(--sky-d);box-shadow:var(--shadow);}

/* ══════════ PROJECT ITEM ══════════ */
.proj-item{
  background:var(--white);border-radius:16px;padding:16px 18px;
  margin-bottom:12px;border-left:4px solid var(--sky-d);
  transition:all 0.2s;
}
.proj-item:hover{box-shadow:var(--shadow);}
.progress-bar{height:8px;background:rgba(180,160,140,0.2);border-radius:8px;overflow:hidden;margin-top:8px;}
.progress-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--sky-d),var(--mauve-d));transition:width 0.4s;}

/* ══════════ REWARD SHOP ══════════ */
.reward-balance-card{
  background:linear-gradient(135deg,var(--mint),#e8faea);
  border-color:var(--mint-d);
  margin-bottom:20px;
}
.reward-balance-row{
  display:flex;
  align-items:center;
  gap:16px;
}
.reward-balance-icon{
  font-size:3rem;
  filter:drop-shadow(0 6px 16px rgba(86,149,102,0.14));
}
.reward-balance-num{
  font-family:'Itim',cursive;
  font-size:2.5rem;
  color:#2a7040;
  line-height:1;
}
.reward-balance-label{
  font-size:0.85rem;
  color:#3a8050;
  font-weight:600;
}
.reward-balance-rules{
  margin-left:auto;
  text-align:right;
  font-size:0.8rem;
  color:var(--ink-soft);
}
.reward-item{
  background:var(--white);border-radius:16px;padding:16px;
  text-align:center;box-shadow:var(--shadow);
  transition:transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor:pointer;
  border:1.5px solid transparent;
}
.reward-item:hover{transform:translateY(-4px);}
.reward-item.is-affordable{
  border-color:rgba(111,170,128,0.26);
}
.reward-icon{font-size:2.4rem;margin-bottom:8px;}
.reward-name{font-weight:700;font-size:0.88rem;margin-bottom:4px;}
.reward-cost{font-family:'Itim',cursive;color:#2a7040;font-size:1.1rem;}
.reward-afford-note{font-size:0.7rem;color:var(--ink-light);margin-top:4px;}
.reward-afford-note.is-affordable{color:#567a61;}

/* ══════════ SETTINGS ══════════ */
.settings-grid{
  margin-bottom:16px;
  align-items:start;
}
.settings-logo-box{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.settings-logo-preview{
  width:92px;height:92px;border-radius:24px;
  background:linear-gradient(135deg,var(--sky),var(--cream));
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--peach);
  flex-shrink:0;
}
.settings-logo-actions{flex:1;min-width:220px;}
.setting-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1.5px solid var(--peach);
  border-radius:18px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  margin-bottom:12px;
}
.settings-item-title{
  font-weight:700;
  font-size:0.92rem;
  color:var(--ink);
}
.settings-item-sub{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-top:4px;
  line-height:1.6;
}
.settings-inline-note{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-bottom:12px;
}
.sync-status-box{
  border:1.5px solid var(--peach);
  border-radius:18px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  padding:14px 16px;
  display:grid;
  gap:6px;
  margin-bottom:12px;
}
.sync-status-title{
  font-weight:700;
  font-size:0.92rem;
  color:var(--ink);
}
.sync-status-sub{
  font-size:0.8rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.sync-status-meta{
  font-size:0.76rem;
  color:var(--ink-light);
  line-height:1.6;
}
.settings-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}
.settings-actions-row .btn{
  flex:0 0 auto;
}
.settings-inline-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(209,233,246,0.45);
  border:1px solid rgba(168,208,238,0.75);
  border-radius:8px;
  padding:1px 7px;
  color:var(--sky-dd);
}
.theme-palette-preview{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:-2px 0 12px;
}
.theme-palette-swatch{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.72);
  box-shadow:0 4px 12px rgba(121,98,89,0.14);
}
.settings-disabled-box{
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#fffaf0 0%, #fff4dd 100%);
  border:1.5px dashed var(--cream-d);
  color:var(--cream-dd);
  font-size:0.82rem;
  line-height:1.7;
}
.settings-manager-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.settings-manager-row input[type=text]{
  flex:1;
  min-width:240px;
}
.system-group{
  margin-top:14px;
}
.system-group-title{
  font-size:0.8rem;
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.system-manager-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.system-manager-item{
  border:1.5px solid var(--peach);
  border-radius:16px;
  padding:12px 14px;
  background:var(--white);
}
.system-manager-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.system-manager-name{
  font-weight:700;
  color:var(--ink);
}
.system-manager-sub{
  font-size:0.76rem;
  color:var(--ink-soft);
  margin-top:4px;
  line-height:1.6;
}
.system-manager-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.manager-menu-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.manager-menu-item{
  width:100%;
  border:none;
  border-radius:18px;
  background:linear-gradient(180deg,#fffdfb 0%, #fff8f4 100%);
  border:1.5px solid var(--peach);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  color:var(--ink);
  text-align:left;
  transition:all 0.2s;
}
.manager-menu-item:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
  border-color:var(--peach-d);
}
.manager-menu-title{
  font-weight:700;
  font-size:0.92rem;
}
.manager-menu-sub{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-top:4px;
  line-height:1.6;
}
.toggle-switch{
  position:relative;
  display:inline-flex;
  width:58px;
  height:32px;
  flex-shrink:0;
}
.toggle-switch input{
  opacity:0;
  width:0;
  height:0;
}
.toggle-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#eadfd8;
  transition:all 0.2s ease;
  box-shadow:inset 0 1px 3px rgba(100,80,70,0.12);
}
.toggle-slider::before{
  content:'';
  position:absolute;
  width:24px;
  height:24px;
  left:4px;
  top:4px;
  border-radius:50%;
  background:white;
  box-shadow:0 2px 8px rgba(100,80,70,0.16);
  transition:transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-slider{
  background:linear-gradient(135deg,var(--mint),#bce9d2);
}
.toggle-switch input:checked + .toggle-slider::before{
  transform:translateX(26px);
}

/* ══════════ MILESTONES ══════════ */
.milestone-item{
  border:1.5px solid var(--peach);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  background:var(--white);
}
.milestone-item:last-child{margin-bottom:0;}

/* ══════════ TOOLBARS / FILTERS ══════════ */
.toolbar-row{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
  align-items:end;
}
.toolbar-row > .btn:not(.btn-sm),
.inbox-compose-row > .btn,
.task-compose-row > .btn{
  min-height:41px;
  justify-content:center;
}
.filter-box{
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.filter-box label{
  margin-bottom:0;
}
.bug-tag-filter-wrap{
  margin:-2px 0 16px;padding:12px 14px;
  border-radius:18px;background:rgba(255,255,255,0.76);
  border:1.5px dashed var(--cream-d);
  display:flex;flex-direction:column;gap:10px;
}
.bug-tag-filter-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
}
.bug-tag-filter-title{
  font-size:0.78rem;font-weight:700;color:var(--ink-soft);
}
.bug-tag-filter-meta{
  font-size:0.76rem;color:var(--ink-light);font-weight:600;
}
.bug-tag-filter-chips{
  display:flex;gap:8px;flex-wrap:wrap;
}
.bug-tag-filter-empty{
  font-size:0.8rem;color:var(--ink-light);
}
.bug-filter-chip{
  font-size:0.75rem;padding:6px 12px;border-radius:999px;
}
.bug-filter-chip-clear{
  background:transparent;color:var(--ink-soft);border:1.5px solid var(--cream-d);
}

/* ══════════ WORKSPACES ══════════ */
.workspace-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.workspace-card{
  border-left:4px solid var(--sky-d);
}
.workspace-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.workspace-avatar{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  background:var(--bg);
  border:1.5px solid var(--peach);
  flex-shrink:0;
}
.workspace-name{
  font-weight:700;
  font-size:1rem;
}
.workspace-sub{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-top:2px;
}
.workspace-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.helper-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.helper-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.82rem;
  color:var(--ink-soft);
  padding-bottom:12px;
  border-bottom:1px dashed var(--peach);
}
.helper-item:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.helper-item strong{
  color:var(--ink);
}

/* ══════════ MODAL ══════════ */
.modal-bg{position:fixed;inset:0;background:var(--modal-backdrop);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.modal-bg.open{display:flex;}
.modal{background:var(--white);border-radius:24px;padding:28px;width:90%;max-width:680px;box-shadow:0 12px 48px rgba(100,80,70,0.25);max-height:90vh;overflow-y:auto;}
.modal-title{font-family:'Itim',cursive;font-size:1.3rem;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
.detail-actions{
  display:none;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin:-6px 0 14px;
}
.detail-actions.has-actions{display:flex;}
.detail-meta-card{
  background:rgba(255,255,255,0.82);
  border:1.5px solid var(--peach);
  border-radius:16px;
  padding:12px 14px;
  margin-bottom:14px;
  display:grid;
  gap:6px;
  font-size:0.82rem;
  color:var(--ink-soft);
}
.detail-meta-card strong{color:var(--ink);}
.detail-section{margin-bottom:12px;}
.detail-section:last-child{margin-bottom:0;}
.detail-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.detail-section-label{
  font-size:0.8rem;
  font-weight:700;
  color:var(--ink-soft);
}
.detail-copy-btn{
  flex-shrink:0;
  border:1.5px solid var(--cream-d);
}
.detail-section-body{
  padding:12px;
  border-radius:12px;
  font-size:0.88rem;
  line-height:1.7;
  white-space:pre-wrap;
  word-break:break-word;
}
.detail-section-body.tone-sky{background:var(--sky);}
.detail-section-body.tone-cream{background:var(--cream);}
.detail-section-body.tone-peach{background:var(--peach);}
.detail-section-body.tone-mint{background:var(--mint);}
.detail-section-body.is-code{
  font-family:Consolas,'Courier New',monospace;
  font-size:0.8rem;
  overflow:auto;
}
.confirm-modal{max-width:520px;padding:24px 24px 22px;overflow-x:hidden;}
.confirm-shell{display:flex;gap:16px;align-items:flex-start;}
.confirm-icon{
  width:58px;height:58px;border-radius:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--peach),#fff2ec);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  font-size:1.7rem;
}
.confirm-copy{
  flex:1;
  min-width:0;
  max-width:100%;
}
.confirm-copy .modal-title,
.confirm-message,
.confirm-note{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.confirm-message{font-size:0.9rem;line-height:1.75;color:var(--ink);}
.confirm-note{
  margin-top:12px;padding:10px 12px;border-radius:14px;
  background:var(--cream);color:var(--cream-dd);
  font-size:0.8rem;line-height:1.65;font-weight:600;
}

/* ══════════ TOAST ══════════ */
#toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  max-width:min(90vw,560px);padding:12px 16px 12px 18px;
  background:rgba(76,61,55,0.96);color:#fff;border-radius:20px;
  font-size:0.88rem;line-height:1.45;z-index:9999;
  box-shadow:0 12px 32px rgba(80,60,50,0.22);
  transition:opacity 0.3s;opacity:0;pointer-events:none;
}
#toast.has-action{pointer-events:auto;}
#toast-message{min-width:0;}
.toast-action{
  border:none;border-radius:999px;
  padding:7px 12px;background:var(--cream);color:var(--cream-dd);
  font-family:'Sarabun',sans-serif;font-size:0.78rem;font-weight:700;
  cursor:pointer;flex-shrink:0;transition:transform 0.15s, opacity 0.15s;
}
.toast-action:hover{transform:translateY(-1px);}

body[data-theme="dark"] .btn-danger,
body[data-theme="dark"] .chip-red{
  background:#4c2528;
  color:#ffb9bd;
}
body[data-theme="dark"] .sidebar{
  background:#2b3038;
  border-right-color:#5f5661;
}
body[data-theme="dark"] .sb-logo{
  border-bottom-color:#5f5661;
}
body[data-theme="dark"] .sb-leaves{
  background:linear-gradient(135deg,rgba(79,113,96,0.98) 0%, rgba(69,97,83,0.96) 50%, rgba(93,128,108,0.92) 100%);
  border-color:#93cba7;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
body[data-theme="dark"] .sb-leaves-icon,
body[data-theme="dark"] .reward-balance-icon{
  filter:drop-shadow(0 0 12px rgba(168,229,184,0.22));
}
body[data-theme="dark"] .sb-leaves-num,
body[data-theme="dark"] .reward-balance-num,
body[data-theme="dark"] .reward-cost,
body[data-theme="dark"] .stat-val-mint{
  color:#b9efc6;
  text-shadow:0 0 14px rgba(94,184,125,0.14);
}
body[data-theme="dark"] .sb-leaves-label,
body[data-theme="dark"] .reward-balance-label{
  color:#d9f2de;
}
body[data-theme="dark"] .sb-badge.green,
body[data-theme="dark"] .chip-mint,
body[data-theme="dark"] .cal-badge.done-all{
  background:linear-gradient(135deg,#365545,#4a6f5a);
  color:#e4f7e9;
  box-shadow:inset 0 0 0 1px rgba(180,233,194,0.1);
}
body[data-theme="dark"] .btn-mint{
  background:linear-gradient(135deg,#6fa77d,#82c091);
  color:#163323;
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
}
body[data-theme="dark"] .reward-balance-card{
  background:linear-gradient(135deg,rgba(90,122,104,0.98) 0%, rgba(118,145,125,0.9) 58%, rgba(202,223,207,0.94) 100%);
  border-color:#9dd0ad;
  box-shadow:
    0 18px 32px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
body[data-theme="dark"] .reward-balance-rules{
  color:#eef5ef;
}
body[data-theme="dark"] .reward-item{
  background:#373f49;
  border-color:rgba(126,167,200,0.14);
}
body[data-theme="dark"] .reward-item.is-affordable{
  background:linear-gradient(180deg,#3b4550 0%, #343c46 100%);
  border-color:rgba(149,204,166,0.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
body[data-theme="dark"] .reward-afford-note{
  color:#d6ccc3;
}
body[data-theme="dark"] .reward-afford-note.is-affordable{
  color:#d4f0da;
}
body[data-theme="dark"] .sb-item:hover{
  background:#39414b;
}
body[data-theme="dark"] .sb-item.active{
  background:linear-gradient(135deg,#4e6680,#43566d);
  color:#f7f1ea;
  box-shadow:0 10px 20px rgba(0,0,0,0.16);
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .task-item,
body[data-theme="dark"] .bug-item,
body[data-theme="dark"] .inbox-item,
body[data-theme="dark"] .cal-wrap{
  background:#343b45;
  border-color:rgba(126,167,200,0.14);
}
body[data-theme="dark"] .card:hover{
  box-shadow:0 18px 36px rgba(0,0,0,0.24);
}
body[data-theme="dark"] .home-focus-item,
body[data-theme="dark"] .home-snapshot-item,
body[data-theme="dark"] .home-empty-note,
body[data-theme="dark"] .detail-meta-card,
body[data-theme="dark"] .bug-tag-filter-wrap,
body[data-theme="dark"] .planning-more-pill{
  background:#383f49;
}
body[data-theme="dark"] .custom-select-trigger:hover,
body[data-theme="dark"] .custom-date-trigger:hover{
  background:#31363d;
}
body[data-theme="dark"] .custom-select-shell.is-disabled .custom-select-trigger,
body[data-theme="dark"] .custom-date-shell.is-disabled .custom-date-trigger,
body[data-theme="dark"] .custom-select-trigger:disabled,
body[data-theme="dark"] .custom-date-trigger:disabled{
  background:#21252b;
}
body[data-theme="dark"] .custom-select-panel,
body[data-theme="dark"] .custom-date-panel{
  background:rgba(42,47,54,0.98);
  box-shadow:0 18px 38px rgba(0,0,0,0.38);
}
body[data-theme="dark"] .custom-select-option,
body[data-theme="dark"] .custom-date-day,
body[data-theme="dark"] .manager-menu-item,
body[data-theme="dark"] .setting-toggle-row{
  background:linear-gradient(180deg,#343941 0%, #2d3239 100%);
  box-shadow:inset 0 0 0 1.5px rgba(89,72,68,0.88);
}
body[data-theme="dark"] .custom-select-option:hover,
body[data-theme="dark"] .custom-date-day:hover,
body[data-theme="dark"] .manager-menu-item:hover{
  background:linear-gradient(180deg,#3a4048 0%, #31363d 100%);
}
body[data-theme="dark"] .custom-select-option.is-selected,
body[data-theme="dark"] .custom-date-day.is-selected{
  background:linear-gradient(180deg,#33414d 0%, #2f3b46 100%);
}
body[data-theme="dark"] .page-sub,
body[data-theme="dark"] .stat-lbl,
body[data-theme="dark"] .planning-calendar-sub,
body[data-theme="dark"] .planning-dow,
body[data-theme="dark"] .bug-root,
body[data-theme="dark"] .inbox-date,
body[data-theme="dark"] .settings-item-sub,
body[data-theme="dark"] .settings-inline-note,
body[data-theme="dark"] .sync-status-sub,
body[data-theme="dark"] .sync-status-meta,
body[data-theme="dark"] .home-focus-sub,
body[data-theme="dark"] .home-snapshot-sub,
body[data-theme="dark"] .planning-empty-sub,
body[data-theme="dark"] .empty{
  color:#d6ccc3;
}
body[data-theme="dark"] .bug-root strong{
  color:#f5e1a6;
}
body[data-theme="dark"] .task-item:hover,
body[data-theme="dark"] .bug-item:hover,
body[data-theme="dark"] .inbox-item:hover{
  border-color:#7ea7c8;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
body[data-theme="dark"] .custom-select-empty,
body[data-theme="dark"] .settings-disabled-box,
body[data-theme="dark"] .plan-assignee-empty{
  background:linear-gradient(180deg,#2c2518 0%, #241e13 100%);
  border-color:var(--cream-d);
  color:var(--cream-dd);
}
body[data-theme="dark"] .sync-status-box{
  background:linear-gradient(180deg,#343941 0%, #2d3239 100%);
  box-shadow:inset 0 0 0 1.5px rgba(89,72,68,0.88);
}
body[data-theme="dark"] .settings-inline-note code{
  background:rgba(51,65,77,0.85);
  border-color:#7ea7c8;
  color:#e8f3fb;
}
body[data-theme="dark"] .plan-assignee-hint{
  background:linear-gradient(180deg,#1f2832 0%, #18212a 100%);
  border-color:var(--sky-d);
  color:var(--sky-dd);
}
body[data-theme="dark"] .home-pomo-helper,
body[data-theme="dark"] .pomo-helper-item span{
  color:#d6ccc3;
}
body[data-theme="dark"] .pomo-helper-card{
  background:linear-gradient(180deg,#3a414b 0%, #353c46 100%);
  border-color:#5c6777;
  box-shadow:0 12px 24px rgba(0,0,0,0.16);
}
body[data-theme="dark"] .pomo-helper-title,
body[data-theme="dark"] .pomo-helper-item strong{
  color:#f6f0e9;
}
body[data-theme="dark"] .pomo-helper-item{
  background:linear-gradient(180deg,#404854 0%, #373f49 100%);
  border-color:rgba(126,167,200,0.16);
}
body[data-theme="dark"] .settings-logo-preview{
  background:linear-gradient(135deg,#223748,#3f313f);
}
body[data-theme="dark"] .toggle-slider{
  background:#443d38;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.32);
}
body[data-theme="dark"] .toggle-switch input:checked + .toggle-slider{
  background:linear-gradient(135deg,var(--mint),#315746);
}
body[data-theme="dark"] .toggle-slider::before{
  background:#f7efe7;
  box-shadow:0 2px 8px rgba(0,0,0,0.28);
}
body[data-theme="dark"] .confirm-icon{
  background:linear-gradient(145deg,#463034,#2a2021);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
body[data-theme="dark"] .confirm-note{
  background:#352f1f;
  color:var(--cream-dd);
}
body[data-theme="dark"] .home-decor-leaf{
  opacity:0.42;
  color:#f5e1a6;
  animation:homeStarTwinkle 3.8s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(216,201,145,0.2));
}
body[data-theme="dark"] .planning-board{
  background:#313740;
}
body[data-theme="dark"] .planning-selection-summary{
  background:#3a414b;
  border-color:#7ea7c8;
}
body[data-theme="dark"] .planning-selection-range{
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-selection-meta{
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-day{
  background:#3c434d;
  border-color:#5c6777;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
body[data-theme="dark"] .planning-day:hover{
  border-color:#7ea7c8;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
body[data-theme="dark"] .planning-day.is-outside{
  background:#2f353d;
  opacity:0.62;
}
body[data-theme="dark"] .planning-day.is-today{
  box-shadow:0 0 0 3px rgba(126,167,200,0.24);
}
body[data-theme="dark"] .planning-day.is-selected{
  background:linear-gradient(180deg,#495463 0%, #404a58 100%);
  border-color:#a992b2;
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
}
body[data-theme="dark"] .planning-day.is-range-start,
body[data-theme="dark"] .planning-day.is-range-end{
  border-color:#f5e1a6;
}
body[data-theme="dark"] .planning-pm-head-sticky,
body[data-theme="dark"] .planning-pm-member{
  background:#343b45;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-pm-day-chip{
  background:#383f49;
  border-color:#5c6777;
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-pm-day-chip.is-weekend{
  background:#2f353d;
}
body[data-theme="dark"] .planning-pm-day-chip.is-today{
  background:#495463;
  border-color:#7ea7c8;
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-pm-track{
  background:#343b45;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-pm-cell{
  background:#3c434d;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-pm-cell.is-weekend{
  background:#313740;
}
body[data-theme="dark"] .planning-pm-cell.is-today{
  background:#495463;
  border-color:#7ea7c8;
}
body[data-theme="dark"] .planning-pm-member-name{
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-pm-member-sub,
body[data-theme="dark"] .planning-pm-head-sticky{
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-pm-empty{
  background:#383f49;
  border-color:#5c6777;
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-project-head-sticky,
body[data-theme="dark"] .planning-project-member{
  background:#343b45;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-project-month-chip{
  background:#383f49;
  border-color:#5c6777;
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-project-week-chip{
  background:#3c434d;
  border-color:#5c6777;
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-project-week-chip.is-today{
  background:#495463;
  border-color:#7ea7c8;
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-project-track{
  background:#343b45;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-project-cell{
  background:#3c434d;
  border-color:#5c6777;
}
body[data-theme="dark"] .planning-project-cell.is-month-start{
  box-shadow:inset 2px 0 0 rgba(92,103,119,0.95);
}
body[data-theme="dark"] .planning-project-cell.is-today{
  background:#495463;
  border-color:#7ea7c8;
}
body[data-theme="dark"] .planning-project-name{
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-project-sub,
body[data-theme="dark"] .planning-project-dates,
body[data-theme="dark"] .planning-project-head-title,
body[data-theme="dark"] .planning-project-head-sub{
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-project-empty{
  background:#383f49;
  border-color:#5c6777;
  color:#d6ccc3;
}
body[data-theme="dark"] .planning-list-item{
  background:
    linear-gradient(135deg, var(--plan-soft) 0%, transparent 72%),
    linear-gradient(180deg,#404854 0%, #363e49 100%);
  border-color:rgba(255,255,255,0.06);
  border-left-color:var(--plan-border);
  border-left-width:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 12px 24px rgba(0,0,0,0.18);
}
body[data-theme="dark"] .planning-list-title,
body[data-theme="dark"] .planning-day-num,
body[data-theme="dark"] .planning-empty-title{
  color:#f6f0e9;
}
body[data-theme="dark"] .planning-list-sub,
body[data-theme="dark"] .planning-list-note{
  color:#ddd2c8;
}
body[data-theme="dark"] .planning-list-meta .chip{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-theme="dark"] .planning-list-actions .btn-sky{
  background:#6e97bb;
  color:#f7f1ea;
}
body[data-theme="dark"] .planning-list-actions .btn-danger{
  background:#6a363a;
  color:#ffe0da;
}


/* ══════════ MINI CALENDAR ══════════ */
.cal-wrap{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px;border:1.5px solid var(--sky);}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-title{font-family:'Itim',cursive;font-size:1.1rem;color:var(--ink);}
.cal-nav{display:flex;gap:6px;}
.cal-nav button{background:var(--sky);border:none;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:0.85rem;color:var(--sky-dd);font-weight:700;transition:all 0.15s;}
.cal-nav button:hover{background:var(--sky-d);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-dow{text-align:center;font-size:0.65rem;font-weight:700;color:var(--ink-light);padding:4px 0;}
.cal-day{
  aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;
  font-size:0.78rem;font-weight:600;transition:all 0.15s;
  position:relative;padding:2px;
}
.cal-day:hover{background:var(--cream);}
.cal-day.today{background:var(--sky);color:var(--sky-dd);font-weight:800;}
.cal-day.selected{background:var(--mauve);color:var(--mauve-dd);font-weight:800;box-shadow:0 2px 8px rgba(180,130,160,0.25);}
.cal-day.has-tasks .task-dot-row{display:flex;gap:2px;justify-content:center;margin-top:1px;}
.cal-day.empty-day{opacity:0.25;cursor:default;pointer-events:none;}
.cal-day.other-month{opacity:0.35;}
.task-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.cal-day-num{line-height:1;}
.cal-badge{
  position:absolute;top:1px;right:2px;
  background:var(--peach);color:var(--peach-dd);
  border-radius:6px;padding:0 4px;font-size:0.55rem;font-weight:800;
  line-height:1.5;
}
.cal-badge.done-all{background:var(--mint);color:#2a7040;}
.selected-day-panel{
  background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:16px;
  border:1.5px solid var(--mauve);
  animation:fadeIn 0.2s ease;
}
.task-compose-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.task-compose-input-wrap{
  flex:1 1 320px;
  min-width:260px;
}
.task-compose-input{
  min-height:41px;
  max-height:140px;
  resize:none;
  overflow-y:hidden;
}
.task-compose-hint{
  margin-top:6px;
  font-size:0.73rem;
  color:var(--ink-light);
  line-height:1.5;
}
.task-compose-row .custom-select-shell{
  width:164px !important;
  flex:0 0 164px;
}
.task-compose-row > .btn{
  flex:0 0 auto;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ══════════ SCROLLBAR ══════════ */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--peach);border-radius:6px;}

/* ══════════ EMPTY STATE ══════════ */
.empty{text-align:center;padding:32px;color:var(--ink-soft);}
.empty .ei{font-size:2.5rem;margin-bottom:8px;}
.empty p{font-size:0.85rem;}

/* ══════════ TABS ══════════ */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.tab{padding:7px 16px;border-radius:10px;cursor:pointer;font-size:0.82rem;font-weight:600;background:var(--white);border:1.5px solid var(--peach);color:var(--ink-soft);transition:all 0.2s;}
.tab.active{background:var(--sky);border-color:var(--sky-d);color:var(--sky-dd);}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:700px){
  .sidebar{width:56px;overflow-x:hidden;}
  .sb-logo{
    justify-content:center;
    padding:14px 0 12px;
    gap:0;
  }
  .sb-logo > :not(.logo-wrap){
    display:none !important;
  }
  .logo-wrap{
    margin:0 auto;
  }
  .sb-logo-text,.sb-item span:not(.icon),.sb-section,.sb-leaves-label,.sb-leaves-num,.sb-badge{display:none;}
  .sb-leaves{
    position:relative;
    margin:10px 6px 12px;
    padding:0;
    min-height:46px;
    border-radius:16px;
    justify-content:center;
    align-items:center;
    overflow:visible;
  }
  .sb-leaves > div:last-child{
    position:static;
  }
  .sb-leaves-icon{
    font-size:1.25rem;
    line-height:1;
    transform:translateX(-1px);
  }
  .sb-leaves-num{
    display:flex !important;
    position:absolute;
    top:-5px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    align-items:center;
    justify-content:center;
    background:var(--mint-d);
    color:#f8fff8;
    font-family:'Sarabun',sans-serif;
    font-size:0.68rem;
    font-weight:800;
    line-height:1;
    box-shadow:0 4px 12px rgba(70,110,84,0.22);
  }
  .sb-item{justify-content:center;padding:10px;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .page{padding:16px;}
  .form-row{grid-template-columns:1fr;}
  .toolbar-row{align-items:stretch;}
  .filter-box{min-width:100%;}
  .workspace-list{grid-template-columns:1fr;}
  .inbox-compose-row{flex-direction:column;}
  .inbox-compose-row > .btn{width:100%;}
}

/* ══════════ GRID ══════════ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.grid2 > *, .grid3 > *, .grid4 > *{min-width:0;}
@media(max-width:700px){.grid2,.grid3,.grid4{grid-template-columns:1fr;}}
@media(max-width:900px){
  .pomo-helper-grid{grid-template-columns:1fr;}
}

/* Tasks two-column layout: main + mini calendar on right */
.tasks-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.tasks-layout .right .cal-wrap{position:sticky;top:28px}
@media(max-width:980px){.tasks-layout{grid-template-columns:1fr;}.tasks-layout .right .cal-wrap{position:static;}}
@media(max-width:700px){
  .task-compose-input-wrap,
  .task-compose-row .custom-select-shell,
  .task-compose-row > .btn{
    min-width:100%;
    width:100% !important;
    flex-basis:100%;
  }
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ══════════ GOALS ══════════ */
.goal-item{transition:all 0.2s;}
.goal-item:hover{box-shadow:var(--shadow-hover);}
.goal-done{opacity:0.65;}
.goal-done:hover{opacity:1;}

/* ══════════ LIBRARY / KB TABS ══════════ */
.lib-tab.active{background:var(--cream);border-color:var(--cream-d);color:var(--cream-dd);}
.kb-tab.active{background:var(--sky);border-color:var(--sky-d);color:var(--sky-dd);}

/* ══════════ GOALS ONBOARDING ══════════ */
#goals-onboarding{animation:fadeIn 0.4s ease;}