*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --bg:#0a0a0a;--bg2:#0f0f0f;--bg3:#141414;--bg4:#1a1a1a;--bg5:#222;
  --border:#1a1a1a;--border2:#242424;--border3:#2e2e2e;
  --text:#e8e8e8;--text2:#aaa;--text3:#666;--text4:#3a3a3a;
  --green:#ffffff;--green-bg:rgba(255,255,255,0.12);--green-border:rgba(255,255,255,0.28);
  --blue:#38bdf8;--blue-bg:rgba(56,189,248,0.10);--blue-border:rgba(56,189,248,0.22);
  --red:#f87171;--red-bg:rgba(248,113,113,0.10);--red-border:rgba(248,113,113,0.22);
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,0.12);--amber-border:rgba(251,191,36,0.28);
  --purple:#a78bfa;--purple-bg:rgba(167,139,250,0.10);--purple-border:rgba(167,139,250,0.22);
  --cyan:#22d3ee;--cyan-bg:rgba(34,211,238,0.10);--cyan-border:rgba(34,211,238,0.22);
  --sidebar-w:240px;
  --r:10px;--r-lg:14px;--r-xl:18px;
}
[data-theme="light"]{
  --bg:#f5f5f7;--bg2:#ffffff;--bg3:#ebebed;--bg4:#e0e0e2;--bg5:#d5d5d7;
  --border:#e0e0e2;--border2:#d0d0d2;--border3:#c0c0c2;
  --text:#1a1a1a;--text2:#555;--text3:#999;--text4:#ccc;
  --green:#ffffff;--green-bg:rgba(255,255,255,0.10);--green-border:rgba(255,255,255,0.25);
}
html,body{height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;color:var(--text);overflow:hidden;}

/* ── LAYOUT ── */
.app{display:flex;height:100vh;overflow:hidden;}
.sb-item.admin-only,.sec-actions.admin-only,.bn-btn.admin-only{display:none!important;}.sidebar{display:none !important;}.main-content{padding-bottom:80px !important;padding-left:16px !important;}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}

/* ── SIDEBAR ── */
.sb-logo{padding:18px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.sb-logo-ico{width:30px;height:30px;border-radius:9px;background:#1a4a2e;border:1px solid var(--green-border);display:flex;align-items:center;justify-content:center;}
.sb-logo-ico svg{width:14px;height:14px;}
.sb-brand{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px;}
.sb-scroll{flex:1;overflow-y:auto;padding:10px 10px;scrollbar-width:none;}
.sb-scroll::-webkit-scrollbar{display:none;}
.sb-section{font-size:10px;font-weight:700;letter-spacing:1.1px;color:var(--text4);text-transform:uppercase;padding:14px 8px 6px;}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:pointer;color:var(--text3);margin-bottom:1px;transition:all 0.13s;position:relative;}
.sb-item:hover{background:var(--bg3);color:var(--text2);}
.sb-item.active{background:var(--bg4);color:var(--text);}
.sb-item svg{width:15px;height:15px;flex-shrink:0;opacity:0.7;}
.sb-item.active svg{opacity:1;}
.sb-item-lbl{font-size:13px;font-weight:600;flex:1;}
.sb-item-count{font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--bg5);color:var(--text3);}
.sb-item.active .sb-item-count{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sb-proj-arrow{font-size:10px;color:var(--text4);margin-left:auto;transition:transform 0.2s;}
.sb-sublist{overflow:hidden;max-height:0;transition:max-height 0.25s ease;}
.sb-sublist.open{max-height:300px;}
.sb-subitem{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 28px;border-radius:var(--r);cursor:pointer;color:var(--text3);margin-bottom:1px;transition:all 0.13s;font-size:12px;font-weight:500;}
.sb-subitem:hover{color:var(--text2);background:var(--bg3);}
.sb-subitem.active{color:var(--text);}
.sb-profile{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;}
.sb-profile:hover{background:var(--bg3);}
.sb-av{width:32px;height:32px;border-radius:50%;background:var(--green-bg);border:1.5px solid var(--green-border);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:11px;font-weight:800;flex-shrink:0;}
.sb-av-name{font-size:13px;font-weight:700;color:var(--text);}
.sb-av-role{font-size:10px;color:var(--text3);}

/* ── TOPBAR ── */
.topbar{height:54px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;flex-shrink:0;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-back{width:30px;height:30px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:16px;display:none;}
.tb-back.visible{display:flex;}
.tb-title{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.4px;}
.tb-logo{width:56px;height:56px;border-radius:12px;object-fit:cover;margin-left:-12px;}
.tb-right{display:flex;align-items:center;gap:8px;}
.tb-btn{height:32px;padding:0 14px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text2);font-size:12px;font-weight:600;font-family:inherit;transition:all 0.13s;}
.tb-btn:hover{background:var(--bg4);color:var(--text);}
.tb-btn svg{width:13px;height:13px;}
.tb-btn-green{background:var(--green-bg);border-color:var(--green-border);color:var(--green);}
.tb-btn-green:hover{background:rgba(74,222,128,0.18);}

/* ── CONTENT ── */

[contenteditable][data-ph]:empty:before{content:attr(data-ph);color:var(--text4);pointer-events:none;}
.page{display:none;flex:1;overflow-y:auto;padding:28px 32px 40px;scrollbar-width:none;}

#page-home{background:#FAF9F7;}
.main-area:has(> #page-home.active){background:#FAF9F7;}
.main-area:has(> .page.active:not(#page-home)){background:var(--bg);}
#page-home::before,#page-home::after{display:none;}
.proj-card{transition:transform 0.15s ease, box-shadow 0.15s ease;}
.proj-card.proj-dragging{opacity:0.3;}
.proj-card.proj-drop-target{box-shadow:inset 0 0 0 2px #ffffff;}
.page.active{display:block;}
.page::-webkit-scrollbar{display:none;}
.page::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}

/* ── SECTION HEADER ── */
.sec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.sec-title{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--text3);text-transform:uppercase;}
.sec-link{font-size:12px;font-weight:600;color:var(--green);opacity:0.85;cursor:pointer;background:none;border:none;font-family:inherit;}
.sec-link:hover{opacity:1;}
.sec-actions{display:flex;gap:8px;align-items:center;}
.sec-ico-btn{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;opacity:0.7;transition:opacity 0.15s;}
.sec-ico-btn:hover{opacity:1;}
.page-title{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-0.6px;margin-bottom:6px;}
.page-sub{font-size:13px;color:var(--text3);margin-bottom:28px;}

/* ── PROJECT GRID ── */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;}
@media(min-width:560px){.proj-grid{grid-template-columns:repeat(3,1fr);gap:6px 24px;}#page-home{padding-left:48px;padding-right:48px;}}
.proj-card{border-radius:var(--r-xl);padding:18px;display:flex;flex-direction:column;min-height:175px;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;}
.proj-card:hover{transform:translateY(-2px);}
.proj-card::before{content:'';position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;}
.proj-card.c-g{background:linear-gradient(145deg,#123f2a,#0a2418 60%,#06150e);border:1px solid rgba(53,182,121,0.14);}
.proj-card.c-g::before{background:radial-gradient(circle,rgba(53,182,121,0.13) 0%,transparent 70%);}
.proj-card.c-t{background:linear-gradient(145deg,#013650,#001f2d 60%,#00121b);border:1px solid rgba(4,155,229,0.14);}
.proj-card.c-t::before{background:radial-gradient(circle,rgba(4,155,229,0.13) 0%,transparent 70%);}
.proj-card.c-p{background:linear-gradient(145deg,#2a2e47,#181a28 60%,#0e1018);border:1px solid rgba(121,134,203,0.14);}
.proj-card.c-p::before{background:radial-gradient(circle,rgba(121,134,203,0.13) 0%,transparent 70%);}
.proj-card.c-a{background:linear-gradient(145deg,#56420c,#312607 60%,#1d1604);border:1px solid rgba(246,191,37,0.14);}
.proj-card.c-a::before{background:radial-gradient(circle,rgba(246,191,37,0.13) 0%,transparent 70%);}
.proj-card.c-r{background:linear-gradient(145deg,#502b28,#2e1817 60%,#1b0e0d);border:1px solid rgba(230,124,115,0.14);}
.proj-card.c-r::before{background:radial-gradient(circle,rgba(230,124,115,0.13) 0%,transparent 70%);}
.proj-card.c-c{background:linear-gradient(145deg,#161c3f,#0c1024 60%,#070915);border:1px solid rgba(63,81,181,0.14);}
.proj-card.c-c::before{background:radial-gradient(circle,rgba(63,81,181,0.13) 0%,transparent 70%);}
.proj-card.c-v{background:linear-gradient(145deg,#310c3b,#1c0722 60%,#110414);border:1px solid rgba(142,36,170,0.14);}
.proj-card.c-v::before{background:radial-gradient(circle,rgba(142,36,170,0.13) 0%,transparent 70%);}
.card-ico.v{background:rgba(142,36,170,0.15);}
.proj-card.c-x{background:linear-gradient(145deg,#212121,#131313 60%,#0b0b0b);border:1px solid rgba(97,97,97,0.14);}
.proj-card.c-x::before{background:radial-gradient(circle,rgba(97,97,97,0.13) 0%,transparent 70%);}
.card-ico.x{background:rgba(97,97,97,0.15);}
.proj-card.c-new{background:transparent;border:1px dashed var(--border2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;min-height:208px;}
.proj-card.c-new:hover{border-color:var(--border3);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
.card-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.card-ico.g{background:rgba(53,182,121,0.15);}
.card-ico.t{background:rgba(4,155,229,0.15);}
.card-ico.p{background:rgba(121,134,203,0.15);}
.card-ico.a{background:rgba(246,191,37,0.15);}
.card-ico.r{background:rgba(230,124,115,0.15);}
.card-ico.c{background:rgba(63,81,181,0.15);}
.card-tasks-badge{font-size:10px;font-weight:700;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);padding:3px 9px;border-radius:20px;}
.card-body{margin-top:auto;position:relative;z-index:1;}
.card-name{font-size:14px;font-weight:800;color:#fff;margin-bottom:2px;letter-spacing:-0.2px;}
.card-sub{font-size:11px;color:rgba(255,255,255,0.35);margin-bottom:10px;}
.prog-row{display:flex;gap:3px;}
.pd{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,0.08);}
.add-card-ico{width:40px;height:40px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--text4);font-size:22px;font-weight:300;}
.add-card-lbl{font-size:12px;color:var(--text4);}

/* ── TASK LIST ── */
.task-filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.tsk-action-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;border-radius:20px;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s ease;overflow:hidden;white-space:nowrap;}
.tsk-action-btn:hover{background:var(--bg4);color:var(--text);padding:0 14px;}
.tsk-action-btn.green{background:var(--green-bg);border-color:var(--green-border);color:var(--green);padding-left:13px;}
.tsk-action-btn.green:hover{background:rgba(74,222,128,0.18);}
.tsk-action-btn svg{width:13px;height:13px;flex-shrink:0;}
.tsk-action-btn .tsk-btn-lbl{max-width:0;opacity:0;overflow:hidden;transition:max-width 0.25s ease,opacity 0.2s ease,margin 0.2s ease;margin-left:0;}
.tsk-action-btn:hover .tsk-btn-lbl{max-width:100px;opacity:1;margin-left:6px;}
.task-filters{align-items:center;}

.filter-chip{padding:6px 14px;border-radius:20px;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.13s;font-family:inherit;}
.filter-chip:hover{border-color:var(--border3);color:var(--text2);}
.filter-chip.active{background:var(--bg3);border-color:var(--border2);color:#000;}
.task-group{margin-bottom:8px;}
.tg-hdr{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 16px;border-radius:8px;transition:background 0.12s;width:min(var(--task-col,560px),100%);margin:0 auto;box-sizing:border-box;}
.tg-hdr:hover{background:var(--bg3);}
.tg-label{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;}
.tg-label.red{color:var(--red);}
.tg-label.green{color:var(--green);}
.tg-label.gray{color:var(--text3);}
.tg-label.amber{color:var(--amber);}
.tg-count{font-size:11px;color:var(--text3);background:var(--bg3);padding:1px 8px;border-radius:20px;margin-left:4px;}
.tg-num{font-size:12px;font-weight:600;color:var(--text3);margin-left:3px;}
.tg-arrow{font-size:11px;color:var(--text4);margin-left:auto;transition:transform 0.2s;}
.tg-arrow.open{transform:rotate(90deg);}
.tg-body{margin-top:4px;}
.task-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:18px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);margin:0 auto 6px;cursor:pointer;transition:background 0.15s,border-color 0.15s;width:min(var(--task-col,560px),100%);}
.task-row:hover{background:#26262b;}
.task-done-row{opacity:0.55;}
.task-wrap{border-radius:18px;border:1px solid rgba(255,255,255,0.07);background:rgba(0,0,0,0.18);overflow:hidden;margin:0 auto 8px;position:relative;z-index:2;width:min(var(--task-col,560px),100%);box-sizing:border-box;}.task-wrap .task-row{border:none!important;border-radius:0!important;margin:0!important;width:100%!important;background:transparent!important;box-shadow:none!important;}.task-accordion{background:#ffffff;border:none;border-radius:0;padding:14px 16px;margin:0;color:#1a1a1a;}
.task-row.editing-inline,.task-wrap .task-row.editing-inline{border-radius:14px!important;overflow:hidden;cursor:default;padding:14px 16px;background:#fff!important;border:1px solid var(--border)!important;margin:0 0 8px 0!important;transform:none!important;box-shadow:0 4px 16px rgba(0,0,0,0.08);}
[data-theme="dark"] .task-row.editing-inline,html:not([data-theme="light"]) .task-row.editing-inline{background:var(--bg2)!important;box-shadow:0 4px 16px rgba(0,0,0,0.35);}
.task-row.editing-inline:hover{background:#fff!important;transform:none!important;}
[data-theme="dark"] .task-row.editing-inline:hover,html:not([data-theme="light"]) .task-row.editing-inline:hover{background:var(--bg2)!important;}
[data-theme="dark"] .task-accordion,html:not([data-theme="light"]) .task-accordion{background:transparent;color:var(--text);}
.task-accordion .task-acc-desc{color:#3a3a3a;}
[data-theme="dark"] .task-accordion .task-acc-desc,html:not([data-theme="light"]) .task-accordion .task-acc-desc{color:var(--text2);}
.task-accordion .anim-check-wrap{border-bottom:none;padding:4px 0;gap:10px;}
.task-accordion .anim-check-label{font-size:13px;font-weight:400;}
.task-accordion .anim-check-box{border-color:#c9c9c9;border-radius:50%;}
[data-theme="dark"] .task-accordion .anim-check-box,html:not([data-theme="light"]) .task-accordion .anim-check-box{border-color:var(--border3);}
.task-accordion .subt-add{display:flex;gap:8px;margin-top:8px;align-items:center;padding:8px 0;}
[data-theme="dark"] .task-accordion .subt-add,html:not([data-theme="light"]) .task-accordion .subt-add{border-top-color:var(--border);}
.task-accordion .subt-add input{flex:1;background:none;border:none;outline:none;font-size:13px;font-family:inherit;color:inherit;padding:4px 0;}
.task-accordion .subt-add input::placeholder{color:#999;}
.task-accordion .subt-add button{background:none;border:none;color:#999;font-weight:700;font-size:16px;cursor:pointer;padding:2px 6px;transition:color 0.12s;line-height:1;}
.task-accordion .subt-add button:hover{color:var(--green);}
/* Шторка всегда тёмная: аккордеон задачи и inline-редактирование форсим тёмными
   независимо от темы приложения (в светлой теме иначе белеют на чёрной шторке) */
.app-sheet .task-accordion{ background:#26282C !important; color:var(--text) !important; }
.app-sheet .task-accordion .task-acc-desc{ color:var(--text2) !important; }
.app-sheet .task-accordion .anim-check-box{ border-color:var(--border3) !important; }
.app-sheet .task-accordion .subt-add{ border-top-color:var(--border) !important; }
.app-sheet .task-accordion .subt-add input::placeholder{ color:var(--text3) !important; }
.app-sheet .task-row.editing-inline, .app-sheet .task-wrap .task-row.editing-inline{ background:var(--bg2) !important; }
.app-sheet .task-row.editing-inline:hover{ background:var(--bg2) !important; }

.task-acc-desc{font-size:13px;color:var(--text2);line-height:1.6;white-space:pre-wrap;margin-bottom:12px;}
.task-acc-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border);}
.acc-tb-btn{background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--text3);transition:all 0.12s;display:flex;align-items:center;justify-content:center;}
.acc-tb-btn:hover{background:var(--bg3);color:var(--text);}
.acc-tb-btn.active{color:var(--green);}
.acc-tb-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;}
.task-row.expanded{margin:0 !important;border:none !important;border-radius:0 !important;}.acc-tb-popup{background:var(--bg4);margin:12px -16px 0;padding:12px 16px 14px;border:none;border-top:1px solid var(--border);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows 0.25s ease,opacity 0.2s ease,padding 0.25s ease,margin 0.25s ease;overflow:hidden;}.acc-tb-popup.collapsed{grid-template-rows:0fr;opacity:0;padding:0;margin:0;border-top:none;}.acc-tb-popup>*{overflow:hidden;}
.web-task-toolbar{display:flex;gap:6px;flex-wrap:wrap;}
.wtb-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.12s;}
.wtb-btn:hover{background:var(--bg4);}
.wtb-btn.active{background:var(--green-bg);border-color:var(--green-border);}
.task-check{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,0.28);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.15s;}
.task-check:hover{border-color:var(--green);}
.task-check.done{background:var(--green);border-color:var(--green);}
.t-info{flex:1;min-width:0;}
.t-name{font-size:15px;font-weight:600;color:#fff;letter-spacing:-0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-name.done{text-decoration:line-through;color:var(--text3);}
.t-meta{font-size:12px;font-weight:600;color:#9a9aa2;margin-bottom:3px;}
.t-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.prio-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.prio-dot.high{background:var(--red);}
.prio-dot.med{background:var(--amber);}
.prio-dot.low{background:var(--green);}
.t-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.tb-g{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.tb-b{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.tb-r{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.tb-y{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.tb-x{background:var(--bg3);color:var(--text3);border:1px solid var(--border2);}
.t-assignee{width:24px;height:24px;border-radius:50%;background:var(--green-bg);color:var(--green);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--green-border);}

/* ── PROJECT PAGE ── */
.proj-page-hero{border-radius:var(--r-xl);padding:24px;margin-bottom:24px;position:relative;overflow:hidden;}
.proj-page-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;}
.proj-page-hero.c-g{background:linear-gradient(145deg,#123f2a,#0a2418 60%,#06150e);border:1px solid rgba(53,182,121,0.14);}
.proj-page-hero.c-g::before{background:radial-gradient(circle,rgba(53,182,121,0.13) 0%,transparent 70%);}
.proj-page-hero.c-t{background:linear-gradient(145deg,#013650,#001f2d 60%,#00121b);border:1px solid rgba(4,155,229,0.14);}
.proj-page-hero.c-t::before{background:radial-gradient(circle,rgba(4,155,229,0.13) 0%,transparent 70%);}
.proj-page-hero.c-p{background:linear-gradient(145deg,#2a2e47,#181a28 60%,#0e1018);border:1px solid rgba(121,134,203,0.14);}
.proj-page-hero.c-p::before{background:radial-gradient(circle,rgba(121,134,203,0.13) 0%,transparent 70%);}
.proj-page-hero.c-a{background:linear-gradient(145deg,#56420c,#312607 60%,#1d1604);border:1px solid rgba(246,191,37,0.14);}
.proj-page-hero.c-a::before{background:radial-gradient(circle,rgba(246,191,37,0.13) 0%,transparent 70%);}
.proj-page-hero.c-r{background:linear-gradient(145deg,#502b28,#2e1817 60%,#1b0e0d);border:1px solid rgba(230,124,115,0.14);}
.proj-page-hero.c-r::before{background:radial-gradient(circle,rgba(230,124,115,0.13) 0%,transparent 70%);}
.proj-page-hero.c-c{background:linear-gradient(145deg,#161c3f,#0c1024 60%,#070915);border:1px solid rgba(63,81,181,0.14);}
.proj-page-hero.c-c::before{background:radial-gradient(circle,rgba(63,81,181,0.13) 0%,transparent 70%);}
.hero-top{display:flex;align-items:flex-start;gap:14px;position:relative;z-index:1;}
.hero-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.hero-title{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.5px;}
.hero-desc{font-size:13px;color:rgba(255,255,255,0.45);margin-top:2px;}
.hero-stats{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1;}
.hero-stat{background:rgba(255,255,255,0.06);border-radius:10px;padding:10px 14px;text-align:center;}
.hero-stat-num{font-size:20px;font-weight:800;color:var(--text);}
.hero-stat-lbl{font-size:10px;color:rgba(255,255,255,0.38);margin-top:1px;}
.hero-prog{margin-top:16px;position:relative;z-index:1;}
.hero-prog-bar{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;margin-top:6px;}
.hero-prog-fill{height:5px;border-radius:3px;}
.hero-prog-lbl{font-size:11px;color:rgba(255,255,255,0.4);}

/* ── CHECKLIST ── */
.cl-group{margin-bottom:14px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg2);transition:box-shadow 150ms ease-out;}
.cl-group:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.cl-group-hdr{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;transition:background 150ms ease-out;}
.cl-group-hdr:hover{background:var(--bg3);}
.cl-group-title{flex:1;font-size:15px;font-weight:700;color:var(--text);}
.cl-group-count{font-size:11px;color:var(--text3);background:var(--bg3);padding:2px 10px;border-radius:20px;}
.cl-group-arr{font-size:12px;color:var(--text4);transition:transform 200ms ease-out;}
.cl-group-arr.open{transform:rotate(90deg);}
.cl-group-body{padding:0 18px 16px;}
.cl-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg3);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all 150ms ease-out;}
.cl-item:hover{background:var(--bg4);transform:translateX(2px);}
.cl-item:active{transform:scale(0.99);}
.cl-item-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.cl-item-icon.green{background:var(--green-bg);color:var(--green);}
.cl-item-info{flex:1;min-width:0;}
.cl-item-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-item-desc{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-item-progress{font-size:11px;font-weight:600;color:var(--green);flex-shrink:0;}
.cl-empty{text-align:center;padding:20px;color:var(--text4);font-size:13px;}
.cl-detail-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;margin-bottom:6px;transition:all 150ms ease-out;background:var(--bg3);}
.cl-detail-item:hover{background:var(--bg4);}
.cl-detail-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--border3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 150ms ease-out;}
.cl-detail-check.done{background:var(--green);border-color:var(--green);}
.cl-detail-check:hover{border-color:var(--green);}
.cl-detail-text{flex:1;font-size:14px;color:var(--text);}
.cl-detail-text.done{text-decoration:line-through;color:var(--text3);}
.check-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.check-item:last-child{border-bottom:none;}
.check-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border3);background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.check-box.checked{background:var(--green);border-color:var(--green);}
.check-lbl{font-size:13px;color:var(--text);flex:1;}
.check-lbl.done{color:var(--text3);text-decoration:line-through;}
.check-sub{font-size:11px;color:var(--text4);margin-top:2px;}

/* ── COURSES ── */
.course-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:10px;display:flex;gap:16px;align-items:flex-start;}
.course-num{font-size:24px;font-weight:800;color:var(--bg4);min-width:32px;line-height:1;}
.course-info{flex:1;}
.course-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;}
.course-desc{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:10px;}
.course-link{font-size:13px;font-weight:700;color:var(--green);cursor:pointer;text-decoration:none;}
.course-link:hover{opacity:0.8;}

/* ── IDEAS ── */
.idea-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:10px;cursor:pointer;transition:background 0.12s;position:relative;}
.idea-card:hover{background:var(--bg3);}
.idea-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;padding-right:32px;}
.idea-text{font-size:13px;color:var(--text3);line-height:1.6;margin-bottom:8px;}
.idea-meta{font-size:11px;color:rgba(255,255,255,0.35);}
.idea-del{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--red-bg);border:1px solid var(--red-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--red);font-size:12px;}

/* ── NOTES ── */
.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.task-grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}.note-card.dragging{opacity:0.4;transform:scale(0.95);}
.note-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:background 0.12s;min-height:100px;display:flex;flex-direction:column;}
.note-card:hover{background:var(--bg3);}.note-card.expanded:hover{background:var(--bg2)!important;transform:none!important;box-shadow:none!important;}
.note-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.note-preview{font-size:12px;color:var(--text3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.note-date{font-size:10px;color:var(--text4);margin-top:10px;}

/* ── PROFILE ── */
.profile-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:var(--r-xl);padding:28px;text-align:center;margin-bottom:20px;}
.profile-av{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#1a4a2e,#0d3320);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:24px;font-weight:800;margin:0 auto 14px;}
.profile-name{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin-bottom:4px;}
.profile-role{font-size:13px;color:var(--text3);margin-bottom:22px;}
.stats-row{display:flex;gap:10px;justify-content:center;}
.stat-block{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);border-radius:var(--r-lg);padding:14px 20px;text-align:center;}
.stat-num{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-0.5px;}
.stat-lbl{font-size:10px;color:var(--text3);margin-top:2px;font-weight:600;}
.menu-section{margin-bottom:20px;}
.menu-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:var(--r-lg);padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:8px;cursor:pointer;transition:background 0.12s;}
.menu-item:hover{background:var(--bg3);}
.menu-ico{font-size:18px;width:38px;height:38px;background:var(--bg3);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.menu-text{font-size:14px;font-weight:600;color:var(--text);flex:1;}
.menu-arr{color:var(--text4);}

/* ── MODAL / OVERLAY ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;display:none;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-xl);padding:28px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;scrollbar-width:none;}
.modal::-webkit-scrollbar{display:none;}
.modal-title{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin-bottom:22px;}
.modal-label{font-size:11px;font-weight:700;letter-spacing:0.8px;color:var(--text3);text-transform:uppercase;margin-bottom:8px;margin-top:16px;}
.inp{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:11px 14px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color 0.15s;}
.inp:focus{border-color:rgba(74,222,128,0.4);}
textarea.inp{min-height:80px;resize:vertical;line-height:1.5;}
.prio-row{display:flex;gap:8px;}
.prio-btn{flex:1;padding:9px;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);color:var(--text3);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.prio-btn.sel-low{background:var(--green-bg);border-color:var(--green-border);color:var(--green);}
.prio-btn.sel-med{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber);}
.prio-btn.sel-high{background:var(--red-bg);border-color:var(--red-border);color:var(--red);}
.save-btn{width:100%;padding:13px;border-radius:12px;background:var(--green);border:none;color:#000;font-size:14px;font-weight:800;cursor:pointer;margin-top:20px;font-family:inherit;transition:opacity 0.15s;}
.save-btn:hover{opacity:0.9;}
.cancel-btn{width:100%;padding:13px;border-radius:12px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:14px;font-weight:700;cursor:pointer;margin-top:8px;font-family:inherit;}
.select-inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}

/* ── ICON GRID ── */
.icon-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.ico-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all 0.13s;}
.ico-btn:hover,.ico-btn.active{border-color:var(--green-border);background:var(--green-bg);}

/* ── TASK DETAIL PANEL ── */
.detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:80;display:none;pointer-events:none;}
.detail-overlay.open{display:block;pointer-events:auto;}
.detail-panel{position:fixed;top:0;right:0;width:420px;height:100%;background:var(--bg2);border-left:1px solid var(--border2);z-index:90;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;}
.detail-panel::-webkit-scrollbar{display:none;}
.detail-panel.open{transform:translateX(0);}
.dp-hdr{padding:20px 20px 0;display:flex;justify-content:flex-end;flex-shrink:0;}
.dp-close{width:30px;height:30px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:14px;font-family:inherit;}
.dp-body{padding:16px 24px 32px;flex:1;}
.dp-title{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin-bottom:6px;}
.dp-meta{font-size:12px;color:var(--text3);margin-bottom:14px;}
.dp-desc{font-size:14px;color:var(--text2);line-height:1.7;white-space:pre-wrap;margin-bottom:20px;}
.dp-label{font-size:10px;font-weight:700;letter-spacing:0.9px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;margin-top:18px;}
.dp-tags{display:flex;gap:6px;flex-wrap:wrap;}
.dp-tag{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}
.dp-actions{display:flex;gap:8px;margin-top:24px;}
.dp-btn{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.13s;}
.dp-btn:hover{background:var(--bg4);}
.dp-btn-del{border-color:var(--red-border);color:var(--red);background:var(--red-bg);}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--text);z-index:200;opacity:0;transition:all 0.3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:60px 20px;}
.empty-ico{font-size:40px;margin-bottom:12px;opacity:0.4;}
.empty-text{font-size:14px;color:var(--text3);}

/* ── LOGIN ── */
#web-login{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;align-items:center;justify-content:center;}
.login-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-xl);padding:40px;width:100%;max-width:360px;text-align:center;}
.login-logo{width:52px;height:52px;border-radius:14px;background:#1a4a2e;border:1px solid var(--green-border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.login-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin-bottom:6px;}
.login-sub{font-size:13px;color:var(--text3);margin-bottom:28px;}
.login-error{font-size:12px;color:var(--red);margin-top:8px;display:none;}

.btn-primary{padding:9px 16px;border-radius:10px;background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.15s;}
.btn-primary:hover{background:rgba(74,222,128,0.18);}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}

/* ── NOTE INLINE EXPAND ── */
.note-card { transition: background 0.15s, border-color 0.15s; }
.note-card.expanded {
  grid-column: 1 / -1;
  background: var(--bg2);
  border-color: var(--border);
  cursor: default;
  animation: noteExpand 0.25s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes noteExpand { from { opacity:0.8; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }
@keyframes noteCollapse { from { opacity:1; } to { opacity:0.8; } }
.note-card-expanded-body { animation: fadeIn 0.25s ease both; }
.note-card-collapse-btn { background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;transition:all 0.15s; }
.note-card-collapse-btn:hover { background:var(--bg4);color:var(--text); }
/* Allow text selection in expanded notes and checklists (mobile long-press copy) */
.note-card.expanded { cursor:default; }
.note-card.expanded .note-card-expanded-body,
.note-card.expanded [id^="note-inline-body-"],
.note-card.expanded [id^="cl-inline-body-"],
.note-card.expanded .note-card-expanded-body *,
.note-card.expanded [id^="note-inline-body-"] *,
.note-card.expanded [id^="cl-inline-body-"] * {
  user-select:text;
  -webkit-user-select:text;
  -webkit-touch-callout:default;
}
.note-card.expanded .note-card-expanded-body button,
.note-card.expanded [id^="note-inline-body-"] button,
.note-card.expanded [id^="cl-inline-body-"] button { user-select:none; -webkit-user-select:none; }

/* ── TOOLBAR EXPAND ── */
.acc-tb-wrap { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow:hidden; }
.acc-tb-toggle { width:32px; height:32px; border-radius:50%; background:var(--bg3); border:1px solid var(--border2); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text3); flex-shrink:0; transition:all 0.2s; }
.acc-tb-toggle:hover { background:var(--bg4); color:var(--text); }
.acc-tb-icons { display:flex; gap:4px; overflow:hidden; max-width:0; opacity:0; transition:max-width 0.35s ease, opacity 0.25s; }
.acc-tb-icons.open { max-width:600px; opacity:1; }
.acc-tb-btn { transition:background 0.15s, color 0.15s, transform 0.15s, opacity 0.15s; }
.acc-tb-icons .acc-tb-btn { transform:scale(0.85); opacity:0; transition:transform 0.2s ease, opacity 0.2s, background 0.15s, color 0.15s; }
.acc-tb-icons.open .acc-tb-btn { transform:scale(1); opacity:1; }
.acc-tb-icons.open .acc-tb-btn:nth-child(1){transition-delay:0.02s}
.acc-tb-icons.open .acc-tb-btn:nth-child(2){transition-delay:0.05s}
.acc-tb-icons.open .acc-tb-btn:nth-child(3){transition-delay:0.08s}
.acc-tb-icons.open .acc-tb-btn:nth-child(4){transition-delay:0.11s}
.acc-tb-icons.open .acc-tb-btn:nth-child(5){transition-delay:0.14s}
.acc-tb-icons.open .acc-tb-btn:nth-child(6){transition-delay:0.17s}
.acc-tb-icons.open .acc-tb-btn:nth-child(7){transition-delay:0.20s}
.acc-tb-icons.open .acc-tb-btn:nth-child(8){transition-delay:0.23s}
.acc-tb-icons.open .acc-tb-btn:nth-child(9){transition-delay:0.26s}

/* ── ANIMATED CHECKBOX ── */
.anim-check-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; padding:6px 0; border-bottom:1px solid var(--border); }
.anim-check-wrap:last-child { border-bottom:none; }
.anim-check-box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border3); background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1); position:relative; overflow:hidden; }
.anim-check-wrap:hover .anim-check-box { border-color:var(--green); transform:scale(1.1); }
.anim-check-box.checked { background:var(--green); border-color:var(--green); transform:scale(1); }
.anim-check-svg { width:10px; height:10px; }
.anim-check-path { stroke:#000; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset 0.25s ease-out; }
.anim-check-box.checked .anim-check-path { stroke-dashoffset:0; }
.anim-check-label { font-size:13px; color:var(--text2); position:relative; transition:color 0.2s; }
.anim-check-label.done { color:var(--text3); }
.anim-check-strike { position:absolute; left:0; top:50%; height:1.5px; background:var(--text3); transform:translateY(-50%); width:0; transition:width 0.25s cubic-bezier(0.34,1.2,0.64,1); border-radius:1px; }
.anim-check-label.done .anim-check-strike { width:100%; }

/* ── STEP WIZARD ── */
.wizard-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:100; display:none; align-items:center; justify-content:center; }
.wizard-overlay.open { display:flex; }
.wizard-box { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r-xl); padding:32px; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; scrollbar-width:none; animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both; }
.wizard-box::-webkit-scrollbar { display:none; }
.wizard-progress { display:flex; align-items:center; gap:0; margin-bottom:28px; position:relative; }
.wizard-step-dot { width:8px; height:8px; border-radius:50%; background:var(--border3); position:relative; z-index:1; flex-shrink:0; transition:background 0.3s; }
.wizard-step-dot.active { background:#fff; }
.wizard-step-dot.done { background:var(--green); }
.wizard-step-line { flex:1; height:2px; background:var(--border3); transition:background 0.4s; }
.wizard-step-line.done { background:var(--green); }
.wizard-progress-fill { position:absolute; left:0; top:50%; transform:translateY(-50%); height:22px; background:var(--green); border-radius:20px; transition:width 0.45s cubic-bezier(0.34,1.2,0.64,1); z-index:0; opacity:0.15; }
.wizard-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-0.4px; margin-bottom:6px; }
.wizard-subtitle { font-size:13px; color:var(--text3); margin-bottom:24px; }
.wizard-body { animation:fadeIn 0.2s ease both; }
.wizard-footer { display:flex; gap:8px; margin-top:24px; }
.wizard-btn-back { padding:12px 20px; border-radius:12px; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.15s, transform 0.1s; }
.wizard-btn-back:hover { background:var(--bg4); }
.wizard-btn-back:active { transform:scale(0.96); }
.wizard-btn-next { flex:1; padding:12px; border-radius:12px; background:var(--green-bg); border:1px solid var(--green-border); color:var(--green); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background 0.15s, transform 0.1s; display:flex; align-items:center; justify-content:center; gap:8px; }
.wizard-btn-next:hover { background:rgba(255,255,255,0.20); }
.wizard-btn-next:active { transform:scale(0.97); }

/* ── LOGIN BUTTON ── */
.login-motion-btn { position:relative; height:52px; width:100%; cursor:pointer; border-radius:100px; border:none; background:#363b3b; outline:none; margin-top:16px; overflow:hidden; }
.login-motion-circle { display:none; position:absolute; left:4px; top:4px; width:44px; height:44px; border-radius:50%; background:#fbbf24; transition:width 0.5s cubic-bezier(0.34,1.1,0.64,1); }
.login-motion-btn:hover .login-motion-circle { width:calc(100% - 8px); }
.login-motion-arrow { display:none; position:absolute; left:10px; top:50%; transform:translateY(-50%); transition:transform 0.5s cubic-bezier(0.34,1.1,0.64,1); color:#000; display:flex; }
.login-motion-btn:hover .login-motion-arrow { transform:translateY(-50%) translateX(4px); }
.login-motion-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:15px; font-weight:700; color:#fff; font-family:inherit; white-space:nowrap; }
.login-motion-btn:hover .login-motion-label { color:#fff; }

/* ── BG PATTERN ── */
.bg-pattern { position:absolute; inset:0; z-index:0; pointer-events:none; }
.bg-pattern-dots { background-image:radial-gradient(var(--border2) 1px, transparent 1px); background-size:24px 24px; }
.bg-pattern-grid { background-image:linear-gradient(to right,var(--border) 1px,transparent 1px),linear-gradient(to bottom,var(--border) 1px,transparent 1px); background-size:32px 32px; }
.bg-fade-edges { mask-image:radial-gradient(ellipse at center, transparent 20%, var(--bg) 75%); -webkit-mask-image:radial-gradient(ellipse at center, transparent 20%, var(--bg) 75%); }
.bg-fade-center { mask-image:radial-gradient(ellipse at center, var(--bg) 30%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at center, var(--bg) 30%, transparent 70%); }

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInFast {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.96); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes popIn {
  0%   { opacity:0; transform:scale(0.92) translateY(6px); }
  60%  { transform:scale(1.02) translateY(-1px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

/* Page transitions */
.page.active { animation: fadeIn 0.22s ease both; }

/* Modal animation */
.overlay.open .modal { animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Detail panel already has CSS transform transition */

/* Task rows */
.task-row { transition: background 0.15s, transform 0.12s, box-shadow 0.15s; }
.task-row:hover { background:#26262b; transform:translateX(2px); }
.task-accordion { animation: fadeIn 0.18s ease both; }

/* Task check animation */
.task-check { transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1); }
.task-check:hover { border-color:var(--green); transform:scale(1.1); }
.task-check.done { transform:scale(1); }

/* Project cards */
.proj-card { transition: transform 0.18s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.18s, border-color 0.18s; }
.proj-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.4); }

/* Focus cards */
.focus-card-anim { animation: slideInRight 0.2s ease both; }

/* Sidebar items */
.sb-item { transition: background 0.15s, color 0.15s, padding-left 0.15s; }
.sb-item:hover { padding-left:14px; }
.sb-item.active { padding-left:12px; }

/* Buttons */
.tb-btn { transition: background 0.15s, color 0.15s, transform 0.1s; }
.tb-btn:active { transform:scale(0.95); }
.tb-btn-green:hover { background:rgba(74,222,128,0.18); }
.save-btn { transition: opacity 0.15s, transform 0.1s; }
.save-btn:active { transform:scale(0.98); }
.cancel-btn { transition: background 0.15s; }
.acc-tb-btn { transition: background 0.15s, color 0.15s, transform 0.1s; }
.acc-tb-btn:active { transform:scale(0.88); }

/* Toolbar icons - grow on hover */
.acc-tb-btn:hover svg { transform:scale(1.15); }
.acc-tb-btn svg { transition:transform 0.15s; }

/* Checklist items */
.check-item { transition: background 0.13s; }
.check-box { transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1); }
.check-box:hover { border-color:var(--green); transform:scale(1.08); }

/* Note cards */
.note-card { transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.note-card:hover { background:var(--bg3); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.3); }
.note-card.expanded:hover { background:var(--bg2)!important; transform:none!important; box-shadow:none!important; }

/* Idea cards */
.idea-card { transition: background 0.15s, transform 0.12s; }
.idea-card:hover { background:var(--bg3); transform:translateX(2px); }

/* Menu items */
.menu-item { transition: background 0.15s, transform 0.12s; }
.menu-item:hover { background:var(--bg3); transform:translateX(3px); }

/* Filter chips */
.filter-chip { transition: all 0.15s; }
.filter-chip:hover { transform:translateY(-1px); }
.filter-chip.active { box-shadow:none; }

/* Toast animation - already exists, enhance */
.toast { transition: all 0.28s cubic-bezier(0.34,1.3,0.64,1); }

/* Task group header */
.tg-hdr { transition: background 0.12s; }
.tg-arrow { transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1); }

/* Detail panel overlay fade */
.detail-overlay { transition: opacity 0.25s; opacity:0; }
.detail-overlay.open { opacity:1; }

/* Input focus glow */
.inp { transition: border-color 0.18s, box-shadow 0.18s; }
.inp:focus { border-color:rgba(74,222,128,0.4); box-shadow:0 0 0 3px rgba(74,222,128,0.06); }

/* Sublist items */
.sb-subitem { transition: background 0.13s, color 0.13s, padding-left 0.13s; }
.sb-subitem:hover { padding-left:32px; }

/* Progress bars animate on load */
@keyframes progressFill {
  from { width:0; }
}
.hero-prog-fill { animation: progressFill 0.6s cubic-bezier(0.4,0,0.2,1) both; animation-delay:0.1s; }

/* Stagger task rows */
.task-row:nth-child(1) { animation-delay:0.00s; }
.task-row:nth-child(2) { animation-delay:0.03s; }
.task-row:nth-child(3) { animation-delay:0.06s; }
.task-row:nth-child(4) { animation-delay:0.09s; }
.task-row:nth-child(5) { animation-delay:0.12s; }
.task-row { animation: fadeIn 0.2s ease both; }

/* ── COLLAPSIBLE SIDEBAR ── */
.sb-section-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 8px 6px; cursor:pointer; user-select:none; }
.sb-section-hdr:hover .sb-section-arrow { color:var(--text3); }
.sb-section-lbl { font-size:10px; font-weight:700; letter-spacing:1.1px; color:var(--text4); text-transform:uppercase; }
.sb-section-arrow { font-size:10px; color:var(--text4); transition:transform 0.2s; }
.sb-section-arrow.open { transform:rotate(90deg); }
.sb-section-body { overflow:hidden; max-height:0; transition:max-height 0.3s ease; }
.sb-section-body.open { max-height:600px; }


/* ── CALENDAR ── */
.cal-wrap{display:flex;flex-direction:column;height:calc(100vh - 140px);user-select:none;-webkit-user-select:none;}
.cal-wrap ::selection{background:transparent;}
.cal-hdr{padding:12px 32px 14px;margin:0 -32px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;position:sticky;top:0;z-index:20;background:rgba(16,16,20,0.55);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,0.06);}
#page-calendar{padding-top:0;}
#page-calendar .sec-hdr{padding:24px 0 0;margin-bottom:16px;}
.cal-filter-lbl{background:none;border:none;color:var(--text3);font-size:13px;font-weight:500;cursor:pointer;padding:4px 0;font-family:inherit;transition:color 0.12s;display:inline-flex;align-items:center;gap:6px;}
.cal-filter-lbl:hover{color:var(--text);}
.cal-filter-lbl .cal-filter-val{color:var(--text);font-weight:600;}
.cal-filter-pop{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:4px;box-shadow:0 12px 36px rgba(0,0,0,0.4);z-index:100;min-width:200px;max-height:320px;overflow-y:auto;}
.cal-hdr-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.cal-hdr-title{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-arrow{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-family:inherit;transition:all 150ms ease-out;}
.cal-arrow:hover{background:rgba(255,255,255,0.12);color:var(--text);transform:scale(1.05);}
.cal-arrow:active{transform:scale(0.95);}
.cal-pill{display:flex;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:3px;gap:2px;}
.cal-pill-btn{padding:6px 18px;border-radius:8px;border:none;background:none;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 200ms ease-out;}
.cal-pill-btn:hover{color:var(--text2);}
.cal-pill-btn.act{background:rgba(255,255,255,0.12);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.cal-today-chip{padding:6px 16px;border-radius:8px;background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;}
.cal-today-chip:hover{opacity:0.85;}.cal-today-chip:active{transform:scale(0.97);}
.cal-cols{display:flex;background:var(--bg);}
.cal-col-time{width:52px;flex-shrink:0;}
.cal-col-day{flex:1;min-width:0;text-align:center;padding:12px 0 10px;border-left:1px solid var(--border);cursor:pointer;transition:background 0.12s;}
.cal-col-day:hover{background:var(--bg2);}
.cal-col-day .cal-wd{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text4);}
.cal-col-day .cal-dn{font-size:22px;font-weight:800;color:var(--text);margin-top:2px;line-height:1;}
.cal-col-day.is-today .cal-wd{color:var(--green);}
.cal-col-day.is-today .cal-dn{color:var(--green);}
.cal-cols.day-view .cal-col-day{cursor:default;}
.cal-cols.day-view .cal-col-day:hover{background:transparent;}
.cal-cols.day-view .cal-col-day.is-today .cal-dn{color:var(--text);}
.cal-cols.day-view .cal-col-day.is-today .cal-wd{color:var(--text4);}
.cal-col-day.is-weekend{background:rgba(255,255,255,0.015);}
[data-theme="light"] .cal-col-day.is-weekend{background:rgba(0,0,0,0.015);}
.cal-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;}
.cal-body::-webkit-scrollbar{width:4px;}.cal-body::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}
.cal-row-time{width:52px;flex-shrink:0;text-align:right;padding-right:10px;font-size:10px;color:var(--text4);font-weight:500;position:relative;top:-6px;}
.cal-row-slot{flex:1;min-width:0;border-left:1px solid var(--border);position:relative;cursor:pointer;transition:background 100ms ease-out;}
.cal-row-slot:hover{background:var(--bg2);}
.cal-row-slot{overflow:visible;}
.cal-row-slot.past{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(128,128,128,0.08) 6px,rgba(128,128,128,0.08) 7px);cursor:not-allowed;}
.cal-row-slot.past:hover{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(128,128,128,0.05) 6px,rgba(128,128,128,0.05) 7px);}
.cal-row-time.past{color:var(--text4);text-decoration:line-through;opacity:0.5;}
.cal-now{position:absolute;left:52px;right:0;height:2px;background:var(--red);z-index:5;pointer-events:none;}
.cal-now::before{content:'';position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--red);animation:calPulse 2s ease-in-out infinite;}
@keyframes calPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.3);}}
.cal-ev{position:absolute;left:3px;right:3px;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;cursor:grab;overflow:hidden;z-index:3;transition:all 0.15s ease;line-height:1.3;min-height:20px;border-left:3px solid transparent;touch-action:none;user-select:none;}.cal-ev:active{cursor:grabbing;}.cal-ev.dragging{visibility:hidden;transition:none !important;}
.cal-ev-ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0.85;box-shadow:0 12px 32px rgba(0,0,0,0.35);transition:none;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;overflow:hidden;border-left:3px solid transparent;will-change:transform;}
body.cal-dragging .cal-row-slot:hover{background:transparent!important;}
body.cal-dragging .cal-row-slot{transition:none!important;}
body.cal-dragging{cursor:grabbing!important;}
.cal-drop-placeholder{position:absolute;left:3px;right:3px;border:2px dashed #ffffff;background:rgba(255,255,255,0.12);border-radius:8px;pointer-events:none;z-index:1;transition:top 0.1s ease-out,height 0.1s ease-out;box-sizing:border-box;}
.focus-ring-wrap{position:relative;width:36px;height:36px;flex-shrink:0;}
.cal-ev:hover{box-shadow:0 4px 16px rgba(0,0,0,0.3);transform:scale(1.02);z-index:7;}
.cal-ev:active{transform:scale(0.98);}
.cal-ev-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;}
.cal-ev-time{font-size:9px;opacity:0.65;color:#fff;margin-top:1px;}
.cal-ev-resize,.cal-ev-resize-top{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:4;}
.cal-ev:hover .cal-ev-resize,.cal-ev:hover .cal-ev-resize-top{background:rgba(255,255,255,0.12);}
.cal-ev:hover .cal-ev-resize::after{content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:18px;height:2px;border-radius:2px;background:rgba(255,255,255,0.6);}
.cal-ev:hover .cal-ev-resize-top::after{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);width:18px;height:2px;border-radius:2px;background:rgba(255,255,255,0.6);}

.cal-focus-block{position:absolute;border-radius:6px;padding:3px 6px;box-sizing:border-box;font-size:11px;font-weight:600;overflow:hidden;cursor:default;z-index:2;}
.cal-break-block{position:absolute;border-radius:4px;padding:2px 6px;box-sizing:border-box;font-size:10px;overflow:hidden;cursor:default;opacity:0.6;z-index:1;}
.cal-mc-dots{display:flex;gap:3px;justify-content:center;margin-top:2px;}
.cal-mc-dot{width:5px;height:5px;border-radius:50%;}
.cal-ev-resize{bottom:0;border-radius:0 0 8px 8px;}.cal-ev-resize-top{top:0;border-radius:8px 8px 0 0;}
.cal-ev.is-focus{background:rgba(251,191,36,0.2)!important;border-left:3px solid var(--green)!important;}
.cal-ev.is-focus .cal-ev-title,.cal-ev.is-focus .cal-ev-time{color:var(--green)!important;}
.cal-popup{position:absolute;z-index:50;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:16px;width:320px;max-width:90vw;overflow-wrap:break-word;word-break:break-word;box-shadow:0 16px 48px rgba(0,0,0,0.4);animation:fadeIn 150ms ease-out;}

.cal-popup .cf-inline-inp{padding:0!important;margin:0!important;background:none!important;border:none!important;border-radius:0!important;width:auto!important;font-size:12px!important;color:var(--text3)!important;outline:none!important;}
.cal-popup input,.cal-popup select,.cal-popup textarea{width:100%;padding:9px 12px;border-radius:10px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-size:13px;font-family:inherit;outline:none;margin-bottom:8px;transition:border-color 150ms ease-out;}
.cal-popup input:focus,.cal-popup select:focus,.cal-popup textarea:focus{border-color:var(--green-border);}
.cal-popup-label{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--text4);margin-bottom:6px;display:block;}
.cal-popup-btns{display:flex;gap:8px;margin-top:4px;}
.cal-popup-btns button{flex:1;padding:9px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:none;transition:all 150ms ease-out;}
.cal-popup-btns button:active{transform:scale(0.97);}
.cal-popup-save{background:var(--green);color:#000;}.cal-popup-cancel{background:var(--bg3);border:1px solid var(--border2)!important;color:var(--text3);}
.cal-task-popup{width:320px;background:#26282C;border-color:rgba(255,255,255,0.07);}
.cal-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:14px;overflow:hidden;}
.cal-mg-hdr{background:var(--bg);text-align:center;padding:10px 0;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text4);}
.cal-mc{background:var(--bg);padding:6px;min-height:100px;cursor:pointer;transition:background 120ms ease-out;}
.cal-mc:hover{background:var(--bg2);}
.cal-mc.today{background:var(--bg2);}
.cal-mc.other{opacity:0.2;}
.cal-mc-day{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:4px;}
.cal-mc.today .cal-mc-day{color:#000;background:var(--green);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;}
.cal-mc-lbl{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text3);margin-bottom:2px;padding:2px 5px;border-radius:4px;}


/* ── HOME UPGRADE ── */
.home-greeting{margin-bottom:24px;}
.home-greeting-text{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-0.5px;}
.home-greeting-sub{font-size:13px;color:var(--text3);margin-top:4px;display:flex;gap:16px;flex-wrap:wrap;}
.home-greeting-sub span{display:flex;align-items:center;gap:4px;}
.home-today{margin-bottom:24px;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;}
.home-today-title{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text4);margin-bottom:12px;}
.home-today-list{display:flex;flex-direction:column;gap:6px;}
.home-today-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background 150ms ease-out;}
.home-today-item:hover{background:var(--bg3);}
.home-today-item:active{transform:scale(0.98);}
.home-today-time{font-size:11px;font-weight:600;color:var(--text3);min-width:40px;}
.home-today-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.home-today-name{font-size:13px;font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-today-empty{font-size:13px;color:var(--text4);padding:8px 0;}
.prog-ring{position:relative;width:30px;height:30px;flex-shrink:0;}
.prog-ring svg{transform:rotate(-90deg);}
.prog-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;}
.home-activity{margin-top:24px;}
.home-activity-title{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text4);margin-bottom:12px;}
.home-act-item{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:var(--text3);}
.home-act-av{width:24px;height:24px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--text2);flex-shrink:0;}

/* ── TASKS UPGRADE ── */
.task-sort-btns{display:flex;gap:4px;margin-left:8px;}
.task-sort-btn{padding:4px 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;white-space:nowrap;}
.task-sort-btn:hover{color:var(--text2);}
.task-sort-btn.active{background:var(--green-bg);border-color:var(--green-border);color:var(--green);}
.kanban-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;}
.kanban-col{min-width:260px;flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.kanban-col-hdr{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:8px;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.kanban-col-hdr .kanban-count{font-size:10px;background:var(--bg3);padding:1px 7px;border-radius:10px;color:var(--text3);}
.kanban-task{padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform 150ms ease-out,box-shadow 150ms ease-out;}
.kanban-task:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.kanban-task:active{transform:scale(0.98);}
.kanban-task-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.kanban-task-meta{font-size:10px;color:var(--text3);display:flex;gap:6px;align-items:center;}
.kanban-task-prio{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.task-view-toggle{display:flex;background:var(--bg3);border-radius:8px;padding:2px;gap:2px;}
.task-view-btn{padding:4px 12px;border-radius:6px;border:none;background:none;color:var(--text3);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;}
.task-view-btn.active{background:var(--bg2);color:var(--text);}
.mass-action-btns{display:flex;gap:6px;flex-wrap:wrap;}
.mass-act-btn{padding:6px 12px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;}
.mass-act-btn:hover{background:var(--bg4);color:var(--text);}
.mass-act-btn:active{transform:scale(0.97);}

/* ── PROJECT & FOCUS UPGRADE ── */
.hero-members{display:flex;gap:-6px;margin-top:12px;}
.hero-member-av{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--text2);margin-left:-6px;}
.hero-member-av:first-child{margin-left:0;}
.pinned-section{margin:0 auto 16px;padding:12px;background:var(--bg2);border:1px solid var(--green-border);border-radius:14px;width:min(var(--task-col,560px),100%);box-sizing:border-box;}
.pinned-title{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--green);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
.focus-stats-bar{display:flex;gap:16px;padding:12px 24px;margin-bottom:8px;}
.focus-stat{text-align:center;}
.focus-stat-num{font-size:18px;font-weight:800;color:var(--green);}
.focus-stat-lbl{font-size:10px;color:var(--text3);margin-top:2px;}
.focus-quick-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:12px;color:var(--green);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;margin:0 24px 16px;}
.focus-quick-btn:hover{opacity:0.85;}.focus-quick-btn:active{transform:scale(0.97);}
.focus-ambient{display:flex;gap:8px;padding:0 24px;margin-bottom:16px;}
.focus-amb-btn{padding:6px 14px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 150ms ease-out;}
.focus-amb-btn.active{background:var(--green-bg);border-color:var(--green-border);color:var(--green);}

/* ── AI CHECKLIST ── */
.ai-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;align-items:center;justify-content:center;}
.ai-overlay.open{display:flex;}
.ai-popup{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:24px;width:420px;max-width:92vw;max-height:85vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.5);animation:fadeIn 200ms ease-out;}
.ai-popup-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.ai-popup-sub{font-size:12px;color:var(--text3);margin-bottom:16px;}
.ai-textarea{width:100%;min-height:80px;padding:12px;border-radius:12px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-size:13px;font-family:inherit;resize:vertical;outline:none;transition:border-color 150ms;}
.ai-textarea:focus{border-color:var(--green-border);}
.ai-btn{width:100%;padding:12px;border-radius:12px;border:none;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:12px;transition:all 150ms ease-out;display:flex;align-items:center;justify-content:center;gap:8px;}
.ai-btn:active{transform:scale(0.97);}
.ai-btn-primary{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;}
.ai-btn-primary:hover{opacity:0.9;}
.ai-btn-secondary{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);margin-top:8px;}
.ai-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--text3);font-size:13px;}
.ai-loading-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:aiBounce 1.2s infinite;}
.ai-loading-dot:nth-child(2){animation-delay:0.2s;}
.ai-loading-dot:nth-child(3){animation-delay:0.4s;}
@keyframes aiBounce{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}
.ai-result-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;margin-bottom:6px;}
.ai-result-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--green-border);flex-shrink:0;margin-top:2px;background:var(--green-bg);}
.ai-result-text{flex:1;}
.ai-result-title{font-size:13px;font-weight:600;color:var(--text);}
.ai-result-desc{font-size:11px;color:var(--text3);margin-top:2px;}

.cl-card{background:var(--bg3);border-radius:12px;margin-bottom:8px;overflow:hidden;}
.cl-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;transition:background 150ms ease-out;}
.cl-card-hdr:hover{background:var(--bg4);}
.cl-card-title{font-size:14px;font-weight:600;color:var(--text);}
.cl-card-desc{font-size:11px;color:var(--text3);margin-top:2px;}
.cl-card-progress{font-size:11px;font-weight:700;color:var(--green);flex-shrink:0;background:var(--green-bg);padding:2px 8px;border-radius:6px;}
.cl-card-arr{font-size:12px;color:var(--text4);transition:transform 200ms ease-out;flex-shrink:0;}
.cl-card-body{padding:8px 14px 14px;border-top:1px solid var(--border);}
/* ── LIGHT THEME CARDS ── */

[data-theme="light"] .proj-card.c-new{background:transparent;border:1px dashed #d0d0d2;}
[data-theme="light"] .proj-card.c-g{background:#35B679;border:1px solid #35B679;}
[data-theme="light"] .proj-card.c-g::before{background:none;}
[data-theme="light"] .proj-card.c-g .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-g .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-t{background:#049BE5;border:1px solid #049BE5;}
[data-theme="light"] .proj-card.c-t::before{background:none;}
[data-theme="light"] .proj-card.c-t .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-t .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-p{background:#7986CB;border:1px solid #7986CB;}
[data-theme="light"] .proj-card.c-p::before{background:none;}
[data-theme="light"] .proj-card.c-p .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-p .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-a{background:#F6BF25;border:1px solid #F6BF25;}
[data-theme="light"] .proj-card.c-a::before{background:none;}
[data-theme="light"] .proj-card.c-a .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-a .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-r{background:#E67C73;border:1px solid #E67C73;}
[data-theme="light"] .proj-card.c-r::before{background:none;}
[data-theme="light"] .proj-card.c-r .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-r .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-c{background:#3F51B5;border:1px solid #3F51B5;}
[data-theme="light"] .proj-card.c-c::before{background:none;}
[data-theme="light"] .proj-card.c-c .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-c .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-v{background:#8E24AA;border:1px solid #8E24AA;}
[data-theme="light"] .proj-card.c-v::before{background:none;}
[data-theme="light"] .proj-card.c-v .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-v .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-card.c-x{background:#616161;border:1px solid #616161;}
[data-theme="light"] .proj-card.c-x::before{background:none;}
[data-theme="light"] .proj-card.c-x .card-name{color:#fff;}
[data-theme="light"] .proj-card.c-x .card-sub{color:rgba(255,255,255,0.7);}
[data-theme="light"] .proj-page-hero.c-g{background:#35B679;border:1px solid #35B679;}
[data-theme="light"] .proj-page-hero.c-g::before{background:none;}
[data-theme="light"] .proj-page-hero.c-t{background:#049BE5;border:1px solid #049BE5;}
[data-theme="light"] .proj-page-hero.c-t::before{background:none;}
[data-theme="light"] .proj-page-hero.c-p{background:#7986CB;border:1px solid #7986CB;}
[data-theme="light"] .proj-page-hero.c-p::before{background:none;}
[data-theme="light"] .proj-page-hero.c-a{background:#F6BF25;border:1px solid #F6BF25;}
[data-theme="light"] .proj-page-hero.c-a::before{background:none;}
[data-theme="light"] .proj-page-hero.c-r{background:#E67C73;border:1px solid #E67C73;}
[data-theme="light"] .proj-page-hero.c-r::before{background:none;}
[data-theme="light"] .proj-page-hero.c-c{background:#3F51B5;border:1px solid #3F51B5;}
[data-theme="light"] .proj-page-hero.c-c::before{background:none;}
[data-theme="light"] .proj-page-hero.c-v{background:#8E24AA;border:1px solid #8E24AA;}
[data-theme="light"] .proj-page-hero.c-v::before{background:none;}
[data-theme="light"] .proj-page-hero.c-x{background:#616161;border:1px solid #616161;}
[data-theme="light"] .proj-page-hero.c-x::before{background:none;}
[data-theme="light"] .proj-card .card-ico{background:rgba(255,255,255,0.15)!important;border:none!important;}
[data-theme="light"] .prog-ring-pct{display:none!important;}
[data-theme="light"] .prog-ring svg circle:first-child{stroke:rgba(255,255,255,0.2)!important;}
[data-theme="light"] .prog-ring svg circle:last-of-type{stroke:rgba(255,255,255,0.85)!important;}
[data-theme="light"] .prog-ring.done svg circle:first-child{stroke:rgba(255,255,255,0.2)!important;}
[data-theme="light"] .prog-ring.done svg circle:last-of-type{stroke:#fff!important;}
[data-theme="light"] .proj-page-hero .hero-stat-num{color:#fff!important;}
[data-theme="light"] .proj-page-hero .hero-stat-lbl{color:rgba(255,255,255,0.6)!important;}
[data-theme="light"] .proj-page-hero .hero-title{color:#fff!important;}
[data-theme="light"] .proj-page-hero .hero-ico{background:rgba(255,255,255,0.15)!important;}
[data-theme="light"] .proj-page-hero .hero-prog-lbl{color:rgba(255,255,255,0.7)!important;}
[data-theme="light"] .proj-page-hero .hero-prog-bar{background:rgba(255,255,255,0.25)!important;}
[data-theme="light"] .proj-page-hero .hero-prog-fill{background:#fff!important;}
[data-theme="light"] .proj-page-hero .hero-stat{background:rgba(255,255,255,0.12)!important;}

/* ── DATE PICKER ── */
.dp-cal-popup { position:fixed; z-index:1300; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r-xl); box-shadow:0 20px 60px rgba(0,0,0,0.5); display:flex; flex-direction:column; min-width:540px; overflow:hidden; animation:popIn 0.2s cubic-bezier(0.34,1.2,0.64,1) both; }
.dp-cal-body { display:flex; }
.dp-cal-left { flex:1; padding:20px; border-right:1px solid var(--border); }
.dp-cal-right { width:140px; overflow-y:auto; max-height:340px; scrollbar-width:none; }
.dp-cal-right::-webkit-scrollbar { display:none; }
.dp-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dp-cal-month { font-size:14px; font-weight:700; color:var(--text); }
.dp-cal-nav-btn { width:28px; height:28px; border-radius:8px; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all 0.12s; }
.dp-cal-nav-btn:hover { background:var(--bg4); }
.dp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-cal-dow { text-align:center; font-size:10px; font-weight:700; color:var(--text4); padding:4px 0; }
.dp-cal-day { text-align:center; padding:7px 4px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text2); transition:all 0.12s; }
.dp-cal-day:hover { background:var(--bg3); color:var(--text); }
.dp-cal-day.today { color:var(--green); font-weight:700; }
.dp-cal-day.selected { background:var(--green) !important; color:#000 !important; font-weight:700; }
.dp-cal-day.other-month { color:var(--text4); }
.dp-cal-day.past { color:var(--text4); pointer-events:none; }
.dp-cal-time-slot { padding:10px 16px; text-align:center; font-size:13px; color:var(--text2); cursor:pointer; border-bottom:1px solid var(--border); transition:all 0.12s; font-variant-numeric:tabular-nums; }
.dp-cal-time-slot:hover { background:var(--bg3); }
.dp-cal-time-slot.selected { background:var(--text); color:var(--bg); font-weight:700; }
.dp-cal-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.dp-cal-selected-lbl { font-size:13px; color:var(--text2); }
.dp-cal-confirm { padding:8px 16px; border-radius:10px; background:var(--green); border:none; color:#000; font-size:13px; font-weight:700; cursor:pointer; }
.dp-cal-popup.compact{ min-width:0; width:300px; }
.dp-cal-popup.compact .dp-cal-left{ border-right:none; padding:14px 16px; }
.dp-cal-popup.compact .dp-cal-nav{ margin-bottom:10px; }
.dp-cal-popup.compact .dp-cal-nav-btn{ width:24px; height:24px; font-size:13px; }
.dp-cal-popup.compact .dp-cal-month{ font-size:13px; font-weight:800; }
.dp-cal-popup.compact .dp-cal-dow{ font-size:9px; padding:2px 0; }
.dp-cal-popup.compact .dp-cal-day{ padding:6px 2px; font-size:12px; font-weight:600; }
.dp-cal-popup.compact .dp-cal-footer{ padding:9px 12px; }
.dp-cal-popup.compact .dp-cal-selected-lbl{ font-size:12px; font-weight:600; color:var(--text); }
.dp-cal-popup.compact .dp-cal-confirm{ padding:6px 14px; font-size:12px; }
/* create-task project/assignee floating popup (topbar-style) */
.ctp-pop{ position:fixed; z-index:1305; background:#2c2c2e; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:6px; min-width:210px; max-width:270px; box-shadow:0 24px 70px rgba(0,0,0,0.55); animation:popIn 0.18s cubic-bezier(0.34,1.2,0.64,1) both; }
.ctp-pop .ctp-list{ max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:1px; scrollbar-width:none; }
.ctp-pop .ctp-list::-webkit-scrollbar{ display:none; }
.ctp-pop .ctp-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px; cursor:pointer; transition:background 0.12s; }
.ctp-pop .ctp-row:hover{ background:rgba(255,255,255,0.06); }
.ctp-pop .ctp-row.sel{ background:rgba(255,255,255,0.05); }
.ctp-pop .ctp-row .ctp-nm{ font-size:14px; color:#fff; flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctp-pop .ctp-row .ctp-ck{ color:var(--green); font-weight:800; font-size:14px; flex-shrink:0; }
/* ── dark date-picker (fix white in light OS theme) ── */
.dp-cal-popup{ background:#26282C !important; border-color:rgba(255,255,255,0.10) !important; color:#fff; }
.dp-cal-left{ border-right-color:rgba(255,255,255,0.07) !important; }
.dp-cal-month{ color:#fff !important; }
.dp-cal-nav-btn{ background:rgba(255,255,255,0.07) !important; border-color:rgba(255,255,255,0.10) !important; color:rgba(255,255,255,0.85) !important; }
.dp-cal-nav-btn:hover{ background:rgba(255,255,255,0.13) !important; }
.dp-cal-dow{ color:rgba(255,255,255,0.4) !important; }
.dp-cal-day{ color:rgba(255,255,255,0.85) !important; }
.dp-cal-day.other-month{ color:rgba(255,255,255,0.25) !important; }
.dp-cal-day.past{ color:rgba(255,255,255,0.28) !important; }
.dp-cal-time-slot{ color:rgba(255,255,255,0.72) !important; border-bottom-color:rgba(255,255,255,0.06) !important; }
.dp-cal-time-slot:hover{ background:rgba(255,255,255,0.08) !important; }
.dp-cal-time-slot.selected{ background:#fff !important; color:#1a1a1a !important; }
.dp-cal-footer{ border-top-color:rgba(255,255,255,0.08) !important; }
.dp-cal-selected-lbl{ color:#fff !important; }
/* compact = smaller combined picker (date left + time column right) */
.dp-cal-popup.compact{ width:360px !important; min-width:0 !important; }
.dp-cal-popup.compact .dp-cal-left{ padding:14px !important; }
.dp-cal-popup.compact .dp-cal-right{ width:80px !important; max-height:300px !important; }
.dp-cal-popup.compact .dp-cal-time-slot{ padding:9px 4px !important; font-size:12px !important; }
.dp-cal-popup.compact .dp-cal-nav{ margin-bottom:10px !important; }
.dp-cal-popup.compact .dp-cal-nav-btn{ width:24px !important; height:24px !important; font-size:13px !important; }
.dp-cal-popup.compact .dp-cal-month{ font-size:13px !important; font-weight:800 !important; }
.dp-cal-popup.compact .dp-cal-dow{ font-size:9px !important; padding:2px 0 !important; }
.dp-cal-popup.compact .dp-cal-day{ padding:6px 2px !important; font-size:12px !important; font-weight:600 !important; }
.dp-cal-popup.compact .dp-cal-footer{ padding:9px 12px !important; }
.dp-cal-popup.compact .dp-cal-selected-lbl{ font-size:12px !important; font-weight:600 !important; }
.dp-cal-popup.compact .dp-cal-confirm{ padding:6px 14px !important; font-size:12px !important; }
/* project/assignee popup = task gray #26282C, sized 1:1 with focus assignee popup */
.ctp-pop{ background:#26282C !important; border:1px solid rgba(255,255,255,0.10) !important; border-radius:20px !important; padding:8px !important; min-width:240px !important; max-width:300px !important; }
.ctp-pop .ctp-row{ padding:10px 12px !important; gap:13px !important; border-radius:14px !important; }
.ctp-pop .ctp-row.sel{ background:rgba(255,255,255,0.06) !important; }
.ctp-pop .ctp-row .ctp-nm{ font-size:16px !important; font-weight:600 !important; }
.ctp-pop .ctp-row .ctp-ck{ font-size:15px !important; }
/* compact small project/assignee popup */
.ctp-pop{ min-width:180px !important; max-width:225px !important; padding:6px !important; border-radius:16px !important; }
.ctp-pop .ctp-list{ max-height:260px !important; }
.ctp-pop .ctp-row{ padding:7px 9px !important; gap:10px !important; border-radius:11px !important; }
.ctp-pop .ctp-row .ctp-nm{ font-size:13.5px !important; font-weight:600 !important; }
.ctp-pop .ctp-row .ctp-ck{ font-size:13px !important; }
.ctp-pop .ctp-row .ctp-nm{ font-size:12.5px !important; font-weight:600 !important; }
.ctp-pop .ctp-row{ padding:6px 9px !important; gap:9px !important; }

/* ── MASS SELECT ── */
.task-row.selected { background:var(--green-bg) !important; border-color:var(--green-border) !important; outline:2px solid var(--green); outline-offset:-2px; }
.mass-select-bar { position:sticky; top:0; z-index:10; background:var(--bg2); border-bottom:1px solid var(--border2); padding:8px 16px; display:flex; align-items:center; gap:10px; animation:fadeIn 0.15s ease; }
.mass-select-count { font-size:13px; font-weight:700; color:var(--text); flex:1; }

@media (max-width: 768px) {
  .sidebar { display:none !important; }
  .main-content { padding:12px 12px 80px 12px !important; }
  .page-header { padding:12px 16px 8px !important; }
  .app-body { height:100dvh; }
  .dp-cal-popup { min-width:0; max-width:calc(100vw - 16px); }
  .modal { padding:18px; max-width:calc(100vw - 24px); }
  .wizard-box { padding:20px; max-width:calc(100vw - 24px); }
  .wizard-overlay { padding:12px; }
  .modal-title { font-size:18px; margin-bottom:16px; }
  /* Compact task rows */
  .task-row { padding:9px 12px; gap:10px; border-radius:18px; margin:0 auto 6px; width:min(var(--task-col,560px),100%); }
  /* Tighter grid gaps on mobile */
  .proj-grid { gap:10px; }
  .note-grid, .task-grid-view { gap:10px; }
  /* iOS Safari zooms inputs with font-size < 16px on focus */
  .inp, input.inp, textarea.inp, select.inp,
  .modal input, .modal textarea, .modal select,
  .wizard-box input, .wizard-box textarea, .wizard-box select,
  .cal-popup input, .cal-popup textarea, .cal-popup select { font-size:16px; }
  /* Touch targets */
  .mob-nav-btn { min-height:48px; }
  .mob-menu-item { min-height:56px; }
}
.mob-nav {
  display:none !important;
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--bg2);
  border-top:1px solid var(--border);
  z-index:100;
  padding:4px 0 env(safe-area-inset-bottom,4px);
}
.mob-nav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 0;
  cursor:pointer;
  color:var(--text4);
  font-size:10px;
  border:none;
  background:none;
  transition:color 0.15s;
}
.mob-nav-btn.active { color:var(--green); background:var(--green-bg); border-radius:12px; }
.mob-nav-btn svg { width:20px; height:20px; }
.mob-menu-sheet {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-radius:16px 16px 0 0;
  z-index:201;
  padding:12px 16px env(safe-area-inset-bottom,16px);
}
.mob-menu-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.mob-menu-item {
  padding:12px 8px;
  border-radius:10px;
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.mob-overlay {
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,0.5);
}

/* ── Rich text editor (notes) ─────────────────────────────── */
/* No visible frame — editor sits flush with its surrounding card. */
.re-wrap { border: none; background: transparent; margin-bottom: 0; padding: 0; }
/* Toolbar: naked buttons, caller places it (typically title row right). */
.re-toolbar { display: inline-flex; gap: 0; align-items: center; }
.re-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 4px; color: var(--text3); cursor: pointer; font-size: 12px; font-family: inherit; padding: 0; opacity: 0.7; }
.re-btn:hover { color: var(--text); opacity: 1; }
.re-btn:active { color: var(--text); opacity: 1; }
.re-editor { padding: 2px 0; outline: none; color: var(--text); font-size: 13px; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; min-height: 40px; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.re-editor:empty::before { content: attr(data-placeholder); color: var(--text4); pointer-events: none; display: block; }
.re-editor img { max-width: 360px; height: auto; border-radius: 6px; display: block; margin: 8px 0; cursor: zoom-in; }
.re-editor strong, .re-editor b { font-weight: 700; }
.re-editor em, .re-editor i { font-style: italic; }
.re-editor u { text-decoration: underline; }
.note-content-html { word-break: break-word; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.note-content-html img { max-width: 360px; height: auto; border-radius: 6px; display: block; margin: 8px 0; cursor: zoom-in; }
/* Tame overflow on pasted content: hr, tables, pre/code, blockquotes. */
.re-editor hr, .note-content-html hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; width: 100%; height: 0; }
.re-editor pre, .note-content-html pre,
.re-editor code, .note-content-html code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
.re-editor pre, .note-content-html pre { overflow-x: auto; }
.re-editor table, .note-content-html table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.re-editor blockquote, .note-content-html blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--border); max-width: 100%; }
.re-editor a, .note-content-html a { word-break: break-all; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .re-editor img, .note-content-html img { max-width: 100%; }
}

/* ── Profile redesign ─────────────────────────────────────── */
.prof-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text4); margin: 18px 4px 10px; }
.prof-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.prof-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-lg); padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: background 0.12s, transform 0.12s, border-color 0.12s; color: var(--text); font-family: inherit; }
.prof-tile:hover { background: var(--bg3); transform: translateY(-2px); border-color: var(--border2); }
.prof-tile-ico { font-size: 22px; width: 44px; height: 44px; background: rgba(255,255,255,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.prof-tile-lbl { font-size: 12px; font-weight: 600; color: var(--text2); text-align: center; line-height: 1.2; }
.prof-theme-row { cursor: default !important; }
.prof-theme-row:hover { background: var(--bg2) !important; transform: none !important; }
.prof-segment { display: inline-flex; gap: 2px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 2px; }
.prof-seg-btn { background: none; border: none; color: var(--text3); font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; }
.prof-seg-btn.active { background: var(--bg); color: var(--text); font-weight: 600; }
.prof-logout-btn { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-lg); padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--red); cursor: pointer; margin-top: 14px; font-family: inherit; transition: background 0.12s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.prof-logout-btn:hover { background: var(--bg3); }

@media (max-width: 480px) {
  .prof-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* No-hover state for forms and expanded checklist cards */
.note-card.cl-no-hover,
.note-card.cl-no-hover:hover {
  background: var(--bg2) !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
  cursor: default;
}

/* ── Checklist items (no checkboxes) ───────────────────────── */
.cl-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.cl-item-wrap { display: flex; flex-direction: column; }
.cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; transition: background 0.12s; cursor: pointer; }
.cl-item:hover { background: var(--bg3); }
.cl-item-bullet { color: var(--text4); font-size: 18px; line-height: 0; padding-bottom: 4px; flex-shrink: 0; }
.cl-item-title { flex: 1; font-size: 14px; color: var(--text); word-break: break-word; }
.cl-item-act { background: none; border: none; color: var(--text4); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 14px; line-height: 1; opacity: 0; transition: all 0.12s; font-family: inherit; }
.cl-item:hover .cl-item-act { opacity: 0.7; }
.cl-item-act:hover { opacity: 1 !important; background: var(--bg2); color: var(--text); }
.cl-item-act.cl-del:hover { color: var(--red); }
.cl-item-body { padding: 2px 0 6px 22px; background: transparent; border: none; margin: 0 0 4px 0; font-size: 12px; }
.cl-item-desc-edit { outline: none; font-size: 13px; color: var(--text2); min-height: 22px; line-height: 1.5; padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.cl-item-desc-edit:empty::before { content: attr(data-placeholder); color: var(--text4); font-style: italic; pointer-events: none; }
.cl-item-desc { color: var(--text2); line-height: 1.6; margin-bottom: 8px; font-size: 13px; }
.cl-item-desc-empty { color: var(--text4); font-style: italic; margin-bottom: 8px; font-size: 12px; }
.cl-item-actions { display: flex; gap: 6px; }
.cl-item-edit-btn { background: none; border: 1px solid var(--border2); color: var(--text3); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; font-family: inherit; }
.cl-item-edit-btn:hover { background: var(--bg3); color: var(--text); }
.cl-item-save-btn { background: #ffffff; color: #fff; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 700; font-family: inherit; }
.cl-item-cancel-btn { background: var(--bg3); border: 1px solid var(--border2); color: var(--text3); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; font-family: inherit; }
.cl-add-slot { padding: 4px 6px; margin-top: 4px; }
.cl-add-btn { background: none; border: none; color: var(--text4); padding: 4px 6px; cursor: pointer; font-size: 12px; font-family: inherit; opacity: 0.7; transition: all 0.12s; }
.cl-add-btn:hover { color: var(--green); opacity: 1; }
.cl-add-row { display: flex; gap: 6px; align-items: center; padding: 4px 6px; margin-top: 4px; }
.cl-add-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text); font-family: inherit; outline: none; }
.cl-add-row input:focus { border-color: var(--green-border); }
.cl-add-row button { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; line-height: 1; flex-shrink: 0; font-family: inherit; }

/* ── Item → task / focus overlay ─────────────────────────── */
.cl-task-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn 0.15s ease; }
.cl-task-popup { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.cl-task-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.cl-task-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text4); margin: 12px 0 6px; }
.cl-task-popup .inp { width: 100%; box-sizing: border-box; }
.cl-task-date-btn { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-family: inherit; flex: 1; text-align: left; }
.cl-task-date-btn:hover { background: var(--bg); }
.cl-task-date-clear { background: var(--bg3); border: 1px solid var(--border2); color: var(--red); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; }
.cl-task-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.cl-task-cancel { background: var(--bg3); border: 1px solid var(--border2); color: var(--text3); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; }
.cl-task-create { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; }
.cl-focus-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.cl-focus-pick-item { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); padding: 10px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; text-align: left; }
.cl-focus-pick-item:hover { background: var(--bg); border-color: var(--green-border); color: var(--green); }

/* ── Context menu ─────────────────────────────────────────── */
.ctx-menu { position: fixed; display: none; z-index: 9000; background: rgba(28,28,32,0.82); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 6px; min-width: 180px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); animation: fadeIn 0.12s ease; user-select: none; color:#fff; }
.ctx-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 13px; color: #fff; transition: background 0.1s; }
.ctx-menu-item:hover { background: rgba(255,255,255,0.08); }
.ctx-menu-item.ctx-danger { color: var(--red); }
.ctx-menu-item.ctx-danger:hover { background: var(--red-bg); }
.ctx-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 6px; }
.ctx-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

/* ============================================================
 * APP SHEET v2 — unified container (drag-handle + content + bn-bar)
 * Bn-bar живёт ВНУТРИ sheet'а, они движутся как одно целое.
 * Состояния: peek (~78px = drag-handle + bn-bar) / medium (~42%) / expanded.
 * ============================================================ */

:root {
  --sheet-gap: 16px;
  --sheet-progress: 0;
  --sheet-peek-h: 60px;
}
@supports (padding: max(0px)) {
  :root {
    --sheet-gap: max(16px, calc(env(safe-area-inset-bottom, 0px) - 4px));
  }
}

@property --sheet-drop {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* Шторка всегда тёмная — фиксируем тёмные переменные, чтобы при светлой теме
   приложения её содержимое (фоны, ховеры, текст) не белело */
.app-sheet{
  --bg:#0a0a0a;--bg2:#0f0f0f;--bg3:#141414;--bg4:#1a1a1a;--bg5:#222;
  --border:#1a1a1a;--border2:#242424;--border3:#2e2e2e;
  --text:#e8e8e8;--text2:#aaa;--text3:#666;--text4:#3a3a3a;
  --task-col:560px; --sheet-med-w:660px; --sheet-exp-w:760px;
}
.app-sheet {
  position: fixed;
  z-index: 950;
  --sheet-drop: 0px;
  /* peek = узкий контейнер под bn-bar, центрирован */
  width: 250px;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sheet-gap) - var(--sheet-drop));
  padding-bottom: var(--sheet-drop);
  height: var(--sheet-peek-h);                        /* peek */
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0) 24%),rgba(20,20,20,0.92);
  backdrop-filter: blur(54px) saturate(1.25);
  -webkit-backdrop-filter: blur(54px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: calc(28px + 13px * var(--sheet-drop) / var(--sheet-gap));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                          /* bn-bar и drag-handle к низу */
  overflow: visible;                                  /* для всплывающих .bn-submenu */
  transition:
    height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    max-width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    padding-bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.app-sheet.dragging { transition: none; }

.app-sheet.medium,
.app-sheet.expanded,
.app-sheet.dragging {
  /* ширина растёт непрерывно по ходу подъёма (drag: inline per-frame; tap: --sheet-progress 0->1 + transition:width) */
  width: min(calc(var(--sheet-med-w) + (var(--sheet-exp-w) - var(--sheet-med-w)) * var(--sheet-progress, 0)), calc(100% - var(--sheet-gap) * 2));
}
.app-sheet.medium {
  height: calc(42% + 10.5px);
}
.app-sheet.expanded {
  --sheet-drop: var(--sheet-gap);
  height: calc(100% - max(120px, env(safe-area-inset-top, 0px) + 80px));
}

/* Drag handle сверху sheet'а — всегда виден */
.sheet-drag-handle {
  position: relative;
  height: 22px;
  flex-shrink: 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
  opacity: 1;
  transition:
    height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease;
}
.app-sheet:not(.medium):not(.expanded):not(.dragging) .sheet-drag-handle {
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.sheet-drag-handle::before {
  content: "";
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
}

/* Sheet content — между drag-handle и bn-bar.
   В peek скрыт, в medium/expanded растягивается.
   Между ним и bn-bar — небольшой отступ для воздуха. */
.app-sheet > .sheet-content {
  display: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 4px 14px 12px;
  box-sizing: border-box;
  /* Внутренний контент (.page) скроллится сам — overflow-y:auto на .page */
  border-radius: 0;
  /* mask the rounded edges from peeking through page content */
}
.app-sheet.medium > .sheet-content,
.app-sheet.expanded > .sheet-content,
.app-sheet.dragging > .sheet-content {
  display: flex;
  flex-direction: column;
}

.sheet-content > .page {
  display: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-content > .page.active { display: block; }

/* ============ BN-WRAP внутри sheet ============ */
.app-sheet .bn-wrap {
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  padding: 4px 0;
}
.app-sheet .bn-bar {
  /* убрать тень — внутри sheet'а она лишняя */
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
}
/* В expanded — bn-bar остаётся видимой снизу как pill-tabs в Игре.
   Если хочешь скрыть в expanded, раскомментируй:
   .app-sheet.expanded .bn-wrap { display: none; }
*/

/* Submenu (popup проектов / профиля) — всплывает над bn-bar внутри sheet'а */
.app-sheet .bn-submenu {
  position: absolute;
  bottom: calc(var(--sheet-peek-h) - 4px);   /* над bn-bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* page-home (фон) — оставить место под sheet в peek-state */
.page#page-home {
  padding-bottom: calc(var(--sheet-peek-h) + var(--sheet-gap) + 24px);
}

/* В peek — клики в области sheet НЕ должны стрелять в скрытый sheet-content */
.app-sheet:not(.medium):not(.expanded) > .sheet-content { pointer-events: none; }

/* === HOME: расположение как в макете mk-home (только layout, цвета не трогаем) === */
#page-home{ max-width:none; width:100%; box-sizing:border-box; padding-left:20px; padding-right:20px; }
/* ===== HOME текст по референсу (General Sans, светлая тема) ===== */
#page-home .home-greeting{ align-items:flex-start; margin-bottom:26px; }
#page-home .home-greet-left{ display:flex; flex-direction:column; gap:6px; }
#page-home .home-greeting-text{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:clamp(27px,5.5vw,33px); font-weight:700; letter-spacing:-0.6px; line-height:1.08; color:#1B1812; }
#page-home .home-greeting-text .greet-name{ color:#ffffff; }
#page-home .home-greeting-date{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:14px; font-weight:500; letter-spacing:0.1px; color:#A39C92; }
#page-home .home-hero-pct{ color:#1B1812; }
#page-home .sec-title{ font-family:'General Sans',-apple-system,system-ui,sans-serif !important; font-size:18px !important; font-weight:600 !important; letter-spacing:-0.18px !important; color:#1B1812 !important; text-transform:none !important; }
#page-home .proj-card.folder .card-name{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:16px; font-weight:600; letter-spacing:-0.16px; color:#1B1812; margin:18px 0 3px; }
#page-home .proj-card.folder .card-sub{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:13px; font-weight:500; color:#A39C92; }
#page-home .proj-card.c-new .add-card-lbl{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:15px; font-weight:500; color:#A39C92; }
#page-home .sec-ico-btn{ color:#A39C92; }
#page-home .sec-title .sec-count{ font-weight:500; color:#A39C92; margin-left:6px; }
.home-greeting{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.home-hero-ring{ position:relative; width:60px; height:60px; flex-shrink:0; }
.home-hero-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--text); }
#page-home .sec-title{ font-size:16px; font-weight:800; letter-spacing:-0.3px; text-transform:none; color:var(--text); }

/* === Реакция фона на шторку (Find My) === */
#page-home{
  position: relative;
  transform-origin: center 40%;
  transform: scale(calc(1 - 0.05 * var(--sheet-progress, 0)));
  filter: blur(calc(6px * var(--sheet-progress, 0))) brightness(calc(1 - 0.12 * var(--sheet-progress, 0)));
  transition: transform .42s cubic-bezier(.32,.72,0,1), filter .42s cubic-bezier(.32,.72,0,1);
  will-change: transform, filter;
}
:root:has(.app-sheet.dragging) #page-home{ transition: none; }


/* === Дыхание свечения карточек === */
.proj-card::before{ animation: igraBreathe 5.5s ease-in-out infinite; }
@keyframes igraBreathe{ 0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.16)} }
.task-check.has-progress{border:none;background:transparent;width:24px;height:24px;padding:0;}
.app-sheet.wheel-open{ transition-duration:0.45s,0.45s,0.45s,0.45s,0.45s,0.45s; transition-timing-function:cubic-bezier(0.33,1,0.68,1); }
.t-timepill{ font-size:13px; font-weight:700; color:var(--green); background:var(--green-bg); padding:5px 11px; border-radius:99px; flex-shrink:0; letter-spacing:-0.2px; border:0; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ===== Карточки проектов как ПАПКИ (вариант 3, глянцевый градиент) ===== */
.proj-card.folder{ background:transparent!important; border:none!important; box-shadow:none!important; overflow:visible!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:24px 14px 22px; min-height:208px; border-radius:22px; transition:background .2s ease; }
.proj-card.folder::before{ display:none!important; }
.proj-card.folder .card-name,.proj-card.folder .card-sub{ text-align:center; }
.proj-card .f3{ position:relative; width:58%; max-width:160px; aspect-ratio:158/126; flex-shrink:0; margin:0 auto; filter:drop-shadow(0 9px 16px color-mix(in srgb,var(--acc) 30%,transparent)); transition:transform .18s; }
.proj-card.folder:hover .f3{ transform:translateY(-3px); }
.proj-card .f3 .back{ position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 50%,#fff), color-mix(in srgb,var(--acc) 64%,#fff)); border-radius:13% 13% 16% 16% / 16% 16% 20% 20%; }
.proj-card .f3 .papers{ position:absolute; left:21%; right:21%; top:8%; bottom:39%; }
.proj-card .f3 .papers i{ position:absolute; inset:0; background:linear-gradient(180deg,#ffffff,#f2f4f6); border-radius:8% 8% 3% 3% / 10% 10% 4% 4%; box-shadow:0 3px 7px rgba(0,0,0,.10); }
.proj-card .f3 .front{ position:absolute; left:0; right:0; bottom:0; height:66%; background:var(--g); border-radius:12% 12% 16% 16% / 15% 15% 20% 20%; box-shadow:inset 0 1px 2px rgba(255,255,255,.4); }
.proj-card .f3 .gloss{ position:absolute; left:0; right:0; bottom:0; height:66%; border-radius:12% 12% 16% 16% / 15% 15% 20% 20%; background:linear-gradient(160deg,rgba(255,255,255,.32),transparent 52%); pointer-events:none; }


/* ===== Тайм-пикер задачи (колесо, как в Игре в жизнь) ===== */
.et-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.28); z-index:1099; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
.et-scrim.on{ opacity:1; pointer-events:auto; }
.et-alert{ position:fixed; width:260px; background:#26282C; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid rgba(255,255,255,0.10); border-radius:22px; z-index:1100; overflow:hidden; opacity:0; pointer-events:none; transform:scale(0.92); transform-origin:top right; transition:opacity 0.22s ease, transform 0.28s cubic-bezier(0.32,0.72,0,1); box-shadow:0 32px 80px rgba(0,0,0,0.55),0 8px 24px rgba(0,0,0,0.35); color:#fff; font-family:inherit; }
.et-alert.on{ opacity:1; pointer-events:auto; transform:scale(1); }
.et-alert .et-pane{ display:none; flex-direction:column; }
.et-alert.s1 .et-pane.s1{ display:flex; }
.et-a-head{ padding:16px 18px 4px; text-align:center; }
.et-a-eyebrow{ font-size:11px; font-weight:500; color:rgba(255,255,255,0.5); letter-spacing:-0.1px; }
.et-wheel-wrap{ position:relative; height:168px; display:flex; align-items:center; justify-content:center; gap:0; margin:4px 0 6px; overflow:hidden; }
.et-wheel-wrap::before,.et-wheel-wrap::after{ content:''; position:absolute; left:0; right:0; height:56px; pointer-events:none; z-index:3; }
.et-wheel-wrap::before{ top:0; background:linear-gradient(180deg,#26282C 30%,rgba(40,40,40,0)); }
.et-wheel-wrap::after{ bottom:0; background:linear-gradient(0deg,#26282C 30%,rgba(40,40,40,0)); }
.et-wheel-band{ position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); height:44px; border-radius:12px; background:rgba(255,255,255,0.07); z-index:1; }
.et-wheel{ position:relative; height:100%; width:78px; overflow-y:scroll; scroll-snap-type:y mandatory; z-index:2; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%); scrollbar-width:none; }
.et-wheel::-webkit-scrollbar{ display:none; }
.et-wheel-inner{ padding:62px 0; }
.et-wheel-cell{ height:44px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; color:rgba(255,255,255,0.4); scroll-snap-align:center; letter-spacing:-0.5px; transition:color 0.16s ease,font-weight 0.16s ease; }
.et-wheel-cell.active{ color:#fff; font-weight:600; }
.et-wheel-colon{ width:14px; text-align:center; color:#fff; font-size:26px; font-weight:600; letter-spacing:-0.5px; z-index:2; margin-top:-2px; }
.et-a-actions-single{ border-top:0.5px solid rgba(255,255,255,0.12); display:flex; }
.et-a-btn-primary{ flex:1; padding:14px 0; font-size:16px; font-weight:600; letter-spacing:-0.2px; color:#ffffff; background:transparent; border:0; font-family:inherit; cursor:pointer; transition:background 0.14s ease; -webkit-tap-highlight-color:transparent; }
.et-a-btn-primary:active{ background:rgba(255,255,255,0.06); }
.et-a-btn-ghost{ padding:13px 0; font-size:13px; font-weight:500; color:rgba(255,255,255,0.5); background:transparent; border:0; border-top:0.5px solid rgba(255,255,255,0.12); font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.et-a-btn-ghost:active{ background:rgba(255,255,255,0.06); }


/* ===== Создание задачи — шторка снизу (стиль Игры) ===== */
.ct-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.58); z-index:970; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.ct-scrim.on{ opacity:1; pointer-events:auto; }
.ct-sheet{ position:fixed; left:50%; bottom:max(28px,env(safe-area-inset-bottom,0px)); transform:translate(-50%,calc(100% + 60px)); width:calc(100% - 56px); max-width:704px; max-height:82vh; background:#1f1f22; border-radius:41px; z-index:980; display:flex; flex-direction:column; box-shadow:0 18px 55px rgba(0,0,0,0.55); transition:transform 0.42s cubic-bezier(0.32,0.72,0,1); padding-top:10px; overflow:hidden; }
.ct-sheet.on{ transform:translate(-50%,0); }
.ct-grab{ width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,0.18); margin:0 auto 2px; }
.ct-head{ flex-shrink:0; padding:8px 22px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ct-h-title{ font-size:11px; font-weight:600; color:rgba(255,255,255,0.45); letter-spacing:0.5px; text-transform:uppercase; }
.ct-h-cancel{ background:transparent; border:0; color:rgba(255,255,255,0.45); font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:0; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ct-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 8px; }
.ct-name-input{ width:100%; background:#26282C; color:#fff; border:0; border-radius:18px; padding:16px 18px; font-size:17px; font-weight:500; letter-spacing:-0.3px; outline:none; margin-bottom:8px; font-family:inherit; box-sizing:border-box; }
.ct-name-input::placeholder{ color:rgba(255,255,255,0.32); }
.ct-row{ background:#26282C; border:0; border-radius:18px; padding:14px 16px; width:100%; display:flex; align-items:center; gap:12px; margin-bottom:8px; text-align:left; color:#fff; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
.ct-row > svg{ color:rgba(255,255,255,0.5); flex-shrink:0; }
.ct-row-lbl{ font-size:15px; font-weight:500; color:#fff; }
.ct-row-val{ margin-left:auto; font-size:14px; color:rgba(255,255,255,0.45); font-weight:500; display:flex; align-items:center; gap:7px; overflow:hidden; max-width:60%; white-space:nowrap; text-overflow:ellipsis; }
.ct-exp{ display:none; background:#1c1c1e; border-radius:16px; margin:-2px 0 8px; padding:6px; max-height:240px; overflow-y:auto; }
.ct-exp.on{ display:block; }
.ct-exp-av{ display:none; flex-wrap:wrap; gap:6px; padding:10px; }
.ct-exp-av.on{ display:flex; }
.ct-exp-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; cursor:pointer; color:#fff; font-size:14px; }
.ct-exp-item:active{ background:rgba(255,255,255,0.06); }
.ct-exp-item.sel{ background:rgba(255,255,255,0.14); }
.ct-cta-wrap{ flex-shrink:0; padding:10px 16px 16px; background:linear-gradient(to bottom,rgba(31,31,34,0),#1f1f22 35%); }
.ct-cta{ width:100%; height:52px; border:0; border-radius:26px; background:#ffffff; color:#0a0a0a; font-size:16px; font-weight:600; letter-spacing:-0.2px; font-family:inherit; cursor:pointer; transition:transform 0.12s ease,opacity 0.18s ease; }
.ct-cta:active{ transform:scale(0.985); }


/* ===== Раскрытая задача (референс A_Inline): подзадачи + прогресс ===== */
.acc-sub-hdr{ display:flex; align-items:center; gap:12px; margin:8px 0 12px; }
.acc-sub-lbl{ font-size:11px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#7e7e86; flex-shrink:0; }
.acc-sub-bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.acc-sub-bar-fill{ height:100%; border-radius:3px; background:#ffffff; transition:width 0.3s ease; }
.acc-sub-count{ font-size:12.5px; font-weight:600; color:#7e7e86; flex-shrink:0; }
.app-sheet .task-accordion .anim-check-box{ width:20px!important; height:20px!important; border-radius:50%!important; border-width:2px!important; }
.app-sheet .task-accordion .anim-check-box.checked{ background:#ffffff!important; border-color:#ffffff!important; }
.app-sheet .task-accordion .anim-check-box.checked .anim-check-path{ stroke:#000!important; }
.app-sheet .task-accordion .anim-check-svg{ width:11px!important; height:11px!important; }
.app-sheet .task-accordion .anim-check-label{ font-size:14.5px!important; font-weight:400!important; color:#aaadb3!important; }
.app-sheet .task-accordion .anim-check-label.done{ color:#6c6c74!important; }
.app-sheet .task-accordion .anim-check-strike{ background:#6c6c74!important; }
.app-sheet .task-accordion .anim-check-wrap{ padding:7px 0!important; gap:12px!important; }
.app-sheet .task-accordion .task-acc-desc{ font-size:14.5px!important; line-height:1.5!important; color:#aaadb3!important; }
.app-sheet .task-accordion .subt-add{ border-top:0!important; padding-top:2px!important; }


/* ===== Раскрытая задача: добивка под референс A_Inline ===== */
/* разделитель над ПОДЗАДАЧИ (full-bleed) */
.app-sheet .task-accordion .acc-sub-hdr{ border-top:0; margin:8px 0 12px; padding:0; }
/* строка добавления подзадачи как в референсе: кружок-плюс слева */
.app-sheet .task-accordion .subt-add{ border-top:0!important; padding:7px 0!important; gap:12px!important; align-items:center; }
.app-sheet .task-accordion .subt-add-ico{ width:20px; height:20px; color:#7e7e86; flex-shrink:0; cursor:pointer; }
.app-sheet .task-accordion .subt-add input{ font-size:15px!important; color:var(--text3)!important; }
.app-sheet .task-accordion .subt-add input::placeholder{ color:#6c6c74!important; }
/* убрать заметный ✕ на подзадачах — субтильно */
.app-sheet .task-accordion .anim-check-wrap > button{ opacity:0; color:#8e8e93!important; font-size:15px!important; transition:opacity 0.15s ease; }
.app-sheet .task-accordion .anim-check-wrap:hover > button{ opacity:1; }

.app-sheet .task-accordion .acc-sub-divider{ height:1px; background:rgba(255,255,255,0.07); margin:6px -16px 12px; }

/* subtask add plus icon (even dashed SVG circle) */
.task-accordion .subt-add-ico{width:20px;height:20px;flex-shrink:0;cursor:pointer;color:var(--text3);transition:color .12s;}
.task-accordion .subt-add-ico:hover{color:var(--green);}


/* --- задачи: единая центрированная колонка 78% --- */
/* шапка «Задачи» + плюс выровнены под ширину колонки карточек */
#page-tasks .sec-hdr{ width:min(var(--task-col,560px),100%); margin-left:auto; margin-right:auto; box-sizing:border-box; }


/* ═══════ КАЛЕНДАРЬ — редизайн по Календарь.html, наши цвета (акцент var(--green)=#ffffff) ═══════ */
.cal-hdr{ margin:8px 0 12px!important; padding:10px 12px!important; background:#26282C!important; border:1px solid rgba(255,255,255,0.04)!important; border-radius:18px!important; box-shadow:none!important; position:static!important; }
.cal-hdr-title{ font-size:14px!important; font-weight:600!important; color:var(--text2)!important; letter-spacing:0!important; }
.cal-arrow svg{ display:block; }
.cal-arrow{ width:36px!important; height:36px!important; background:transparent!important; border:1px solid var(--border2)!important; color:var(--text2)!important; }
.cal-arrow:hover{ background:rgba(255,255,255,.05)!important; }
.cal-pill{ background:var(--bg3)!important; border-radius:11px!important; padding:3px!important; }
.cal-pill-btn{ padding:7px 16px!important; border-radius:9px!important; font-size:13px!important; font-weight:600!important; color:var(--text2)!important; }
.cal-pill-btn.act{ background:var(--bg5)!important; color:var(--text)!important; box-shadow:none!important; }
/* недельные заголовки — сегодня = оранжевый кружок */
.cal-col-day .cal-wd{ font-size:11px!important; letter-spacing:.5px!important; color:var(--text3)!important; font-weight:600!important; }
.cal-col-day .cal-dn{ font-size:20px!important; font-weight:700!important; color:#E7E7EA!important; }
.cal-col-day.is-today .cal-wd{ color:var(--green)!important; }
.cal-col-day.is-today .cal-dn{ color:#fff!important; }
.cal-cols.day-view .cal-col-day.is-today .cal-dn{ background:transparent; color:var(--green)!important; width:auto; height:auto; margin-top:2px; }
/* now-line — оранжевая с точкой и свечением */
.cal-now{ background:var(--green)!important; }
.cal-now::before{ background:var(--green)!important; box-shadow:0 0 0 4px rgba(255,255,255,.22)!important; }
/* события */
.cal-ev{ border-radius:9px!important; padding:6px 8px!important; }
.cal-ev-title{ font-weight:700!important; }
/* месяц — карточки с зазором, сегодня в оранжевой рамке */
.cal-mg{ background:transparent!important; gap:6px!important; border-radius:0!important; overflow:visible!important; }
.cal-mg-hdr{ background:transparent!important; color:var(--text3)!important; padding:0 0 8px!important; }
.cal-mc{ background:var(--bg2)!important; border-radius:14px!important; min-height:auto!important; aspect-ratio:1/1.05; border:1px solid transparent; padding:8px!important; }
.cal-mc:hover{ background:var(--bg3)!important; }
.cal-mc.other{ background:transparent!important; opacity:1!important; }
.cal-mc.other .cal-mc-day{ color:var(--text4)!important; }
.cal-mc.today{ background:rgba(255,255,255,.06)!important; border-color:color-mix(in srgb,var(--green) 55%, transparent)!important; }
.cal-mc-day{ font-size:15px!important; font-weight:700!important; color:#E7E7EA!important; }
.cal-mc.today .cal-mc-day{ background:transparent!important; color:var(--green)!important; width:auto!important; height:auto!important; border-radius:0!important; display:block!important; }
.cal-mc-lbl{ font-size:10px!important; font-weight:600!important; }

/* убрать чёрный угол шапки календаря — шапка прозрачная, как в дизайне */
.cal-cols{ background:transparent!important; }
.cal-cols .cal-col-time{ background:transparent!important; }

/* прошедшее время — без штриховки и зачёркивания, выглядит как обычно (но добавлять нельзя — блок в JS) */
.cal-row-slot.past{ background:transparent!important; cursor:default!important; }
.cal-row-slot.past:hover{ background:transparent!important; }
.cal-row-time.past{ text-decoration:none!important; opacity:1!important; }

/* попап задачи в календаре — как тайм-попап (.et-alert) */
.cal-popup.cal-task-popup{ background:#26282C!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border:1px solid rgba(255,255,255,0.10)!important; border-radius:20px!important; box-shadow:0 24px 64px rgba(0,0,0,0.55),0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10)!important; color:#fff!important; }
.cal-task-popup [id^="ct-actions-"] button{ color:rgba(255,255,255,0.5)!important; }

/* фокус-попап в календаре (наш стиль #28282a) */
.cal-focus-popup{ width:320px; max-height:72vh; overflow-y:auto; scrollbar-width:none; }
.cal-focus-popup::-webkit-scrollbar{ display:none; }
.cfp-block{ background:rgba(255,255,255,0.04); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.cfp-block-t{ font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:8px; }
.cfp-select{ width:100%; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#fff; font-size:13px; font-family:inherit; outline:none; margin-bottom:10px; }
.cfp-lbl{ font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:6px; }
.cfp-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.cfp-chip{ padding:6px 12px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid transparent; color:rgba(255,255,255,0.6); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .12s; }
.cfp-chip.on{ background:var(--green); color:#1a1206; }
.cfp-actions{ display:flex; gap:8px; margin-top:4px; }
.cfp-save{ flex:1; padding:9px; border-radius:10px; background:var(--green); border:none; color:#000; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.cfp-cancel{ padding:9px 14px; border-radius:10px; background:rgba(255,255,255,0.08); border:none; color:rgba(255,255,255,0.7); font-size:13px; cursor:pointer; font-family:inherit; }

/* фокус-меню: колонка как у задач (не прыгает при смене ширины шторки) */
.focus-col{ width:min(var(--task-col,560px),100%); margin:0 auto; box-sizing:border-box; }
#page-focus .sec-hdr{ width:min(var(--task-col,560px),100%); margin-left:auto; margin-right:auto; }

/* фокус: крестик удаления задачи — только при наведении; чекбоксы задач кружками */
.fx-x{ opacity:0; transition:opacity .12s; }
.fx-trow:hover .fx-x{ opacity:0.7; }
.fx-trow .anim-check-box{ border-radius:50%!important; width:20px!important; height:20px!important; border-color:rgba(255,255,255,0.12)!important; border-width:2px!important; }
.fx-trow .anim-check-box.checked{ border-color:var(--green)!important; }

.fx-add-inp::placeholder{ color:rgba(255,255,255,0.4); }


/* === Фокус: bottom-sheet деталей (стиль Игра medium) === */
.fg-sheet-ov{ position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,0); transition:background .34s ease; }
.fg-sheet-ov.on{ background:rgba(0,0,0,0.30); }
.fg-sheet{
  position:fixed; left:0; right:0; bottom:6px; margin:0 auto;
  width:min(720px, calc(100% - var(--sheet-gap,16px) * 2));
  height:min(calc(80% + 8px), calc(100% - 102px));
  background:rgba(16,16,20,0.62);
  backdrop-filter:blur(54px) saturate(1.25);
  -webkit-backdrop-filter:blur(54px) saturate(1.25);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:28px;
  box-shadow:0 -8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
  display:flex; flex-direction:column; overflow:hidden;
  color:var(--text);
  transform:translateY(100%);
  transition:transform .44s cubic-bezier(0.32,0.72,0,1);
}
.fg-sheet-ov.on .fg-sheet{ transform:translateY(0); }
.fg-sheet-handle{ height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.fg-sheet-handle::before{ content:""; width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,0.25); }
.fg-sheet-hdr{ flex-shrink:0; padding:2px 22px 10px; cursor:grab; touch-action:none; }
.fg-sheet-title{ font-size:16px; font-weight:800; color:#fff; letter-spacing:-0.3px; }
.fg-sheet-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 18px; scrollbar-width:none; }
.fg-sheet-body::-webkit-scrollbar{ display:none; }
.fg-sheet-body .focus-col{ width:min(var(--task-col,560px),100%); }

.fx-block{ transition:background .12s; }
.fx-block:hover{ background:rgba(255,255,255,0.08) !important; }

.fg-sheet .page{ padding:8px 16px 18px !important; height:auto !important; }
.fg-sheet .page .sec-hdr{ width:100% !important; }

/* sec-sheet cards — заметки/чеклист как блоки фокуса (#26282C, белый текст) */
.fg-sheet .note-card{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.fg-sheet .note-card.fx-block, .fg-sheet .note-card:hover{ background:rgba(255,255,255,0.08) !important; }
.fg-sheet .note-card.expanded, .fg-sheet .note-card.expanded:hover{ background:rgba(255,255,255,0.05) !important; }
.fg-sheet .note-title{ color:#fff !important; }
.fg-sheet .note-content-html, .fg-sheet .note-card .note-meta, .fg-sheet .note-card *{ color:#fff; }
.fg-sheet .cl-card{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.fg-sheet .cl-card-hdr:hover{ background:rgba(255,255,255,0.08) !important; }
.fg-sheet .cl-card-title{ color:#fff !important; }
.fg-sheet .cl-card-body{ border-top-color:rgba(255,255,255,0.06) !important; }

/* sec-sheet section rows — заголовки проектов/секций (чеклист+заметки) тёмные как блоки фокуса */
.fg-sheet [onclick^="toggleNoteSection"]{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.fg-sheet [onclick^="toggleNoteSection"] span,
.fg-sheet [onclick^="toggleNoteSection"] *{ color:#fff !important; }

/* note-card fixed height — все карточки заметок/чеклиста одного размера */
.note-card:not(.expanded){ height:120px; min-height:120px; overflow:hidden; }
.note-card:not(.expanded) .note-date,
.note-card:not(.expanded) > div:last-child{ margin-top:auto; }
.note-card.expanded{ height:auto; min-height:0; }

/* fg-wall — цветные блобы за стеклом шторки (дизайн V1) */
.fg-wall{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.fg-blob{ position:absolute; border-radius:50%; filter:blur(60px); }
.fg-blob.b1{ width:300px; height:300px; left:-60px; top:120px; background:#36B968; opacity:.55; }
.fg-blob.b2{ width:300px; height:300px; right:-70px; top:180px; background:#DD6F66; opacity:.5; }
.fg-blob.b3{ width:340px; height:340px; left:34%; bottom:-90px; background:#ffffff; opacity:.4; }
.fg-blob.b4{ width:260px; height:260px; right:10%; bottom:80px; background:#6168CB; opacity:.45; }
.fg-sheet{ z-index:1; }

/* cl items in sheet — мельче (как описание задачи), форма добавления без рамки */
.fg-sheet .cl-item-title{ font-size:14px !important; color:rgba(255,255,255,0.85) !important; font-weight:400 !important; }
.fg-sheet .cl-item:hover{ background:rgba(255,255,255,0.06) !important; }
.cl-add-line{ display:flex !important; align-items:center; gap:10px; opacity:1 !important; padding:6px 6px !important; color:rgba(255,255,255,0.5) !important; }
.cl-add-line span{ font-size:12.5px; font-weight:400; }
.cl-add-line:hover{ color:var(--green) !important; }
.cl-add-line-row{ display:flex; align-items:center; gap:10px; padding:6px 6px !important; }
.cl-add-input{ flex:1; background:none !important; border:none !important; outline:none !important; color:rgba(255,255,255,0.85) !important; font-size:14px !important; font-family:inherit; padding:2px 0 !important; }
.cl-add-input::placeholder{ color:rgba(255,255,255,0.4); }

.fg-sheet .cl-item:hover .cl-item-title{ color:#fff !important; }

/* cl items unify in sheet — без белой плашки, единый цвет */
.fg-sheet .cl-item{ background:transparent !important; }
.fg-sheet .cl-item:hover{ background:rgba(255,255,255,0.06) !important; }
.fg-sheet .cl-item-title{ color:#fff !important; }
.fg-sheet .cl-add-input{ color:#fff !important; }

/* cl items left-align in sheet */
.fg-sheet .cl-item{ padding-left:0 !important; gap:10px; }
.fg-sheet .cl-add-line, .fg-sheet .cl-add-slot{ padding-left:0 !important; }
.fg-sheet .cl-add-line-row{ padding-left:0 !important; }
.fg-sheet .cl-item-body{ padding-left:28px !important; }

/* календарь — чуть светлее фон */
#page-calendar .cal-cols, #page-calendar .cal-body{ background:#16161a !important; }
#page-calendar .cal-col-day:hover{ background:rgba(255,255,255,0.04) !important; }

/* task desc editable — плейсхолдер + всегда поле */
.task-acc-desc[contenteditable]{ outline:none; min-height:20px; cursor:text; }
.task-acc-desc[contenteditable]:empty::before{ content:attr(data-ph); color:var(--text4); font-style:italic; pointer-events:none; }

/* sheet-wall — блобы за стеклом основной шторки (как у фокус-шторки) */
.sheet-wall{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.app-sheet > .sheet-content, .app-sheet > .sheet-drag-handle{ position:relative; z-index:1; }
.sheet-wall .fg-blob{ position:absolute; border-radius:50%; filter:blur(60px); }
.sheet-wall .fg-blob.b1{ width:300px; height:300px; left:-60px; top:-40px; background:#36B968; opacity:.1; }
.sheet-wall .fg-blob.b2{ width:300px; height:300px; right:-70px; top:10px; background:#DD6F66; opacity:.09; }
.sheet-wall .fg-blob.b3{ width:340px; height:340px; left:34%; bottom:-90px; background:#ffffff; opacity:.08; }
.sheet-wall .fg-blob.b4{ width:260px; height:260px; right:10%; bottom:40px; background:#6168CB; opacity:.09; }

/* cal-wall — блобы за календарём */
#page-calendar{ position:relative; }
.cal-wall{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cal-wall .fg-blob{ position:absolute; border-radius:50%; filter:blur(70px); }
.cal-wall .fg-blob.b1{ width:340px; height:340px; left:-80px; top:40px; background:#36B968; opacity:.1; }
.cal-wall .fg-blob.b2{ width:320px; height:320px; right:-80px; top:120px; background:#DD6F66; opacity:.09; }
.cal-wall .fg-blob.b3{ width:360px; height:360px; left:30%; bottom:-120px; background:#ffffff; opacity:.08; }
.cal-wall .fg-blob.b4{ width:280px; height:280px; right:14%; bottom:60px; background:#6168CB; opacity:.09; }
.cal-wrap{ position:relative; z-index:1; }
/* сетка событий — полупрозрачнее */
#page-calendar .cal-cols, #page-calendar .cal-body{ background:transparent !important; }


/* календарь: линии светлее, время ярче */
#page-calendar .cal-row-slot{ border-left-color:rgba(255,255,255,0.12) !important; }
#page-calendar .cal-col-day{ border-left-color:rgba(255,255,255,0.12) !important; }
#page-calendar .cal-row-time{ color:rgba(255,255,255,0.55) !important; }

#page-calendar .cal-row-slot[style*="border-top"]{ border-top-color:rgba(255,255,255,0.12) !important; }

/* чеклист: названия белые */
#checklist-content [onclick^="toggleNoteSection"] span,
#checklist-content .note-title,
.fg-sheet #checklist-content [onclick^="toggleNoteSection"] span,
.fg-sheet #checklist-content .note-title{ color:#fff !important; }

/* заметки: названия белые */
#notes-grid [onclick^="toggleNoteSection"] span,
#notes-grid .note-title,
.fg-sheet #notes-grid [onclick^="toggleNoteSection"] span,
.fg-sheet #notes-grid .note-title{ color:#fff !important; }

/* заголовки страниц Заметки/Чеклист белые */
#page-notes .sec-title, #page-checklist .sec-title,
.fg-sheet #page-notes .sec-title, .fg-sheet #page-checklist .sec-title{ color:#fff !important; }

/* чеклист/заметки: поля ввода названия белые в шторке */
.fg-sheet #chk-new-title, .fg-sheet #blk-new-title,
#chk-new-title, #blk-new-title{ color:#fff !important; }
.fg-sheet .re-editor, .fg-sheet .cl-item-desc-edit{ color:#fff !important; }

/* формы создания чеклиста/блока — не зажимать высотой 120px */
.note-card[id^="chk-new-form-"], .note-card[id^="blk-new-form-"], .note-card.cl-no-hover{ height:auto !important; min-height:auto !important; overflow:visible !important; }
/* rich-editor тулбар B/I/U/картинка в нашем стиле */
.re-btn{ width:26px !important; height:26px !important; border-radius:7px !important; color:rgba(255,255,255,0.6) !important; opacity:1 !important; }
.re-btn:hover{ background:rgba(255,255,255,0.10) !important; color:#fff !important; }
.re-toolbar{ gap:4px !important; }

/* открытый чеклист — без hover-обводки/фона */
.fg-sheet .note-card.expanded:hover, .fg-sheet .note-card.cl-no-hover:hover,
.note-card.expanded:hover, .note-card.cl-no-hover:hover{ background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,0.09) !important; box-shadow:none !important; transform:none !important; }

.cl-desc-edit:empty::before{ content:attr(data-ph); color:rgba(255,255,255,0.35); pointer-events:none; }

.cl-desc-edit{ white-space:pre-wrap !important; word-break:break-word; }


/* ============================================================
   HOME → ЧЁРНЫЙ МОНОХРОМ (референс Recraft, без оранжевого)
   2026-06-01 · только #page-home, остальное приложение не трогаем
   ============================================================ */

/* фон — чистый чёрный */
#page-home{ background:#000 !important; }
.main-area:has(> #page-home.active){ background:#000 !important; }

/* только проекты: личное приветствие + агрегатное кольцо скрыты */
#page-home #home-greeting-wrap,
#page-home .home-greeting{ display:none !important; }

/* заголовок «Проекты» — крупный белый герой (General Sans) */
#page-home .sec-hdr{ margin:6px 0 28px !important; }
#page-home .sec-title{
  font-family:'General Sans',-apple-system,system-ui,sans-serif !important;
  font-size:clamp(30px,4vw,40px) !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
  line-height:1.04 !important;
  color:#fff !important;
  text-transform:none !important;
}
#page-home .sec-title .sec-count{ color:#5a5a5e !important; font-weight:600 !important; margin-left:10px !important; }
#page-home .sec-ico-btn{ color:rgba(255,255,255,0.5) !important; }
#page-home .sec-ico-btn:hover{ color:#fff !important; }

/* карточки-папки: 3D-папка остаётся ЦВЕТНОЙ (контентный цвет на чёрном),
   текст и подписи — белые/серые */
#page-home .proj-card.folder .card-name{ color:#fff !important; }
#page-home .proj-card.folder .card-sub{ color:rgba(255,255,255,0.42) !important; }
#page-home .proj-card.folder:hover{ background:rgba(255,255,255,0.035) !important; }

/* карточка «Новый проект» под чёрный фон */
#page-home .proj-card.c-new{
  border:1px dashed rgba(255,255,255,0.14) !important;
  background:transparent !important;
}
#page-home .proj-card.c-new:hover{ border-color:rgba(255,255,255,0.3) !important; background:rgba(255,255,255,0.02) !important; }
#page-home .proj-card.c-new .add-card-ico{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.5) !important;
}
#page-home .proj-card.c-new .add-card-lbl{ color:rgba(255,255,255,0.42) !important; }

/* ПК-ширина: больше колонок, контент не растягиваем безгранично */
@media(min-width:1000px){
  #page-home .proj-grid{ grid-template-columns:repeat(4,1fr) !important; gap:10px 26px !important; }
}
@media(min-width:1400px){
  #page-home{ max-width:1280px !important; margin:0 auto !important; }
}


/* ============================================================
   HOME · плывущая 3D-сцена с глубиной (3 слоя параллакса)
   #home-proj-grid переключается из сетки в .depth-scene
   ============================================================ */
#home-proj-grid.depth-scene{
  display:block !important;
  position:relative;
  width:auto;
  margin-left:-20px; margin-right:-20px;     /* full-bleed: гасим паддинг страницы */
  overflow:hidden;
  cursor:grab;
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y;
  grid-template-columns:none !important;
  gap:0 !important;
}
#home-proj-grid.depth-scene.dp-dragging{ cursor:grabbing; }
@media(min-width:560px){
  #home-proj-grid.depth-scene{ margin-left:-48px; margin-right:-48px; }
}

.depth-scene .dp-layer{ position:absolute; inset:0; }
.depth-scene .dp-track{ position:absolute; top:50%; left:0; height:0; display:flex; align-items:center; will-change:transform; }
.depth-scene .dp-item{ flex:0 0 auto; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.depth-scene .dp-obj{ object-fit:contain; display:block; }

/* дальний слой */
.depth-scene .dp-far .dp-item{ width:300px; }
.depth-scene .dp-far .dp-obj{ width:115px; height:115px; opacity:1; filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
/* средний слой */
.depth-scene .dp-mid .dp-item{ width:300px; }
.depth-scene .dp-mid .dp-obj{ width:145px; height:145px; opacity:1; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5)); }
/* передний слой = проекты */
.depth-scene .dp-near{ z-index:5; }
.depth-scene .dp-near .dp-item{ width:300px; cursor:pointer; }
.depth-scene .dp-near .dp-obj{ width:188px; height:188px; filter:drop-shadow(0 26px 36px rgba(0,0,0,.7)); transition:transform .25s cubic-bezier(.32,.72,0,1); }
.depth-scene .dp-near .dp-item:hover .dp-obj{ transform:translateY(-9px) scale(1.05); }
.depth-scene .dp-near .dp-name{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:19px; font-weight:600; letter-spacing:-0.015em; color:#fff; margin-top:22px; }
.depth-scene .dp-near .dp-sub{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:14px; font-weight:500; color:rgba(255,255,255,0.42); margin-top:5px; }
.depth-scene .dp-near .dp-bar{ height:3px; width:88px; border-radius:3px; background:rgba(255,255,255,0.1); margin-top:13px; overflow:hidden; }
.depth-scene .dp-near .dp-bar>i{ display:block; height:100%; background:rgba(255,255,255,0.6); border-radius:3px; }
.depth-scene .dp-far, .depth-scene .dp-mid{ pointer-events:none; }

/* на главной со сценой страница не скроллится — сцена занимает экран */
#page-home:has(.depth-scene){ overflow:hidden; }

/* ============================================================
   ЗАКРЫТАЯ ШТОРКА (peek) = стеклянная капсула-меню (как в мокапе)
   только resting peek; medium/expanded/drag не трогаем
   ============================================================ */
.app-sheet:not(.medium):not(.expanded):not(.dragging){
  background: rgba(30,30,32,0.6) !important;
  border-color: rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
/* иконки меню: без фона/кружка — активная и hover просто белеют */
.bn-btn{ border-radius:999px !important; }
.bn-btn:hover{ background:transparent !important; color:#fff !important; }
.bn-btn.active{ background:transparent !important; color:#fff !important; }
.bn-btn.active:hover{ background:transparent !important; color:#fff !important; }

/* нейтральный уголь как в референсе: гасим цветные блобы за шторкой */
.app-sheet .sheet-wall{ display:none !important; }

/* ── Задачи: цвет как таблетки-чипы из референса (#2b), ровный фон ── */
.task-row{ background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; }
.task-wrap{ background:#26282C !important; border:1px solid transparent !important; border-radius:18px !important; box-shadow:0 8px 28px rgba(0,0,0,0.5) !important; transition:background .2s ease, box-shadow .2s ease !important; }
.task-row:hover{ background:rgba(255,255,255,0.04) !important; border-radius:14px !important; transform:none !important; }
.task-wrap .task-row, .task-wrap .task-row:hover{ background:transparent !important; }
/* раскрытая задача (аккордеон) в той же гамме */
html:not([data-theme="light"]) .task-accordion{ background:transparent; }

/* ── Плашка-шторка по спеке: сплошной #141414, без blur, граница #222, r=26 ── */
.app-sheet{ backdrop-filter:blur(40px) saturate(1.1) !important; -webkit-backdrop-filter:blur(40px) saturate(1.1) !important; border:1px solid #222 !important; }
.app-sheet:not(.medium):not(.expanded):not(.dragging){ background:rgba(20,20,20,0.92) !important; border-color:#222 !important; }
.app-sheet.medium, .app-sheet.expanded{ border-radius:48px !important; }

/* ── Убрать оранжевый во всём приложении (dark): акцент → белый ── */
html:not([data-theme="light"]){ --green:#ffffff; --green-bg:rgba(255,255,255,0.09); --green-border:rgba(255,255,255,0.18); }
.t-name{ color:#fff !important; }

/* ── Время в задаче появляется только при наведении (и всегда у открытой) ── */
.task-row .t-timepill{ opacity:0; transition:opacity .15s ease; }
.task-row:hover .t-timepill,
.task-wrap .t-timepill{ opacity:1; }

/* галочка подзадачи — тёмная на белом кружке (акцент белый) */
.anim-check-box.checked .anim-check-path{ stroke:#111 !important; }

/* ── Чекбокс задачи: меньше и точнее (24→20, обводка 1.5px) ── */
.task-check{ width:20px !important; height:20px !important; border-width:1.5px !important; border-color:rgba(255,255,255,0.24) !important; }
.task-check.has-progress{ width:20px !important; height:20px !important; }
.task-check.has-progress svg{ width:20px !important; height:20px !important; }
.task-check.done svg{ width:10px !important; height:10px !important; }

/* ── «Просрочено» — серым вместо красного (монохром) ── */
.tg-label.red{ color:var(--text3) !important; }

/* ── Убрать боковые «рамки» главной и линию под логотипом ── */
.topbar{ border-bottom:none !important; }
@media(min-width:1400px){ #page-home{ max-width:none !important; margin:0 !important; } }

/* ── Удаление: нейтральная иконка, красная только при наведении (тихо по умолчанию) ── */
.acc-tb-del:hover{ color:var(--red) !important; background:var(--red-bg) !important; }

/* ── Завершённая подзадача: тихий серый текст + короткая линия по тексту (без «лазера» во всю ширину) ── */
.anim-check-strike{ display:none !important; }
.anim-check-label.done{ color:var(--text3) !important; text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.22); text-decoration-thickness:1px; }

/* ============================================================
   ЕДИНЫЙ СТИЛЬ — Фокус + Заметки (приведение к системе)
   ============================================================ */
/* блоки фокуса — плоская карточка #26282C (как карточки задач) */
.fx-block{ background:#26282C !important; box-shadow:none !important; }
/* чекбоксы задач в фокусе — круглые 20px, как в системе */
#fg-sheet-body .anim-check-box, .fx-trow .anim-check-box{ border-radius:50% !important; width:20px !important; height:20px !important; }
/* заметки — плоская карточка #26282C, без подъёма/тени (в т.ч. внутри шторок) */
.note-card, .fg-sheet .note-card, .sec-sheet .note-card{ background:#26282C !important; border:1px solid transparent !important; }
.note-card:hover{ background:#2f2f2f !important; transform:none !important; box-shadow:none !important; }
.note-card.expanded, .fg-sheet .note-card.expanded, .sec-sheet .note-card.expanded{ background:#26282C !important; }

/* ── Карточки групп фокуса: hover серый как у задач ── */
.fg-card:hover{ background:#2f2f2f !important; }

/* ── Карточки групп фокуса: гарантированно без рамки и тени ── */
.fg-card{ border:0 !important; box-shadow:none !important; outline:none !important; }

/* ── Карточки групп фокуса = как задачи (вариант C): прозрачные, серые только на hover ── */
.fg-card{ background:transparent !important; }
.fg-card:hover{ background:#2f2f2f !important; }

/* ── Шторка деталей фокуса (fg-sheet) = материал как у основной шторки ── */
.fg-sheet{
  background: linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0) 24%),rgba(20,20,20,0.92) !important;
  backdrop-filter: blur(40px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.1) !important;
  border: 1px solid #222 !important;
  border-radius: 48px !important;
}
/* убрать цветные блобы за шторкой фокуса (как у основной) */
.fg-wall{ display:none !important; }

/* ── Заголовок шторки фокуса — чуть правее ── */
.fg-sheet-hdr{ padding-left:40px !important; }

/* ── Шторка блоков фокуса — ниже (короче, верхний край опущен) ── */
.fg-sheet{ height:min(calc(55% + 8px), calc(100% - 102px)) !important; }

/* ── Шторка фокуса: нижний отступ = боковому (16px) ── */
.fg-sheet{ bottom: var(--sheet-gap,16px) !important; }

/* ── Блоки фокуса = как задачи: прозрачные, без рамки; hover как у задач; открытый = #26282C ── */
.fx-block{ background:transparent !important; border:none !important; box-shadow:none !important; }
.fx-block:hover{ background:rgba(255,255,255,0.04) !important; }
.fx-block.open, .fx-block.open:hover{ background:#26282C !important; }

/* ── Блок фокуса: крестик как у подзадач + плей только на hover (без липкого hover на тач) ── */
/* БЕЗ hover вообще (на тач он залипает): крестик постоянно тихий, контролы видны */
.fx-x{ opacity:0.7 !important; color:#8e8e93 !important; font-size:14px !important; transition:none !important; }
.fx-trow:hover .fx-x{ opacity:0.7 !important; }
.fx-ctrls{ opacity:1 !important; transition:none !important; }

/* ── Шторка заметок/чеклиста/чек-ина (#sec-sheet) — вернуть высоту как было (~80%) ── */
#sec-sheet, #blk-sheet{ height: min(calc(80% + 8px), calc(100% - 102px)) !important; }

/* ── Проекты/секции в чек-ине/заметках: только текст + иконка (без карточки/рамки) ── */
.fg-sheet [onclick^="toggleNoteSection"],
.sec-sheet [onclick^="toggleNoteSection"]{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* ── Строки блоков в чек-листе: hover как у задач ── */
.cl-blk-row:hover{ background:rgba(255,255,255,0.04); }
#checklist-content .note-card.nc-add:hover{ color:rgba(255,255,255,0.85) !important; }

/* «Новый блок» — тихая строка (а не коробка-карточка) */
#checklist-content .note-card.cl-newblock:not(.cl-no-hover){ background:transparent !important; border:none !important; box-shadow:none !important; min-height:0 !important; flex-direction:row !important; padding:10px 12px !important; }
/* «Новый чеклист» в фокусе — пунктирная карточка */
#checklist-content .note-card.nc-add:not(.cl-newblock):not(.cl-no-hover){ background:transparent !important; border:1px dashed rgba(255,255,255,0.16) !important; box-shadow:none !important; }

/* «Новый блок» — высота по содержимому (убрать насильственные 120px от .note-card) */
#checklist-content .note-card.cl-newblock:not(.cl-no-hover){ height:auto !important; min-height:0 !important; }


/* PROFILE-GLASS-REDESIGN-2026-06-02 */
/* Привести страницу профиля к языку стеклянных окон: стена блобов за стеклом,
   прозрачные карточки с inset-бликом, оранжевый акцент (был зелёный), живые hover. */
#page-profile{ position:relative; }
#page-profile #profile-content{ position:relative; z-index:1; max-width:560px; margin:0 auto; }

/* Стена блобов (как .cal-wall/.sheet-wall), оранжевый ведущий — под акцент */
.prof-wall{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.prof-wall .fg-blob{ position:absolute; border-radius:50%; filter:blur(72px); }
.prof-wall .fg-blob.b1{ width:340px; height:340px; left:-90px; top:-30px;  background:#F5821F; opacity:.13; }
.prof-wall .fg-blob.b2{ width:300px; height:300px; right:-80px; top:30px;  background:#DD6F66; opacity:.09; }
.prof-wall .fg-blob.b3{ width:360px; height:360px; left:28%;  bottom:-130px; background:#6168CB; opacity:.10; }
.prof-wall .fg-blob.b4{ width:260px; height:260px; right:8%;  bottom:40px;  background:#ffffff; opacity:.06; }

/* Карточка-шапка — стекло с глубиной */
#page-profile .profile-card{
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 34px rgba(0,0,0,0.32);
  border-radius:var(--r-xl);
  padding:30px 24px 22px;
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
}
/* Аватар — оранжевый акцент вместо устаревшего зелёного */
#page-profile .profile-av{
  background:linear-gradient(150deg, rgba(255,160,46,0.30), rgba(255,160,46,0.05));
  border:1.5px solid var(--green-border);
  color:var(--green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 20px rgba(255,160,46,0.14);
}
#page-profile .profile-name{ font-size:23px; letter-spacing:-0.5px; }
#page-profile .profile-role{ margin-bottom:20px; }

/* Статы — прозрачные плитки с бликом */
#page-profile .stats-row{ gap:8px; }
#page-profile .stat-block{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius:14px; padding:14px 8px;
}

/* Секции-метки */
#page-profile .prof-section-label{ color:var(--text3); opacity:.8; margin:20px 4px 10px; }

/* Плитки разделов */
#page-profile .prof-tile{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius:var(--r-lg);
}
#page-profile .prof-tile:hover{
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.16);
  transform:translateY(-2px);
}
#page-profile .prof-tile-ico{
  background:rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Строки-меню (Данные/Настройки) */
#page-profile .menu-item{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
  border-radius:var(--r-lg);
}
#page-profile .menu-item:hover{
  background:rgba(255,255,255,0.09);
  transform:translateX(3px);
}
#page-profile .menu-ico{
  background:rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09);
}

/* Сегмент темы */
#page-profile .prof-segment{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.08); }
#page-profile .prof-seg-btn.active{
  background:rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  color:#fff;
}
#page-profile .prof-theme-row:hover{ background:rgba(255,255,255,0.05) !important; }

/* Выйти — тёплый красный-стекло */
#page-profile .prof-logout-btn{
  background:rgba(248,113,113,0.07);
  border:1px solid rgba(248,113,113,0.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
#page-profile .prof-logout-btn:hover{ background:rgba(248,113,113,0.13); }
/* /PROFILE-GLASS-REDESIGN-2026-06-02 */


/* CAL-GLASS-2026-06-02 */
/* Довести календарь до языка «Стекло V1»: месяц, фильтр-поповер, hover слота. */

/* Hover слота в день/неделя — прозрачная подсветка вместо плотного --bg2 */
#page-calendar .cal-row-slot:hover{ background:rgba(255,255,255,0.04); }

/* Фильтр-поповер — стекло как .ctx-menu / поповер профиля (внутри .bn-sub-item) */
.cal-filter-pop{
  background:rgba(28,28,32,0.82) !important;
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:14px !important;
  box-shadow:0 16px 48px rgba(0,0,0,0.45) !important;
}

/* Месячный вид — единая морозная стеклянная панель вместо серой таблицы --bg/--border */
#page-calendar .cal-mg{
  background:rgba(255,255,255,0.08);          /* цвет линий-стыков (gap 1px) */
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 34px rgba(0,0,0,0.30);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
}
#page-calendar .cal-mg-hdr{
  background:rgba(255,255,255,0.03);
  color:var(--text3);
}
#page-calendar .cal-mc{
  background:rgba(255,255,255,0.035);
  transition:background 120ms ease-out;
}
#page-calendar .cal-mc:hover{ background:rgba(255,255,255,0.08); }
#page-calendar .cal-mc.today{ background:rgba(255,160,46,0.10); }
#page-calendar .cal-mc.today .cal-mc-day{ background:var(--green); color:#000; }
#page-calendar .cal-mc.other{ opacity:0.32; }
/* /CAL-GLASS-2026-06-02 */


/* CHECKLIST-AS-PAGE-2026-06-02 */
/* Чеклист теперь обычная страница (#page-checklist), а не шторка .fg-sheet.
   Повторяем то же стекло-оформление, что было привязано к .fg-sheet. */

/* Карточки чеклистов */
#page-checklist .cl-card{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
#page-checklist .cl-card-hdr:hover{ background:rgba(255,255,255,0.08) !important; }
#page-checklist .cl-card-title{ color:#fff !important; }
#page-checklist .cl-card-body{ border-top-color:rgba(255,255,255,0.06) !important; }

/* Строки-проекты / секции (toggleNoteSection) */
#page-checklist [onclick^="toggleNoteSection"]{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
#page-checklist [onclick^="toggleNoteSection"] span,
#page-checklist [onclick^="toggleNoteSection"] *{ color:#fff !important; }
#page-checklist .note-title{ color:#fff !important; }

/* note-card (если используется) — стекло вместо базового #26282C */
#page-checklist .note-card{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:18px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
#page-checklist .note-card.expanded{ background:rgba(255,255,255,0.05) !important; }
#page-checklist .note-card:hover{ background:rgba(255,255,255,0.08) !important; }

/* Пункты чеклиста */
#page-checklist .cl-item{ background:transparent !important; padding-left:0 !important; gap:10px; }
#page-checklist .cl-item:hover{ background:rgba(255,255,255,0.06) !important; }
#page-checklist .cl-item-title{ font-size:14px !important; color:rgba(255,255,255,0.85) !important; font-weight:400 !important; }
#page-checklist .cl-item:hover .cl-item-title{ color:#fff !important; }
#page-checklist .cl-item-body{ padding-left:28px !important; }
#page-checklist .cl-add-input{ color:#fff !important; }
#page-checklist .cl-add-line, #page-checklist .cl-add-slot, #page-checklist .cl-add-line-row{ padding-left:0 !important; }

/* Заголовок секции + поля ввода/редактора */
#page-checklist .sec-title{ color:#fff !important; }
#page-checklist #chk-new-title, #page-checklist #blk-new-title,
#page-checklist .re-editor, #page-checklist .cl-item-desc-edit{ color:#fff !important; }
/* /CHECKLIST-AS-PAGE-2026-06-02 */


/* CL-MAIN-COL-2026-06-02 */
/* Главное меню чеклиста — фикс-колонка как в Задачах: одинаково в среднем и полном размере шторки. */
.cl-main-col{ width:min(var(--task-col,560px),100%); margin:0 auto; }
#page-checklist .sec-hdr{ width:min(var(--task-col,560px),100%); margin-left:auto; margin-right:auto; box-sizing:border-box; }
/* /CL-MAIN-COL-2026-06-02 */


/* ── Шторка проекта (action-first, монохром) ── */
#prj-sheet{ height: min(calc(86% + 8px), calc(100% - 70px)) !important; }
.prj-head{ display:flex; align-items:flex-start; gap:10px; margin:2px 0 0; }
.prj-title{ flex:1; min-width:0; font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.5px; color:#fff; line-height:1.2; text-transform:none; }
.prj-edit{ width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,0.08); border:none; color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .14s; }
.prj-edit:hover{ background:rgba(255,255,255,0.14); color:#fff; }
.prj-desc{ font-size:13px; color:var(--text2); line-height:1.5; margin:6px 0 0; }
#page-project #proj-hero, #page-project #proj-tabs{ width:min(var(--task-col,560px),100%)!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box; }
#page-project .task-accordion{ background:transparent !important; color:var(--text) !important; }
.prj-strip{ display:flex; align-items:center; gap:14px; margin:14px 0 2px; padding:12px 14px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.08); border-radius:14px; }
.prj-prog{ flex:1; min-width:0; }
.prj-prog-top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:7px; color:var(--text2); }
.prj-prog-top .pct{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.prj-bar{ height:5px; border-radius:3px; background:rgba(255,255,255,0.10); overflow:hidden; }
.prj-bar i{ display:block; height:100%; background:#fff; border-radius:3px; }
.prj-dl{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--text2); white-space:nowrap; }
.prj-dl b{ color:#fff; font-size:13px; font-weight:600; }
.prj-avs{ display:flex; }
.prj-av{ width:28px; height:28px; border-radius:50%; background:#2a2a2e; border:1.5px solid rgba(18,18,21,1); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#cfcfcf; margin-left:-8px; }
.prj-av:first-child{ margin-left:0; }
/* иконка-табы */
#prj-sheet #proj-tabs{ padding:14px 0 12px !important; }
.prj-tab{ width:38px !important; height:38px !important; min-width:0 !important; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:11px !important; background:transparent !important; border:none !important; color:var(--text3) !important; }
.prj-tab svg{ width:18px; height:18px; }
.prj-tab:hover{ background:rgba(255,255,255,0.06) !important; color:var(--text2) !important; }
.prj-tab.active{ background:rgba(255,255,255,0.12) !important; color:#fff !important; }
/* блоки чеклиста внутри проекта */
.prj-cl-row{ display:flex; align-items:center; gap:12px; padding:14px 15px; margin-bottom:8px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.08); border-radius:14px; cursor:pointer; transition:background .14s; }
.prj-cl-row:hover{ background:rgba(255,255,255,0.07); }
.prj-cl-row .t{ font-size:15px; font-weight:500; color:#fff; }
.prj-cl-row .c{ margin-left:auto; font-size:12px; color:var(--text2); }
.prj-cl-row .ch{ font-size:15px; color:#6a6a6e; }
.prj-cl-add{ display:flex; align-items:center; gap:9px; padding:13px 15px; color:var(--text3); font-size:13px; cursor:pointer; }
.prj-cl-add .p{ width:18px; height:18px; border-radius:50%; border:1px dashed rgba(255,255,255,0.24); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }

/* edit-on-tap: visible caret + selection, undim done items while editing */
.cf-ed{caret-color:var(--green);}
.cf-ed:focus{opacity:1 !important;text-decoration:none !important;outline:none;border-radius:4px;}
.cal-wrap .cf-ed::selection,.cf-ed::selection{background:rgba(255,255,255,0.30) !important;color:#fff !important;}

/* sticky calendar header: pin toolbar + weekday row, scroll only the grid */
#page-calendar #cal-inner{flex:1;min-height:0;display:flex;flex-direction:column;}
#page-calendar .cal-cols{flex-shrink:0;}

/* prevent browser back/forward on horizontal trackpad swipe over calendar */
html,body{overscroll-behavior-x:none;}

/* ── Multi-select + bulk delete ── */
#ms-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);display:none;align-items:center;gap:12px;background:rgba(28,28,32,0.92);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:9px 14px;z-index:9500;box-shadow:0 20px 60px rgba(0,0,0,0.5);opacity:0;transition:opacity .2s ease,transform .2s ease;}
#ms-bar.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
#ms-bar button{background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:7px 14px;border-radius:11px;transition:background .15s;}
#ms-cancel{color:var(--text2);}
#ms-cancel:hover{background:rgba(255,255,255,0.06);}
#ms-del{color:#ff5a5a;background:rgba(255,90,90,0.12);}
#ms-del:disabled{opacity:0.4;cursor:default;}
#ms-count{font-size:13px;color:var(--text3);min-width:18px;text-align:center;}
.ms-pick{position:relative !important;padding-left:32px !important;}
.ms-pick::before{content:"";position:absolute;left:3px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.6px solid var(--border3);background:transparent;z-index:5;transition:background .15s,border-color .15s;box-sizing:border-box;}
.ms-pick.ms-sel::before{background:var(--green);border-color:var(--green);}
.ms-pick.ms-sel::after{content:"";position:absolute;left:8.5px;top:50%;width:7px;height:4px;margin-top:-3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg);z-index:6;}
.ms-pick.ms-sel{outline:2px solid var(--green) !important;outline-offset:-2px;background:rgba(255,255,255,0.07) !important;border-radius:12px;}
.ms-pick-cal{cursor:pointer !important;}
.ms-pick-cal.ms-sel{outline:2px solid var(--green) !important;outline-offset:-1px;}
#ms-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:none;align-items:center;gap:16px;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:10px 18px;z-index:9600;box-shadow:0 12px 40px rgba(0,0,0,0.45);font-size:13px;font-weight:600;color:var(--text);}
#ms-toast.on{display:flex;}
#ms-toast button{background:none;border:none;color:var(--green);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}

/* ── Home running-focus timer pill ── */
#home-focus-pill{display:inline-flex;margin-right:10px;align-items:center;gap:6px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;padding:5px 11px;border-radius:12px;cursor:pointer;letter-spacing:-0.2px;line-height:1;transition:background .15s;}
#home-focus-pill:hover{background:rgba(255,255,255,0.18);}
#home-focus-pill .hfp-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:hfpPulse 1.4s ease-in-out infinite;}
@keyframes hfpPulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

/* ===== Luxo-style home band (одноряд: плитка + торчащая иконка) ===== */
.depth-scene .lx-band{ position:absolute; top:50%; left:0; display:flex; align-items:center; width:max-content; will-change:transform; }
.depth-scene .lx-cell{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; margin-right:58px; }
.depth-scene .lx-proj{ margin-right:160px; cursor:pointer; position:relative; z-index:5; }
.depth-scene .lx-stack{ position:relative; display:grid; place-items:end center; width:205px; height:320px; overflow:visible; }
.depth-scene .lx-tile{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:205px; height:205px; border-radius:26%; box-shadow:0 34px 50px rgba(0,0,0,.55), inset 0 2px 1px rgba(255,255,255,.18), inset 0 -10px 24px rgba(0,0,0,.28); }
.depth-scene .lx-tile{ display:none !important; }
.depth-scene .lx-floor{ display:none !important; }
.depth-scene .lx-popwrap{ position:absolute; bottom:33px; left:50%; transform:translateX(-50%); z-index:2; animation:lxbobp 3.6s ease-in-out infinite; }
@keyframes lxbobp{ 0%,100%{ transform:translateX(-50%) translateY(-6px); } 50%{ transform:translateX(-50%) translateY(6px); } }
.depth-scene .lx-pop{ display:block; width:274px; height:274px; object-fit:contain; filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)); transition:transform .25s cubic-bezier(.32,.72,0,1); }
.depth-scene .lx-proj:hover .lx-pop{ transform:translateY(-9px) scale(1.04); }
.depth-scene .lx-label{ margin-top:18px; text-align:center; }
.depth-scene .lx-nm{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:19px; font-weight:600; letter-spacing:-0.01em; color:#fff; }
.depth-scene .lx-sb{ font-size:13px; font-weight:500; color:rgba(255,255,255,.42); margin-top:5px; }
.depth-scene .lx-bar{ height:3px; width:84px; border-radius:3px; background:rgba(255,255,255,.1); margin:12px auto 0; overflow:hidden; }
.depth-scene .lx-bar>i{ display:block; height:100%; background:rgba(255,255,255,.6); border-radius:3px; }
.depth-scene .lx-free{ margin-right:58px; pointer-events:none; position:relative; z-index:1; }
.depth-scene .lx-fimg{ width:264px; height:264px; object-fit:contain; filter:drop-shadow(0 26px 28px rgba(0,0,0,.65)); animation:lxbob 3.6s ease-in-out infinite; }
@keyframes lxbob{ 0%,100%{ transform:translateY(-7px); } 50%{ transform:translateY(7px); } }

/* ===== Splash экран + искры-фон (2026-06-04) ===== */
#home-splash{ position:fixed; inset:0; z-index:300; background:#000; overflow:hidden;
  transition:transform .6s cubic-bezier(.7,0,.2,1), opacity .6s; }
#home-splash.sp-gone{ transform:translateY(-100%); opacity:0; }
#home-splash canvas{ position:absolute; inset:0; width:100%; height:100%; }
#home-splash .sp-title{ position:absolute; left:0; right:0; bottom:54%; text-align:center; }
#home-splash .sp-title h1{ font-family:'General Sans',-apple-system,system-ui,sans-serif;
  font-size:clamp(64px,14vw,128px); font-weight:800; letter-spacing:-0.04em; color:#fff;
  text-shadow:0 0 40px rgba(255,255,255,.35),0 0 90px rgba(120,160,255,.3);
  animation:spRise 1.1s cubic-bezier(.22,1,.36,1) both; }
#home-splash .sp-hint{ position:absolute; left:0; right:0; bottom:calc(40px + env(safe-area-inset-bottom,0px));
  text-align:center; color:rgba(255,255,255,.5); font-size:13px; font-weight:600; letter-spacing:.04em;
  animation:spHint 1.8s ease-in-out infinite; cursor:pointer; }
#home-splash .sp-hint span{ display:block; font-size:18px; margin-bottom:6px; }
@keyframes spRise{ from{opacity:0;transform:translateY(26px);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
@keyframes spHint{ 0%,100%{transform:translateY(0);opacity:.45} 50%{transform:translateY(-8px);opacity:.9} }
#page-home > #home-greeting-wrap, #page-home > .sec-hdr, #page-home > #home-proj-grid{ position:relative; z-index:1; }

/* подпись под заголовком главной */
#home-sec-sub{ font-family:'General Sans',-apple-system,system-ui,sans-serif; font-size:13px; font-weight:500; color:#8e8e93; margin:-15px 0 16px; letter-spacing:-0.1px; position:relative; z-index:1; }

/* ===== Split menu (десктоп) 2026-06-04 ===== */
#split-toggle{ position:fixed; top:12px; right:16px; z-index:120; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:#cfcfd2;
  transition:background .15s,color .15s; -webkit-tap-highlight-color:transparent; }
#split-toggle:hover{ background:rgba(255,255,255,0.13); color:#fff; }
@media(max-width:899px){ #split-toggle{ display:none !important; } }
/* левое меню — в центр-влево */
body.split-mode #app-sheet{ left:25vw !important; }
body.split-mode #split-toggle{ left:50%; right:auto; transform:translateX(-50%); }
/* правая панель: половина экрана, без линии, прозрачная — остаётся только шторка */
#split-pane{ position:fixed; top:0; right:0; width:50vw; height:100vh; z-index:60; background:transparent; }
#split-pane iframe{ width:100%; height:100%; border:0; display:block; background:transparent !important; color-scheme:normal; }
/* прозрачный фон в правой панели (перебиваем :has-правила .main-area) */
html.pane2, body.pane2, .pane2 #app, .pane2 .app{ background:transparent !important; }
.pane2 .main-area,
.pane2 .main-area:has(> #page-home.active),
.pane2 .main-area:has(> .page.active){ background:transparent !important; }
.pane2 #page-home, .pane2 .topbar{ display:none !important; }

/* header tweak 2026-06-04 */
#home-sec-sub{ display:none !important; }
#page-home .sec-title .sec-count{ font-size:1em !important; }

/* home ambient 2026-06-04 */
#home-glow{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); width:min(1300px,120vw); height:600px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(70,120,255,.16), rgba(70,120,255,.05) 45%, transparent 70%); filter:blur(8px); }
#home-vignette{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 55%, transparent 55%, rgba(0,0,0,.55) 100%); }
.depth-scene .lx-floor{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); width:215px; height:54px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(120,160,255,.18), transparent 70%); filter:blur(6px); }
#home-stats{ display:flex; gap:10px; margin:14px 0 0; position:relative; z-index:1; flex-wrap:wrap; }
#home-stats .pill{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:30px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); font-size:13px; color:#cfcfd2; font-weight:500; }
#home-stats .pill b{ color:#fff; font-weight:700; }
#home-stats .pill .dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; }
#home-stats .pill .rng{ width:22px; height:22px; display:inline-block; line-height:0; }
#home-stats .pill .rng svg{ transform:rotate(-90deg); }

/* expanded sheet — сплошной фон #16171A без прозрачности 2026-06-04 */
.app-sheet.expanded{ background:#16171A !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* peek + medium шторка — графитовый серый (прозрачность/блюр как есть) 2026-06-04 */
.app-sheet, .app-sheet.medium{ background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0) 24%), rgba(72,73,80,0.9) !important; }
.app-sheet.expanded{ background:#16171A !important; }

/* ВСЕ состояния шторки = сплошной #16171A без прозрачности/блюра 2026-06-04 */
.app-sheet, .app-sheet.peek, .app-sheet.medium, .app-sheet.expanded{ background:#16171A !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* задача (строка), шапка раскрытой задачи и аккордеон — #1f2023  2026-06-04 */
.task-row, .task-wrap, .task-wrap .task-row{ background:#1f2023 !important; }
.app-sheet .task-accordion, .task-accordion{ background:#1f2023 !important; }

/* раскрытая задача — без тени + цвет #26282C  2026-06-04 */
.task-wrap{ box-shadow:none !important; }
.task-row, .task-wrap, .task-wrap .task-row{ background:#26282C !important; }
.app-sheet .task-accordion, .task-accordion{ background:#26282C !important; }

/* закрытая карточка без обводки 2026-06-04 */
.task-row{ border-color:transparent !important; box-shadow:none !important; }

/* закрытая строка задачи — плоская, без заливки/обводки; раскрытая карточка остаётся #26282C  2026-06-04 */
.task-row{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.task-wrap{ background:#26282C !important; }
.app-sheet .task-wrap .task-accordion, .task-wrap .task-accordion{ background:#26282C !important; }

/* Чеклист v3 — попап + аккордеон блока 2026-06-04 */
#cl-popup-ov{ position:fixed; inset:0; z-index:9800; background:rgba(0,0,0,0.5); display:flex; align-items:flex-start; justify-content:center; opacity:0; transition:opacity .2s; padding:60px 20px 20px; overflow-y:auto; }
#cl-popup-ov.on{ opacity:1; }
.cl-popup{ position:fixed; width:min(460px,calc(100vw - 20px)); max-height:80vh; overflow-y:auto; transform-origin:top left; background:#16171A; border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:16px 18px 18px; transform:scale(.96); transition:transform .18s cubic-bezier(.32,.72,0,1),opacity .16s ease; opacity:0; box-shadow:0 32px 80px rgba(0,0,0,0.6); }
#cl-popup-ov.on .cl-popup{ transform:scale(1); opacity:1; }
.cl-popup-hdr{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.cl-popup-title{ font-size:20px; font-weight:700; color:#fff; letter-spacing:-0.2px; flex:1; min-width:0; }
.cl-popup-x{ background:none; border:none; color:var(--text3); cursor:pointer; display:flex; padding:4px; flex-shrink:0; }
.cl-popup-desc{ font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:14px; }
/* Чеклист v3 — компактные чеклисты 3-в-ряд + пункты-карточки в попапе (2026-06-06) */
.cl-chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 0 10px;}
.cl-chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:background .15s ease,transform .12s ease;}
.cl-chip:hover{background:rgba(255,255,255,0.09);}
.cl-chip:active{transform:scale(0.97);}
.cl-chip-title{font-size:12.5px;font-weight:500;color:#fff;line-height:1.25;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.cl-chip-add{border-style:dashed;}
.cl-chip-add:hover{color:rgba(255,255,255,0.7);}
.cl-popup .cl-items{gap:4px;}
.cl-popup .cl-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:6px 12px;}
.cl-popup .cl-item:hover{background:rgba(255,255,255,0.09);}
.cl-popup .cl-item-title{color:#fff;}
/* Таблетка времени-плейсхолдер для задач без времени (2026-06-06) */
.t-timepill-empty{ color:var(--text3); background:var(--bg3); border:1px solid var(--border2); font-weight:500; }
.task-row .t-timepill-empty, .task-wrap .t-timepill-empty{ opacity:1; }
/* Прогресс-кольцо задачи остаётся после завершения + чек по центру (2026-06-06) */
.task-check.has-progress{ position:relative; }
.task-check .tc-chk{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
/* Пружинка галочки при завершении задачи (2026-06-06) */
@keyframes tcpop{0%{transform:scale(.55)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.task-check.tc-pop{ animation:tcpop .26s cubic-bezier(.34,1.56,.64,1); }

/* === home 3-row drifting scene (dp3) === */
.depth-scene.dp3{ position:relative; overflow:visible; }
.depth-scene.dp3 .dp3-row{ position:fixed; left:0; right:0; overflow:visible; }
.depth-scene.dp3 .dp3-r1{ transform:translateY(-50%); z-index:2; }
.depth-scene.dp3 .dp3-r2{ z-index:1; }
.depth-scene.dp3 .dp3-r3{ z-index:1; }
.depth-scene.dp3 .dp3-track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.depth-scene.dp3 .dp3-proj{ flex:0 0 32vw; display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.depth-scene.dp3 .dp3-proj .ic{ width:290px; height:290px; object-fit:contain; filter:drop-shadow(0 30px 36px rgba(0,0,0,.6)); animation:dp3bob 4s ease-in-out infinite; }
.depth-scene.dp3 .dp3-nm{ font-size:21px; font-weight:700; color:#fff; margin-top:22px; white-space:nowrap; }
.depth-scene.dp3 .dp3-sb{ font-size:14px; color:#888; margin-top:5px; }
.depth-scene.dp3 .dp3-bar{ width:140px; height:4px; border-radius:3px; background:rgba(255,255,255,.10); margin-top:14px; overflow:hidden; }
.depth-scene.dp3 .dp3-bar i{ display:block; height:100%; border-radius:3px; }
.depth-scene.dp3 .dp3-deco{ flex:0 0 32vw; display:flex; justify-content:center; }
.depth-scene.dp3 .dp3-deco img{ width:290px; height:290px; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(0,0,0,.55)); animation:dp3bob 4.6s ease-in-out infinite; }
.depth-scene.dp3 .dp3-r3 .dp3-deco img{ width:206px; height:206px; }
@keyframes dp3bob{ 0%,100%{ transform:translateY(var(--ty,0)); } 50%{ transform:translateY(calc(var(--ty,0) - 13px)); } }

/* focus inline accordion + block popup */
.fg-item{ display:block; }
.fg-acc{ padding:2px 4px 4px; }
.fg-card.fg-open{ outline:1.5px solid rgba(255,255,255,0.14); outline-offset:-1px; }
.fxp-ov{ position:fixed; inset:0; z-index:1250; background:rgba(0,0,0,0); transition:background .22s ease; }
.fxp-ov.on{ background:rgba(0,0,0,0.45); }
.fxp{ position:fixed; width:min(360px,92vw); max-height:78vh; overflow-y:auto; scrollbar-width:none; background:#26282C; border:1px solid rgba(255,255,255,0.10); border-radius:20px; box-shadow:0 32px 80px rgba(0,0,0,0.55); padding:15px 17px 13px; transform:scale(0.94); opacity:0; transform-origin:top left; transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .18s ease; }
.fxp::-webkit-scrollbar{ display:none; }
.fxp-ov.on .fxp{ transform:scale(1); opacity:1; }
.fxp-hdr{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fxp-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.fxp-title{ font-size:16px; font-weight:700; color:#fff; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fxp-x{ background:none; border:none; color:var(--text3); font-size:15px; cursor:pointer; padding:4px; line-height:1; }

/* uiConfirm modal (webview-safe confirm) */
.uic-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .18s ease;padding:24px;box-sizing:border-box;}
.uic-ov.on{opacity:1;}
.uic-box{width:100%;max-width:320px;background:rgba(28,28,32,0.98);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:22px 20px 16px;box-shadow:0 24px 70px rgba(0,0,0,0.6);transform:translateY(8px) scale(0.98);transition:transform .18s ease;}
.uic-ov.on .uic-box{transform:translateY(0) scale(1);}
.uic-msg{font-size:15px;line-height:1.45;color:var(--text);text-align:center;margin-bottom:18px;font-weight:500;}
.uic-input{width:100%;box-sizing:border-box;margin:-4px 0 16px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:var(--text);font-family:inherit;font-size:15px;outline:none;}
.uic-input:focus{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.09);}
.uic-btns{display:flex;gap:10px;}
.uic-btns button{flex:1;padding:12px;border-radius:12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:background .15s,opacity .15s;}
.uic-cancel{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12);color:var(--text2);}
.uic-cancel:hover{background:rgba(255,255,255,0.14);}
.uic-ok{background:#fff;color:#000;}
.uic-ok:hover{opacity:0.85;}
.uic-ok.uic-danger{background:#E5544B;color:#fff;}
.uic-ok.uic-danger:hover{opacity:0.88;}

/* pinned checklists in topbar */
.tb-pinned{display:flex;align-items:center;gap:6px;overflow-x:auto;max-width:46vw;scrollbar-width:none;}
.tb-pinned::-webkit-scrollbar{display:none;}
.tb-pin-chip{display:flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;max-width:170px;transition:background .13s,color .13s;flex-shrink:0;}
.tb-pin-chip:hover{background:var(--bg4);color:var(--text);}
.tb-pin-chip:active{transform:scale(0.96);}
.tb-pin-chip svg{width:12px;height:12px;flex-shrink:0;opacity:.65;}
.tb-pin-chip .tb-pin-lbl{overflow:hidden;text-overflow:ellipsis;}
.cl-popup-pin{background:none;border:none;color:var(--text3);cursor:pointer;display:flex;padding:4px;flex-shrink:0;border-radius:7px;transition:color .13s,background .13s;}
.cl-popup-pin:hover{color:var(--text);background:rgba(255,255,255,0.06);}
.cl-popup-pin.active{color:#fff;background:rgba(255,255,255,0.12);}
.cl-pinned-row{display:none;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px;}
.cl-pinned-row::-webkit-scrollbar{display:none;}

/* тумблер 3D-анимаций на главной */
#home-anim-toggle{position:absolute;top:14px;right:16px;z-index:7;display:flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:9px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.72);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .13s,color .13s,opacity .13s;}
#home-anim-toggle:hover{background:rgba(255,255,255,0.14);color:#fff;}
#home-anim-toggle:active{transform:scale(0.96);}
#home-anim-toggle.off{opacity:0.75;color:rgba(255,255,255,0.5);}
#home-anim-toggle svg{flex-shrink:0;}

/* переключатель Чеклист/Заметки */
.sec-switch{display:flex;gap:18px;align-items:baseline;}
.sec-switch button{border:none;background:none;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:-0.3px;cursor:pointer;padding:0;color:var(--text4);transition:color .15s;}
.sec-switch button.on{color:var(--text);}
.sec-switch button:hover{color:var(--text3);}
.sec-switch button.on:hover{color:var(--text);}

/* заметки — плоский стиль как чеклист */
#notes-grid{display:flex!important;flex-direction:column;gap:0;}
.nt-row:not(.expanded){background:none!important;border:none!important;box-shadow:none!important;min-height:0!important;height:auto!important;overflow:visible!important;padding:11px 12px!important;border-radius:12px!important;}
.nt-row:not(.expanded):hover{background:rgba(255,255,255,0.04)!important;transform:none!important;box-shadow:none!important;}
.nt-row:not(.expanded) .note-title{font-size:15px;font-weight:500;margin-bottom:0;}
.nt-row:not(.expanded) .note-preview{font-size:12px;color:var(--text3);margin-top:2px!important;-webkit-line-clamp:1;}