*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F2F2F7;
  --sidebar:#1C1C1E;
  --stext:rgba(235,235,245,0.95);
  --smuted:rgba(235,235,245,0.58);
  --accent:#007AFF;
  --card:#FFFFFF;
  --border:rgba(60,60,67,0.10);
  --border2:rgba(60,60,67,0.16);
  --text:#1C1C1E;
  --text2:#3A3A3C;
  --muted:#767679;
  --red:#FF3B30;
  --green:#34C759;
  --orange:#FF9500;
  --r:12px;
  --sh:0 1px 2px rgba(0,0,0,0.04),0 4px 14px rgba(0,0,0,0.05);
  /* ── Design-system tokens (additive — used by refreshed components) ── */
  --r-sm:8px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.32,1,.44,1);
  --t-fast:.15s; --t-med:.25s; --t-slow:.4s;
  /* Materials */
  --glass-bg:rgba(255,255,255,0.72);
  --glass-brd:rgba(255,255,255,0.55);
  --glass-blur:20px;
  --gold:#B8963E; --gold-2:#E7C767;
  --gold-grad:linear-gradient(135deg,#E7C767 0%,#B8963E 55%,#8C6D22 100%);
}
/* ── DARK MODE — Apple / Tesla ─────────────────────────────── */
body.dark{
  --bg:#000000;
  --sidebar:#0A0A0A;
  --card:#111111;
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.13);
  --text:#FFFFFF;
  --text2:rgba(235,235,245,0.85);
  --muted:rgba(235,235,245,0.62);
  --accent:#0A84FF;
  --green:#30D158;
  --red:#FF453A;
  --orange:#FF9F0A;
  --sh:0 1px 0 rgba(255,255,255,0.04),0 4px 20px rgba(0,0,0,0.6);
  --glass-bg:rgba(22,22,24,0.68);
  --glass-brd:rgba(255,255,255,0.09);
  --gold:#D8B14E; --gold-2:#F0D583;
  --gold-grad:linear-gradient(135deg,#F0D583 0%,#D8B14E 55%,#A9852E 100%);
}
/* Surfaces */
body.dark .topbar{background:#111111;border-color:rgba(255,255,255,0.06)}
body.dark .add-form{background:#111111;border-color:rgba(255,255,255,0.06)}
body.dark .add-form input[type=text]{background:#1C1C1E;color:#fff;border-color:rgba(255,255,255,0.08)}
body.dark .add-form input[type=text]::placeholder{color:rgba(255,255,255,0.28)}
body.dark .add-form input[type=text]:focus{background:#222;border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,0.18)}
body.dark .dsel,body.dark .psel{background:#1C1C1E;color:#fff;border-color:rgba(255,255,255,0.08)}
body.dark .ddl-add-input{background:#1C1C1E;color:#fff;border-color:rgba(255,255,255,0.08);color-scheme:dark}
body.dark .ddl-add-input:focus{background:#222}
body.dark .voice-btn{border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.45)}
/* Cards */
body.dark .tcard-inner{background:#111111;border-color:rgba(255,255,255,0.05)}
body.dark .tcard-inner:hover{background:#161616}
body.dark .tcheck{background:transparent;border-color:rgba(255,255,255,0.2)}
body.dark .tcheck:hover{border-color:var(--green);background:rgba(48,209,88,.1)}
body.dark .k-card{background:#111111;border:1px solid rgba(255,255,255,0.06)}
body.dark .top-task-card{background:linear-gradient(135deg,#111,#1a1a1a);border:1px solid rgba(255,255,255,0.08)}
/* Toggle */
body.dark .ios-toggle{background:#2C2C2E}
body.dark .ios-toggle:checked{background:var(--accent)}
/* Topbar buttons */
body.dark .tb-btn,body.dark #darkBtn{border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.5)}
body.dark .tb-btn:hover,body.dark #darkBtn:hover{border-color:rgba(255,255,255,0.22);color:#fff}
body.dark #waProjBtn{border-color:#25D36644;color:#25D366}
/* Modals */
body.dark .moverlay{background:rgba(0,0,0,0.75)}
body.dark .mbox{background:#111111;border:1px solid rgba(255,255,255,0.08);box-shadow:0 24px 80px rgba(0,0,0,0.8)}
body.dark .mhead{border-color:rgba(255,255,255,0.07)}
body.dark .mhead h2{color:#fff}
body.dark .mfoot{border-color:rgba(255,255,255,0.07)}
body.dark .f-input{background:#1C1C1E;color:#fff;border-color:rgba(255,255,255,0.1)}
body.dark .f-input:focus{background:#222;border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,0.18)}
body.dark .f-input::placeholder{color:rgba(255,255,255,0.28)}
body.dark .f-label{color:rgba(255,255,255,0.62)}
body.dark .set-info{background:#1C1C1E;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.08)}
body.dark .mclose{background:#1C1C1E;color:rgba(255,255,255,0.5)}
body.dark .mclose:hover{background:#222;color:#fff}
body.dark .mi{color:#fff;border-color:rgba(255,255,255,0.06)}
body.dark .mi:hover{background:#1C1C1E}
/* Kanban */
body.dark .k-col{background:#0A0A0A;border-color:rgba(255,255,255,0.06)}
body.dark .k-head{border-color:rgba(255,255,255,0.06)}
body.dark .k-nav{background:#111111;border-color:rgba(255,255,255,0.06)}
body.dark .k-tabs{background:rgba(255,255,255,0.07)}
body.dark .k-tab{color:rgba(255,255,255,0.55)}
body.dark .k-tab.active{color:#fff;border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.12);box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* Task badges — quiet hairline chips */
body.dark .dbadge{border-color:rgba(255,255,255,0.14);color:rgba(235,235,245,0.65)}
body.dark .dbadge.clickable:hover{border-color:rgba(255,255,255,0.3);color:#fff}
body.dark .asn-badge{border-color:rgba(255,255,255,0.14);color:rgba(235,235,245,0.65)}
body.dark .asn-badge.clickable:hover{border-color:rgba(255,255,255,0.3);color:#fff}
body.dark .pbadge{border-color:rgba(255,255,255,0.14)!important;color:rgba(235,235,245,0.8)!important}
body.dark .pbadge-none{color:rgba(235,235,245,0.5)!important}
body.dark .sched-badge{border-color:rgba(255,255,255,0.14);color:#4DA3FF}
body.dark .sched-badge:hover{border-color:rgba(10,132,255,0.5)}
body.dark .sched-badge-empty{color:rgba(235,235,245,0.45)}
body.dark .sched-badge-empty:hover{border-color:rgba(255,255,255,0.3)}
body.dark .bkt-badge{border-color:rgba(255,255,255,0.14)}
body.dark .role-tag{border-color:rgba(255,255,255,0.14)}
body.dark .tacbtn{color:rgba(235,235,245,0.5)}
body.dark .tacbtn:hover{background:#2C2C2E;color:rgba(235,235,245,0.9)}
body.dark .tnotes{color:rgba(235,235,245,0.62)}
body.dark .tnotes:empty:before{color:rgba(235,235,245,0.38)}
body.dark .tnotes:focus{color:rgba(235,235,245,0.9)}
/* Misc */
body.dark .bkt-section-hdr{color:rgba(255,255,255,0.52)}
body.dark .hist-head{color:rgba(255,255,255,0.5)}
body.dark .del-proj-row{border-color:rgba(255,255,255,0.07)}
body.dark .del-proj-name{color:#fff}
body.dark .role-tag{border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.45)}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
              'Helvetica Neue','Segoe UI',Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;font-size:15px
}

/* ── LOGIN ────────────────────────────────────────────────── */
#loginScreen{
  display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;
  overflow-y:auto;padding:24px 16px;box-sizing:border-box;
  background:linear-gradient(150deg,#1C1C1E 0%,#2C2C2E 60%,#1a1a2e 100%)
}
.lcard{
  background:#fff;color:var(--text);
  padding:40px 32px;width:340px;max-width:92vw;
  border-radius:24px;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  text-align:center;margin:auto
}
.llogo{font-size:52px;margin-bottom:14px}
.llogo-img{width:84px;height:84px;border-radius:20px;box-shadow:0 12px 36px rgba(10,132,255,.28)}
.ltitle{font-size:28px;font-weight:700;margin-bottom:6px;letter-spacing:-.5px}
.lsub{color:var(--muted);margin-bottom:32px;font-size:15px}
.gbtn{
  width:100%;padding:14px;background:#F2F2F7;color:var(--text);
  border:none;border-radius:14px;font-size:16px;font-weight:600;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:12px;transition:all .15s
}
.gbtn:hover{background:#E5E5EA;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.gbtn:active{transform:scale(.97)}
.gbtn img{width:22px;height:22px}
/* Opening screen in dark mode — applied early via html.dark (before body.dark) */
html.dark .lcard{background:#111;color:#fff;box-shadow:0 32px 80px rgba(0,0,0,.6)}
html.dark .lsub{color:rgba(235,235,245,.5)}
html.dark .gbtn{background:#1C1C1E;color:#fff}
html.dark .gbtn:hover{background:#262626;box-shadow:0 2px 12px rgba(0,0,0,.4)}
#lerr{color:var(--red);margin-top:14px;font-size:13px;min-height:18px;text-align:center}

/* ── APP LAYOUT ───────────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:row}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar{
  width:242px;min-width:242px;
  background:var(--sidebar);color:var(--stext);
  display:flex;flex-direction:column;overflow-y:auto
}
.sb-head{
  padding:20px 16px 14px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.sb-logo{font-size:17px;font-weight:700;flex:1;color:#fff;letter-spacing:-.3px}
.av{
  cursor:pointer;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;overflow:hidden;transition:opacity .15s
}
.av:hover{opacity:.75}
.av img{width:32px;height:32px;border-radius:50%}
.sb-sec{
  padding:16px 16px 6px;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;color:var(--smuted)
}
.pitem{
  display:flex;align-items:center;gap:9px;
  padding:9px 16px;cursor:pointer;
  transition:background .12s;font-size:14px;position:relative;
  flex-wrap:wrap;
  /* Long-press starts drag/reveal — never the OS text-selection callout */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
.proj-progress{
  height:4px;background:rgba(255,255,255,.12);
  border-radius:2px;overflow:hidden;
  transition:background .2s;flex:1
}
.proj-progress-fill{
  height:100%;border-radius:2px;position:relative;
  background:linear-gradient(90deg,var(--green),#30D158);
  transition:width .55s ease
}
.proj-progress-fill.just-completed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:pbarSweep .9s ease-out;
}
@keyframes pbarSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.top-task-card{
  background:linear-gradient(135deg,#1C1C1E,#2C2C2E);
  color:#fff;border-radius:var(--r);padding:13px 16px;
  margin-bottom:8px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  animation:sIn .25s ease;flex-shrink:0;
  border:1px solid rgba(255,255,255,.07)
}
.top-task-card:hover{border-color:rgba(255,213,0,.3);box-shadow:0 4px 18px rgba(0,0,0,.15)}
.top-task-label{font-size:11px;font-weight:700;color:#FFD60A;flex-shrink:0;letter-spacing:.2px}
.top-task-name{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-empty-today{
  text-align:center;padding:32px 16px;
  color:var(--muted);font-size:13px;font-weight:500;
  animation:sIn .4s ease
}
.pitem:hover{background:rgba(255,255,255,.06)}
.pitem.active{background:rgba(255,255,255,.1)}
.pitem.active .pname{color:#fff;font-weight:500}
.pdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pname{flex:1;white-space:normal;word-break:break-word;color:var(--stext)}
.proj-member-avs{display:inline-flex;flex-direction:row-reverse;align-items:center;flex-shrink:0;margin-right:4px}
.proj-member-avs .asn-av{width:18px;height:18px;font-size:8px;border:1.5px solid #1c1c1e;flex-shrink:0}
.proj-member-avs .asn-av+.asn-av{margin-left:-6px}
.pcnt{
  background:rgba(255,255,255,.1);border-radius:20px;
  padding:1px 8px;font-size:11px;color:rgba(235,235,245,.65);flex-shrink:0
}
.pitem.active .pcnt{background:rgba(255,255,255,.16);color:rgba(235,235,245,.9)}
.pbtn{background:none;border:none;cursor:pointer;padding:4px 9px;font-size:12px;border-radius:7px;flex-shrink:0;transition:background .12s}
.pbtn.share{color:rgba(235,235,245,.6)}
.pbtn.share:hover{color:var(--accent);background:rgba(0,122,255,.12)}
.pbtn.del-proj-btn{color:rgba(235,235,245,.6)}
.pbtn.del-proj-btn:hover{color:#FF3B30;background:rgba(255,59,48,.12)}
.proj-actions{
  display:none;flex:0 0 100%;
  padding:2px 12px 6px;gap:4px;align-items:center;
}
.pitem:hover .proj-actions{display:flex}
.pbtn.default-btn{color:rgba(235,235,245,.6)}
.pbtn.default-btn:hover{color:#FFD60A;background:rgba(255,214,10,.1)}
.pbtn.default-btn.is-default{color:#FFD60A}
.proj-default-star{font-size:10px;flex-shrink:0;opacity:.7;pointer-events:none}
.proj-handle{
  color:rgba(235,235,245,.3);cursor:grab;padding:0;font-size:13px;flex-shrink:0;
  user-select:none;-webkit-user-select:none;touch-action:none;letter-spacing:1px;
  display:none
}
.pitem[data-pid]:hover .proj-handle{display:block}
.pitem[data-pid].dragging{opacity:.3;background:rgba(255,255,255,.04)!important}
.pitem[data-pid].drop-above{box-shadow:inset 0 2px 0 var(--accent)}
.pitem[data-pid].drop-below{box-shadow:inset 0 -2px 0 var(--accent)}
.pitem[data-pid].lp-active{background:rgba(255,59,48,.09)!important;outline:1px solid rgba(255,59,48,.3);border-radius:8px}
#projTrash{
  display:none;margin:4px 12px 6px;
  border:2px dashed rgba(255,59,48,.45);border-radius:12px;
  padding:13px 8px;text-align:center;
  color:rgba(255,59,48,.65);font-size:12px;cursor:default;
  transition:all .2s;background:rgba(255,59,48,.05);
  animation:trash-in .22s ease;user-select:none
}
#projTrash.visible{display:block}
#projTrash.drag-over{
  border-color:var(--red);background:rgba(255,59,48,.18);
  color:var(--red);transform:scale(1.03)
}
#projTrash .trash-icon{font-size:22px;display:block;margin-bottom:4px;line-height:1}
@keyframes trash-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Deleted projects in settings */
.del-proj-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--border)
}
.del-proj-row:last-child{border-bottom:none}
.del-proj-name{flex:1;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.del-proj-date{font-size:11px;color:var(--muted);flex-shrink:0}
.del-proj-restore{
  background:none;border:1px solid var(--border2);border-radius:8px;
  color:var(--accent);font-size:12px;padding:4px 10px;cursor:pointer;
  font-family:inherit;flex-shrink:0;transition:all .15s
}
.del-proj-restore:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.add-proj-btn{
  margin:6px 12px;
  background:none;border:1px dashed rgba(255,255,255,.14);
  color:rgba(235,235,245,.45);border-radius:10px;
  padding:8px 12px;cursor:pointer;font-size:13px;
  display:flex;align-items:center;gap:6px;
  width:calc(100% - 24px);font-family:inherit;transition:all .15s
}
.add-proj-btn:hover{border-color:var(--accent);color:var(--accent)}
.sb-bot{
  margin-top:auto;padding:10px 12px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:2px
}
.sb-btn{
  width:100%;background:none;border:none;
  color:rgba(235,235,245,.62);font-size:14px;
  cursor:pointer;padding:9px 12px;border-radius:10px;
  text-align:right;display:flex;align-items:center;gap:10px;
  font-family:inherit;transition:all .15s
}
.sb-btn:hover{background:rgba(255,255,255,.07);color:rgba(235,235,245,.9)}
.sb-btn.active{color:#fff;background:rgba(255,255,255,.09)}
.sb-btn-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center}

/* ── MAIN AREA ────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:14px 24px;display:flex;align-items:center;gap:12px;flex-shrink:0;
  position:relative
}
/* Elevated only while the "מצבים" popover is open, so the menu clears the task
   list — but the topbar never covers full-screen panels (contacts/goals) otherwise. */
.topbar.tb-elevate{z-index:600}
.topbar-mid{flex:1;min-width:0}
.topbar-t{font-size:20px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-s{font-size:13px;color:var(--muted);margin-top:1px}
.topbar-opts{display:flex;align-items:center;gap:16px}
.topbar-opts label{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--muted);cursor:pointer;user-select:none
}
/* iOS-style toggle */
.ios-toggle{
  -webkit-appearance:none;appearance:none;
  width:36px;height:22px;background:#E5E5EA;border-radius:11px;
  cursor:pointer;position:relative;transition:background .2s;
  flex-shrink:0;display:inline-block;vertical-align:middle;outline:none
}
.ios-toggle:checked{background:var(--accent)}
.ios-toggle::before{
  content:'';position:absolute;
  width:18px;height:18px;background:#fff;border-radius:50%;
  top:2px;left:2px;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.18)
}
.ios-toggle:checked::before{transform:translateX(14px)}

.add-form{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;gap:8px;align-items:center;
  flex-shrink:0;flex-wrap:wrap
}
.add-form input[type=text]{
  flex:1;min-width:180px;padding:10px 14px;
  background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:14px;outline:none;font-family:inherit;
  color:var(--text);transition:all .2s
}
.add-form input[type=text]:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.09)}
.dsel,.psel{
  padding:10px 12px;background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:14px;outline:none;cursor:pointer;
  font-family:inherit;color:var(--text);transition:all .2s
}
.dsel{padding:8px 2px;font-size:12px;min-width:0;width:44px;text-align:center}
.dsel:focus,.psel:focus{background:#fff;border-color:var(--accent)}
.ddl-add-input{
  padding:8px 8px;background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:12px;min-width:0;width:118px;text-align:center;
  outline:none;cursor:pointer;font-family:inherit;color:var(--text);transition:all .2s
}
.ddl-add-input:focus{background:#fff;border-color:var(--accent)}
.abtn{
  background:var(--accent);color:#fff;border:none;
  padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s
}
.abtn:hover{background:#0066DD}
.abtn:active{transform:scale(.97)}

/* ── VOICE BUTTON ─────────────────────────────────────────── */
.voice-btn{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);
  background:none;cursor:pointer;font-size:16px;display:flex;align-items:center;
  justify-content:center;transition:all .2s;color:var(--muted);padding:0;
}
.voice-btn:hover{border-color:var(--accent);color:var(--accent)}
.mentor-btn{color:#C99700;border-color:rgba(201,151,0,.4)}
.mentor-btn:hover{color:#fff;background:#FFB800;border-color:#FFB800}
.mentor-btn:disabled{opacity:.6;cursor:default}
body.dark .mentor-btn{color:#FFD60A;border-color:rgba(255,214,10,.35)}
.voice-btn.recording{
  background:#FF3B30;border-color:#FF3B30;color:#fff;
  animation:mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.4)}
  50%{box-shadow:0 0 0 7px rgba(255,59,48,0)}
}

/* ── TASK CARDS ───────────────────────────────────────────── */
.task-area{flex:1;overflow-y:auto;padding:20px 24px}
.tlist{display:flex;flex-direction:column;gap:8px;min-height:40px}
.tcard{
  border-radius:var(--r);
  box-shadow:var(--sh);border:1px solid var(--border);
  transition:box-shadow .2s;
  cursor:grab;animation:sIn .2s ease;
  position:relative;overflow:hidden
}
.tcard-inner{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;background:var(--card);
  border-radius:var(--r);position:relative;z-index:1;width:100%
}
.swipe-bg{
  position:absolute;inset:0;direction:ltr;
  display:flex;align-items:center;gap:8px;
  color:#fff;font-size:22px;opacity:0;pointer-events:none;
  z-index:0;border-radius:var(--r)
}
.swipe-bg .sw-label{font-size:14px;font-weight:600}
.swipe-complete{background:var(--green);justify-content:flex-start;padding-left:24px}
.swipe-delete{background:var(--red);justify-content:flex-end;padding-right:24px}
/* Priority stripe — right border (leading edge in RTL) */
.pi-high  { border-right:3px solid #FF3B30 }
.pi-medium{ border-right:3px solid #FF9500 }
.pi-low   { border-right:3px solid #34C759 }
/* Bucket section headers in list view */
.bkt-section-hdr{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;
  padding:14px 2px 6px;user-select:none
}
.bkt-section-hdr:first-child{padding-top:2px}
.bkt-section-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bkt-section-cnt{
  background:var(--bg);border-radius:20px;padding:1px 7px;
  font-size:10px;color:var(--muted);font-weight:600
}
/* Completion pop animation */
@keyframes check-done{
  0%  {transform:scale(1);border-color:#D1D1D6;background:#fff}
  45% {transform:scale(1.45);border-color:var(--green);background:var(--green)}
  100%{transform:scale(1);border-color:var(--green);background:var(--green)}
}
.tcheck.pop{animation:check-done .3s ease forwards;pointer-events:none}
.tcheck-svg{opacity:0;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tcheck-svg path{stroke-dasharray:20;stroke-dashoffset:20}
.tcheck.pop .tcheck-svg{opacity:1}
.tcheck.pop .tcheck-svg path{animation:checkDraw .25s ease-out .1s forwards}
@keyframes checkDraw{to{stroke-dashoffset:0}}
/* Pulsing bolt on top-task-card */
@keyframes pulse-bolt{0%,100%{opacity:1}50%{opacity:.55}}
.top-task-label{animation:pulse-bolt 2.2s ease-in-out infinite}
@keyframes sIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.tcard:hover{box-shadow:0 4px 22px rgba(0,0,0,.1);border-color:rgba(0,122,255,.14)}
.tcard.dragging{opacity:.4}
.tcard.drag-over{border-color:var(--accent);border-style:dashed;box-shadow:0 0 0 2px rgba(0,122,255,.18)}
.tcard.readonly{cursor:default}
.tcheck{
  width:22px;height:22px;border:2px solid #D1D1D6;border-radius:50%;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;background:#fff
}
.tcheck:hover{border-color:var(--green);background:rgba(52,199,89,.08)}
.tcheck.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.tbody{flex:1;min-width:0}
.ttitle{
  font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  outline:none;cursor:text;color:var(--text)
}
.ttitle:focus{white-space:normal;overflow:visible}
.ttitle[contenteditable=false]{cursor:default;color:var(--muted)}
.tmeta{display:flex;gap:6px;margin-top:5px;align-items:center;flex-wrap:wrap}
/* Dense cards: reward/status badges flow inline on desktop, collapse on mobile */
.tmeta-more{display:contents}
.tmeta-toggle{
  display:none;align-items:center;justify-content:center;
  width:24px;height:20px;padding:0;border:none;border-radius:var(--r-pill);
  background:rgba(120,120,128,.12);color:var(--muted);
  font-size:15px;line-height:1;font-weight:800;letter-spacing:1px;cursor:pointer;
  font-family:inherit;transition:background var(--t-fast),transform var(--t-fast);
}
.tmeta-toggle:active{transform:scale(.9)}
.tcard.meta-open .tmeta-toggle{background:var(--accent);color:#fff;transform:rotate(90deg)}
@media(max-width:600px){
  .tmeta-more{display:none}
  .tcard.meta-open .tmeta-more{display:contents;animation:sIn .2s ease}
  .tmeta-toggle{display:inline-flex}
}
.dbadge{
  font-size:11px;padding:3px 9px;border-radius:7px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
  letter-spacing:.2px;white-space:nowrap
}
.dbadge.clickable{cursor:pointer}
.dbadge.clickable:hover{border-color:rgba(60,60,67,.3);color:var(--text)}
.pbadge{
  font-size:11px;padding:3px 9px;border-radius:7px;font-weight:500;
  border:1px solid var(--border2)!important;background:transparent!important;
  color:var(--text2)!important;letter-spacing:.2px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap
}
.pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block}
.pbadge.clickable{cursor:pointer}
.pbadge.clickable:hover{border-color:rgba(60,60,67,.3)}
.pbadge-none{color:var(--muted)!important}
.role-tag{font-size:11px;padding:3px 8px;border-radius:7px;font-weight:500;border:1px solid var(--border2);background:transparent}
.role-admin{color:var(--accent)}
.role-editor{color:#1A7F3C}
.role-viewer{color:#B86B00}
/* Priority dot — colored circle only */
.prio-dot{
  width:11px;height:11px;border-radius:50%;
  flex-shrink:0;display:inline-block;align-self:center;
  transition:transform .18s
}
.prio-dot.clickable{cursor:pointer}
.prio-dot.clickable:hover{transform:scale(1.5)}
.prio-dot-high{background:#FF3B30}
.prio-dot-medium{background:#FF9500}
.prio-dot-low{background:#34C759}
/* Priority circles in add form */
.prio-pick{
  width:18px;height:18px;border-radius:50%;
  cursor:pointer;flex-shrink:0;
  transition:transform .15s,box-shadow .15s
}
.prio-pick:hover{transform:scale(1.2)}
/* Scheduled time badge */
.sched-badge{
  font-size:11px;padding:3px 9px;border-radius:7px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--accent);
  letter-spacing:.2px;white-space:nowrap;cursor:pointer;transition:border-color .15s
}
.sched-badge:hover{border-color:rgba(0,122,255,.4)}
.sched-badge-empty{color:var(--muted);border-style:dashed}
.sched-badge-empty:hover{border-color:rgba(60,60,67,.3);color:var(--text)}
/* Assignee */
.asn-badge{
  font-size:11px;padding:2px 8px 2px 4px;border-radius:20px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
  white-space:nowrap;overflow:hidden;
  max-width:150px;display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
}
.asn-badge.clickable{cursor:pointer}
.asn-badge.clickable:hover{border-color:rgba(60,60,67,.3);color:var(--text)}
.asn-badge-empty{border-style:dashed;padding:3px 9px;}
/* Avatar circle */
.asn-av{
  border-radius:50%;flex-shrink:0;overflow:hidden;
  border:1.5px solid var(--card);vertical-align:middle;
  display:inline-flex;align-items:center;justify-content:center;
}
img.asn-av{object-fit:cover;display:inline-block;}
/* Overlapping avatar stack */
.asn-stack{display:inline-flex;align-items:center;flex-direction:row-reverse;}
.asn-stack .asn-av{margin-left:-7px;}
.asn-stack .asn-av:first-child{margin-left:0;}
/* Deadline badge */
.ddl-badge{
  font-size:11px;padding:3px 9px;border-radius:7px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
  letter-spacing:.2px;white-space:nowrap
}
.ddl-badge.clickable{cursor:pointer}
.ddl-badge.clickable:hover{border-color:rgba(60,60,67,.3);color:var(--text)}
.ddl-badge-empty{border-style:dashed}
.ddl-badge.overdue{color:#FF3B30;border-color:rgba(255,59,48,.4);background:rgba(255,59,48,.08);font-weight:700}
body.dark .ddl-badge.overdue{background:rgba(255,59,48,.14)}
/* Combined dates badge */
.dates-badge{
  font-size:11px;padding:3px 9px;border-radius:7px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
  white-space:nowrap;display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  transition:border-color .15s;
}
.dates-badge:hover{border-color:rgba(60,60,67,.3);color:var(--text)}
.dates-empty{border-style:dashed}
.dates-empty:hover{color:var(--text)}
.dates-sched-txt{color:var(--accent)}
.dates-ddl-overdue{color:#FF3B30;font-weight:700}
.dates-dot{color:var(--border2);font-size:10px}
body.dark .dates-badge{border-color:rgba(255,255,255,0.14);}
body.dark .dates-badge:hover{border-color:rgba(255,255,255,0.3);}
body.dark .dates-sched-txt{color:#4DA3FF;}
/* Dates combined popup */
/* ── Dates bottom sheet (mobile) ── */
.dates-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:3000;opacity:0;transition:opacity .22s;}
.dates-sheet-overlay.open{opacity:1;}
.dates-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-radius:18px 18px 0 0;z-index:3001;padding:0 0 env(safe-area-inset-bottom,16px);transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.dates-sheet.open{transform:translateY(0);}
.dates-sheet-handle{width:40px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto 0;}
.dates-sheet-title{font-size:15px;font-weight:700;color:var(--text);text-align:center;padding:12px 16px 6px;}
.dates-sheet-body{padding:0 18px 16px;}
.dates-sheet-done{display:block;width:calc(100% - 36px);margin:6px 18px 12px;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;}
.dates-pop{padding:14px;min-width:250px;max-width:92vw;}
.dates-pop-head{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;}
.dates-pop-row{margin-bottom:10px;}
.dates-pop-lbl{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px;}
.dates-pop-inp{padding:8px 10px;font-size:13px;width:100%;}
.dates-sched-row{display:flex;gap:6px;}
.dates-sched-row .dates-pop-inp:first-child{flex:1;}
.dates-sched-row .dates-pop-inp:last-child{width:90px;direction:ltr;}
.dates-clr-row{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
.dates-clr-btn{
  font-size:11px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--border2);background:none;
  color:var(--muted);cursor:pointer;font-family:inherit;transition:all .15s;
}
.dates-clr-btn:hover{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.35);color:var(--red);}
.tnotes{font-size:13px;color:var(--muted);margin-top:3px;outline:none;cursor:text}
.tnotes:empty:before{content:'הוסף הערה...';color:#C7C7CC}
.tnotes:focus{color:var(--text)}
.tnotes[contenteditable=false]{cursor:default}
.notes-link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s;direction:ltr;display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.notes-link:hover{border-color:var(--accent)}
body.dark .notes-link{color:#4DA3FF}
.tnotes-open-link{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;padding:5px 10px;
  font-size:12px;font-weight:600;
  color:var(--accent);background:rgba(0,122,255,.08);
  border:1px solid rgba(0,122,255,.2);border-radius:8px;
  text-decoration:none;cursor:pointer;width:fit-content;
}
.tnotes-open-link:hover{background:rgba(0,122,255,.14)}
body.dark .tnotes-open-link{color:#4DA3FF;background:rgba(77,163,255,.1);border-color:rgba(77,163,255,.25)}
body.dark .tnotes-open-link:hover{background:rgba(77,163,255,.18)}
.tactions{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex-shrink:0}
.tcard:hover .tactions{opacity:1}
.tacbtn{background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:8px;color:var(--muted);font-size:14px}
.tacbtn:hover{background:var(--bg)}
.tacbtn.del:hover{color:var(--red)}
.tacbtn.repeat-tacbtn{font-size:22px;width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;border:1.5px solid var(--border2)!important;border-radius:50%!important;margin-top:6px;flex-shrink:0}
.tacbtn.repeat-tacbtn.repeat-weekly{color:#30D158;border-color:rgba(48,209,88,.45)!important;animation:repeat-spin 4s linear infinite}
.tacbtn.repeat-tacbtn.repeat-biweekly{color:#0A84FF;border-color:rgba(10,132,255,.45)!important;animation:repeat-spin 4s linear infinite}
.tacbtn.repeat-tacbtn.repeat-monthly{color:#BF5AF2;border-color:rgba(191,90,242,.45)!important;animation:repeat-spin 4s linear infinite}
@keyframes repeat-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.dhandle{color:#C7C7CC;cursor:grab;font-size:16px;padding:2px 4px;flex-shrink:0}

/* ── HISTORY ──────────────────────────────────────────────── */
.hist-sec{margin-top:24px;border-top:1px solid var(--border);padding-top:16px}
.hist-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;padding:4px 0}
.hist-head h3{font-size:14px;color:var(--muted);font-weight:600}
.harrow{color:var(--muted);font-size:11px;transition:transform .2s}
.hist-head.open .harrow{transform:rotate(90deg)}
.hlist{display:flex;flex-direction:column;gap:6px}
.hcard{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 14px;
  display:flex;align-items:center;gap:12px;opacity:.72
}
.hcheck{
  width:22px;height:22px;border-radius:50%;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:12px
}
.hcheck.deleted{background:var(--red)}
.hdel-badge{
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;
  background:rgba(255,59,48,.12);color:var(--red);flex-shrink:0
}
body.dark .hdel-badge{background:rgba(255,69,58,.18);color:#FF6961}
.htitle{flex:1;font-size:14px;text-decoration:line-through;color:var(--muted)}
.hdate{font-size:11px;color:#C7C7CC}
.rbtn{
  background:none;border:1px solid #D1D1D6;color:var(--muted);
  padding:4px 10px;border-radius:8px;cursor:pointer;font-size:11px;font-family:inherit;transition:all .15s
}
.rbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ── PROJECT GROUPS ───────────────────────────────────────── */
.pgroup{margin-bottom:24px}
.pgh{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;font-size:13px;font-weight:600;
  color:var(--muted);letter-spacing:.3px
}
.pgd{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── POPOVER PICKERS ──────────────────────────────────────── */
.msel{
  position:fixed;background:var(--card);border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 0 0.5px rgba(0,0,0,.06);
  z-index:300;overflow-y:auto;overflow-x:hidden;animation:pIn .28s cubic-bezier(.34,1.56,.64,1);min-width:170px;
  max-height:70vh;-webkit-overflow-scrolling:touch
}
@keyframes pIn{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}

/* ── FLASH TASK — calm full-screen focus ─────────────────── */
@keyframes flash-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes glow-breathe{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.2);opacity:.85}
}
@keyframes glow-breathe2{
  0%,100%{transform:scale(1);opacity:.2}
  50%{transform:scale(1.35);opacity:.45}
}
@keyframes ring-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}

#flashOverlay{
  position:fixed;inset:0;z-index:2200;
  background:#03080f;
  animation:flash-in .5s ease;
  display:none;flex-direction:column;align-items:center;
  justify-content:space-between;
  padding-top:max(env(safe-area-inset-top,0px),44px);
  padding-bottom:max(env(safe-area-inset-bottom,0px),40px);
  padding-left:28px;padding-right:28px;
}

/* Task info top */
.flash-top{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;max-width:400px;
}
.flash-header{
  font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.flash-task-name{
  font-size:24px;font-weight:500;color:rgba(255,255,255,.88);text-align:center;
  line-height:1.35;word-break:break-word;
}
.flash-proj-badge{
  font-size:12px;font-weight:500;padding:3px 12px;border-radius:20px;opacity:.7;
}

/* Center — timer + glows */
.flash-mid{
  position:relative;display:flex;align-items:center;justify-content:center;
  flex:1;
}
.flash-glow-outer{
  position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(80,160,255,.08) 0%, transparent 65%);
  animation:glow-breathe2 6s ease-in-out infinite;pointer-events:none;
}
.flash-glow-inner{
  position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(100,180,255,.14) 0%, transparent 60%);
  animation:glow-breathe 6s ease-in-out infinite;pointer-events:none;
}
/* Ring wrapper — breathes, does NOT rotate */
.flash-timer-wrap{
  position:relative;width:220px;height:220px;flex-shrink:0;
  animation:ring-breathe 6s ease-in-out infinite;
}
/* SVG rotated so arc starts at top */
.flash-ring{
  width:220px;height:220px;
  display:block;
  transform:rotate(-90deg);
  overflow:visible;
}
.flash-ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3}
.flash-ring-fill{
  fill:none;stroke:rgba(130,200,255,.75);stroke-width:3;stroke-linecap:round;
  /* r=90, viewBox 200×200 → circumference = 2π×90 ≈ 565.5 */
  stroke-dasharray:565.5;stroke-dashoffset:0;
  transition:stroke-dashoffset .95s linear, stroke 1.5s ease;
  filter:drop-shadow(0 0 6px rgba(130,200,255,.5));
}
.flash-ring-fill.urgent{
  stroke:rgba(255,160,130,.75);
  filter:drop-shadow(0 0 6px rgba(255,130,100,.45));
}
/* Time sits in its own non-rotated div — always upright */
.flash-time{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:200;color:rgba(255,255,255,.85);
  letter-spacing:-3px;font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* Buttons bottom */
.flash-btns{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:340px;
}
.flash-btn{
  width:100%;padding:17px;border:none;border-radius:16px;
  font-size:16px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.flash-btn.done{
  background:rgba(48,209,88,.15);color:rgba(48,209,88,.9);
  border:1px solid rgba(48,209,88,.2);
}
.flash-btn.done:hover{background:rgba(48,209,88,.22);color:#fff}
.flash-btn.done:active{transform:scale(.98)}
.flash-row{display:flex;gap:10px}
.flash-btn.skip{
  flex:1;background:rgba(255,255,255,.04);color:rgba(235,235,245,.4);
  border:1px solid rgba(255,255,255,.07);font-size:14px;padding:15px;
}
.flash-btn.skip:hover{background:rgba(255,255,255,.08);color:rgba(235,235,245,.7)}
.flash-btn.close{
  flex:0 0 52px;background:none;border:1px solid rgba(255,255,255,.07);
  color:rgba(235,235,245,.25);font-size:18px;padding:15px 0;border-radius:16px;
}
.flash-btn.close:hover{border-color:rgba(255,255,255,.18);color:rgba(235,235,245,.6)}
/* ── ZEN TIMER OVERLAY (mobile stopwatch full-screen) ─────── */
/* Monolith — pure black, giant type, Tesla-minimal */
#zenOverlay{
  position:fixed;inset:0;z-index:2200;
  background:#000;
  display:none;flex-direction:column;align-items:center;justify-content:space-between;
  padding-top:max(env(safe-area-inset-top,0px),44px);
  padding-bottom:max(env(safe-area-inset-bottom,0px),36px);
  padding-left:28px;padding-right:28px;
  animation:flash-in .6s ease;
}
#zenOverlay.open{display:flex}
#zenCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.zen-top{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:420px;position:relative;z-index:1}
.zen-header{font-size:9px;font-weight:600;letter-spacing:6px;color:rgba(255,255,255,.22)}
.zen-name{font-size:30px;font-weight:300;color:rgba(255,255,255,.94);text-align:center;line-height:1.3;word-break:break-word;letter-spacing:-.5px}
.zen-mid{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.zen-time{
  font-size:min(110px,26vw);font-weight:100;color:#fff;
  letter-spacing:-5px;font-variant-numeric:tabular-nums;
  animation:zen-breathe 7s ease-in-out infinite;
}
@keyframes zen-breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.zen-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;position:relative;z-index:1}
@keyframes focus-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}50%{box-shadow:0 0 0 5px rgba(255,214,10,0.18)}}
#focusBtn.focus-on{background:linear-gradient(135deg,#1C1C1E,#2C2C2E);color:#FFD60A;border-color:#FFD60A;animation:focus-pulse 2.5s ease-in-out infinite}
.mi{padding:11px 16px;cursor:pointer;font-size:14px;color:var(--text);transition:background .1s}
.mi:not(:last-child){border-bottom:1px solid var(--border)}
.mi:hover{background:#F2F2F7}
.mi.s{color:var(--accent);font-weight:600}

/* ── TASK TIMER ───────────────────────────────────────────── */
#taskTimerBar{
  display:none;background:linear-gradient(90deg,#1C1C1E,#2C2C2E);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:8px 20px;align-items:center;gap:10px;flex-shrink:0;
  animation:sIn .2s ease;
}
#taskTimerBar.active{display:flex}
.ttb-bolt{font-size:16px;animation:pulse-bolt 1.8s ease-in-out infinite;flex-shrink:0}
.ttb-name{flex:1;font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttb-elapsed{font-size:15px;font-weight:700;color:#FFD60A;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;flex-shrink:0}
.ttb-stop{background:none;border:1px solid rgba(255,255,255,.15);border-radius:8px;
  color:rgba(255,255,255,.6);cursor:pointer;padding:4px 10px;font-size:12px;
  font-family:inherit;transition:all .15s;flex-shrink:0}
.ttb-stop:hover{border-color:rgba(255,255,255,.35);color:#fff}
.tcard-inner.timer-active{outline:2px solid rgba(255,214,10,.35);outline-offset:-2px}
.tacbtn.bolt{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:transparent;border:1.5px solid var(--border2);
  color:var(--muted);padding:0;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .15s;
}
.tacbtn.bolt:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,122,255,.05)}
.tacbtn.bolt:active{transform:scale(.92)}
.tacbtn.bolt svg{width:16px;height:16px;display:block;flex-shrink:0}
.tacbtn.bolt .ic-pause{display:none}
.tacbtn.bolt .bolt-time{display:none}
.tacbtn.bolt.running{
  width:auto;height:34px;border-radius:17px;padding:0 13px;
  background:#FF9500;border-color:#FF9500;color:#fff;
}
.tacbtn.bolt.running:hover{background:#E68600;border-color:#E68600;color:#fff}
.tacbtn.bolt.running .ic-play{display:none}
.tacbtn.bolt.running .ic-pause{display:block;width:12px;height:12px}
.tacbtn.bolt.running .bolt-time{
  display:block;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;line-height:1;
}
body.dark .tacbtn.bolt{border-color:rgba(255,255,255,.18);color:rgba(235,235,245,.55);background:transparent}
body.dark .tacbtn.bolt:hover{border-color:#0A84FF;color:#0A84FF;background:rgba(10,132,255,.08)}
body.dark .tacbtn.bolt.running{background:#FF9500;border-color:#FF9500;color:#fff}
.timed-badge{
  font-size:11px;padding:3px 2px;font-weight:600;letter-spacing:.2px;
  background:transparent;color:#FF9500;flex-shrink:0;white-space:nowrap;
}
body.dark .timed-badge{color:#FF9F0A}
/* Stats row in sidebar */
#timerStats{
  padding:6px 16px 2px;font-size:11px;color:var(--smuted);
  display:none;flex-direction:column;gap:4px;
}
#timerStats.has-data{display:flex}
.pace-insight{font-size:10.5px;line-height:1.5;opacity:.85}

@media(max-width:600px){
  #taskTimerBar{padding:7px 14px;gap:8px}
  .ttb-name{font-size:12px}
}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .ei{font-size:52px;margin-bottom:14px;opacity:.4}
.empty .ei-logo{width:64px;height:64px;border-radius:15px;opacity:.55;filter:drop-shadow(0 8px 22px rgba(10,132,255,.2))}
.empty p{font-size:15px}

/* ── MODAL OVERLAY ────────────────────────────────────────── */
.moverlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.42);backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);
  z-index:500;align-items:center;justify-content:center
}
.moverlay.open{display:flex}
.mbox{
  background:var(--card);border-radius:20px;
  width:440px;max-height:88vh;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.26);
  animation:pIn .34s cubic-bezier(.34,1.4,.64,1)
}
/* ── Settings segmented tabs (replaces one long scroll) ── */
.set-tabs{
  display:flex;gap:4px;padding:4px;margin:2px 0 16px;
  background:rgba(120,120,128,.12);border-radius:var(--r-lg);
  position:sticky;top:0;z-index:4;
}
.set-tab{
  flex:1;padding:9px 4px;border:none;background:none;border-radius:var(--r);
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:all var(--t-fast) var(--ease-out);
}
.set-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 5px rgba(0,0,0,.12)}
.set-tab:active{transform:scale(.96)}
body.dark .set-tabs{background:rgba(255,255,255,.06)}
body.dark .set-tab.active{background:#2a2a2e}
.set-pane{display:none}
.set-pane.active{display:block;animation:sIn .22s var(--ease-out)}

.mhead{padding:22px 24px 16px;border-bottom:1px solid var(--border)}
.mhead h2{font-size:18px;font-weight:700;margin-bottom:2px;letter-spacing:-.3px}
.mhead p{font-size:13px;color:var(--muted)}
.mbody{flex:1;overflow-y:auto;padding:18px 24px}
.mfoot{padding:16px 24px;border-top:1px solid var(--border)}

/* Members list in share modal */
.mrow{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border)
}
.mrow:last-child{border-bottom:none}
.mav{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;flex-shrink:0;overflow:hidden
}
.mav img{width:36px;height:36px;border-radius:50%}
.minfo{flex:1;min-width:0}
.memail{font-size:13px;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mname{font-size:12px;color:var(--muted)}
.role-sel{
  padding:5px 8px;border:1.5px solid var(--border);
  border-radius:8px;font-size:13px;font-family:inherit;
  cursor:pointer;outline:none;background:#F2F2F7;color:var(--text);transition:all .15s
}
.role-sel:focus{border-color:var(--accent);background:#fff}
.mrm{
  background:none;border:none;color:var(--red);cursor:pointer;
  font-size:20px;line-height:1;padding:4px 6px;border-radius:8px;transition:background .15s
}
.mrm:hover{background:rgba(255,59,48,.08)}
.invite-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.sinput{
  flex:1;min-width:0;padding:10px 12px;background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:14px;outline:none;direction:ltr;
  font-family:inherit;color:var(--text);transition:all .2s
}
.sinput:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.09)}
.srole{
  padding:10px;background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:13px;font-family:inherit;
  outline:none;cursor:pointer;color:var(--text);transition:all .2s;flex-shrink:0
}
.srole:focus{background:#fff;border-color:var(--accent)}
.sadd{
  background:var(--accent);color:#fff;border:none;
  padding:10px 16px;border-radius:10px;font-weight:600;
  cursor:pointer;font-size:14px;font-family:inherit;white-space:nowrap;transition:all .15s;flex-shrink:0
}
.sadd:hover{background:#0066DD}
.serr{font-size:13px;min-height:18px;margin-top:4px}
.serr.err{color:var(--red)}
body.dark .sinput,body.dark .srole{background:#2C2C2E;color:#fff}
body.dark .sinput::placeholder{color:rgba(235,235,245,.4)}
body.dark .sinput:focus,body.dark .srole:focus{background:#1C1C1E;border-color:#0A84FF;box-shadow:0 0 0 3px rgba(10,132,255,.15)}
body.dark .srole option{background:#2C2C2E;color:#fff}
.serr.ok{color:var(--green)}
.mclose{
  width:100%;background:#F2F2F7;border:none;color:var(--muted);
  cursor:pointer;font-size:14px;font-family:inherit;
  padding:11px;border-radius:10px;transition:all .15s;margin-top:8px
}
.mclose:hover{background:#E5E5EA;color:var(--text)}

/* ── FORM INPUTS (modals) ─────────────────────────────────── */
.f-input{
  width:100%;padding:12px 14px;
  background:#F2F2F7;border:1.5px solid transparent;
  border-radius:10px;font-size:15px;outline:none;
  font-family:inherit;color:var(--text);transition:all .2s
}
.f-input:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.09)}
.f-input::placeholder{color:var(--muted)}
.f-label{font-size:13px;font-weight:500;color:var(--muted);display:block;margin-bottom:6px}
.f-err{font-size:13px;min-height:18px;margin-top:8px}
/* Button styles */
.btn-primary{
  width:100%;padding:13px;background:var(--accent);color:#fff;
  border:none;border-radius:12px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;display:block
}
.btn-primary:hover{background:#0066DD}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-danger{
  width:100%;padding:12px;background:rgba(255,59,48,.08);color:var(--red);
  border:none;border-radius:12px;font-size:14px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:all .15s;margin-top:8px;display:block
}
.btn-danger:hover{background:rgba(255,59,48,.14)}
.btn-ghost{
  width:100%;padding:10px;background:none;border:none;
  color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit;
  transition:color .15s;margin-top:4px;display:block
}
.btn-ghost:hover{color:var(--text)}
/* ── WEEKLY REPORT ─────────────────────────────────────────── */
.rep-range{font-size:13px;color:var(--muted);margin-bottom:14px;text-align:center}
.rep-stats{display:flex;gap:10px;margin-bottom:6px}
.rep-stat{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px 6px;text-align:center;min-width:0}
.rep-stat .rs-num{font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.05;white-space:nowrap}
.rep-stat .rs-lbl{font-size:11px;color:var(--muted);margin-top:6px}
.rep-stat .rs-delta{font-size:10.5px;font-weight:600;margin-top:4px}
.rep-stat .rs-delta.up{color:var(--green)}
.rep-stat .rs-delta.down{color:var(--muted)}
.rep-section-title{font-size:12px;font-weight:600;color:var(--muted);margin:18px 0 6px;letter-spacing:.2px}
.rep-proj-row{display:flex;align-items:center;gap:8px;font-size:14px;padding:5px 0}
.rep-proj-row .rp-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.rep-proj-row .rp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-proj-row .rp-cnt{font-weight:700;color:var(--muted);font-size:13px}
.rep-open{margin-top:16px;padding:12px 14px;background:var(--bg);border-radius:12px;font-size:14px}
.rep-empty{text-align:center;color:var(--muted);font-size:14px;padding:22px 0;line-height:1.5}
.rep-insight{font-size:14px;line-height:1.55;padding:7px 0;border-bottom:1px solid var(--border);color:var(--text2)}
.rep-insight:last-child{border-bottom:none}
.rep-insight b{color:var(--text);font-weight:700}
.rep-trend{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:64px;margin:6px 2px 0}
.rep-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.rep-bar-n{font-size:11px;font-weight:700;color:var(--muted)}
.rep-bar{width:100%;max-width:34px;border-radius:6px 6px 0 0;background:var(--border2)}
.rep-bar.cur{background:var(--accent)}
.rep-trend-verdict{font-size:13px;font-weight:600;color:var(--text2);margin-top:9px}
/* ── CONTACTS (phone book) ─────────────────────────────────── */
.ct-add{display:flex;gap:8px;margin:12px 0 14px}
.ct-add .f-input{flex:1;min-width:0}
.ct-add #ctName{flex:1.3}
.ct-add-btn{width:46px;flex:0 0 46px;padding:0;font-size:24px;line-height:1}
.ct-list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
/* On mobile the modal goes full-screen (mbox-full): let the list fill the screen
   and scroll as one with the modal body, instead of a cramped 46vh inner scroller. */
@media(max-width:600px){
  #contactsModal .ct-list{max-height:none;overflow:visible;gap:8px}
  #contactsModal .mbody{display:flex;flex-direction:column}
}
/* Contact detail: full-screen on mobile, body scrolls as one; clip the incidental
   horizontal overflow (the stage pills keep their own internal scroll). */
#ctDetailModal .mbody{overflow-x:hidden}
#ctDetailModal .ctd-field-input{min-width:0}
.ct-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--border)}
.ct-info{flex:1;min-width:0;cursor:pointer}
.ct-name{font-size:15px;font-weight:600;word-break:break-word}
.ct-phone{font-size:13px;color:var(--muted);margin-top:1px;word-break:break-all}
.ct-fu-line{font-size:12px;color:var(--accent);margin-top:3px;opacity:.85;word-break:break-word}
.ct-actions{display:flex;gap:6px;flex-shrink:0}
.ct-btn{width:44px;height:44px;border-radius:14px;border:1.5px solid var(--border2);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;text-decoration:none;transition:transform .12s,background .15s}
.ct-btn:active{transform:scale(.92)}
.ct-btn.call{background:rgba(0,122,255,.1);border-color:var(--accent)}
.ct-btn.wa{background:rgba(37,211,102,.1);border-color:#25D36655}
.ct-empty{text-align:center;color:var(--muted);font-size:14px;padding:30px 0;line-height:1.6}
body.dark .ct-row{background:#1C1C1E;border-color:rgba(255,255,255,0.06)}
body.dark .ct-btn{background:#262626;border-color:rgba(255,255,255,0.1)}
.ct-shared-tag{font-size:10px;font-weight:700;color:var(--accent);background:rgba(0,122,255,.12);padding:1px 6px;border-radius:6px;vertical-align:middle;margin-right:4px}
#ctSharePanel{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px}
.ct-sort-bar{display:flex;gap:6px;margin:10px 0 4px}
.ct-sort-btn{flex:1;padding:6px 0;font-size:13px;border:1px solid var(--border2);border-radius:10px;background:var(--card);color:var(--muted);cursor:pointer;font-family:inherit;transition:all .15s}
.ct-sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
body.dark .ct-sort-btn{background:#1C1C1E;border-color:rgba(255,255,255,0.1)}
body.dark .ct-sort-btn.active{background:var(--accent);border-color:var(--accent)}
.ct-share-title{font-size:14px;font-weight:700;margin-bottom:4px}
.ct-share-note{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.ct-share-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ct-share-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--card);border:1px solid var(--border2);border-radius:20px;padding:4px 6px 4px 12px;direction:ltr}
.ct-share-chip button{border:none;background:rgba(255,59,48,.12);color:var(--red);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.ct-share-empty{font-size:13px;color:var(--muted)}
.ct-share-add{display:flex;gap:8px}
.ct-share-add .f-input{flex:1;min-width:0}
body.dark #ctSharePanel{background:#1C1C1E;border-color:rgba(255,255,255,0.06)}
body.dark .ct-share-chip{background:#262626;border-color:rgba(255,255,255,0.1)}
body.dark .rep-stat,body.dark .rep-open{background:#1C1C1E;border-color:rgba(255,255,255,0.06)}
/* ── CONTACT DETAIL / CRM ──────────────────────────────────── */
.ctd-avatar{position:relative;width:68px;height:68px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:#fff;margin-bottom:8px;letter-spacing:.5px;overflow:hidden}
.ctd-av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:0;transition:opacity .25s}
.ctd-av-img.loaded{opacity:1}
.ctd-action-bar{display:flex;gap:8px;padding:4px 0 14px}
.ctd-action-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:10px 6px;cursor:pointer;text-decoration:none;color:var(--text);font-size:11px;transition:background .15s}
.ctd-action-btn:hover{background:var(--hover,rgba(120,120,128,.08))}
.ctd-action-btn span{font-size:20px}
.ctd-section{padding:12px 0;border-bottom:1px solid var(--border)}
.ctd-section:last-child{border-bottom:none;padding-bottom:4px}
.ctd-section-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.ctd-details-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ctd-details-hdr .ctd-section-title{margin-bottom:0}
.ctd-details-save{
  font-size:12px;font-weight:600;padding:4px 13px;border-radius:10px;
  background:rgba(0,122,255,.1);color:var(--accent);border:1px solid rgba(0,122,255,.2);
  cursor:pointer;font-family:inherit;transition:all .2s
}
.ctd-details-save.saved{background:rgba(52,199,89,.12);color:#34C759;border-color:rgba(52,199,89,.3)}
.ctd-details-ta{
  font-size:13px;line-height:1.7;font-family:inherit;
  resize:vertical;min-height:110px;width:100%;box-sizing:border-box;
  letter-spacing:.1px
}
.ctd-details-view{
  font-size:13px;color:var(--text);line-height:1.7;
  white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.03);border-radius:10px;
  padding:10px 12px;border:1px solid var(--border)
}
.ctd-field{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ctd-field-label{font-size:12px;color:var(--muted);min-width:56px;flex-shrink:0}
.ctd-field-input{flex:1;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:14px;padding:3px 0;outline:none;font-family:inherit}
.ctd-field-input:focus{border-bottom-color:var(--accent)}
.ctd-field-input[readonly]{border-bottom-color:transparent;cursor:default}
.ctd-fu-section{background:rgba(0,122,255,.05);border-radius:14px;padding:14px;margin:10px 0;border:1px solid rgba(0,122,255,.15)}
.ctd-fu-due{background:rgba(255,59,48,.05);border-color:rgba(255,59,48,.25)}
.ctd-prop-section{background:rgba(52,199,89,.05);border-radius:14px;padding:14px;margin:10px 0;border:1px solid rgba(52,199,89,.2)}
.ctd-note-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.ctd-note-item:last-child{border-bottom:none}
.ctd-note-avatar{width:28px;height:28px;border-radius:50%;background:rgba(0,122,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent);flex-shrink:0;margin-top:2px}
.ctd-note-body{flex:1;min-width:0}
.ctd-note-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.ctd-note-author{font-size:12px;font-weight:600;color:var(--text)}
.ctd-note-date{font-size:10px;color:var(--muted)}
.ctd-note-text{font-size:13px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ctd-note-del{font-size:11px;color:var(--red);opacity:.5;background:none;border:none;cursor:pointer;padding:0 2px;line-height:1}
.ctd-note-del:hover{opacity:1}
.ctd-doc-section{margin-top:10px;padding-top:10px;border-top:1px solid rgba(52,199,89,.2)}
.ctd-doc-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;background:rgba(52,199,89,.08);border-radius:10px;padding:8px 10px}
.ctd-doc-link{flex:1;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--accent);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctd-doc-icon{font-size:18px;flex-shrink:0}
.ctd-doc-del{border:none;background:none;color:var(--red);opacity:.6;cursor:pointer;font-size:14px;flex-shrink:0;padding:2px 4px}
.ctd-doc-del:hover{opacity:1}
.ctd-upload-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 14px;border:1px solid var(--border2);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer;font-family:inherit;transition:background .15s}
.ctd-upload-btn:hover{background:var(--hover,rgba(120,120,128,.08))}
.ctd-upload-hint{font-size:11px;color:var(--muted)}
body.dark .ctd-doc-row{background:rgba(52,199,89,.1)}
body.dark .ctd-upload-btn{background:#1C1C1E;border-color:rgba(255,255,255,.1)}
body.dark .ctd-action-btn{background:#1C1C1E;border-color:rgba(255,255,255,.08)}
body.dark .ctd-action-btn:hover{background:#2C2C2E}
body.dark .ctd-fu-section{background:rgba(0,122,255,.08);border-color:rgba(0,122,255,.2)}
body.dark .ctd-prop-section{background:rgba(52,199,89,.08);border-color:rgba(52,199,89,.2)}
body.dark .ctd-note-avatar{background:rgba(0,122,255,.15)}
/* ── MEETING RECORDER ──────────────────────────────────────── */
#meetOverlay{position:fixed;inset:0;z-index:9997;display:none;flex-direction:column;
  background:radial-gradient(circle at 50% 32%,#1d2738,#0a0e16 70%);color:#fff;
  align-items:center;justify-content:flex-start;padding:0 22px;-webkit-user-select:none;user-select:none}
#meetOverlay.open{display:flex}
.meet-head{margin-top:max(46px,env(safe-area-inset-top));text-align:center;flex-shrink:0}
.meet-status{font-size:13px;letter-spacing:.5px;color:rgba(255,255,255,.55);text-transform:uppercase}
.meet-time{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px;margin-top:6px}
.meet-pulse{width:14px;height:14px;border-radius:50%;background:#FF453A;display:inline-block;
  margin-left:9px;vertical-align:middle;box-shadow:0 0 0 0 rgba(255,69,58,.6);animation:meet-pulse 1.6s ease-out infinite}
@keyframes meet-pulse{0%{box-shadow:0 0 0 0 rgba(255,69,58,.55)}70%{box-shadow:0 0 0 16px rgba(255,69,58,0)}100%{box-shadow:0 0 0 0 rgba(255,69,58,0)}}
.meet-paused .meet-pulse{background:#8E8E93;animation:none}
.meet-live{flex:1;width:100%;max-width:560px;overflow-y:auto;margin:22px 0;
  font-size:16px;line-height:1.7;color:rgba(255,255,255,.9);text-align:right;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.meet-live .ml-interim{color:rgba(255,255,255,.45)}
.meet-live-empty{color:rgba(255,255,255,.4);text-align:center;margin-top:40px;font-size:15px;line-height:1.6}
.meet-btns{flex-shrink:0;width:100%;max-width:420px;padding-bottom:max(30px,env(safe-area-inset-bottom));display:flex;gap:12px}
.meet-btn{flex:1;padding:16px;border-radius:16px;border:none;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:transform .12s,opacity .2s}
.meet-btn:active{transform:scale(.97)}
.meet-btn.stop{background:#fff;color:#0a0e16}
.meet-btn.pause{background:rgba(255,255,255,.14);color:#fff}
.meet-btn.cancel{background:transparent;color:rgba(255,255,255,.5);flex:0 0 auto;padding:16px 18px}
/* Review modal */
.mr-sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.mr-controls{display:flex;gap:8px;margin-bottom:14px}
.mr-controls select{flex:1;min-width:0}
.mr-list{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.mr-line{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--border2);background:var(--bg);cursor:pointer;font-size:14.5px;line-height:1.45;
  transition:border-color .15s,background .15s}
.mr-line.on{border-color:var(--accent);background:rgba(0,122,255,.07)}
.mr-check{width:21px;height:21px;border-radius:7px;border:2px solid var(--border2);flex-shrink:0;
  margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:all .15s}
.mr-line.on .mr-check{background:var(--accent);border-color:var(--accent)}
.mr-txt{flex:1;min-width:0;word-break:break-word}
.mr-hint{font-size:11px;font-weight:700;color:var(--orange);background:rgba(255,149,0,.12);
  padding:2px 7px;border-radius:6px;flex-shrink:0;align-self:center}
.mr-empty{text-align:center;color:var(--muted);font-size:14px;padding:26px 0;line-height:1.6}
.mr-transcript-toggle{font-size:12.5px;color:var(--accent);cursor:pointer;text-align:center;margin-top:10px}
body.dark .mr-line{background:#1C1C1E;border-color:rgba(255,255,255,0.08)}
body.dark .mr-line.on{background:rgba(10,132,255,.12);border-color:var(--accent)}
/* ── MENTOR QUOTE — wisdom on completion ───────────────────── */
#mentorQuote{position:fixed;top:max(64px,calc(env(safe-area-inset-top) + 14px));left:50%;
  transform:translateX(-50%) translateY(-18px);z-index:9999;max-width:min(520px,92vw);
  display:flex;align-items:flex-start;gap:14px;padding:18px 24px;border-radius:18px;
  background:rgba(20,20,22,.97);color:#fff;box-shadow:0 16px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,214,10,.25);border-right:4px solid #FFD60A;
  opacity:0;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;text-align:right}
#mentorQuote.show{opacity:1;transform:translateX(-50%) translateY(0)}
#mentorQuote .mq-mark{color:#FFD60A;font-size:24px;flex-shrink:0;line-height:1.3}
#mentorQuote .mq-text{font-size:17px;font-weight:600;line-height:1.55;letter-spacing:-.2px}
@media(max-width:600px){
  #mentorQuote{padding:16px 18px;max-width:94vw}
  #mentorQuote .mq-mark{font-size:21px}
  #mentorQuote .mq-text{font-size:15.5px;line-height:1.5}
}
/* Color swatches */
.csw{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2.5px solid transparent;transition:transform .1s,border-color .1s;flex-shrink:0
}
.csw:hover{transform:scale(1.18)}
.csw.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.22)}
/* Settings section */
.set-section{margin-bottom:20px}
.set-section-label{
  font-size:12px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px
}
.set-info{
  font-size:14px;color:var(--muted);padding:12px 14px;
  background:#F2F2F7;border-radius:10px;direction:ltr
}
.biz-logo-row{display:flex;align-items:center;gap:14px}
.biz-logo-preview{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  border:1.5px dashed var(--border2);background:var(--card);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.biz-logo-preview span{font-size:11px;color:var(--muted)}
.biz-logo-preview img{width:100%;height:100%;object-fit:contain}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#D1D1D6;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#AEAEB2}

/* ── MOBILE ───────────────────────────────────────────────── */
.mob-ham{
  display:none;background:none;border:none;
  color:var(--muted);font-size:22px;cursor:pointer;
  padding:3px 6px;border-radius:8px;line-height:1;flex-shrink:0
}
.mob-ham:hover{background:var(--bg)}
.mob-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.4);backdrop-filter:blur(2px);z-index:390
}
.mob-overlay.open{display:block}
@media(max-width:600px){
  .mob-ham{display:block}
  .sidebar{
    display:flex!important;position:fixed;right:0;top:0;
    bottom:calc(75px + max(16px,env(safe-area-inset-bottom)));
    width:min(310px,88vw);min-width:0;
    z-index:400;transform:translateX(105%);
    transition:transform .25s ease;
    box-shadow:-4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.mob-open{transform:translateX(0)}

  /* Topbar — mobile: title row, then ONE actions row (status on the right, buttons on the left) */
  .topbar{padding:10px 12px;gap:6px;flex-wrap:wrap;align-items:center}
  .topbar-mid{display:contents}
  .mob-ham{order:-2;flex-shrink:0}
  .topbar-t{order:-2;flex:1;text-align:center;
             white-space:normal;overflow:visible;text-overflow:clip}
  .topbar-opts{order:-1;width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap;row-gap:8px}
  /* status keeps its natural width & never overflows onto the buttons */
  .topbar-opts .topbar-s{order:-1;flex:0 0 auto;font-size:12px;gap:6px;white-space:nowrap;
                          padding:0;border:0;margin:0;color:var(--muted)}
  .topbar-opts .day-ring{width:16px;height:16px}
  .topbar-opts .topbar-gems{flex-shrink:0}
  .ts-timer{display:none} /* timed-work stat is available in the report/boss — keep the topbar clean */
  .tb-btn{width:46px!important;height:46px!important;border-radius:14px!important;font-size:19px!important;flex-shrink:0}
  .tb-btn-icon{font-size:18px!important;}
  .tb-btn-lbl{font-size:9px!important;}
  #blockBtn.block-on{width:auto!important;min-width:76px!important;padding:0 10px!important;font-size:13px!important;}
  .tb-btn-wa{border-color:rgba(37,211,102,.3)!important;}
  #groupByLabel{display:none!important;}
  .plan-label{display:none}

  /* Add form — 2 clean rows:
     Row 1: 🎤  [text input──────────]
     Row 2: 1h  project  ●●●  ✦  [+ הוסף] */
  .add-form{padding:10px 12px;gap:8px;row-gap:8px}
  .voice-btn{order:1;flex-shrink:0;width:44px;height:44px;border-radius:12px;}
  .add-form input[type=text]{order:2;flex:1 0 auto;min-width:calc(100% - 60px);}
  .ddl-add-input{display:none}
  /* Row 2 — right-to-left: + הוסף | ✦ | ●●● | project | 1h */
  .abtn{order:3;flex:1;padding:10px 16px;font-size:15px;font-weight:700;border-radius:12px;min-width:0;}
  .mentor-btn{order:4;flex-shrink:0;width:44px;height:44px;border-radius:12px;}
  [title="דחיפות"]{order:5;flex-shrink:0;}
  .psel{order:6;flex:1;min-width:0;font-size:13px;padding:9px 8px;}
  .dsel{order:7;flex:0 0 48px;width:48px;font-size:12px;padding:9px 2px;}

  /* Task area — compact mobile */
  .task-area{padding:8px 11px}
  .tlist{gap:5px}
  .tcard-inner{padding:9px 11px 9px 13px;gap:6px;align-items:stretch}
  .tmeta{gap:5px 8px;margin-top:4px;flex-wrap:wrap}
  .ttitle{font-size:14px;line-height:1.35;white-space:normal}
  /* Notes: compact on mobile — show subtle "+ הערה" tap target when empty */
  .tnotes{font-size:12px;margin-top:2px;padding:4px 0;min-height:20px}
  .tnotes:empty:before{content:'+ הערה';font-size:11px;color:#888}
  /* Badges: finger-friendly tap height (~28px) */
  .dbadge,.pbadge,.bkt-badge,.sched-badge,.ddl-badge{font-size:11px;padding:6px 10px}
  .gem-task-badge{font-size:11px;padding:3px 7px;}
  #topGems{font-size:12px;}
  .dates-badge{font-size:11px;padding:5px 10px;}
  .asn-badge{font-size:11px;padding:3px 8px 3px 4px;max-width:140px;}
  .asn-badge{font-size:11px;padding:6px 10px;max-width:90px}
  /* Priority dot: visual stays 11px, tap area grows to 31x31 via transparent border */
  .prio-dot{border:10px solid transparent;background-clip:padding-box;box-sizing:content-box}
  /* Action column: just the timer — delete is via swipe-left on mobile */
  .tactions{opacity:1;flex-direction:column;justify-content:center;align-self:stretch;gap:0;padding:1px 0}
  .tacbtn{padding:4px 5px;font-size:13px}
  .tacbtn.del{display:none}
  .tacbtn.bolt{width:44px;height:44px;align-self:flex-end}
  .tacbtn.bolt.running{width:auto;height:36px;border-radius:18px}
  .dhandle{display:none}
  .tcheck{display:none}
  /* Top task card — label+project on row 1, name wraps on row 2 */
  .top-task-card{flex-wrap:wrap;padding:11px 14px;gap:6px}
  .top-task-label{flex:1}
  .top-task-name{flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip;font-size:15px;margin-top:1px}

  /* Modals — end right above the bottom nav, no wasted strip */
  .moverlay{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .mbox{width:96vw!important;max-width:96vw!important;border-radius:16px;max-height:none}
  /* the "מצבים" menu spreads edge-to-edge instead of hugging one side */
  .modes-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0;transform-origin:top center}

  /* Sidebar: no hover on touch — tapping a project expands its actions with a spring */
  .pitem.active .proj-actions{
    display:flex;
    animation:pa-expand .34s cubic-bezier(.34,1.3,.64,1);
  }
  @keyframes pa-expand{
    from{max-height:0;opacity:0;transform:translateY(-4px)}
    to{max-height:44px;opacity:1;transform:translateY(0)}
  }
  .mhead{padding:16px 16px 12px}
  .mbody{padding:12px 16px}
  .mfoot{padding:12px 16px}

  /* Share modal invite row: email full width, role+button below */
  .invite-row{flex-wrap:wrap}
  .sinput{flex:1 0 100%}
  .srole{flex:1}
  .sadd{flex:1;text-align:center}

  /* Member rows: prevent overflow */
  .mrow{flex-wrap:wrap;gap:8px}
  .minfo{min-width:0;flex:1}
  .memail{font-size:12px}
  .role-sel{font-size:12px;padding:4px 6px}
  .mrm{padding:6px 8px}
}

/* ═══════════════════════════════════════════════
   KANBAN VIEW
═══════════════════════════════════════════════ */
.kanban-wrap{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.kanban-wrap.open{display:flex}

/* Column tabs bar (mobile only) */
.k-nav{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:10px 14px;flex-shrink:0;display:flex;align-items:center;gap:10px
}
.k-tabs{display:flex;background:#F2F2F7;border-radius:11px;padding:3px;gap:2px;flex:1}
.k-tab{
  flex:1;padding:7px 4px;text-align:center;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--muted);
  border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:5px;
  border:none;background:none;font-family:inherit
}
.k-tab.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.k-tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Slider (mobile: snap-scroll; desktop: 3-col flex) */
.k-slider{
  display:flex;flex:1;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;min-height:0
}
.k-slider::-webkit-scrollbar{display:none}

.k-col{
  flex:0 0 100%;scroll-snap-align:start;
  display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  padding:12px 14px 80px;gap:10px
}
@keyframes kDropBounce{
  0%{transform:scale(.93)}
  55%{transform:scale(1.035)}
  80%{transform:scale(.99)}
  100%{transform:scale(1)}
}
.k-drop-bounce{animation:kDropBounce .38s cubic-bezier(.34,1.56,.64,1)}
.k-col-head{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:4px;flex-shrink:0
}
.k-col-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.k-cnt{
  font-size:12px;font-weight:600;
  background:rgba(60,60,67,.1);color:var(--muted);
  padding:2px 7px;border-radius:20px;margin-right:auto
}
/* Inline add in column */
.k-add-row{
  display:flex;gap:8px;align-items:center;
  background:rgba(120,120,128,.06);border-radius:12px;
  padding:10px 12px;cursor:pointer;margin-top:4px;
  border:1.5px dashed rgba(120,120,128,.2);transition:all .15s;flex-shrink:0
}
.k-add-row:hover{background:rgba(0,122,255,.06);border-color:var(--accent)}
.k-add-row input{
  flex:1;border:none;background:none;font-size:14px;
  font-family:inherit;color:var(--text);outline:none
}
.k-add-row input::placeholder{color:var(--muted)}
.k-add-btn{
  background:var(--accent);color:#fff;border:none;
  border-radius:8px;padding:5px 11px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s
}
.k-add-btn:hover{background:#0066DD}

/* Move arrows on kanban cards */
.k-arrows{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.k-arr{
  border:1.5px solid var(--border);background:none;color:var(--muted);
  border-radius:8px;padding:5px 10px;font-size:14px;cursor:pointer;
  transition:all .15s;font-family:inherit;line-height:1
}
.k-arr:hover{background:var(--bg);color:var(--text);border-color:rgba(60,60,67,.3)}
.k-arr:active{transform:scale(.92)}
.k-arr-spacer{flex:1}

/* Bucket badge in normal view */
.bkt-badge{
  font-size:11px;padding:3px 9px;border-radius:7px;
  font-weight:500;cursor:pointer;white-space:nowrap;letter-spacing:.2px;
  background:transparent;border:1px solid var(--border2);
  transition:all .15s;flex-shrink:0
}
.bkt-today{color:#FF3B30}
.bkt-tomorrow{color:#FF9500}
.bkt-dream{color:#007AFF}
.bkt-badge:hover{border-color:rgba(60,60,67,.3)}

/* Desktop kanban overrides */
@media(min-width:601px){
  .k-tabs{display:none}
  .k-slider{overflow-x:hidden;gap:10px;padding:12px}
  .k-col{
    flex:1;background:#F6F6F8;border-radius:14px;
    padding:0;overflow-y:auto;min-width:0
  }
  .k-col-head{
    padding:14px 16px 10px;
    position:sticky;top:0;z-index:2;
    background:inherit;border-radius:14px 14px 0 0
  }
  .k-col-body{padding:0 10px 12px;display:flex;flex-direction:column;gap:8px}
  .k-add-row{margin:0 10px 10px}
  /* Desktop DnD hover */
  .k-col.drag-over{outline:2px solid var(--accent);outline-offset:-2px}
}

/* ══════════════════════════════════════════════
   ERP SIDEBAR BUTTON
══════════════════════════════════════════════ */
.erp-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:20px;font-size:13px;font-weight:600;
  background:rgba(184,150,62,.13);color:var(--accent);
  border:1px solid rgba(184,150,62,.35);
  cursor:pointer;font-family:inherit;letter-spacing:.3px;
  transition:all .18s;white-space:nowrap;flex-shrink:0
}
.erp-pill:hover{background:rgba(184,150,62,.22);border-color:var(--accent);}

/* ══════════════════════════════════════════════
   ERP OVERLAY + PANEL (Tesla/Mac style)
══════════════════════════════════════════════ */
.erp-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s;
  display:flex;align-items:flex-end;justify-content:center
}
.erp-overlay.open{opacity:1;pointer-events:auto;}
.erp-panel{
  width:100%;max-width:540px;
  max-height:92dvh;
  background:var(--sidebar);
  border-radius:22px 22px 0 0;
  border:1px solid var(--border2);
  border-bottom:none;
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .32s cubic-bezier(.32,1,.44,1);
  overflow:hidden;
}
.erp-overlay.open .erp-panel{transform:translateY(0);}
.erp-hdr{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border2);flex-shrink:0
}
.erp-title{flex:1;font-size:18px;font-weight:700;color:var(--accent);letter-spacing:.4px}
.erp-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(120,120,128,.15);color:var(--text);font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.erp-close:hover{background:rgba(120,120,128,.28);}
.erp-3tabs{display:flex;border-bottom:1px solid var(--border2);flex-shrink:0;background:rgba(0,0,0,.1)}
.erp-3tab{
  flex:1;padding:13px 0;font-size:13px;font-weight:600;
  color:var(--muted);background:none;border:none;
  border-bottom:2px solid transparent;cursor:pointer;
  font-family:inherit;letter-spacing:.2px;transition:color .2s,border-color .2s
}
.erp-3tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.erp-new-row{padding:4px 0 6px;flex-shrink:0}
.erp-new-fab{
  width:100%;padding:13px 0;border-radius:14px;
  background:var(--accent);color:#fff;border:none;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
  letter-spacing:.2px;transition:opacity .15s
}
.erp-new-fab:hover{opacity:.86;}
.erp-search-wrap{padding:10px 16px 0;flex-shrink:0}
.erp-search{
  width:100%;box-sizing:border-box;
  padding:9px 14px;border-radius:12px;font-size:14px;
  background:var(--card);border:1px solid var(--border2);
  color:var(--text);font-family:inherit;
  outline:none;
}
.erp-search:focus{border-color:var(--accent);}
.erp-list{flex:1;overflow-y:auto;padding:8px 12px 24px;display:flex;flex-direction:column;gap:0}
.erp-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:15px}
.erp-date-hdr{font-size:13px;font-weight:700;color:var(--accent);padding:12px 2px 5px;letter-spacing:.2px}
.erp-card{
  background:var(--card);border-radius:16px;padding:14px 14px 10px;
  border:1px solid var(--border2);cursor:pointer;
  transition:all .15s;margin-bottom:10px
}
.erp-card:hover{border-color:rgba(184,150,62,.4);transform:translateY(-1px);}
.erp-card:active{transform:translateY(0);}
.erp-card-top{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.erp-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
  position:relative;overflow:hidden
}
.erp-card-info{flex:1;min-width:0}
.erp-card-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erp-card-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.erp-status-pill{
  padding:4px 11px;border-radius:14px;
  font-size:11px;font-weight:700;color:#fff;
  white-space:nowrap;flex-shrink:0;letter-spacing:.2px
}
.erp-time{font-size:11px;color:var(--muted)}
.erp-card-event{font-size:12px;color:var(--accent);font-weight:600;margin:2px 0 6px}
.erp-card-note{
  font-size:12px;color:var(--muted);line-height:1.5;
  padding:7px 10px;border-radius:9px;background:rgba(120,120,128,.08);
  margin-bottom:8px;direction:rtl
}
.erp-card-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.erp-card-tags{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.erp-fu-tag{
  font-size:11px;padding:3px 8px;border-radius:8px;
  background:rgba(52,199,89,.12);color:#34C759;border:1px solid rgba(52,199,89,.25)
}
.erp-fu-tag.soon{background:rgba(255,149,0,.12);color:#FF9500;border-color:rgba(255,149,0,.3)}
.erp-fu-tag.overdue{background:rgba(255,59,48,.12);color:#FF3B30;border-color:rgba(255,59,48,.3)}
.erp-pr-tag{
  font-size:11px;padding:3px 8px;border-radius:8px;
  background:rgba(184,150,62,.12);color:var(--accent);border:1px solid rgba(184,150,62,.25)
}
.erp-card-actions{display:flex;gap:6px;flex-shrink:0}
.erp-act{
  font-size:19px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;
  background:rgba(120,120,128,.1);transition:background .15s;border:1px solid rgba(120,120,128,.15)
}
.erp-act:hover{background:rgba(120,120,128,.22);}
.erp-act[href^="tel:"]{background:rgba(0,122,255,.1);border-color:rgba(0,122,255,.25);}
.erp-act[href^="https://wa.me"]{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.3);}
.erp-fu-note{border-left:2px solid rgba(184,150,62,.5);background:rgba(184,150,62,.06)!important;color:var(--accent)!important;margin-bottom:6px}

/* ══════════════════════════════════════════════
   STAGE BAR IN CONTACT DETAIL
══════════════════════════════════════════════ */
.ctd-stage-bar{
  display:flex;gap:5px;overflow-x:auto;padding:4px 0 8px;
  scrollbar-width:none;margin-bottom:4px
}
.ctd-stage-bar::-webkit-scrollbar{display:none}
.ctd-stage-btn{
  flex-shrink:0;padding:5px 12px;border-radius:14px;font-size:12px;font-weight:500;
  border:1px solid var(--border2);background:transparent;color:var(--muted);
  cursor:pointer;font-family:inherit;transition:all .15s
}
.ctd-stage-btn.active{font-weight:700;}
.ctd-stage-btn:not([onclick=""]){cursor:pointer;}
.ctd-stage-btn[onclick=""]{cursor:default;pointer-events:none;}

/* ══════════════════════════════════════════════
   ERP QUOTE BUTTON
══════════════════════════════════════════════ */
.erp-quote-btn{
  padding:6px 13px;border-radius:14px;font-size:12px;font-weight:600;
  background:rgba(52,199,89,.12);color:#34C759;
  border:1px solid rgba(52,199,89,.3);cursor:pointer;font-family:inherit;
  transition:all .15s
}
.erp-quote-btn:hover{background:rgba(52,199,89,.22);}

/* ══════════════════════════════════════════════
   QUOTE TEMPLATE MODAL
══════════════════════════════════════════════ */
.quote-tpl-bar{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;margin-bottom:4px
}
.quote-tpl-bar::-webkit-scrollbar{display:none}
.quote-tpl-btn{
  flex-shrink:0;padding:6px 14px;border-radius:14px;font-size:12px;font-weight:500;
  border:1px solid var(--border2);background:var(--card);color:var(--muted);
  cursor:pointer;font-family:inherit;transition:all .15s
}
.quote-tpl-btn.active{
  background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700
}

@media(min-width:601px){
  .erp-overlay{align-items:center}
  .erp-panel{border-radius:22px;border-bottom:1px solid var(--border2);max-height:85vh;transform:scale(.94);}
  .erp-overlay.open .erp-panel{transform:scale(1);}
}

/* ══════════════════════════════════════════════
   MEETING REVIEW — AI SUMMARY
══════════════════════════════════════════════ */
.mr-ai-summary{
  background:rgba(184,150,62,.08);border:1px solid rgba(184,150,62,.25);
  border-radius:14px;padding:14px 16px;margin-bottom:14px
}
.mr-ai-label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.4px;margin-bottom:6px}
.mr-summary-text{font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;direction:rtl}
.mr-sum-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mr-sum-btn{flex:1;min-width:110px;padding:8px 12px;border-radius:11px;font-size:13px;font-weight:600;border:1.5px solid var(--border2);background:var(--card);color:var(--text);cursor:pointer;font-family:inherit;transition:all .15s}
.mr-sum-btn:hover{border-color:var(--accent);color:var(--accent);}
.mr-sum-btn.wa{border-color:rgba(37,211,102,.4);color:#25D366;background:rgba(37,211,102,.08);}
.mr-sum-btn.wa:hover{background:rgba(37,211,102,.15);}
.mr-ai-loading{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:32px 16px;color:var(--muted);font-size:14px
}
.mr-ai-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(184,150,62,.2);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-hint{background:rgba(184,150,62,.15);color:var(--accent);border-radius:6px;padding:1px 6px}

/* ══════════════════════════════════════════════
   MEETING OVERLAY — HISTORY BUTTON
══════════════════════════════════════════════ */
.meet-hist-btn{
  background:rgba(255,255,255,.12);border:none;border-radius:8px;
  color:rgba(255,255,255,.8);font-size:16px;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s
}
.meet-hist-btn:hover{background:rgba(255,255,255,.22);}

/* ══════════════════════════════════════════════
   MEETING HISTORY CARDS
══════════════════════════════════════════════ */
.meet-hist-card{
  background:var(--card);border-radius:16px;padding:14px;
  border:1px solid var(--border2);cursor:pointer;
  transition:border-color .15s;margin-bottom:0
}
.meet-hist-card:hover{border-color:rgba(184,150,62,.4);}
.meet-hist-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.meet-hist-date{font-size:14px;font-weight:600;color:var(--text)}
.meet-hist-meta{display:flex;gap:8px;font-size:12px;color:var(--muted)}
.meet-hist-summary{
  font-size:13px;color:var(--muted);line-height:1.55;direction:rtl;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.meet-hist-tasks{margin-top:10px;padding-top:10px;border-top:1px solid var(--border2)}
.meet-hist-task{font-size:13px;color:var(--text);padding:3px 0;direction:rtl}

/* VAT toggle button */
.ctd-vat-btn{
  flex-shrink:0;padding:0 10px;height:38px;border-radius:10px;font-size:11px;font-weight:700;
  border:1.5px solid var(--border);background:none;color:var(--muted);
  cursor:pointer;font-family:inherit;white-space:nowrap;letter-spacing:.2px;
  transition:all .18s;
}
.ctd-vat-btn:hover{border-color:var(--accent);color:var(--accent);}
.ctd-vat-btn.active{
  background:rgba(52,199,89,.12);color:#34C759;border-color:rgba(52,199,89,.4);
}
.ctd-vat-preview{
  font-size:12px;font-weight:600;color:#34C759;
  background:rgba(52,199,89,.08);border-radius:8px;
  padding:5px 10px;margin-bottom:8px;
  border:1px solid rgba(52,199,89,.2);
}
/* Proposal line-items editor — roomy, labeled, with live line totals */
.ctd-items-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.ctd-item-row{
  display:flex;flex-direction:column;gap:10px;padding:12px;
  border:1.5px solid var(--border);border-radius:14px;background:var(--card)
}
body.dark .ctd-item-row{background:#1C1C1E}
.ctd-item-row-top{display:flex;gap:8px;align-items:flex-start}
.ctd-item-row-bottom{display:flex;gap:8px;align-items:flex-end}
.ctd-item-desc{
  flex:1;min-width:0;width:100%;resize:none;overflow:hidden;
  min-height:42px;line-height:1.4;font-family:inherit
}
/* labeled mini-fields */
.ctd-item-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.ctd-item-fld>label{font-size:10.5px;font-weight:600;color:var(--muted);padding-inline-start:2px;letter-spacing:.1px}
.ctd-item-fld-qty{flex:0 0 62px}
.ctd-item-fld-price{flex:1 1 auto}
.ctd-item-fld-line{flex:0 0 auto;margin-inline-start:auto;text-align:end}
.ctd-item-qty{text-align:center;padding-left:4px;padding-right:4px;width:100%}
.ctd-price-wrap{position:relative;display:flex;align-items:center}
.ctd-price-wrap .ctd-cur-sym{position:absolute;inset-inline-start:10px;font-size:13px;color:var(--muted);pointer-events:none}
.ctd-item-price{width:100%;padding-inline-start:24px}
.ctd-item-line{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;padding-bottom:8px}
.ctd-item-line .ctd-cur-sym{font-size:12px;color:var(--muted);margin-inline-end:1px}
.ctd-item-del{
  flex-shrink:0;width:34px;height:42px;border-radius:10px;border:1.5px solid var(--border);
  background:none;color:var(--muted);cursor:pointer;font-size:14px;transition:all .15s
}
.ctd-item-del:hover{border-color:var(--red);color:var(--red);background:rgba(255,59,48,.08)}
.ctd-item-add{
  width:100%;padding:11px;border-radius:12px;border:1.5px dashed var(--border2);
  background:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;margin-bottom:12px
}
.ctd-item-add:hover{border-color:var(--accent);color:var(--accent)}

/* Prominent total card */
.ctd-total-card{background:rgba(52,199,89,.07);border:1px solid rgba(52,199,89,.25);
  border-radius:14px;padding:12px 14px;margin-bottom:12px}
body.dark .ctd-total-card{background:rgba(52,199,89,.1)}
.ctd-total-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ctd-total-lbl{font-size:13px;font-weight:600;color:var(--muted)}
.ctd-total-amt{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.ctd-total-amt .ctd-cur-sym{font-size:16px;color:var(--muted);margin-inline-end:1px;font-weight:600}
.ctd-total-ctrls{display:flex;gap:8px;align-items:center;margin-top:10px}
.ctd-cur-field{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-inline-start:auto}
.ctd-cur-sel{flex:0 0 74px;height:36px}

/* Terms & dates — clean labeled rows */
.ctd-prop-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.ctd-prop-fld{display:flex;align-items:center;gap:10px}
.ctd-prop-fld-lbl{font-size:12.5px;color:var(--muted);flex:0 0 74px;font-weight:500}
.ctd-prop-fld .f-input{flex:1;min-width:0}
.ctd-prop-fld-full{align-items:flex-start}
.ctd-prop-fld-full .ctd-prop-fld-lbl{margin-top:9px}
.ctd-prop-fld textarea.f-input{resize:vertical;line-height:1.45}
.ctd-prop-save{width:100%;margin-bottom:12px}

/* PDF quote — live preview before sending */
.quote-pdf-preview-wrap{
  width:100%;min-height:160px;border-radius:14px;
  border:1px solid var(--border);background:#fff;
  display:flex;align-items:flex-start;justify-content:center;
  max-height:65vh;overflow-y:auto;overflow-x:hidden
}
.quote-pdf-preview-msg{font-size:13px;color:var(--muted);padding:40px 20px;text-align:center}
.quote-pdf-preview-wrap img{width:100%;height:auto;display:block}

/* ── PDF Quote document — mobile-first, card-based, luxurious ── */
.pq-doc{
  position:fixed;left:-9999px;top:0;width:600px;background:#ffffff;color:#1c1c1e;
  box-sizing:border-box;direction:rtl;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Segoe UI',Arial,sans-serif;
}
.pq-band{
  background:linear-gradient(135deg,#1c1c1e,#2c2c2e);
  padding:36px 32px 30px;color:#fff;
}
.pq-biz{display:flex;align-items:center;gap:16px}
.pq-logo{width:60px;height:60px;object-fit:contain;border-radius:12px;background:#fff;flex-shrink:0}
.pq-biz-name{font-size:23px;font-weight:700;color:#fff;letter-spacing:-.2px}
.pq-biz-sub{font-size:13px;color:rgba(255,255,255,.6);margin-top:3px;direction:ltr;text-align:right}
.pq-doc-title{font-size:15px;font-weight:700;color:#5AC8FA;letter-spacing:1px;margin-top:22px}
.pq-doc-date{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}
.pq-body{padding:28px 32px 8px}
.pq-client{
  font-size:16px;margin-bottom:22px;color:#1c1c1e;padding-bottom:18px;
  border-bottom:1px solid #e5e5ea
}
.pq-client-label{color:#8e8e93;font-size:13px;display:block;margin-bottom:3px}
.pq-client-name{font-weight:700}
.pq-client-phone{color:#8e8e93;direction:ltr;display:inline-block;font-size:14px}
.pq-items{margin-bottom:8px}
.pq-item{padding:16px 0;border-bottom:1px solid #f0f0f2}
.pq-item-desc{font-size:15.5px;font-weight:600;color:#1c1c1e;line-height:1.5;word-break:break-word}
.pq-item-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.pq-item-qty{font-size:13px;color:#8e8e93}
.pq-item-total{font-size:16px;font-weight:700;color:#1c1c1e;direction:ltr}
.pq-totals{margin:20px 0;padding:18px 20px;background:#f7f7f9;border-radius:14px}
.pq-totals-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:#5a5a5e}
.pq-total-final{
  font-size:21px;font-weight:800;color:#1c1c1e;
  border-top:1.5px solid #d8d8dc;padding-top:12px;margin-top:6px
}
.pq-meta-row{font-size:13.5px;color:#B8860B;font-weight:600;margin-bottom:10px}
.pq-event{background:#f3f0ff;border-radius:12px;padding:14px 18px;margin-bottom:14px}
.pq-event-label{font-size:11.5px;font-weight:700;color:#5E5CE6;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.pq-event div:last-child{font-size:14px;color:#1c1c1e;line-height:1.6;white-space:pre-wrap}
.pq-terms{background:#fff8e8;border-radius:12px;padding:14px 18px;margin-bottom:14px}
.pq-terms-label{font-size:11.5px;font-weight:700;color:#a6790a;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.pq-terms div:last-child{font-size:14px;color:#1c1c1e;line-height:1.5}
.pq-payment{background:#eef6ff;border-radius:12px;padding:14px 18px;margin-bottom:14px}
.pq-payment-label{font-size:11.5px;font-weight:700;color:#0A5FCC;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.pq-payment div:last-child{font-size:14px;color:#1c1c1e;line-height:1.5;white-space:pre-wrap}
.pq-note{font-size:13px;color:#6e6e73;line-height:1.6;margin-bottom:18px;white-space:pre-wrap}
.pq-signature{font-size:15px;font-weight:600;color:#1c1c1e;margin-bottom:22px}
.pq-footer{
  padding:20px 32px 30px;border-top:1px solid #e5e5ea;
  font-size:12px;color:#8e8e93;line-height:1.8;text-align:center
}
.pq-footer b{color:#5a5a5e}
/* Phone pick button in contact form */
.ct-pick-btn{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  background:none;border:1.5px solid var(--border);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;
}
.ct-pick-btn:hover{border-color:var(--accent);background:rgba(0,122,255,.06);}
/* Google contacts picker list */
.gc-list{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.gc-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .15s
}
.gc-row:hover{background:var(--hover,rgba(120,120,128,.08))}
.gc-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-phone{font-size:12.5px;color:var(--muted);flex-shrink:0}

/* ── Bookkeeping (הנהלת חשבונות) ── */
.bk-copy-row{display:flex;gap:8px;margin-bottom:14px}
.bk-copy-group{flex:1;display:flex;gap:6px;min-width:0}
.bk-copy-chip{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:11px;border:1.5px solid var(--border2);
  background:var(--card);color:var(--text);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;min-width:0;line-height:1.35
}
.bk-copy-chip span{white-space:normal;word-break:break-word;text-align:center}
.bk-copy-chip:hover{border-color:var(--accent);color:var(--accent)}
.bk-edit-btn{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;border:1.5px solid var(--border2);
  background:none;font-size:16px;cursor:pointer;transition:all .15s
}
.bk-edit-btn:hover{border-color:var(--accent);background:rgba(0,122,255,.06)}
.bk-camera-btn{
  width:100%;padding:14px;border-radius:14px;border:none;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;margin-bottom:14px;transition:opacity .15s
}
.bk-camera-btn:hover{opacity:.9}
.bk-toolbar{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;
  background:rgba(0,122,255,.08);border-radius:11px;border:1px solid rgba(0,122,255,.2)
}
.bk-toolbar span{flex:1;font-size:13px;font-weight:600;color:var(--accent)}
.bk-list{max-height:55vh;overflow-y:auto}
.bk-month-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)
}
.bk-month-head:first-child{margin-top:0}
.bk-month-total{font-weight:600;text-transform:none;letter-spacing:0}
.bk-row{
  display:flex;flex-direction:column;gap:8px;padding:10px 8px;border-radius:11px;
  transition:background .15s;margin-bottom:4px
}
.bk-row:hover{background:var(--hover,rgba(120,120,128,.08))}
.bk-row.sel{background:rgba(0,122,255,.08)}
.bk-row-top{display:flex;align-items:center;gap:10px}
.bk-row-bottom{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bk-check{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:13px;font-weight:700;color:#fff;transition:all .15s
}
.bk-row.sel .bk-check{background:var(--accent);border-color:var(--accent)}
.bk-thumb{
  flex-shrink:0;width:48px;height:48px;border-radius:9px;object-fit:cover;
  cursor:pointer;background:var(--border);border:1px solid var(--border2)
}
.bk-thumb-pdf{
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.25)
}
.bk-info{flex:1;min-width:0}
.bk-vendor{font-size:14px;font-weight:600;color:var(--text);white-space:normal;word-break:break-word}
.bk-sub{font-size:12px;color:var(--muted);margin-top:1px;white-space:normal;word-break:break-word}
.bk-paidby{font-size:11.5px;color:var(--accent);margin-top:1px}
.bk-amount-col{flex-shrink:0;font-size:14px;font-weight:700;color:var(--text)}
.bk-flag{
  flex-shrink:0;padding:5px 10px;border-radius:8px;border:1.5px solid var(--border2);
  background:none;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;
  font-family:inherit;transition:all .15s;white-space:nowrap
}
.bk-flag:hover{border-color:var(--accent)}
.bk-flag.on{background:rgba(52,199,89,.12);color:#34C759;border-color:rgba(52,199,89,.4)}
@keyframes flagPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.16)}
  60%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.bk-flag.flag-pulse{animation:flagPulse .38s cubic-bezier(.34,1.56,.64,1)}
.streak-badge{
  display:none;align-items:center;gap:6px;
  background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.25);
  border-radius:12px;padding:6px 12px;margin-bottom:16px;width:fit-content;
}
.streak-badge-fire{font-size:16px}
.streak-badge-num{font-size:15px;font-weight:700;color:#FF9500}
.streak-badge-lbl{font-size:12px;color:var(--muted)}
@keyframes streakBump{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.3) rotate(-6deg)}
  55%{transform:scale(.95) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}
.streak-badge.streak-bump{box-shadow:0 0 0 5px rgba(255,149,0,.16)}
.streak-badge.streak-bump .streak-badge-fire{animation:streakBump .5s cubic-bezier(.34,1.56,.64,1)}
.bk-actions{display:flex;gap:6px;flex-shrink:0;margin-right:auto}
.bk-act{
  width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border2);
  background:none;font-size:15px;cursor:pointer;transition:all .15s;display:flex;
  align-items:center;justify-content:center
}
.bk-act:hover{border-color:var(--accent);background:rgba(0,122,255,.06)}
.bk-add-btns{display:flex;gap:8px;margin-bottom:14px}
.bk-add-btns .bk-camera-btn{margin-bottom:0;width:auto;flex:1}
.bk-upload-btn{background:none;border:1.5px solid var(--accent);color:var(--accent)}
.bk-upload-btn:hover{background:rgba(0,122,255,.06);opacity:1}
.bk-pdf-preview{
  width:100%;padding:50px 0;border-radius:12px;margin-bottom:14px;text-align:center;
  font-size:18px;font-weight:600;color:var(--muted);background:var(--bg);border:1.5px dashed var(--border2)
}

/* ══════════════════════════════════════════════
   ERP SIDEBAR — compact name list
══════════════════════════════════════════════ */
.erp-sb{flex-shrink:0;border-top:1px solid rgba(184,150,62,.22);margin-top:auto;}
@media(max-width:600px){.erp-pill{display:none}}

.erp-sb-handle{
  padding:10px 14px 8px;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.erp-sb-handle:hover{background:rgba(255,255,255,.04);}
.erp-sb-handle:active{opacity:.75;}
.erp-sb-hrow{display:flex;align-items:center;gap:8px;padding:2px 0 6px;}
.erp-sb-label{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.2px;flex-shrink:0;}
.erp-sb-sub{font-size:11px;color:rgba(235,235,245,.6);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.erp-sb-cnt{
  min-width:20px;height:20px;border-radius:10px;
  background:rgba(184,150,62,.18);color:var(--accent);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;flex-shrink:0;border:1px solid rgba(184,150,62,.35);
}
.erp-sb-chev{color:rgba(235,235,245,.55);font-size:18px;font-weight:300;flex-shrink:0;}

/* name list */
.erp-sb-names{padding:0 8px 12px;max-height:200px;overflow-y:auto;scrollbar-width:none;}
.erp-sb-names::-webkit-scrollbar{display:none}
.erp-sb-name-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:10px;cursor:pointer;
  transition:background .12s;-webkit-tap-highlight-color:transparent;
}
.erp-sb-name-row:hover{background:rgba(255,255,255,.07);}
.erp-sb-name-row:active{background:rgba(255,255,255,.12);}
.erp-sb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.erp-sb-nname{font-size:13px;color:var(--stext);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.erp-sb-fu-dot{width:6px;height:6px;border-radius:50%;background:#FF453A;flex-shrink:0;}
.erp-sb-row-acts{display:flex;gap:4px;flex-shrink:0;}
.erp-sb-act-sm{
  font-size:15px;text-decoration:none;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.06);transition:background .15s;
}
.erp-sb-act-sm:hover{background:rgba(255,255,255,.12);}
.erp-sb-empty{font-size:12px;color:rgba(235,235,245,.45);padding:8px 10px;}

@media(min-width:601px){.erp-sb{margin-top:0;}}

/* ══════════════════════════════════════════════
   BOTTOM NAV — mobile tab bar
══════════════════════════════════════════════ */
.bot-nav{display:none}
@media(max-width:600px){
  /* Bottom nav appears only once signed in — never on the login screen */
  html.authed .bot-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:2100;
    background:rgba(14,14,16,.93);
    backdrop-filter:saturate(180%) blur(26px);
    -webkit-backdrop-filter:saturate(180%) blur(26px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:8px 8px max(16px,env(safe-area-inset-bottom));
    direction:rtl;gap:6px;
  }

  /* pill element no longer needed — each button is its own pill */
  .bot-nav-pill{display:none;}

  .bot-nav-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
    background:rgba(255,255,255,.06);
    border:1.5px solid rgba(255,255,255,.07);
    border-radius:16px;
    cursor:pointer;padding:7px 0 6px;
    font-family:inherit;-webkit-tap-highlight-color:transparent;
    transition:background .22s cubic-bezier(.32,1,.44,1),border-color .22s cubic-bezier(.32,1,.44,1);
  }
  .bot-nav-btn.active{
    background:rgba(0,122,255,.16);
    border-color:rgba(0,122,255,.32);
  }
  .bot-nav-ic{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .22s cubic-bezier(.32,1,.44,1);
  }
  .bot-nav-ic svg{
    width:26px;height:26px;
    stroke:rgba(235,235,245,.32);stroke-width:1.7;fill:none;
    transition:stroke .2s,stroke-width .2s;
  }
  .bot-nav-lbl{
    font-size:12px;font-weight:700;letter-spacing:.2px;line-height:1;
    color:rgba(235,235,245,.32);
    transition:color .2s;
  }
  .bot-nav-btn.active .bot-nav-ic{transform:scale(1.08);}
  .bot-nav-btn.active .bot-nav-ic svg{stroke:var(--accent);stroke-width:2.3;}
  .bot-nav-btn.active .bot-nav-lbl{color:var(--accent);font-size:12.5px;}
  .bot-nav-btn:active .bot-nav-ic{transform:scale(.88);}

  /* push main content above bottom nav */
  .main{padding-bottom:calc(84px + env(safe-area-inset-bottom));}

  /* ERP panel — full-screen, slides in horizontally from left */
  .erp-overlay{z-index:250;}
  .erp-panel{
    width:100%;max-width:100%;
    height:100dvh;max-height:100dvh;
    border-radius:0;border:none;
    transform:translateX(-100%);
  }
  .erp-overlay.open .erp-panel{transform:translateX(0);}
  .erp-list{flex:1;max-height:none;overflow-y:auto;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));}

  /* hide sidebar ERP section on mobile */
  .erp-sb{display:none;}
}

/* ── WELCOME-BACK / EXIT MODAL ───────────────────────────── */
.wb-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  display:none;align-items:flex-end;justify-content:center;
  z-index:9800;
  padding:0 0 env(safe-area-inset-bottom);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.wb-overlay.open{display:flex;}
.wb-box{
  background:var(--card);
  border-radius:24px 24px 0 0;
  padding:28px 24px 32px;
  width:100%;max-width:480px;
  text-align:center;
  animation:wbSlideUp .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes wbSlideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.wb-emoji{font-size:52px;display:block;margin-bottom:12px;}
.wb-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px;}
.wb-msg{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:20px;}
.wb-week-done{
  background:rgba(52,199,89,.1);border-radius:16px;
  padding:14px 16px;margin-bottom:14px;
}
.wb-week-num{font-size:38px;font-weight:700;color:#34C759;}
.wb-week-lbl{font-size:12px;color:var(--muted);margin-top:2px;}
.wb-top3{
  background:var(--bg);border-radius:16px;
  padding:14px 14px 10px;margin-bottom:18px;
  text-align:right;
}
.wb-top3-lbl{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:10px;text-align:center;text-transform:uppercase;letter-spacing:.4px;}
.wb-top3-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;
  margin-bottom:6px;background:var(--card);
}
.wb-top3-item:last-child{margin-bottom:0;}
.wb-top3-dot{font-size:11px;flex-shrink:0;}
.wb-top3-name{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-push-btn{
  display:block;width:100%;margin-bottom:10px;
  padding:15px;
  background:linear-gradient(135deg,#FF9500 0%,#FF6000 100%);
  color:#fff;border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:-.3px;
  box-shadow:0 4px 16px rgba(255,149,0,.35);
}
.wb-go-btn{
  display:block;width:100%;
  padding:14px;
  background:transparent;color:var(--muted);
  border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:color .2s;
}

/* ── Productivity badges on task cards ─────────────────── */
.badge-2min{
  font-size:10px;font-weight:700;
  background:rgba(255,149,0,.13);color:#FF9500;
  border:1px solid rgba(255,149,0,.35);
  border-radius:5px;padding:1px 5px;white-space:nowrap;cursor:default;
}
.badge-impact{
  font-size:11px;cursor:default;
  background:rgba(255,214,10,.13);
  border:1px solid rgba(255,214,10,.4);
  border-radius:5px;padding:1px 5px;
}
.badge-top3{font-size:12px;cursor:default;}
.repeat-badge{
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;white-space:nowrap;
  background:rgba(52,199,89,.1);color:#30D158;border:1px solid rgba(52,199,89,.3);
  cursor:pointer;transition:background .15s;
}
.repeat-badge:hover{background:rgba(52,199,89,.2);}
body.dark .repeat-badge{background:rgba(48,209,88,.12);border-color:rgba(48,209,88,.35);color:#30D158;}

/* 80/20 gold top-stripe on high-priority today tasks */
.hi-impact{overflow:hidden;}
.hi-impact::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#FFD60070,#FFD600,#FFD60070,transparent);
}

/* ── Positive tips modal ────────────────────────────────── */
.tip-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.52);
  display:none;align-items:flex-end;justify-content:center;
  z-index:9900;padding:0 0 env(safe-area-inset-bottom);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tip-overlay.open{display:flex;}
.tip-box{
  background:var(--card);border-radius:28px 28px 0 0;
  padding:28px 24px 32px;width:100%;max-width:480px;
  text-align:center;animation:wbSlideUp .3s cubic-bezier(.22,.61,.36,1);
}
.tip-emoji{font-size:52px;display:block;margin-bottom:14px;}
.tip-title{font-size:19px;font-weight:700;color:var(--text);margin-bottom:10px;}
.tip-body{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:20px;}
.tip-dots{display:flex;justify-content:center;gap:6px;margin-bottom:22px;}
.tip-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all .2s;}
.tip-dot.active{background:var(--accent);transform:scale(1.3);}
.tip-next{
  display:block;width:100%;margin-bottom:10px;padding:15px;
  background:var(--accent);color:#fff;border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}
.tip-close{
  display:block;width:100%;padding:12px;
  background:transparent;color:var(--muted);border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}

/* ── "No" principle friction modal ─────────────────────── */
.no-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.52);
  display:none;align-items:flex-end;justify-content:center;
  z-index:9900;padding:0 0 env(safe-area-inset-bottom);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.no-overlay.open{display:flex;}
.no-box{
  background:var(--card);border-radius:24px 24px 0 0;
  padding:28px 24px 32px;width:100%;max-width:480px;
  text-align:center;animation:wbSlideUp .28s cubic-bezier(.22,.61,.36,1);
}
.no-emoji{font-size:44px;display:block;margin-bottom:10px;}
.no-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
.no-msg{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:22px;}
.no-msg strong{color:var(--text);}
.no-confirm{
  display:block;width:100%;margin-bottom:10px;padding:15px;
  background:var(--accent);color:#fff;border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}
.no-cancel{
  display:block;width:100%;padding:14px;
  background:transparent;color:var(--muted);border:none;border-radius:16px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}

/* ── Welcome modal top-3 interactive items ──────────────── */
.wb-top3-item{cursor:pointer;transition:background .15s,transform .1s;}
.wb-top3-item:active{transform:scale(.97);}
.wb-top3-item.committed{background:rgba(52,199,89,.12);}
.wb-top3-check{
  font-size:14px;font-weight:700;color:#34C759;
  margin-right:auto;opacity:0;transition:opacity .18s,transform .18s;
  transform:scale(.6);flex-shrink:0;
}
.wb-top3-item.committed .wb-top3-check{opacity:1;transform:scale(1);}

/* ── Gem system ──────────────────────────────────────────── */
.topbar-gems{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.25);
  border-radius:20px;padding:2px 8px 2px 6px;
  font-size:12px;font-weight:700;color:#0A84FF;
  margin-right:6px;vertical-align:middle;white-space:nowrap;
  transition:background .2s;cursor:default;
}
body.dark .topbar-gems{background:rgba(10,132,255,.15);border-color:rgba(10,132,255,.35);}
body.dark .gem-task-badge{background:rgba(10,132,255,.14);border-color:rgba(10,132,255,.32);}
@keyframes gemBump{
  0%{transform:scale(1);}
  35%{transform:scale(1.45);}
  65%{transform:scale(0.88);}
  85%{transform:scale(1.1);}
  100%{transform:scale(1);}
}
.topbar-gems.gem-bump{animation:gemBump .55s cubic-bezier(.36,.07,.19,.97);}
.gem-task-badge{
  font-size:10px;font-weight:700;
  background:rgba(10,132,255,.08);color:#0A84FF;
  border:1px solid rgba(10,132,255,.22);
  border-radius:5px;padding:1px 5px;white-space:nowrap;cursor:default;
}

/* ── Unified topbar button ──────────────────────────────── */
.tb-btn{
  width:40px;height:40px;border-radius:10px;
  border:1.5px solid var(--border);background:none;
  font-size:20px;cursor:pointer;color:var(--muted);
  font-family:inherit;transition:all .2s;
  padding:0;line-height:1;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.tb-btn:hover{background:var(--bg);}
.tb-btn:active{transform:scale(.93);}
.tb-btn-wa{border-color:rgba(37,211,102,.3);}
.tb-btn-wa:hover{background:rgba(37,211,102,.07);}
#blockBtn:not(.block-on){flex-direction:column;gap:2px;}
.tb-btn-icon{font-size:18px;line-height:1;}
.tb-btn-lbl{font-size:8px;line-height:1;font-weight:700;letter-spacing:.02em;color:var(--muted);}

/* ── Consolidated "Modes" control ── */
.modes-wrap{position:relative;display:inline-flex}
.tb-modes-btn{flex-direction:column;gap:2px}
.tb-modes-btn .tb-btn-icon{font-size:17px;color:var(--accent)}
.tb-modes-btn.modes-active{
  border-color:var(--accent);background:rgba(10,132,255,.10);
}
.tb-modes-btn.modes-active .tb-btn-lbl{color:var(--accent)}
.modes-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:900;
  min-width:230px;padding:6px;display:none;
  border-radius:var(--r-lg);
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
  transform-origin:top left;
}
.modes-menu.open{display:block;animation:pIn .28s var(--ease-spring)}
.modes-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:right;
  padding:10px 12px;border:none;background:none;border-radius:var(--r);
  cursor:pointer;font-family:inherit;color:var(--text);transition:background var(--t-fast);
}
.modes-item:hover{background:rgba(0,0,0,.05)}
body.dark .modes-item:hover{background:rgba(255,255,255,.07)}
.modes-item:active{transform:scale(.98)}
.modes-ic{font-size:20px;flex-shrink:0;width:28px;text-align:center}
.modes-txt{display:flex;flex-direction:column;gap:1px;font-size:14.5px;font-weight:600;line-height:1.15}
.modes-txt small{font-size:11.5px;font-weight:400;color:var(--muted)}
#blockBtn.block-on{
  background:rgba(88,86,214,.13);border-color:rgba(88,86,214,.45);
  color:#5856D6;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  width:auto;padding:0 10px;
}

/* ══════════════════════════════════════════════
   PREMIUM — glass, dynamic island, ring, splash
══════════════════════════════════════════════ */

/* ── Deep glassmorphism ── */
.mbox{
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(32px);
  -webkit-backdrop-filter:saturate(180%) blur(32px);
  border:1px solid rgba(255,255,255,.55);
}
body.dark .mbox{
  background:rgba(20,20,23,.68);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:saturate(180%) blur(32px);
  -webkit-backdrop-filter:saturate(180%) blur(32px);
}

/* ── Metallic / gold accent — luxury premium surfaces ── */
.lux-gold-brd{position:relative;isolation:isolate}
.lux-gold-brd::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:var(--gold-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;z-index:2;opacity:.9;
}
/* Business-card button → gold luxury CTA */
.bizcard-open-btn{
  background:var(--gold-grad);color:#2a2100;
  box-shadow:0 4px 16px rgba(184,150,62,.32);
}
body.dark .bizcard-open-btn{color:#1a1400}
.bizcard-open-btn:active{transform:scale(.98)}
/* Achievements bar → subtle gold frame + sheen */
.gl-achv-bar{border-color:transparent}
.gl-achv-bar::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  background:var(--gold-grad);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;
}
/* Upgrade sidebar button → warm gold text accent */
.sb-btn .sb-btn-icon{transition:transform var(--t-fast) var(--ease-out)}

/* ── Frosted topbar (floats over scrolling task list) ── */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{
    background:var(--glass-bg);
    backdrop-filter:saturate(160%) blur(var(--glass-blur));
    -webkit-backdrop-filter:saturate(160%) blur(var(--glass-blur));
    border-bottom:1px solid var(--glass-brd);
  }
}

/* ── Accessibility: honor reduced-transparency (opaque fallbacks) ── */
@media (prefers-reduced-transparency:reduce){
  .mbox,.msel,.dates-sheet,.topbar{
    background:var(--card)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .moverlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
.msel{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(26px);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(255,255,255,.5);
}
body.dark .msel{
  background:rgba(26,26,30,.78);
  border:1px solid rgba(255,255,255,.1);
}
body.dark .msel .mi:hover{background:rgba(255,255,255,.08)}
.dates-sheet{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(30px);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
}
body.dark .dates-sheet{background:rgba(22,22,25,.8)}
@media(max-width:600px){
  .sidebar{
    background:rgba(20,20,23,.82);
    backdrop-filter:saturate(180%) blur(30px);
    -webkit-backdrop-filter:saturate(180%) blur(30px);
  }
}

/* ── Spring press feedback ── */
.tcard-inner{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tcard:active .tcard-inner{transform:scale(.982)}
.abtn,.tb-btn,.bot-nav-btn,.flash-btn{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.abtn:active,.tb-btn:active{transform:scale(.93)}

/* ── Dynamic Island ── */
#dynIsland{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);left:50%;
  transform:translateX(-50%) translateY(-160%);
  background:#000;color:#fff;
  border-radius:22px;z-index:2150;
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;cursor:pointer;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 .5px rgba(255,255,255,.12);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),border-radius .3s,padding .3s;
  -webkit-tap-highlight-color:transparent;
  direction:rtl;max-width:calc(100vw - 24px);
}
#dynIsland.show{transform:translateX(-50%) translateY(0)}
#dynIsland .di-dot{
  width:7px;height:7px;border-radius:50%;background:#30D158;flex-shrink:0;
  animation:di-pulse 1.6s ease-in-out infinite;
}
@keyframes di-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
#dynIsland .di-name{
  display:none;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:400;color:rgba(255,255,255,.75);
}
#dynIsland.exp{border-radius:26px;padding:13px 20px}
#dynIsland.exp .di-name{display:block}

/* ── Tesla progress ring (topbar) ── */
.day-ring{width:20px;height:20px;flex-shrink:0;transform:rotate(-90deg)}
.day-ring .ring-bg{fill:none;stroke:rgba(120,120,128,.2);stroke-width:2.5}
.day-ring .ring-fg{
  fill:none;stroke:#30D158;stroke-width:2.5;stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1),stroke .3s;
}

/* ── Living splash ── */
#splash{
  position:fixed;inset:0;z-index:10000;
  background:#F2F2F7;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease,visibility .45s;
}
html.dark #splash,body.dark #splash{background:#000}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{
  width:96px;height:96px;border-radius:22px;
  animation:splash-breathe 1.8s ease-in-out infinite;
  filter:drop-shadow(0 12px 32px rgba(0,122,255,.25));
}
@keyframes splash-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.splash-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,122,255,.14) 0%,transparent 68%);
  animation:splash-drift 5s ease-in-out infinite alternate;
}
@keyframes splash-drift{from{transform:translate(-26px,-16px) scale(1)}to{transform:translate(26px,16px) scale(1.18)}}

/* ── OFFLINE — floating glass capsule, island-style ── */
#offlineBanner{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;
  transform:translateX(-50%) translateY(-260%);
  z-index:9500;max-width:calc(100vw - 32px);
  background:rgba(22,22,25,.82);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  color:rgba(255,255,255,.85);font-size:12px;font-weight:500;letter-spacing:.1px;
  text-align:center;padding:9px 18px;border-radius:20px;
  border:.5px solid rgba(255,255,255,.14);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.34,1.3,.64,1);
  direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#offlineBanner.show{transform:translateX(-50%) translateY(0)}

/* ── FULL-HEIGHT MODAL (settings) — spreads down to the bottom nav ── */
@media(max-width:600px){
  .mbox.mbox-full{height:100%;max-height:none!important}
  .moverlay:has(.mbox-full){align-items:stretch;padding-top:max(env(safe-area-inset-top,0px),14px)}
}

/* ── SCROLL HINT — fading gradient + chevron at the bottom of scrollable modal bodies ── */
.mbody{position:relative}
.mbody-scroll-hint{
  position:sticky;bottom:-18px;left:0;right:0;height:44px;margin-top:-44px;
  background:linear-gradient(to bottom,transparent,var(--card) 82%);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;opacity:1;transition:opacity .25s;
}
.mbody-scroll-hint.gone{opacity:0}
.mbody-scroll-hint:after{
  content:'⌄';font-size:17px;line-height:1;color:var(--muted);
  animation:hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── LICENSE / TRIAL — quiet glass, Mac-style ── */
.lic-banner{
  margin:0 12px 8px;padding:10px 16px;border-radius:14px;cursor:pointer;
  background:rgba(120,120,128,.08);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:.5px solid rgba(120,120,128,.22);
  color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.1px;
  text-align:center;direction:rtl;transition:background .2s;
}
.lic-banner:active{background:rgba(120,120,128,.14)}
body.dark .lic-banner{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(235,235,245,.55)}
/* Free tier — warm gold, a friendly nudge (not an alarm) */
.lic-banner.lic-free{
  background:linear-gradient(135deg,rgba(227,169,74,.14),rgba(227,169,74,.06));
  border-color:rgba(227,169,74,.4);color:#8a6516;font-weight:600;
}
.lic-banner.lic-free b{color:#b9812a;font-weight:800}
body.dark .lic-banner.lic-free{
  background:linear-gradient(135deg,rgba(227,169,74,.2),rgba(227,169,74,.07));
  border-color:rgba(227,169,74,.45);color:#e9c88a;
}
body.dark .lic-banner.lic-free b{color:#f0d59a}

/* Lock — monolith: near-black glass, thin type, single accent */
.lic-lock-overlay{
  position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.62);
  backdrop-filter:saturate(140%) blur(22px);-webkit-backdrop-filter:saturate(140%) blur(22px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lic-lock-overlay.open{display:flex;animation:pIn .4s cubic-bezier(.34,1.3,.64,1)}
.lic-lock-box{
  background:rgba(24,24,27,.86);
  backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  border:.5px solid rgba(255,255,255,.12);
  border-radius:26px;padding:40px 30px 28px;max-width:360px;width:100%;
  text-align:center;box-shadow:0 32px 90px rgba(0,0,0,.5);
}
.lic-lock-box .llk-emoji{font-size:38px;margin-bottom:18px;opacity:.9}
.lic-lock-box h2{
  font-size:21px;font-weight:600;letter-spacing:-.4px;
  margin-bottom:10px;color:#fff;
}
.lic-lock-box p{
  font-size:13.5px;color:rgba(235,235,245,.55);
  line-height:1.7;margin-bottom:6px;font-weight:400;
}
.llk-price{
  font-size:34px;font-weight:200;color:#fff;letter-spacing:-1.5px;
  margin:14px 0 2px;font-variant-numeric:tabular-nums;
}
.llk-price small{font-size:13px;font-weight:400;color:rgba(235,235,245,.45);letter-spacing:0}
.lic-lock-box .llk-cta{
  display:block;width:100%;padding:15px;margin-top:18px;
  border:none;border-radius:15px;
  background:#fff;color:#000;font-size:15px;font-weight:600;letter-spacing:-.2px;
  font-family:inherit;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;
}
.lic-lock-box .llk-cta:active{transform:scale(.96)}
.llk-note{font-size:11px;color:rgba(235,235,245,.35);margin-top:12px}

/* ── ADMIN PANEL ── */
.adm-stat-row{display:flex;gap:8px;margin-bottom:14px}
.adm-stat{
  flex:1;background:var(--bg);border-radius:12px;padding:12px 8px;text-align:center;
}
.adm-stat b{display:block;font-size:20px;color:var(--text)}
.adm-stat span{font-size:10.5px;color:var(--muted)}
.adm-user{
  display:flex;align-items:center;gap:8px;padding:9px 4px;
  border-bottom:1px solid var(--border);font-size:13px;
}
.adm-user .au-mail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text);direction:ltr;text-align:right}
.adm-user .au-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
.adm-user .au-tag.on{background:rgba(48,209,88,.13);color:#30D158}
.adm-user .au-tag.trial{background:rgba(255,149,0,.13);color:#FF9500}
.adm-user .au-tag.off{background:rgba(255,69,58,.13);color:#FF453A}
.adm-user button{
  border:1px solid var(--border2);background:none;border-radius:8px;
  padding:4px 10px;font-size:11.5px;font-family:inherit;cursor:pointer;color:var(--accent);
}

/* ── ADMIN — expandable user detail ── */
.adm-user{cursor:pointer;-webkit-tap-highlight-color:transparent}
.adm-det{
  display:none;background:var(--bg);border-radius:12px;
  padding:10px 14px;margin:2px 0 8px;
}
.adm-det.open{display:block;animation:pIn .25s cubic-bezier(.34,1.3,.64,1)}
.adm-det-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:12px;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.adm-det-row:last-of-type{border-bottom:none}
.adm-det-row b{color:var(--text);font-weight:600;font-size:12.5px}
.adm-det-btn{
  display:block;width:100%;margin-top:8px;padding:9px;
  border:1px solid var(--border2);border-radius:10px;background:none;
  color:var(--accent);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
}

/* ── שדרג אותנו ── */
.about-txt p{font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:12px}
.about-txt b{color:var(--text)}
.wa-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;margin-top:8px;
  border:none;border-radius:13px;cursor:pointer;font-family:inherit;
  background:#25D366;color:#fff;font-size:14px;font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .15s;
}
.wa-cta:active{transform:scale(.96)}
.wa-cta:hover{filter:brightness(1.06)}
.wa-cta.wa-help{
  background:rgba(37,211,102,.1);color:#1faa52;
  border:1.5px solid rgba(37,211,102,.4);
}
body.dark .wa-cta.wa-help{color:#25D366}

/* about modal — CTAs pinned in the footer, always visible on small screens */
.about-foot{display:flex;flex-direction:column;gap:8px}
.about-foot .wa-cta{margin-top:0}
.about-foot .mclose{margin-top:2px}
@media(max-width:600px){
  #aboutModal .mhead{padding:12px 16px 8px}
  #aboutModal .mhead img{width:44px!important;height:44px!important;margin-bottom:5px!important}
  #aboutModal .mhead h2{font-size:16px}
  .about-txt p{font-size:12.5px;line-height:1.6;margin-bottom:10px}
  .about-foot{padding:10px 14px}
  .about-foot .wa-cta{padding:12px;font-size:13.5px}
}

/* ── ONBOARDING — first-run tour, monolith glass ── */
.ob-overlay{
  position:fixed;inset:0;z-index:9700;
  background:rgba(0,0,0,.6);
  backdrop-filter:saturate(140%) blur(20px);-webkit-backdrop-filter:saturate(140%) blur(20px);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.ob-overlay.open{display:flex;animation:pIn .4s cubic-bezier(.34,1.3,.64,1)}
.ob-card{
  background:rgba(26,26,30,.88);
  backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  border:.5px solid rgba(255,255,255,.12);
  border-radius:26px;padding:34px 26px 22px;max-width:360px;width:100%;
  text-align:center;box-shadow:0 32px 90px rgba(0,0,0,.5);
  direction:rtl;
}
.ob-emoji{font-size:46px;margin-bottom:14px;animation:splash-breathe 2.4s ease-in-out infinite}
.ob-title{font-size:20px;font-weight:700;letter-spacing:-.4px;color:#fff;margin-bottom:10px}
.ob-text{font-size:13.5px;color:rgba(235,235,245,.62);line-height:1.75;min-height:96px}
.ob-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 16px}
.ob-dot{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);
  cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.ob-dot.active{background:#0A84FF;transform:scale(1.35)}
.ob-next{
  display:block;width:100%;padding:14px;border:none;border-radius:14px;
  background:#fff;color:#000;font-size:15px;font-weight:600;letter-spacing:-.2px;
  font-family:inherit;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ob-next:active{transform:scale(.96)}
.ob-skip{
  display:block;width:100%;margin-top:10px;padding:8px;
  background:none;border:none;color:rgba(235,235,245,.4);
  font-size:12px;font-family:inherit;cursor:pointer;
}
.ob-reopen{
  display:block;width:100%;margin-top:4px;padding:10px;
  background:none;border:1.5px dashed var(--border2);border-radius:11px;
  color:var(--accent);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
}

/* ── ADMIN — payments list + mobile touch targets ── */
.adm-pay-hdr{font-size:11px;font-weight:700;color:var(--muted);margin:10px 0 4px;letter-spacing:.3px}
.adm-pay{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;margin-bottom:5px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  font-size:12px;color:var(--muted);
}
.adm-pay b{color:var(--text);font-size:13px}
.adm-pay a{
  color:var(--accent);text-decoration:none;font-weight:600;
  padding:6px 10px;border:1px solid rgba(10,132,255,.3);border-radius:8px;
  background:rgba(10,132,255,.07);
}
.adm-pay-oid{direction:ltr;font-size:10.5px;opacity:.6}
@media(max-width:600px){
  .adm-user{padding:13px 6px;min-height:44px}
  .adm-det-btn{padding:13px;font-size:14px}
  .adm-pay a{padding:9px 13px}
  .adm-stat b{font-size:17px}
}

/* ── SYNC DOT — quiet status indicator by the day ring ── */
.sync-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:pointer;
  vertical-align:middle;margin-left:5px;transition:background .3s,box-shadow .3s;
}
.sync-dot.ok{background:#30D158;box-shadow:0 0 0 0 rgba(48,209,88,.4)}
.sync-dot.syncing{background:#0A84FF;animation:sync-pulse 1.1s ease-in-out infinite}
.sync-dot.off{background:#FF9500}
@keyframes sync-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── BUSINESS SWITCHER — chips for choosing which business is active ── */
.biz-tabs,.biz-switch{display:flex;gap:6px;margin:8px 0 4px;flex-wrap:wrap}
.biz-switch{padding:10px 0 2px}
.biz-chip{
  flex:0 1 auto;padding:7px 14px;border-radius:11px;cursor:pointer;
  border:1.5px solid var(--border2);background:none;color:var(--muted);
  font-size:12.5px;font-weight:600;font-family:inherit;
  transition:all .2s cubic-bezier(.34,1.3,.64,1);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.biz-chip:active{transform:scale(.95)}
.biz-chip.active{
  background:rgba(10,132,255,.12);border-color:rgba(10,132,255,.4);color:var(--accent);
}
body.dark .biz-chip.active{background:rgba(10,132,255,.18);color:#409CFF}

/* ── ADMIN — error report rows ── */
.adm-err{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;margin-bottom:6px;
}
.adm-err-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.adm-err-top b{font-size:12.5px;color:var(--text)}
.adm-err-top span{font-size:10.5px;color:var(--muted)}
.adm-err-msg{font-size:12px;color:#FF453A;word-break:break-word;line-height:1.5;direction:ltr;text-align:left}
.adm-err-src{font-size:10px;color:var(--muted);margin-top:3px;direction:ltr;text-align:left;opacity:.7}
@media(max-width:600px){
  .biz-chip{padding:9px 15px;font-size:13px}
}

/* ── SETTINGS — desktop base for the 2-col row ── */
.f-row-2{display:flex;gap:8px}

/* ── SETTINGS — cleaner, roomier layout on mobile (Apple/Tesla grouped cards) ── */
@media(max-width:600px){
  /* The sheet itself sits on a soft gray page so white cards read clearly */
  #settingsModal .mbox{background:var(--bg)}
  body.dark #settingsModal .mbox{background:#000}
  #settingsModal .mhead,#settingsModal .mfoot{background:transparent}
  /* No nested cards — flat, breathing form (avoids modal→card→input boxing).
     Each section is just a labelled group with generous spacing. */
  #settingsModal .set-section{
    margin:0 0 24px;padding:0;background:transparent;border:none;box-shadow:none;
  }
  body.dark #settingsModal .set-section{background:transparent}
  #settingsModal .set-section:first-child{margin-top:2px}
  #settingsModal .set-section-label{font-size:12px;margin:0 2px 12px;font-weight:600;
    color:var(--muted);letter-spacing:.3px}
  /* Comfortable, elevated single-level inputs */
  #settingsModal .f-input{padding:14px;font-size:16px;border-radius:13px;background:var(--card);border:1px solid var(--border2)}
  #settingsModal .f-input:focus{background:var(--card);border-color:var(--accent)}
  body.dark #settingsModal .f-input{background:var(--elev2);border-color:rgba(255,255,255,.1)}
  #settingsModal .set-info{background:var(--card);border:1px solid var(--border2)}
  body.dark #settingsModal .set-info{background:var(--elev2);border-color:rgba(255,255,255,.1)}
  #settingsModal .f-label{font-size:13px;margin:0 2px 7px}
  /* Stack the phone / business-id pair instead of squeezing side by side */
  #settingsModal .f-row-2{flex-direction:column;gap:0}
  #settingsModal .f-row-2>div+div{margin-top:10px}
  /* Bigger, friendlier logo picker */
  .biz-logo-row{gap:12px}
  .biz-logo-preview{width:64px;height:64px;border-radius:16px}
  #settingsModal .ctd-upload-btn{padding:12px 16px;font-size:14px;border-radius:12px;display:inline-block}
  /* Business tabs full-width and tappable */
  #setBizTabs{gap:8px;margin-bottom:14px}
  #setBizTabs .biz-chip{flex:1;text-align:center;padding:11px 8px}
  /* Footer buttons — three across (RTL: סגור · שמור · התנתק), safe from the bottom nav */
  #settingsModal .mfoot{display:flex;flex-direction:row;gap:8px;align-items:stretch}
  #settingsModal .mfoot > button{flex:1;margin:0;padding:13px 6px;font-size:14px;border-radius:13px;white-space:nowrap}
  #settingsModal .btn-primary{font-weight:700}
  /* Full-screen settings on mobile — edge to edge, less scrolling */
  #settingsModal .mbox.mbox-full{width:100vw!important;max-width:100vw!important;border-radius:0}
  #settingsModal.moverlay,.moverlay#settingsModal{padding-left:0;padding-right:0}
}

/* ── BOOKKEEPING — per-receipt business chip + capture-target hint ── */
.bk-biz-target{
  font-size:12px;font-weight:600;color:var(--muted);
  margin:10px 0 2px;padding:0 2px;
}
.bk-act.bk-biz-chip{
  width:auto;padding:0 10px;font-size:11.5px;font-weight:700;white-space:nowrap;
  color:var(--accent);border:1px solid rgba(10,132,255,.3);
  background:rgba(10,132,255,.07);border-radius:9px;
}
body.dark .bk-act.bk-biz-chip{background:rgba(10,132,255,.14);color:#409CFF}
.bk-act.bk-biz-chip:active{transform:scale(.94)}

/* ── BUSINESS DOCUMENTS — per-business certificate uploads ── */
.biz-docs-list{margin:2px 0 10px}
.biz-docs-empty{font-size:12px;color:var(--muted);padding:6px 2px 10px}
.biz-doc-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;margin-bottom:6px;
  background:var(--bg);border:1px solid var(--border);border-radius:11px;
}
body.dark .biz-doc-row{background:rgba(255,255,255,.04)}
.biz-doc-ic{font-size:17px;flex-shrink:0}
.biz-doc-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:500;color:var(--accent);text-decoration:none;
}
.biz-doc-del{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border2);background:none;color:var(--muted);
  font-size:13px;font-family:inherit;line-height:1;
}
.biz-doc-del:active{transform:scale(.9)}
@media(max-width:600px){
  .biz-doc-row{padding:11px;margin-bottom:7px}
  .biz-doc-del{width:32px;height:32px}
}

/* ── QUOTE — attach business documents toggle ── */
.quote-attach-row{
  display:flex;align-items:center;gap:9px;flex:1 1 100%;
  padding:11px 13px;margin-bottom:2px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.dark .quote-attach-row{background:rgba(255,255,255,.04)}
.quote-attach-row input[type=checkbox]{
  width:20px;height:20px;flex-shrink:0;accent-color:var(--accent);cursor:pointer;
}

/* ── PUBLIC QUOTE — client-facing approval page (no login) ── */
html.pubq-mode #app,html.pubq-mode #loginScreen,html.pubq-mode #splash{display:none!important}
#publicQuote{
  display:none;position:fixed;inset:0;z-index:10000;overflow-y:auto;
  background:#F2F2F7;-webkit-overflow-scrolling:touch;
}
html.dark #publicQuote{background:#0A0A0E}
#publicQuote.open{display:block}
.pubq-inner{max-width:520px;margin:0 auto;padding:16px 14px 40px}
.pubq-doc{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.12);margin-bottom:16px;
}
.pubq-actions{
  background:var(--card,#fff);border-radius:18px;padding:20px 18px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
html.dark .pubq-actions{background:#161619}
.pubq-sign-label{font-size:13px;font-weight:600;color:var(--muted,#8E8E93);margin-bottom:8px;text-align:center}
.pubq-signpad{
  width:100%;height:140px;border:2px dashed rgba(120,120,128,.35);
  border-radius:14px;background:rgba(120,120,128,.05);touch-action:none;display:block;
}
html.dark .pubq-signpad{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.15)}
.pubq-clear{
  display:block;margin:8px auto 14px;background:none;border:none;
  color:var(--accent,#0A84FF);font-size:12.5px;font-family:inherit;cursor:pointer;font-weight:600;
}
.pubq-name{
  width:100%;box-sizing:border-box;padding:14px;font-size:16px;
  border:1.5px solid rgba(120,120,128,.25);border-radius:12px;
  background:rgba(120,120,128,.06);color:var(--text,#111);font-family:inherit;margin-bottom:12px;text-align:center;
}
html.dark .pubq-name{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.12)}
.pubq-accept{
  width:100%;padding:16px;border:none;border-radius:14px;cursor:pointer;
  background:#30D158;color:#fff;font-size:16px;font-weight:800;font-family:inherit;letter-spacing:-.2px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;
}
.pubq-accept:active{transform:scale(.97)}
.pubq-accept:disabled{opacity:.6}
.pubq-powered{text-align:center;font-size:11px;color:var(--muted,#8E8E93);margin-top:14px}
.pubq-accepted{text-align:center;padding:34px 20px;background:var(--card,#fff);border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
html.dark .pubq-accepted{background:#161619}
.pubq-accepted .pubq-ok{
  width:64px;height:64px;border-radius:50%;background:#30D158;color:#fff;
  font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  animation:pIn .5s cubic-bezier(.34,1.56,.64,1);
}
.pubq-accepted h2{font-size:22px;font-weight:800;color:var(--text,#111);margin-bottom:8px}
html.dark .pubq-accepted h2{color:#fff}
.pubq-accepted p{font-size:14px;color:var(--muted,#8E8E93)}

/* Public quote reuses the .pq-doc template styles but must render on-screen & responsive */
#publicQuote .pubq-doc.pq-doc{position:static;left:auto;top:auto;width:100%;overflow:hidden}

/* Public quote — English subtext under the Hebrew signature label */
.pubq-en{font-size:11.5px;font-weight:500;color:var(--muted,#8E8E93);letter-spacing:.2px}

/* Public quote — save / download PDF button (secondary style) */
.pubq-save{
  width:100%;padding:13px;margin-bottom:16px;
  border:1.5px solid var(--accent,#0A84FF);border-radius:13px;cursor:pointer;
  background:rgba(10,132,255,.08);color:var(--accent,#0A84FF);
  font-size:14.5px;font-weight:700;font-family:inherit;letter-spacing:-.1px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pubq-save:active{transform:scale(.97)}
html.dark .pubq-save{background:rgba(10,132,255,.14)}

/* ── CONTACT DETAIL — signed-quote banner (owner side) ── */
.ctd-signed-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 13px;margin-bottom:12px;
  background:rgba(48,209,88,.1);border:1px solid rgba(48,209,88,.3);border-radius:12px;
}
.ctd-signed-txt{font-size:13px;font-weight:600;color:#248A3D;flex:1;min-width:0}
html.dark .ctd-signed-txt{color:#30D158}
.ctd-signed-dl{
  padding:8px 13px;border:none;border-radius:10px;cursor:pointer;
  background:#30D158;color:#fff;font-size:12.5px;font-weight:700;font-family:inherit;white-space:nowrap;
}
.ctd-signed-dl:active{transform:scale(.95)}
@media(max-width:600px){.ctd-signed-dl{flex:1 1 100%;padding:11px}}

/* ── Goals (מטרות) — life-strategy exercise · Apple/Tesla style ── */
#goalsModal .mbox{border-radius:24px;overflow:hidden}
#goalsModal .mbody{max-height:64vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gl-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gl-timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:17px;letter-spacing:.5px;color:var(--accent);background:rgba(0,122,255,.08);padding:5px 14px;border-radius:20px;flex-shrink:0}
body.dark .gl-timer{background:rgba(10,132,255,.16)}
.gl-timer.low{color:var(--red);background:rgba(255,59,48,.1);animation:glPulse 1s infinite}
@keyframes glPulse{50%{opacity:.55}}
.gl-nudge-dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;margin-inline-start:4px;vertical-align:middle}
/* step progress */
.gl-steps{display:flex;gap:6px;margin-bottom:14px}
.gl-steps span{flex:1;height:4px;border-radius:4px;background:var(--border2);transition:background .3s}
.gl-steps span.on{background:var(--accent)}
.gl-steps-lbl{font-size:11.5px;font-weight:600;color:var(--muted);text-align:center;margin:0 0 14px;letter-spacing:.3px}
/* intro */
.gl-intro-big{font-size:20px;font-weight:800;line-height:1.35;margin-bottom:12px;letter-spacing:-.3px}
.gl-intro-txt{font-size:14.5px;line-height:1.65;color:var(--text2);margin-bottom:16px;overflow-wrap:anywhere}
.gl-intro-qs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gl-q-chip{font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--border);box-shadow:var(--sh);border-radius:20px;padding:7px 14px;color:var(--accent)}
body.dark .gl-q-chip{background:#1C1C1E;box-shadow:none}
/* dump */
.gl-hint-rotator{font-size:16px;font-weight:700;color:var(--accent);text-align:center;padding:12px 8px;transition:opacity .25s;min-height:26px;letter-spacing:-.2px;overflow-wrap:anywhere}
.gl-add-row{display:flex;gap:8px;margin-bottom:6px}
.gl-add-btn{flex:0 0 50px;font-size:22px;padding:0;border-radius:14px}
.gl-count{font-size:13px;color:var(--muted);text-align:center;margin-bottom:4px}
.gl-praise{font-size:13px;font-weight:700;color:var(--green);text-align:center;min-height:18px;margin-bottom:8px;transition:opacity .3s}
.gl-items{max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.gl-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border)}
.gl-item:last-child{border-bottom:none}
.gl-item-n{flex:0 0 24px;font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.gl-item-t{flex:1;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.gl-item-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:6px;border-radius:8px;flex-shrink:0}
.gl-item-del:active{background:rgba(255,59,48,.12);color:var(--red)}
.gl-step-sub{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px;overflow-wrap:anywhere}
/* years */
.gl-yr-row{padding:12px 0;border-bottom:1px solid var(--border)}
.gl-yr-row:last-child{border-bottom:none}
.gl-yr-row.gl-whim{opacity:.4}
.gl-whim-tag{font-size:11px;font-weight:700;background:rgba(255,59,48,.14);color:var(--red);border-radius:8px;padding:2px 8px;margin-inline-start:6px;white-space:nowrap}
.gl-yr-text{font-size:15px;font-weight:600;line-height:1.45;margin-bottom:9px;overflow-wrap:anywhere}
.gl-yr-chips{display:flex;flex-wrap:wrap;gap:6px}
.gl-chip{font-size:12.5px;font-weight:600;border:1px solid var(--border2);background:var(--card);color:var(--text2);border-radius:20px;padding:6px 12px;cursor:pointer;transition:all .18s;min-height:32px}
body.dark .gl-chip{background:#1C1C1E;color:rgba(255,255,255,.75)}
.gl-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.05);box-shadow:0 2px 10px rgba(0,122,255,.35)}
/* balance */
.gl-bal-row{margin-bottom:16px}
.gl-bal-label{font-size:14px;margin-bottom:7px;color:var(--text2)}
.gl-bal-bar{height:12px;border-radius:8px;background:var(--border);overflow:hidden}
.gl-bal-fill{height:100%;border-radius:8px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.gl-bal-fill.gl-short{background:linear-gradient(90deg,#34C759,#30D158)}
.gl-bal-fill.gl-mid{background:linear-gradient(90deg,#007AFF,#0A84FF)}
.gl-bal-fill.gl-long{background:linear-gradient(90deg,#AF52DE,#BF5AF2)}
.gl-bal-note{font-size:14px;font-weight:600;padding:12px 16px;border-radius:14px;margin-top:14px;line-height:1.5}
.gl-bal-note.warn{background:rgba(255,149,0,.12);color:#C77700}
body.dark .gl-bal-note.warn{color:#FFB340}
.gl-bal-note.ok{background:rgba(52,199,89,.12);color:#248A3D}
body.dark .gl-bal-note.ok{color:#30D158}
/* pick */
.gl-pick-grp{font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--muted);margin:16px 0 7px;text-transform:uppercase}
.gl-pick-item{font-size:14.5px;line-height:1.45;padding:12px 14px;border:1px solid var(--border);background:var(--card);border-radius:14px;margin-bottom:7px;cursor:pointer;transition:all .18s;overflow-wrap:anywhere;box-shadow:var(--sh)}
body.dark .gl-pick-item{background:#161616;box-shadow:none}
.gl-pick-item:active{transform:scale(.98)}
.gl-pick-item.on{border-color:var(--accent);background:rgba(0,122,255,.06);font-weight:700;box-shadow:0 0 0 1px var(--accent)}
body.dark .gl-pick-item.on{background:rgba(10,132,255,.14)}
/* why */
.gl-why-card{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
body.dark .gl-why-card{background:#161616;box-shadow:none}
.gl-why-goal{font-size:15px;font-weight:700;line-height:1.45;margin-bottom:10px;overflow-wrap:anywhere}
.gl-why-ta{width:100%;box-sizing:border-box;resize:vertical;border-radius:12px;line-height:1.55}
.gl-whim-btn{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.gl-yr-badge{font-size:11px;font-weight:700;background:rgba(0,122,255,.09);color:var(--accent);border-radius:8px;padding:3px 9px;white-space:nowrap;vertical-align:middle}
body.dark .gl-yr-badge{background:rgba(10,132,255,.18)}
/* board */
.gl-review-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:16px;flex-wrap:wrap}
body.dark .gl-review-bar{background:#161616}
.gl-review-bar.due{background:rgba(255,149,0,.1);border-color:rgba(255,149,0,.35);color:#C77700;font-weight:600}
body.dark .gl-review-bar.due{color:#FFB340}
.gl-review-btn{font-size:12.5px;font-weight:700;background:var(--accent);color:#fff;border:none;border-radius:20px;padding:8px 16px;cursor:pointer;white-space:nowrap;transition:transform .15s}
.gl-review-btn:active{transform:scale(.95)}
.gl-top5{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.gl-top-card{display:flex;gap:14px;border:1px solid var(--border);border-radius:20px;padding:16px;background:var(--card);box-shadow:var(--sh)}
body.dark .gl-top-card{background:linear-gradient(135deg,#161616,#111);box-shadow:none;border-color:rgba(255,255,255,.09)}
.gl-top-num{flex:0 0 34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#007AFF,#0A84FF);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,122,255,.3)}
.gl-top-body{flex:1;min-width:0}
.gl-top-goal{font-size:15.5px;font-weight:800;line-height:1.45;margin-bottom:5px;letter-spacing:-.2px;overflow-wrap:anywhere}
.gl-top-why{font-size:13.5px;color:var(--muted);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.gl-rest{margin-bottom:10px}
.gl-rest summary{font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;padding:8px 0}
.gl-rest-item{font-size:14px;line-height:1.5;padding:8px 2px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;align-items:center;overflow-wrap:anywhere}
.gl-rest-item:last-child{border-bottom:none}
.gl-rest-item.gl-whim{opacity:.45;text-decoration:line-through}
.gl-motto{font-size:13px;color:var(--muted);line-height:1.65;text-align:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);overflow-wrap:anywhere}
/* footer buttons — compact bordered row (side by side), primary full-width */
#glFoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:stretch}
#glFoot .btn-ghost{flex:1 1 0;width:auto;min-width:0;margin:0;padding:11px 6px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:var(--sh)}
body.dark #glFoot .btn-ghost{background:#1c1c1e;border-color:rgba(255,255,255,.1)}
#glFoot .btn-ghost:hover{color:var(--text);background:var(--bg)}
#glFoot .btn-ghost:active{transform:scale(.97)}
#glFoot .btn-primary{flex:1 1 100%;white-space:normal}
@media(max-width:600px){
  /* Full-screen takeover — must sit ABOVE the bottom nav (z-index:2100),
     otherwise the nav covers the footer's סגור/ערוך buttons. */
  /* Goals — full-bleed but STOPS above the bottom nav (nav stays visible + tappable) */
  #goalsModal{padding:0;align-items:flex-start;z-index:2050;
    bottom:calc(72px + max(16px, env(safe-area-inset-bottom, 0px)))}
  #goalsModal .mbox{width:100vw!important;max-width:100vw!important;height:100%;max-height:100%;border-radius:0;display:flex;flex-direction:column;margin:0}
  #goalsModal .mhead{flex-shrink:0;padding-top:max(14px,env(safe-area-inset-top,0px))}
  #goalsModal .mfoot{flex-shrink:0;padding-bottom:10px}
  #goalsModal .mbody{max-height:none;flex:1}
  /* Board fits without scrolling for the 3 picked goals — compact, nothing cut */
  #goalsModal .gl-top-card{padding:10px 12px;gap:10px}
  #goalsModal .gl-top-goal{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
    font-size:14.5px;line-height:1.3}
  #goalsModal .gl-top-why{display:none} /* the "why" lives inside the goal screen — board stays airy */
  #goalsModal .gl-motto{display:none}
  #goalsModal .gl-top5{margin-bottom:8px}
  #goalsModal .gl-quick{padding:8px 4px}
  #goalsModal .gl-rest summary{padding:7px 2px;font-size:13px}
  .gl-items{max-height:none}
  .gl-yr-chips{gap:5px}
  .gl-chip{padding:6px 10px;font-size:12px}
  #glFoot .btn-primary{flex:1 1 100%;order:-1;padding:13px;font-size:15px}
  .gl-intro-big{font-size:18px}
}

/* ── Business card (כרטיס ביקור) ── */
.bizcard-open-btn{width:100%;padding:13px;border:none;border-radius:14px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s}
.bizcard-open-btn:active{transform:scale(.98)}
.bizcard-hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.5}
.bizcard-style-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.bizcard-style-chip{font-size:13px;font-weight:600;border:1px solid var(--border2);background:var(--card);color:var(--text2);border-radius:20px;padding:7px 18px;cursor:pointer;transition:all .18s}
body.dark .bizcard-style-chip{background:#1C1C1E;color:rgba(255,255,255,.75)}
.bizcard-style-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.bizcard-stage{display:flex;justify-content:center}
.bizcard-preview-wrap{width:100%;max-width:340px;min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}

/* ── Default business pin selector (settings) ── */
.biz-default-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.biz-default-lbl{font-size:13px;font-weight:600;color:var(--muted)}
.biz-default-opts{display:flex;gap:6px;flex-wrap:wrap}
.biz-default-chip{font-size:12.5px;font-weight:600;border:1px solid var(--border2);background:var(--card);color:var(--text2);border-radius:20px;padding:6px 14px;cursor:pointer;transition:all .18s}
body.dark .biz-default-chip{background:#1C1C1E;color:rgba(255,255,255,.75)}
.biz-default-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Public digital business card page (?card=) ── */
html.pubcard-mode #app,html.pubcard-mode #loginScreen,html.pubcard-mode #splash{display:none!important}
#publicCard{display:none;position:fixed;inset:0;z-index:10000;overflow-y:auto;background:#F2F2F7;-webkit-overflow-scrolling:touch}
html.dark #publicCard{background:#0A0A0E}
#publicCard.open{display:block}
.pubc-inner{max-width:440px;margin:0 auto;padding:20px 16px 44px;min-height:100%;display:flex;flex-direction:column;justify-content:center}
.pubc-loading,.pubc-err{text-align:center;color:#8E8E93;font-size:15px;padding:60px 20px;line-height:1.6}
.pubc-err span{font-size:13px;opacity:.7}
.pubc-card{border-radius:26px;padding:34px 26px 24px;box-shadow:0 16px 50px rgba(0,0,0,.22);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Rubik,Arial,sans-serif}
.pubc-head{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.pubc-logo{width:88px;height:88px;border-radius:22px;object-fit:cover;flex-shrink:0}
.pubc-logo-ph{display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800}
.pubc-namewrap{min-width:0}
.pubc-name{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.4px;word-break:break-word}
.pubc-role{font-size:15px;margin-top:6px;word-break:break-word;line-height:1.4}
.pubc-bizid{font-size:12.5px;margin-top:5px;opacity:.85}
.pubc-acts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pubc-act{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;border:1px solid;text-decoration:none;transition:transform .15s}
.pubc-act:active{transform:scale(.98)}
.pubc-act-ic{font-size:22px;width:26px;text-align:center;flex-shrink:0}
.pubc-act-lb{font-size:16px;font-weight:600;word-break:break-word}
.pubc-save{width:100%;padding:16px;border:none;border-radius:16px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:transform .15s;margin-bottom:18px}
.pubc-save:active{transform:scale(.98)}
.pubc-powered{text-align:center;font-size:13px;font-weight:600;letter-spacing:.3px}

/* ── Login screen: about + links (before login) ── */
.labout{font-size:13.5px;line-height:1.6;color:var(--muted);margin:-18px 0 18px;padding:0 2px}
html.dark .labout{color:rgba(235,235,245,.55)}
.lfeats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:26px}
.lfeat{font-size:12px;font-weight:600;background:#F2F2F7;color:var(--text2);border-radius:20px;padding:6px 12px}
html.dark .lfeat{background:#1C1C1E;color:rgba(235,235,245,.8)}
.llinks{margin-top:20px;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:10px}
.llinks a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none}
.llinks a:hover{text-decoration:underline}
.ldot{color:var(--muted)}
.lcopy{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.lcopy a{color:var(--muted);text-decoration:underline;cursor:pointer}
html.dark .lcopy{color:rgba(235,235,245,.4)}
/* Terms modal content */
#termsBody h3{font-size:15px;font-weight:700;margin:16px 0 5px;color:var(--text)}
#termsBody p{font-size:14px;line-height:1.65;color:var(--text2);margin-bottom:4px}
.terms-updated{font-size:12.5px;color:var(--muted);margin-bottom:6px!important}
/* Contact modal rows */
.contact-intro{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.contact-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;margin-bottom:10px;text-decoration:none;color:var(--text);transition:all .15s}
.contact-row:active{transform:scale(.98)}
.contact-row:hover{border-color:var(--accent);background:rgba(0,122,255,.04)}
html.dark .contact-row{background:#161616}
.contact-ic{font-size:24px;width:30px;text-align:center;flex-shrink:0}
.contact-txt{font-size:14px;line-height:1.4}
.contact-txt b{font-size:15px}

/* Goals is a full-screen focus view — hide the mobile bottom nav while it's open */
/* Goals keeps the bottom nav visible — it's the way out (no "סגור" needed) */

/* ── Goals: per-goal detail, tasks, AI coach, achievements ── */
.gl-top-card{position:relative;cursor:pointer}
.gl-top-arrow{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--muted);font-weight:400}
.gl-top-card.gl-achieved{border-color:var(--green);background:linear-gradient(135deg,rgba(52,199,89,.08),transparent)}
.gl-top-card.gl-achieved .gl-top-num{background:linear-gradient(135deg,#34C759,#30D158)}
.gl-rest-item{cursor:pointer;transition:background .15s}
.gl-rest-item:active{background:var(--bg)}
.gl-rest-item.gl-achieved{color:var(--green)}
.gl-prog{display:flex;align-items:center;gap:8px;margin-top:8px}
.gl-prog-bar{flex:1;height:6px;border-radius:6px;background:var(--border);overflow:hidden}
.gl-prog-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#007AFF,#0A84FF);transition:width .5s cubic-bezier(.22,1,.36,1)}
.gl-prog-txt{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.gl-achv-bar{width:100%;text-align:right;position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin:8px 0 4px;font-size:15px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit}
body.dark .gl-achv-bar{background:#161616}
.gl-achv-bar:active{transform:scale(.99)}
/* goal detail */
.gl-goal-hdr{margin-bottom:16px}
.gl-goal-title{font-size:19px;font-weight:800;line-height:1.35;letter-spacing:-.3px;overflow-wrap:anywhere}
.gl-goal-why{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:8px;background:var(--bg);border-radius:12px;padding:10px 14px;overflow-wrap:anywhere}
body.dark .gl-goal-why{background:#1c1c1e}
.gl-achieved-banner{background:rgba(52,199,89,.14);color:#248A3D;font-weight:700;font-size:14px;text-align:center;padding:12px;border-radius:14px;margin-bottom:16px}
body.dark .gl-achieved-banner{color:#30D158}
.gl-sec-title{font-size:15px;font-weight:800;margin:20px 0 10px;letter-spacing:-.2px}
.gl-empty-hint{font-size:13.5px;color:var(--muted);line-height:1.6;padding:14px;background:var(--bg);border-radius:12px;text-align:center}
body.dark .gl-empty-hint{background:#161616}
.gl-tasks{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.gl-task{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--sh)}
body.dark .gl-task{background:#161616;box-shadow:none}
.gl-task.done{opacity:.6}
.gl-task.done .gl-task-text{text-decoration:line-through}
.gl-task-check{flex:0 0 24px;height:24px;border-radius:50%;border:2px solid var(--border2);background:transparent;color:#fff;cursor:pointer;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gl-task.done .gl-task-check{background:var(--green);border-color:var(--green)}
.gl-task-body{flex:1;min-width:0}
.gl-task-text{font-size:14.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.gl-task-know{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:5px;background:var(--bg);border-radius:8px;padding:6px 10px;overflow-wrap:anywhere}
body.dark .gl-task-know{background:#1c1c1e}
.gl-task-know b{color:var(--accent);font-weight:700}
.gl-task-addknow{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:4px 0;font-family:inherit;font-weight:600}
.gl-task-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:4px;flex-shrink:0}
.gl-ai-sec{margin-top:18px}
.gl-ai-btn{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,#5E5CE6,#AF52DE);color:#fff;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s}
.gl-ai-btn:active{transform:scale(.98)}
.gl-ai-btn:disabled{opacity:.7}
.gl-ideas{display:flex;flex-direction:column;gap:8px}
.gl-idea{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:12px;padding:11px 14px}
body.dark .gl-idea{background:#1c1c1e}
.gl-idea-txt{flex:1;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.gl-idea-add{flex-shrink:0;background:var(--accent);color:#fff;border:none;border-radius:16px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.gl-books{display:flex;flex-direction:column;gap:10px}
.gl-book{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;text-decoration:none;color:var(--text);box-shadow:var(--sh);transition:transform .15s}
body.dark .gl-book{background:#161616;box-shadow:none}
.gl-book:active{transform:scale(.98)}
.gl-book-title{font-size:14.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.gl-book-author{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:3px}
.gl-book-why{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px;overflow-wrap:anywhere}
/* achievements table */
.gl-achv-list{display:flex;flex-direction:column;gap:10px}
.gl-achv-item{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--sh)}
body.dark .gl-achv-item{background:linear-gradient(135deg,#161616,#111);box-shadow:none;border-color:rgba(255,255,255,.09)}
.gl-achv-medal{font-size:28px;flex-shrink:0}
.gl-achv-body{flex:1;min-width:0}
.gl-achv-goal{font-size:15px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.gl-achv-date{font-size:12.5px;color:var(--muted);margin-top:3px}
.gl-achv-rank{font-size:15px;font-weight:800;color:var(--accent);flex-shrink:0}
/* confetti celebration */
.gl-confetti{position:fixed;inset:0;z-index:3000;pointer-events:none;overflow:hidden}
.gl-confetti span{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:gl-fall 2.4s linear forwards}
@keyframes gl-fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}

/* Goals AI coach — elaboration form */
.gl-ai-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--sh)}
body.dark .gl-ai-card{background:#161616;box-shadow:none;border-color:rgba(255,255,255,.08)}
.gl-ai-title{font-size:16px;font-weight:800;letter-spacing:-.2px}
.gl-ai-sub{font-size:13px;color:var(--muted);line-height:1.55;margin:6px 0 10px;overflow-wrap:anywhere}
.gl-ai-guide{margin:0 0 12px;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.gl-ai-guide li{font-size:12.5px;color:var(--text2);line-height:1.5}
.gl-ai-ctx{width:100%;box-sizing:border-box;resize:vertical;line-height:1.55;margin-bottom:12px;min-height:96px}

/* Goals: AI vision image */
.gl-vision{margin-bottom:16px}
.gl-vision-img{width:100%;border-radius:18px;display:block;box-shadow:0 8px 30px rgba(0,0,0,.18);aspect-ratio:896/560;object-fit:cover;background:var(--bg)}
.gl-vision{position:relative}
.gl-vision-regen{position:absolute;bottom:12px;left:12px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(6px)}
.gl-vision-gen{width:100%;padding:16px;border:1.5px dashed var(--border2);border-radius:18px;background:var(--card);color:var(--accent);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s}
body.dark .gl-vision-gen{background:#161616}
.gl-vision-gen:active{transform:scale(.98)}
.gl-vision-hint{font-size:12px;color:var(--muted);text-align:center;line-height:1.5;margin-top:8px;padding:0 8px}
.gl-vision-loading{padding:40px 16px;text-align:center;font-size:15px;font-weight:700;color:var(--accent);line-height:1.7;background:var(--card);border-radius:18px}
body.dark .gl-vision-loading{background:#161616}
.gl-vision-loading span{font-size:12.5px;font-weight:500;color:var(--muted)}
.gl-top-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0}

/* Goals: reward + dashboard */
.gl-reward{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,149,0,.1),rgba(255,45,85,.06));border:1px solid rgba(255,149,0,.25);border-radius:14px;padding:13px 15px;margin:16px 0 4px;cursor:pointer}
.gl-reward-ic{font-size:22px;flex-shrink:0}
.gl-reward-txt{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.gl-reward-txt b{font-weight:700}
.gl-reward-empty{color:var(--muted)}
.gl-dash-score{position:relative;width:150px;height:150px;margin:8px auto 6px}
.gl-dash-ring{width:150px;height:150px;transform:rotate(-90deg)}
.gl-dash-bg{fill:none;stroke:var(--border);stroke-width:9}
.gl-dash-fg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.gl-dash-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gl-dash-num b{font-size:40px;font-weight:800;line-height:1;letter-spacing:-1px}
.gl-dash-num span{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
.gl-dash-mood{text-align:center;font-size:15px;font-weight:700;margin:6px 0 18px;line-height:1.5;overflow-wrap:anywhere}
.gl-dash-stats{display:flex;gap:10px;margin-bottom:6px}
.gl-dash-stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 6px;text-align:center}
body.dark .gl-dash-stat{background:#161616}
.gl-dash-stat b{font-size:22px;font-weight:800;letter-spacing:-.5px;display:block;line-height:1.1}
.gl-dash-stat span{font-size:11.5px;color:var(--muted);margin-top:5px;display:block}
.gl-dash-tf{margin-bottom:14px}
.gl-dash-tf-top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}
.gl-dash-tf-top b{font-weight:700}
.gl-prog-fill.gl-short{background:linear-gradient(90deg,#34C759,#30D158)}
.gl-prog-fill.gl-mid{background:linear-gradient(90deg,#007AFF,#0A84FF)}
.gl-prog-fill.gl-long{background:linear-gradient(90deg,#AF52DE,#BF5AF2)}

/* Goals: tasteful entrance + accent animations (Apple/Tesla spring feel) */
@keyframes gl-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gl-anim{animation:gl-in .5s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.gl-anim{animation:none}}
.gl-vision-img{animation:gl-in .7s cubic-bezier(.22,1,.36,1) both}
.gl-dash-num b{font-variant-numeric:tabular-nums}
.gl-achv-medal{display:inline-block;animation:gl-medal 2.4s ease-in-out infinite}
@keyframes gl-medal{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.gl-achv-medal,.gl-vision-img{animation:none}}
.gl-reward{transition:transform .15s}
.gl-reward:active{transform:scale(.98)}
.gl-top-card{transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.gl-top-card:active{transform:scale(.98)}

/* Goals vision: upload-own-image fallback + overlay actions */
.gl-vision-upload{width:100%;padding:14px;margin-top:8px;border:1.5px solid var(--border2);border-radius:16px;background:var(--card);color:var(--text);font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}
body.dark .gl-vision-upload{background:#161616}
.gl-vision-upload:active{transform:scale(.98)}
.gl-vision-actions{position:absolute;bottom:12px;left:12px;display:flex;gap:8px}
.gl-vision-mini{border:none;background:rgba(0,0,0,.58);color:#fff;font-size:13px;font-weight:700;font-family:inherit;padding:8px 12px;border-radius:20px;cursor:pointer;backdrop-filter:blur(6px)}
.gl-vision-mini:active{transform:scale(.95)}

/* When upload is the only vision option (non-founder), style it as the primary action */
.gl-vision-upload-primary{margin-top:0;background:var(--accent);color:#fff;border-color:var(--accent);font-size:15px;padding:15px}
body.dark .gl-vision-upload-primary{background:var(--accent)}

/* Goals: "השנה בנקודות" — 365-dot year calendar */
.gl-year-summary{text-align:center;margin-bottom:18px}
.gl-year-big{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.35}
.gl-year-big b{font-size:24px;color:var(--accent)}
.gl-year-prog{max-width:280px;margin:12px auto 8px}
.gl-year-left{font-size:13.5px;color:var(--muted);font-weight:600}
.gl-year-left b{color:var(--text)}
.gl-year-mood{font-size:14px;font-weight:700;margin-top:10px;line-height:1.5;overflow-wrap:anywhere}
.gl-year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.gl-year-block{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 10px 12px;box-shadow:var(--sh)}
body.dark .gl-year-block{background:#161616;box-shadow:none;border-color:rgba(255,255,255,.08)}
.gl-year-mname{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;text-align:center}
.gl-year-dots{display:flex;flex-wrap:wrap;gap:3.5px;justify-content:center}
.gl-daydot{width:7px;height:7px;border-radius:50%;background:var(--border2);flex:0 0 auto}
body.dark .gl-daydot{background:rgba(255,255,255,.14)}
.gl-daydot.past{background:var(--accent)}
/* dark base rule is more specific than .past/.today — restore accent explicitly */
body.dark .gl-daydot.past,body.dark .gl-daydot.today{background:var(--accent)}
.gl-daydot.today{background:var(--accent);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent);animation:gl-today-pulse 1.8s ease-in-out infinite}
body.dark .gl-daydot.today{box-shadow:0 0 0 2px #161616,0 0 0 3.5px var(--accent)}
@keyframes gl-today-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.75}}
@media(prefers-reduced-motion:reduce){.gl-daydot.today{animation:none}}
@media(max-width:600px){.gl-year-grid{grid-template-columns:repeat(3,1fr);gap:8px}.gl-year-block{padding:9px 6px 11px}.gl-daydot{width:6.5px;height:6.5px;gap:3px}}

/* Goals #4: task "when-where" (implementation intention) */
.gl-task-when{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:5px;background:rgba(94,92,230,.08);border-radius:8px;padding:6px 10px;overflow-wrap:anywhere;cursor:pointer}
body.dark .gl-task-when{background:rgba(94,92,230,.15)}
.gl-task-when b{color:#5E5CE6;font-weight:700}
.gl-task-addwhen{background:none;border:none;color:#5E5CE6;font-size:12px;cursor:pointer;padding:4px 0 0;font-family:inherit;font-weight:600;display:block}
.gl-tasks-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gl-journey-link{flex-shrink:0;background:rgba(94,92,230,.1);color:#5E5CE6;border:none;border-radius:16px;padding:7px 13px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
body.dark .gl-journey-link{background:rgba(94,92,230,.2)}
.gl-journey-link:active{transform:scale(.96)}

/* Goals #6: journey map (path of stops) */
.gl-jrny-head{text-align:center;margin-bottom:18px}
.gl-jrny-goaltitle{font-size:17px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.gl-jrny-count{font-size:13.5px;color:var(--muted);margin-top:6px;font-weight:600}
.gl-jrny-count b{color:var(--accent)}
.gl-jrny-path{position:relative;padding:4px 0}
.gl-jrny-stop{position:relative;display:flex;gap:14px;align-items:flex-start;padding-bottom:16px}
.gl-jrny-stop::before{content:'';position:absolute;top:0;bottom:0;right:18px;width:3px;background:var(--border2);z-index:0}
body.dark .gl-jrny-stop::before{background:rgba(255,255,255,.12)}
.gl-jrny-stop.cap.start::before{top:19px}
.gl-jrny-stop.cap.goal::before{bottom:calc(100% - 19px)}
.gl-jrny-stop.done::before,.gl-jrny-stop.current::before,.gl-jrny-stop.cap.start::before,.gl-jrny-stop.cap.goal.reached::before{background:var(--accent)}
/* dark base rule is more specific — restore the traveled (accent) connector explicitly */
body.dark .gl-jrny-stop.done::before,body.dark .gl-jrny-stop.current::before,body.dark .gl-jrny-stop.cap.start::before,body.dark .gl-jrny-stop.cap.goal.reached::before{background:var(--accent)}
.gl-jrny-node{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;background:var(--card);border:2px solid var(--border2);color:var(--muted);box-shadow:var(--sh)}
body.dark .gl-jrny-node{background:#1c1c1e;border-color:rgba(255,255,255,.14)}
.gl-jrny-stop.cap.start .gl-jrny-node{background:var(--accent);border-color:var(--accent)}
.gl-jrny-stop.done .gl-jrny-node{background:var(--green);border-color:var(--green);color:#fff}
.gl-jrny-stop.current .gl-jrny-node{background:var(--accent);border-color:var(--accent);color:#fff;animation:gl-today-pulse 1.8s ease-in-out infinite}
.gl-jrny-stop.cap.goal .gl-jrny-node{background:rgba(255,159,10,.15);border-color:rgba(255,159,10,.5)}
.gl-jrny-stop.cap.goal.reached .gl-jrny-node{background:var(--accent);border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.gl-jrny-stop.current .gl-jrny-node{animation:none}}
.gl-jrny-card{flex:1;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:11px 14px;box-shadow:var(--sh);margin-top:-1px}
body.dark .gl-jrny-card{background:#161616;box-shadow:none;border-color:rgba(255,255,255,.08)}
.gl-jrny-stop.current .gl-jrny-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gl-jrny-here{font-size:11.5px;font-weight:800;color:var(--accent);margin-bottom:3px;letter-spacing:.3px}
.gl-jrny-txt{font-size:14.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.gl-jrny-txt.strike{text-decoration:line-through;opacity:.6}
.gl-jrny-dest{font-weight:800}
.gl-jrny-meta{font-size:12px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}

/* Admin: usage analytics bars */
.adm-usage{margin:8px 0 4px;display:flex;flex-direction:column;gap:9px}
.adm-usage-row{font-size:13px}
.adm-usage-top{display:flex;justify-content:space-between;margin-bottom:4px}
.adm-usage-top b{font-weight:800;color:var(--accent)}
.adm-usage-bar{height:8px;border-radius:6px;background:var(--border);overflow:hidden}
.adm-usage-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#007AFF,#0A84FF)}

/* Reusable card swipe (receipts, contacts) — mirrors the task-card swipe */
.swrow{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:8px}
.swrow-inner{position:relative;z-index:1;margin:0!important;background:var(--card);will-change:transform}
body.dark .swrow-inner{background:#111}
.swrow-bg{position:absolute;inset:0;direction:ltr;display:flex;align-items:center;gap:8px;color:#fff;font-size:22px;opacity:0;pointer-events:none;z-index:0;border-radius:var(--r)}
.swrow-bg span{font-size:14px;font-weight:700}
.swrow-bg.right{background:var(--green);justify-content:flex-start;padding-left:22px}
.swrow-bg.left{background:var(--red);justify-content:flex-end;padding-right:22px}

/* ══════════════════════════════════════════════
   QUICK-ADD FAB + RADIAL QUICK-ACTIONS (mobile)
══════════════════════════════════════════════ */
.qa-fab,.qa-scrim,.radial-menu{display:none}

@media(max-width:600px){
  html.authed .qa-fab{
    display:flex;position:fixed;z-index:2200;
    bottom:calc(72px + env(safe-area-inset-bottom,0px));left:18px;
    width:58px;height:58px;border-radius:var(--r-pill);
    align-items:center;justify-content:center;border:none;cursor:pointer;
    color:#2a2100;background:var(--gold-grad);touch-action:manipulation;
    box-shadow:0 8px 24px rgba(184,150,62,.42),0 2px 8px rgba(0,0,0,.22);
    transition:transform var(--t-med) var(--ease-spring),opacity var(--t-med);
  }
  body.dark .qa-fab{color:#1a1400}
  .qa-fab svg{width:26px;height:26px}
  .qa-fab:active{transform:scale(.9)}
  body.radial-open .qa-fab{transform:rotate(135deg)}
  body.qa-open .qa-fab{opacity:0;pointer-events:none;transform:scale(.6)}
  /* Only on the tasks view — hide over other tabs / open modals */
  body.kanban-on .qa-fab,
  body:has(#botNav.contacts) .qa-fab,
  body:has(#botNav.tab-sb) .qa-fab,
  body:has(.moverlay.open) .qa-fab{display:none}

  /* Dim scrim behind sheet / radial */
  .qa-scrim{
    display:block;position:fixed;inset:0;z-index:2150;background:rgba(0,0,0,.42);
    opacity:0;pointer-events:none;transition:opacity var(--t-med);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  body.qa-open .qa-scrim,body.radial-open .qa-scrim{opacity:1;pointer-events:auto}

  /* The dense add-form becomes a bottom sheet (except in kanban) */
  body:not(.kanban-on) .add-form{
    position:fixed;left:0;right:0;bottom:0;z-index:2300;
    transform:translateY(130%);
    transition:transform var(--t-med) var(--ease-out);
    border-top:1px solid var(--border);border-bottom:none;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:22px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 40px rgba(0,0,0,.24);
    max-height:82vh;overflow-y:auto;
  }
  body:not(.kanban-on) .add-form::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:var(--border2);
  }
  body.qa-open:not(.kanban-on) .add-form{transform:translateY(0)}
  body:not(.kanban-on) .add-form #tInput{order:-1;flex:1 1 100%;min-width:0}

  /* Radial quick-actions stack */
  html.authed .radial-menu{
    display:flex;flex-direction:column;gap:10px;align-items:flex-start;
    position:fixed;z-index:2250;left:16px;
    bottom:calc(142px + env(safe-area-inset-bottom,0px));
    pointer-events:none; /* container is always laid out — don't let it eat taps
                            over whatever sits beneath it (e.g. settings toggles)
                            until it's actually open. Items re-enable themselves. */
  }
  body.radial-open .radial-menu{pointer-events:auto}
  .radial-item{
    display:flex;align-items:center;gap:10px;padding:11px 18px;
    border-radius:var(--r-pill);border:1px solid var(--glass-brd);
    background:var(--glass-bg);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 6px 20px rgba(0,0,0,.22);
    font-family:inherit;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;
    opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
    transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-spring);
  }
  body.radial-open .radial-item{opacity:1;transform:none;pointer-events:auto}
  body.radial-open .radial-item:nth-child(4){transition-delay:0s}
  body.radial-open .radial-item:nth-child(3){transition-delay:.04s}
  body.radial-open .radial-item:nth-child(2){transition-delay:.08s}
  body.radial-open .radial-item:nth-child(1){transition-delay:.12s}
  .radial-item:active{transform:scale(.95)}
  .radial-ic{font-size:20px;width:24px;text-align:center}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){
  .add-form,.radial-item,.qa-fab{transition:none!important}
}

/* ══ Liquid-Glass view transitions (idea 11) ══ */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.4s;animation-timing-function:cubic-bezier(.32,1,.44,1);
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ══ Living ambient background — shifts by time of day (idea 7) ══ */
.ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--bg); --amb1:#BFE0FF; --amb2:#D9C9FF;
}
.ambient::before,.ambient::after{
  content:'';position:absolute;width:82vmax;height:82vmax;border-radius:50%;
  filter:blur(64px);opacity:.28;will-change:transform;
}
.ambient::before{background:radial-gradient(circle,var(--amb1),transparent 62%);
  top:-26vmax;right:-16vmax;animation:ambDrift1 27s ease-in-out infinite alternate}
.ambient::after{background:radial-gradient(circle,var(--amb2),transparent 62%);
  bottom:-26vmax;left:-16vmax;animation:ambDrift2 33s ease-in-out infinite alternate}
body.dark .ambient::before,body.dark .ambient::after{opacity:.20}
@keyframes ambDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-8vmax,6vmax) scale(1.14)}}
@keyframes ambDrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(7vmax,-5vmax) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none}}

/* ══ Large title that collapses on scroll (idea 8) ══ */
.topbar{transition:padding .28s var(--ease-out)}
.topbar-t{transition:font-size .26s var(--ease-out)}
.topbar:not(.scrolled) .topbar-t{font-size:22px;letter-spacing:-.5px}
.topbar.scrolled{padding-top:9px;padding-bottom:9px}
.topbar.scrolled .topbar-t{font-size:18px}

/* ══ Press depth — cards lift with a soft shadow bloom (idea 9) ══ */
.tcard{transition:box-shadow .25s var(--ease-out)}
.tcard:active{box-shadow:0 12px 34px rgba(0,0,0,.20)}
body.dark .tcard:active{box-shadow:0 14px 40px rgba(0,0,0,.7)}
.gl-quick,.gl-top-card,.set-tab{transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-out)}
.gl-quick:active,.gl-top-card:active{transform:scale(.97);box-shadow:0 10px 26px rgba(0,0,0,.18)}
body.dark .gl-quick:active,body.dark .gl-top-card:active{box-shadow:0 10px 26px rgba(0,0,0,.6)}

/* ══ Goals — compact quick-row (year/momentum/achievements in one row) ══ */
.gl-quick-row{display:flex;gap:8px;margin:10px 0 6px}
.gl-quick{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);
  cursor:pointer;font-family:inherit;transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.gl-quick:active{transform:scale(.95)}
.gl-quick:hover{border-color:var(--accent)}
body.dark .gl-quick{background:#161616}
.gl-quick-ic{font-size:23px;line-height:1}
.gl-quick-lbl{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.gl-quick-sub{font-size:11px;font-weight:600;color:var(--muted);line-height:1}

/* Goals & Bookkeeping live in the bottom nav on mobile → hide the duplicates in the side drawer */
@media(max-width:600px){ .sb-dup,.nav-dup{display:none!important} }
/* Free tier: premium side-menu items carry a small lock so intent is clear */
body.free-tier .sb-pro{position:relative}
body.free-tier .sb-pro::after{content:"🔒";margin-inline-start:auto;font-size:12px;opacity:.65}

/* Consolidated status: activity count + gems live in the opts row, next to "מצבים".
   (Mobile layout is handled in the @media(max-width:600px) topbar block.) */
.topbar-opts{align-items:center}
.topbar-opts .topbar-s{display:flex;align-items:center;gap:7px;margin-top:0}

/* ══ Public quote — premium animated reveal for the client (idea 10) ══ */
.pubq-reveal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1b1b2f 0%,#16213e 55%,#0f3460 100%);color:#fff;animation:pqRvFade .45s ease}
.pubq-reveal.done{animation:pqRvOut .6s cubic-bezier(.32,1,.44,1) forwards}
@keyframes pqRvFade{from{opacity:0}to{opacity:1}}
@keyframes pqRvOut{to{opacity:0;transform:scale(1.06)}}
.pubq-rv-inner{text-align:center;padding:24px;animation:pqRvPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes pqRvPop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.pubq-rv-logo{width:96px;height:96px;border-radius:26px;object-fit:cover;margin:0 auto 18px;display:block;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.pubq-rv-ph{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;background:rgba(255,255,255,.14)}
.pubq-rv-name{font-size:24px;font-weight:800;letter-spacing:-.3px}
.pubq-rv-sub{font-size:15px;opacity:.82;margin-top:6px}
.pubq-rv-line{width:64px;height:3px;border-radius:2px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,#E7C767,transparent);background-size:200% 100%;animation:pqRvShine 1.2s linear infinite}
@keyframes pqRvShine{to{background-position:-200% 0}}
.pubq-doc-in{animation:pqDocIn .7s cubic-bezier(.32,1,.44,1) 1.25s both}
@keyframes pqDocIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pubq-doc-in{animation:none}}

/* ══ Compact card — collapsed row on mobile, expand on tap (idea 1) ══ */
.tc-exp,.tcard-due{display:none} /* desktop shows the full card — no chevron / due-chip */
@media(max-width:600px){
  /* ── Collapsed card = ONE tight, centered row (futuristic & calm) ──
     [check] · title (ellipsis) ······ [meta pill] [chevron]
     The title only occupies its own text width, so the free space in the
     row — plus the pill and the whole row — are all tap-to-expand zones. */
  .tcard-inner{padding:12px 14px;gap:11px}
  .tcard:not(.expanded) .tbody{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0}
  /* full title — never cut: it wraps to as many lines as needed */
  .tcard:not(.expanded) .ttitle{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:600;
    white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;
    overflow-wrap:anywhere;cursor:pointer}
  /* meta pill — pushed to the trailing end, leaving tappable free space before it */
  .tcard-due{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-inline-start:auto;
    font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.1px;
    background:var(--gray6);padding:4px 11px;border-radius:var(--r-pill);
    border:1px solid transparent;transition:background var(--t-fast) var(--ease)}
  body.dark .tcard-due{background:rgba(255,255,255,.055)}
  .tcard-due .prio-dot{width:8px;height:8px;flex-shrink:0}
  .tcard-due .cdue-txt{white-space:nowrap}
  .tc-exp{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:30px;height:30px;background:none;border:none;color:var(--gray2);font-size:22px;line-height:1;cursor:pointer;
    padding:0;transition:transform var(--t-med) var(--ease-spring),color var(--t-fast)}
  .tcard.expanded .tc-exp{transform:rotate(90deg);color:var(--accent)}
  /* collapsed: hide everything non-essential so every card is the same height */
  .tcard:not(.expanded) .tmeta,
  .tcard:not(.expanded) .tactions,
  .tcard:not(.expanded) .tnotes,
  .tcard:not(.expanded) .tnotes-open-link{display:none}
  /* the whole collapsed row is a tap-to-expand target */
  .tcard:not(.expanded) .tcard-inner,
  .tcard:not(.expanded) .tbody,
  .tcard:not(.expanded) .ttitle,
  .tcard:not(.expanded) .tcard-due,
  .tcard:not(.expanded) .spacer{cursor:pointer}
  .tcard.expanded .tcard-due{display:none}
  .tcard.expanded .tmeta{animation:sIn .2s ease}
  /* futuristic sheen + calmer surface on dark */
  body.dark .tcard-inner{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%),var(--elev1)}
  .tcard:active{transform:scale(.994)}
}

/* ══ Boss mode — living dashboard: tree + vitals + growth (ideas 13/14/3) ══ */
.boss-box{width:410px;max-width:94vw}
.boss-hero{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(124,179,66,.14),rgba(56,142,60,.05));border:1px solid var(--border);margin-bottom:14px}
body.dark .boss-hero{background:linear-gradient(160deg,rgba(124,179,66,.16),rgba(56,142,60,.04))}
.boss-tree{flex-shrink:0}
.boss-canopy{transform-origin:55px 92px;animation:bossSway 5s ease-in-out infinite}
.boss-tree .leaf{transform-origin:55px 100px;animation:bossSway 4s ease-in-out infinite}
@keyframes bossSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.boss-stage{font-size:12.5px;font-weight:800;color:var(--green);letter-spacing:.3px}
.boss-hero-sub{font-size:15px;color:var(--text);margin-top:3px;line-height:1.35}
.boss-hero-sub b{font-size:20px}
.boss-water{font-size:12.5px;color:var(--green);font-weight:700;margin-top:6px}
.boss-water.dry{color:var(--muted);font-weight:500}
.boss-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.boss-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 6px;text-align:center}
body.dark .boss-tile{background:#161616}
.boss-tile-v{font-size:20px;font-weight:800;color:var(--text);line-height:1}
.boss-tile-l{font-size:11.5px;color:var(--muted);margin-top:4px}
.boss-sec{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px}
.boss-spark{display:flex;align-items:flex-end;gap:6px;height:82px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
body.dark .boss-spark{background:#161616}
.boss-bar{flex:1;background:linear-gradient(to top,var(--accent),#5ac8fa);border-radius:5px 5px 0 0;min-height:4px;animation:bossBar .55s var(--ease-out) both;transform-origin:bottom}
@keyframes bossBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.boss-mile{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}
.sb-boss .sb-btn-icon{filter:saturate(1.2)}
@media(prefers-reduced-motion:reduce){.boss-canopy,.boss-tree .leaf,.boss-bar{animation:none}}

/* ══ Admin — "ניהול מנויים ומכירות" entry button (app-style card) ══ */
.adm-open-btn{
  display:flex;align-items:center;gap:11px;width:100%;margin-top:18px;
  padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--border2);
  background:var(--card);color:var(--text);font-family:inherit;cursor:pointer;text-align:right;
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast),box-shadow var(--t-fast);
}
.adm-open-btn:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(184,150,62,.14)}
.adm-open-btn:active{transform:scale(.98)}
body.dark .adm-open-btn{background:#161616}
.adm-open-ic{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;border-radius:12px;background:var(--gold-grad);box-shadow:0 2px 8px rgba(184,150,62,.3)}
.adm-open-lb{flex:1;min-width:0;font-size:15px;font-weight:700}
.adm-open-arrow{color:var(--muted);font-size:20px;font-weight:700}

/* ══ Admin — grant subscription by email ══ */
.adm-grant{display:flex;gap:8px;margin:6px 0 16px}
.adm-grant input{flex:1;min-width:0;padding:11px 14px;border:1.5px solid var(--border2);border-radius:var(--r);
  background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none}
.adm-grant input:focus{border-color:var(--accent)}
.adm-grant button{flex-shrink:0;padding:11px 14px;border:none;border-radius:var(--r);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;
  background:var(--gold-grad);color:#2a2100;transition:transform var(--t-fast)}
.adm-grant button:active{transform:scale(.96)}
body.dark .adm-grant input{background:#161616}

/* ══ Milestone certificate (idea 12) ══ */
.ms-cert{position:relative;overflow:hidden;width:342px;max-width:92vw;padding:34px 26px 26px;
  border-radius:var(--r-xl);background:linear-gradient(160deg,#1b1b2f,#0f3460);color:#fff;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pIn .5s var(--ease-spring)}
.ms-shine{position:absolute;top:-60%;left:-40%;width:55%;height:220%;transform:rotate(18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:msShine 2.6s ease-in-out .3s infinite}
@keyframes msShine{0%{left:-40%}60%,100%{left:135%}}
.ms-emoji{position:relative;font-size:72px;line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));animation:msPop .6s var(--ease-spring)}
@keyframes msPop{0%{transform:scale(0) rotate(-18deg)}100%{transform:scale(1) rotate(0)}}
.ms-badge{position:relative;display:inline-block;margin:14px 0 8px;background:linear-gradient(135deg,#E7C767,#B8963E);
  color:#2a2100;font-weight:800;font-size:13px;letter-spacing:.5px;padding:5px 16px;border-radius:var(--r-pill)}
.ms-title{position:relative;font-size:25px;font-weight:800;line-height:1.2;margin-bottom:6px}
.ms-sub{position:relative;font-size:14px;opacity:.82;margin-bottom:22px}
.ms-actions{position:relative;display:flex;flex-direction:column;gap:8px}
.ms-actions .btn-primary{background:linear-gradient(135deg,#E7C767,#B8963E);color:#2a2100}
.ms-actions .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.22)}

/* ══ Gem store (idea 13) ══ */
.gem-bal{text-align:center;font-size:15px;color:var(--text2);margin-bottom:14px}
.gem-bal b{color:var(--text);font-size:17px}
.gem-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gem-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 10px;
  border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--card);
  cursor:pointer;font-family:inherit;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast),box-shadow var(--t-fast)}
.gem-card:active{transform:scale(.96)}
.gem-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.14)}
.gem-card.disabled{opacity:.5}
.gem-swatch{width:42px;height:42px;border-radius:var(--r-pill);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.gem-name{font-size:13.5px;font-weight:600;color:var(--text)}
.gem-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}
.gem-badge.sel{background:var(--accent);color:#fff}
.gem-badge.own{background:rgba(120,120,128,.16);color:var(--muted)}
.gem-badge.buy{background:rgba(52,199,89,.16);color:var(--green)}
.gem-badge.locked{background:rgba(120,120,128,.12);color:var(--muted)}
.gem-hint{margin-top:14px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
body.dark .gem-card{background:#161616}

/* ══ 5-tab bottom nav sizing (idea 2) ══ */
@media(max-width:600px){
  .bot-nav{gap:5px!important;padding-left:6px!important;padding-right:6px!important}
  .bot-nav-btn{padding:6px 0 5px!important;gap:4px!important}
  .bot-nav-ic{width:28px!important;height:26px!important}
  .bot-nav-ic svg{width:23px!important;height:23px!important}
  .bot-nav-lbl{font-size:11px!important}
  .bot-nav-btn.active .bot-nav-lbl{font-size:11px!important}
  .main{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   POLISH LAYER — Apple / Mac / Tesla refinement
   ideas 7 (single accent + neutral scale) · 8 (uniform chips) ·
   9 (quiet hairline separators) · 10 (layered dark) · 11 (one easing) ·
   14 (view-transition cross-fades) · 16 (symmetric expanded card) ·
   18 (Mac-style settings) · 20 (splash entrance).
   Appended last on purpose so these win over base rules.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 7 · neutral gray scale (single accent already = --accent) ── */
:root{
  --gray1:#8E8E93; --gray2:#AEAEB2; --gray3:#C7C7CC;
  --gray4:#D1D1D6; --gray5:#E5E5EA; --gray6:#F2F2F7;
  --chip-h:24px;                    /* every meta chip is exactly this tall  */
  --ease:cubic-bezier(.32,1,.44,1); /* 11 · the ONE motion curve of the app  */
  --elev1:var(--card); --elev2:#FFFFFF; --elev3:#FFFFFF;
}
body.dark{
  --gray1:#8E8E93; --gray2:#636366; --gray3:#48484A;
  --gray4:#3A3A3C; --gray5:#2C2C2E; --gray6:#1C1C1E;
  /* 10 · true layered dark — surfaces get lighter the higher they float */
  --elev1:#141416; --elev2:#1C1C1E; --elev3:#242426;
}

/* ── 8 · UNIFORM CHIPS — identical height / padding / radius / weight.
   Only geometry is normalized; each chip keeps its own colour semantics. ── */
.tmeta .dbadge, .tmeta .pbadge, .tmeta .bkt-badge, .tmeta .dates-badge,
.tmeta .ddl-badge, .tmeta .sched-badge, .tmeta .asn-badge, .tmeta .role-tag,
.tmeta .repeat-badge, .tmeta .timed-badge{
  height:var(--chip-h); min-height:var(--chip-h);
  display:inline-flex; align-items:center; gap:5px;
  padding:0 10px; border-radius:8px;
  font-size:11.5px; font-weight:500; line-height:1;
  box-sizing:border-box;
}
.tmeta .asn-badge{padding:0 10px 0 4px; max-width:150px}   /* room for avatar */
.tmeta{gap:6px; row-gap:6px}

/* ── 9 · QUIET SEPARATORS — hairline rest state, gentle lift on hover.
   The coloured priority edge (.pi-*) is preserved. ── */
.tcard{box-shadow:none; border-color:var(--border);
  transition:box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease)}
@media(hover:hover){
  .tcard:hover{box-shadow:0 6px 22px rgba(0,0,0,.07); border-color:var(--border2); transform:translateY(-1px)}
}
body.dark .tcard{background:var(--elev1)}
body.dark .tcard-inner{background:var(--elev1)}

/* ── 10 · layered dark surfaces for floating panels ── */
body.dark .mbox{background:var(--elev2)}
body.dark .modes-menu{background:var(--elev3)}
/* NB: .radial-menu / .add-form sheet keep their own translucent glass — they must
   not get an opaque elevated background (the radial container is always laid out). */

/* ── 16 · SYMMETRIC EXPANDED CARD (mobile) — checkbox aligns to the title
   row, meta sits on one tidy wrapped row, notes get their own block with a
   hairline divider, actions align to the leading edge. ── */
@media(max-width:600px){
  .tcard.expanded .tcard-inner{align-items:flex-start; padding:15px; flex-wrap:wrap; gap:11px; row-gap:11px}
  .tcard.expanded .tcheck{margin-top:2px}
  .tcard.expanded .tbody{display:flex; flex-direction:column; gap:11px; flex:1 1 auto; min-width:0}
  .tcard.expanded .ttitle{white-space:normal; font-size:16px; font-weight:700; line-height:1.35}
  .tcard.expanded .tmeta{margin-top:0; gap:7px; row-gap:7px}
  .tcard.expanded .tnotes:not(:empty){
    margin-top:0; padding-top:11px; border-top:1px solid var(--border);
    width:100%; color:var(--text2); font-size:13.5px; line-height:1.55}
  .tcard.expanded .tc-exp{align-self:flex-start; margin-top:1px}
  /* value control gets a quiet panel so it reads as its own section */
  .tcard.expanded .tvalue{width:100%; padding:11px 12px; border-radius:12px;
    background:var(--gray6); border:1px solid var(--border); margin-top:1px}
  body.dark .tcard.expanded .tvalue{background:rgba(255,255,255,.035)}
  /* actions become a clean full-width bottom bar */
  .tcard.expanded .tactions{opacity:1; order:99; flex:1 0 100%; align-self:stretch;
    flex-direction:row; align-items:center; gap:9px; justify-content:flex-start;
    margin:1px 0 0; padding-top:13px; border-top:1px solid var(--border)}
  .tcard.expanded .tactions .tacbtn{width:44px; height:44px; padding:0; border-radius:13px;
    border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; color:var(--muted)}
  .tcard.expanded .tactions .tacbtn.bolt{width:44px; height:44px}
  .tcard.expanded .tactions .tacbtn.repeat-tacbtn{width:44px!important; height:44px!important; margin-top:0!important;
    border-radius:13px!important; border:1px solid var(--border2)!important; font-size:21px}
  .tcard.expanded .tactions .tacbtn.del{margin-inline-start:auto; color:var(--red);
    border-color:color-mix(in srgb,var(--red) 32%,transparent)}
  .tcard.expanded .tactions .tacbtn.del svg{width:18px;height:18px}
}

/* ── 11 · one easing everywhere — retune the common animated primitives ── */
.tcheck{transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.dbadge, .pbadge, .bkt-badge, .dates-badge, .ddl-badge, .sched-badge, .asn-badge{
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}

/* ── 14 · view-transition cross-fade (used by _vt on tab / settings switches) ── */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s; animation-timing-function:var(--ease)}
}

/* ── 18 · MAC-STYLE SETTINGS — vertical sidebar tabs on wide screens.
   Mobile keeps the horizontal segmented control (untouched). ── */
@media(min-width:700px){
  #settingsModal .mbox{width:660px!important; max-width:92vw}
  #settingsModal .mbody{display:grid; grid-template-columns:172px 1fr; gap:26px; align-items:start}
  #settingsModal .streak-badge{grid-column:1 / -1; grid-row:1}
  #settingsModal .set-tabs{grid-column:1; grid-row:2; flex-direction:column;
    background:transparent; gap:3px; padding:0; position:sticky; top:0}
  #settingsModal .set-tab{justify-content:flex-start; text-align:right;
    padding:10px 13px; border-radius:9px; font-size:14px; box-shadow:none}
  #settingsModal .set-tab.active{background:var(--gray5); box-shadow:none}
  body.dark #settingsModal .set-tab.active{background:var(--elev3)}
  #settingsModal .set-pane{grid-column:2}
  #settingsModal .set-pane.active{grid-column:2; grid-row:2}
}

/* ── 20 · SPLASH — refined entrance: logo fades up + a quiet wordmark ── */
.splash-logo{animation:splash-in .7s var(--ease) both, splash-breathe 2.4s ease-in-out 1s infinite}
@keyframes splash-in{from{opacity:0; transform:translateY(14px) scale(.86); filter:blur(6px) drop-shadow(0 12px 32px rgba(0,122,255,.25))}
  to{opacity:1; transform:none; filter:blur(0) drop-shadow(0 12px 32px rgba(0,122,255,.25))}}
.splash-wordmark{
  position:absolute; bottom:22%; left:0; right:0; text-align:center;
  font-size:15px; font-weight:600; letter-spacing:3px; color:var(--muted);
  opacity:0; animation:splash-word .6s var(--ease) .45s forwards}
@keyframes splash-word{to{opacity:.75; letter-spacing:5px}}
@media(prefers-reduced-motion:reduce){
  .splash-logo{animation:none} .splash-wordmark{animation:none; opacity:.7}
}

/* ═══ CRM cluster — relationship strip (9), cost of hesitation (4) ═══ */
.ct-status-strip{margin:2px 16px 12px;padding:12px 14px;border-radius:var(--r-lg);
  background:var(--gray6);border:1px solid var(--border)}
body.dark .ct-status-strip{background:var(--elev2)}
.ct-lasttalk{font-size:13px;color:var(--muted)}
.ct-lasttalk b{color:var(--text);font-weight:600}
.ct-miles{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ct-mile{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--border2);color:var(--muted);white-space:nowrap;line-height:1.6}
.ct-mile.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.ct-hesitation{margin:0 16px 14px;padding:12px 14px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--red) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--red) 30%,transparent);
  font-size:13px;line-height:1.7;color:var(--text)}
.ct-hesitation b{font-weight:800}
.ct-money-rollup{margin:0 0 12px;padding:13px 15px;border-radius:var(--r-lg);cursor:pointer;
  background:color-mix(in srgb,var(--red) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--red) 26%,transparent);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ct-money-rollup:active{transform:scale(.99)}
.ct-money-rollup .ctm-main{font-size:14px;color:var(--text)}
.ct-money-rollup .ctm-main b{font-weight:800}
.ct-money-rollup .ctm-sub{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ═══ Goals board — clean, aligned goal cards (same design language) ═══ */
.gl-top-card{align-items:center;padding:15px 16px;border-radius:var(--r-lg);box-shadow:none}
@media(hover:hover){.gl-top-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.07);border-color:var(--border2)}}
body.dark .gl-top-card{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%),var(--elev1)}
/* number badge — a touch smaller & calmer */
.gl-top-num{flex:0 0 32px;height:32px;font-size:14px;box-shadow:0 2px 8px rgba(0,122,255,.28)}
/* title wraps on its own; the timeframe pill lives on a fixed meta row below it */
.gl-top-goal{font-weight:700;margin-bottom:0;letter-spacing:-.1px}
.gl-top-meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.gl-top-meta:empty{display:none}
/* the year pill — consistent, no longer buried inside the sentence */
.gl-top-meta .gl-yr-badge,.gl-yr-badge{font-weight:600;border-radius:var(--r-pill);
  padding:3px 11px;letter-spacing:.1px;border:1px solid transparent}
body.dark .gl-yr-badge{background:rgba(10,132,255,.16);color:#4DA3FF}
.gl-top-arrow{color:var(--gray2);font-weight:400}
/* progress-ring gauge with the goal number inside (Apple-Watch style) */
.gl-ring{position:relative;flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;align-self:center}
.gl-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gl-ring-bg{fill:none;stroke:rgba(0,0,0,.09);stroke-width:3.4}
body.dark .gl-ring-bg{stroke:rgba(255,255,255,.12)}
.gl-ring-fg{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease)}
.gl-ring-fg.done{stroke:var(--gold)}
.gl-ring-num{position:relative;font-size:16px;font-weight:800;color:var(--accent);letter-spacing:-.5px}
.gl-ring-num.done{color:var(--gold)}
.gl-pct-chip{font-size:11px;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 9px;border-radius:var(--r-pill)}
.gl-top-card.gl-achieved .gl-pct-chip{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}

/* ═══ Settings — iOS-style section headers with tinted icon chips ═══ */
.set-section-label{display:flex;align-items:center;gap:9px}
.ssl-ic{flex-shrink:0;width:26px;height:26px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}

/* ═══ Side drawer — calmer, aligned, premium (native-app feel) ═══ */
/* project rows: tighter rhythm + a rounded highlight for the active one */
.sidebar .pitem{padding:8px 12px;margin:1px 8px;border-radius:12px;gap:10px;row-gap:0}
.sidebar .pitem:hover{background:rgba(255,255,255,.05)}
.sidebar .pitem.active{background:rgba(255,255,255,.08)}
.sidebar .pitem.active::before{content:'';position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:3px;background:var(--accent)}
/* full project name — never cut: wraps to a second line if long */
.sidebar .pname{font-size:14px;font-weight:500;line-height:1.3;min-width:0;flex:1;
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.sidebar .pitem{align-items:center}
.sidebar .pdot{width:8px;height:8px}
.sidebar .pcnt{background:rgba(255,255,255,.08);color:rgba(235,235,245,.55);
  font-size:11px;font-weight:600;padding:1px 8px;min-width:26px;text-align:center}
/* slim, hugging progress bar — no bulky extra row */
.sidebar .proj-prog-row{flex:1 0 100%;display:flex;align-items:center;gap:8px;
  padding:3px 4px 2px;pointer-events:none}
.sidebar .proj-progress{height:3px;background:rgba(255,255,255,.09)}
.sidebar .proj-prog-pct{font-size:10px;font-weight:600;flex-shrink:0;min-width:26px;
  text-align:left;color:rgba(235,235,245,.4)}
.sidebar .proj-prog-pct.done{color:#30D158}
/* section label — quieter */
.sidebar .sb-sec{padding:16px 16px 8px;font-size:10.5px;letter-spacing:1px;opacity:.8}
/* + new project — softer */
.sidebar .add-proj-btn{border-radius:12px;padding:9px 12px}
/* bottom menu — each item a clean, evenly-spaced row with a contained icon */
.sidebar .sb-bot{gap:1px;padding:10px 8px 16px}
.sidebar .sb-btn{padding:10px 12px;border-radius:12px;font-size:14.5px;font-weight:500;gap:12px}
.sidebar .sb-btn-icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;border-radius:8px;background:rgba(255,255,255,.05);flex-shrink:0}
.sidebar .sb-btn:hover .sb-btn-icon{background:rgba(255,255,255,.1)}
.sidebar .sb-btn.active{background:rgba(255,255,255,.08)}
/* header — a touch more breathing room */
.sidebar .sb-head{padding:22px 16px 16px}

/* ═══ Bookkeeping — grouped business-context card + tidy actions ═══ */
.bk-context{background:var(--gray6);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:13px 13px 14px;margin-bottom:16px}
body.dark .bk-context{background:var(--elev2)}
.bk-ctx-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px;margin:0 2px 9px}
.bk-context .bk-copy-row{margin-bottom:0}
.bk-context .bk-copy-chip{border-radius:12px;background:var(--card)}
body.dark .bk-context .bk-copy-chip{background:var(--elev3)}
.bk-context .bk-edit-btn{width:38px;height:38px;border-radius:12px}
/* receipt target + business switcher, inside the same card */
.bk-context .bk-biz-target{margin:14px 2px 9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.bk-context .biz-switch{display:flex;flex-wrap:wrap;gap:8px;padding:0}
.bk-context .biz-chip{border-radius:var(--r-pill);padding:8px 15px;font-size:13px}
/* the two big add buttons — a cohesive, equal pair */
.bk-add-btns{gap:10px;margin:2px 0 16px}
.bk-add-btns .bk-camera-btn{border-radius:14px;padding:15px 12px;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.bk-add-btns .bk-camera-btn:active{transform:scale(.97)}

/* ═══ 80/20 — task return control + focus board ═══ */
/* the return control lives in the expanded card; hidden while collapsed on mobile */
.tvalue{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
@media(max-width:600px){ .tcard:not(.expanded) .tvalue{display:none} }
.tval-lbl{font-size:11px;font-weight:600;color:var(--muted);margin-inline-end:2px}
.tval-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--border2);
  background:var(--card);font-size:16px;line-height:1;cursor:pointer;padding:0;
  filter:grayscale(1) opacity(.45);transition:filter var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tval-btn:active{transform:scale(.9)}
.tval-btn.on{filter:none;border-width:2px}
.tval-btn.on.val-money{border-color:#34C759;background:rgba(52,199,89,.12)}
.tval-btn.on.val-growth{border-color:#0A84FF;background:rgba(10,132,255,.12)}
.tval-btn.on.val-joy{border-color:#FF375F;background:rgba(255,55,95,.12)}
.tval-size{min-width:30px;height:30px;border-radius:9px;border:1px dashed var(--border2);
  background:none;color:var(--text2);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.tval-amt{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:var(--muted);font-weight:600}
.tval-amt-in{width:76px;padding:6px 8px;border-radius:9px;border:1px solid var(--border2);
  background:var(--card);color:var(--text);font-size:13px;font-family:inherit}
body.dark .tval-btn,body.dark .tval-amt-in{background:var(--elev2)}
.tval-decay{font-size:11px;font-weight:700;color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);
  padding:2px 7px;border-radius:var(--r-pill)}

/* focus board rows */
#impactBody{padding-top:6px}
.imp-sec-lbl{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin:16px 2px 9px}
.imp-sec-lbl:first-child{margin-top:2px}
.imp-sec-lbl.gold{color:var(--gold);font-size:13px}
.imp-row{display:flex;align-items:center;gap:11px;padding:12px 13px;margin-bottom:8px;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
body.dark .imp-row{background:var(--elev1)}
.imp-row:active{transform:scale(.99)}
.imp-row.vital{border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,var(--card));box-shadow:0 4px 18px rgba(184,150,62,.14)}
body.dark .imp-row.vital{background:color-mix(in srgb,var(--gold) 12%,var(--elev1))}
.imp-ic{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--gray6)}
body.dark .imp-ic{background:var(--elev3)}
.imp-ic.val-money{background:rgba(52,199,89,.14)}
.imp-ic.val-growth{background:rgba(10,132,255,.14)}
.imp-ic.val-joy{background:rgba(255,55,95,.14)}
.imp-main{flex:1;min-width:0}
.imp-name{font-size:15px;font-weight:600;color:var(--text);white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.imp-meta{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.imp-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.imp-amt{font-size:14px;font-weight:800;color:var(--text)}
.imp-decay{font-size:11px;font-weight:700;color:var(--red)}
.imp-empty{text-align:center;color:var(--muted);font-size:14px;line-height:1.7;padding:26px 10px}
.imp-row.untagged{cursor:default;background:transparent;border-style:dashed}
.imp-tagbtns{display:flex;gap:6px;flex-shrink:0}
.imp-tagbtns .tval-btn{width:34px;height:34px}

/* ═══════════════════════════════════════════════════════════════
   LUXURY LAYER — Apple / Mac / Tesla ambience
   1 aurora mesh · 4 breathing glow · 8 gold frame ·
   13 daily quote · 14 win celebration · 18 count-up (JS)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Aurora mesh — soft drifting colour field behind everything ── */
.aurora-mesh{position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(120,160,255,.16), transparent 60%),
    radial-gradient(45% 45% at 82% 18%, rgba(216,180,120,.13), transparent 60%),
    radial-gradient(50% 50% at 72% 82%, rgba(200,140,255,.14), transparent 60%),
    radial-gradient(42% 42% at 22% 86%, rgba(120,220,200,.12), transparent 60%);
  filter:blur(38px);opacity:.7;will-change:transform;
  animation:auroraShift 46s ease-in-out infinite alternate}
@keyframes auroraShift{
  from{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}
  to{transform:translate3d(3%,2%,0) scale(1.16) rotate(6deg)}}
body.dark .aurora-mesh{opacity:.5}
@media(prefers-reduced-motion:reduce){.aurora-mesh{animation:none}}

/* ── 4 · Breathing glow behind the featured "most important" card ── */
.top-task-card{position:relative;isolation:isolate}
.top-task-card::before{content:'';position:absolute;inset:-11px;border-radius:20px;z-index:-1;
  background:radial-gradient(60% 130% at 50% 0%, rgba(255,213,10,.28), transparent 70%);
  filter:blur(15px);animation:featGlow 3.6s ease-in-out infinite}
@keyframes featGlow{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:.85;transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.top-task-card::before{animation:none;opacity:.5}}

/* ── 8 · Gold gradient frame on premium surfaces (rounded-safe mask ring) ── */
.top-task-card::after, .imp-row.vital::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:var(--gold-grad);opacity:.75;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:opacity var(--t-med) var(--ease)}
.imp-row.vital{position:relative}
@media(hover:hover){.top-task-card:hover::after,.imp-row.vital:hover::after{opacity:1}}

/* ── 13 · Daily inspirational quote — quiet glass strip ── */
.daily-quote{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:11px 15px;
  border-radius:var(--r-lg);background:var(--glass-bg);border:1px solid var(--border);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:13.5px;line-height:1.55;color:var(--text2);font-style:italic;cursor:pointer;
  animation:dqIn .5s var(--ease) both;transition:opacity .26s var(--ease)}
.daily-quote .dq-mark{color:var(--gold);font-style:normal;font-size:15px;flex-shrink:0}
.daily-quote .dq-text{font-weight:500}
@keyframes dqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 14 · Cinematic win — gold flash + spark burst ── */
.win-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(circle at 50% 44%, rgba(255,213,10,.26), transparent 55%);
  animation:winFlash .72s ease-out forwards}
@keyframes winFlash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
.win-spark{position:fixed;z-index:9999;width:9px;height:9px;border-radius:2px;pointer-events:none;
  background:var(--gold);box-shadow:0 0 8px rgba(255,213,10,.85);
  animation:winSpark 1.05s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes winSpark{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(220deg)}}

/* ═══════════════════════════════════════════════════════════════
   LUXURY LAYER II — blueprint grid (2) · sacred geometry (4) ·
   particle splash (8) · scroll parallax (9) · 3D tilt (10) ·
   living nav icons (13) · keynote titles (14)
   ═══════════════════════════════════════════════════════════════ */

/* ── 2 · Tesla blueprint grid — barely-there engineered grid ── */
.blueprint-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:46px 46px;opacity:.028;
  -webkit-mask:radial-gradient(125% 90% at 50% 0%,#000 42%,transparent 100%);
          mask:radial-gradient(125% 90% at 50% 0%,#000 42%,transparent 100%)}
body:not(.dark) .blueprint-grid{opacity:.04;
  background-image:linear-gradient(rgba(0,50,110,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,50,110,.6) 1px,transparent 1px)}

/* ── 4 · Sacred geometry — slow-turning seed-of-life ornament ── */
.sacred-ornament{position:absolute;width:min(72vw,440px);height:min(72vw,440px);
  top:-9%;left:-13%;color:var(--accent);opacity:.05;pointer-events:none;
  animation:sacredSpin 140s linear infinite}
body.dark .sacred-ornament{opacity:.06;color:#8AA0FF}
@keyframes sacredSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sacred-ornament{animation:none}}

/* ── 8 · Particle splash — dots converge inward as the logo lands ── */
.splash-particles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.sp-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 7px rgba(0,122,255,.7);opacity:0;
  animation:spConverge 1.15s ease-out forwards}
@keyframes spConverge{
  0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.35)}
  28%{opacity:1}
  100%{opacity:0;transform:translate(0,0) scale(1)}}

/* ── 9 · parallax handled in JS (translate on #ambient); nothing needed here ── */

/* ── 10 · 3D tilt-to-touch on the featured card ── */
.tilt-3d{transition:transform .32s var(--ease);will-change:transform;transform-style:preserve-3d}
.tilt-3d.tilting{transition:transform .05s linear;filter:brightness(1.06)}

/* ── 13 · Living bottom-nav icons — a little pop when a tab is selected ── */
.bot-nav-btn.active .bot-nav-ic{animation:navPop .42s var(--ease-spring)}
@keyframes navPop{0%{transform:scale(1)}42%{transform:scale(1.22)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bot-nav-btn.active .bot-nav-ic{animation:none}}

/* ── 14 · Cinematic keynote titles — big, airy, precise ── */
.topbar:not(.scrolled) .topbar-t{font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.12}
.mhead h2{font-size:20px;font-weight:800;letter-spacing:-.4px}

/* ═══ Bookkeeping card — refined iOS-style detail rows + icon actions ═══ */
.bk-fields{display:flex;flex-direction:column;gap:8px}
.bk-field{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 11px;border-radius:14px;background:var(--card);border:1px solid var(--border2);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
body.dark .bk-field{background:var(--elev3)}
.bk-field:active{transform:scale(.99)}
@media(hover:hover){.bk-field:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}}
.bk-field-k{flex-shrink:0;min-width:42px;text-align:center;font-size:11px;font-weight:700;
  color:var(--muted);padding:4px 9px;border-radius:var(--r-pill);background:var(--gray6)}
body.dark .bk-field-k{background:rgba(255,255,255,.06)}
.bk-field-v{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-field-ic{flex-shrink:0;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:none;background:none;color:var(--muted);cursor:pointer;padding:0;font-family:inherit;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.bk-field .bk-copy-ic{color:var(--accent)}
@media(hover:hover){.bk-field:hover .bk-copy-ic{background:color-mix(in srgb,var(--accent) 12%,transparent)}}
.bk-edit-ic:active{transform:scale(.9)}
@media(hover:hover){.bk-edit-ic:hover{background:rgba(120,120,128,.14);color:var(--text)}}
.bk-add-btns .bk-camera-btn svg{margin-inline-end:2px;flex-shrink:0}

/* ═══ Contacts card — iOS-Contacts style: initials avatar + stage dot + SVG actions ═══ */
.ct-row{gap:12px;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--border)}
body.dark .ct-row{background:var(--elev1)}
@media(hover:hover){.ct-row:hover{border-color:var(--border2)}}
.ct-av{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:hsl(var(--avh,210),58%,50%);color:#fff;font-weight:700;font-size:16px;letter-spacing:.3px;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.12)}
.ct-av-stage{position:absolute;bottom:-1px;inset-inline-start:-1px;width:13px;height:13px;border-radius:50%;
  border:2.5px solid var(--card)}
body.dark .ct-av-stage{border-color:var(--elev1)}
.ct-name{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.ct-phone{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.ct-fu-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.ct-fu-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);flex-shrink:0}
.ct-fu-chip.due{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.ct-actions{gap:8px}
.ct-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);background:var(--card)}
body.dark .ct-btn{background:var(--elev3)}
.ct-btn.call{color:var(--accent);background:var(--card);border-color:var(--border2)}
body.dark .ct-btn.call{background:var(--elev3)}
.ct-btn.wa{color:#25D366;background:var(--card);border-color:var(--border2)}
body.dark .ct-btn.wa{background:var(--elev3)}
@media(hover:hover){
  .ct-btn.call:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:transparent}
  .ct-btn.wa:hover{background:rgba(37,211,102,.14);border-color:transparent}}

/* ═══ Reward store — premium: glowing theme orbs + balance chip ═══ */
.gem-bal{text-align:center;margin-bottom:18px}
.gem-bal-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--gold) 13%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
body.dark .gem-bal-chip{background:color-mix(in srgb,var(--gold) 16%,var(--elev2))}
.gem-bal-ic{font-size:20px;line-height:1}
.gem-bal-num{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.gem-bal-lbl{font-size:13px;color:var(--muted);font-weight:600}
.gem-grid{gap:12px}
.gem-card{gap:11px;padding:16px 10px;border-radius:var(--r-lg)}
body.dark .gem-card{background:var(--elev1)}
/* glowing gradient orb swatch */
.gem-swatch{position:relative;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb,#fff 55%,var(--sc)), var(--sc) 72%);
  box-shadow:0 9px 24px -7px var(--sc), inset 0 -6px 12px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center}
.gem-card.disabled .gem-swatch{box-shadow:inset 0 -6px 12px rgba(0,0,0,.18);filter:saturate(.55)}
.gem-swatch-check{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* selected → ring + badge in the theme's own colour */
.gem-card.selected{border-color:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 22%,transparent)}
.gem-badge.sel{background:var(--sc);color:#fff}

/* ═══ Boss mode + Weekly report — unified premium stat cards ═══ */
.boss-grid{gap:9px}
.boss-tile{padding:14px 6px 12px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; gap:7px}
body.dark .boss-tile{background:var(--elev1)}
.boss-tile-ic{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; background:color-mix(in srgb,var(--c) 15%,transparent); color:var(--c)}
.boss-tile-v{font-size:22px; font-weight:800; color:var(--text); line-height:1; letter-spacing:-.5px}
.boss-tile-l{font-size:11px; color:var(--muted)}
/* boss hero + sparkline */
body.dark .boss-hero{background:linear-gradient(160deg,rgba(124,179,66,.16),rgba(56,142,60,.05)),var(--elev1)}
.boss-spark{border-radius:var(--r-lg); gap:6px}
body.dark .boss-spark{background:var(--elev1)}
.boss-bar{border-radius:6px 6px 2px 2px}
.boss-sec{font-size:13px; font-weight:700; color:var(--text2)}
/* weekly report stats — same language as the boss tiles */
.rep-stat{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 8px}
body.dark .rep-stat{background:var(--elev1)}
.rep-stat .rs-num{font-size:26px}
.rep-section-title{font-size:12.5px; font-weight:700; color:var(--muted)}

/* ═══ "One more task" — smart split button + closing-bell ritual ═══ */
.tsplit-btn{width:100%; margin-top:1px; padding:10px; border-radius:12px; border:1px dashed var(--border2);
  background:none; color:var(--accent); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.tsplit-btn:active{transform:scale(.99)}
@media(hover:hover){.tsplit-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}}
@media(max-width:600px){ .tcard:not(.expanded) .tsplit-btn{display:none} }

.cbell-box{width:380px; max-width:92vw; text-align:center; overflow:hidden}
.cbell-head{padding:24px 20px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(124,92,255,.16),transparent)}
.cbell-moon{font-size:40px; line-height:1; margin-bottom:6px}
.cbell-head h2{font-size:22px; font-weight:800; letter-spacing:-.4px}
.cbell-head p{font-size:13px; color:var(--muted); margin-top:3px}
.cbell-win{margin:6px auto 14px; display:flex; flex-direction:column; align-items:center; gap:2px}
.cbell-win-num{font-size:46px; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1}
.cbell-win-lbl{font-size:13px; color:var(--muted)}
.cbell-line{font-size:14.5px; color:var(--text2); line-height:1.6; margin:0 auto 8px; max-width:280px}
.cbell-line b{color:var(--text); font-weight:800}
.cbell-tsec{font-size:12px; font-weight:700; color:var(--muted); margin:14px 0 8px}
.cbell-titem{font-size:14px; color:var(--text); padding:5px 0}
.cbell-foot{flex-direction:column; gap:8px}
.cbell-foot .btn-primary, .cbell-foot .btn-ghost{width:100%}

/* ═══════════════════════════════════════════════════════════════
   LUXURY TEXTURES — film grain (1) · guilloché (8) · gold foil (15) ·
   vignette (19) · shimmer sweep (20)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · film grain — subtle material noise across the backdrop ── */
.film-grain{position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
body.dark .film-grain{opacity:.055; mix-blend-mode:screen}
@media(prefers-reduced-transparency:reduce){.film-grain{display:none}}

/* ── 19 · cinematic vignette over the content ── */
.vignette{position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(125% 118% at 50% 50%, transparent 76%, rgba(0,0,0,.11) 100%)}
body:not(.dark) .vignette{background:radial-gradient(125% 118% at 50% 50%, transparent 80%, rgba(0,0,0,.05) 100%)}

/* ── 8 + 15 · hero card: guilloché engine-turn + tilt-following gold foil ── */
.top-task-card{
  background:
    radial-gradient(150px circle at var(--gx,50%) var(--gy,38%), rgba(231,199,103,.16), transparent 62%),
    repeating-radial-gradient(circle at 26% 24%, transparent 0 3px, rgba(231,199,103,.04) 3px 4px),
    repeating-radial-gradient(circle at 76% 72%, transparent 0 3px, rgba(231,199,103,.032) 3px 4px),
    linear-gradient(135deg,#1C1C1E,#2C2C2E)}
.top-task-card.tilt-3d{transition:transform .32s var(--ease), background-position .1s linear}

/* ── 8 · guilloché also on premium chips / hero panels (very faint) ── */
.gem-bal-chip, .boss-hero{position:relative; overflow:hidden}
.gem-bal-chip{background-image:
    repeating-radial-gradient(circle at 30% 40%, transparent 0 3px, rgba(231,199,103,.05) 3px 4px),
    linear-gradient(color-mix(in srgb,var(--gold) 13%,var(--card)),color-mix(in srgb,var(--gold) 13%,var(--card)))}
body.dark .gem-bal-chip{background-image:
    repeating-radial-gradient(circle at 30% 40%, transparent 0 3px, rgba(231,199,103,.06) 3px 4px),
    linear-gradient(color-mix(in srgb,var(--gold) 16%,var(--elev2)),color-mix(in srgb,var(--gold) 16%,var(--elev2)))}

/* ── 20 · shimmer sweep — a light runs once across premium cards ── */
@keyframes luxSweep{from{transform:translateX(-160%) skewX(-18deg)} to{transform:translateX(320%) skewX(-18deg)}}
.imp-row.vital{overflow:hidden}
.imp-row.vital::before{content:''; position:absolute; top:0; bottom:0; width:55%; left:0; pointer-events:none; z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);
  animation:luxSweep 1.5s var(--ease) .25s 1 both}
.gem-bal-chip::after{content:''; position:absolute; top:0; bottom:0; width:45%; left:0; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.24),transparent);
  animation:luxSweep 1.7s var(--ease) .35s 1 both}
@media(prefers-reduced-motion:reduce){.imp-row.vital::before,.gem-bal-chip::after{animation:none; display:none}}

/* ═══ Wave 2 — 11 holographic foil · 17 project ring gauges ═══ */
/* 17 · Apple-Watch-style project progress ring (replaces the linear bar) */
.proj-ring{flex-shrink:0; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center}
.proj-ring svg{transform:rotate(-90deg)}
.proj-ring .pr-bg{fill:none; stroke:rgba(255,255,255,.14); stroke-width:2.6}
.proj-ring .pr-fg{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round;
  transition:stroke-dashoffset .55s var(--ease)}
.proj-ring.done .pr-fg{stroke:#30D158}

/* 11 · holographic foil on the hero card — gold→blue→violet oil-slick that
   shifts with tilt (--gx/--gy set by the 3D-tilt handler) */
.top-task-card, body.dark .top-task-card{
  background:
    radial-gradient(175px circle at var(--gx,50%) var(--gy,38%),
      rgba(255,222,140,.20), rgba(150,200,255,.08) 38%, rgba(200,150,255,.05) 55%, transparent 66%),
    repeating-radial-gradient(circle at 26% 24%, transparent 0 3px, rgba(231,199,103,.045) 3px 4px),
    repeating-radial-gradient(circle at 76% 72%, transparent 0 3px, rgba(231,199,103,.035) 3px 4px),
    linear-gradient(135deg,#151517,#242426)}

/* 11 · holographic sheen on the selected reward theme */
.gem-card.selected{background-image:
  linear-gradient(120deg, rgba(255,220,140,.10), rgba(150,200,255,.09) 42%, rgba(200,150,255,.09) 60%, transparent),
  linear-gradient(var(--card),var(--card))}
body.dark .gem-card.selected{background-image:
  linear-gradient(120deg, rgba(255,220,140,.13), rgba(150,200,255,.11) 42%, rgba(200,150,255,.11) 60%, transparent),
  linear-gradient(var(--elev1),var(--elev1))}

/* ═══════════════════════════════════════════════════════════════
   COCKPIT — home dashboard (15) · living Business Twin (19) · Time Machine (20)
   ═══════════════════════════════════════════════════════════════ */
.cockpit-box{width:440px; max-width:94vw}
/* Business Twin hero */
.cock-twin-hero{display:flex; align-items:center; gap:16px; padding:16px; margin-bottom:16px;
  border-radius:var(--r-xl); background:var(--gray6); border:1px solid var(--border)}
body.dark .cock-twin-hero{background:var(--elev2)}
.twin{position:relative; flex-shrink:0; width:128px; height:128px; display:flex; align-items:center; justify-content:center}
.twin-halo{position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--tc) 45%,transparent), transparent 70%);
  filter:blur(10px); animation:twinPulse 3.2s ease-in-out infinite}
@keyframes twinPulse{0%,100%{opacity:.5; transform:scale(.94)}50%{opacity:.9; transform:scale(1.06)}}
.twin svg{position:relative; animation:twinBob 4s ease-in-out infinite}
@keyframes twinBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
.twin-body{fill:var(--tc); filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--tc) 45%,transparent))}
.twin-body{stroke:rgba(255,255,255,.25); stroke-width:1}
.twin-eye{fill:#fff}
.twin-mouth{fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round}
.cock-twin-txt{flex:1; min-width:0}
.cock-twin-mood{font-size:17px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:9px}
.cock-mom-bar{height:8px; border-radius:var(--r-pill); background:rgba(120,120,128,.2); overflow:hidden}
.cock-mom-fill{height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 60%,#fff));
  transition:width .9s var(--ease)}
.cock-mom-lbl{font-size:12.5px; color:var(--muted); margin-top:7px}
.cock-mom-lbl b{color:var(--text)}
/* key stats — 2×2 grid */
.cock-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px}
.cock-stat{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; text-align:center}
body.dark .cock-stat{background:var(--elev1)}
.cock-stat-v{font-size:23px; font-weight:800; letter-spacing:-.5px; line-height:1}
.cock-stat-l{font-size:11.5px; color:var(--muted); margin-top:6px}
/* section titles */
.cock-sec{font-size:13.5px; font-weight:700; color:var(--text2); margin:18px 0 10px}
/* today's 3 moves */
.cock-task{display:flex; align-items:center; gap:12px; padding:12px 13px; margin-bottom:8px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
body.dark .cock-task{background:var(--elev1)}
.cock-task:active{transform:scale(.99)}
.cock-task-n{flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#fff))}
.cock-task-name{flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cock-task-go{flex-shrink:0; color:var(--gray2); font-size:20px}
.cock-empty{text-align:center; color:var(--muted); font-size:14px; padding:16px}
/* Time Machine */
.cock-tm-tabs{display:flex; gap:6px; padding:4px; background:rgba(120,120,128,.12); border-radius:var(--r-lg); margin-bottom:12px}
body.dark .cock-tm-tabs{background:rgba(255,255,255,.06)}
.cock-tm-tab{flex:1; padding:9px 4px; border:none; background:none; border-radius:var(--r); font-family:inherit;
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:all var(--t-fast) var(--ease)}
.cock-tm-tab.active{background:var(--card); color:var(--text); box-shadow:0 1px 5px rgba(0,0,0,.12)}
body.dark .cock-tm-tab.active{background:var(--elev3)}
.cock-tm-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.cock-tm-cell{background:color-mix(in srgb,var(--accent) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:var(--r-lg); padding:15px 8px; text-align:center}
body.dark .cock-tm-cell{background:color-mix(in srgb,var(--accent) 12%,var(--elev1))}
.cock-tm-v{font-size:20px; font-weight:800; color:var(--accent); letter-spacing:-.5px; line-height:1}
.cock-tm-l{font-size:11px; color:var(--muted); margin-top:6px; line-height:1.3}

/* ══ DEBT LEDGER — כרטסת חייבים ═══════════════════════════════ */
/* offer chip — floats above the bottom nav after completing a task */
.debt-chip{position:fixed; bottom:86px; left:50%; transform:translate(-50%,16px); z-index:2600;
  display:flex; align-items:center; gap:6px; padding:11px 18px; border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--text);
  background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-brd); border-radius:var(--r-pill); box-shadow:0 8px 28px rgba(0,0,0,.18);
  opacity:0; transition:opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring)}
.debt-chip.show{opacity:1; transform:translate(-50%,0)}
.debt-chip b{color:var(--accent); font-weight:700}
.debt-chip-remind b{color:#FF9F0A}
@media(min-width:601px){.debt-chip{bottom:30px}}

/* the "paid work?" sheet */
.debt-sheet{width:400px; max-width:94vw}
.debt-taskname{font-size:14.5px; font-weight:600; color:var(--text); background:color-mix(in srgb,var(--green) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent); border-radius:var(--r-lg); padding:11px 13px; margin-bottom:12px;
  overflow-wrap:anywhere}
.debt-sheet .f-label{margin-top:10px}
.debt-sheet-foot{flex-wrap:wrap}
.debt-wa-btn{background:#25D366}

/* ledger screen */
.debts-box{width:460px; max-width:95vw}
.debt-empty{text-align:center; color:var(--text); font-size:16px; font-weight:600; padding:38px 16px; line-height:1.5}
.debt-empty span{display:block; margin-top:8px; font-size:13px; font-weight:400; color:var(--muted)}
.debt-totals{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.debt-total{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; text-align:center}
body.dark .debt-total{background:var(--elev1)}
.debt-total-v{font-size:22px; font-weight:800; letter-spacing:-.5px; line-height:1}
.debt-total-l{font-size:11.5px; color:var(--muted); margin-top:6px}
.debt-remind-strip{font-size:12.5px; font-weight:600; color:#B25F00; background:color-mix(in srgb,#FF9F0A 13%,var(--card));
  border:1px solid color-mix(in srgb,#FF9F0A 32%,transparent); border-radius:var(--r-lg); padding:10px 13px; margin-bottom:12px}
body.dark .debt-remind-strip{color:#FFB84D}
.debt-client{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:6px 13px; margin-bottom:10px}
body.dark .debt-client{background:var(--elev1)}
.debt-client-head{display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 0; -webkit-tap-highlight-color:transparent}
.debt-cli-chev{flex-shrink:0; font-size:17px; color:var(--muted); line-height:1; transition:transform .22s var(--ease-out,ease); display:inline-block}
.debt-client.open .debt-cli-chev{transform:rotate(90deg)}
.debt-cli-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.debt-client-name{font-size:15.5px; font-weight:700; color:var(--text); overflow-wrap:anywhere}
.debt-cli-meta{font-size:11px; color:var(--muted)}
.debt-client-sum{font-size:16px; font-weight:800; color:#FF9F0A; flex-shrink:0}
.debt-client-sum.ok{color:var(--green); font-size:13px}
/* quick-settle pill on the collapsed row */
.debt-settle{flex-shrink:0; border:1px solid color-mix(in srgb,var(--green) 45%,transparent);
  background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green);
  font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:10px; cursor:pointer; white-space:nowrap; transition:transform .12s}
.debt-settle:active{transform:scale(.94)}
.debt-client-body{padding-top:2px; animation:debt-exp .22s var(--ease-out,ease)}
@keyframes debt-exp{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}
.debt-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--border)}
.debt-row.paid{opacity:.55}
.debt-row-main{flex:1; min-width:0}
.debt-row-task{font-size:13.5px; font-weight:500; color:var(--text); overflow-wrap:anywhere}
.debt-late{font-size:12px}
.debt-row-date{font-size:11.5px; color:var(--muted); margin-top:2px}
.debt-row-amt{font-size:14px; font-weight:700; color:var(--text); flex-shrink:0}
.debt-status{flex-shrink:0; border:1px solid color-mix(in srgb,#FF9F0A 45%,transparent); background:color-mix(in srgb,#FF9F0A 12%,transparent);
  color:#B25F00; font-family:inherit; font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:var(--r-pill); cursor:pointer;
  transition:all var(--t-fast) var(--ease-out)}
body.dark .debt-status{color:#FFB84D}
.debt-status.paid{border-color:color-mix(in srgb,var(--green) 45%,transparent); background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green)}
.debt-mini{flex-shrink:0; border:none; background:none; font-family:inherit; font-size:14px; cursor:pointer; padding:5px; border-radius:8px; color:var(--muted)}
.debt-mini:active{transform:scale(.92)}
.debt-del{font-size:12px}
.debt-client-actions{display:flex; gap:8px; margin-top:10px}
.debt-act{flex:1; min-width:0; border:none; background:#25D366; color:#fff; font-family:inherit; font-size:13px; font-weight:700; white-space:nowrap;
  padding:10px 12px; border-radius:var(--r-lg); cursor:pointer; transition:transform var(--t-fast) var(--ease-out)}
.debt-act:active{transform:scale(.98)}
.debt-act.ghost{background:none; border:1px solid var(--border2); color:var(--text2)}
.debt-paynote{font-size:12px; color:var(--muted); background:rgba(120,120,128,.08); border-radius:var(--r-lg);
  padding:10px 13px; margin-top:4px; cursor:pointer; line-height:1.45; overflow-wrap:anywhere}
body.dark .debt-paynote{background:rgba(255,255,255,.05)}

/* ══ LUXURY WAVE 4 — sb-groups · carbon · topo · monogram · PTR · morph ══ */
/* idea 9 — collapsible sidebar sections */
.sb-group{margin-bottom:2px}
.sb-group-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--smuted);
  padding:10px 14px 6px; text-align:right}
.sb-group-chev{display:inline-block; font-size:15px; line-height:1; transition:transform var(--t-med) var(--ease-out); transform:rotate(90deg)}
.sb-group.closed .sb-group-chev{transform:rotate(0deg)}
.sb-group-body{overflow:hidden; max-height:400px; transition:max-height var(--t-slow) var(--ease-out), opacity var(--t-med) var(--ease-out); opacity:1}
.sb-group.closed .sb-group-body{max-height:0; opacity:0}

/* idea 12 — carbon-fiber weave on the cockpit header */
.cockpit-box .mhead{
  background-color:#141518;
  background-image:
    linear-gradient(27deg,#17181c 5px,transparent 5px),
    linear-gradient(207deg,#17181c 5px,transparent 5px),
    linear-gradient(27deg,#0f1013 5px,transparent 5px),
    linear-gradient(207deg,#0f1013 5px,transparent 5px),
    linear-gradient(90deg,#131417,#1a1b20);
  background-size:10px 10px,10px 10px,10px 10px,10px 10px,100% 100%;
  background-position:0 0,5px 5px,5px 0,0 5px,0 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.cockpit-box .mhead h2{color:#fff}
.cockpit-box .mhead p{color:rgba(235,235,245,.62)}

/* idea 13 — topographic contour lines, breathing behind everything */
.topo-lines{position:absolute; inset:-10%; pointer-events:none; opacity:.05; color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23808089' stroke-width='1'%3E%3Cpath d='M40 200q30-60 90-55t85 40 90 30 80-45'/%3E%3Cpath d='M30 230q40-70 105-62t90 45 85 25 75-50'/%3E%3Cpath d='M20 260q50-80 120-70t95 50 80 20 70-55'/%3E%3Cpath d='M55 175q25-45 75-42t75 33 80 25 70-38'/%3E%3Cpath d='M75 150q20-32 60-30t65 26 70 20 58-28'/%3E%3Cpath d='M95 128q15-22 45-21t55 20 60 15 46-20'/%3E%3C/svg%3E");
  background-size:520px 520px; background-repeat:repeat}
body.dark .topo-lines{opacity:.07}

/* idea 14 — faded monogram seal on empty screens */
.empty{position:relative; overflow:hidden}
.empty::before{content:'T'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:min(240px,60vw); font-weight:800; letter-spacing:-.04em; color:var(--text); opacity:.035; pointer-events:none;
  font-family:inherit; line-height:1}
.debt-empty{position:relative; overflow:hidden}
.debt-empty::before{content:'₪'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:170px; font-weight:800; color:var(--text); opacity:.04; pointer-events:none; line-height:1}

/* idea 19 — icon morph micro-spring */
@keyframes icMorph{
  0%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.35) rotate(-8deg)}
  65%{transform:scale(.92) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.ic-morph{animation:icMorph .45s var(--ease-spring); display:inline-block}

/* idea 18 — pull-to-refresh breathing logo */
.ptr-ind{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; z-index:2700;
  transform:translate(-50%,-70px) scale(calc(.5 + .5*var(--p,0))); opacity:0; pointer-events:none;
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-brd); box-shadow:0 8px 28px rgba(0,0,0,.2);
  transition:opacity .15s ease}
.ptr-ind.show{opacity:calc(.35 + .65*var(--p,0)); transform:translate(-50%,calc(-70px + 84px*var(--p,0))) scale(calc(.5 + .5*var(--p,0)))}
.ptr-logo{width:30px; height:30px; border-radius:8px; animation:ptrBreathe 1.6s ease-in-out infinite}
.ptr-ind.armed{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.ptr-ind.spin .ptr-logo{animation:ptrSpin .65s var(--ease-out) infinite}
@keyframes ptrBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ptr-logo{animation:none}.ic-morph{animation:none}}

/* ══ DEBT LEDGER FOLLOW-UPS — smart guess · gold cheque · month-end ══ */
/* idea 2 — auto-picked client hint */
.ds-guess-hint{font-size:11.5px; color:var(--accent); margin-top:5px; font-weight:600}

/* idea 6 — the row folds like a gold-foil cheque when marked paid */
.debt-paying{
  transform-origin:50% 0; overflow:hidden; position:relative;
  background:var(--gold-grad)!important; border-radius:12px;
  animation:debtFold .62s cubic-bezier(.55,0,.55,1) forwards}
.debt-paying *{color:#3a2c07!important}
.debt-paying::after{content:''; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);
  animation:luxSweep .6s ease-out forwards}
@keyframes debtFold{
  0%{transform:perspective(600px) rotateX(0); opacity:1; max-height:80px}
  45%{transform:perspective(600px) rotateX(-24deg); opacity:1}
  100%{transform:perspective(600px) rotateX(-86deg); opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin:0}
}
.debt-fly{position:fixed; z-index:2800; font-size:24px; pointer-events:none;
  transition:transform .7s cubic-bezier(.32,1,.44,1), opacity .7s ease}

/* idea 11 — month-end statement round */
.debt-eom-strip{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:var(--text);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 14%,var(--card)),color-mix(in srgb,var(--gold-2) 8%,var(--card)));
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
  border-radius:var(--r-lg); padding:11px 13px; margin-bottom:12px}
.debt-eom-go{border:none; background:var(--gold-grad); color:#3a2c07; font-family:inherit; font-size:12px; font-weight:800;
  padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; margin-inline-start:auto;
  transition:transform var(--t-fast) var(--ease-out)}
.debt-eom-go:active{transform:scale(.96)}
.debt-eom-skip{border:none; background:none; color:var(--muted); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:8px 6px}
.debt-eom-prog{flex-shrink:0; font-size:11px; font-weight:800; color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-radius:var(--r-pill); padding:4px 9px}
.debt-eom-name{font-size:13.5px; font-weight:700; overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.debt-paying{animation:none}.debt-paying::after{animation:none}}

/* ══ DEBT LEDGER — manual add · grand total · business badge · edit ══ */
.debt-add-btn{width:100%; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--accent); font-family:inherit; font-size:14px; font-weight:700; padding:12px; border-radius:var(--r-lg); cursor:pointer;
  margin-bottom:12px; transition:transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out)}
.debt-add-btn:active{transform:scale(.99)}
body.dark .debt-add-btn{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* grand total headline */
.debt-grand{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--gold-grad); color:#3a2c07; border-radius:var(--r-lg); padding:13px 16px; margin-bottom:12px;
  box-shadow:0 6px 20px rgba(184,150,62,.28)}
.debt-grand-l{font-size:13px; font-weight:700}
.debt-grand-v{font-size:22px; font-weight:800; letter-spacing:-.5px}
/* per-client business badge */
.debt-client-biz{margin:-4px 0 8px}
.debt-biz-badge{border:1px solid var(--border2); background:rgba(120,120,128,.10); color:var(--text2);
  font-family:inherit; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out)}
.debt-biz-badge:active{transform:scale(.95)}
body.dark .debt-biz-badge{background:rgba(255,255,255,.06)}
/* the row main area is now tappable to edit */
.debt-row-main{cursor:pointer}
.debt-row-date{white-space:nowrap}

/* ══ COCKPIT ⨉ BOSS MERGE — growth hero + 6-tile stats ══ */
.cock-grow{display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r-lg); margin-bottom:12px;
  background:linear-gradient(160deg,rgba(124,179,66,.12),rgba(56,142,60,.03)); border:1px solid color-mix(in srgb,var(--green) 20%,transparent)}
body.dark .cock-grow{background:linear-gradient(160deg,rgba(124,179,66,.16),rgba(56,142,60,.04))}
.cock-grow .boss-tree{flex-shrink:0}
.cock-grow-txt{flex:1; min-width:0}
.cock-grow-stage{font-size:12.5px; font-weight:800; color:var(--green); letter-spacing:.3px}
.cock-grow-sub{font-size:13.5px; color:var(--text2); margin-top:3px; overflow-wrap:anywhere}
.cock-grow-sub b{color:var(--text)}
.cock-water{font-size:12.5px; color:var(--green); font-weight:700; margin-top:6px}
.cock-water.dry{color:var(--muted); font-weight:500}
/* 6-tile stat grid on the merged dashboard */
.cock-stats-6{grid-template-columns:1fr 1fr 1fr}
@media(max-width:600px){.cock-stats-6{grid-template-columns:1fr 1fr 1fr}}

/* ══ DEBT LEDGER — follow-ups (check-in · thank-you · call reminder) ══ */
.debt-checkin{color:#30D158}
.debt-call-hint{font-size:12px; font-weight:600; color:#8E5B00; margin:-2px 0 8px;
  background:color-mix(in srgb,#FF9F0A 10%,transparent); border-radius:var(--r); padding:7px 11px; overflow-wrap:anywhere}
body.dark .debt-call-hint{color:#FFC463; background:color-mix(in srgb,#FF9F0A 14%,transparent)}

/* ══ TESLA INSTRUMENT CLUSTER — topbar stats strip ══ */
.tcluster{display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,rgba(120,120,128,.10),rgba(120,120,128,.04));
  border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 12px}
body.dark .tcluster{background:linear-gradient(180deg,#101114,#0a0b0d); border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.35)}
.tcluster .day-ring{display:none} /* the ring is replaced by the segmented gauge */
/* segmented charge-bar */
.tc-gauge{display:flex; gap:2.5px; align-items:center; flex-shrink:0; --gc:#30D158}
.tc-gauge i{width:4px; height:13px; border-radius:1.5px; background:rgba(120,120,128,.28);
  transition:background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out)}
body.dark .tc-gauge i{background:rgba(255,255,255,.10)}
.tc-gauge i.on{background:var(--gc); box-shadow:0 0 6px color-mix(in srgb,var(--gc) 65%,transparent)}
.tc-gauge.full i.on{animation:tcFull 1.6s ease-in-out infinite alternate}
@keyframes tcFull{from{box-shadow:0 0 4px color-mix(in srgb,var(--gc) 55%,transparent)}to{box-shadow:0 0 9px var(--gc)}}
/* digital readout */
.tc-read{font-size:12px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;
  letter-spacing:.02em; white-space:nowrap}
body.dark .tc-read{color:rgba(235,235,245,.92); text-shadow:0 0 8px rgba(10,132,255,.25)}
/* glowing 7-day trace */
.tc-spark{flex-shrink:0; color:var(--accent); overflow:visible}
.tc-line{stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px currentColor)}
.tc-dot{fill:currentColor; filter:drop-shadow(0 0 4px currentColor)}
/* gems chip sits flush inside the cluster */
.tcluster .topbar-gems{margin-inline-start:2px}
/* mobile: the cluster becomes a full-width instrument strip under the title */
@media(max-width:600px){
  .topbar-opts .topbar-s.tcluster{flex:1 1 100%; justify-content:space-between; order:-1; padding:7px 13px}
  .tc-spark{width:48px}
}
@media (prefers-reduced-motion:reduce){.tc-gauge.full i.on{animation:none}}

/* ══ MOBILE POLISH — modes spread · no redundant close · Tesla idle sweep ══ */
@media(max-width:600px){
  /* "מצבים" menu spreads edge-to-edge (beats the absolute/left:0 desktop rule below in specificity order) */
  .modes-wrap{position:static}
  .modes-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-width:none;transform-origin:top center}
  /* footer "סגור" buttons are redundant on mobile — bottom nav / overlay tap close windows */
  .mfoot button[data-close-btn]{display:none}
  .mfoot:not(:has(button:not([data-close-btn]))){display:none}
}
/* Tesla idle sweep — every so often the cluster does a soft self-check */
.tc-anim .tc-gauge i{animation:tcChase 1s var(--ease-out) both}
.tc-anim .tc-gauge i:nth-child(1){animation-delay:0s}.tc-anim .tc-gauge i:nth-child(2){animation-delay:.05s}
.tc-anim .tc-gauge i:nth-child(3){animation-delay:.1s}.tc-anim .tc-gauge i:nth-child(4){animation-delay:.15s}
.tc-anim .tc-gauge i:nth-child(5){animation-delay:.2s}.tc-anim .tc-gauge i:nth-child(6){animation-delay:.25s}
.tc-anim .tc-gauge i:nth-child(7){animation-delay:.3s}.tc-anim .tc-gauge i:nth-child(8){animation-delay:.35s}
@keyframes tcChase{0%,100%{filter:brightness(1)}35%{filter:brightness(1.9);box-shadow:0 0 8px color-mix(in srgb,var(--gc) 80%,transparent)}}
.tc-anim .tc-line{animation:tcTrace 1.3s ease-out both}
@keyframes tcTrace{0%{filter:drop-shadow(0 0 3px currentColor)}45%{filter:drop-shadow(0 0 7px currentColor)}100%{filter:drop-shadow(0 0 3px currentColor)}}
.tc-anim .tc-dot{animation:tcDotPing 1.3s ease-out both}
@keyframes tcDotPing{0%,100%{r:2}45%{r:3.2}}
@media (prefers-reduced-motion:reduce){.tc-anim .tc-gauge i,.tc-anim .tc-line,.tc-anim .tc-dot{animation:none}}

/* ══ NAV SLOTS · COLLAPSE HANDLE · NEW-TASK GLOW ══ */
/* emoji icons in custom nav slots match the SVG footprint */
.bot-nav-emoji{font-size:20px; line-height:24px; text-align:center}
/* settings editor rows */
.navslot-row{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.navslot-n{flex-shrink:0; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--accent)}
.navslot-sel{flex:1}
.navslot-reset{border:none; background:none; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; padding:6px 2px; margin-top:2px}
.navslot-reset:active{color:var(--accent)}
/* expanded card: the big chevron row becomes a slim sheet-style grab handle */
@media(max-width:600px){
  .tcard.expanded .tc-exp{
    order:100; flex:1 0 100%; align-self:stretch; width:auto; height:26px;
    margin:0 0 -6px; padding:0; transform:none; font-size:0; color:transparent; position:relative}
  .tcard.expanded .tc-exp::before{
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:56px; height:5px; border-radius:var(--r-pill); background:var(--border2);
    transition:background var(--t-fast) var(--ease-out), width var(--t-fast) var(--ease-out)}
  body.dark .tcard.expanded .tc-exp::before{background:rgba(255,255,255,.22)}
  .tcard.expanded .tc-exp:active::before{background:var(--accent); width:72px}
}
/* a freshly-added task glows for a moment so the eye lands on it */
.tcard.just-added{animation:taskLand 1.8s var(--ease-out) both}
@keyframes taskLand{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); transform:scale(1.012)}
  35%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent); transform:scale(1)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){.tcard.just-added{animation:none}}

/* ══ CLUSTER IDEAS 1·2·4·5 — boot · pace needle · liquid colour · odometer ══ */
/* idea 2 — tiny pace gauge (needle = today vs. daily goal) */
.tc-pace{flex-shrink:0; overflow:visible}
.tc-pace-arc{fill:none; stroke:rgba(120,120,128,.35); stroke-width:2; stroke-linecap:round}
body.dark .tc-pace-arc{stroke:rgba(255,255,255,.16)}
.tc-needle{stroke:var(--tca,#0A84FF); stroke-width:2; stroke-linecap:round; transform-origin:13px 14px;
  transform:rotate(-80deg);
  transition:transform .9s var(--ease-spring), stroke 1.6s ease;
  filter:drop-shadow(0 0 2px var(--tca,#0A84FF))}
/* idea 4 — liquid momentum colour flows through the whole cluster */
.tc-spark{color:var(--tca,#0A84FF); transition:color 1.6s ease}
.tc-gauge i{transition:background 1.6s ease, box-shadow 1.6s ease}
body.dark .tc-read{text-shadow:0 0 8px color-mix(in srgb,var(--tca,#0A84FF) 30%,transparent); transition:text-shadow 1.6s ease}
/* idea 5 — odometer digits roll in from below */
.odo-d{display:inline-block; animation:odoRoll .5s var(--ease-out)}
@keyframes odoRoll{from{transform:translateY(.55em); opacity:0; filter:blur(1px)} to{transform:none; opacity:1; filter:none}}
/* idea 1 — boot sequence: segments ignite → trace draws → dot lands → needle sweeps */
.tc-boot .tc-gauge i{opacity:0; animation:tcBootSeg .45s var(--ease-out) forwards}
.tc-boot .tc-gauge i:nth-child(1){animation-delay:.05s}.tc-boot .tc-gauge i:nth-child(2){animation-delay:.12s}
.tc-boot .tc-gauge i:nth-child(3){animation-delay:.19s}.tc-boot .tc-gauge i:nth-child(4){animation-delay:.26s}
.tc-boot .tc-gauge i:nth-child(5){animation-delay:.33s}.tc-boot .tc-gauge i:nth-child(6){animation-delay:.40s}
.tc-boot .tc-gauge i:nth-child(7){animation-delay:.47s}.tc-boot .tc-gauge i:nth-child(8){animation-delay:.54s}
@keyframes tcBootSeg{from{opacity:0; transform:scaleY(.35)} to{opacity:1; transform:scaleY(1)}}
.tc-boot .tc-line{stroke-dasharray:170; stroke-dashoffset:170; animation:tcDraw 1.05s .25s var(--ease-out) forwards}
@keyframes tcDraw{to{stroke-dashoffset:0}}
.tc-boot .tc-dot{opacity:0; animation:tcDotIn .3s 1.25s forwards}
@keyframes tcDotIn{to{opacity:1}}
.tc-boot .tc-needle{animation:tcSweep 1.25s var(--ease-out)}
@keyframes tcSweep{0%{transform:rotate(-80deg)} 55%{transform:rotate(80deg)} 100%{transform:rotate(-80deg)}}
@media (prefers-reduced-motion:reduce){
  .odo-d,.tc-boot .tc-gauge i,.tc-boot .tc-line,.tc-boot .tc-dot,.tc-boot .tc-needle{animation:none}
  .tc-boot .tc-gauge i{opacity:1}
}

/* ══ 🗺 ACTION PLAN — vision → horizons → the next concrete step ══ */
.gl-plan-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px}
body.dark .gl-plan-hero{background:linear-gradient(135deg,rgba(10,132,255,.14),var(--elev1))}
.gl-plan-hero-t{font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.2px}
.gl-plan-hero-s{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45}
.gl-plan-sec{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:16px 0 8px}
.gl-plan-sec-t{font-size:14px; font-weight:800; color:var(--text)}
.gl-plan-sec-s{font-size:11.5px; color:var(--muted)}
.gl-plan-goal{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:9px}
body.dark .gl-plan-goal{background:var(--elev1)}
.gl-plan-goal.picked{border-color:color-mix(in srgb,var(--gold) 42%,transparent)}
.gl-plan-goal.done{opacity:.62}
.gl-plan-goal-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; cursor:pointer}
.gl-plan-goal-name{font-size:14.5px; font-weight:700; color:var(--text); line-height:1.35; overflow-wrap:anywhere; white-space:normal}
.gl-plan-bar{margin-top:9px}
.gl-plan-next{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border)}
.gl-plan-check{flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--green) 55%,transparent);
  background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); font-size:15px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
  transition:transform var(--t-fast) var(--ease-spring), background var(--t-fast)}
.gl-plan-check:active{transform:scale(.9); background:var(--green); color:#fff}
.gl-plan-next-lbl{flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--muted)}
.gl-plan-next-txt{font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; line-height:1.35}
.gl-plan-add{display:flex; gap:8px; margin-top:10px}
.gl-plan-add .f-input{flex:1; font-size:13.5px}
.gl-plan-add-btn{flex-shrink:0; width:42px; padding:0; font-size:19px; border-radius:12px}
.gl-plan-empty{text-align:center; color:var(--muted); font-size:14px; line-height:1.6; padding:30px 14px}
.gl-quick-plan .gl-quick-ic{filter:drop-shadow(0 0 5px rgba(10,132,255,.45))}
/* login: the friendly "future" line */
.lfuture{font-size:13.5px; font-weight:700; color:var(--accent); margin:4px 0 10px; letter-spacing:-.1px; line-height:1.5}

/* ══ 💰 COCKPIT MONEY SPLIT + compact duo row ══ */
.cock-money{background:linear-gradient(150deg,#101114,#16171c); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); padding:14px 15px; margin-bottom:12px; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.25)}
.cm-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.cm-lbl{font-size:12.5px; font-weight:700; color:rgba(235,235,245,.66); letter-spacing:.04em}
.cm-big{font-size:27px; font-weight:800; letter-spacing:-.6px; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 0 14px rgba(48,209,88,.35)}
/* the allocation bar — segments charge up left-to-right like a battery */
.cm-bar{display:flex; gap:3px; height:10px; margin:11px 0 12px; direction:ltr}
.cm-bar i{width:var(--w); border-radius:5px; background:var(--c);
  box-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent);
  transform:scaleX(0); transform-origin:left; animation:cmSeg .5s var(--ease-out) forwards}
@keyframes cmSeg{to{transform:scaleX(1)}}
.cm-chips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.cm-chip{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  background:rgba(255,255,255,.045); border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  border-radius:13px; padding:9px 4px; opacity:0; animation:cmChipIn .45s var(--ease-spring) forwards}
@keyframes cmChipIn{from{opacity:0; transform:translateY(8px) scale(.92)} to{opacity:1; transform:none}}
.cm-chip-ic{font-size:16px; line-height:1}
.cm-chip-amt{font-size:14.5px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px color-mix(in srgb,var(--c) 40%,transparent)}
.cm-chip-l{font-size:10px; color:rgba(235,235,245,.6); line-height:1.3; overflow-wrap:anywhere}
.cm-note{font-size:11.5px; color:rgba(235,235,245,.55); margin-top:10px; text-align:center}
.cm-empty{font-size:12.5px; color:rgba(235,235,245,.6); line-height:1.5; text-align:center; padding:4px 6px 2px}
/* twin + tree — one compact row, words kept to the minimum, nothing clipped */
.cock-duo{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.cock-duo-half{display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:10px 11px; min-width:0}
body.dark .cock-duo-half{background:var(--elev1)}
.cock-duo-half .twin{transform:none; margin:0; width:62px; height:62px; flex-shrink:0; position:relative}
.cock-duo-half .twin svg{width:62px; height:62px; display:block}
.cock-duo-half .twin-halo{inset:-5px}
.cock-duo-half .boss-tree{width:50px; height:64px; flex-shrink:0}
.cock-duo-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.cock-duo-txt b{font-size:15.5px; font-weight:800; color:var(--text); letter-spacing:-.2px;
  white-space:normal; overflow-wrap:anywhere; line-height:1.2}
.cock-duo-txt > span{font-size:11px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.cock-duo-water{color:var(--green)!important; font-weight:700}
.cock-duo .cock-mom-bar{margin-top:4px}
@media (prefers-reduced-motion:reduce){.cm-bar i{animation:none; transform:none}.cm-chip{animation:none; opacity:1}}

/* ══ 💰 MONEY CONTROL — confirm · pile · targets · editor · living sprout ══ */
/* chips are now tappable — confirming locks them in with a green seal */
.cm-chip{cursor:pointer; position:relative; transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast)}
.cm-chip:not(.done):active{transform:scale(.95)}
.cm-chip-ok{font-size:9.5px; font-weight:700; color:rgba(235,235,245,.45); margin-top:1px}
.cm-chip.done{border-color:color-mix(in srgb,#30D158 55%,transparent); background:rgba(48,209,88,.08); cursor:default}
.cm-chip.done .cm-chip-ok{color:#30D158}
.cm-chip.done::after{content:''; position:absolute; inset:0; border-radius:13px;
  background:linear-gradient(115deg,transparent 30%,rgba(48,209,88,.28) 48%,transparent 62%);
  animation:luxSweep .7s ease-out}
.cm-gear{border:none; background:none; color:rgba(235,235,245,.5); font-size:14px; cursor:pointer;
  padding:2px 6px; margin-inline-start:4px; border-radius:8px; transition:color var(--t-fast), transform var(--t-med) var(--ease-out)}
.cm-gear:active{transform:rotate(60deg); color:#fff}
/* the pile — accumulated per bucket with a glowing progress bar toward the target */
.cm-acc{margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08)}
.cm-acc-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;
  font-size:12px; font-weight:700; color:rgba(235,235,245,.66)}
.cm-acc-head b{font-size:15px; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(90,200,250,.3)}
.cm-acc-row{display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:7px; margin-bottom:7px}
.cm-acc-ic{font-size:13px}
.cm-acc-l{font-size:11.5px; color:rgba(235,235,245,.6); white-space:nowrap}
.cm-acc-amt{font-size:12.5px; font-weight:800; color:var(--c); text-align:left; font-variant-numeric:tabular-nums}
.cm-acc-amt small{font-weight:500; color:rgba(235,235,245,.42)}
.cm-acc-bar{grid-column:1 / -1; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; direction:ltr}
.cm-acc-fill{height:100%; border-radius:3px; background:var(--c); box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent);
  transition:width 1.1s var(--ease-out)}
/* ⚙ plan editor */
.mp-box{width:430px; max-width:94vw}
.mp-row{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--border)}
.mp-ic{flex-shrink:0; width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:color-mix(in srgb,var(--c) 14%,transparent); border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.mp-l{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.mp-in{display:flex; align-items:center; gap:4px; flex-shrink:0; font-size:12px; color:var(--muted)}
.mp-in .f-input{width:56px; text-align:center; padding:8px 4px}
.mp-in-t .f-input{width:86px}
.mp-sum{font-size:13px; color:var(--text2); margin-top:12px; text-align:center}
/* 💸 fixed expenses — off the top, before the split */
.mp-sec{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13.5px; font-weight:700; color:var(--text);
  margin:18px 0 8px; padding-bottom:7px; border-bottom:1px solid var(--border)}
.mp-sec:first-child{margin-top:2px}
.mp-sec small{font-size:11.5px; font-weight:500; color:var(--muted)}
.mp-exp-row{display:flex; align-items:center; gap:6px; padding:7px 0; border-bottom:1px solid var(--border); transition:opacity .2s var(--ease-out)}
.mp-exp-row.off{opacity:.42}
.mp-exp-tog{flex-shrink:0; width:26px; height:26px; border-radius:9px; border:1px solid var(--border); background:var(--card2);
  color:var(--green); font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center}
.mp-exp-row.off .mp-exp-tog{color:var(--muted)}
.mp-exp-l{flex:1; min-width:0; padding:8px 10px; font-size:13px}
.mp-exp-amt{display:flex; align-items:center; gap:3px; flex-shrink:0; font-size:12px; color:var(--muted)}
.mp-exp-amt .f-input{width:74px; text-align:center; padding:8px 4px}
.mp-exp-per{flex-shrink:0; width:78px; padding:8px 4px; font-size:12px; text-align:center}
.mp-exp-del{flex-shrink:0; width:26px; height:26px; border-radius:9px; border:1px solid var(--border); background:transparent;
  color:var(--muted); font-size:12px; cursor:pointer; line-height:1}
.mp-exp-del:active{background:color-mix(in srgb,var(--red) 16%,transparent); color:var(--red)}
.mp-exp-empty{font-size:12.5px; color:var(--muted); line-height:1.55; padding:10px 2px}
.mp-exp-add{width:100%; margin-top:10px; padding:10px; border-radius:var(--r-lg); border:1px dashed var(--border);
  background:transparent; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer}
.mp-exp-add:active{background:var(--card2)}
.mp-exp-tot{font-size:12.5px; color:var(--text2); margin-top:9px; text-align:center}
.mp-exp-tot b{color:var(--text)}
/* the cockpit gross → expenses → net strip */
.cm-calc{margin:10px 0 12px; padding:10px 12px; border-radius:var(--r-lg); background:var(--card2);
  border:1px solid var(--border); cursor:pointer; -webkit-tap-highlight-color:transparent}
.cm-calc:active{transform:scale(.985); transition:transform .12s var(--ease-out)}
.cm-calc-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px;
  color:var(--text2); padding:3px 0}
.cm-calc-row b{font-variant-numeric:tabular-nums; font-weight:700; color:var(--text)}
.cm-calc-row.neg{color:#FF9F0A} .cm-calc-row.neg b{color:#FF9F0A}
.cm-calc-row.net{margin-top:4px; padding-top:7px; border-top:1px solid var(--border); font-weight:700; color:var(--text)}
.cm-calc-row.net b{color:var(--green); font-size:14px}
.cm-calc.short .cm-calc-row.net b{color:var(--red)}
.cm-calc-warn{margin-top:7px; font-size:11.5px; color:var(--red); line-height:1.5}
@media(max-width:600px){
  .mp-exp-row{flex-wrap:wrap; gap:6px 5px; padding:9px 0}
  .mp-exp-l{flex:1 1 100%; order:0}
  .mp-exp-tog{order:1} .mp-exp-amt{order:2} .mp-exp-per{order:3} .mp-exp-del{order:4; margin-inline-start:auto}
  .mp-exp-amt .f-input{width:82px}
}
/* the sprout / tree breathes gently — alive, Tesla-calm */
.cock-duo-half .boss-tree{animation:treeBreeze 5.5s ease-in-out infinite; transform-origin:50% 92%}
@keyframes treeBreeze{0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(1.8deg) scale(1.02)}}
@media (prefers-reduced-motion:reduce){.cock-duo-half .boss-tree{animation:none}.cm-chip.done::after{animation:none}}

/* collapsed card: no chevron — the whole row is the expand button anyway.
   (When expanded, .tc-exp remains as the slim bottom grab-handle for collapsing.) */
@media(max-width:600px){
  .tcard:not(.expanded) .tc-exp{display:none}
}

/* ══ WEEK TIMELINE — Sun→Fri charge rail spread across the cluster row ══ */
.week-grid{display:none}
@media(max-width:600px){
  .week-grid{display:flex; flex:1; align-items:center; gap:7px; direction:rtl; padding:2px 8px; min-width:0}
  .wk-day{flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:4px}
  .wk-track{position:relative; height:7px; border-radius:4px; background:rgba(255,255,255,.09);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
  .wk-fill{position:absolute; top:0; right:0; bottom:0; width:var(--p,0%); border-radius:4px;
    background:linear-gradient(270deg,#0A84FF,#5AC8FA);
    box-shadow:0 0 7px rgba(10,132,255,.5); transition:width 1.2s var(--ease-out)}
  .wk-day.done .wk-fill{background:linear-gradient(270deg,#0A84FF,#3aa0ff)}
  .wk-day.future .wk-track{background:rgba(255,255,255,.055)}
  /* today: brighter rail + a pulsing comet head at the fill's leading edge */
  .wk-day.today .wk-track{box-shadow:inset 0 0 0 1px rgba(90,200,250,.30)}
  .wk-head{position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
    width:8px; height:8px; border-radius:50%; background:#bfe4ff;
    box-shadow:0 0 8px #5AC8FA,0 0 16px rgba(90,200,250,.75); animation:wkPulse 1.7s ease-in-out infinite}
  .wk-head.near{animation:wkPulseNear 1s ease-in-out infinite}
  /* day initial under each segment; today lit */
  .wk-lbl{font-size:8.5px; font-weight:700; text-align:center; color:rgba(235,235,245,.34); letter-spacing:.02em; line-height:1}
  .wk-day.today .wk-lbl{color:#7ec8ff; text-shadow:0 0 6px rgba(90,200,250,.5)}
  .wk-day.done .wk-lbl{color:rgba(235,235,245,.5)}
}
@keyframes wkPulse{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.9} 50%{transform:translate(-50%,-50%) scale(1.35); opacity:1}}
@keyframes wkPulseNear{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.7} 50%{transform:translate(-50%,-50%) scale(1.6); opacity:1; box-shadow:0 0 12px #5AC8FA,0 0 22px rgba(90,200,250,.9)}}
@media (prefers-reduced-motion:reduce){.wk-head,.wk-head.near{animation:none}}

/* ══════════════════════════════════════════════════════════════
   LOGIN — Tesla-style redesign · deep black, glass, ambient motion
   (commits to a single dark look regardless of theme; #id wins specificity)
   ══════════════════════════════════════════════════════════════ */
#loginScreen{
  background:radial-gradient(120% 90% at 50% -10%,#15171c 0%,#0b0c0f 55%,#050506 100%);
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent
}
/* ambient background motion */
#loginScreen .l-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#loginScreen .l-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
#loginScreen .l-glow-1{width:70vw;height:70vw;max-width:520px;max-height:520px;top:-16%;right:-12%;
  background:radial-gradient(circle,rgba(10,132,255,.55),transparent 68%);animation:lDrift1 16s ease-in-out infinite}
#loginScreen .l-glow-2{width:60vw;height:60vw;max-width:460px;max-height:460px;bottom:-18%;left:-14%;
  background:radial-gradient(circle,rgba(48,209,88,.30),transparent 70%);animation:lDrift2 20s ease-in-out infinite}
/* a slow light beam sweeping across, like a scanning sensor */
#loginScreen .l-beam{position:absolute;top:0;bottom:0;width:42%;left:-42%;
  background:linear-gradient(100deg,transparent,rgba(120,190,255,.06) 45%,rgba(120,190,255,.10) 50%,transparent);
  transform:skewX(-14deg);animation:lBeam 9s ease-in-out infinite}
/* faint perspective grid at the bottom — dashboard horizon */
#loginScreen .l-grid{position:absolute;left:-20%;right:-20%;bottom:-6%;height:44%;
  background-image:linear-gradient(rgba(120,150,200,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,200,.10) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);
  transform:perspective(340px) rotateX(58deg);transform-origin:bottom;opacity:.5;animation:lGridPan 22s linear infinite}
@keyframes lDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.08)}}
@keyframes lDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-18px) scale(1.1)}}
@keyframes lBeam{0%,100%{left:-42%}55%{left:110%}}
@keyframes lGridPan{from{background-position:0 0}to{background-position:0 38px}}

/* glass card */
#loginScreen .lcard{
  position:relative;z-index:1;
  background:linear-gradient(165deg,rgba(30,32,38,.72),rgba(16,17,21,.66));
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;padding:38px 30px 26px;width:360px;max-width:92vw;color:#fff;
  box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.4);
  animation:lCardIn .8s cubic-bezier(.22,1,.36,1) both
}
@keyframes lCardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
/* staggered entrance for each row — a soft boot sequence */
#loginScreen .lcard > *{animation:lRise .7s cubic-bezier(.22,1,.36,1) both}
#loginScreen .llogo-wrap{animation-delay:.10s}
#loginScreen .ltitle{animation-delay:.16s}
#loginScreen .lsub{animation-delay:.22s}
#loginScreen .lfuture{animation-delay:.28s}
#loginScreen .labout{animation-delay:.34s}
#loginScreen .lfeats{animation-delay:.40s}
#loginScreen .gbtn{animation-delay:.48s}
#loginScreen .llinks{animation-delay:.56s}
#loginScreen .lcopy{animation-delay:.60s}
@keyframes lRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* logo with a slow glowing halo ring */
#loginScreen .llogo-wrap{position:relative;width:92px;height:92px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
#loginScreen .llogo-img{width:82px;height:82px;border-radius:22px;box-shadow:0 14px 40px rgba(10,132,255,.4);position:relative;z-index:1}
#loginScreen .llogo-ring{position:absolute;inset:-6px;border-radius:28px;
  background:conic-gradient(from 0deg,rgba(10,132,255,.0),rgba(10,132,255,.65),rgba(90,200,250,.2),rgba(10,132,255,.0));
  filter:blur(7px);opacity:.8;animation:lHalo 6s linear infinite}
@keyframes lHalo{to{transform:rotate(360deg)}}

#loginScreen .ltitle{font-size:30px;font-weight:800;letter-spacing:-.6px;color:#fff;margin-bottom:5px;
  text-shadow:0 0 22px rgba(10,132,255,.25)}
#loginScreen .lsub{color:rgba(235,235,245,.55);margin-bottom:16px;font-size:14.5px;font-weight:500}
/* the "future" tagline as a glowing pill */
#loginScreen .lfuture{display:inline-block;font-size:12.5px;font-weight:700;color:#7ab8ff;
  background:rgba(10,132,255,.10);border:1px solid rgba(10,132,255,.28);border-radius:999px;
  padding:7px 14px;margin:0 0 16px;line-height:1.45;letter-spacing:-.1px;
  box-shadow:0 0 22px rgba(10,132,255,.14),inset 0 1px 0 rgba(255,255,255,.06)}
#loginScreen .labout{font-size:13px;line-height:1.65;color:rgba(235,235,245,.6);margin:0 0 20px;padding:0 2px}
/* feature chips — glassy, subtle glow */
#loginScreen .lfeats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:26px}
#loginScreen .lfeat{font-size:12px;font-weight:600;color:rgba(235,235,245,.82);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:7px 13px;
  transition:transform .2s var(--ease-out),background .2s,border-color .2s}
#loginScreen .lfeat:hover{transform:translateY(-2px);background:rgba(10,132,255,.12);border-color:rgba(10,132,255,.32)}
/* sign-in — bright premium button with a one-shot sheen sweep */
#loginScreen .gbtn{position:relative;overflow:hidden;width:100%;padding:15px;
  background:#fff;color:#111;border:none;border-radius:16px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .18s var(--ease-out),box-shadow .18s}
#loginScreen .gbtn:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(10,132,255,.28),0 0 0 1px rgba(255,255,255,.1)}
#loginScreen .gbtn:active{transform:scale(.98)}
#loginScreen .gbtn::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);
  animation:lSheen 3.2s ease-in-out 1.1s infinite}
@keyframes lSheen{0%{left:-45%}30%,100%{left:130%}}
#loginScreen .gbtn img{width:22px;height:22px}
#loginScreen .llinks{margin-top:22px;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:10px}
#loginScreen .llinks a{color:#7ab8ff;cursor:pointer;font-weight:600;text-decoration:none}
#loginScreen .ldot{color:rgba(235,235,245,.35)}
#loginScreen .lcopy{margin-top:14px;font-size:11.5px;line-height:1.5;color:rgba(235,235,245,.4)}
#loginScreen .lcopy a{color:rgba(235,235,245,.5);text-decoration:underline;cursor:pointer}
#loginScreen #devLoginBtn{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(235,235,245,.75)!important}
@media (prefers-reduced-motion:reduce){
  #loginScreen .l-glow-1,#loginScreen .l-glow-2,#loginScreen .l-beam,#loginScreen .l-grid,
  #loginScreen .llogo-ring,#loginScreen .gbtn::after,#loginScreen .lcard,#loginScreen .lcard > *{animation:none}
}

/* Nested sheets that open ON TOP of another modal (ledger / cockpit) must sit
   above it — equal z-index + DOM order would otherwise hide them behind. */
#debtSheet{z-index:760}
#moneyPlanModal{z-index:760}

/* ══════════ ADD-ONS — toggles + gigs · productions · splits · maps ══════════ */
/* settings toggle rows */
.feat-row{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border)}
.feat-row.disabled{opacity:.45}
.feat-ic{flex-shrink:0; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:17px; background:rgba(120,120,128,.12)}
body.dark .feat-ic{background:rgba(255,255,255,.06)}
.feat-txt{flex:1; min-width:0}
.feat-l{font-size:14px; font-weight:600; color:var(--text)}
.feat-l small{font-weight:500; color:var(--muted); font-size:11px}
.feat-d{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35; overflow-wrap:anywhere}
.feat-sw{flex-shrink:0; width:48px; height:29px; border-radius:999px; border:none; cursor:pointer; position:relative;
  background:rgba(120,120,128,.3); transition:background .28s var(--ease-out)}
.feat-sw.on{background:var(--accent)}
.feat-knob{position:absolute; top:3px; right:3px; width:23px; height:23px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .28s var(--ease-spring)}
.feat-sw.on .feat-knob{transform:translateX(-19px)}
/* shared add-on screens */
.ao-box{width:480px; max-width:95vw}
.ao-add{width:100%; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--accent); font-family:inherit; font-size:14px; font-weight:700; padding:12px; border-radius:var(--r-lg); cursor:pointer; margin-bottom:12px}
.ao-add:active{transform:scale(.99)}
.ao-empty{text-align:center; color:var(--text); font-size:15px; font-weight:600; padding:34px 16px; line-height:1.5}
.ao-empty span{display:block; margin-top:7px; font-size:12.5px; font-weight:400; color:var(--muted)}
.ao-sheet{width:420px; max-width:94vw}
.ao-2col{display:flex; gap:10px}.ao-2col > div{flex:1}
#studioModal{z-index:640}
#stageModal,#bossModal,#simModal{z-index:720} /* sub-sheets sit above the hub */
#gigSheet{z-index:760}
/* gigs */
.gig-next{background:var(--gold-grad); color:#3a2c07; border-radius:var(--r-lg); padding:13px 16px; margin-bottom:12px; display:flex; align-items:center; gap:14px}
.gig-next-lbl{font-size:12px; font-weight:700}
.gig-next-cd{display:flex; flex-direction:column; align-items:center; line-height:1}
.gig-next-cd b{font-size:26px; font-weight:800}
.gig-next-cd span{font-size:10px; font-weight:600}
.gig-next-name{flex:1; font-size:13.5px; font-weight:700; text-align:left; overflow-wrap:anywhere}
.gig-card{background:var(--card); border:1px solid var(--border); border-left:3px solid var(--c); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:10px}
body.dark .gig-card{background:var(--elev1)}
.gig-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; cursor:pointer}
.gig-title{font-size:15px; font-weight:700; color:var(--text); overflow-wrap:anywhere}
.gig-sub{font-size:12px; color:var(--muted); margin-top:2px}
.gig-right{text-align:left; flex-shrink:0}
.gig-fee{font-size:15px; font-weight:800; color:var(--text)}
.gig-badge{display:inline-block; font-size:10.5px; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); border-radius:999px; padding:2px 9px; margin-top:3px}
.gig-setl{margin-top:10px; padding-top:10px; border-top:1px solid var(--border)}
.gig-setl-head{font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:6px}
.gig-setl-empty{font-size:11.5px; color:var(--muted); margin-bottom:6px}
.gig-song{display:flex; align-items:center; gap:7px; padding:5px 0; font-size:13px}
.gig-song-n{flex-shrink:0; width:19px; height:19px; border-radius:50%; background:rgba(120,120,128,.18); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--muted)}
.gig-song-name{flex:1; overflow-wrap:anywhere; color:var(--text)}
.gig-song-key{font-size:11px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:6px; padding:1px 6px}
.gig-song-dur{font-size:11px; color:var(--muted)}
.gig-song-x{border:none; background:none; color:var(--gray3); cursor:pointer; font-size:12px; padding:2px 4px}
.gig-song-add,.split-add,.prod-foot .gig-song-add{display:flex; gap:7px; margin-top:8px}
.gig-song-add .f-input,.split-add .f-input{flex:1; font-size:13px}
.gig-song-add .btn-primary,.split-add .btn-primary{width:40px; padding:0; font-size:18px; flex-shrink:0}
.gig-acts,.split-add{display:flex; gap:8px; margin-top:10px}
.gig-act{flex:1; border:none; background:#25D366; color:#fff; font-family:inherit; font-size:12.5px; font-weight:700; padding:9px; border-radius:var(--r-lg); cursor:pointer}
.gig-act.ghost{flex:0 0 auto; background:none; border:1px solid var(--border2); color:var(--muted)}
/* productions */
.prod-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:10px}
body.dark .prod-card{background:var(--elev1)}
.prod-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.prod-name{font-size:15px; font-weight:700; color:var(--text); overflow-wrap:anywhere}
.prod-cli{font-weight:500; color:var(--muted); font-size:12.5px}
.prod-x,.split-x{border:none; background:none; color:var(--gray3); cursor:pointer; font-size:14px; flex-shrink:0}
.prod-steps{display:flex; justify-content:space-between; gap:3px; margin-bottom:9px}
.prod-step{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer}
.prod-dot{width:15px; height:15px; border-radius:50%; background:rgba(120,120,128,.22); border:2px solid transparent; transition:all .3s var(--ease-spring)}
.prod-step.done .prod-dot{background:var(--accent); box-shadow:0 0 7px rgba(10,132,255,.5)}
.prod-step.cur .prod-dot{background:var(--card); border-color:var(--accent); transform:scale(1.25); box-shadow:0 0 9px rgba(10,132,255,.6)}
.prod-step-l{font-size:9.5px; color:var(--muted); text-align:center; line-height:1.1}
.prod-step.done .prod-step-l,.prod-step.cur .prod-step-l{color:var(--text); font-weight:600}
.prod-bar{height:5px; border-radius:3px; background:rgba(120,120,128,.16); overflow:hidden}
.prod-fill{height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),#5AC8FA); box-shadow:0 0 7px rgba(10,132,255,.5); transition:width .8s var(--ease-out)}
.prod-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--text2); font-weight:600}
.prod-rev button{border:none; background:rgba(120,120,128,.16); color:var(--text2); width:22px; height:22px; border-radius:7px; cursor:pointer; font-size:13px; margin-inline-start:4px}
/* split-sheet */
.split-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:10px}
body.dark .split-card{background:var(--elev1)}
.split-top{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.split-name{flex:1; font-size:15px; font-weight:700; color:var(--text); overflow-wrap:anywhere}
.split-tot{font-size:13px; font-weight:800; color:#FF9F0A}
.split-tot.ok{color:var(--green)}
.split-bar{display:flex; height:9px; border-radius:5px; overflow:hidden; background:rgba(120,120,128,.16); margin-bottom:10px}
.split-bar i{--c:#0A84FF; background:var(--c); box-shadow:0 0 6px color-mix(in srgb,var(--c) 55%,transparent); transition:width .7s var(--ease-out)}
.split-row{display:flex; align-items:center; gap:8px; padding:5px 0}
.split-swatch{width:11px; height:11px; border-radius:3px; background:var(--c); flex-shrink:0}
.split-who{flex:1; font-size:13px; color:var(--text); overflow-wrap:anywhere}
.split-who small{color:var(--muted)}
.split-pct{width:52px; text-align:center; border:1px solid var(--border2); background:var(--card); color:var(--text); border-radius:9px; padding:6px 4px; font-size:13px; font-family:inherit}
body.dark .split-pct{background:var(--elev2)}
.split-pcts{font-size:12px; color:var(--muted)}
/* income map donut */
.imap{display:flex; align-items:center; justify-content:center; position:relative; margin:4px 0}
.imap-svg{width:150px; height:150px; transform:rotate(-90deg)}
.imap-seg{stroke-linecap:round; transform-origin:70px 70px; animation:imapGrow .9s var(--ease-out) both}
@keyframes imapGrow{from{stroke-dasharray:0 339.3}}
.imap-center{position:absolute; text-align:center}
.imap-center b{display:block; font-size:19px; font-weight:800; color:var(--text)}
.imap-center span{font-size:11px; color:var(--muted)}
.imap-legend{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.imap-leg{display:flex; align-items:center; gap:8px; font-size:12.5px}
.imap-dot{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.imap-name{flex:1; color:var(--text); overflow-wrap:anywhere}
.imap-amt{font-weight:700; color:var(--text2)}
/* release countdown */
.cd-set{width:100%; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 7%,transparent); color:var(--accent); font-family:inherit; font-size:13.5px; font-weight:700; padding:12px; border-radius:var(--r-lg); cursor:pointer}
.cd-card{display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#101114,#191a2e); border:1px solid rgba(120,150,255,.2); border-radius:var(--r-lg); padding:15px 17px; cursor:pointer; color:#fff}
.cd-card.done{opacity:.7}
.cd-num{display:flex; flex-direction:column; align-items:center; line-height:1}
.cd-num b{font-size:34px; font-weight:800; letter-spacing:-1px; color:#fff; text-shadow:0 0 18px rgba(120,150,255,.5)}
.cd-num span{font-size:10.5px; color:rgba(235,235,245,.6); margin-top:2px}
.cd-info{flex:1; min-width:0}
.cd-label{font-size:15px; font-weight:700; overflow-wrap:anywhere}
.cd-date{font-size:12px; color:rgba(235,235,245,.6); margin-top:3px}
@media (prefers-reduced-motion:reduce){.imap-seg{animation:none}}

/* ══════════════════════════════════════════════════════════════
   🎙 STUDIO THEME — singer/producer add-ons only (gigs · setlist ·
   productions · splits). Tesla-dark glass + warm analog-studio soul:
   stage-light amber, marquee bulbs, ivory piano keys, spinning reels,
   LED level meters. Scoped to .ao-box / #gigsModal / #prodsModal /
   #splitsModal / #gigSheet — never bleeds into the rest of the app.
   ══════════════════════════════════════════════════════════════ */
.ao-box,.ao-sheet{--studio:#E3A94A; --studio-hi:#FFD98A; --studio-2:#B9752E}
/* warm brushed header with a glowing "power" LED + hairline amber rail.
   Now that gigs/prods/splits/boss/sim live in one #studioModal, the theme
   targets it (plus the stage/sim sheets) — Logic-Pro-style console feel. */
#studioModal .ao-box .mhead,#stageModal .ao-box .mhead,#simModal .ao-box .mhead,.ao-sheet .mhead{
  position:relative; background:linear-gradient(180deg,#1f1c18,#100f12);
  border-bottom:1px solid rgba(227,169,74,.24)}
.ao-box .mhead h2,.ao-sheet .mhead h2{color:#fff; letter-spacing:-.3px}
.ao-box .mhead p{color:rgba(227,200,150,.55)}
.ao-box .mhead::after{content:''; position:absolute; top:17px; inset-inline-start:20px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe6b0,var(--studio)); box-shadow:0 0 8px var(--studio),0 0 18px rgba(227,169,74,.5);
  animation:stdLED 2.6s ease-in-out infinite}
@keyframes stdLED{0%,100%{opacity:.6}50%{opacity:1}}
/* Logic-style control-rail across the top of the studio console */
#studioModal .ao-box .mhead::before{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(227,169,74,.6),transparent)}
/* faint warm glow + fine "rack" texture washing down from the top of the body */
#studioModal .ao-box .mbody,#stageModal .ao-box .mbody,#simModal .ao-box .mbody{
  background:radial-gradient(130% 70% at 50% 0%, rgba(227,169,74,.05), transparent 55%)}
/* the segmented control reads like a Logic transport strip */
#studioSegs{background:linear-gradient(180deg,#17150f,#0e0d10);border:1px solid rgba(227,169,74,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#studioSegs .hub-seg.active{background:linear-gradient(180deg,#33291a,#241d12);color:var(--studio-hi);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 1px 0 rgba(227,169,74,.25)}
/* gig / prod / boss / sim cards get a Logic "track lane" amber spine */
#studioModal .gig-card,#studioModal .prod-card,#studioModal .boss-card,#studioModal .sim-card{position:relative}
#studioModal .gig-card::before,#studioModal .prod-card::before,#studioModal .boss-card::before,#studioModal .sim-card::before{
  content:'';position:absolute;top:10px;bottom:10px;inset-inline-start:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--studio-hi),var(--studio-2));opacity:.7}
/* studio "add" buttons go warm amber instead of blue */
.ao-add{border-color:rgba(227,169,74,.5); background:rgba(227,169,74,.08); color:var(--studio-hi)}

/* ── 🎤 GIGS — stage marquee + backstage-pass cards ── */
.gig-next{background:linear-gradient(135deg,#2b2214,#17110a); border:1px solid rgba(227,169,74,.42); color:var(--studio-hi);
  box-shadow:0 0 34px rgba(227,169,74,.16), inset 0 1px 0 rgba(255,255,255,.06); position:relative; overflow:hidden}
.gig-next::before{content:''; position:absolute; inset-inline:0; top:5px; height:5px;
  background-image:radial-gradient(circle, var(--studio-hi) 1.3px, transparent 1.7px); background-size:15px 5px; opacity:.55;
  animation:marquee 1.1s steps(2) infinite}
@keyframes marquee{to{background-position:15px 0}}
.gig-next-lbl{color:rgba(255,217,138,.8)}
.gig-next-cd b{color:var(--studio-hi); text-shadow:0 0 16px rgba(227,169,74,.7)}
.gig-next-cd span{color:rgba(255,217,138,.7)}
.gig-next-name{color:#fff}
.gig-card{background:linear-gradient(180deg,var(--elev1),#0e0d10); border:1px solid rgba(255,255,255,.07);
  border-left:none; position:relative; overflow:hidden; padding-inline-start:16px}
body.dark .gig-card{background:linear-gradient(180deg,#161519,#0d0c0f)}
/* colored stage-pass stub down the leading edge */
.gig-card::before{content:''; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--c);
  box-shadow:0 0 12px color-mix(in srgb,var(--c) 65%,transparent)}
.gig-title{color:#fff}
.gig-fee{color:var(--studio-hi); text-shadow:0 0 12px rgba(227,169,74,.35)}
/* status badge glows like a stage light */
.gig-badge{background:color-mix(in srgb,var(--c) 15%,#000); color:var(--c);
  box-shadow:0 0 11px color-mix(in srgb,var(--c) 45%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.gig-setl{border-top:1px dashed rgba(227,169,74,.22)}
.gig-setl-head{color:rgba(227,200,150,.65)}
.gig-song-n{background:rgba(227,169,74,.15); color:var(--studio-hi)}
/* the song key printed on an ivory piano-key chip */
.gig-song-key{background:linear-gradient(180deg,#f6f1e7,#d9cfba); color:#241b0e; font-weight:800;
  border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); text-shadow:none}
.gig-act{background:linear-gradient(180deg,#2ec77a,#1fa35f)} /* keep WhatsApp-green request but richer */

/* ── 🎛 PRODUCTIONS — mixing-console channel strip + tape reel ── */
.prod-card{background:linear-gradient(180deg,#17161a,#100f13); border:1px solid rgba(255,255,255,.06); position:relative}
.prod-head{display:flex; align-items:center; gap:9px; min-width:0; flex:1}
.prod-reel{width:22px; height:22px; border-radius:50%; flex-shrink:0; position:relative;
  background:radial-gradient(circle, var(--studio) 0 2.5px, transparent 3px), repeating-radial-gradient(circle,#1b1b1f 0 1px,#0a0a0c 1px 2px);
  box-shadow:0 0 7px rgba(227,169,74,.3), inset 0 0 5px #000}
.prod-reel.spin{animation:reelSpin 4s linear infinite}
.prod-reel::after{content:''; position:absolute; top:50%; left:50%; width:2px; height:2px; transform:translate(-50%,-50%); border-radius:50%; background:#0a0a0c}
@keyframes reelSpin{to{transform:rotate(360deg)}}
.prod-step.done .prod-dot{background:var(--studio); box-shadow:0 0 8px var(--studio)}
.prod-step.cur .prod-dot{border-color:var(--studio); box-shadow:0 0 10px var(--studio)}
.prod-bar{background:#0a0a0c; box-shadow:inset 0 0 4px #000}
.prod-fill{background:linear-gradient(90deg,var(--studio-2),var(--studio-hi)); box-shadow:0 0 9px rgba(227,169,74,.6)}
.prod-rev button{background:rgba(227,169,74,.14); color:var(--studio-hi)}

/* ── ✍️ SPLITS — console LED level meter ── */
.split-card{background:linear-gradient(180deg,#17161a,#100f13); border:1px solid rgba(255,255,255,.06)}
.split-bar{background:#08080a; padding:2px; gap:2px; border:1px solid rgba(255,255,255,.05); box-shadow:inset 0 0 5px #000}
.split-bar i{border-radius:2px; box-shadow:0 0 6px color-mix(in srgb,var(--c) 65%,transparent), inset 0 1px 0 rgba(255,255,255,.25)}
.split-tot{color:var(--studio-hi)}
.split-tot.ok{color:#30D158; text-shadow:0 0 10px rgba(48,209,88,.4)}
.split-pct{background:#0c0c0e; border-color:rgba(227,169,74,.2)}
body.dark .split-pct{background:#0c0c0e}

/* ── the gig edit sheet also wears the warm skin ── */
#gigSheet .ao-sheet .mbody{background:radial-gradient(130% 60% at 50% 0%, rgba(227,169,74,.05), transparent 55%)}
#gigSheet .btn-primary{background:linear-gradient(180deg,var(--studio),var(--studio-2)); color:#221704}

@media (prefers-reduced-motion:reduce){.prod-reel.spin,.gig-next::before,.ao-box .mhead::after{animation:none}}

/* productions — song notes + send-to-producer (studio warm) */
.prod-notes-wrap{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(227,169,74,.22)}
.prod-notes{width:100%; resize:vertical; min-height:44px; font-size:13px; line-height:1.45;
  background:#0c0c0e; border:1px solid rgba(227,169,74,.2); color:var(--text); border-radius:11px; padding:9px 11px}
.prod-notes:focus{border-color:rgba(227,169,74,.5); outline:none}
.prod-notes-acts{display:flex; gap:8px; margin-top:8px}
.prod-producer{flex-shrink:0; border:1px solid rgba(227,169,74,.3); background:rgba(227,169,74,.1); color:var(--studio-hi);
  font-family:inherit; font-size:12px; font-weight:700; padding:9px 12px; border-radius:11px; cursor:pointer; white-space:nowrap; overflow-wrap:anywhere}
.prod-send{flex:1; border:none; background:linear-gradient(180deg,#2ec77a,#1fa35f); color:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700; padding:9px 12px; border-radius:11px; cursor:pointer}
.prod-send:active,.prod-producer:active{transform:scale(.98)}

/* debt ledger — partial-payment progress + status states */
.debt-part{margin-top:6px}
.debt-part-bar{height:5px; border-radius:3px; background:rgba(120,120,128,.18); overflow:hidden}
.debt-part-bar i{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#30D158,#5AC8FA); box-shadow:0 0 6px rgba(48,209,88,.5);
  transition:width .7s var(--ease-out)}
.debt-part-txt{display:block; font-size:11px; color:var(--muted); margin-top:3px}
.debt-part-txt b{color:#FF9F0A; font-weight:800}
.debt-status.partial{border-color:color-mix(in srgb,#0A84FF 50%,transparent);
  background:color-mix(in srgb,#0A84FF 14%,transparent); color:#0A84FF}
body.dark .debt-status.partial{color:#5AC8FA}

/* debt ledger — collapsed "paid" history */
.debt-allpaid{text-align:center; font-size:14px; font-weight:600; color:var(--green); padding:14px 10px}
.debt-hist{margin-top:6px}
.debt-hist-head{width:100%; display:flex; align-items:center; gap:9px; cursor:pointer; font-family:inherit;
  background:rgba(120,120,128,.08); border:1px solid var(--border); border-radius:var(--r-lg); padding:11px 13px; color:var(--text)}
body.dark .debt-hist-head{background:rgba(255,255,255,.04)}
.debt-hist-chev{display:inline-block; font-size:17px; line-height:1; color:var(--muted); transition:transform var(--t-med) var(--ease-out)}
.debt-hist-chev.open{transform:rotate(90deg)}
.debt-hist-lbl{flex:1; text-align:right; font-size:13.5px; font-weight:700}
.debt-hist-sum{font-size:13.5px; font-weight:800; color:var(--green)}
.debt-hist-body{margin-top:4px; animation:pIn .25s var(--ease-out)}
.debt-hist-row{display:flex; align-items:center; gap:8px; padding:9px 4px; border-bottom:1px solid var(--border); opacity:.72}
.debt-hist-main{flex:1; min-width:0}
.debt-hist-task{font-size:13px; font-weight:500; color:var(--text); overflow-wrap:anywhere}
.debt-hist-sub{font-size:11px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere}
.debt-hist-amt{font-size:13px; font-weight:700; color:var(--green); flex-shrink:0}

/* ═══ UNIFIED HUB — Apple/Tesla segmented control (clients · studio · cockpit) ═══ */
.hub-segs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin:12px 16px 6px;border-radius:14px;
  background:rgba(120,120,128,.12);-webkit-overflow-scrolling:touch}
/* segments grow to fill, but wrap to a 2nd row instead of truncating the label */
.hub-seg{flex:1 1 auto;min-width:max-content;padding:9px 12px;border:0;border-radius:11px;background:transparent;
  color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;
  white-space:nowrap;overflow:visible;text-align:center;transition:color .2s,background .25s,box-shadow .25s}
.hub-seg.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.03)}
@media(hover:hover){.hub-seg:not(.active):hover{color:var(--text)}}
body.dark .hub-segs{background:rgba(255,255,255,.07)}
body.dark .hub-seg.active{background:#2C2C2E;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}
/* keep the control aligned with the modal body padding on desktop */
.hub-segs{margin-left:max(16px,env(safe-area-inset-left,0));margin-right:max(16px,env(safe-area-inset-right,0))}

/* Cockpit inline drill-down panels (compact 80/20 · report · goals summaries) */
.cock-hub-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;
  padding:11px;border:0;border-radius:13px;background:rgba(10,132,255,.1);color:var(--accent);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
body.dark .cock-hub-link{background:rgba(10,132,255,.16)}
.cock-mini-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:26px 12px;line-height:1.5}

/* Cockpit — goals mini-panel rows */
.cock-goal{padding:12px 14px;margin-bottom:8px;border-radius:14px;background:var(--card);border:1px solid var(--border);cursor:pointer}
body.dark .cock-goal{background:var(--elev1,#1C1C1E);border-color:rgba(255,255,255,.06)}
.cock-goal-name{font-size:14.5px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.cock-goal-bar{margin:8px 0 6px}
.cock-goal-next{font-size:12.5px;color:var(--accent);font-weight:500;overflow-wrap:anywhere}
.cock-goal-next.muted{color:var(--muted);font-weight:400}
.cock-task-n.gold{background:linear-gradient(135deg,#F5C451,#C9902B);color:#3a2600}

/* Sidebar button caption (e.g. cockpit "80/20 · דוח · מטרות") */
.sb-btn:has(.sb-btn-sub){flex-wrap:wrap;row-gap:0}
.sb-btn-sub{flex:0 0 100%;font-size:10.5px;color:rgba(235,235,245,.42);font-weight:500;
  margin-inline-start:30px;margin-top:-1px;letter-spacing:.1px}

/* ═══════════ STUDIO OS — live-show automation & tools ═══════════ */
/* 🤖 Gig Automator — per-gig prep checklist (collapsible) */
.gig-prep{margin-top:10px;border-top:1px solid var(--border)}
.gig-prep-head{display:flex;align-items:center;gap:8px;padding:10px 2px;cursor:pointer}
.gig-prep-chev{font-size:15px;color:var(--muted);transition:transform .22s var(--ease-out,ease)}
.gig-prep.open .gig-prep-chev,.gear.open .gig-prep-chev{transform:rotate(90deg)}
.gig-prep-lbl,.gear-lbl{font-size:13px;font-weight:700;color:var(--text)}
.gig-prep-prog{font-size:12px;font-weight:700;color:var(--studio,#E3A94A)}
.gig-prep-bar{flex:1;height:6px;border-radius:3px;background:rgba(120,120,128,.2);overflow:hidden}
.gig-prep-bar>i{display:block;height:100%;background:var(--studio,#E3A94A);border-radius:3px;transition:width .35s var(--ease-out,ease)}
.gig-prep-body{padding:2px 0 6px}
.gig-prep-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.gig-prep-item.done .gig-prep-name{text-decoration:line-through;color:var(--muted)}
.gig-prep-sw{flex-shrink:0;width:46px;height:28px;border-radius:16px;border:none;background:rgba(120,120,128,.3);position:relative;cursor:pointer;transition:background .22s;margin-top:1px}
.gig-prep-sw.on{background:#30D158}
.gig-prep-knob{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s var(--ease-spring,cubic-bezier(.34,1.4,.64,1))}
.gig-prep-sw.on .gig-prep-knob{transform:translateX(18px)}
html[dir="rtl"] .gig-prep-sw.on .gig-prep-knob{transform:translateX(-18px)}
.gig-prep-txt{flex:1;min-width:0}
.gig-prep-name{font-size:13.5px;color:var(--text);overflow-wrap:anywhere;line-height:1.35}
.gig-prep-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.gig-prep-due{font-size:11px;color:var(--muted)}
.gig-prep-crew{font-size:11px;font-weight:600;color:var(--studio,#E3A94A);background:none;border:1px dashed color-mix(in srgb,var(--studio,#E3A94A) 45%,transparent);border-radius:8px;padding:2px 7px;cursor:pointer;font-family:inherit}
.gig-prep-del{flex-shrink:0;border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px}
.gig-prep-addrow{display:flex;gap:6px;margin-top:8px}
.gig-prep-addrow .f-input{flex:1;min-width:0}

/* 🎒 Gear stock */
.gear{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);margin:10px 0;padding:2px 12px}
body.dark .gear{background:var(--elev1,#1c1c1e)}
.gear-head{display:flex;align-items:center;gap:8px;padding:10px 2px;cursor:pointer}
.gear-low-badge{margin-inline-start:auto;font-size:11.5px;font-weight:700;color:#FF9F0A}
.gear-ok-badge{margin-inline-start:auto;font-size:11.5px;font-weight:600;color:var(--muted)}
.gear-body{padding:2px 0 10px}
.gear-item{padding:9px 0;border-top:1px solid var(--border)}
.gear-item-top{display:flex;align-items:center;gap:10px}
.gear-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.gear-stepper{display:flex;align-items:center;gap:9px;flex-shrink:0}
.gear-stepper button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border2);background:none;color:var(--text);font-size:16px;cursor:pointer;line-height:1}
.gear-stepper b{min-width:22px;text-align:center;font-size:14px}
.gear-del{flex-shrink:0;border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px}
.gear-bar{height:7px;border-radius:4px;background:rgba(120,120,128,.2);overflow:hidden;margin-top:8px}
.gear-bar>i{display:block;height:100%;background:#30D158;border-radius:4px;transition:width .35s var(--ease-out,ease)}
.gear-item.low .gear-bar>i{background:#FF9F0A;animation:gear-pulse 1.6s ease-in-out infinite}
@keyframes gear-pulse{50%{opacity:.5}}
.gear-low-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;font-size:11.5px;color:#FF9F0A}
.gear-buy{font-size:12px;font-weight:700;color:#fff;background:#30D158;border:none;border-radius:9px;padding:6px 12px;cursor:pointer;text-decoration:none;font-family:inherit}

/* 🎚 Stage plot */
.stage-grid{position:relative;height:44vh;min-height:280px;border-radius:16px;margin-bottom:12px;overflow:hidden;
  background:linear-gradient(#161616,#0c0c0c);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(#161616,#0c0c0c);
  background-size:32px 32px,32px 32px,100% 100%;border:1px solid rgba(255,255,255,.08)}
.stage-back,.stage-front{position:absolute;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:1px;color:rgba(255,255,255,.35);padding:5px}
.stage-back{top:0;border-bottom:1px dashed rgba(255,255,255,.12)}
.stage-front{bottom:0;border-top:1px dashed rgba(255,255,255,.12);color:rgba(227,169,74,.6)}
.stage-item{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.stage-item.dragging{cursor:grabbing;z-index:5}
.stage-item-ic{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.stage-item-ch{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--studio,#E3A94A);color:#2a1a00;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.stage-item-lbl{font-size:10px;color:#fff;background:rgba(0,0,0,.55);border-radius:5px;padding:1px 5px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-item-edit{position:absolute;bottom:-8px;inset-inline-start:-8px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#000;font-size:10px;cursor:pointer;opacity:.85}
.stage-pal{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px;scrollbar-width:none}
.stage-pal::-webkit-scrollbar{display:none}
.stage-pal-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 12px;border-radius:12px;border:1px solid var(--border2);background:var(--card);color:var(--text);font-size:11px;font-family:inherit;cursor:pointer}
body.dark .stage-pal-btn{background:#1c1c1e}
.stage-pal-ic{font-size:20px}
.stage-il{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 12px}
body.dark .stage-il{background:#1c1c1e}
.stage-il-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.stage-il-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border)}
.stage-il-row:first-of-type{border-top:none}
.stage-il-ch{flex-shrink:0;min-width:30px;font-weight:800;color:var(--studio,#E3A94A);font-size:13px}
.stage-il-name{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.stage-il-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:12px}
.stage-il-empty{text-align:center;color:var(--muted);font-size:13px;padding:16px}

/* ⚔️ Boss battles */
.boss-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:10px;cursor:pointer}
body.dark .boss-card{background:#1c1c1e}
.boss-card.won{border-color:rgba(227,169,74,.5)}
.boss-card-vinyl{--fill:0%;flex-shrink:0;width:52px;height:52px;border-radius:50%;
  background:conic-gradient(var(--studio,#E3A94A) var(--fill),rgba(120,120,128,.25) 0);padding:5px}
.boss-card-vinyl::after{content:"";display:block;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle at center,#0b0b0b 0 1.5px,#191919 1.5px 3px)}
.boss-card-vinyl.spin::after{animation:boss-spin 6s linear infinite}
.boss-card-info{flex:1;min-width:0}
.boss-card-name{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.boss-hp{height:8px;border-radius:5px;background:rgba(120,120,128,.22);overflow:hidden;margin:6px 0 4px}
.boss-hp-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#FF6482,#E3A94A);transition:width .4s var(--ease-out,ease)}
.boss-card-meta{font-size:11.5px;color:var(--muted)}
.boss-go{color:var(--muted);font-size:20px;flex-shrink:0}
/* arena (full-screen dark) */
#bossModal{background:rgba(0,0,0,.92)}
.boss-arena{position:relative;width:100%;max-width:440px;margin:auto;padding:28px 22px calc(28px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;min-height:100%}
.boss-close{position:absolute;top:16px;inset-inline-end:16px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:16px;cursor:pointer}
.boss-arena-name{font-size:20px;font-weight:800;margin:10px 0 20px;letter-spacing:-.3px}
.boss-vinyl-wrap{margin:6px 0 18px}
.boss-vinyl{--fill:0%;width:190px;height:190px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--studio,#E3A94A) var(--fill),rgba(255,255,255,.1) 0);padding:8px}
.boss-vinyl::before{content:"";position:absolute;inset:8px;border-radius:50%;background:repeating-radial-gradient(circle at center,#0b0b0b 0 2px,#181818 2px 4.5px);animation:boss-spin 6s linear infinite}
.boss-vinyl::after{content:"";position:absolute;width:34%;height:34%;border-radius:50%;background:radial-gradient(circle,#F0C674,#9c6a1e);border:3px solid #000}
.boss-vinyl.win{box-shadow:0 0 46px rgba(227,169,74,.65)}
.boss-vinyl.win::before{animation-duration:2.4s}
.boss-vinyl-pct{position:relative;z-index:2;color:#2a1a00;font-weight:800;font-size:17px}
.boss-hp.big{width:100%;max-width:320px;height:12px}
.boss-count{font-size:13px;color:rgba(255,255,255,.65);margin:10px 0 16px}
.boss-victory{font-size:16px;font-weight:800;color:#F0C674;margin:8px 0 20px;animation:boss-pop .5s var(--ease-spring,cubic-bezier(.34,1.4,.64,1))}
@keyframes boss-pop{from{transform:scale(.6);opacity:0}}
.boss-next-lbl{font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.5);text-transform:uppercase}
.boss-next{font-size:16px;font-weight:600;margin:5px 0 18px;max-width:320px}
.boss-hit{width:100%;max-width:320px;padding:15px;border-radius:15px;border:none;background:linear-gradient(135deg,#FF6482,#E3A94A);color:#fff;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px rgba(227,169,74,.35)}
.boss-hit:active{transform:scale(.97)}
.boss-list-toggle{margin:18px 0 8px;background:none;border:none;color:rgba(255,255,255,.6);font-family:inherit;font-size:13px;cursor:pointer}
.boss-list{width:100%;max-width:320px;text-align:start}
.boss-li{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:6px;font-size:13.5px;cursor:pointer}
.boss-li.done{color:rgba(255,255,255,.5);text-decoration:line-through}
.boss-li-mark{color:#F0C674;font-weight:800}
.boss-li-add{display:flex;gap:6px;margin-top:8px}
.boss-li-add .f-input{flex:1;min-width:0}

/* 📈 Paper trading */
.sim-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px;cursor:pointer}
body.dark .sim-card{background:#1c1c1e}
.sim-card-info{flex:1;min-width:0}
.sim-card-name{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.sim-card-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.sim-card-net{font-size:17px;font-weight:800;flex-shrink:0}
.sim-card-net.pos{color:#30D158}.sim-card-net.neg{color:#FF453A}
.sim-result{border-radius:16px;padding:18px;margin-bottom:14px;text-align:center;transition:background .3s}
.sim-result.pos{background:rgba(48,209,88,.1);border:1px solid rgba(48,209,88,.3)}
.sim-result.neg{background:rgba(255,69,58,.1);border:1px solid rgba(255,69,58,.3)}
.sim-net{font-size:34px;font-weight:800;letter-spacing:-1px}
.sim-result.pos .sim-net{color:#30D158}.sim-result.neg .sim-net{color:#FF453A}
.sim-hint{font-size:13px;color:var(--text);margin-top:6px;line-height:1.4}
.sim-rows{display:flex;justify-content:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.sim-rows span{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:2px}
.sim-rows b{font-size:13px;color:var(--text)}
.sim-deal{display:flex;gap:8px;margin-bottom:14px}
.sim-deal-btn{flex:1;padding:10px;border-radius:11px;border:1px solid var(--border2);background:var(--card);color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
body.dark .sim-deal-btn{background:#1c1c1e}
.sim-deal-btn.active{background:var(--studio,#E3A94A);color:#2a1a00;border-color:var(--studio,#E3A94A)}
.sim-fld{display:block;margin-bottom:16px}
.sim-fld-lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--text);margin-bottom:7px}
.sim-fld-lbl b{color:var(--studio,#E3A94A);font-weight:800}
.sim-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:rgba(120,120,128,.25);outline:none}
.sim-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--studio,#E3A94A);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sim-range::-moz-range-thumb{width:24px;height:24px;border:none;border-radius:50%;background:var(--studio,#E3A94A);cursor:pointer}

/* Login — "open in a real browser" guidance for embedded webviews */
.l-wv-card{background:rgba(227,169,74,.12);border:1px solid rgba(227,169,74,.4);border-radius:16px;padding:16px;margin:0 0 14px;text-align:right}
.l-wv-title{font-size:15px;font-weight:800;color:#F0C674;margin-bottom:7px}
.l-wv-txt{font-size:13px;line-height:1.55;color:rgba(255,255,255,.85)}
.l-wv-txt b{color:#fff}
.l-wv-btn{width:100%;margin-top:12px;padding:12px;border:none;border-radius:12px;background:#F0C674;color:#2a1a00;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
.l-wv-btn:active{transform:scale(.98)}
.l-wv-steps{font-size:12px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.5}
.l-wv-steps b{color:#F0C674}

/* ═══════════ Templates · Calendar · Show-Day · Automation ═══════════ */
/* 📋 Quote templates */
.ctd-qtpl-bar{display:flex;gap:8px;margin:0 0 10px}
.ctd-qtpl-btn{flex:1;padding:8px 10px;border-radius:11px;border:1px solid rgba(52,199,89,.35);background:rgba(52,199,89,.08);
  color:#248A3D;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
body.dark .ctd-qtpl-btn{color:#30D158}
.ctd-qtpl-btn.ghost{border-color:var(--border2);background:none;color:var(--muted)}
.qtpl-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:13px;margin-bottom:8px;background:var(--card)}
body.dark .qtpl-row{background:#1c1c1e}
.qtpl-info{flex:1;min-width:0;cursor:pointer}
.qtpl-name{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.qtpl-sub{font-size:12px;color:var(--muted);margin-top:2px}
.qtpl-del{border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;padding:5px;flex-shrink:0}

/* 🎤 Show Day */
.showday-box .sd-hero{background:linear-gradient(135deg,#2b2214,#17110a);border:1px solid rgba(227,169,74,.4);border-radius:18px;padding:20px;text-align:center;margin-bottom:14px}
.sd-cd b{font-size:52px;font-weight:800;color:var(--studio-hi,#FFD98A);line-height:1;letter-spacing:-2px;text-shadow:0 0 24px rgba(227,169,74,.5)}
.sd-cd span{display:block;font-size:15px;color:var(--studio-hi,#FFD98A);margin-top:4px;font-weight:600}
.sd-when{font-size:12.5px;color:rgba(227,200,150,.7);margin-top:8px}
.sd-actions{display:flex;gap:8px;margin-bottom:14px}
.sd-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
body.dark .sd-act{background:#1c1c1e}
.sd-act span{font-size:20px}
.sd-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px}
body.dark .sd-card{background:#1c1c1e}
.sd-card-h{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.sd-prep{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.sd-done{font-size:13.5px;color:#30D158;font-weight:600;padding:4px 0}
.sd-song{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px}
.sd-song b{width:20px;height:20px;border-radius:50%;background:rgba(227,169,74,.15);color:var(--studio-hi,#E3A94A);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.sd-big{width:100%;padding:14px;border-radius:14px;border:1px solid rgba(227,169,74,.4);background:rgba(227,169,74,.1);color:var(--studio-hi,#E3A94A);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}

/* 🗓 Calendar */
.cal-box .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-nav button{width:38px;height:38px;border-radius:11px;border:1px solid var(--border2);background:var(--card);color:var(--text);font-size:20px;cursor:pointer;line-height:1}
body.dark .cal-nav button{background:#1c1c1e}
.cal-month{font-size:16px;font-weight:700;color:var(--text)}
.cal-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:4px}
.cal-dows span{text-align:center;font-size:11px;color:var(--muted);font-weight:600;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:50px;gap:4px}
.cal-cell{min-width:0;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;background:var(--card);border:1px solid transparent;position:relative;transition:background .15s}
body.dark .cal-cell{background:#161618}
.cal-cell.empty{background:none;cursor:default}
.cal-cell.has{background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.sel{background:var(--accent)}
.cal-cell.sel .cal-num{color:#fff}
.cal-num{font-size:14px;font-weight:600;color:var(--text)}
.cal-dots{display:flex;gap:2px;min-height:6px}
.cal-dot{width:5px;height:5px;border-radius:50%}
.cal-cell.sel .cal-dot{box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.cal-sel-lbl{font-size:14px;font-weight:700;color:var(--text);margin:16px 0 8px}
.cal-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;background:var(--card);border:1px solid var(--border);margin-bottom:7px;cursor:pointer}
body.dark .cal-item{background:#1c1c1e}
.cal-item-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cal-item-lbl{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow-wrap:anywhere}
.cal-item-go{color:var(--muted);font-size:18px;flex-shrink:0}
.cal-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:20px}

/* ⚡ Automation */
.auto-card{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:14px;margin-bottom:11px}
body.dark .auto-card{background:#1c1c1e}
.auto-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.auto-name{font-size:15px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.auto-del{border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px}
.auto-steps-lbl{font-size:12px;color:var(--muted);margin:5px 0 11px}
.auto-apply{width:100%;padding:11px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.auto-apply:active{transform:scale(.99)}

/* ─── Fixes batch: boss steps · gig client · sim contrast · show-day · automation ─── */
/* ⚔️ Boss step list — readable input, small add button, edit/delete, share */
.boss-li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:6px;font-size:13.5px}
.boss-li.done .boss-li-name{color:rgba(255,255,255,.45);text-decoration:line-through}
.boss-li-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(240,198,116,.6);background:none;color:#F0C674;font-size:13px;cursor:pointer;line-height:1}
.boss-li.done .boss-li-check{background:#F0C674;color:#2a1a00;border-color:#F0C674}
.boss-li-name{flex:1;min-width:0;color:#fff;cursor:pointer;overflow-wrap:anywhere;text-align:start}
.boss-li-edit,.boss-li-del{flex-shrink:0;width:26px;height:26px;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border-radius:8px;font-size:12px;cursor:pointer}
.boss-li-add{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.boss-add-in{flex:1;min-width:0;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;height:44px}
.boss-add-in::placeholder{color:rgba(255,255,255,.5)}
.boss-add-btn{flex:0 0 44px;width:44px;height:44px;border:none;border-radius:11px;background:#F0C674;color:#2a1a00;font-size:22px;font-weight:700;cursor:pointer;line-height:1}
.boss-share{width:100%;margin-top:12px;padding:12px;border-radius:12px;border:1px solid rgba(37,211,102,.5);background:rgba(37,211,102,.14);color:#4ae584;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}

/* 🎤 Gig — add new client inline */
.gig-client-row{display:flex;gap:8px;align-items:stretch}
.gig-client-row .f-input{flex:1;min-width:0}
.gig-client-add{flex:0 0 auto;white-space:nowrap;padding:0 14px;border-radius:11px;border:1px solid rgba(227,169,74,.5);background:rgba(227,169,74,.1);color:var(--studio-hi,#E3A94A);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* 📈 Sim — deal toggle contrast (was unreadable when inactive) */
.sim-deal-btn{color:var(--text)!important;border-color:var(--border2)}
body.dark .sim-deal-btn{background:#2a2622;color:#e8e0d0!important;border-color:rgba(227,169,74,.25)}
.sim-deal-btn.active{background:var(--studio,#E3A94A)!important;color:#2a1a00!important;border-color:var(--studio,#E3A94A)!important;font-weight:800}

/* 🎤 Show-Day — completed prep stays visible (dimmed, checked) */
.sd-prep.done{opacity:.65}
.sd-prep.done span{text-decoration:line-through;color:var(--muted)}

/* ⚡ Automation — guidance + edit/delete + step editor */
.auto-how{background:rgba(10,132,255,.08);border:1px solid rgba(10,132,255,.25);border-radius:13px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--text);margin-bottom:14px}
.auto-how b{color:var(--accent)}
.auto-card-btns{display:flex;gap:6px;flex-shrink:0}
.auto-icobtn{width:30px;height:30px;border:1px solid var(--border2);background:var(--card);color:var(--muted);border-radius:9px;font-size:13px;cursor:pointer}
body.dark .auto-icobtn{background:#26262a}
.auto-edit-steps{display:flex;flex-direction:column;gap:9px;margin:8px 0 12px}
.auto-step-row{display:flex;align-items:center;gap:8px}
.auto-step-txt{flex:1;min-width:0}
.auto-step-off-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.auto-step-off{width:56px;text-align:center;padding-left:6px;padding-right:6px}
.auto-step-off-wrap span{font-size:11px;color:var(--muted);white-space:nowrap}
.auto-step-del{flex-shrink:0;width:32px;height:38px;border:1px solid var(--border);background:none;color:var(--muted);border-radius:9px;font-size:13px;cursor:pointer}

/* ─── Persona feature groups (settings) ─── */
.feat-group{border:1px solid var(--border);border-radius:16px;padding:4px 4px 6px;margin-bottom:12px;background:var(--card)}
body.dark .feat-group{background:#1c1c1e}
.feat-group.on{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.feat-grow{margin:0}
.feat-adv-toggle{display:block;width:100%;text-align:center;background:none;border:none;border-top:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;padding:9px;cursor:pointer;margin-top:2px}
.feat-adv{padding:2px 4px 4px}
.feat-sub{padding:7px 6px!important;border-top:1px solid var(--border)}
.feat-ic.sm{font-size:15px;width:26px}
.feat-sw.sm{transform:scale(.82)}

/* ─── Venture OS ─── */
.venture-box .rw-hero{--c:#30D158;background:linear-gradient(135deg,#12251a,#0c1512);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:18px;padding:20px;text-align:center;margin-bottom:16px}
.rw-months b{font-size:48px;font-weight:800;color:var(--c);line-height:1;letter-spacing:-2px}
.rw-months span{display:block;font-size:14px;color:var(--c);margin-top:4px;font-weight:600}
.rw-gauge{height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:14px 0 10px}
.rw-gauge-fill{height:100%;border-radius:6px;transition:width .4s var(--ease-out,ease),background .3s}
.rw-end{font-size:12.5px;color:rgba(255,255,255,.75)}
.rw-hint{font-size:12.5px;color:var(--muted);background:rgba(120,120,128,.1);border-radius:12px;padding:11px 13px;margin-top:14px;line-height:1.5}
.inv-tot{font-size:13.5px;color:var(--text);margin-bottom:10px}.inv-tot b{color:#30D158;font-weight:800}
.inv-card{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:13px;margin-bottom:10px}
body.dark .inv-card{background:#1c1c1e}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.inv-name{font-size:15px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.inv-amt{font-size:13px;font-weight:700;color:#30D158;margin-inline-start:4px}
.inv-x{border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;flex-shrink:0}
.inv-stages{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.inv-stages::-webkit-scrollbar{display:none}
.inv-stage{flex-shrink:0;padding:6px 11px;border-radius:11px;border:1px solid var(--border2);background:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.inv-stage.on{background:var(--c);color:#fff;border-color:var(--c)}
.inv-notes{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45;overflow-wrap:anywhere}
.inv-edit{margin-top:9px;background:none;border:1px solid var(--border2);border-radius:9px;color:var(--muted);font-family:inherit;font-size:12px;padding:6px 12px;cursor:pointer}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:14px;margin-bottom:10px}
body.dark .kpi-card{background:#1c1c1e}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-name{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.kpi-val{display:flex;align-items:baseline;gap:8px;margin:8px 0}
.kpi-val b{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1px}
.kpi-unit{font-size:13px;color:var(--muted)}
.kpi-diff{font-size:12.5px;font-weight:700;margin-inline-start:auto}
.kpi-diff.up{color:#30D158}.kpi-diff.down{color:#FF453A}
.kpi-spark{display:flex;align-items:flex-end;gap:3px;height:44px;margin:8px 0}
.kpi-spark i{flex:1;background:var(--accent);border-radius:3px;min-height:6px;opacity:.85}
.kpi-add-val{width:100%;margin-top:6px;background:rgba(10,132,255,.08);border:1px solid rgba(10,132,255,.25);border-radius:11px;color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:700;padding:9px;cursor:pointer}

/* ─── Calendar: view segments + week + year ─── */
.cal-views{margin:0 0 10px}
.calw{display:flex;flex-direction:column;gap:8px}
.calw-day{display:flex;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--border)}
body.dark .calw-day{background:#1c1c1e}
.calw-day.today{border-color:var(--accent)}
.calw-date{flex:0 0 40px;text-align:center}
.calw-date b{font-size:20px;font-weight:800;color:var(--text)}
.calw-date span{display:block;font-size:11px;color:var(--muted)}
.calw-events{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.calw-ev{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);border-inline-start:3px solid var(--c);padding-inline-start:9px;cursor:pointer;line-height:1.35}
.calw-ev em{font-style:normal;overflow-wrap:anywhere}
.calw-empty{font-size:12px;color:var(--muted)}
.caly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.caly-month{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:10px;cursor:pointer}
body.dark .caly-month{background:#1c1c1e}
.caly-name{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px;text-align:center}
.caly-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:16px;gap:2px}
.caly-cell{font-size:9px;text-align:center;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:3px;position:relative}
.caly-cell.empty{visibility:hidden}
.caly-cell.has{color:#fff;font-weight:800;background:var(--c)}
.caly-cell.today{outline:1.5px solid var(--accent);border-radius:4px}

/* ══ INVOICING — per-user accounting-provider hookup + issue sheet ══ */
.inv-open-btn{width:100%;display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--r-lg,16px);background:var(--card);font-family:inherit;cursor:pointer;text-align:right;
  transition:transform .15s var(--ease-out,ease),border-color .2s}
.inv-open-btn:active{transform:scale(.985)}
.inv-open-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.inv-open-ic{font-size:20px;flex-shrink:0}
.inv-open-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.inv-open-txt b{font-size:14.5px;font-weight:700;color:var(--text)}
.inv-open-txt i{font-size:12px;font-style:normal;color:var(--muted)}
.inv-open-txt i.on{color:var(--green);font-weight:600}
.inv-open-arrow{color:var(--muted);font-size:19px;flex-shrink:0;transform:scaleX(-1)}

.inv-set-box,.inv-box{max-width:520px}
.inv-steps{display:flex;gap:6px;margin-bottom:14px}
.inv-steps span{flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--muted);
  padding:6px 4px;border-radius:var(--r-pill,999px);background:var(--bg2,rgba(127,127,127,.09));white-space:nowrap}
.inv-prov-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.inv-prov{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:15px 8px;
  border:1.5px solid var(--border);border-radius:var(--r-lg,16px);background:var(--card);font-family:inherit;
  cursor:pointer;transition:transform .15s var(--ease-out,ease),border-color .2s,background .2s}
.inv-prov:active{transform:scale(.96)}
.inv-prov.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.inv-prov-ic{font-size:22px}
.inv-prov-l{font-size:12.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.3}
.inv-prov-badge{font-size:9.5px;font-weight:700;color:var(--green);
  background:color-mix(in srgb,var(--green) 14%,transparent);padding:2px 7px;border-radius:var(--r-pill,999px)}
.inv-help{font-size:12px;line-height:1.55;color:var(--muted);background:var(--bg2,rgba(127,127,127,.08));
  padding:10px 12px;border-radius:12px;margin-bottom:13px}
.inv-secure{font-size:11.5px;line-height:1.5;color:var(--muted);margin:10px 0 4px;
  border-right:2.5px solid var(--green);padding-right:9px}
.inv-set-actions{display:flex;gap:8px;margin-top:12px}
.inv-set-actions .btn-primary{flex:1}
.inv-disc{flex-shrink:0;color:var(--red,#FF453A)}
.inv-test-msg{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:10px;min-height:17px;line-height:1.45}
.inv-test-msg.ok{color:var(--green)}
.inv-test-msg.err{color:var(--red,#FF453A)}
.inv-ask-row{margin-top:14px}
.debt-inv{color:var(--accent)}
.inv-chip b{color:var(--accent)}
.inv-opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.inv-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer}
.inv-opt input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.inv-done-box{max-width:400px;text-align:center}
.inv-done-ic{font-size:46px;margin:6px 0 16px;animation:inv-pop .45s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes inv-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.inv-done-btn{display:block;width:100%;margin-bottom:9px;text-align:center;text-decoration:none;padding:13px;border-radius:14px}
@media(max-width:600px){
  .inv-steps span{font-size:9.5px;padding:5px 2px}
  .inv-prov{padding:13px 6px}
  .inv-done-ic{font-size:40px}
}

/* Client-row chip reads as the debt's STATUS ("פתוח"), so it must not be green —
   green said "settled" at a glance. Amber matches the row-level "ממתין" pill. */
.debt-settle{border-color:color-mix(in srgb,#FF9F0A 45%,transparent);
  background:color-mix(in srgb,#FF9F0A 12%,transparent);color:#B25F00}
body.dark .debt-settle{color:#FFB340}