.transfer-surface{
  --ground:#E6EAF2;
  --wash-a:#CBD9F2; --wash-b:#DEE6F7; --wash-c:#D6E2F4;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.88);
  --glass-input:rgba(255,255,255,.55);
  --edge:rgba(255,255,255,.75);
  --hairline:rgba(22,26,38,.10);
  --hairline-soft:rgba(22,26,38,.06);
  --ink:#191B21; --ink-soft:#5C606B; --ink-faint:#9397A3;
  --accent:#2C5F9E; --accent-ink:#fff; --accent-soft:rgba(44,95,158,.11);
  --ok:#2C6E52; --warn:#8A6410; --crit:#A93A33;
  --ok-soft:rgba(44,110,82,.12); --warn-soft:rgba(138,100,16,.13); --crit-soft:rgba(169,58,51,.11);
  --block:#DCE7F5; --block-line:#2C5F9E;
  --tbox:#E9E2D4; --tbox-line:#8A6410;
  --sh-rest:0 1px 2px rgba(16,20,30,.05), 0 6px 18px rgba(16,20,30,.07);
  --sh-lift:0 3px 8px rgba(16,20,30,.10), 0 28px 64px rgba(16,20,30,.18);
  --sh-sheet:0 8px 20px rgba(16,20,30,.12), 0 40px 90px rgba(16,20,30,.24);
  --r-panel:14px; --r-card:12px; --r-btn:10px;
  --r-pill:999px; --r-fld:10px; --r-ico:8px; --r-dlg:16px; --r-cell:6px; --r-chk:6px;
  --sans:"Golos Text",-apple-system,"Segoe UI",system-ui,sans-serif;
  --serif:"Literata",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --now:#E08A2B;
  --cal-bg:var(--pane-content);
  /* подсказка при наведении: непрозрачная в обеих темах, иначе сквозь неё видно текст */
  --tip-bg:#1D2028; --tip-ink:#FFFFFF; --tip-key:rgba(255,255,255,.18);
  --card-solid:#FFFFFF;
  /* лист снизу: сам лист светлее своих карточек, как в образце */
  --r-sheet:32px;--r-scard:18px;
  --act-bg:rgba(37,99,183,.9);--act-edge:rgba(255,255,255,.24);--act-ink:#fff;
  --act-dim:rgba(255,255,255,.65);--act-sel:rgba(255,255,255,.2);--act-key:rgba(255,255,255,.2);
  --glassbtn:rgba(255,255,255,.55);--glassedge:rgba(20,22,30,.14);--glassink:var(--ink);
  --floatbar:rgba(255,255,255,.55);--sheet-line:rgba(60,60,67,.14);
  --trans-bg:rgba(21,126,250,.10);
  --sheet-bg:#F2F2F7;--sheet-card:#FFFFFF;--sheet-grip:rgba(60,60,67,.3);--sheet-btn:rgba(60,60,67,.12);
  --tsl-a:#F6EEFA;--tsl-b:#EEF2FB;--tsl-edge:#D9CBE8;
  --sh-pop:0 6px 16px rgba(16,20,30,.16), 0 20px 44px rgba(16,20,30,.20);
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* Зоны экрана красятся своими токенами: панель разделов, боковая колонка раздела,
     список и содержимое. Светлая тема — «Лён» по выбору Val. */
  --pane-bar:#F6F8FC; --pane-rail:#EEF1F7; --pane-side:#F5F7FC; --pane-list:#FFFFFF;
  --pane-content:#F9FBFF; --pane-line:rgba(20,40,80,.08); --pane-glow:rgba(70,120,220,.07);
  --pane-top:rgba(255,255,255,.85);
}
@media (prefers-color-scheme:dark){ .transfer-surface:not([data-theme="light"]){
  --ground:#080B12; --wash-a:#16233A; --wash-b:#141B2C; --wash-c:#101A2A;
  --glass:rgba(38,41,50,.58); --glass-strong:rgba(44,47,57,.92); --glass-input:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.11); --hairline-soft:rgba(255,255,255,.06);
  --ink:#ECEEF3; --ink-soft:#A0A5B2; --ink-faint:#6C717E;
  --accent:#79ACEA; --accent-ink:#0F1015; --accent-soft:rgba(121,172,234,.16);
  --ok:#63C295; --warn:#DAB264; --crit:#EA8B84;
  --ok-soft:rgba(99,194,149,.15); --warn-soft:rgba(218,178,100,.15); --crit-soft:rgba(234,139,132,.14);
  --block:#25344A; --block-line:#79ACEA; --tbox:#37301F; --tbox-line:#DAB264;
  --sh-rest:0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.34);
  --sh-lift:0 4px 10px rgba(0,0,0,.38), 0 30px 70px rgba(0,0,0,.55);
  --sh-sheet:0 10px 24px rgba(0,0,0,.40), 0 44px 100px rgba(0,0,0,.60);
  --now:#F0A43C;
  --cal-bg:var(--pane-content);
  --tip-bg:#3A3F4C; --tip-ink:#F4F6FA; --tip-key:rgba(255,255,255,.16);
  --card-solid:#252932;
  --r-sheet:32px;--r-scard:18px;
  --act-bg:rgba(28,74,140,.82);--act-edge:rgba(255,255,255,.22);--act-ink:#fff;
  --act-dim:rgba(255,255,255,.6);--act-sel:rgba(255,255,255,.18);--act-key:rgba(255,255,255,.18);
  --glassbtn:rgba(255,255,255,.13);--glassedge:rgba(255,255,255,.34);--glassink:#fff;
  --floatbar:rgba(255,255,255,.13);--sheet-line:rgba(0,0,0,.45);
  --trans-bg:rgba(21,126,250,.12);
  --sheet-bg:#3A3A3C;--sheet-card:rgba(0,0,0,.24);--sheet-grip:rgba(235,235,245,.45);--sheet-btn:rgba(235,235,245,.18);
  --tsl-a:#392840;--tsl-b:#2F3141;--tsl-edge:#59406F;
  --sh-pop:0 6px 16px rgba(0,0,0,.44), 0 20px 44px rgba(0,0,0,.56);
  /* Тёмная тема — «Полночь» с подсветкой: у зон синий подтон, вверху содержимого мягкий свет. */
  --pane-bar:#101521; --pane-rail:#121724; --pane-side:#18202F; --pane-list:#1E2739;
  --pane-content:#0D1220; --pane-line:rgba(150,180,240,.10); --pane-glow:rgba(90,140,235,.14);
  --pane-top:rgba(255,255,255,.06);
}}
.transfer-surface[data-theme="dark"]{
  --ground:#080B12; --wash-a:#16233A; --wash-b:#141B2C; --wash-c:#101A2A;
  --glass:rgba(38,41,50,.58); --glass-strong:rgba(44,47,57,.92); --glass-input:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.11); --hairline-soft:rgba(255,255,255,.06);
  --ink:#ECEEF3; --ink-soft:#A0A5B2; --ink-faint:#6C717E;
  --accent:#79ACEA; --accent-ink:#0F1015; --accent-soft:rgba(121,172,234,.16);
  --ok:#63C295; --warn:#DAB264; --crit:#EA8B84;
  --ok-soft:rgba(99,194,149,.15); --warn-soft:rgba(218,178,100,.15); --crit-soft:rgba(234,139,132,.14);
  --block:#25344A; --block-line:#79ACEA; --tbox:#37301F; --tbox-line:#DAB264;
  --sh-rest:0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.34);
  --sh-lift:0 4px 10px rgba(0,0,0,.38), 0 30px 70px rgba(0,0,0,.55);
  --sh-sheet:0 10px 24px rgba(0,0,0,.40), 0 44px 100px rgba(0,0,0,.60);
  --now:#F0A43C;
  --cal-bg:var(--pane-content);
  --tip-bg:#3A3F4C; --tip-ink:#F4F6FA; --tip-key:rgba(255,255,255,.16);
  --card-solid:#252932;
  --r-sheet:32px;--r-scard:18px;
  --act-bg:rgba(28,74,140,.82);--act-edge:rgba(255,255,255,.22);--act-ink:#fff;
  --act-dim:rgba(255,255,255,.6);--act-sel:rgba(255,255,255,.18);--act-key:rgba(255,255,255,.18);
  --glassbtn:rgba(255,255,255,.13);--glassedge:rgba(255,255,255,.34);--glassink:#fff;
  --floatbar:rgba(255,255,255,.13);--sheet-line:rgba(0,0,0,.45);
  --trans-bg:rgba(21,126,250,.12);
  --sheet-bg:#3A3A3C;--sheet-card:rgba(0,0,0,.24);--sheet-grip:rgba(235,235,245,.45);--sheet-btn:rgba(235,235,245,.18);
  --tsl-a:#392840;--tsl-b:#2F3141;--tsl-edge:#59406F;
  --sh-pop:0 6px 16px rgba(0,0,0,.44), 0 20px 44px rgba(0,0,0,.56);
  --pane-bar:#101521; --pane-rail:#121724; --pane-side:#18202F; --pane-list:#1E2739;
  --pane-content:#0D1220; --pane-line:rgba(150,180,240,.10); --pane-glow:rgba(90,140,235,.14);
  --pane-top:rgba(255,255,255,.06);
}
/* палитра тегов: двадцать оттенков, читаемых в обеих темах */
.transfer-surface{
  --t-slate:#5A6472;
  --t-grey:#6B7280;
  --t-brown:#7A5C43;
  --t-red:#A93A33;
  --t-rose:#A83A5B;
  --t-orange:#B4530F;
  --t-amber:#8A6410;
  --t-yellow:#7A6A0C;
  --t-olive:#5F6B1F;
  --t-lime:#4A7A1E;
  --t-green:#2C6E52;
  --t-emerald:#12715C;
  --t-teal:#0F766E;
  --t-cyan:#0E6C86;
  --t-sky:#14618F;
  --t-blue:#2C5F9E;
  --t-indigo:#3F4FA8;
  --t-violet:#6D4AA6;
  --t-purple:#7C3FA0;
  --t-pink:#A8347E;
}
@media (prefers-color-scheme:dark){ .transfer-surface:not([data-theme="light"]){
  --t-slate:#A8B2C1;
  --t-grey:#A3A9B5;
  --t-brown:#C4A188;
  --t-red:#EA8B84;
  --t-rose:#EE8FA8;
  --t-orange:#E9A06B;
  --t-amber:#DAB264;
  --t-yellow:#D7C95E;
  --t-olive:#BDC77A;
  --t-lime:#A8D07A;
  --t-green:#63C295;
  --t-emerald:#57C9A6;
  --t-teal:#5FC7BC;
  --t-cyan:#66C6DE;
  --t-sky:#7BBDE8;
  --t-blue:#79ACEA;
  --t-indigo:#96A2EE;
  --t-violet:#B49BE6;
  --t-purple:#C795E4;
  --t-pink:#EE8ACB;
}}
.transfer-surface[data-theme="dark"]{
  --t-slate:#A8B2C1;
  --t-grey:#A3A9B5;
  --t-brown:#C4A188;
  --t-red:#EA8B84;
  --t-rose:#EE8FA8;
  --t-orange:#E9A06B;
  --t-amber:#DAB264;
  --t-yellow:#D7C95E;
  --t-olive:#BDC77A;
  --t-lime:#A8D07A;
  --t-green:#63C295;
  --t-emerald:#57C9A6;
  --t-teal:#5FC7BC;
  --t-cyan:#66C6DE;
  --t-sky:#7BBDE8;
  --t-blue:#79ACEA;
  --t-indigo:#96A2EE;
  --t-violet:#B49BE6;
  --t-purple:#C795E4;
  --t-pink:#EE8ACB;
}

/* ---------- теги ---------- */
.transfer-surface .tg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding:2px 8px 2px 6px;border-radius:999px;color:var(--tgc,var(--t-blue));
  background:color-mix(in srgb, var(--tgc,var(--t-blue)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--tgc,var(--t-blue)) 26%, transparent);
  white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .tg .dot{width:6px;height:6px;border-radius:99px;background:var(--tgc,var(--t-blue));flex:0 0 auto}
.transfer-surface .tg.pick{cursor:pointer;opacity:.5;transition:opacity 150ms ease,transform 150ms var(--ease-out)}
.transfer-surface .tg.pick[aria-pressed="true"]{opacity:1}
.transfer-surface .tg.pick:active{transform:scale(.95)}
.transfer-surface .tgrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.transfer-surface .swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;max-width:296px}
.transfer-surface .swatches.compact{gap:5px;max-width:100%}
.transfer-surface .sw{width:100%;aspect-ratio:1;border-radius:99px;background:var(--tgc);position:relative;
  transition:transform 150ms var(--ease-out)}
.transfer-surface .sw:active{transform:scale(.86)}
@media (hover:hover){.transfer-surface .sw:hover{transform:scale(1.14)}}
.transfer-surface .sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-3px;border-radius:99px;border:2px solid var(--ink)}

.transfer-surface .evb.tinted{background:color-mix(in srgb, var(--tgc) 16%, var(--block));border-left-color:var(--tgc)}
.transfer-surface .kcard.tinted{box-shadow:inset 3px 0 0 var(--tgc), var(--sh-rest)}

/* ---------- формы ---------- */
.transfer-surface .form{display:flex;flex-direction:column;gap:15px}
.transfer-surface .frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.transfer-surface .fcol{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.transfer-surface .flab{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .remrow{display:flex;gap:6px;align-items:center}
.transfer-surface .remrow input{width:76px}
.transfer-surface .remrow select{padding:9px 8px;border-radius:var(--r-fld);background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .linkbtn{font-size:12.5px;font-weight:600;color:var(--accent);padding:4px 0}
.transfer-surface .parsed{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;border-radius:var(--r-card);
  background:var(--accent-soft);color:var(--accent);font-size:12.5px;line-height:1.45}
.transfer-surface .parsed b{font-weight:600}
.transfer-surface .parsed.done{background:var(--ok-soft);color:var(--ok)}

.transfer-surface .withmic{position:relative;display:flex}
.transfer-surface .withmic>.fld{flex:1;padding-right:46px}
.transfer-surface .micbtn{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:var(--r-ico);display:grid;place-items:center;
  color:var(--ink-faint);background:var(--glass-input);border:1px solid var(--hairline);
  transition:transform 150ms var(--ease-out),background 150ms ease,color 150ms ease}
.transfer-surface .micbtn:active{transform:scale(.92)}
@media (hover:hover){.transfer-surface .micbtn:hover{color:var(--ink);background:var(--glass-strong)}}
.transfer-surface .micbtn.on{background:var(--crit);border-color:transparent;color:#fff;animation:pulse 1.6s ease-in-out infinite}

/* ---------- модальное окно ---------- */
.transfer-surface .dlgwrap{position:fixed;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(12,14,20,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.transfer-surface .dlg{width:min(560px,100%);height:min(88vh,720px);display:flex;flex-direction:column;background:var(--glass-strong);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--hairline);border-radius:var(--r-dlg);box-shadow:var(--sh-sheet), inset 0 1px 0 var(--edge);overflow:hidden}
.transfer-surface .dlg .dh{display:flex;align-items:center;gap:10px;padding:16px 18px 13px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .dlg .dh h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em}
.transfer-surface .dlg .db{flex:1;min-height:0;overflow:auto;padding:16px 18px}
.transfer-surface .dlg .db::-webkit-scrollbar{width:8px}
.transfer-surface .dlg .db::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.transfer-surface .dlg .df{display:flex;gap:8px;padding:13px 18px;border-top:1px solid var(--hairline-soft);align-items:center;flex:0 0 auto}

.transfer-surface *{box-sizing:border-box}
.transfer-surface,.transfer-surface,.transfer-surface #root{margin:0;padding:0;height:100%}
.transfer-surface{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden}
.transfer-surface #field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85;
  background:
    radial-gradient(1100px 720px at 12% -8%, var(--wash-a) 0%, transparent 62%),
    radial-gradient(900px 620px at 92% 8%, var(--wash-b) 0%, transparent 58%),
    radial-gradient(1000px 700px at 60% 108%, var(--wash-c) 0%, transparent 60%);}
.transfer-surface button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.transfer-surface input,.transfer-surface textarea,.transfer-surface select{font:inherit;color:inherit}
.transfer-surface :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.transfer-surface #app>*{min-width:0}
.transfer-surface #app{position:relative;z-index:1;max-width:100vw;display:grid;grid-template-rows:54px 1fr;grid-template-columns:232px 1fr;height:100vh;height:100dvh}
.transfer-surface #bar{grid-column:1/3;display:flex;align-items:center;gap:12px;padding:0 16px 0 14px;
  background:var(--pane-bar);
  border-bottom:1px solid var(--pane-line);box-shadow:inset 0 1px 0 var(--pane-top)}
.transfer-surface .logo{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.transfer-surface .date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.transfer-surface .load{display:flex;align-items:center;gap:8px;margin-left:8px;min-width:0}
.transfer-surface .load .track{width:130px;height:5px;border-radius:99px;background:var(--hairline);overflow:hidden}
.transfer-surface .load .fill{height:100%;border-radius:99px;background:var(--accent);transition:width 400ms var(--ease-out)}
.transfer-surface .load .fill.hot{background:var(--crit)}
.transfer-surface .load .lbl{font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
.transfer-surface .spacer{flex:1}
.transfer-surface .tool{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);
  background:var(--glass-input);border:1px solid var(--hairline);font-size:12.5px;font-weight:500;color:var(--ink-soft);
  transition:transform 140ms var(--ease-out),background 140ms ease,color 140ms ease;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.transfer-surface .tool:hover{color:var(--ink);background:var(--glass-strong)}}
.transfer-surface .tool:active{transform:scale(.965)}
.transfer-surface .tool kbd{font-family:var(--mono);font-size:10px;background:var(--hairline-soft);padding:1px 5px;border-radius:4px;color:var(--ink-faint)}
.transfer-surface .flag{font-size:11px;color:var(--ink-faint);font-family:var(--mono);min-width:70px;text-align:right}

/* ---- боковая панель: именованные разделы, как в референсах Val ---- */
/*
 * Четыре зоны экрана красятся своими токенами (`--pane-*`): панель разделов,
 * боковая колонка раздела, список и содержимое. Так собран образец, который
 * принёс Val: слева темнее, правее светлее, у содержимого сверху мягкий свет.
 */
/*
 * Кнопка в шапке панели сворачивает её в одни значки (`#app.railmin`), выбор
 * лежит в браузере (`desk.rail.min`). На планшете панель и так сжата правилом
 * по ширине окна, там кнопка не нужна.
 */
.transfer-surface .railfold{align-self:flex-end;width:30px;height:28px;margin:0 2px 4px;border-radius:var(--r-ico);
  display:grid;place-items:center;color:var(--ink-faint);background:transparent;border:0;cursor:pointer;
  transition:background 130ms ease,color 130ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .railfold:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface #app.railmin{grid-template-columns:64px 1fr}
.transfer-surface #app.railmin #rail{align-items:center;padding:10px 6px 12px}
.transfer-surface #app.railmin .railfold{align-self:center;margin:0 0 4px}
.transfer-surface #app.railmin .rbtn{width:48px;justify-content:center;padding:0}
.transfer-surface #app.railmin .rbtn .rlbl{display:none}
.transfer-surface #app.railmin .rbtn .bdg{position:absolute;top:2px;right:4px;min-width:15px;height:15px;font-size:9.5px;padding:0 4px;
  background:var(--crit);color:#fff}
.transfer-surface #rail{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 10px 12px;
  background:var(--pane-rail);
  border-right:1px solid var(--pane-line);box-shadow:inset 0 1px 0 var(--pane-top);overflow-y:auto}
.transfer-surface .rbtn{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:var(--r-btn);
  color:var(--ink-soft);position:relative;text-align:left;
  transition:transform 120ms var(--ease-out),background 140ms ease,color 140ms ease}
.transfer-surface .rbtn .rlbl{flex:1;min-width:0;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .rbtn:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.transfer-surface .rbtn:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .rbtn[aria-current="true"]{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .rbtn[aria-current="true"] svg{color:var(--accent-ink)}
.transfer-surface .rbtn .bdg{position:static;min-width:19px;height:18px;border-radius:99px;background:var(--hairline);
  color:var(--ink-soft);font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 6px}
.transfer-surface .rbtn[aria-current="true"] .bdg{background:rgba(255,255,255,.24);color:var(--accent-ink)}
.transfer-surface .rbtn .rav{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;
  background:#8A3A82;color:#fff;font-size:11px;font-weight:600}
.transfer-surface .rbtn.rhome{margin-bottom:6px}
.transfer-surface .rbtn.rset{margin-top:4px}
.transfer-surface .gap{flex:1}

.transfer-surface #main{overflow:hidden;position:relative}
.transfer-surface .view{position:absolute;inset:0;display:none;padding:14px;gap:14px;overflow:hidden}
.transfer-surface .view.on{display:flex}
.transfer-surface .view.on.float{display:block;padding:0;overflow:hidden}

.transfer-surface .panel{display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--pane-content);
  border:1px solid var(--pane-line);border-radius:var(--r-panel);
  box-shadow:var(--sh-rest), inset 0 1px 0 var(--pane-top);overflow:hidden}
.transfer-surface .panel.floaty{position:absolute;will-change:transform;transition:box-shadow 220ms var(--ease-out)}
.transfer-surface .panel.floaty>.phead{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.transfer-surface .panel.floaty>.phead:active{cursor:grabbing}
.transfer-surface .panel.floaty.grabbed{box-shadow:var(--sh-lift), inset 0 1px 0 var(--edge);z-index:40}
.transfer-surface .phead{display:flex;align-items:center;gap:9px;padding:12px 14px 10px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .ptitle{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .pcount{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.transfer-surface .pbody{flex:1;overflow:auto;overscroll-behavior:contain;padding:10px 12px 12px}
.transfer-surface .pbody.tlhost{overflow:hidden;display:flex;flex-direction:column;padding:0}
.transfer-surface .pbody::-webkit-scrollbar{width:8px;height:8px}
.transfer-surface .pbody::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.transfer-surface .grip{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;touch-action:none;z-index:6;opacity:.35;
  background:linear-gradient(135deg,transparent 46%,var(--ink-faint) 46%,var(--ink-faint) 53%,transparent 53%),
             linear-gradient(135deg,transparent 68%,var(--ink-faint) 68%,var(--ink-faint) 75%,transparent 75%)}
@media (hover:hover) and (pointer:fine){.transfer-surface .grip:hover{opacity:.7}}

.transfer-surface .minibtn{padding:5px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;background:var(--glass-input);
  border:1px solid var(--hairline);color:var(--ink-soft);white-space:nowrap;
  transition:transform 130ms var(--ease-out),background 130ms ease,color 130ms ease}
.transfer-surface .minibtn:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.transfer-surface .minibtn:hover{color:var(--ink);background:var(--glass-strong)}}
.transfer-surface .minibtn.acc{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.transfer-surface .minibtn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.transfer-surface select.fld{appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.transfer-surface .minibtn[disabled]{opacity:.5;pointer-events:none}

.transfer-surface .chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  padding:2px 7px;border-radius:var(--r-pill);background:var(--glass-input);color:var(--ink-soft)}
.transfer-surface .chip.ok{background:var(--ok-soft);color:var(--ok)}
.transfer-surface .chip.warn{background:var(--warn-soft);color:var(--warn)}
.transfer-surface .chip.crit{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .chip.acc{background:var(--accent-soft);color:var(--accent)}
.transfer-surface .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.transfer-surface .empty{padding:20px 8px;text-align:center;color:var(--ink-faint);font-size:12.5px;line-height:1.6}
.transfer-surface .notice{border-radius:var(--r-card);padding:11px 12px;font-size:12.5px;line-height:1.55;background:var(--warn-soft);color:var(--warn)}
.transfer-surface .notice.crit{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .notice b{display:block;font-weight:600;margin-bottom:2px}
.transfer-surface .fld{width:100%;padding:9px 11px;border-radius:var(--r-fld);background:var(--glass-input);border:1px solid var(--hairline);
  font-size:13.5px;color:var(--ink);transition:border-color 140ms ease,background 140ms ease}
.transfer-surface .fld::placeholder{color:var(--ink-faint)}
.transfer-surface .fld:focus{outline:none;border-color:var(--accent);background:var(--glass-strong)}
.transfer-surface textarea.fld{resize:vertical;min-height:90px;line-height:1.6}
.transfer-surface .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;
  transition:transform 150ms var(--ease-out),filter 150ms ease}
.transfer-surface .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.transfer-surface .btn:hover{filter:brightness(1.08)}}
.transfer-surface .btn.ghost{background:var(--glass-input);color:var(--ink-soft);border:1px solid var(--hairline)}
.transfer-surface .btn.danger{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .btn[disabled]{opacity:.45;pointer-events:none}

.transfer-surface .trow{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:var(--r-card);cursor:pointer;
  transition:background 140ms ease,transform 140ms var(--ease-out),opacity 200ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .trow:hover{background:var(--glass-input)}}
.transfer-surface .trow:active{transform:scale(.99)}
.transfer-surface .trow.dragging{opacity:.35}
/* строка, к которой пришли с главного экрана или из поиска: видно, куда смотреть */
.transfer-surface .trow.hi,.transfer-surface .ttrow.hi{background:color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
  animation:rowhi 2s ease}
@keyframes rowhi{0%{background:color-mix(in srgb, var(--accent) 30%, transparent)}100%{background:color-mix(in srgb, var(--accent) 10%, transparent)}}
.transfer-surface .trow .t{font-size:13.5px;font-weight:500;line-height:1.35}
.transfer-surface .trow .m{font-size:11.5px;color:var(--ink-faint);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.transfer-surface .trow.done .t{color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:1px}
.transfer-surface .check{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:var(--r-chk);border:1.5px solid var(--ink-faint);
  display:grid;place-items:center;transition:transform 140ms var(--ease-out),background 140ms ease,border-color 140ms ease}
.transfer-surface .check:active{transform:scale(.88)}
.transfer-surface .check[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.transfer-surface .check svg{opacity:0;transition:opacity 120ms ease}
.transfer-surface .check[aria-checked="true"] svg{opacity:1}
/* подзадачи */
.transfer-surface .twist{flex:0 0 auto;width:18px;height:18px;margin-top:1px;display:grid;place-items:center;border-radius:var(--r-chk);
  color:var(--ink-faint);transition:transform 180ms var(--ease-out),background 140ms ease}
.transfer-surface .twist[aria-expanded="true"]{transform:rotate(90deg)}
@media (hover:hover){.transfer-surface .twist:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .twist.ghost{pointer-events:none}
.transfer-surface .subrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-card);cursor:pointer;
  color:var(--ink-soft);transition:background 140ms ease}
.transfer-surface .subrow .t{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .subrow.done .t{color:var(--ink-faint);text-decoration:line-through}
@media (hover:hover){.transfer-surface .subrow:hover{background:var(--glass-input)}}
.transfer-surface .crumb{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-faint);padding:4px 8px 4px 4px;
  border-radius:8px;margin-bottom:10px}
@media (hover:hover){.transfer-surface .crumb:hover{color:var(--accent);background:var(--accent-soft)}}
.transfer-surface .sect{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin:12px 4px 5px}

.transfer-surface .tlwrap{flex:1;min-height:0;overflow:auto;display:flex}
.transfer-surface .tlwrap::-webkit-scrollbar{width:8px}
.transfer-surface .tlwrap::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.transfer-surface .tgut{flex:0 0 46px;position:relative}
.transfer-surface .tgut span{position:absolute;right:9px;transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  letter-spacing:.02em;color:var(--ink-faint)}
.transfer-surface .tgut span.first{transform:translateY(-2px)}
.transfer-surface .tgut span.last{transform:translateY(-100%)}
.transfer-surface .tcols{flex:1;display:flex;min-width:0}
.transfer-surface .tcol{flex:1;position:relative;border-left:1px dashed var(--hairline-soft);min-width:0}
.transfer-surface .tcol .hr{position:absolute;left:0;right:0;border-top:1px solid var(--hairline-soft)}
.transfer-surface .tcol .hr.strong{border-top-color:var(--hairline)}
.transfer-surface .tcol.today-col{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.transfer-surface .tcol.dropping{background:var(--warn-soft)}
.transfer-surface .nowline{position:absolute;left:0;right:0;border-top:1.5px solid var(--now);z-index:6}
.transfer-surface .nowline::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:99px;background:var(--now)}
.transfer-surface .nowpill{position:absolute;right:100%;top:-10px;margin-right:6px;padding:2px 8px;border-radius:99px;
  background:var(--now);color:#241804;font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.transfer-surface .tlwrap{padding-bottom:14px}
.transfer-surface .evb{position:absolute;border-radius:var(--r-cell);padding:3px 7px;overflow:hidden;z-index:3;cursor:pointer;
  background:var(--block);border-left:2.5px solid var(--block-line);touch-action:none;user-select:none;
  transition:filter 140ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .evb:hover{filter:brightness(1.05)}}
.transfer-surface .evb.tb{background:var(--tbox);border-left-color:var(--tbox-line)}
.transfer-surface .evb.moving{z-index:20;box-shadow:var(--sh-lift);opacity:.92}
.transfer-surface .evb .t{font-size:11.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .evb .s{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft)}
.transfer-surface .evb .rs{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.transfer-surface .dayhead{display:flex;border-bottom:1px solid var(--hairline-soft);overflow:hidden}
.transfer-surface .dayhead .gutpad{flex:0 0 46px}
.transfer-surface .dayhead .dh{flex:1;display:flex;align-items:center;gap:8px;padding:11px 4px 11px 12px;min-width:0}
.transfer-surface .dayhead .dh .dw{font-size:13px;font-weight:500;color:var(--ink-faint)}
.transfer-surface .dayhead .dh .dn{font-size:17px;font-weight:500;color:var(--ink)}
.transfer-surface .dayhead .dh.wend .dw,.transfer-surface .dayhead .dh.wend .dn{color:var(--ink-faint)}
.transfer-surface .dayhead .dh.today-col .dw{color:var(--accent)}
.transfer-surface .dayhead .dh.today-col .dn{display:grid;place-items:center;min-width:24px;height:24px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);font-weight:600}
.transfer-surface .allday{display:flex;border-bottom:1px solid var(--hairline-soft);padding:5px 0}
.transfer-surface .allday .gutpad{flex:0 0 46px;font-size:10px;color:var(--ink-faint);padding-left:6px;align-self:center;line-height:1.15}
.transfer-surface .adbar{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-cell);font-size:12px;font-weight:500;
  background:color-mix(in srgb, var(--tgc,var(--accent)) 28%, transparent);color:var(--ink)}
.transfer-surface .adbar .dot{width:6px;height:6px;border-radius:99px;background:var(--tgc,var(--accent))}
/* заголовок календаря как в референсе */
.transfer-surface .caltitle{text-transform:none;font-size:19px;font-weight:400;letter-spacing:-.01em;color:var(--ink-faint);white-space:nowrap}
.transfer-surface .caltitle b{font-weight:600;color:var(--ink)}
/* именно .calwk, а не .wk: .wk уже занят номерами недель в месячной сетке */
.transfer-surface .caltitle .calwk{font-size:12.5px;font-weight:400;color:var(--ink-faint);margin-left:8px}

.transfer-surface .kwrap{flex:1;display:flex;gap:12px;overflow:auto;padding:2px}
.transfer-surface .kcol{flex:0 0 250px;display:flex;flex-direction:column;min-height:0;max-height:100%;
  background:var(--glass-input);border:1px solid var(--hairline-soft);border-radius:14px}
.transfer-surface .kcol.dropping{background:var(--accent-soft)}
.transfer-surface .kcol h4{margin:0;padding:10px 12px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;gap:7px;align-items:center}
.transfer-surface .kcol .kb{flex:1;overflow:auto;padding:4px 8px 10px}
.transfer-surface .kcard{background:var(--glass-strong);border:1px solid var(--hairline-soft);border-radius:var(--r-card);padding:8px 10px;
  margin-bottom:7px;cursor:grab;box-shadow:var(--sh-rest);transition:transform 140ms var(--ease-out),opacity 200ms ease}
.transfer-surface .kcard:active{transform:scale(.98)}
.transfer-surface .kcard.dragging{opacity:.35}
.transfer-surface .kcard .t{font-size:13px;font-weight:500;line-height:1.35}
.transfer-surface .kcard .m{font-size:11px;color:var(--ink-faint);margin-top:3px;display:flex;gap:5px;flex-wrap:wrap}

.transfer-surface #scrim{position:fixed;inset:0;z-index:80;background:rgba(12,14,20,.32);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity 260ms var(--ease-out)}
.transfer-surface #scrim.on{opacity:1;pointer-events:auto}
/* карточка встречи открывается по центру, как и карточка задачи */
.transfer-surface #sheet{position:fixed;z-index:81;left:50%;top:50%;width:min(600px,calc(100vw - 32px));max-height:min(86vh,760px);
  display:flex;flex-direction:column;background:var(--glass-strong);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--hairline);border-radius:var(--r-dlg);box-shadow:var(--sh-sheet), inset 0 1px 0 var(--edge);
  transform:translate(-50%,-50%) scale(.965);opacity:0;pointer-events:none;
  transition:transform 300ms var(--ease-out),opacity 220ms ease;overflow:hidden}
.transfer-surface #sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.transfer-surface .shead{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .shead .k{font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .shead .h{font-size:16px;font-weight:600;line-height:1.3}
.transfer-surface .sbody{flex:1;overflow:auto;padding:16px}
.transfer-surface .sfoot{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--hairline-soft)}
.transfer-surface .sgroup{margin-bottom:18px}
.transfer-surface .slabel{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.transfer-surface .cmt{padding:9px 11px;border-radius:var(--r-card);background:var(--glass-input);font-size:12.5px;line-height:1.55}
.transfer-surface .cmt+.cmt{margin-top:6px}
.transfer-surface .cmt .w{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-bottom:3px}
.transfer-surface .seg{display:flex;gap:5px;flex-wrap:wrap}
.transfer-surface .seg button{padding:6px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--glass-input);
  border:1px solid var(--hairline);color:var(--ink-soft);transition:transform 140ms var(--ease-out),background 140ms ease,color 140ms ease}
.transfer-surface .seg button:active{transform:scale(.96)}
.transfer-surface .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.transfer-surface .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.transfer-surface .pbtn{width:26px;height:26px;border-radius:var(--r-ico);display:grid;place-items:center;color:var(--ink-faint);
  transition:transform 140ms var(--ease-out),background 140ms ease,color 140ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .pbtn:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .pbtn:active{transform:scale(.9)}

.transfer-surface #palwrap{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;
  background:rgba(12,14,20,.28);backdrop-filter:blur(2px)}
.transfer-surface #palwrap.on{display:flex}
.transfer-surface #pal{width:min(620px,calc(100vw - 32px));background:var(--glass-strong);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--hairline);border-radius:var(--r-dlg);box-shadow:var(--sh-sheet), inset 0 1px 0 var(--edge);overflow:hidden}
.transfer-surface #pal input{width:100%;border:0;background:none;padding:16px 18px;font-size:17px;color:var(--ink)}
.transfer-surface #pal input:focus{outline:none}
.transfer-surface #pal input::placeholder{color:var(--ink-faint)}
.transfer-surface #pal .hint{padding:0 18px 10px;font-size:11px;color:var(--ink-faint);display:flex;gap:12px;flex-wrap:wrap}
.transfer-surface #pal .hint b{font-family:var(--mono);font-weight:500;color:var(--ink-soft)}
.transfer-surface #pal .res{max-height:340px;overflow:auto;border-top:1px solid var(--hairline-soft);padding:6px}
.transfer-surface #pal .rg{padding:8px 12px 4px;font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint)}
/* строка находки: значок вида, название и подпись справа — письмо, встреча, задача */
.transfer-surface #pal .ri{padding:10px 12px;border-radius:var(--r-card);font-size:14.5px;display:flex;gap:11px;align-items:center;cursor:pointer}
.transfer-surface #pal .ri svg{flex:0 0 auto;color:var(--ink-faint)}
.transfer-surface #pal .ri.sel{background:var(--accent-soft)}
.transfer-surface #pal .ri.sel svg{color:var(--accent)}
.transfer-surface #pal .ri .k{font-size:11.5px;color:var(--ink-faint);margin-left:auto;white-space:nowrap;max-width:40%;
  overflow:hidden;text-overflow:ellipsis}

.transfer-surface #ritual{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;
  background:rgba(12,14,20,.34);backdrop-filter:blur(6px)}
.transfer-surface #ritual.on{display:flex}
.transfer-surface #ritual .card{width:min(680px,calc(100vw - 28px));max-height:88vh;display:flex;flex-direction:column;
  background:var(--glass-strong);backdrop-filter:blur(34px) saturate(190%);border:1px solid var(--hairline);
  border-radius:var(--r-dlg);box-shadow:var(--sh-sheet), inset 0 1px 0 var(--edge);overflow:hidden}
.transfer-surface #ritual .rh{padding:20px 24px 0}
.transfer-surface #ritual .steps{display:flex;gap:6px;margin-bottom:14px}
.transfer-surface #ritual .steps i{flex:1;height:4px;border-radius:99px;background:var(--hairline)}
.transfer-surface #ritual .steps i.onn{background:var(--accent)}
.transfer-surface #ritual h2{margin:0 0 4px;font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.01em}
.transfer-surface #ritual .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 6px}
.transfer-surface #ritual .rb{flex:1;overflow:auto;padding:12px 24px}
.transfer-surface #ritual .rf{display:flex;gap:8px;padding:14px 24px;border-top:1px solid var(--hairline-soft)}

.transfer-surface #toasts{position:fixed;z-index:95;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:8px;align-items:center;pointer-events:none}
.transfer-surface .toast{padding:10px 16px;border-radius:var(--r-card);font-size:13px;font-weight:500;background:var(--glass-strong);
  backdrop-filter:blur(20px);border:1px solid var(--hairline);box-shadow:var(--sh-lift);
  transition:opacity 240ms ease,transform 240ms var(--ease-out)}
.transfer-surface .toast.out{opacity:0;transform:translateY(8px)}
.transfer-surface .toast.bad{color:var(--crit)}

/* экран настроек/аккаунтов */
.transfer-surface .settings{max-width:640px}
.transfer-surface .arow{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .arow:last-child{border-bottom:0}


/* ---------- дашборд ---------- */
.transfer-surface .view.float.on{display:flex;flex-direction:column;padding:10px 14px 0;gap:10px;overflow:hidden}
.transfer-surface .dashbar{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:30px}
.transfer-surface .dashbar .tgrow{margin:0}

/* холст с невидимой сеткой */
.transfer-surface .gcanvas{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 -14px;padding:0 14px}
.transfer-surface .gcanvas::-webkit-scrollbar{width:9px}
.transfer-surface .gcanvas::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.transfer-surface .gsheet{position:relative}
.transfer-surface .panel.gcard{position:absolute;top:0;left:0;will-change:transform;
  transition:transform 300ms var(--ease-out),width 300ms var(--ease-out),height 300ms var(--ease-out),box-shadow 220ms ease}
.transfer-surface .panel.gcard>.phead{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.transfer-surface .panel.gcard.grabbed{transition:none;box-shadow:var(--sh-lift),inset 0 1px 0 var(--edge);z-index:80 !important}
.transfer-surface .panel.gcard.grabbed>.phead{cursor:grabbing}
.transfer-surface .gghost{position:absolute;top:0;left:0;z-index:1;border-radius:var(--r-panel);pointer-events:none;
  border:1.5px dashed color-mix(in srgb,var(--accent) 42%,transparent);background:var(--accent-soft);
  transition:transform 220ms var(--ease-out),width 220ms var(--ease-out),height 220ms var(--ease-out)}
.transfer-surface .gcard .grip{display:grid;place-items:center;width:20px;height:20px;right:2px;bottom:2px;background:none;
  color:var(--ink-faint);opacity:.45;transition:opacity 160ms ease}
@media (hover:hover){.transfer-surface .gcard .grip:hover{opacity:.9}}
.transfer-surface .menuscrim{position:fixed;inset:0;z-index:60}
.transfer-surface .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:61;min-width:236px;max-height:60vh;overflow:auto;padding:6px;
  background:var(--glass-strong);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--hairline);
  border-radius:var(--r-card);box-shadow:var(--sh-sheet)}
/* меню письма шире: пункты в образце стоят одной строкой */
.transfer-surface .menu.msgmenu{min-width:274px}
.transfer-surface .menu.msgmenu .mitem{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .mgroup{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 4px}
.transfer-surface .mitem{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-btn);font-size:13px}
@media (hover:hover){.transfer-surface .mitem:hover{background:var(--accent-soft);color:var(--accent)}}

/* ---------- строка дня в карточках ---------- */
.transfer-surface .agrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px;border-radius:var(--r-btn);
  transition:background 140ms ease}
@media (hover:hover){.transfer-surface .agrow:hover{background:var(--glass-input)}}
.transfer-surface .agrow .tm{flex:0 0 44px;font-size:11px;color:var(--ink-faint)}
.transfer-surface .agrow .bar{flex:0 0 3px;align-self:stretch;min-height:16px;border-radius:99px;background:var(--tgc,var(--accent))}
.transfer-surface .agrow .t{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .agrow.task .bar{background:var(--tgc,var(--warn))}
.transfer-surface .agrow.done .t{color:var(--ink-faint);text-decoration:line-through}
.transfer-surface .wkday{margin-bottom:6px}
.transfer-surface .wkhead{display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;border-radius:var(--r-btn);font-size:12px;color:var(--ink-soft)}
.transfer-surface .wkhead.today{color:var(--accent);background:var(--accent-soft)}
.transfer-surface .wkempty{padding:3px 8px 6px 52px;font-size:12px;color:var(--ink-faint)}

/* ---------- месяц ---------- */
.transfer-surface .pbody.nopad{padding:0}
.transfer-surface .mgrid{display:flex;flex-direction:column;height:100%;min-height:0}
.transfer-surface .mhead{display:grid;grid-template-columns:38px repeat(7,1fr);border-bottom:1px solid var(--hairline)}
.transfer-surface .mhead .mh{padding:9px 8px;text-align:center;font-size:12.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-soft)}
.transfer-surface .mhead .mh.off{color:var(--ink-faint);opacity:.65}
.transfer-surface .mbody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.transfer-surface .mrow{display:grid;grid-template-columns:38px repeat(7,1fr);flex:1;min-height:112px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .mrow:last-child{border-bottom:0}
.transfer-surface .wk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-right:1px solid var(--hairline-soft);background:color-mix(in srgb, var(--ink) 2%, transparent)}
.transfer-surface .wk span{font-size:8.5px;letter-spacing:.06em;color:var(--ink-faint)}
.transfer-surface .wk b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-faint)}
.transfer-surface .mcell{display:flex;flex-direction:column;gap:2px;padding:4px 5px 6px;border-left:1px solid var(--hairline-soft);
  min-width:0;overflow:hidden;transition:background 160ms ease}
.transfer-surface .mtop{display:flex;justify-content:flex-end;margin-bottom:2px}
.transfer-surface .mcell.other{background:color-mix(in srgb, var(--ink) 2.5%, transparent)}
.transfer-surface .mcell.other .mnum{color:var(--ink-faint);opacity:.7}
.transfer-surface .mcell.wend{background:color-mix(in srgb, var(--ink) 1.5%, transparent)}
.transfer-surface .mcell.today{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.transfer-surface .mcell.dropping{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
@media (hover:hover){.transfer-surface .mcell:hover{background:color-mix(in srgb, var(--ink) 4%, transparent)}}
.transfer-surface .mnum{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;
  font-size:13px;font-weight:500;color:var(--ink);border-radius:var(--r-cell);cursor:pointer;
  transition:background 150ms ease,color 150ms ease}
@media (hover:hover){.transfer-surface .mnum:hover{background:var(--glass-strong)}}
.transfer-surface .mcell.today{background:color-mix(in srgb, var(--accent) 9%, transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.transfer-surface .mcell.today .mnum{background:var(--accent);color:var(--accent-ink);font-weight:600}
.transfer-surface .mev{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:2px 5px;border-radius:var(--r-cell);
  font-size:12px;line-height:1.35;min-width:0;color:var(--ink);background:transparent;
  transition:background 150ms ease}
.transfer-surface .mev.allday{background:color-mix(in srgb, var(--tgc,var(--accent)) 30%, transparent);padding:3px 7px;font-weight:500}
.transfer-surface .mev .dot{flex:0 0 5px;height:5px;border-radius:99px;background:var(--tgc,var(--accent))}
.transfer-surface .mev .box{flex:0 0 9px;height:9px;border-radius:3px;border:1.5px solid var(--tgc,var(--warn))}
.transfer-surface .mev .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .mev .tm{font-size:10px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.transfer-surface .mev.task{background:transparent}
.transfer-surface .mev.done .t{text-decoration:line-through;color:var(--ink-faint)}
@media (hover:hover){.transfer-surface .mev:hover{background:color-mix(in srgb, var(--tgc,var(--accent)) 18%, transparent)}}
.transfer-surface .mmore{align-self:flex-start;font-size:10.5px;font-weight:600;color:var(--ink-faint);padding:1px 5px;border-radius:var(--r-pill)}
@media (hover:hover){.transfer-surface .mmore:hover{color:var(--accent);background:var(--accent-soft)}}

/* ---------- год ---------- */
.transfer-surface .ygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;padding:4px}
.transfer-surface .ymonth{background:var(--glass-input);border:1px solid var(--hairline-soft);border-radius:var(--r-panel);padding:9px 10px 11px}
.transfer-surface .ymonth.wide{background:transparent;border:0;padding:0}
.transfer-surface .ytitle{font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.transfer-surface .ytitle.static{color:var(--ink-soft)}
.transfer-surface .ydays{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.transfer-surface .yh{font-size:9px;text-align:center;color:var(--ink-faint);padding-bottom:3px}
.transfer-surface .yd{aspect-ratio:1;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;border-radius:var(--r-cell);
  color:var(--ink-soft);position:relative}
.transfer-surface .ymonth.wide .yd{font-size:12px}
.transfer-surface .yd.off{color:var(--ink-faint);opacity:.45}
.transfer-surface .yd.today{background:var(--accent);color:var(--accent-ink);font-weight:700}
.transfer-surface .yd.busy::after{content:"";position:absolute;bottom:2px;width:3px;height:3px;border-radius:99px;background:var(--accent)}
.transfer-surface .yd.today.busy::after{background:var(--accent-ink)}
@media (hover:hover){.transfer-surface .yd:hover{background:var(--glass-strong)}}

/* ---------- задачи со списками ---------- */
.transfer-surface .tasksplit{display:flex;height:100%;min-height:0}
.transfer-surface .tside{flex:0 0 216px;background:var(--pane-side);border-right:1px solid var(--pane-line);padding:10px 8px;overflow:auto}
.transfer-surface .tsb{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 9px;border-radius:var(--r-btn);
  font-size:13.5px;color:var(--ink-soft);transition:background 140ms ease,color 140ms ease}
.transfer-surface .tsb .cnt{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.transfer-surface .tsb[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
@media (hover:hover){.transfer-surface .tsb:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .tsdot{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.transfer-surface .tsgroup{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);padding:14px 4px 5px 10px}
.transfer-surface .tsgroup span{flex:1}
.transfer-surface .tsnew{display:flex;flex-direction:column;gap:8px;padding:9px;margin:2px 0 6px;border-radius:var(--r-card);
  background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .tsb.dropping{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 40%,transparent)}
.transfer-surface .tshint{padding:6px 10px;font-size:12px;color:var(--ink-faint);line-height:1.5}
.transfer-surface .tmain{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 12px;overflow:hidden;
  background-image:radial-gradient(760px 240px at 26% -60px, var(--pane-glow), transparent 72%)}
.transfer-surface .quickrow{display:flex;align-items:center;gap:8px;color:var(--ink-faint);padding-bottom:8px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .quickrow input{border:0;background:transparent;padding:8px 0}
.transfer-surface .quickrow input:focus{outline:none}
.transfer-surface .tlist{flex:1;overflow:auto;padding-top:6px}

/* ---------- разбор дня ---------- */
.transfer-surface .digest{display:flex;flex-direction:column;height:100%;min-height:0}
.transfer-surface .dsum{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:var(--r-panel);
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,transparent), color-mix(in srgb,var(--t-violet) 10%,transparent));
  border:1px solid var(--hairline)}
.transfer-surface .dsum p{margin:0;font-size:13.5px;line-height:1.55}
.transfer-surface .dsum .spark{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-ico);display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);animation:sparkin 500ms var(--ease-out)}
@keyframes sparkin{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.transfer-surface .dlist{flex:1;min-height:0;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:7px}
.transfer-surface .ditem{display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:var(--r-card);background:var(--glass-input);
  border:1px solid var(--hairline-soft);opacity:0;transform:translateY(6px);
  animation:ditem 320ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes ditem{to{opacity:1;transform:none}}
.transfer-surface .ditem .ico{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-ico);display:grid;place-items:center;
  background:var(--glass-strong);color:var(--ink-soft)}
.transfer-surface .ditem.crit{background:var(--crit-soft);border-color:transparent}
.transfer-surface .ditem.crit .ico{color:var(--crit)}
.transfer-surface .ditem.warn{background:var(--warn-soft);border-color:transparent}
.transfer-surface .ditem.warn .ico{color:var(--warn)}
.transfer-surface .ditem.ok .ico{color:var(--ok)}
.transfer-surface .ditem ..transfer-surface{flex:1;min-width:0}
.transfer-surface .ditem .t{font-size:13.5px;font-weight:600;line-height:1.3}
.transfer-surface .ditem .x{font-size:12.5px;color:var(--ink-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .dfoot{display:flex;align-items:center;gap:10px;padding-top:9px;font-size:11px;color:var(--ink-faint)}
.transfer-surface .dfoot span{flex:1}

/* ---------- карточка пункта разбора ---------- */
.transfer-surface .ditem[role="button"]{cursor:pointer}
@media (hover:hover){.transfer-surface .ditem[role="button"]:hover{filter:brightness(1.03);transform:translateX(2px)}}
.transfer-surface .ditem{transition:transform 160ms var(--ease-out),filter 160ms ease}
.transfer-surface .dgcard .dh{align-items:flex-start;gap:12px}
.transfer-surface .dgcard h3{font-size:20px;line-height:1.25}
.transfer-surface .dgsub{font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.45}
.transfer-surface .dgico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--glass-input);color:var(--ink-soft);margin-top:2px}
.transfer-surface .dgico.crit{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .dgico.warn{background:var(--warn-soft);color:var(--warn)}
.transfer-surface .dgico.ok{background:var(--ok-soft);color:var(--ok)}
.transfer-surface .dgstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;
  padding:13px 15px;border-radius:var(--r-panel);background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .dgstat{display:flex;flex-direction:column;gap:3px}
.transfer-surface .dgstat .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .dgstat .v{font-size:15px;font-weight:600}
.transfer-surface .dgrow{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;width:100%;text-align:left;
  padding:9px 11px;border-radius:var(--r-card);background:var(--glass-input);margin-bottom:6px;
  transition:background 140ms ease,transform 140ms var(--ease-out)}
@media (hover:hover){.transfer-surface .dgrow:hover{background:var(--glass-strong)}}
.transfer-surface .dgrow:active{transform:scale(.995)}
.transfer-surface .dgrow .subj{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .dgrow .tm{font-size:11px;color:var(--ink-faint)}
.transfer-surface .dgrow .meta{display:flex;gap:5px;align-items:center}
.transfer-surface .dgrow.mail{grid-template-columns:1fr auto auto}
.transfer-surface .dgrow.mail .who{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .dgrow.mail .subj{grid-column:1/3}
.transfer-surface .dgrow.mail .sn{grid-column:1/3;font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- лента дня ---------- */
.transfer-surface .ribbon{flex:0 0 auto;padding:8px 12px 10px;border-radius:var(--r-panel);background:var(--glass);border:1px solid var(--hairline);
  box-shadow:var(--sh-rest);animation:ribbonin 420ms var(--ease-out)}
@keyframes ribbonin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.transfer-surface .rscale{position:relative;height:12px}
.transfer-surface .rtick{position:absolute;top:0;transform:translateX(-50%);font-size:9.5px;color:var(--ink-faint)}
.transfer-surface .rtrack{position:relative;height:30px;border-radius:var(--r-btn);background:var(--glass-input);overflow:hidden}
.transfer-surface .rev{position:absolute;top:4px;bottom:4px;border-radius:var(--r-cell);padding:0 6px;overflow:hidden;text-align:left;
  background:color-mix(in srgb,var(--tgc,var(--accent)) 22%,transparent);
  border-left:2px solid var(--tgc,var(--accent));transition:filter 140ms ease}
.transfer-surface .rev span{font-size:10.5px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media (hover:hover){.transfer-surface .rev:hover{filter:brightness(1.12)}}
.transfer-surface .rtask{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:99px;background:var(--warn)}
.transfer-surface .rnow{position:absolute;top:0;bottom:0;width:2px;background:var(--crit);z-index:3}
.transfer-surface .rnow i{position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:99px;background:var(--crit);
  animation:nowpulse 2.4s ease-in-out infinite}
@keyframes nowpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 50%,transparent)}
  50%{box-shadow:0 0 0 7px transparent}}

/* появление карточек дашборда */
/* карточки проявляются как материал: расфокус плюс прозрачность, transform не трогаем */
.transfer-surface .gcard{animation:cardin 380ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes cardin{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.transfer-surface .gcard{animation:none}}

/* помощник в настройках */
.transfer-surface .aibox{display:flex;flex-direction:column;gap:10px}
.transfer-surface .airow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.transfer-surface .aisign{white-space:pre-wrap;font-size:12.5px;color:var(--ink-soft);padding:10px 12px;border-radius:var(--r-card);
  background:var(--glass-input)}

/* ---------- вложенность задач: глубина читается цветом ---------- */
.transfer-surface .trow[data-depth]{position:relative}
.transfer-surface .trow[data-depth="1"]{background:color-mix(in srgb, var(--t-blue) 5%, transparent)}
.transfer-surface .trow[data-depth="2"]{background:color-mix(in srgb, var(--t-teal) 5%, transparent)}
.transfer-surface .trow[data-depth="3"]{background:color-mix(in srgb, var(--t-violet) 5%, transparent)}
.transfer-surface .trow[data-depth]::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:99px}
.transfer-surface .trow[data-depth="1"]::before{background:color-mix(in srgb, var(--t-blue) 45%, transparent)}
.transfer-surface .trow[data-depth="2"]::before{background:color-mix(in srgb, var(--t-teal) 45%, transparent)}
.transfer-surface .trow[data-depth="3"]::before{background:color-mix(in srgb, var(--t-violet) 45%, transparent)}

/* ---------- таблица задач ---------- */
.transfer-surface .ttable{display:flex;flex-direction:column;min-height:0;height:100%}
.transfer-surface .tthead{display:grid;gap:10px;padding:0 10px 8px;position:sticky;top:0;z-index:2;
  background:linear-gradient(to bottom, var(--glass-strong) 70%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.transfer-surface .tthead .c{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .ttbody{flex:1;min-height:0;overflow:auto}
.transfer-surface .ttrow{display:grid;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--r-card);cursor:pointer;position:relative;
  border-bottom:1px solid var(--hairline-soft);transition:background 140ms ease}
@media (hover:hover){.transfer-surface .ttrow:hover{background:var(--glass-input)}}
.transfer-surface .ttrow[data-depth="1"]{background:color-mix(in srgb, var(--t-blue) 5%, transparent)}
.transfer-surface .ttrow[data-depth="2"]{background:color-mix(in srgb, var(--t-teal) 5%, transparent)}
.transfer-surface .ttrow[data-depth="3"]{background:color-mix(in srgb, var(--t-violet) 5%, transparent)}
.transfer-surface .ttrow[data-depth]:not([data-depth="0"])::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:99px;
  background:color-mix(in srgb, var(--accent) 40%, transparent)}
.transfer-surface .ttrow .c{min-width:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13px}
.transfer-surface .ttrow .c.title{gap:7px;flex-wrap:nowrap}
.transfer-surface .ttrow .c.title .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.transfer-surface .ttrow .c.note{color:var(--ink-faint);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.transfer-surface .ttrow.done .c.title .t{text-decoration:line-through;color:var(--ink-faint)}
.transfer-surface .ttrow .dim{color:var(--ink-faint)}
.transfer-surface .ttrow .rowadd{opacity:0}
.transfer-surface .ttrow:hover .rowadd{opacity:1}

/* ---------- карточка задачи ---------- */
.transfer-surface .dlg.wide{width:min(720px,100%)}
.transfer-surface .dlg.taskcard .dh{align-items:flex-start;gap:12px}
.transfer-surface .dlg.taskcard h3{font-size:22px;line-height:1.25;letter-spacing:-.015em}
.transfer-surface .dlg.taskcard h3.struck{text-decoration:line-through;color:var(--ink-faint)}
.transfer-surface .check.big{width:24px;height:24px;border-radius:var(--r-chk);margin-top:2px}
.transfer-surface .tcfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 18px;
  padding:14px 16px;border-radius:var(--r-panel);background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .tcfact{display:flex;flex-direction:column;gap:4px;min-width:0}
.transfer-surface .tcfact .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .tcfact .v{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.transfer-surface .tcfact .v.crit{color:var(--crit)}
.transfer-surface .tcfact .dim,.transfer-surface .taskcard .dim{color:var(--ink-faint)}
.transfer-surface .tcsec{margin-top:18px}
.transfer-surface .tchead{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.transfer-surface .tchead .prog{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:0;text-transform:none;
  color:var(--ink-soft)}
.transfer-surface .tchead .prog i{display:block;height:4px;border-radius:99px;background:var(--accent);min-width:6px;max-width:120px}
.transfer-surface .tcsub{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-card);cursor:pointer;
  background:color-mix(in srgb, var(--t-blue) 5%, transparent);margin-bottom:5px;
  box-shadow:inset 2px 0 0 color-mix(in srgb, var(--t-blue) 45%, transparent);
  transition:background 140ms ease,transform 140ms var(--ease-out)}
@media (hover:hover){.transfer-surface .tcsub:hover{background:color-mix(in srgb, var(--t-blue) 11%, transparent)}}
.transfer-surface .tcsub:active{transform:scale(.995)}
.transfer-surface .tcsub .t{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tcsub .meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.transfer-surface .tcsub.done .t{text-decoration:line-through;color:var(--ink-faint)}

/* ---------- карточка встречи ---------- */
.transfer-surface .evcard{display:flex;flex-direction:column;gap:14px}
.transfer-surface .evwhen{padding:14px 15px;border-radius:var(--r-panel);background:var(--accent-soft)}
.transfer-surface .evday{font-size:13px;color:var(--accent);font-weight:500}
.transfer-surface .evtime{display:flex;align-items:baseline;gap:10px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.transfer-surface .evdur{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.transfer-surface .evfacts{display:flex;flex-direction:column;gap:9px}
.transfer-surface .evfact{display:flex;gap:10px;align-items:flex-start}
.transfer-surface .evfact .k{flex:0 0 108px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:3px}
.transfer-surface .evfact .v{flex:1;min-width:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.transfer-surface .evfact .dim{color:var(--ink-faint)}
.transfer-surface .evdesc{font-size:13.5px;line-height:1.6;white-space:pre-wrap;padding:11px 12px;border-radius:var(--r-card);
  background:var(--glass-input)}

/* строка задачи: комментарий и кнопка подзадачи */
.transfer-surface .note1{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .note1 .more{color:var(--accent)}
.transfer-surface .rowadd{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-ico);display:grid;place-items:center;color:var(--ink-faint);
  opacity:0;transition:opacity 140ms ease,background 140ms ease,color 140ms ease}
.transfer-surface .trow:hover .rowadd,.transfer-surface .rowadd:focus-visible{opacity:1}
@media (hover:hover){.transfer-surface .rowadd:hover{background:var(--accent-soft);color:var(--accent)}}
@media (hover:none){.transfer-surface .rowadd{opacity:.6}}
.transfer-surface .subadd{display:flex;gap:8px;align-items:center;padding:4px 10px 10px;flex-wrap:wrap}
.transfer-surface .subadd .withmic{flex:1;min-width:180px}

/* мини-письмо в карточках */
.transfer-surface .mailmini{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:7px 9px;border-radius:var(--r-card);
  transition:background 140ms ease}
.transfer-surface .mailmini .top{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.transfer-surface .mailmini .top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.transfer-surface .mailmini .top .mono{font-size:10.5px;color:var(--ink-faint)}
.transfer-surface .mailmini .sub{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .mailmini .sn{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.transfer-surface .mailmini:hover{background:var(--glass-input)}}

/* ---------- почта ---------- */
.transfer-surface .mailsplit{display:flex;height:100%;min-height:0;position:relative}
/*
 * Граница между столбцами почты: узкая полоса, которую тянут мышью. Ширина
 * столбцов живёт в браузере (`desk.mail.cols`), двойное нажатие возвращает
 * обычную. Так просил Val: столбцы должны становиться шире и уже.
 */
.transfer-surface .colgrip{flex:0 0 5px;margin:0 -2px;z-index:3;cursor:col-resize;background:transparent;
  transition:background 120ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .colgrip:hover{background:var(--accent-soft)}}
.transfer-surface.colsizing{cursor:col-resize;user-select:none}
.transfer-surface.colsizing .colgrip{background:var(--accent-soft)}
.transfer-surface .mlist{flex:0 0 340px;display:flex;flex-direction:column;min-height:0;
  background:var(--pane-list);border-right:1px solid var(--pane-line)}
.transfer-surface .mtools{padding:10px 10px 8px;border-bottom:1px solid var(--hairline-soft);display:flex;flex-direction:column;gap:2px}
.transfer-surface .mrows{flex:1;overflow:auto;padding:6px}
.transfer-surface .mailrow{display:grid;grid-template-columns:8px 30px 1fr auto;gap:2px 9px;width:100%;text-align:left;padding:9px 10px;
  border-radius:var(--r-card);transition:background 140ms ease;min-width:0}
/* напоминание, чей срок настал: строка помечена, как в образце */
.transfer-surface .mailrow.due{background:var(--warn-soft)}
.transfer-surface .mailrow .mrsub.crit{color:var(--crit)}
.transfer-surface .fbtn .cnt.crit{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .mailrow .dot{grid-row:1/4;width:7px;height:7px;border-radius:99px;background:transparent;margin-top:11px}
.transfer-surface .mailrow.unread .dot{background:var(--accent)}
.transfer-surface .mailrow .who{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .mailrow.unread .who{font-weight:700}
.transfer-surface .mailrow .when{font-size:11px;color:var(--ink-faint)}
.transfer-surface .mailrow .subj{grid-column:3/4;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .mailrow .snip{grid-column:3/5;font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* сколько писем в цепочке: пилюля в конце строки темы, как в образце */
.transfer-surface .mailrow>.cnt{grid-column:4/5;grid-row:2;justify-self:end;align-self:center;
  padding:1px 8px;border-radius:999px;background:var(--glass-strong);color:var(--ink-soft)}
.transfer-surface .mailrow .acc,.transfer-surface .mailrow .cnt{font-size:10.5px;color:var(--ink-faint)}
.transfer-surface .mailrow .acc{grid-column:3/5}
/* кружок собеседника и заголовки-разделители: вид из референсов Val */
.transfer-surface .mailrow .mav{grid-row:1/4;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font:600 11px/1 var(--sans);margin-top:2px}
.transfer-surface .mailgrp{padding:12px 12px 5px;font:400 12px/1 var(--sans);color:var(--ink-faint);letter-spacing:.01em}
.transfer-surface .mrows > .mailgrp:first-child{padding-top:6px}
.transfer-surface .mailrow .out{color:var(--accent);font-weight:700}
/* метки строки: молния у важного письма, булавка у закреплённого. Звезды тут нет */
.transfer-surface .mailrow .mmark{display:inline-flex;align-items:center;margin-left:5px;color:var(--ink-faint);vertical-align:-1px}
.transfer-surface .mailrow .mmark.bolt{color:var(--warn)}
.transfer-surface .mailrow .lrow{grid-column:2/4;display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:2px}
/* чип вида письма: та же пилюля, но контуром, чтобы не путать с ярлыком ящика */
.transfer-surface .ltag.ctag{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tgc,var(--accent)) 45%,transparent)}
.transfer-surface .ltag{font-size:9.5px;font-weight:600;letter-spacing:.02em;padding:1px 6px;border-radius:var(--r-pill);font-style:normal;
  color:var(--tgc,var(--accent));background:color-mix(in srgb,var(--tgc,var(--accent)) 15%,transparent)}
@media (hover:hover){.transfer-surface .mailrow:hover{background:var(--glass-input)}}
.transfer-surface .mailrow.sel{background:var(--accent-soft)}
/* у содержимого сверху мягкий свет: с ним экран перестаёт выглядеть плоским */
.transfer-surface .mread{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--pane-content);
  background-image:radial-gradient(760px 240px at 26% -60px, var(--pane-glow), transparent 72%)}
.transfer-surface .mhead2{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hairline-soft);flex-wrap:wrap}
.transfer-surface .msubj{font-family:var(--serif);font-size:18px;line-height:1.3}
.transfer-surface .mmeta{font-size:12px;color:var(--ink-faint);margin-top:3px}
.transfer-surface .mbody2{flex:1;overflow:auto;padding:12px 14px}
/*
 * Правая часть это одно окно, как в образце Val: тема, письма и ответ идут
 * одной прокруткой внутри .mbody2. Панель кнопок остаётся сверху и не уезжает.
 */
/* тема над письмом это одна строка обычного кегля, как в образце Val */
.transfer-surface .mbody2 .msubj{font:600 15.5px/1.35 var(--sans);color:var(--ink-soft);margin:2px 2px 12px}
.transfer-surface .msg{padding:14px 16px;border-radius:var(--r-panel);background:var(--glass-strong);margin-bottom:10px;
  border:1px solid var(--hairline-soft);box-shadow:var(--sh-rest)}
.transfer-surface .msg.last{background:var(--glass-strong)}
/*
 * Шапка письма в цепочке по снимку Val: кружок слева, справа время, три строки —
 * от кого, тема с пометкой «Ответ», кому. Адреса спрятаны и раскрываются
 * нажатием на имя: в списке их место занимают человеческие имена.
 */
.transfer-surface .mfrom{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft);margin-bottom:12px}
.transfer-surface .mfrom .mav{margin-top:1px}
.transfer-surface .mwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.transfer-surface .mline{display:flex;align-items:center;gap:6px;min-width:0}
.transfer-surface .mname{padding:0;border:0;background:none;cursor:pointer;color:var(--ink);font:600 13.5px/1.35 var(--sans);
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}
.transfer-surface .mname.soft{color:var(--ink-soft);font-weight:400;font-size:12.5px}
@media (hover:hover) and (pointer:fine){.transfer-surface .mname:hover{color:var(--accent)}}
.transfer-surface .mlabel{color:var(--ink-faint);font-size:12.5px;flex:0 0 auto}
.transfer-surface .msubline{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- шапка письма по снимкам Val: «кто на кому», адреса раскрываются ---- */
.transfer-surface .mto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-faint);font-size:13px}
.transfer-surface .maddrlink{padding:0;border:0;background:none;cursor:pointer;color:var(--accent);
  font:400 13px/1.35 var(--sans);display:inline-flex;align-items:center;gap:3px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.transfer-surface .maddrlink:hover{text-decoration:underline}}
/* кружок отправителя это кнопка: она сворачивает письмо */
.transfer-surface .mav.mavfold{border:0;cursor:pointer;padding:0}
/* свёрнутое письмо: одна строка на всю ширину карточки */
.transfer-surface .msg.shut{padding:0}
.transfer-surface .mshut{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;cursor:pointer;
  background:transparent;color:var(--ink);text-align:left;border-radius:var(--r-panel)}
.transfer-surface .mshut b{font-size:13.5px;font-weight:600;flex:0 0 auto;max-width:40%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .mshut .snip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-faint);font-size:13px}
.transfer-surface .mshut .mwhen{flex:0 0 auto;font-size:11.5px;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.transfer-surface .mshut:hover{background:var(--glass-input)}}
/* пересылаемое сообщение внутри письма: своя рамка и оранжевая пометка */
.transfer-surface .mfwd{margin:14px 0 4px;border:1px solid var(--hairline);border-radius:var(--r-panel);overflow:hidden}
.transfer-surface .mfwdhead{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--glass-input)}
.transfer-surface .mfwdhead b{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .fwdtag{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--warn);color:#1b1206;
  font:700 9.5px/1.5 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.transfer-surface .mfwd .mtext{margin:0;padding:12px}
/* подписи ящика в настройках: список карточек с именем и текстом */
.transfer-surface .signlist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.transfer-surface .signrow{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r-panel);
  background:var(--glass-input);border:1px solid var(--hairline-soft)}

/* ---- окно действий: команды письма и поиск по отправителю ---- */
.transfer-surface .palwrap.actpal{position:fixed;inset:0;z-index:96;display:flex;align-items:flex-start;justify-content:center;
  padding:14vh 16px 16px;background:rgba(12,14,20,.34)}
.transfer-surface .actbox{width:min(560px,100%);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-scard);background:var(--act-bg);border:1px solid var(--act-edge);box-shadow:var(--sh-sheet);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
.transfer-surface .acthead{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px 6px;
  color:var(--act-ink);font:600 13.5px/1 var(--sans)}
.transfer-surface .actfld{margin:0 16px 10px;padding:8px 2px;border:0;border-bottom:1px solid var(--act-edge);
  background:transparent;color:var(--act-ink);font:400 16px/1.3 var(--sans);outline:none}
.transfer-surface .actfld::placeholder{color:var(--act-dim)}
.transfer-surface .actlist{flex:1;min-height:0;overflow:auto;padding:6px}
.transfer-surface .actrow{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;cursor:pointer;
  background:transparent;color:var(--act-ink);font:400 15px/1.25 var(--sans);text-align:left;border-radius:var(--r-card)}
.transfer-surface .actrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .actrow svg{flex:0 0 auto;opacity:.9}
.transfer-surface .actrow.sel{background:var(--act-sel)}
.transfer-surface .actkey{flex:0 0 auto;padding:2px 7px;border-radius:6px;background:var(--act-key);
  font:600 11.5px/1.4 var(--mono);font-style:normal;color:var(--act-ink)}
.transfer-surface .actempty{padding:16px;color:var(--act-dim);font-size:14px}

/* адреса письма списком, как в образце: подпись серая, имена и почта синим */
.transfer-surface .maddr{margin-top:3px;padding:0;background:none;font-size:13px;color:var(--ink-faint);
  display:flex;flex-direction:column;gap:3px}
.transfer-surface .maddr>div{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-width:0}
.transfer-surface .maddr b{color:var(--accent);font-weight:600}
.transfer-surface .maddr i{font-style:normal;color:var(--accent);opacity:.85;word-break:break-all}
.transfer-surface .maddr .mlabel{color:var(--ink-faint);font-size:12.5px}
/* скрепка у темы: список вложений раскрывается прямо тут, файлы открываются нажатием */
.transfer-surface .mclip{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-faint);border:0;background:transparent;cursor:pointer;transition:background 130ms ease,color 130ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .mclip:hover{background:var(--glass-input);color:var(--accent)}}
.transfer-surface .mclip[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
.transfer-surface .menu.attmenu{max-width:340px}
.transfer-surface .menu.attmenu .mitem{display:flex;align-items:center;gap:8px}
.transfer-surface .menu.attmenu .msize{font-style:normal;color:var(--ink-faint);font-size:11px;margin-left:auto;padding-left:8px}
/*
 * Меню «Отложить» по снимку Val: строка со значком и названием, справа время.
 * Разделители отделяют «Выбрать дату» и тумблер «Напомнить».
 */
.transfer-surface .menu.snoozemenu{min-width:304px}
.transfer-surface .menu.snoozemenu .mitem{display:flex;align-items:center;gap:9px}
.transfer-surface .menu.snoozemenu .mitem>span{flex:1;min-width:0;white-space:nowrap}
.transfer-surface .mwhenr{font-style:normal;color:var(--ink-faint);font-size:12px;display:inline-flex;align-items:center;flex:0 0 auto;padding-left:12px}
.transfer-surface .msep{height:1px;background:var(--hairline-soft);margin:5px 4px}
/* тот же тумблер, что в шапке списка, только меньше */
.transfer-surface .mswitch.small{width:32px;height:19px;display:inline-block}
.transfer-surface .mswitch.small i{width:15px;height:15px}
.transfer-surface .mswitch.small.on i{transform:translateX(13px)}
.transfer-surface .mfrom b{color:var(--ink);font-weight:600}
.transfer-surface .mfrom .mono{font-size:11px;color:var(--ink-faint)}
/* кружок с буквами отправителя, как в списке писем */
.transfer-surface .mav{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  font:600 10.5px/1 var(--sans);color:#fff;font-style:normal}
.transfer-surface .mto{color:var(--accent)}
.transfer-surface .mwhen{white-space:nowrap}
.transfer-surface .mtext{margin:0;font:inherit;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
/* строка вложений: сколько их и «сохранить все», как в образце */
.transfer-surface .mattline{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hairline-soft);font-size:12.5px;color:var(--ink-faint)}
.transfer-surface .mlinkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);font:inherit}
.transfer-surface .mlink{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
/* ответ живёт в том же окне карточкой, а не отдельной панелью снизу */
.transfer-surface .mcompose{border:1px solid var(--hairline-soft);border-radius:var(--r-panel);background:var(--glass-strong);
  box-shadow:var(--sh-rest);padding:12px 14px 14px;margin:2px 0 10px;display:flex;flex-direction:column;gap:8px}
.transfer-surface .mcto{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
.transfer-surface .mcto b{color:var(--ink)}
/* значок помощника подписан словами, как в образце */
.transfer-surface .aibtn .ailabel{font:600 12.5px/1 var(--sans);color:var(--accent);letter-spacing:.2px}

/*
 * Подсказки кнопок письма одного вида: карточка в цвет темы (светлая на светлой,
 * тёмная на тёмной), заголовок, синяя строка действия, пояснение. Раньше у одних
 * кнопок была тёмная плашка, у других светлая карточка, и панель выглядела
 * вразнобой. Клавиш в подсказках нет: Val просил их убрать.
 */
.transfer-surface .tip{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  z-index:80;display:none;width:max-content;max-width:280px;
  padding:7px 11px;border-radius:var(--r-fld);pointer-events:none;text-align:left;
  background:var(--card-solid);color:var(--ink);border:1px solid var(--hairline);
  font:500 12.5px/1.35 var(--sans);box-shadow:var(--sh-pop)
}
/* у крайних кнопок подсказка прижимается к своему краю, иначе уезжает за поле */
.transfer-surface .tip.tip-left{left:0;right:auto;transform:translateY(-4px)}
.transfer-surface .tip.tip-right{left:auto;right:0;transform:translateY(-4px)}
@media (hover:hover) and (pointer:fine){
  .transfer-surface .mbar button:hover>.tip,.transfer-surface .mbar a:hover>.tip,.transfer-surface .mfoot button:hover>.tip,.transfer-surface .mhead button:hover>.tip,.transfer-surface .mquick button:hover>.tip,.transfer-surface .catbtn:hover>.tip{display:block}
}
.transfer-surface .mhead button,.transfer-surface .mquick button{position:relative}
/* строка с кнопками группы: место под них держит отступ .catrow справа */
/* панель выше письма по слою, иначе подсказка уходит под текст */
.transfer-surface .mbar{position:relative;z-index:6}
.transfer-surface .mfoot{position:relative;z-index:2}
.transfer-surface .mbar button,.transfer-surface .mbar a,.transfer-surface .mfoot button{position:relative}

/* ---------- фокус ---------- */
.transfer-surface .focus{display:flex;flex-direction:column;gap:14px}
.transfer-surface .fblock{display:flex;flex-direction:column;gap:3px}
.transfer-surface .flabel{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px}
.transfer-surface .flabel .mono{font-size:10.5px;letter-spacing:0}
.transfer-surface .fempty{font-size:12.5px;color:var(--ink-faint);padding:2px 2px 4px}
.transfer-surface .frow2{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 7px;border-radius:var(--r-btn);
  transition:background 140ms ease}
.transfer-surface .frow2 .bar{flex:0 0 3px;align-self:stretch;min-height:15px;border-radius:99px;background:var(--tgc,var(--accent))}
.transfer-surface .frow2 .tm{flex:0 0 auto;min-width:44px;font-size:11px;color:var(--ink-faint)}
.transfer-surface .frow2 .t{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.transfer-surface .frow2:hover{background:var(--glass-input)}}
/* список смарт-ящиков в настройках: строка с галочкой, названием и пояснением */
.transfer-surface .smartlist{display:flex;flex-direction:column;gap:2px}
.transfer-surface .smartlist .frow2{align-items:flex-start;padding:8px 8px}
.transfer-surface .smartlist .frow2 svg{margin-top:2px;color:var(--ink-faint)}
.transfer-surface .smartlist .frow2[aria-pressed="true"] svg{color:var(--accent)}
.transfer-surface .smartlist .frow2:disabled{opacity:.5}

/* ---------- голос ---------- */
.transfer-surface .dlg.voice{height:min(76vh,600px)}
.transfer-surface .micline{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-panel);background:var(--glass-input);
  border:1px solid var(--hairline)}
.transfer-surface .micline.on{border-color:var(--crit)}
.transfer-surface .mic{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;background:var(--accent);
  color:var(--accent-ink);flex:0 0 auto;transition:transform 160ms var(--ease-out),background 160ms ease}
.transfer-surface .mic:active{transform:scale(.93)}
.transfer-surface .mic.on{background:var(--crit);color:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 45%,transparent)}
  50%{box-shadow:0 0 0 10px transparent}}
.transfer-surface .waves{display:flex;align-items:center;gap:3px;height:26px;flex:1;min-width:0}
.transfer-surface .waves i{flex:1;max-width:5px;height:6px;border-radius:99px;background:var(--ink-faint);opacity:.5}
.transfer-surface .micline.on .waves i{animation:wv 1s ease-in-out infinite;background:var(--crit);opacity:.8}
@keyframes wv{0%,100%{height:6px}50%{height:22px}}
.transfer-surface .hintline{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.transfer-surface .vcard{margin-top:14px;padding:14px;border-radius:var(--r-panel);background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .vhead{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.transfer-surface .vtitle{font-family:var(--serif);font-size:19px;line-height:1.3}
.transfer-surface .vmeta{margin-top:5px;font-size:12.5px;color:var(--ink-faint)}
.transfer-surface .printhead{display:none}

/* ---------- печать ---------- */
/* примерка печати: те же геометрические правила, чтобы честно измерить высоту */
.transfer-surface .printing{position:static !important;display:block !important;padding:0 !important;overflow:visible !important}
.transfer-surface .printing .dashbar,.transfer-surface .printing .grip,.transfer-surface .printing .phead{display:none !important}
.transfer-surface .printing .gcanvas{overflow:visible !important;height:auto !important;margin:0 !important;padding:0 !important}
.transfer-surface .printing .gsheet{height:auto !important;display:block !important}
.transfer-surface .printing .panel.gcard{position:static !important;transform:none !important;width:auto !important;height:auto !important}
.transfer-surface .printing .pbody{overflow:visible !important;padding:0 !important;height:auto !important}
.transfer-surface .printing .printhead{display:block;font-size:16pt;font-weight:600;margin:0 0 8pt}
.transfer-surface .printing .tlwrap{flex:0 0 auto !important;height:var(--print-h,auto) !important;overflow:hidden !important;padding-bottom:0}
.transfer-surface .printing .tgut,.transfer-surface .printing .tcols{transform:translateY(calc(-1 * var(--print-top, 0px)))}
.transfer-surface .printing .mgrid,.transfer-surface .printing .mbody{height:auto !important;overflow:visible !important}
.transfer-surface .printing .mrow{min-height:88px}
.transfer-surface .printing .ygrid{grid-template-columns:repeat(4,1fr)}
.transfer-surface .printing .yd,.transfer-surface .printing .ymonth.wide .yd{aspect-ratio:auto;height:15px;font-size:9.5px;border-radius:4px}
.transfer-surface .printing .yh{font-size:8px;padding-bottom:2px}
.transfer-surface .printing .ytitle{font-size:11.5px;margin-bottom:4px}

@media print{
  .transfer-surface,.transfer-surface{background:#fff !important;height:auto;overflow:visible}
  .transfer-surface .view.on{transform:scale(var(--print-scale,1));transform-origin:top left;
    width:calc(100% / var(--print-scale,1));display:block !important}
  .transfer-surface .gcanvas{overflow:visible !important;height:auto;margin:0;padding:0}
  .transfer-surface .gsheet{height:auto !important;display:block}
  .transfer-surface .panel.gcard{position:static !important;transform:none !important;width:auto !important;height:auto !important;
    box-shadow:none;transition:none}
  .transfer-surface .grip,.transfer-surface .dashbar{display:none !important}
  .transfer-surface .tlwrap{flex:0 0 auto !important;height:var(--print-h,auto) !important;overflow:hidden !important;padding-bottom:0}
  .transfer-surface .tgut,.transfer-surface .tcols{transform:translateY(calc(-1 * var(--print-top, 0px)))}
  .transfer-surface #field,.transfer-surface #bar,.transfer-surface #rail,.transfer-surface #sheet,.transfer-surface #scrim,.transfer-surface #palwrap,.transfer-surface #ritual,.transfer-surface #toasts,.transfer-surface .noprint,.transfer-surface .grip{display:none !important}
  .transfer-surface #app{display:block;height:auto;max-width:none}
  .transfer-surface #main{position:static;overflow:visible}
  .transfer-surface .view{position:static !important;display:none;padding:0;height:auto}
  .transfer-surface .view.on{display:block !important}
  .transfer-surface .panel{background:#fff !important;border:0;box-shadow:none;backdrop-filter:none;color:#000;height:auto;border-radius:0}
  .transfer-surface .phead{display:none}
  .transfer-surface .pbody{overflow:visible;padding:0;height:auto}
  .transfer-surface .printhead{display:block;font-size:16pt;font-weight:600;margin:0 0 8pt;color:#000}
  .transfer-surface .mgrid,.transfer-surface .mbody{height:auto;overflow:visible}
  .transfer-surface .mrow{min-height:88px;break-inside:avoid}
  .transfer-surface .mcell,.transfer-surface .mhead .mh,.transfer-surface .wk{color:#000}
  .transfer-surface .mcell.other{background:#f4f4f5}
  .transfer-surface .mcell.today{background:#e8eef8}
  .transfer-surface .mev{background:#eef2f8 !important;color:#000}
  .transfer-surface .ygrid{grid-template-columns:repeat(4,1fr)}
  .transfer-surface .yd,.transfer-surface .ymonth.wide .yd{aspect-ratio:auto;height:15px;font-size:9.5px;border-radius:4px}
  .transfer-surface .yh{font-size:8px;padding-bottom:2px}
  .transfer-surface .ytitle{font-size:11.5px;margin-bottom:4px}
  .transfer-surface .ymonth{background:#fff;border:1px solid #ddd;break-inside:avoid}
  .transfer-surface .yd,.transfer-surface .yh,.transfer-surface .ytitle{color:#000}
  .transfer-surface .evb{background:#e8eef8 !important;color:#000;border-left-color:#3b6ea5 !important;print-color-adjust:exact}
  .transfer-surface *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (max-width:880px){
  .transfer-surface #app{grid-template-rows:50px 1fr 56px;grid-template-columns:1fr}
  .transfer-surface #rail{flex-direction:row;justify-content:space-around;padding:4px 8px;border-right:0;border-top:1px solid var(--hairline);grid-row:3;grid-column:1}
  .transfer-surface #rail .gap{display:none}
  .transfer-surface #main{grid-row:2;grid-column:1}
  .transfer-surface #bar{grid-column:1}
  .transfer-surface .date,.transfer-surface .load,.transfer-surface .flag{display:none}
  .transfer-surface #bar{overflow:hidden;gap:8px;padding:0 10px}
  .transfer-surface #bar .tool kbd{display:none}
  .transfer-surface #main,.transfer-surface .view,.transfer-surface .panel{min-width:0}
  .transfer-surface .view{padding:10px}
  .transfer-surface .view.on.float{display:flex;flex-direction:column;overflow:auto;padding:10px;gap:12px}
  .transfer-surface .panel.floaty{position:static !important;transform:none !important;width:auto !important;height:74vh !important;min-height:320px;max-height:640px;flex:0 0 auto}
  .transfer-surface .panel.floaty>.phead{cursor:default}
  .transfer-surface .grip{display:none}
  .transfer-surface #sheet{width:calc(100vw - 16px);max-height:88vh}
  .transfer-surface .kwrap{flex-direction:column}
  .transfer-surface .mailsplit{flex-direction:column}
  .transfer-surface .mlist{flex:0 0 auto;max-height:44vh;border-right:0;border-bottom:1px solid var(--hairline-soft)}
  .transfer-surface .tasksplit{flex-direction:column}
  .transfer-surface .ttable{overflow-x:auto}
  .transfer-surface .tthead,.transfer-surface .ttrow{min-width:820px}
  .transfer-surface .tside{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--hairline-soft);display:flex;gap:6px;overflow-x:auto;padding:8px}
  .transfer-surface .tsb{width:auto;white-space:nowrap}
  .transfer-surface .tsgroup{display:none}
  .transfer-surface .mrow{min-height:74px}
  .transfer-surface .mev .tm{display:none}
  .transfer-surface .view.float.on{overflow:auto;padding:10px}
  .transfer-surface .gcanvas{overflow:visible;margin:0;padding:0}
  .transfer-surface .gsheet{display:flex;flex-direction:column;gap:12px;height:auto !important}
  .transfer-surface .panel.gcard{position:static;transform:none !important;width:auto !important;height:72vh !important;
    min-height:320px;max-height:620px;flex:0 0 auto;transition:none}
  .transfer-surface .panel.gcard>.phead{cursor:default}
  /* строка чисел на телефоне занимает столько, сколько нужно, и переносится */
  .transfer-surface .dashbar{flex-wrap:wrap;row-gap:6px}
  .transfer-surface .panel.gcard.kpicard{height:auto !important;min-height:0;max-height:none}
  .transfer-surface .kpis{flex-wrap:wrap;gap:8px;padding:10px}
  .transfer-surface .kpis .kpi{flex:1 1 42%}
  .transfer-surface .gghost{display:none}
  .transfer-surface .kcol{flex:0 0 auto;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .transfer-surface *{transition-duration:100ms !important;animation:none !important}
  .transfer-surface #sheet{transition:opacity 150ms ease}
  .transfer-surface #sheet.on{transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-transparency:reduce){
  .transfer-surface .panel,.transfer-surface #bar,.transfer-surface #rail,.transfer-surface #sheet,.transfer-surface #pal,.transfer-surface #ritual .card,.transfer-surface .toast{backdrop-filter:none;background:var(--glass-strong)}
}


/* ---- перелистывание дня в разделе задач ---- */
.transfer-surface .daypager{display:inline-flex;align-items:center;gap:6px}
.transfer-surface .daypager>span:first-child{font-family:var(--serif);font-size:15px}
.transfer-surface .daypager .pbtn{width:26px;height:26px;border-radius:var(--r-ico)}
.transfer-surface .dayval{padding:4px 10px;border-radius:var(--r-btn);font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--glass-input);border:1px solid var(--hairline);white-space:nowrap;
  transition:background 140ms ease,color 140ms ease}
.transfer-surface .dayval:hover{color:var(--ink);background:var(--accent-soft)}

/* ---- выполненные внизу списка ---- */
.transfer-surface .donebox{margin-top:10px;border-top:1px solid var(--hairline-soft);padding-top:6px}
.transfer-surface .donehead{display:flex;align-items:center;gap:7px;width:100%;padding:8px 12px;border-radius:var(--r-btn);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  transition:background 140ms ease,color 140ms ease}
.transfer-surface .donehead:hover{background:var(--accent-soft);color:var(--ink-soft)}
.transfer-surface .donehead svg{transition:transform 200ms var(--ease-out)}
.transfer-surface .donehead[aria-expanded="true"] svg{transform:rotate(90deg)}
.transfer-surface .donehead .cnt{margin-left:auto;font-size:11px}
.transfer-surface .donebox .trow .t{text-decoration:line-through;color:var(--ink-faint)}
.transfer-surface .donebox .ttrow .c:first-child .t{text-decoration:line-through;color:var(--ink-faint)}

/* ---- возврат в раздел, из которого открыли карточку ---- */
.transfer-surface .tool.back{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background:var(--accent-soft)}
.transfer-surface .tool.back:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}

/* =====================================================================
   Главный экран. Фотография во весь экран, часы, приветствие и вход внутрь.
   Сделан по референсам Val (папка References, снимок «Главный экран»).
   Пока фотографии нет, фоном служит нарисованный градиентами сумеречный лес:
   как только в настройках задан снимок, он заменяет собой этот слой целиком.
   ===================================================================== */
.transfer-surface #home{
  position:fixed; inset:0; z-index:60; display:flex; overflow:hidden;
  background-color:#0C120E; background-size:cover; background-position:center;
  background-image:url(/home-default.svg);
  animation:homein .55s var(--ease-out) both;
}
@keyframes homein{ from{opacity:0; transform:scale(1.015)} to{opacity:1; transform:none} }
/* тёмная вуаль: сверху и снизу плотнее, чтобы текст читался на любом снимке */
.transfer-surface #home .hscrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,12,10,.52) 0%, rgba(8,12,10,.16) 26%, rgba(8,12,10,.20) 62%, rgba(8,12,10,.58) 100%),
    radial-gradient(78% 56% at 50% 46%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 72%);
}

/* ---- узкая панель слева: дата сверху, вы снизу ---- */
.transfer-surface #home .hrail{
  position:relative; z-index:2; width:54px; flex:0 0 54px;
  display:flex; flex-direction:column; align-items:center; padding:14px 0 14px;
  background:rgba(10,16,12,.52); backdrop-filter:blur(26px) saturate(140%);
  border-right:1px solid rgba(255,255,255,.10);
}
.transfer-surface #home .hgap{flex:1}
/* название сверху полосы, как в образце */
.transfer-surface #home .hlogo{font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.9);
  margin-bottom:12px}
/* число месяца мелко под значком календаря */
.transfer-surface #home .hcal-d{position:absolute;bottom:2px;right:5px;font:700 8.5px/1 var(--sans);color:rgba(255,255,255,.75)}
/* значки разделов в рельсе: без подписей */
.transfer-surface #home .hnav{position:relative;width:36px;height:36px;margin-top:6px;border-radius:10px;display:grid;place-items:center;
  color:rgba(255,255,255,.82);cursor:pointer;transition:background .15s var(--ease-out),color .15s,transform .1s ease-out}
.transfer-surface #home .hnav:hover{background:rgba(255,255,255,.14);color:#fff}
.transfer-surface #home .hnav:active{transform:scale(.94)}
.transfer-surface #home .hbdg{position:absolute;top:1px;right:1px;min-width:15px;height:15px;border-radius:99px;background:var(--crit);
  color:#fff;font:700 9px/15px var(--sans);text-align:center;padding:0 3px}
.transfer-surface #home .hchip{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.55);
  color:#fff; font:600 13px/1 var(--sans); cursor:pointer;
  transition:background .15s var(--ease-out), transform .1s ease-out;
}
.transfer-surface #home .hchip:hover{background:rgba(255,255,255,.18)}
.transfer-surface #home .hchip:active{transform:scale(.94)}
.transfer-surface #home .hav{
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:#8A3A82; color:#fff; font:600 12px/1 var(--sans);
  display:grid; place-items:center; transition:transform .1s ease-out;
}
.transfer-surface #home .hav:active{transform:scale(.94)}

/* ---- всё остальное: шапка и середина ---- */
.transfer-surface #home .hbody{position:relative; z-index:2; flex:1; min-width:0; display:flex; flex-direction:column}
/*
 * Шапка по образцу Val: слева часы, по центру строка поиска, справа одна
 * кнопка живого разговора. Выбор «что показывать» стоит рядом с ней мелкой
 * строкой, поэтому середина остаётся пустой и спокойной.
 */
.transfer-surface #home .htop{display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;align-items:start;
  gap:14px; padding:18px 26px 0}
.transfer-surface #home .hspacer{flex:1}
.transfer-surface #home .hclock{grid-column:1}
.transfer-surface #home .hsearch{grid-column:2}
.transfer-surface #home .hmenuwrap{grid-column:3;justify-self:end}
.transfer-surface #home .hround.hlive{grid-column:3;justify-self:end}
.transfer-surface #home .hdate{color:rgba(255,255,255,.94); font:400 15px/1.3 var(--sans); letter-spacing:0}
.transfer-surface #home .htime{color:#fff; font:300 44px/1.05 var(--sans); letter-spacing:-.015em; margin-top:2px}
/* поиск в шапке главного экрана */
.transfer-surface #home .hsearch{width:100%;height:38px;margin:6px 0 0;display:flex;align-items:center;gap:9px;padding:0 14px;
  border-radius:999px;background:rgba(20,24,22,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(140%);color:rgba(255,255,255,.72);font:400 13.5px/1 var(--sans);
  cursor:pointer;transition:background .15s var(--ease-out),border-color .15s,color .15s}
.transfer-surface #home .hsearch:hover{background:rgba(40,46,42,.55);border-color:rgba(255,255,255,.28);color:#fff}
.transfer-surface #home .hsearch span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface #home .hsearch kbd{font:500 10.5px/1 var(--mono);background:rgba(255,255,255,.12);border-radius:5px;padding:3px 5px;
  color:rgba(255,255,255,.8)}
.transfer-surface #home .hround.hai{background:linear-gradient(135deg,rgba(255,120,90,.4),rgba(120,150,255,.4));
  border-color:rgba(255,255,255,.42)}
.transfer-surface #home .hround.hai:hover{background:linear-gradient(135deg,rgba(255,120,90,.6),rgba(120,150,255,.6))}
/* кнопка живого разговора: капсула со значком и подписью, как в образце */
.transfer-surface #home .hround.hlive{display:inline-flex;align-items:center;justify-content:center;width:auto;height:38px;
  padding:0 16px 0 13px;border-radius:999px;gap:8px;margin-top:6px;
  font:500 13.5px/1 var(--sans);color:#fff;white-space:nowrap}
.transfer-surface #home .hmenuwrap{position:relative; margin-top:2px; grid-row:2}
.transfer-surface #home .hsel{font-size:13px;color:rgba(255,255,255,.72)}
.transfer-surface #home .hsel{
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.95);
  font:400 15px/1 var(--sans); display:inline-flex; align-items:center; gap:7px; padding:8px 4px;
}
.transfer-surface #home .hsel:hover{color:#fff}
.transfer-surface #home .harrows{font-size:10px; letter-spacing:-.5px; opacity:.8; display:inline-block; transform:translateY(-1px)}
.transfer-surface #home .hmenuscrim{position:fixed; inset:0; z-index:1}
.transfer-surface #home .hmenu{
  position:absolute; right:0; top:38px; z-index:2; width:262px; padding:6px;
  background:rgba(38,40,46,.86); backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:var(--sh-sheet);
  animation:hmenuin .18s var(--ease-out) both; transform-origin:top right;
}
@keyframes hmenuin{ from{opacity:0; transform:scale(.96) translateY(-4px)} to{opacity:1; transform:none} }
.transfer-surface #home .hmenu-t{color:rgba(255,255,255,.55); font:400 12px/1 var(--sans); padding:8px 10px 9px}
.transfer-surface #home .hmenu-i{
  width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px; border:none; cursor:pointer;
  background:none; color:rgba(255,255,255,.94); font:400 14px/1.2 var(--sans); border-radius:7px; text-align:left;
}
.transfer-surface #home .hmenu-i:hover{background:rgba(255,255,255,.10)}
.transfer-surface #home .hmenu-i.on{background:var(--accent); color:#fff}
.transfer-surface #home .hmenu-c{width:14px; flex:0 0 14px; font-size:12px}
.transfer-surface #home .hround{
  width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.34); color:#fff;
  backdrop-filter:blur(14px); transition:background .15s var(--ease-out), transform .1s ease-out;
}
.transfer-surface #home .hround:hover{background:rgba(255,255,255,.24)}
.transfer-surface #home .hround:active{transform:scale(.94)}

/* ---- середина: приветствие, кнопки, сводка, письма ---- */
/*
 * Середина по центру экрана, как и была: приветствие, строка «Ваш день»,
 * капсулы со значками, сводка и список. Val просил вернуть центровку.
 */
.transfer-surface #home .hmid{
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 30px 6vh; text-align:center;
}
.transfer-surface #home .hhello{
  margin:0; color:#fff; font:700 clamp(38px,4.6vw,64px)/1.06 var(--sans);
  letter-spacing:-.03em; text-shadow:0 2px 34px rgba(0,0,0,.45);
}
.transfer-surface #home .hsub{
  margin:6px 0 0; color:rgba(255,255,255,.86); font:400 clamp(16px,1.6vw,22px)/1.3 var(--sans);
  letter-spacing:-.005em; text-shadow:0 1px 22px rgba(0,0,0,.42);
}
.transfer-surface #home .hpills{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; justify-content:center}
.transfer-surface #home .hpill{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px; cursor:pointer; color:#fff;
  font:400 15px/1 var(--sans); background:rgba(48,50,52,.52); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(140%); box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:background .15s var(--ease-out), transform .1s ease-out;
}
.transfer-surface #home .hpill:hover{background:rgba(70,72,74,.62)}
.transfer-surface #home .hpill:active{transform:scale(.97)}
.transfer-surface #home .hpill.acc{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.34); font-weight:500}
.transfer-surface #home .hpill.acc:hover{background:rgba(255,255,255,.32)}
.transfer-surface #home .hsum{
  margin-top:22px; color:rgba(255,255,255,.82); font:400 13.5px/1.4 var(--sans);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.transfer-surface #home .hsum b{color:#fff; font-weight:600}
/* десяток писем видно сразу, остальное прокруткой: так просил Val */
.transfer-surface #home .hlist{width:min(720px,72vw); margin-top:12px; display:flex; flex-direction:column; gap:5px;
  max-height:min(560px,58vh); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin}
.transfer-surface #home .hlist::-webkit-scrollbar{width:6px}
.transfer-surface #home .hlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:99px}
.transfer-surface #home .hrow{flex:0 0 auto}
.transfer-surface #home .hrow{position:relative;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;cursor:pointer;
  background:rgba(26,30,28,.42);border:1px solid rgba(255,255,255,.10);color:#fff;text-align:left;
  backdrop-filter:blur(18px) saturate(140%);transition:background .15s var(--ease-out),transform .1s ease-out,border-color .15s}
.transfer-surface #home .hrow:hover{background:rgba(56,62,58,.62);border-color:rgba(255,255,255,.18)}
.transfer-surface #home .hrow:active{transform:scale(.995)}
.transfer-surface #home .hrow-av{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font:600 10px/1 var(--sans);
}
/* срочное: тонкая красная рамка у строки и красная пометка перед темой */
.transfer-surface #home .hrow.urg{border:1px solid rgba(255,110,90,.75)}
/*
 * Пометка «срочно» набрана как пометка пересылаемого сообщения (`.fwdtag`):
 * тот же шрифт и тот же размер к тексту строки. Крупной и яркой она забивала
 * саму тему письма, а Val просил спокойную подпись.
 */
/*
 * Пометка «срочно» стоит вне потока строки. На узком экране она справа внутри
 * строки, посередине по высоте, и строка держит под неё отступ справа.
 * На большом экране (правило ниже, от 1181px) она уезжает влево за пределы
 * строки, в поле списка: так просил Val.
 */
.transfer-surface #home .hurg{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(214,84,66,.5);color:rgba(255,255,255,.9);font:400 10px/1.5 var(--sans);
  letter-spacing:.05em;text-transform:uppercase}
.transfer-surface #home .hrow.urg{padding-right:80px}
@media (min-width:1181px){
  /* слева от списка оставлено поле под пометку: за краем списка её обрезало бы прокруткой */
  .transfer-surface #home .hlist{width:min(806px,calc(80vw + 86px)); padding-left:86px; margin-right:86px}
  .transfer-surface #home .hurg{right:calc(100% + 12px);left:auto}
  .transfer-surface #home .hrow.urg{padding-right:14px}
}
/*
 * Окошко при наведении: в строку помещается не всё, что написал помощник,
 * поэтому полный разбор показывается подсказкой, как у кнопки.
 */
/*
 * Окошко с полным разбором строки главного экрана. Рисуется порталом в body,
 * а не внутри строки: у строки своё стекло, а элемент с backdrop-filter
 * становится корнем подложки для потомков — вложенное окошко размывало бы
 * только фон своей строки, и текст соседних читался бы сквозь него.
 * Стекло у окошка то же, что у самих строк: так просил Val.
 */
.transfer-surface .htip{position:fixed;z-index:80;display:flex;
  flex-direction:column;gap:4px;padding:11px 13px;border-radius:var(--r-panel);
  background:rgba(26,30,28,.42);border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-pop);
  backdrop-filter:blur(22px) saturate(150%);text-align:left;white-space:normal;pointer-events:none}
.transfer-surface .htip b{font:600 14px/1.35 var(--sans);color:#fff}
.transfer-surface .htip i{font-style:normal;font:400 13px/1.45 var(--sans);color:rgba(255,255,255,.86)}
.transfer-surface .htip u{text-decoration:none;font:400 11.5px/1.3 var(--sans);color:rgba(255,255,255,.6)}
/* задача и заметка в списке главного экрана: тот же строй, свой цвет кружка */
.transfer-surface #home .hrow-av.task{background:rgba(255,255,255,.18); color:#fff}
.transfer-surface #home .hrow-av.task.late{background:rgba(255,110,90,.55)}
.transfer-surface #home .hrow-av.note{background:rgba(160,140,255,.42); color:#fff}
/* подпись группы, когда на экране два списка сразу */
.transfer-surface #home .hgroup{margin:8px 0 2px; font:600 11.5px/1 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.62)}
.transfer-surface #home .hgroup:first-child{margin-top:0}
.transfer-surface #home .hrow-n{flex:0 0 auto; max-width:150px; font:600 13px/1.3 var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.transfer-surface #home .hrow-s{
  flex:1; min-width:0; font:400 13px/1.3 var(--sans); color:rgba(255,255,255,.78);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.transfer-surface #home .hrow-s b{color:#fff; font-weight:600}
/* сводка письма: тема своими словами и суть в две строки, на языке приложения */
.transfer-surface #home .hrow-s.brief{white-space:normal; display:flex; flex-direction:column; gap:1px; line-height:1.3}
.transfer-surface #home .hrow-s.brief .hrow-t{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.transfer-surface #home .hrow-s.brief .hrow-g{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:rgba(255,255,255,.78); font-size:12.5px}
.transfer-surface #home .hrow:has(.brief){border-radius:22px; padding-top:7px; padding-bottom:7px}

/* кнопка возврата на главный экран стоит первой в боковой панели */

@media (max-width:760px){
  .transfer-surface #home .hrail{display:none}
  .transfer-surface #home .htop{padding:16px 16px 0}
  .transfer-surface #home .htime{font-size:34px}
  .transfer-surface #home .hsel{font-size:13px}
  .transfer-surface #home .hround{width:38px; height:38px; flex:0 0 38px}
  .transfer-surface #home .hlist{width:100%}
  .transfer-surface #home .hrow-n{max-width:96px}
  .transfer-surface #home .hrow.urg{padding-right:72px}
  /* на узком экране пометка мельче: иначе она съедает тему письма */
  .transfer-surface #home .hurg{padding:2px 6px;font-size:9px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .transfer-surface #home{animation:none}
  .transfer-surface #home .hmenu{animation:none}
  .transfer-surface #home .hchip:active,.transfer-surface #home .hav:active,.transfer-surface #home .hround:active,.transfer-surface #home .hpill:active,.transfer-surface #home .hrow:active{transform:none}
}
@media print{ .transfer-surface #home{display:none !important} }

/* =====================================================================
   Экран приветствия: его видно, пока не подключён ни один ящик.
   Синий фон и белая карточка по центру, как на референсах Val.
   ===================================================================== */
.transfer-surface #welcome{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px;
  background:linear-gradient(122deg, #56AEF2 0%, #2B7BE4 46%, #2A55D6 100%);
  animation:homein .45s var(--ease-out) both;
}
.transfer-surface #welcome .wcard{
  width:min(560px,100%); min-height:min(430px,86vh); background:#fff; border-radius:var(--r-dlg);
  padding:64px 48px 44px; box-shadow:0 24px 70px rgba(12,26,60,.28); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.transfer-surface #welcome .wtitle{margin:0; color:#16181D; font:700 27px/1.25 var(--sans); letter-spacing:-.02em}
.transfer-surface #welcome .wsub{margin:8px 0 0; color:#41454F; font:400 16px/1.45 var(--sans)}
.transfer-surface #welcome .wbtn{
  display:inline-block; margin-top:26px; min-width:306px; padding:13px 22px; border-radius:var(--r-pill);
  background:#2E6FE8; color:#fff; font:500 15px/1.2 var(--sans); text-decoration:none;
  transition:background .15s var(--ease-out), transform .1s ease-out;
}
.transfer-surface #welcome .wbtn:hover{background:#2560CE}
.transfer-surface #welcome .wbtn:active{transform:scale(.985)}
.transfer-surface #welcome .wnote{
  margin:22px auto 0; max-width:380px; color:#5C606B; font:400 13.5px/1.5 var(--sans);
}
.transfer-surface #welcome .wnote a{color:#2E6FE8; text-decoration:none}
.transfer-surface #welcome .wnote a:hover{text-decoration:underline}
.transfer-surface #welcome .wskip{
  margin-top:20px; background:none; border:none; cursor:pointer; padding:8px;
  color:#5C606B; font:400 13.5px/1 var(--sans); text-decoration:underline;
}
.transfer-surface #welcome .wskip:hover{color:#16181D}
@media (max-width:600px){
  .transfer-surface #welcome .wcard{padding:36px 22px 28px}
  .transfer-surface #welcome .wtitle{font-size:22px}
  .transfer-surface #welcome .wbtn{min-width:0; width:100%}
}
@media (prefers-reduced-motion:reduce){ .transfer-surface #welcome{animation:none} }
@media print{ .transfer-surface #welcome{display:none !important} }

/* узкий экран: панель сжимается до иконок */
/* Узкий рабочий стол: панель сжимается до значков. Ниже 881px работает
   мобильная раскладка выше, поэтому нижнюю границу задаём явно: без неё
   это правило перебивало её и телефон получал две колонки. */
@media (min-width:881px) and (max-width:1000px){
  .transfer-surface #app{grid-template-columns:60px 1fr}
  .transfer-surface #rail{align-items:center;padding:10px 6px}
  .transfer-surface .rbtn{width:44px;justify-content:center;padding:0}
  .transfer-surface .rbtn .rlbl{display:none}
  .transfer-surface .rbtn .bdg{position:absolute;top:2px;right:2px;min-width:15px;height:15px;font-size:9.5px;padding:0 4px;
    background:var(--crit);color:#fff}
}

/* =====================================================================
   Заметки: одна лента всего, что дописано в карточках. Вид как в почте,
   чтобы разделы не выглядели из разных приложений.
   ===================================================================== */
.transfer-surface .notelist{display:flex;flex-direction:column;padding:6px 8px 12px;overflow:auto;min-height:0}
.transfer-surface .notegrp{padding:12px 10px 5px;font-size:12px;color:var(--ink-faint)}
.transfer-surface .noterow{
  display:grid;grid-template-columns:30px 1fr auto;gap:2px 9px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--r-card);transition:background 140ms ease;min-width:0
}
@media (hover:hover) and (pointer:fine){.transfer-surface .noterow:hover{background:var(--glass-input)}}
.transfer-surface .noterow .note-av{grid-row:1/4;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font:600 11px/1 var(--sans);margin-top:2px}
.transfer-surface .noterow .note-src{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .noterow .note-when{font-size:11px;color:var(--ink-faint)}
.transfer-surface .noterow .note-kind{grid-column:2/4;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-faint)}
.transfer-surface .noterow .note-text{grid-column:2/4;font-size:12.5px;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- календарь: сетка слева, маленький месяц справа (референсы Val) ---- */
.transfer-surface .calsplit{display:flex;min-height:0;flex:1;gap:0}
.transfer-surface .calmain{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.transfer-surface .calside{flex:0 0 268px;min-height:0;overflow:auto;border-left:1px solid var(--pane-line);padding:12px 14px 16px}
.transfer-surface .mini{user-select:none}
.transfer-surface .minihead{display:flex;align-items:center;gap:2px;margin-bottom:10px}
.transfer-surface .minihead .minit{font-size:13.5px;font-weight:600;color:var(--ink)}
.transfer-surface .minihead .pbtn{width:24px;height:24px;font-size:15px;color:var(--ink-faint)}
.transfer-surface .miniwd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.transfer-surface .miniwd span{text-align:center;font-size:10.5px;color:var(--ink-faint)}
.transfer-surface .minirow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border-radius:var(--r-cell);padding:1px}
.transfer-surface .minirow.on{background:var(--glass-input)}
.transfer-surface .minid{height:26px;border-radius:var(--r-cell);font-size:12px;color:var(--ink-soft);display:grid;place-items:center;
  transition:background 120ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .minid:hover{background:var(--hairline-soft);color:var(--ink)}}
.transfer-surface .minid.out{color:var(--ink-faint);opacity:.55}
.transfer-surface .minid.today{background:var(--accent);color:var(--accent-ink);font-weight:600}
.transfer-surface .calnext{margin-top:18px}
.transfer-surface .calnext-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
@media (max-width:1100px){ .transfer-surface .calside{display:none} }

/* ---- календарь: полотно ровное, без цветной подложки (просьба Val) ---- */
.transfer-surface .calsplit{background:var(--cal-bg)}
.transfer-surface .calmain .dayhead,.transfer-surface .calmain .allday{background:var(--cal-bg)}
.transfer-surface .calmain .tlwrap{background:var(--cal-bg)}
.transfer-surface .calside{background:var(--pane-side)}
.transfer-surface .panel .pbody.tlhost{background:var(--cal-bg)}

/* ---- правая панель: шапка с плюсом, ручка ширины ---- */
.transfer-surface .calside{position:relative;flex:0 0 auto}
.transfer-surface .calside-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.transfer-surface .calside-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .calgrip{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;touch-action:none;z-index:3}
.transfer-surface .calgrip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent;transition:background 140ms ease}
.transfer-surface .calgrip:hover::after,.transfer-surface .calgrip:active::after{background:var(--accent)}

/* точка на днях с встречами в маленьком месяце */
.transfer-surface .minid{position:relative}
.transfer-surface .minid .mdot{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:3px;height:3px;border-radius:99px;
  background:var(--ink-faint)}
.transfer-surface .minid.today .mdot{background:var(--accent-ink)}

/* названия встреч в панели переносятся, а не обрезаются */
.transfer-surface .calnext .agrow{align-items:flex-start}
.transfer-surface .calnext .agrow .t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.transfer-surface .calnext .agrow .tm{padding-top:1px}

/* ---- карточка встречи в правой панели ---- */
.transfer-surface .evpane{display:flex;flex-direction:column;min-width:0}
.transfer-surface .evpane-top{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.transfer-surface .evpane-acc{font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.transfer-surface .evpane .pbtn.evdel:hover{color:var(--crit)}
.transfer-surface .evpane-t{margin:0;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.transfer-surface .evpane-when{margin-top:6px;font-size:13.5px;color:var(--ink)}
.transfer-surface .evpane-when span{color:var(--ink-faint);margin-left:6px}
.transfer-surface .evpane-rows{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.transfer-surface .evpane-row{display:flex;gap:10px;font-size:13px;align-items:baseline}
.transfer-surface .evpane-row .k{flex:0 0 84px;color:var(--ink-faint)}
.transfer-surface .evpane-row .v{flex:1;min-width:0;color:var(--ink);overflow-wrap:anywhere}
.transfer-surface .evpane-notes{margin-top:18px;border-top:1px solid var(--hairline-soft);padding-top:12px}
.transfer-surface .evpane-nt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.transfer-surface .evpane-desc,.transfer-surface .evpane-note{font-size:13px;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:6px}
.transfer-surface .evpane-more{margin-top:18px;align-self:flex-start}

/* меню календарей в шапке раздела */
.transfer-surface .calmenu{width:270px}
.transfer-surface .calmenu .calitem{display:flex;align-items:center;gap:9px}
.transfer-surface .calmenu .calitem .check{width:16px;height:16px;flex:0 0 16px;border-radius:var(--r-chk);border:1.5px solid var(--hairline);
  display:grid;place-items:center;color:transparent}
.transfer-surface .calmenu .calitem .check[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.transfer-surface .calmenu .calitem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .calmenu .mitem.dim{color:var(--ink-faint);font-size:12.5px}

/* =====================================================================
   Встроенный помощник. Окошко «Задайте вопрос …» внизу справа, как в Spark:
   при наведении показывает примеры, по клику разворачивается в разговор.
   ===================================================================== */
.transfer-surface .askwrap{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px}
.transfer-surface .askpill{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 14px;border-radius:999px;
  background:var(--glass-strong);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--hairline);box-shadow:var(--sh-lift);color:var(--ink-soft);
  font-size:13.5px;cursor:pointer;transition:transform .12s var(--ease-out),color .15s,border-color .15s}
.transfer-surface .askpill:hover{color:var(--ink);border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
/*
 * Над главным экраном капсула помощника из того же стекла, что строки писем:
 * светлая плашка на фотографии выглядела чужой заплаткой.
 */
.transfer-surface:has(#home) .askpill{background:rgba(26,30,28,.42);border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(140%)}
.transfer-surface:has(#home) .askpill:hover{background:rgba(56,62,58,.62);border-color:rgba(255,255,255,.18);color:#fff}
.transfer-surface .askpill:active{transform:scale(.98)}
.transfer-surface .askspark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;color:#fff;
  background:linear-gradient(135deg,#ff6a5a,#7a8cff)}
.transfer-surface .asktips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;animation:asktipin .18s var(--ease-out) both}
@keyframes asktipin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.transfer-surface .asktips.inline{align-items:stretch;margin-top:12px;animation:none}
.transfer-surface .asktip{max-width:320px;text-align:left;padding:8px 13px;border-radius:var(--r-panel);font-size:12.5px;line-height:1.35;
  background:var(--glass-strong);backdrop-filter:blur(24px);border:1px solid var(--hairline);
  box-shadow:var(--sh-rest);color:var(--ink-soft);cursor:pointer;transition:color .14s,border-color .14s}
.transfer-surface .asktip:hover{color:var(--ink);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}

.transfer-surface .askpanel{position:fixed;right:20px;bottom:20px;z-index:71;width:min(400px,calc(100vw - 40px));
  max-height:min(620px,78vh);display:flex;flex-direction:column;border-radius:var(--r-dlg);overflow:hidden;
  background:var(--glass-strong);backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--hairline);box-shadow:var(--sh-sheet);
  animation:askin .26s var(--ease-out) both}
@keyframes askin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.transfer-surface .askhead{display:flex;align-items:center;gap:9px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .askhead b{font-size:14px}
.transfer-surface .askmode{font-size:11px;color:var(--ink-faint);border:1px solid var(--hairline);border-radius:999px;padding:2px 8px}
.transfer-surface .askmode.on{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent)}
.transfer-surface .askbody{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.transfer-surface .askempty{color:var(--ink-soft);font-size:13px;line-height:1.5}
.transfer-surface .askempty p{margin:0}
.transfer-surface .askmsg{max-width:88%;padding:9px 13px;border-radius:var(--r-panel);font-size:13.5px;line-height:1.5;white-space:pre-wrap;
  overflow-wrap:anywhere}
.transfer-surface .askmsg.you{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px}
.transfer-surface .askmsg.ai{align-self:flex-start;background:var(--glass-input);border:1px solid var(--hairline-soft);
  border-bottom-left-radius:5px}
.transfer-surface .askmsg.dim{color:var(--ink-faint)}
.transfer-surface .askfoot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--hairline-soft)}
.transfer-surface .askfoot .withmic{min-width:0}
.transfer-surface .askfoot .fld{flex:1;height:38px}
.transfer-surface .askfoot .micbtn{top:4px}
.transfer-surface .askfoot .btn{height:38px;padding:0 12px}
@media print{ .transfer-surface .askwrap,.transfer-surface .askpanel{display:none !important} }
@media (max-width:520px){ .transfer-surface .askpanel{right:10px;left:10px;width:auto} .transfer-surface .askwrap{right:12px;bottom:12px} }

/* ---------------- дашборд: виджеты ---------------- */
/* Карточки собраны по образцу нового варианта: плотная поверхность,
   значок раздела в шапке и спокойная типографика. */
.transfer-surface .dashview .panel.gcard{background:var(--glass-strong);border-color:var(--hairline)}
.transfer-surface .dashview .phead{padding:11px 12px 9px;gap:8px}
.transfer-surface .pico{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-ico);flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent)}
.transfer-surface .cmenu{position:relative;display:inline-flex}
.transfer-surface .cmenu .menu{min-width:190px}

.transfer-surface .kpis{display:flex;gap:10px;padding:12px 14px;height:100%;align-items:stretch}
.transfer-surface .kpi{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:8px 12px;border-radius:var(--r-card);background:var(--glass-input);border:1px solid var(--hairline-soft);
  text-align:left;transition:transform 130ms var(--ease-out),background 130ms ease}
.transfer-surface .kpi:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.transfer-surface .kpi:hover{background:var(--glass-strong);border-color:var(--hairline)}}
.transfer-surface .kpi b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.transfer-surface .kpi span{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .kpi.acc b{color:var(--accent)} .transfer-surface .kpi.crit b{color:var(--crit)} .transfer-surface .kpi.warn b{color:var(--warn)}

.transfer-surface .dbars{display:flex;flex-direction:column;gap:9px}
.transfer-surface .dbar{display:grid;grid-template-columns:86px 1fr 28px;align-items:center;gap:9px;width:100%;
  padding:3px 4px;border-radius:8px;text-align:left}
@media (hover:hover) and (pointer:fine){.transfer-surface .dbar:hover{background:var(--glass-input)}}
.transfer-surface .dname{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .dtrack{height:8px;border-radius:99px;background:var(--hairline-soft);overflow:hidden;display:block}
.transfer-surface .dtrack i{display:block;height:100%;border-radius:99px;transition:width 320ms var(--ease-out)}
.transfer-surface .dval{font-size:11.5px;color:var(--ink-faint);text-align:right}

.transfer-surface .dnotes{display:flex;flex-direction:column}
.transfer-surface .dnote{display:flex;flex-direction:column;gap:2px;padding:8px 6px;border-radius:var(--r-btn);text-align:left;
  border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .dnote:last-child{border-bottom:none}
@media (hover:hover) and (pointer:fine){.transfer-surface .dnote:hover{background:var(--glass-input)}}
.transfer-surface .dnote-top{display:flex;align-items:center;gap:8px;font-size:12.5px}
.transfer-surface .dnote-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .dnote-top .mono{margin-left:auto;font-size:10.5px;color:var(--ink-faint)}
.transfer-surface .dnote-text{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- окно выбора виджетов ---------------- */
.transfer-surface .wpgroups{display:flex;gap:4px;padding:10px 18px 0;flex:0 0 auto;flex-wrap:wrap}
.transfer-surface .wpg{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--glass-input);border:1px solid var(--hairline-soft)}
.transfer-surface .wpg.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.transfer-surface .wpbody{display:flex;flex-direction:column;gap:8px;padding-top:14px}
.transfer-surface .wpitem{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:var(--r-card);
  text-align:left;background:var(--glass-input);border:1px solid var(--hairline-soft);width:100%;
  transition:transform 130ms var(--ease-out),background 130ms ease,border-color 130ms ease}
.transfer-surface .wpitem:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.transfer-surface .wpitem:hover{background:var(--glass-strong);border-color:var(--accent)}}
.transfer-surface .wpico{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-ico);flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent)}
.transfer-surface .wptext{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.transfer-surface .wptext b{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.transfer-surface .wptext>span{font-size:12.5px;color:var(--ink-faint);line-height:1.45}
.transfer-surface .wpon{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.transfer-surface .wpadd{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-ico);flex:0 0 auto;
  color:var(--ink-faint);background:var(--glass)}
@media (hover:hover) and (pointer:fine){.transfer-surface .wpitem:hover .wpadd{color:var(--accent-ink);background:var(--accent)}}

/* ---------------- задачи: разделы, выделение, общие действия ---------------- */
/* Раскладка по образцу списка в Asana: заголовок раздела со счётчиком,
   строка «Добавить задачу» внизу каждого раздела и полоса действий сверху,
   когда задачи отмечены. */
.transfer-surface .fld.sm{width:auto;padding:5px 8px;font-size:12.5px;border-radius:var(--r-fld)}
.transfer-surface select.fld.sm{padding-right:24px}

.transfer-surface .ttgroup{display:flex;align-items:center;gap:8px;padding:14px 10px 5px;position:sticky;top:0;z-index:2;
  background:linear-gradient(var(--glass-strong) 72%,transparent)}
.transfer-surface .ttgt{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);padding:3px 6px;border-radius:var(--r-pill)}
@media (hover:hover) and (pointer:fine){.transfer-surface .ttgt:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .ttgt svg{transition:transform 160ms var(--ease-out)}
.transfer-surface .ttgt[aria-expanded="true"] svg{transform:rotate(90deg)}
.transfer-surface .ttgt .cnt{font-size:10.5px;font-weight:500;letter-spacing:0;color:var(--ink-faint);
  background:var(--glass-input);padding:1px 6px;border-radius:999px}

.transfer-surface .ttadd{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:var(--r-btn);
  color:var(--ink-faint);font-size:12.5px;text-align:left}
@media (hover:hover) and (pointer:fine){.transfer-surface .ttadd:hover{background:var(--glass-input);color:var(--accent)}}
.transfer-surface .ttadd.on{gap:6px;color:var(--ink)}
.transfer-surface .ttadd.on .fld{flex:1;padding:6px 9px;font-size:13px}
.transfer-surface .ttsub{padding:2px 10px 6px}

.transfer-surface .selbox{width:15px;height:15px;flex:0 0 auto;border-radius:var(--r-chk);border:1.5px solid var(--hairline);
  display:grid;place-items:center;color:transparent;background:var(--glass-input);
  transition:border-color 130ms ease,background 130ms ease,opacity 130ms ease;opacity:0}
.transfer-surface .trow:hover .selbox,.transfer-surface .ttrow:hover .selbox,.transfer-surface .selbox.on,.transfer-surface .selbox:focus-visible{opacity:1}
.transfer-surface .selbox.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.transfer-surface .trow:has(.selbox.on),.transfer-surface .ttrow:has(.selbox.on){background:var(--accent-soft)}

.transfer-surface .batchbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;margin:0 0 2px;
  border-radius:var(--r-card);background:var(--accent-soft);border:1px solid var(--hairline-soft)}
.transfer-surface .batchbar b{font-size:12.5px;color:var(--accent);margin-right:2px}

/* карточка задачи: поля правятся на месте */
.transfer-surface .tctitle{width:100%;border:1px solid transparent;background:none;border-radius:var(--r-fld);padding:2px 6px;margin-left:-6px;
  font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.transfer-surface .tctitle:focus{outline:none;border-color:var(--accent);background:var(--glass-input)}
.transfer-surface .tctitle.struck{text-decoration:line-through;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.transfer-surface .tctitle:hover{background:var(--glass-input)}}
.transfer-surface .tcfact.wide{grid-column:1 / -1}
.transfer-surface .tctags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.transfer-surface .tctag{display:inline-flex;align-items:center;gap:4px;color:var(--ink-faint);border-radius:999px;padding:1px 5px 1px 1px}
@media (hover:hover) and (pointer:fine){.transfer-surface .tctag:hover{background:var(--crit-soft);color:var(--crit)}}
.transfer-surface .tcdesc{min-height:76px;resize:vertical;line-height:1.55}

/* ---------------- календарь: шапка дней, наведение и выбор ---------------- */
/* Шапка недели как в новом варианте: день недели подписью, число крупно,
   сегодняшнее число в залитом кружке. Плюс справа появляется при наведении
   и добавляет задачу прямо в этот день. */
.transfer-surface .dayhead{overflow:visible}
.transfer-surface .dayhead .dh{position:relative;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 6px;border-left:1px solid var(--hairline-soft)}
.transfer-surface .dayhead .dh:first-of-type{border-left:0}
.transfer-surface .dayhead .dh .dw{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .dayhead .dh .dn{font-size:16px;font-weight:600;width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center}
.transfer-surface .dayhead .dh.today-col .dn{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .dhadd{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:var(--r-ico);line-height:1;
  font-size:16px;color:var(--ink-faint);background:var(--glass-input);border:1px solid var(--hairline-soft);
  display:grid;place-items:center;opacity:0;transition:opacity 130ms ease,color 130ms ease,background 130ms ease}
.transfer-surface .dayhead .dh:hover .dhadd,.transfer-surface .dhadd:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.transfer-surface .dhadd:hover{background:var(--accent);border-color:transparent;color:var(--accent-ink)}}

/* событие: наведение приподнимает, выбранное обведено, как выделенная строка в Asana */
.transfer-surface .evb{transition:box-shadow 130ms ease,filter 130ms ease,transform 130ms ease}
@media (hover:hover) and (pointer:fine){
  .transfer-surface .evb:hover{filter:brightness(.985);box-shadow:0 2px 8px rgba(16,20,30,.14);z-index:5}
}
.transfer-surface .evb.sel{box-shadow:inset 0 0 0 2px var(--accent),0 4px 14px rgba(16,20,30,.16);z-index:6}
.transfer-surface .tcol{border-left:1px solid var(--hairline-soft)}
.transfer-surface .tcol:first-child{border-left:0}

/* события на весь день стоят в своих столбцах и тянутся на всю длину */
.transfer-surface .allday{display:grid;align-items:center;row-gap:3px}
.transfer-surface .allday .gutpad{grid-column:1}
.transfer-surface .allday .adbar{margin:0 3px;justify-self:stretch;justify-content:flex-start}
.transfer-surface .adbar.sel{box-shadow:inset 0 0 0 2px var(--accent)}

/* приветствие дашборда: по времени суток и по имени */
.transfer-surface .dashhello{padding:2px 2px 10px}
.transfer-surface .dashhello h1{margin:0;font:600 25px/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:880px){.transfer-surface .dashhello h1{font-size:21px}}

/* ---------------- почта: ящики слева, как в Spark ---------------- */
.transfer-surface .mfold{flex:0 0 186px;display:flex;flex-direction:column;gap:1px;padding:10px 8px;overflow:auto;
  background:var(--pane-side);border-right:1px solid var(--pane-line)}
.transfer-surface .fbtn{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-btn);width:100%;text-align:left;
  font-size:13px;color:var(--ink-soft);transition:background 130ms ease,color 130ms ease}
.transfer-surface .fbtn svg{flex:0 0 auto;opacity:.85}
.transfer-surface .fbtn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.transfer-surface .fbtn:hover{background:var(--glass-input);color:var(--ink)}}
/* ящик, который сейчас несут мышью: он бледнеет, чтобы видно было место */
.transfer-surface .fbtn.dragging{opacity:.45}
.transfer-surface .fbtn[draggable="true"]{cursor:grab}
.transfer-surface .fbtn[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.transfer-surface .fbtn[aria-current="true"] .cnt{background:rgba(255,255,255,.22);color:var(--accent-ink)}
.transfer-surface .fbtn .cnt{flex:0 0 auto;font-size:10.5px;padding:1px 6px;border-radius:999px;background:var(--glass-input);color:var(--ink-faint)}
.transfer-surface .fgroup{padding:14px 10px 5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.transfer-surface .fhint{padding:2px 10px;font-size:12px;color:var(--ink-faint);line-height:1.45}
/*
 * Строка ящика над названием папки: значок службы, адрес и выбор ящика.
 * С одним ящиком выбирать нечего, и строка просто говорит, чья это почта.
 */
.transfer-surface .macct{display:flex;align-items:center;min-height:30px;padding:0 1px 8px;margin-bottom:4px;
  border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .macct .cmenu{position:relative;min-width:0}
.transfer-surface .macctpick{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 7px;border:0;background:none;
  border-radius:var(--r-btn);cursor:pointer;color:var(--ink-soft);font:500 12px/1.2 var(--sans);position:relative}
.transfer-surface .macctpick>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .macctpick:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.transfer-surface .macctpick:not(:disabled):hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .macctico{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal}
/* хвост списка: тут догружается следующая порция писем */
.transfer-surface .mtail{padding:10px 0 14px;display:flex;justify-content:center}
.transfer-surface .mtail .empty{padding:0;font-size:12px}

/* шапка списка по образцу: название папки с порядком под ним, справа переключатель и круглые кнопки */
.transfer-surface .mhead{display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:0}
.transfer-surface .mboxpick{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:3px 6px;
  border-radius:var(--r-btn);min-width:0;color:var(--ink)}
.transfer-surface .mboxpick b{display:inline-flex;align-items:center;gap:3px;font-size:15px;font-weight:600;white-space:nowrap}
.transfer-surface .mboxpick .msub{font-size:12px;color:var(--ink-faint);white-space:nowrap}
.transfer-surface .mboxpick .msub .mono{font-size:11px}
@media (hover:hover) and (pointer:fine){.transfer-surface .mboxpick:hover{background:var(--glass-input)}}
.transfer-surface .mtools .cmenu{position:relative}
.transfer-surface .mtools .menu.left{left:0;right:auto}
.transfer-surface .mswitch{position:relative;width:38px;height:22px;flex:0 0 auto;border-radius:999px;background:var(--hairline);
  border:0;padding:0;cursor:pointer;transition:background 130ms ease}
.transfer-surface .mswitch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--ink-faint);
  display:grid;place-items:center;font-style:normal;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform 130ms var(--ease-out),color 130ms ease}
.transfer-surface .mswitch.on{background:var(--accent)}
.transfer-surface .mswitch.on i{transform:translateX(16px);color:var(--accent)}
.transfer-surface .mtools .withmic{margin-top:8px}
.transfer-surface .mboxname{display:flex;align-items:baseline;gap:8px;padding:2px 2px 0}
.transfer-surface .mboxname b{font-size:14px;font-weight:600}
.transfer-surface .mboxname .mono{font-size:11px;color:var(--ink-faint)}

/*
 * Строка письма: слева узкая колонка. В покое там метки письма — молния
 * приоритета и булавка закрепления, теми же цветами, что и кнопки в панели
 * открытого письма. При наведении на их месте три маленькие кнопки столбиком:
 * выполнено, прочитано, в корзину. Кнопки помещаются в высоту строки и никуда
 * не наезжают, как в образце Val.
 */
.transfer-surface .mrowwrap{position:relative;display:flex;align-items:stretch;gap:0}
.transfer-surface .mside{flex:0 0 22px;position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:6px 0}
.transfer-surface .mmarks{display:flex;flex-direction:column;align-items:center;gap:3px}
.transfer-surface .mmark{display:inline-flex;align-items:center;justify-content:center;font-style:normal;color:var(--ink-faint)}
/* приоритет и закрепление красятся ровно как включённые кнопки панели письма */
.transfer-surface .mmark.bolt,.transfer-surface .mmark.pin{color:var(--accent)}
.transfer-surface .mquick{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;opacity:0;transition:opacity 120ms ease;z-index:3}
.transfer-surface .mrowwrap:hover .mquick,.transfer-surface .mquick:focus-within{opacity:1}
.transfer-surface .mmarks{transition:opacity 120ms ease}
.transfer-surface .mrowwrap:hover .mmarks,.transfer-surface .mquick:focus-within ~ .mmarks{opacity:0}
/*
 * `padding:0` тут обязателен: общий отступ кнопок (1px 6px) оставляет внутри
 * всего 8px, значок 13px в них не помещается, и вместо центра он прижимается
 * к правому краю подсветки. Val это и увидел.
 */
.transfer-surface .mquick button{width:20px;height:18px;padding:0;border-radius:5px;display:grid;place-items:center;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.transfer-surface .mquick button:hover{background:var(--accent-soft);color:var(--accent)}}
.transfer-surface .mrowwrap .mailrow{flex:1;min-width:0}
/* письмо, отмеченное выполненным: видно, что оно уже сделано */
.transfer-surface .mailrow.done .who,.transfer-surface .mailrow.done .subj{color:var(--ink-faint)}
.transfer-surface .mailrow.done .mav{opacity:.65}
/* письма внутри раскрытой группы стоят с отступом */
.transfer-surface .mrowwrap.incat{padding-left:16px}

/*
 * Группа «умного» списка: значок, название со счётчиком и чипы отправителей.
 * Нажатие раскрывает письма группы прямо под ней.
 */
.transfer-surface .catrow{display:grid;grid-template-columns:22px 1fr;gap:2px 9px;width:100%;text-align:left;cursor:pointer;
  padding:9px 10px 9px 0;border-radius:var(--r-card);transition:background 140ms ease}
@media (hover:hover){.transfer-surface .catrow:hover{background:var(--glass-input)}}
.transfer-surface .catico{grid-row:1/3;display:flex;align-items:flex-start;justify-content:center;padding-top:2px;
  color:var(--ink-faint);font-style:normal}
.transfer-surface .cattop{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.transfer-surface .cattop .cnt{font-size:10.5px;color:var(--ink-faint);font-weight:500}
.transfer-surface .catwho{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px}
.transfer-surface .catchip{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;color:var(--ink-soft);
  max-width:210px}
.transfer-surface .catchip em{flex:0 0 auto;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font:600 8px/1 var(--sans);color:#fff;font-style:normal}
.transfer-surface .catchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .catchip u{text-decoration:none;font-size:10.5px;color:var(--ink-faint)}
.transfer-surface .catmore{font-style:normal;font-size:11px;color:var(--ink-faint);align-self:center}
/* адрес ящика у заголовка группы и корзина, которая убирает группу целиком */
.transfer-surface .catacc{font-style:normal;font-size:11px;color:var(--ink-faint);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/*
 * Кнопки стоят внутри самой строки группы, у правого края: снаружи они
 * выглядели отдельной полосой. Высота строки не меньше столбика кнопок,
 * поэтому они никогда за неё не выходят.
 */
.transfer-surface .catwrap{position:relative}
.transfer-surface .catwrap .catrow{min-width:0;align-content:center}
/*
 * Три кнопки у заголовка группы столбиком: выполнено, прочитано, в корзину.
 * Столбик не выше самой карточки, поэтому кнопки маленькие и без зазоров.
 */
/*
 * Кнопки стоят в строке заголовка у правого края, слева от шеврона: так просил
 * Val. Раньше они шли сразу за названием и разрывали его со счётчиком.
 */
.transfer-surface .catacts{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0 8px 0 10px}
/*
 * Кнопки группы видно в обеих темах: тонкий контур и значок цветом текста.
 * На тёмном фоне заливка `--glass-input` почти не читалась, и Val решил, что
 * кнопки пропали.
 */
/* кнопки ровно как быстрые кнопки на строке письма: 20×18, значок 12-13px */
.transfer-surface .catbtn{position:relative;width:20px;height:18px;padding:0;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--ink-soft);background:transparent;border:1px solid var(--hairline);cursor:pointer;
  transition:background 130ms ease,color 130ms ease,border-color 130ms ease}
/* корзина красная всегда, а не только под мышью: она опаснее двух соседних */
.transfer-surface .catbtn.crit{color:var(--crit);border-color:color-mix(in srgb, var(--crit) 40%, transparent)}
@media (hover:hover) and (pointer:fine){
  .transfer-surface .catbtn:hover{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
  .transfer-surface .catbtn.crit:hover{background:var(--crit-soft);color:var(--crit)}
}
/* ---- цвета папок ящика в настройках почты ---- */
.transfer-surface .labelset{display:flex;flex-direction:column;gap:6px}
.transfer-surface .labelrow{border:1px solid var(--hairline-soft);border-radius:var(--r-card);overflow:hidden}
.transfer-surface .labelname{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;text-align:left;
  font-size:13.5px;color:var(--ink);background:transparent;border:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){.transfer-surface .labelname:hover{background:var(--glass-input)}}
.transfer-surface .labelpal{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 11px 11px}
.transfer-surface .palbtn{width:22px;height:22px;border-radius:50%;border:1px solid var(--hairline);cursor:pointer;padding:0}
.transfer-surface .palbtn.on{box-shadow:0 0 0 2px var(--pane-content),0 0 0 4px var(--accent)}
.transfer-surface .palany{position:relative;display:grid;place-items:center;overflow:hidden;
  background:conic-gradient(#ef4444,#f5a524,#22c55e,#38bdf8,#a855f7,#ef4444)}
.transfer-surface .palany input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* цветная полоска ящика у имени отправителя */
.transfer-surface .mailrow .mbar-acc{flex:0 0 auto;width:3px;height:13px;border-radius:99px;margin-right:6px;display:inline-block;
  vertical-align:-2px}
.transfer-surface .mailrow .who{display:flex;align-items:center}

/*
 * Полоса перевода над письмом и лист с языками, по снимкам Val. Полоса видна
 * только у письма на чужом языке и только пока перевод не запрещён для этого
 * языка.
 */
.transfer-surface .mtrans{display:flex;align-items:center;gap:6px;margin:2px 0 12px;padding:4px;border-radius:var(--r-fld);
  background:var(--accent-soft)}
.transfer-surface .mtransgo{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 8px;border:0;background:none;
  cursor:pointer;color:var(--accent);font:500 14px/1.2 var(--sans);text-align:left}
.transfer-surface .mtransgo .ailabel{flex:0 0 auto;padding:3px 6px;border-radius:7px;color:#fff;
  background:linear-gradient(120deg,#7c3aed,#3b82f6);
  font:700 11.5px/1 var(--sans);font-style:normal}
.transfer-surface .mtransset{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;border:0;
  background:transparent;color:var(--accent);cursor:pointer}
@media (hover:hover) and (pointer:fine){.transfer-surface .mtransset:hover{background:var(--glass-input)}}
.transfer-surface .mtrantext{padding:12px 14px;border-radius:var(--r-panel);background:var(--glass-input);margin-bottom:12px}
/*
 * Лист выбора языков по снимку Val: плавающая карточка снизу с ручкой наверху,
 * заголовок по центру, круглый крестик справа, внутри две карточки — языки с
 * кнопкой и правила. Лист светлее своих карточек, страница за ним не гаснет.
 */
.transfer-surface .sheetwrap{align-items:flex-end}
.transfer-surface .dlgwrap.sheetwrap{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.transfer-surface .dlg.tsheet{position:relative;width:min(560px,100vw);border-radius:var(--r-sheet);background:var(--sheet-bg);
  border:1px solid var(--hairline);backdrop-filter:none;-webkit-backdrop-filter:none}
/* ручка листа */
.transfer-surface .dlg.tsheet::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:52px;height:4px;border-radius:999px;background:var(--sheet-grip)}
.transfer-surface .dlg.tsheet .dh{position:relative;justify-content:center;border-bottom:0;padding:24px 16px 16px}
.transfer-surface .dlg.tsheet .dh h3{font:600 17px/1.2 var(--sans);letter-spacing:0}
.transfer-surface .dlg.tsheet .dh .pbtn{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;background:var(--sheet-btn);color:var(--ink)}
.transfer-surface .dlg.tsheet .db{display:flex;flex-direction:column;gap:22px;padding:0 16px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom))}
.transfer-surface .tscard{display:flex;flex-direction:column;gap:18px;padding:12px;border-radius:var(--r-scard);background:var(--sheet-card)}
.transfer-surface .tspair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.transfer-surface .tspair svg{color:var(--ink-faint);flex:0 0 auto}
.transfer-surface .tslang{width:100%;min-width:0;max-width:none;padding:18px 10px;border-radius:var(--r-dlg);text-align:center;
  color:var(--ink);font:600 17px/1 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:linear-gradient(90deg,var(--tsl-a),var(--tsl-b));border:1px solid var(--tsl-edge)}
.transfer-surface .tslang.tspick{position:relative;cursor:pointer}
.transfer-surface .tslang.tspick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;cursor:pointer;
  appearance:none;-webkit-appearance:none}
.transfer-surface .btn.wide{justify-content:center;width:100%;height:44px;border-radius:999px;font-size:17px}
.transfer-surface .dlg.tsheet .btn.wide{color:#fff;font-weight:400}
.transfer-surface .tsrules{display:flex;flex-direction:column;border-radius:var(--r-scard);background:var(--sheet-card);overflow:hidden}
.transfer-surface .tsrule{display:flex;align-items:center;gap:10px;padding:15px 14px;border:0;background:none;cursor:pointer;
  color:var(--ink);font:400 16px/1.3 var(--sans);text-align:left}
.transfer-surface .tsrule+.tsrule{position:relative}
.transfer-surface .tsrule+.tsrule::before{content:"";position:absolute;left:14px;right:0;top:0;height:1px;background:var(--hairline)}
.transfer-surface .tsrule span{flex:1;min-width:0}
.transfer-surface .tsrule svg{color:var(--accent);stroke-width:2.6}
@media (hover:hover) and (pointer:fine){.transfer-surface .tsrule:hover{background:var(--glass-strong)}}

/* письмо в его настоящем виде: разметка и картинки внутри теневого дерева */
.transfer-surface .mhtml{margin:0}

/*
 * Карточка «Отлично!» после действия над письмом, по снимку Val: сверху что
 * случилось и куда письмо ушло, снизу узкая плашка с названием действия и
 * словом «Отменить». Живёт несколько секунд, рисуется в body, как все слои.
 */
.transfer-surface .mflash{position:absolute;left:12px;bottom:12px;z-index:20;width:min(340px,calc(100% - 24px));
  display:flex;flex-direction:column;gap:8px;animation:flashin 180ms var(--ease-out)}
@keyframes flashin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.transfer-surface .mfcard{background:var(--card-solid);border:1px solid var(--hairline);border-radius:var(--r-dlg);
  box-shadow:var(--sh-pop);padding:14px 16px 15px;display:flex;flex-direction:column;gap:10px}
.transfer-surface .mfhead{display:flex;align-items:center}
.transfer-surface .mfhead b{font:600 16px/1.2 var(--sans);color:var(--ink)}
.transfer-surface .mfx{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-faint);cursor:pointer}
@media (hover:hover) and (pointer:fine){.transfer-surface .mfx:hover{background:var(--glass-input);color:var(--ink)}}
.transfer-surface .mfrow{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.transfer-surface .mfico{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-fld);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-style:normal}
.transfer-surface .mfrow .linkbtn{font-size:13px}
.transfer-surface .mfbar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--r-card);
  background:var(--card-solid);border:1px solid var(--hairline);box-shadow:var(--sh-lift);
  font-size:13px;color:var(--ink)}
.transfer-surface .mfbico{flex:0 0 auto;color:var(--ok);font-style:normal;display:grid;place-items:center}
.transfer-surface .mfundo{border:0;background:none;padding:0;cursor:pointer;color:var(--accent);font:600 13px/1 var(--sans)}
@media (max-width:880px){.transfer-surface .mflash{left:8px;right:8px;bottom:76px;width:auto}}
.transfer-surface .menu.attmenu .msize{white-space:nowrap}
.transfer-surface .menu.attmenu .mlink{max-width:190px}
@media (max-width:880px){
  .transfer-surface .mfold{flex:0 0 auto;flex-direction:row;gap:6px;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--hairline-soft);padding:8px}
  .transfer-surface .fbtn{width:auto;white-space:nowrap}
  .transfer-surface .fgroup,.transfer-surface .fhint{display:none}
}

/*
 * Шапка письма по образцу Spark, который прислал Val: сверху панель действий,
 * под ней тема письма крупно, ещё ниже отправитель. Слева на панели капсула
 * «закрыть · прочитано», дальше круглые значки, справа две подписанные кнопки.
 */
.transfer-surface .mhead2{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:10px 14px 12px}
/*
  Панель кнопок письма это одна строка, как в образце. Раньше она была wrap и на
  экране 1440 «Поделиться» падало на вторую строку. Узкому окну письма подписи у
  двух правых кнопок не нужны, остаются одни значки с подсказками.
*/
.transfer-surface .mread{container-type:inline-size}
/* строка выше кнопок, кнопки по центру между её верхом и низом: раньше они
   упирались в верхний край панели и наезжали на письмо */
.transfer-surface .mbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;min-height:58px;padding:8px 12px;
  border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .mbar>*{flex:0 0 auto}
@container (max-width:720px){
  .transfer-surface .mbar .mpill span{display:none}
  .transfer-surface .mbar .mpill{padding:0;width:32px;justify-content:center}
}
.transfer-surface .mhead2 .msubj{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}

/* пара кнопок одной капсулой, как в образце. Сами кнопки прежние, значки внутри
   на 15% крупнее: мелкими они читались хуже соседних круглых */
.transfer-surface .mseg{display:inline-flex;align-items:center;border:1px solid var(--hairline-soft);border-radius:999px;
  background:var(--glass-input);overflow:hidden}
.transfer-surface .mseg button{width:34px;height:30px;display:grid;place-items:center;color:var(--ink-soft);background:transparent;
  border:0;cursor:pointer;transition:background 130ms ease,color 130ms ease}
.transfer-surface .mseg button+button{border-left:1px solid var(--hairline-soft)}
@media (hover:hover) and (pointer:fine){.transfer-surface .mseg button:hover{background:var(--accent-soft);color:var(--accent)}}

/* круглые значки действий */
.transfer-surface .mtool{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);
  border:1px solid transparent;background:transparent;cursor:pointer;
  transition:background 130ms ease,color 130ms ease}
/* в панели открытого письма они на 15% крупнее: мелкими значки там терялись */
.transfer-surface .mbar .mtool{width:37px;height:37px}
.transfer-surface .mtool.on{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.transfer-surface .mtool:hover{background:var(--glass-input);color:var(--ink)}}

/* подписанные кнопки справа */
.transfer-surface .mpill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;cursor:pointer;
  font:500 12.5px/1 var(--sans);color:var(--ink-soft);border:1px solid var(--hairline-soft);background:var(--glass-input);
  transition:background 130ms ease,color 130ms ease,border-color 130ms ease}
@media (hover:hover) and (pointer:fine){.transfer-surface .mpill:hover{background:var(--accent-soft);color:var(--accent);border-color:transparent}}

/*
 * Новое письмо по образцу Spark: узкая панель сверху, тема крупно, строка
 * адресатов и просторное поле текста. Поля без рамок: как в образце, разделяет
 * их только тонкая линия.
 */
/* по снимку Val: почти вся страница, без единой линии, поля просторные */
.transfer-surface .dlg.cmp{width:min(1480px,96vw);height:min(960px,94vh);max-height:94vh;display:flex;flex-direction:column;position:relative;
  background:var(--card-solid);backdrop-filter:none;-webkit-backdrop-filter:none}
.transfer-surface .cbar{display:flex;align-items:center;gap:6px;padding:14px 18px 6px}
.transfer-surface .cbar .mtool.on{color:var(--accent)}
.transfer-surface .cbar .cmenu{position:relative}
.transfer-surface .csep{width:1px;height:20px;background:var(--hairline);margin:0 6px}
.transfer-surface .cbar .mtool.send{color:var(--accent)}
.transfer-surface .cbar .mtool:disabled{opacity:.45;cursor:default}
.transfer-surface .cacc{max-width:260px;height:30px;border:0;background:transparent;color:var(--ink-soft);
  font:400 12.5px/1 var(--sans);cursor:pointer;padding:0 4px}
.transfer-surface .cbody{display:flex;flex-direction:column;gap:0;padding:14px 48px 80px;overflow:auto;flex:1}
.transfer-surface .csubj{border:0;background:transparent;color:var(--ink);font:600 30px/1.25 var(--sans);padding:12px 0 14px;outline:none}
.transfer-surface .cto{border:0;background:transparent;color:var(--ink);font:400 16px/1.4 var(--sans);padding:10px 0;outline:none}
.transfer-surface .csubj::placeholder,.transfer-surface .cto::placeholder,.transfer-surface .cmsg::placeholder{color:var(--ink-faint)}
.transfer-surface .ctext{margin-top:8px;flex:1;display:flex}
.transfer-surface .cmsg{border:0;background:transparent;color:var(--ink);font:400 16px/1.6 var(--sans);
  width:100%;min-height:260px;resize:none;outline:none;padding-right:56px}
/* кнопка живого разговора там, где раньше стоял микрофон */
.transfer-surface .ctext .clive{position:absolute;right:0;top:4px}
/* строка «Задайте вопрос …» в углу окна письма, как в приложении */
.transfer-surface .cask{position:absolute;right:20px;bottom:20px;z-index:2}
/* окно помощника выше окон: иначе из окна письма его не открыть */
.transfer-surface .askpanel{z-index:92}
/* раздел почты без шапки: список и письмо сразу под верхней панелью */
.transfer-surface .mailpanel>.pbody{padding:0}

/* меню у нижней кнопки открывается вверх, иначе уходит за край окна */
.transfer-surface .menu.up{top:auto;bottom:calc(100% + 6px)}

/* ответить и переслать под письмом, как в образце */
/* «Ответить» и «Переслать» под письмом: подписанные капсулы, как на дашборде */
.transfer-surface .mfoot{display:flex;justify-content:flex-end;gap:10px;padding:12px 2px 2px;margin-top:12px;
  border-top:1px solid var(--hairline-soft)}
/* круглая кнопка со значком, как на снимке Val: тёмный круг с тонкой рамкой */
.transfer-surface .mround{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  border:1px solid var(--hairline);background:var(--glass-input);cursor:pointer;
  transition:background 130ms ease,color 130ms ease,transform 130ms var(--ease-out)}
.transfer-surface .mround:active{transform:scale(.95)}
.transfer-surface .mround[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
@media (hover:hover) and (pointer:fine){.transfer-surface .mround:hover{background:var(--glass-strong);color:var(--accent)}}

/* если ящик не отдал папки, причина видна на месте списка */
.transfer-surface .fhint.bad{color:var(--bad, #d9534f)}

/* =====================================================================
   Помощник: круглая кнопка «ИИ» в шапке, живой разговор с луной,
   настройки модели и голоса, кнопки шапки. Кнопка сделана такой же,
   как на главном экране: круг с тонкой светлой кромкой.
   ===================================================================== */

/* ---- круглая кнопка ИИ в шапке раздела ---- */
.transfer-surface .toolai{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#fff;border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg,rgba(255,120,90,.92),rgba(120,150,255,.92));
  box-shadow:0 1px 8px rgba(60,70,120,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s var(--ease-out), box-shadow .16s ease, filter .16s ease;
}
.transfer-surface .toolai:hover{filter:saturate(1.15) brightness(1.06);box-shadow:0 2px 14px rgba(60,70,120,.36), inset 0 1px 0 rgba(255,255,255,.45)}
.transfer-surface .toolai:active{transform:scale(.93)}
.transfer-surface .toolai:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- живой разговор: значок поверх всех разделов ---- */
.transfer-surface .liveorb{
  position:fixed;z-index:130;width:64px;height:120px;
  display:grid;place-items:center;touch-action:none;cursor:grab;
  animation:orbin .34s var(--ease-out) both;
}
.transfer-surface .liveorb:active{cursor:grabbing}
@keyframes orbin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/*
 * Значок это ролик по образцу Val: стеклянная капсула с оранжевой волной. Кадр
 * ролика обрезан по самому стеклу (348×670 из 960×960 исходника, стадион 347×669),
 * а всё, что осталось от тёмной плитки в углах, прячет маска по силуэту капсулы
 * (voice-orb-mask.png, тот же стадион с отступом 3px внутрь). Снаружи капсулы
 * ничего нет: ни плитки, ни ореола, ни блика с пола — этого просил Val.
 * Скорость волны ставит live.tsx, размер тянет переменная --lvl: значок подрастает
 * от каждого услышанного слова и от собственной речи. Свечение показывает состояние.
 */
.transfer-surface .livedisc{
  /* 54×104 это пропорция самой капсулы (347×669); маска растянута ровно на коробку */
  position:relative;width:54px;height:104px;border:0;padding:0;cursor:inherit;
  /*
   * Скругление со срезом по коробке остаётся запасной линией на случай, если
   * браузер не поймёт маску: капсула в кадре и есть стадион, поэтому 9999px
   * (CSS сам зажимает радиус до половины ширины) режет почти по силуэту.
   */
  border-radius:9999px;overflow:hidden;background:transparent;
  transform:scale(calc(1 + var(--lvl, .05) * .17));
  transition:transform 80ms linear, filter .3s ease;
  filter:drop-shadow(0 4px 14px rgba(190,90,30,.42));
}
/* fill, а не cover: ролик и маска растягиваются на одну и ту же коробку, поэтому
   совпадают пиксель в пиксель при любой пропорции коробки */
.transfer-surface .orbvid{
  display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;
  -webkit-mask-image:url(/voice-orb-mask.png);mask-image:url(/voice-orb-mask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.transfer-surface .liveorb.listening .livedisc{filter:drop-shadow(0 4px 16px rgba(110,231,168,.55)) drop-shadow(0 0 10px rgba(110,231,168,.4))}
.transfer-surface .liveorb.thinking .livedisc{filter:drop-shadow(0 4px 16px rgba(224,138,43,.6)) drop-shadow(0 0 12px rgba(224,138,43,.45))}
.transfer-surface .liveorb.speaking .livedisc{filter:drop-shadow(0 4px 20px rgba(255,140,70,.7)) drop-shadow(0 0 16px rgba(255,150,80,.5))}
.transfer-surface .liveorb.off .orbvid{filter:grayscale(.7) brightness(.8)}

/* кнопка «Закончить» появляется при наведении */
.transfer-surface .liveend{
  position:absolute;bottom:100%;margin-bottom:2px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:4px 10px;border-radius:999px;font:500 11.5px/1 var(--sans);cursor:pointer;
  background:var(--glass-strong);backdrop-filter:blur(20px);color:var(--ink-soft);
  border:1px solid var(--hairline);box-shadow:var(--sh-rest);
  /* своя анимация: общая обнулила бы transform и сбила центровку */
  animation:endin .16s var(--ease-out) both;
}
@keyframes endin{from{opacity:0;transform:translateX(-50%) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
.transfer-surface .liveend:hover{color:var(--crit);border-color:color-mix(in srgb, var(--crit) 45%, transparent)}

.transfer-surface .livehint{
  position:absolute;top:100%;margin-top:-1px;left:50%;transform:translateX(-50%);
  font:500 10.5px/1 var(--sans);color:var(--ink-faint);white-space:nowrap;
  padding:3px 8px;border-radius:999px;background:var(--glass-strong);backdrop-filter:blur(16px);
  border:1px solid var(--hairline-soft);box-shadow:var(--sh-rest);pointer-events:none;
}
.transfer-surface .liveorb.listening .livehint{color:var(--ok)}
.transfer-surface .liveorb.thinking .livehint{color:var(--warn)}
.transfer-surface .liveorb.speaking .livehint{color:var(--accent)}

/* последняя реплика: подпись слева от значка, гаснет сама */
.transfer-surface .livecap{
  position:fixed;z-index:129;
  padding:8px 12px;border-radius:var(--r-panel);font-size:12.5px;line-height:1.45;
  background:var(--glass-strong);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--hairline);box-shadow:var(--sh-lift);color:var(--ink);
  animation:capin .2s var(--ease-out) both;pointer-events:none;
}
@keyframes capin{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.transfer-surface .livecap.you{color:var(--ink-soft)}
.transfer-surface .livecap.bad{color:var(--crit);border-color:color-mix(in srgb, var(--crit) 40%, transparent)}
@media (prefers-reduced-motion:reduce){ .transfer-surface .livedisc{transition:none} }
@media print{ .transfer-surface .liveorb,.transfer-surface .livecap{display:none !important} }

/* ---- окошко помощника: перенос и размер ---- */
.transfer-surface .askgrip{position:absolute;left:0;top:0;width:22px;height:22px;cursor:nwse-resize;z-index:2;
  background:linear-gradient(135deg, var(--hairline) 0 1px, transparent 1px 4px, var(--hairline) 4px 5px, transparent 5px);
  border-top-left-radius:20px;opacity:.5}
.transfer-surface .askgrip:hover{opacity:1}
.transfer-surface .askhead{cursor:grab;touch-action:none}
.transfer-surface .askhead:active{cursor:grabbing}
.transfer-surface .askgrab{display:inline-flex;color:var(--ink-faint);opacity:.5;margin-left:2px}
.transfer-surface .askpill{touch-action:none}

/* ---- микрофон помощника: обычных микрофонов в «Столе» нет ---- */
.transfer-surface .micbtn.ai{color:var(--accent)}
.transfer-surface .micbtn.ai.busy{opacity:.7;animation:askspin 1.4s linear infinite}
@keyframes askspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- настройки помощника ---- */
.transfer-surface .aiset{display:flex;flex-direction:column}
.transfer-surface .shint{color:var(--ink-faint);font-size:12.5px;line-height:1.5;margin-top:6px}
.transfer-surface .pickrow{display:flex;flex-wrap:wrap;gap:8px}
.transfer-surface .pick{flex:1 1 190px;min-width:170px;text-align:left;padding:10px 12px;border-radius:var(--r-card);cursor:pointer;
  background:var(--glass-input);border:1px solid var(--hairline);color:var(--ink);
  display:flex;flex-direction:column;gap:3px;transition:border-color .14s ease,background .14s ease}
.transfer-surface .pick b{font-size:13px;font-weight:600}
.transfer-surface .pick i{font-style:normal;font-size:11.5px;color:var(--ink-faint);line-height:1.35}
.transfer-surface .pick:hover{border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.transfer-surface .pick.on{background:var(--accent-soft);border-color:var(--accent)}
.transfer-surface .pick.on b{color:var(--accent)}
.transfer-surface .keyrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.transfer-surface .keyname{display:inline-flex;align-items:center;gap:6px;min-width:112px;font-size:13px;color:var(--ink-soft)}
.transfer-surface .keyrow .fld{flex:1 1 200px;max-width:280px}

/* ---- кнопки в шапке: настройка ---- */
.transfer-surface .barset{display:flex;flex-direction:column;gap:14px}
.transfer-surface .barsec .barlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.transfer-surface .barchip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 9px;border-radius:999px;font-size:12.5px;
  background:var(--glass-input);border:1px solid var(--hairline);color:var(--ink)}
.transfer-surface .barchip b{font-weight:500}
.transfer-surface .barmini{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;color:var(--ink-faint);transition:background .12s ease,color .12s ease}
.transfer-surface .barmini:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.transfer-surface .barmini:disabled{opacity:.3;cursor:default}
.transfer-surface .barmini.off:hover{background:var(--crit-soft);color:var(--crit)}
.transfer-surface .baradd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}

/* =====================================================================
   Вход в приложение и раздел «Вход и безопасность» в настройках.
   Раньше дверь держал Traefik и рисовал её сам браузер, теперь она наша.
   ===================================================================== */
.transfer-surface #login{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:radial-gradient(120% 90% at 50% 0%, #2b3350, #12141d 70%);
}
.transfer-surface .loginbox{
  width:min(380px,100%);padding:30px 28px 26px;border-radius:var(--r-dlg);text-align:center;
  background:var(--glass-strong);backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--hairline);box-shadow:var(--sh-sheet), inset 0 1px 0 var(--edge);
  animation:askin .3s var(--ease-out) both;
}
.transfer-surface .loginmark{
  width:52px;height:52px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#ff6a5a,#7a8cff);box-shadow:0 6px 18px rgba(60,70,120,.3);
}
.transfer-surface .loginbox h1{margin:0;font:600 22px/1.2 var(--serif, var(--sans));letter-spacing:.01em}
.transfer-surface .loginsub{margin:6px 0 18px;color:var(--ink-faint);font-size:13px}
.transfer-surface .loginfield{display:block;text-align:left;margin-bottom:10px}
.transfer-surface .loginfield span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:4px}
.transfer-surface .loginbtn{width:100%;justify-content:center;margin-top:6px;height:40px}
.transfer-surface #login .notice{margin-top:10px}

.transfer-surface .authset{display:flex;flex-direction:column}
.transfer-surface .authgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.transfer-surface .btn.danger{background:var(--crit);color:#fff;border-color:transparent}
.transfer-surface .btn.danger:hover:not(:disabled){filter:brightness(1.06)}
.transfer-surface .btn.ghost.danger{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb, var(--crit) 35%, transparent)}
@media (max-width:700px){ .transfer-surface .authgrid{grid-template-columns:1fr} }

/* =====================================================================
   Телефон и планшет. Раскладка по образцу мобильного Asana: вкладки внизу,
   круглая кнопка «плюс» над ними, карточки и формы во весь экран, список
   писем и само письмо по очереди. До 880px считаем телефоном, 881–1180
   планшетом (боковая панель сжимается до значков). Эти правила стоят в
   самом конце файла нарочно: они должны перебивать всё, что выше.
   ===================================================================== */
@media (max-width:880px){
  .transfer-surface #app{grid-template-rows:52px 1fr auto;grid-template-columns:1fr}
  .transfer-surface #bar{grid-column:1;grid-row:1;padding:0 8px 0 6px;gap:6px;overflow:hidden}
  .transfer-surface #bar .date,.transfer-surface #bar .load,.transfer-surface #bar .flag,.transfer-surface #bar .logo{display:none}
  .transfer-surface #bar .pbtn{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-btn);color:var(--ink-soft)}
  .transfer-surface #bar .mtitle{flex:1;min-width:0;font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:2px}
  .transfer-surface #bar .tool.back{padding:6px 9px;font-size:12px;max-width:44vw;overflow:hidden;text-overflow:ellipsis}
  .transfer-surface #main{grid-row:2;grid-column:1}

  /* вкладки внизу: значок над подписью, выбранная подсвечена */
  .transfer-surface #rail{grid-row:3;grid-column:1;flex-direction:row;align-items:stretch;justify-content:space-around;gap:0;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--hairline);overflow:visible}
  .transfer-surface #rail .gap{display:none}
  .transfer-surface .rbtn{flex:1 1 0;min-width:0;height:auto;flex-direction:column;justify-content:center;gap:3px;padding:5px 2px 4px;
    border-radius:var(--r-btn);color:var(--ink-faint)}
  .transfer-surface .rbtn svg{width:22px;height:22px}
  .transfer-surface .rbtn .rlbl{flex:0 0 auto;font-size:10.5px;font-weight:500;letter-spacing:0}
  .transfer-surface .rbtn[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
  .transfer-surface .rbtn[aria-current="true"] svg{color:var(--accent)}
  .transfer-surface .rbtn .bdg{position:absolute;top:1px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;font-size:9.5px;
    background:var(--crit);color:#fff}
  .transfer-surface .rbtn[aria-current="true"] .bdg{background:var(--crit);color:#fff}
  .transfer-surface .rbtn.rhome,.transfer-surface .rbtn.rset{margin:0}
  .transfer-surface .rbtn .rav{width:22px;height:22px}

  /* разделы */
  .transfer-surface #main,.transfer-surface .view,.transfer-surface .panel{min-width:0}
  .transfer-surface .view{padding:8px;gap:8px}
  .transfer-surface .view.on.float{display:flex;flex-direction:column;overflow:hidden;padding:8px;gap:8px}
  .transfer-surface .phead{flex-wrap:wrap;gap:6px;padding:10px 10px 8px}
  .transfer-surface .phead .ptitle{font-size:15px}
  .transfer-surface .grip,.transfer-surface .gghost{display:none}
  .transfer-surface .dashbar{flex-wrap:wrap;row-gap:6px}
  .transfer-surface .dashbar input[type="date"],.transfer-surface .dashbar .minibtn.printbtn{display:none}

  /* дашборд: виджеты друг под другом, высота по содержимому */
  .transfer-surface .gcanvas{overflow:auto;margin:0;padding:0 0 84px}
  .transfer-surface .gsheet{display:flex;flex-direction:column;gap:10px;height:auto !important}
  .transfer-surface .panel.gcard{position:static;transform:none !important;width:auto !important;height:auto !important;
    min-height:0;max-height:none;flex:0 0 auto;transition:none}
  .transfer-surface .panel.gcard>.phead{cursor:default}
  .transfer-surface .panel.gcard .pbody{max-height:62vh}
  .transfer-surface .panel.gcard.wt-day{height:68vh !important}
  .transfer-surface .panel.gcard.wt-day .pbody{max-height:none}
  .transfer-surface .panel.gcard.kpicard{height:auto !important}
  .transfer-surface .kpis{flex-wrap:wrap;gap:8px;padding:10px;height:auto}
  .transfer-surface .kpis .kpi{flex:1 1 42%}
  .transfer-surface .kcol{flex:0 0 auto;max-height:none}
  .transfer-surface .kwrap{flex-direction:column}

  /* задачи: наборы полосой сверху, строки как в Asana */
  .transfer-surface .tasksplit{flex-direction:column}
  .transfer-surface .tside{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:8px 8px 6px;border-right:0;
    border-bottom:1px solid var(--hairline-soft);scrollbar-width:none}
  .transfer-surface .tside::-webkit-scrollbar{display:none}
  .transfer-surface .tsb{width:auto;white-space:nowrap;padding:6px 11px;border-radius:999px;border:1px solid var(--hairline-soft);font-size:12.5px}
  .transfer-surface .tsb .cnt{margin-left:4px}
  .transfer-surface .tsgroup,.transfer-surface .tsnew,.transfer-surface .tshint{display:none}
  .transfer-surface .tmain{padding:6px 8px 80px}
  .transfer-surface .quickrow input{font-size:16px}
  .transfer-surface .trow{padding:11px 6px;border-radius:0;border-bottom:1px solid var(--hairline-soft)}
  .transfer-surface .trow .t{font-size:15px;font-weight:500}
  .transfer-surface .trow .m{font-size:11.5px;margin-top:3px}
  .transfer-surface .check{width:20px;height:20px;border-radius:50%}
  .transfer-surface .check.big{width:26px;height:26px;border-radius:50%}
  .transfer-surface .selbox{display:none}
  .transfer-surface .selbox.on{display:grid;opacity:1}
  .transfer-surface .rowadd{opacity:.55}
  .transfer-surface .ttable{overflow-x:auto}
  .transfer-surface .tthead,.transfer-surface .ttrow{min-width:820px}
  .transfer-surface .tlist{padding-bottom:70px}

  /* почта: список писем, потом само письмо */
  .transfer-surface .mailsplit{flex-direction:column}
  .transfer-surface .mfold{flex:0 0 auto;flex-direction:row;gap:6px;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--hairline-soft);padding:8px;scrollbar-width:none}
  .transfer-surface .mfold::-webkit-scrollbar{display:none}
  .transfer-surface .fbtn{width:auto;white-space:nowrap;border-radius:999px;border:1px solid var(--hairline-soft);padding:6px 11px;font-size:12.5px}
  .transfer-surface .fgroup,.transfer-surface .fhint{display:none}
  .transfer-surface .mlist{flex:1;min-height:0;max-height:none;border-right:0;border-bottom:0}
  .transfer-surface .mtools .fld{font-size:16px}
  .transfer-surface .cask{display:none}
  .transfer-surface .cbody{padding:8px 16px 24px}
  .transfer-surface .mrows{padding:4px 4px 80px}
  .transfer-surface .mailrow{padding:10px 8px;border-radius:0;border-bottom:1px solid var(--hairline-soft)}
  .transfer-surface .mailrow .who{font-size:14px}
  .transfer-surface .mailrow .subj{font-size:13.5px}
  .transfer-surface .mquick{display:none}
  .transfer-surface .mread{display:none}
  .transfer-surface .mailsplit.reading .mfold,.transfer-surface .mailsplit.reading .mlist{display:none}
  .transfer-surface .mailsplit.reading .mread{display:flex;flex:1;min-height:0}
  .transfer-surface .mhead2{padding:10px 10px 8px}
  .transfer-surface .mhead2 .msubj{white-space:normal;font-size:16px;line-height:1.3}
  .transfer-surface .mbody2{padding:10px}
  .transfer-surface .mcompose{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .transfer-surface .mcompose .frow{flex-wrap:wrap}

  /* календарь */
  .transfer-surface .calsplit{flex-direction:column}
  .transfer-surface .calside{display:none}
  .transfer-surface .dayhead .dh{padding:6px 2px}
  .transfer-surface .dayhead .dh .dw{font-size:9px}
  .transfer-surface .dayhead .dh .dn{width:24px;height:24px;font-size:13.5px}
  .transfer-surface .dhadd{display:none}
  .transfer-surface .tgut{flex:0 0 38px}
  .transfer-surface .tgut span{right:5px;font-size:9px}
  .transfer-surface .allday{grid-template-columns:38px repeat(auto-fit,minmax(0,1fr))}
  .transfer-surface .allday .gutpad{font-size:8.5px;padding-left:3px}
  .transfer-surface .evb{padding:2px 4px;border-radius:4px}
  .transfer-surface .evb .t{font-size:10px}
  .transfer-surface .evb .s{display:none}
  .transfer-surface .mrow{min-height:64px}
  .transfer-surface .mhead .mh{font-size:10.5px;padding:7px 2px}
  .transfer-surface .mev{font-size:10.5px;padding:1px 3px;gap:4px}
  .transfer-surface .mev .tm{display:none}
  .transfer-surface .mmore{font-size:9.5px}
  .transfer-surface .ygrid{grid-template-columns:1fr 1fr;gap:8px;padding:2px}
  .transfer-surface .ymonth{padding:7px 8px 9px}

  /* заметки и настройки */
  .transfer-surface .notelist{padding-bottom:80px}
  .transfer-surface .settings{max-width:none;padding-bottom:70px}
  .transfer-surface .arow{flex-wrap:wrap;gap:8px}
  .transfer-surface .aibox .frow{flex-wrap:wrap}

  /* помощник открывается из шапки, окошко внизу справа не нужно */
  .transfer-surface .askwrap{display:none}
  .transfer-surface .askpanel{right:8px;left:8px;bottom:calc(66px + env(safe-area-inset-bottom));width:auto;max-height:min(70vh,560px)}

  /* уведомления над вкладками */
  .transfer-surface #toasts{bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100% - 24px)}
  .transfer-surface .toast{text-align:center}

  /* плавающая кнопка «плюс» над вкладками, как «New task» в Asana */
  .transfer-surface .fab{position:fixed;right:14px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:66;
    display:inline-flex;align-items:center;gap:7px;height:50px;padding:0 20px 0 16px;border-radius:999px;
    background:var(--accent);color:var(--accent-ink);font-size:14.5px;font-weight:600;
    box-shadow:0 10px 26px rgba(16,20,30,.28);transition:transform .12s var(--ease-out)}
  .transfer-surface .fab:active{transform:scale(.96)}
  .transfer-surface .fab svg{width:20px;height:20px}
}

/* ---- телефон: формы и карточки во весь экран ---- */
@media (max-width:600px){
  .transfer-surface .fld,.transfer-surface .tctitle{font-size:16px}
  .transfer-surface .fld.sm{font-size:14px}
  .transfer-surface .dlgwrap{padding:0;align-items:stretch;justify-content:stretch}
  .transfer-surface .dlg,.transfer-surface .dlg.wide{width:100%;height:100%;max-height:none;border-radius:0;border:0}
  .transfer-surface .dlg .dh{padding:12px 12px 10px calc(12px + env(safe-area-inset-left))}
  .transfer-surface .dlg .db{padding:12px}
  .transfer-surface .dlg .df{flex-wrap:wrap;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:6px}
  .transfer-surface .dlg .df .btn{flex:1 1 auto;padding:10px 10px;font-size:13px}
  .transfer-surface .dlg .df>span:first-child{flex:1 1 100%;order:-1;font-size:11.5px}
  .transfer-surface .dlg.taskcard h3,.transfer-surface .tctitle{font-size:20px}
  .transfer-surface .tcfacts{grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px}
  .transfer-surface .tcfact.wide{grid-column:1/-1}
  .transfer-surface .form .frow input[type="date"],.transfer-surface .form .frow input[type="time"],.transfer-surface .form .frow select{width:auto !important;flex:1 1 40% !important}
  .transfer-surface #sheet{left:0;top:auto;bottom:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;
    transform:translateY(100%);transition:transform 320ms var(--ease-out),opacity 200ms ease}
  .transfer-surface #sheet.on{transform:none}
  .transfer-surface .sfoot{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .transfer-surface .sfoot .btn{flex:1 1 auto;padding:10px 10px;font-size:13px}
  .transfer-surface #palwrap{padding-top:0;align-items:flex-start}
  .transfer-surface #pal{width:100%;border-radius:0 0 18px 18px;border-left:0;border-right:0;border-top:0}
  .transfer-surface #pal .res{max-height:52vh}
  .transfer-surface #ritual .card{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .transfer-surface .askpanel{inset:0;width:auto;max-height:none;border-radius:0;border:0;bottom:0 !important}
  .transfer-surface .askbody{padding:12px}
  .transfer-surface .askfoot{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .transfer-surface .menu{max-width:calc(100vw - 24px)}
  .transfer-surface .calmenu{width:min(270px,calc(100vw - 24px))}
  .transfer-surface #welcome .wcard{width:calc(100vw - 24px)}
  .transfer-surface #home .hpills{flex-wrap:wrap;justify-content:center}
  .transfer-surface #home .hhello{font-size:clamp(34px,11vw,56px)}
  .transfer-surface #home .hsub{font-size:17px}
  .transfer-surface #home .hmid{padding:0 16px 84px}
  .transfer-surface #home .hlist{width:100%}
  .transfer-surface #home .htop{gap:8px}
  .transfer-surface #home .hsearch{display:none}
  .transfer-surface #home .hsel{font-size:13px}
}

/* ---- телефон: панель главного экрана становится нижней полосой ---- */
@media (max-width:760px){
  .transfer-surface #home .hrail{display:flex;flex-direction:row;position:absolute;left:0;right:0;bottom:0;top:auto;z-index:3;
    width:auto;flex:none;height:auto;padding:8px 18px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:center;border-right:0;border-top:1px solid rgba(255,255,255,.12)}
  .transfer-surface #home .hnav{margin:0}
  .transfer-surface #home .hgap{display:none}
}

/* ---- окно «Ещё» на телефоне: остальные разделы и действия ---- */
.transfer-surface .morescrim{position:fixed;inset:0;z-index:67;background:rgba(12,14,20,.32);backdrop-filter:blur(2px)}
.transfer-surface .moresheet{position:fixed;left:0;right:0;bottom:0;z-index:68;padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  background:var(--glass-strong);backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  border-top:1px solid var(--hairline);border-radius:20px 20px 0 0;box-shadow:var(--sh-sheet);
  animation:morein .24s var(--ease-out) both}
@keyframes morein{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.transfer-surface .moresheet .mhandle{width:36px;height:4px;border-radius:99px;background:var(--hairline);margin:0 auto 10px}
.transfer-surface .moresheet .mgrid3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.transfer-surface .moreitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px 10px;
  border-radius:var(--r-panel);background:var(--glass-input);border:1px solid var(--hairline-soft);color:var(--ink-soft);
  font-size:11.5px;font-weight:500;text-align:center;min-width:0;transition:transform .12s var(--ease-out)}
.transfer-surface .moreitem:active{transform:scale(.96)}
.transfer-surface .moreitem[aria-current="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.transfer-surface .moreitem svg{width:22px;height:22px}
.transfer-surface .moreitem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.transfer-surface .moresheet .mgroup{padding:10px 4px 6px}

/* ---- планшет: панель значками, папки почты значками ---- */
@media (min-width:881px) and (max-width:1180px){
  .transfer-surface #app{grid-template-columns:62px 1fr}
  .transfer-surface #rail{align-items:center;padding:10px 6px}
  .transfer-surface .rbtn{width:46px;justify-content:center;padding:0}
  .transfer-surface .rbtn .rlbl{display:none}
  .transfer-surface .rbtn .bdg{position:absolute;top:2px;right:2px;min-width:15px;height:15px;font-size:9.5px;padding:0 4px;
    background:var(--crit);color:#fff}
  .transfer-surface .mfold{flex-basis:58px;padding:10px 6px}
  .transfer-surface .fbtn{justify-content:center;padding:9px 0}
  .transfer-surface .fbtn span,.transfer-surface .fbtn .cnt,.transfer-surface .fgroup,.transfer-surface .fhint,.transfer-surface .fbtn .tsdot{display:none}
  .transfer-surface .fbtn svg{opacity:1}
  .transfer-surface .mlist{flex-basis:300px}
  .transfer-surface .tside{flex-basis:176px}
  .transfer-surface #bar .tool{padding:7px 9px}
  .transfer-surface #bar .tool kbd{display:none}
}

/* ---- вложения в письме ---- */
.transfer-surface .matts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.transfer-surface .matt{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 10px;border-radius:var(--r-btn);font-size:12.5px;
  background:var(--glass-input);border:1px solid var(--hairline);color:var(--ink);text-decoration:none;
  transition:background 130ms ease,border-color 130ms ease}
.transfer-surface .matt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.transfer-surface .matt i{font-style:normal;font-size:11px;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.transfer-surface .matt:hover{background:var(--glass-strong);border-color:var(--accent)}}

/* ---- форма ящика IMAP в настройках ---- */
.transfer-surface .imapform{margin-top:12px;padding:14px;border-radius:var(--r-panel);background:var(--glass-input);border:1px solid var(--hairline)}
.transfer-surface .imapform .form{display:flex;flex-direction:column;gap:12px}
.transfer-surface .imapform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.transfer-surface .imapform .linkbtn{padding:0;color:var(--accent);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.transfer-surface .notice.ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:600px){ .transfer-surface .imapform .grid2{grid-template-columns:1fr} }

/* на телефоне кнопка «плюс» не должна закрывать поле ответа в письме */
@media (max-width:880px){ .transfer-surface #app:has(.mailsplit.reading) .fab{display:none} }

/* ---- телефон: кружок разговора и кнопка ИИ в шапке ---- */
@media (max-width:880px){
  .transfer-surface #bar .toolai{width:32px;height:32px;flex:0 0 32px}
  /* значок поднимаем над вкладками и кнопкой «плюс» */
  .transfer-surface .liveorb{width:56px;height:104px}
  .transfer-surface .livedisc{width:47px;height:90px;border-radius:9999px}
  .transfer-surface .livecap{display:none}
  .transfer-surface .askgrip{display:none}
  .transfer-surface .askhead{cursor:default}
  .transfer-surface .askgrab{display:none}
  .transfer-surface .pick{flex:1 1 100%}
  .transfer-surface .keyrow .fld{max-width:none}
}

/* =====================================================================
   Настройки окном, как в образце Val: слева подразделы, справа их
   содержимое. Раньше всё лежало одним длинным столбцом.
   ===================================================================== */
.transfer-surface .setwrap{position:static;background:none;padding:0;display:block}
.transfer-surface .setwin{
  position:static;transform:none;width:100%;max-width:1080px;margin:0 auto;
  height:100%;max-height:none;display:flex;flex-direction:row;overflow:hidden
}
.transfer-surface .setnav{
  width:250px;flex:0 0 250px;padding:14px 10px;overflow:auto;
  border-right:1px solid var(--pane-line);background:var(--pane-side)
}
.transfer-surface .setme{display:flex;align-items:center;gap:10px;padding:8px 10px 14px;min-width:0}
.transfer-surface .setme b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .setme span{display:block;font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .setav{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font:600 14px/1 var(--sans);color:#fff;background:linear-gradient(140deg,#8b5cf6,#d946ef)
}
.transfer-surface .setlink{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer;
  color:var(--ink-soft);font:400 13.5px/1.2 var(--sans);background:transparent;border:0;text-align:left;
  transition:background 130ms ease,color 130ms ease
}
/* карточка владельца в подразделе «Аккаунт»: крупный кружок, имя, почта */
.transfer-surface .mecard{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--r-panel);
  background:var(--glass-input);border:1px solid var(--hairline-soft)}
.transfer-surface .meav{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font:600 19px/1 var(--sans);color:#fff;background:var(--accent)}
.transfer-surface .mewho{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.transfer-surface .mewho b{font-size:15px;font-weight:600}
.transfer-surface .mewho span{font-size:12.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .setlink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .setlink.on{background:var(--accent);color:#fff}
@media (hover:hover) and (pointer:fine){.transfer-surface .setlink:not(.on):hover{background:var(--glass-strong);color:var(--ink)}}
.transfer-surface .setsep{height:1px;margin:8px 10px;background:var(--hairline-soft)}
.transfer-surface .setbody{flex:1;min-width:0;overflow:auto;padding:18px 24px 28px}
.transfer-surface .settitle{margin:0 0 14px;font:600 18px/1.2 var(--sans)}
.transfer-surface .setbody .settings{max-width:660px}

@media (max-width:880px){
  .transfer-surface .setwin{flex-direction:column}
  .transfer-surface .setnav{width:auto;flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--hairline-soft);padding:10px}
  .transfer-surface .setme,.transfer-surface .setsep{display:none}
  .transfer-surface .setlink{width:auto;white-space:nowrap;flex:0 0 auto}
  .transfer-surface .setbody{padding:14px}
}

/* На телефоне панель кнопок письма шире экрана: одной строкой она остаётся
   нарочно, поэтому даём её прокрутить вбок. Полосу прокрутки прячем. */
@media (max-width:880px){
  .transfer-surface .mbar{overflow-x:auto;scrollbar-width:none}
  .transfer-surface .mbar::-webkit-scrollbar{display:none}
}

/* =====================================================================
   Почта на телефоне один в один по снимкам Val: панель ящиков поверх
   экрана, группы карточками, письмо во весь экран с плавающей панелью.
   Правила стоят в самом конце файла нарочно: они перебивают всё выше.
   ===================================================================== */
@media (max-width:880px){
  /* ---- список идёт от края до края: ни рамки, ни скруглённой панели ---- */
  .transfer-surface .view:has(.mailpanel){padding:0}
  .transfer-surface .mailpanel{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none}
  .transfer-surface .mailsplit .mlist{border:0}
  .transfer-surface .mrows{padding:0 0 10px}
  .transfer-surface .mtools{border-bottom:0;padding:6px 12px 4px}

  /* ---- панель ящиков: слой поверх всего экрана ---- */
  .transfer-surface .mfold.sheet{position:fixed;left:0;top:0;bottom:0;z-index:70;width:min(88vw,340px);
    display:flex;flex-direction:column;gap:1px;overflow:auto;
    padding:calc(46px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom));
    background:var(--ground);border-right:1px solid var(--hairline);box-shadow:var(--sh-sheet);
    transform:translateX(-102%);transition:transform 220ms var(--ease-out);border-bottom:0}
  .transfer-surface .mfold.sheet.open{transform:none}
  .transfer-surface .mscrim{position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.45)}
  /* строка папки: значок, название, счётчик, шеврон. Подложки у строки нет */
  .transfer-surface .mfold.sheet .fline{display:flex;align-items:center;gap:0;border-radius:999px}
  .transfer-surface .mfold.sheet .fline.on{background:var(--glass-input)}
  .transfer-surface .mfold.sheet .fbtn{flex:1 1 auto;min-width:0;width:auto;white-space:normal;border:0;background:transparent;
    padding:8px 8px 8px 10px;font-size:16px;color:var(--ink);border-radius:999px}
  .transfer-surface .mfold.sheet .fline.on .fbtn,.transfer-surface .mfold.sheet .fbtn[aria-current="true"]{background:transparent;color:var(--accent);font-weight:600}
  .transfer-surface .mfold.sheet .fline.on .fico,.transfer-surface .mfold.sheet .fbtn[aria-current="true"] .fico{color:var(--accent)}
  .transfer-surface .mfold.sheet .fbtn svg{width:21px;height:21px;opacity:1}
  .transfer-surface .mfold.sheet .fico{display:flex;align-items:center;flex:0 0 auto}
  .transfer-surface .mfold.sheet .fttl{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;text-align:left}
  .transfer-surface .mfold.sheet .fttl b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .transfer-surface .mfold.sheet .fttl small{font-size:12.5px;color:inherit;opacity:.75}
  /* счётчик писем: синий кружок у правого края, как в образце */
  .transfer-surface .mfold.sheet .fbtn .cnt{min-width:23px;height:23px;padding:0 6px;display:grid;place-items:center;
    border-radius:999px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600}
  .transfer-surface .mfold.sheet .fchev{width:30px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:0;
    background:transparent;color:var(--ink-faint);cursor:pointer}
  /* папка, раскрытая по ящикам: цветная чёрточка вместо значка */
  .transfer-surface .mfold.sheet .fbtn.fsub{padding-left:42px;font-size:15px}
  .transfer-surface .mfold.sheet .fbar{flex:0 0 auto;width:3px;height:19px;border-radius:99px;margin-right:9px}
  .transfer-surface .mfold.sheet .fgroup,.transfer-surface .mfold.sheet .fhint{display:block}
  .transfer-surface .mfold.sheet .fgroup{padding:14px 10px 4px;text-transform:none;letter-spacing:0;font-weight:500;
    font-size:13.5px;color:var(--ink-faint)}
  /* синяя строка «Редактировать список» под папками */
  .transfer-surface .fedit{align-self:flex-start;margin:2px 0;padding:8px 10px 8px 41px;border:0;background:none;
    color:var(--accent);font:400 15px/1.2 var(--sans);cursor:pointer;text-align:left}
  /* ящики внизу панели: адрес и под ним имя ящика */
  /* снизу оставлено место под плавающую капсулу «Настройки», чтобы она ничего не закрывала */
  .transfer-surface .mfold.sheet .macct.bottom{margin-top:24px;padding:0 0 58px;border:0;display:flex;flex-direction:column;gap:2px}
  .transfer-surface .facct{display:flex;align-items:center;gap:11px;width:100%;padding:7px 8px 7px 10px;border:0;
    background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;text-align:left}
  .transfer-surface .facct[aria-pressed="true"]{background:var(--glass-input)}
  .transfer-surface .facctico{display:flex;align-items:center;flex:0 0 auto;color:var(--ink-soft)}
  .transfer-surface .facct .fttl b{font-size:15px;font-weight:500}
  .transfer-surface .facct .fttl small{font-size:12.5px;color:var(--ink-faint);opacity:1}
  /* «Настройки» капсулой в углу панели */
  .transfer-surface .fset{position:sticky;bottom:6px;align-self:flex-start;margin:0;padding:11px 22px;border:0;
    border-radius:999px;background:var(--glass-strong);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);box-shadow:var(--sh-pop);color:var(--ink);
    font:600 15px/1 var(--sans);cursor:pointer}
  /* пока панель открыта, круглая кнопка письма не мешается */
  .transfer-surface:has(.mfold.sheet.open) .fab{display:none}

  /* ---- шапка списка стоит самой верхней строкой: своей шапки у приложения тут нет ---- */
  /* без шапки приложения первая строка сетки не нужна: список встаёт к самому верху */
  .transfer-surface #app.baremail{grid-template-rows:0 1fr auto}
  .transfer-surface #app.baremail #main{padding-top:0}
  .transfer-surface #app.baremail .mtools{padding-top:calc(8px + env(safe-area-inset-top))}
  .transfer-surface .mhead{gap:4px;min-height:46px}
  .transfer-surface .mhead .mround,.transfer-surface .mround.plain{border:0;background:transparent;width:40px;height:40px}
  .transfer-surface .mhead .toolai{flex:0 0 auto;width:38px;height:38px}
  .transfer-surface .mboxpick b{font-size:22px;gap:3px}
  .transfer-surface .mboxpick .msub .mono{display:none}

  /* ---- группа писем это карточка: значок, название, адрес, корзина ---- */
  .transfer-surface .catcard{margin:10px 6px;border-radius:var(--r-panel);background:var(--glass-input);overflow:hidden}
  .transfer-surface .catwrap{position:relative;display:flex;align-items:center;
    margin:0;padding:0;background:transparent;
    border-bottom:1px solid var(--hairline-soft)}
  /* на телефоне кнопки группы стоят в строку: так просил Val, столбиком они высили карточку */
  .transfer-surface .catwrap .catrow{display:grid;grid-template-columns:28px 1fr;gap:2px 8px;min-height:0;
    padding:11px 12px;border-radius:0;background:transparent}
  .transfer-surface .catwrap .catrow .catico{grid-row:1/3;align-self:center}
  .transfer-surface .catwrap .cattop{font-size:17px;font-weight:600}
  .transfer-surface .catwrap .cattop .cnt{display:none}
  .transfer-surface .catacc{grid-column:2;font-size:13px;color:var(--ink-faint);max-width:none;text-align:left}
  /* на телефоне кнопки в строку и крупнее: их жмут пальцем. Шеврона тут нет,
     поэтому справа от них ничего не оставляем */
  .transfer-surface .catacts{position:static;transform:none;flex-direction:row;margin:0 0 0 10px;padding:0;gap:6px}
  .transfer-surface .catbtn{width:26px;height:26px}
  .transfer-surface .catbtn{width:26px;height:26px;background:var(--glass-strong);color:var(--ink-soft)}
  .transfer-surface .catcard .mrowwrap.incat{padding-left:0;background:transparent;border-radius:0}
  .transfer-surface .catwho{display:none}

  /* ---- строка письма: три строки, время у отрывка, полоска ящика ---- */
  .transfer-surface .mside{display:none}
  .transfer-surface .mailrow{grid-template-columns:20px 1fr auto;gap:3px 0;padding:11px 12px;border:0;border-radius:0}
  .transfer-surface .mrowwrap+.mrowwrap{margin-top:4px}
  .transfer-surface .mailrow .dot{grid-area:1/1/2/2;margin-top:8px}
  .transfer-surface .mailrow .mav{display:none}
  .transfer-surface .mailrow .who{grid-area:1/2/2/4;font-size:15.5px}
  .transfer-surface .mailrow .subj{grid-area:2/2/3/3;font-size:15.5px}
  .transfer-surface .mailrow>.cnt{grid-area:2/3/3/4;font-size:12.5px;padding:1px 9px}
  .transfer-surface .mailrow .snip{grid-area:3/2/4/3;font-size:15px}
  .transfer-surface .mailrow .when{grid-area:3/3/4/4;align-self:center;justify-self:end;padding-left:10px;
    font-family:var(--sans);font-size:14px;color:var(--ink-faint)}
  /* на телефоне из меток оставляем только чип вида письма: остальное не влезает */
  .transfer-surface .mailrow .lrow{display:flex;margin-top:1px}
  .transfer-surface .mailrow .lrow>:not(.ctag),.transfer-surface .mailrow>.acc{display:none}
  .transfer-surface .mailrow .mbar-acc{width:3px;height:15px}
  .transfer-surface .mailgrp{font:600 15px/1 var(--sans);padding:20px 12px 8px;color:var(--ink-faint)}

  /* ---- строка помощника и круглая кнопка письма внизу, как в образце ---- */
  /* строка помощника рисуется порталом в body, поэтому селектор идёт от body */
  .transfer-surface:has(.mailsplit:not(.reading)) .askwrap{display:flex;left:10px;right:74px;
    bottom:calc(68px + env(safe-area-inset-bottom));width:auto}
  .transfer-surface:has(.mailsplit:not(.reading)) .askwrap .askpill{width:100%;justify-content:flex-start;height:48px;
    border-radius:999px}
  .transfer-surface .mailpanel .askpanel,.transfer-surface .mailpanel .askpill{z-index:66}
  .transfer-surface #app:has(.mailsplit) .fab .fablbl{display:none}
  .transfer-surface #app:has(.mailsplit:not(.reading)) .fab{right:12px;bottom:calc(68px + env(safe-area-inset-bottom));
    width:48px;height:48px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .transfer-surface #app:has(.mailsplit:not(.reading)) .fab span{display:none}

  /* ---- открытое письмо: «назад», капсула, тема, панель действий ---- */
  /* строка кнопок висит над письмом: своего фона у неё нет, письмо уходит под неё
     и слегка размывается — так в образце */
  .transfer-surface .mailsplit.reading .mbar{position:sticky;top:0;z-index:8;gap:8px;min-height:56px;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
    background:transparent;border-bottom:0;overflow:visible;
    backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
  /* кнопка живого разговора правее капсулы, того же роста */
  .transfer-surface .mailsplit.reading .mbar .toolai.mbarai{flex:0 0 auto;width:44px;height:44px}
  .transfer-surface .mailsplit.reading .mbar .mseg{border:0;background:transparent;gap:0}
  .transfer-surface .mailsplit.reading .mbar .mseg button{width:44px;height:44px;border-radius:50%;background:var(--glassbtn);
    border:1px solid var(--glassedge);color:var(--glassink);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .transfer-surface .mailsplit.reading .mbar .mseg svg{stroke-width:2.2}
  .transfer-surface .mailsplit.reading .mbar .mseg button+button{display:none}   /* «выполнено» живёт внизу */
  .transfer-surface .mailsplit.reading .mbar .mpill{display:none}                /* «назначить» и «поделиться» тоже */
  /* середина панели уезжает вниз, наверху остаются булавка, молния и «назначить» */
  .transfer-surface .mailsplit.reading .mbar>.mtool,.transfer-surface .mailsplit.reading .mbar>.cmenu{display:none}
  .transfer-surface .mailsplit.reading .mbar .mtoolbar{display:inline-flex;align-items:center;gap:0;padding:0 2px;height:44px;
    border-radius:999px;background:var(--glassbtn);border:1px solid var(--glassedge);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .transfer-surface .mailsplit.reading .mbar .mtoolbar .mtool{display:grid;width:52px;height:44px}
  /* у каждой кнопки капсулы свой цвет, как в образце */
  .transfer-surface .mailsplit.reading .mtoolbar .mtool.tpin{color:#f5a524}
  .transfer-surface .mailsplit.reading .mtoolbar .mtool.tbolt{color:#3b82f6}
  .transfer-surface .mailsplit.reading .mtoolbar .mtool.ttask{color:#22c55e}
  .transfer-surface .mailsplit.reading .mtoolbar .mtool.on{background:var(--glassedge);border-radius:999px}
  .transfer-surface .mailsplit.reading .mtoolbar svg{stroke-width:1.9}
  .transfer-surface .mailsplit.reading .mbody2{padding:4px 14px calc(96px + env(safe-area-inset-bottom))}
  .transfer-surface .mailsplit.reading .mbody2 .msubj{font:700 22px/1.26 var(--sans);color:var(--ink-soft);white-space:normal;
    margin:8px 2px 0;padding-bottom:16px;border-bottom:4px solid var(--sheet-line);
    margin-left:-14px;margin-right:-14px;padding-left:16px;padding-right:16px}
  .transfer-surface .mailsplit.reading .msg{background:transparent;border:0;box-shadow:none;padding:14px 0 18px}
  .transfer-surface .mailsplit.reading .mfoot{display:none}
  /* шапка сообщения: ровный серый кружок, имя и время, ниже синяя строка «Кому» */
  .transfer-surface .mailsplit.reading .mfrom .mav{width:32px;height:32px;flex:0 0 32px;background:var(--glassbtn);
    color:var(--ink-faint);font:600 16px/1 var(--sans)}
  .transfer-surface .mailsplit.reading .mname{font-size:17px}
  .transfer-surface .mailsplit.reading .msubline{display:none}
  .transfer-surface .mailsplit.reading .mto,.transfer-surface .mailsplit.reading .maddrlink{color:var(--accent);font-size:15px}
  .transfer-surface .mailsplit.reading .maddr{font-size:14px}
  .transfer-surface .mailsplit.reading .mwhen{font-size:14px}
  .transfer-surface .mdots{width:30px;height:24px;display:grid;place-items:center;border:0;background:none;
    color:var(--ink-faint);cursor:pointer}
  /* полоса перевода в письме крупнее и глубже по цвету */
  .transfer-surface .mailsplit.reading .mtrans{padding:5px;background:var(--trans-bg)}
  .transfer-surface .mailsplit.reading .mtransgo{font:400 16px/1.2 var(--sans)}

  /* плавающая панель действий письма: матовое стекло со светлыми значками */
  .transfer-surface .mactions{position:fixed;left:10px;right:62px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:67;
    display:flex;align-items:center;justify-content:space-between;gap:0;padding:3px 8px;
    border-radius:999px;background:var(--floatbar);border:1px solid var(--glassedge);box-shadow:var(--sh-pop);
    backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
  .transfer-surface .mactions button{width:46px;height:48px;border-radius:999px;display:grid;place-items:center;
    color:var(--glassink);border:0;background:transparent}
  .transfer-surface .mactions svg{stroke-width:1.8}
  .transfer-surface .mactions button.crit{color:#ff6b5e}
  .transfer-surface .mactions button:active{background:var(--glassedge)}
  /* лист «Ещё» из того же стекла, что и панель */
  .transfer-surface .actscrim{position:fixed;inset:0;z-index:67}
  .transfer-surface .actsheet{position:fixed;left:10px;right:10px;z-index:68;
    bottom:calc(126px + env(safe-area-inset-bottom));max-height:56vh;overflow:auto;
    display:flex;flex-direction:column;padding:6px;border-radius:22px;
    background:var(--floatbar);border:1px solid var(--glassedge);box-shadow:var(--sh-pop);
    backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
  .transfer-surface .actsheet .mitem{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border:0;
    background:transparent;color:var(--glassink);font:400 16px/1.25 var(--sans);text-align:left;
    border-radius:14px;cursor:pointer;text-decoration:none}
  .transfer-surface .actsheet .mitem svg{width:21px;height:21px;flex:0 0 auto;opacity:.95}
  .transfer-surface .actsheet .mitem+.mitem{position:relative}
  .transfer-surface .actsheet .mitem+.mitem::before{content:"";position:absolute;left:49px;right:8px;top:0;height:1px;
    background:var(--glassedge)}
  .transfer-surface .actsheet .mitem:active{background:var(--glassedge)}
  /* разговор о письме: стеклянная капсула вместо «+ai» */
  .transfer-surface .maiflo{position:fixed;right:10px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:67;
    width:42px;height:81px;border-radius:999px;display:block;border:0;padding:0;overflow:hidden;
    background:transparent;box-shadow:none;cursor:pointer;
    filter:drop-shadow(0 4px 14px rgba(190,90,30,.42))}
  .transfer-surface .maiflo .orbvid{display:block;width:100%;height:100%;object-fit:fill}
}

/*
 * Лист выбора языков на телефоне это карточка снизу, а не окно во весь экран:
 * правило `.dlg{height:100%}` из мобильного блока выше растягивало и её.
 */
@media (max-width:880px){
  .transfer-surface .dlgwrap.sheetwrap{padding:0 8px calc(12px + env(safe-area-inset-bottom));align-items:flex-end;justify-content:center}
  .transfer-surface .dlgwrap.sheetwrap .dlg.tsheet{width:100%;height:auto;max-height:86vh;border-radius:var(--r-sheet);
    border:1px solid var(--hairline)}
  .transfer-surface .dlgwrap.sheetwrap .dlg.tsheet .db{flex:0 1 auto}
}

/* Shared visual language of premium-workspace-v16. Source geometry stays intact. */
/* The workspace palette must outrank the donor's OS dark-mode selectors. */
body[data-page] .transfer-surface {
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:var(--sans);--mono:var(--sans);
  --ink:var(--text);--ink-soft:var(--muted);--ink-faint:var(--dim);
  --ground:#202b33;--glass:rgba(36,48,57,.85);--glass-strong:#2b3943;--glass-input:rgba(255,255,255,.045);
  --pane-bar:#29353f;--pane-side:#27343e;--pane-list:#2b3943;--pane-content:#25323c;--pane-rail:#27343e;--pane-top:rgba(255,255,255,.025);
  --pane-line:var(--line);--hairline:var(--line);--hairline-soft:rgba(150,174,192,.08);--edge:var(--line);
  --card-solid:#2c3b47;--sheet-bg:#26343e;--sheet-card:#2c3b47;--floatbar:#354652;
  --glassbtn:rgba(255,255,255,.065);--glassedge:var(--line);--glassink:var(--text);
  --accent:#bacfcd;--accent-ink:#22343e;--accent-soft:rgba(170,199,198,.12);
  --ok:#63C295;--warn:#DAB264;--crit:#EA8B84;
  --block:#334b58;--block-line:#9cb6bd;--tbox:#414942;--tbox-line:#c0c7aa;
  --act-bg:#425b68;--act-edge:rgba(230,243,247,.2);--act-ink:#edf1f3;
  --tip-bg:#3b4d59;--tip-ink:#edf1f3;--cal-bg:var(--pane-content);
  --r-panel:18px;--r-card:14px;--r-btn:12px;--r-fld:10px;--r-sheet:24px;--r-scard:16px;
  color:var(--ink);font:14px/1.5 var(--sans);min-width:0;
}
body[data-page][data-wall-period="day"] .transfer-surface {
  --text:#172e40;--muted:#455d6d;--dim:#4b6271;--line:#203d5124;
  --ground:#e9eef1;--glass:#e9eef1;--glass-strong:#edf2f4;--glass-input:rgba(255,255,255,.55);
  --pane-bar:#e9eef1;--pane-side:#dfe7eb;--pane-list:#e9eef1;--pane-content:#edf2f4;--pane-rail:#dfe7eb;--pane-top:rgba(255,255,255,.25);
  --card-solid:#f2f5f7;--sheet-bg:#e5ecef;--sheet-card:#f2f5f7;--floatbar:#e9eef1;
  --glassbtn:rgba(255,255,255,.55);--glassedge:#203d5124;--glassink:#172e40;
  --accent:#425c6c;--accent-ink:#fff;--accent-soft:#526f7d15;
  --ok:#2C6E52;--warn:#8A6410;--crit:#A93A33;
  --block:#d8e4e9;--block-line:#6d8c9b;--tbox:#e3e7dc;--tbox-line:#7c8d68;
  --act-bg:#526f7d;--act-ink:#fff;--tip-bg:#334c5d;--tip-ink:#fff;
  --hairline-soft:#203d5110;
  color-scheme:light;
}
.transfer-surface *{box-sizing:border-box}
.transfer-surface button,.transfer-surface input,.transfer-surface textarea,.transfer-surface select{font-family:var(--sans)}
.transfer-surface #app{display:flex;flex-direction:column;position:relative;height:100%;min-height:0;overflow:visible;background:transparent;padding:0;grid-template:none}
.transfer-surface #main{display:flex;flex:1;min-height:0;margin:0;padding:0;overflow:visible;grid-area:auto}
.transfer-surface #main>.view{width:100%;min-width:0;flex:1;padding:0}
.transfer-surface #main>.view:not(.on){display:none}
.transfer-surface #main>.view.on{display:flex;flex-direction:column}
.transfer-surface .mailpanel{min-height:0;border-radius:14px;overflow:hidden}
.transfer-surface .transfer-toolbar{display:flex;align-items:center;gap:8px;min-height:38px;margin-bottom:12px;flex-shrink:0}
.transfer-surface .transfer-mode{margin-left:auto;color:var(--ink-faint);font:11px var(--sans);letter-spacing:.025em}
.transfer-surface .transfer-icon{flex-shrink:0;display:inline-block;vertical-align:middle;object-fit:contain}
.transfer-surface .transfer-icon.liquid{filter:drop-shadow(0 1px 1px #d0e9ff40)}
.transfer-surface .mitem,.transfer-surface .minibtn,.transfer-surface .pbtn,.transfer-surface .btn{letter-spacing:0;font-family:var(--sans)}
.transfer-surface .caltitle,.transfer-surface h1,.transfer-surface h2,.transfer-surface h3{font-family:var(--sans)}
.transfer-surface .fld:focus-visible,.transfer-surface button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.transfer-surface .setwrap{position:relative;inset:auto;min-height:640px;flex:1}
.transfer-surface .setwin{max-width:none;width:100%;height:100%}
.transfer-overlays{position:fixed;inset:0;min-height:0;height:100dvh;z-index:180;pointer-events:none;background:transparent;overflow:visible}
.transfer-overlays>*{pointer-events:auto}
.transfer-overlays #scrim{z-index:181}
.transfer-overlays #sheet{z-index:182}
.transfer-surface #toasts{width:max-content;max-width:min(460px,calc(100vw - 32px));gap:8px;pointer-events:none}
.transfer-surface #toasts .toast{position:static;transform:none;left:auto;right:auto;bottom:auto;width:auto;max-width:100%;white-space:normal;color:var(--ink)}
.transfer-surface #toasts .toast.bad{color:var(--crit)}
.transfer-surface .mtransgo .ailabel{background:var(--accent);color:var(--accent-ink)}
body[data-page="mail"] #view,body[data-page="calendar"] #view{min-height:0;overflow:visible}
#view #mail-calendar-root{position:fixed;height:auto;min-height:0;padding:16px;overflow:hidden}
.transfer-surface .panel{padding:0}
.transfer-surface #main>.view.float{overflow:auto}
.transfer-surface .gcanvas{margin:0;padding:0;width:100%}
.transfer-surface .mgrid>.mhead{display:grid;grid-template-columns:38px repeat(7,minmax(0,1fr));gap:0;min-height:0;border-bottom:1px solid var(--hairline)}
.transfer-surface .mrow{grid-template-columns:38px repeat(7,minmax(0,1fr))}
.transfer-surface .toolai,.transfer-surface .maiflo{background:var(--glassbtn);border:1px solid var(--glassedge);box-shadow:inset 0 1px 0 #dceaf018;color:var(--ink)}
body[data-wall-period="day"] .transfer-surface .transfer-nav-icon{filter:brightness(.5) saturate(.55)}
/* Tag hues remain in their borders; labels use the readable workspace ink. */
body[data-wall-period="day"] .transfer-surface .ltag.ctag{color:var(--ink-soft)}
body[data-wall-period="day"] .transfer-surface .fbtn[aria-current="true"] .cnt{background:transparent}
body[data-wall-period="day"] .transfer-surface :is(.mhead .mh.off,.mcell.other .mnum,.yd.off,.minid.out){opacity:1}
@media(max-width:880px){
  .transfer-surface #app{min-height:0}
  .transfer-surface .transfer-toolbar{flex-wrap:wrap;margin-bottom:8px}
  .transfer-surface .transfer-mode{font-size:10px}
  .transfer-surface .mailpanel{min-height:0}
  .transfer-surface #app.baremail{padding:0}
  .transfer-surface .setwin{min-height:650px}
  .transfer-surface .dashbar{flex-wrap:wrap}
  .transfer-surface .fab{bottom:85px;right:20px}
  #view #mail-calendar-root{padding:8px}
  .transfer-surface .mactions{left:calc(var(--rail) + 10px);right:62px}
  .transfer-surface .mactions button{width:38px;min-width:0;flex:1}
  .transfer-surface .maiflo{width:44px;height:54px;display:grid;place-items:center}
  .transfer-surface .mhead{flex-wrap:wrap}
  .transfer-surface .mhead .mtitle,.transfer-surface .mhead .mname{font-size:18px}
  body[data-page="mail"]>.assistant-trigger,body[data-page="calendar"]>.assistant-trigger{bottom:10px;height:36px;right:14px;font-size:11px}
}
@media print{
  body[data-page][data-wall-period] .transfer-surface{--text:#111;--muted:#444;--dim:#666;--ink:#111;--ink-soft:#444;--ink-faint:#666;--pane-content:#fff;--cal-bg:#fff;--block:#edf2f4;--block-line:#526f7d;--accent:#334e5c;--line:#bbb;color:#111;background:#fff}
  body>.rail,body>.app-header,body>.wallpaper,body>.atmosphere,body>.assistant-trigger,body>.assistant-panel,body>#toast{display:none!important}
  body #view{position:static!important;padding:0!important;margin:0!important;width:100%!important}
  .transfer-surface #app,.transfer-surface #main{height:auto!important;min-height:0!important}
  .transfer-overlays{display:none!important}
}

/* Calendar stage one: compact workspace, quiet outlines and a persistent sidebar. */
body[data-page="calendar"]>.app-header{display:none!important}
body[data-page="calendar"] #view #mail-calendar-root{top:12px!important;bottom:14px!important;padding:0;border-radius:14px}
body[data-page="calendar"]>.assistant-trigger{right:330px!important;bottom:20px!important}
body:not([data-page="home"]) :is(.rail-button,.assistant-trigger):hover .icon{filter:none!important}
.transfer-surface .calendar-view{overflow:hidden!important}
body[data-page="calendar"] .transfer-surface .fab{display:none!important}
.transfer-surface .calendar-topbar{display:flex;gap:10px;align-items:center;margin:0;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--pane-bar)}
.transfer-surface .calendar-date-tools{display:flex;gap:6px;align-items:center}
.transfer-surface .calendar-date-tools input{width:142px;height:30px;min-height:30px;box-sizing:border-box;padding:4px 12px;border-radius:var(--r-pill)}
.transfer-surface .calendar-date-tools>.pbtn{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--glass-input)}
.transfer-surface .calendar-mode-picker{flex:none;margin:0 10px}
.transfer-surface .calendar-mode-picker .event-choice{width:100px;height:30px;min-height:30px;padding:4px 12px;border-radius:var(--r-pill);background:var(--glass-input);font-size:13px;font-weight:500;white-space:nowrap}
.transfer-surface .calendar-mode-arrows{display:flex;flex:none;flex-direction:column;gap:2px;width:7px}
.transfer-surface .calendar-mode-arrows::before,.transfer-surface .calendar-mode-arrows::after{content:"";border-left:3px solid transparent;border-right:3px solid transparent}
.transfer-surface .calendar-mode-arrows::before{border-bottom:3px solid currentColor}
.transfer-surface .calendar-mode-arrows::after{border-top:3px solid currentColor}
.transfer-surface .event-popup.event-popup-view{padding:8px 0;border-radius:16px;font-size:14px}
.transfer-surface .event-popup-view .event-option{min-height:34px;padding:7px 12px;white-space:nowrap}
.transfer-surface .calendar-tools-space{flex:1}
.transfer-surface .calendar-live{gap:6px;min-height:32px}
.transfer-surface .calendar-live img{width:24px;height:24px;filter:none}
body[data-wall-period="day"] .calendar-live img{filter:brightness(.4)}
.transfer-surface .calendar-sidebar-toggle{display:inline-flex}
.transfer-surface .calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;flex:1;min-height:0;overflow:hidden}
.transfer-surface .calendar-main{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--pane-content)}
.transfer-surface .calendar-period{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-shrink:0;padding:16px 20px 8px;min-height:55px}
.transfer-surface .calendar-period h2{font-size:22px;font-weight:500;margin:0;letter-spacing:-.4px}
.transfer-surface .calendar-grid-body{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:auto}
.transfer-surface .calendar-grid-body>.ygrid{--year-day-size:clamp(20px,calc((100dvh - 270px)/21),33px);grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;padding:8px;align-items:stretch}
.transfer-surface .calendar-grid-body>.ygrid .ymonth{padding:8px;min-width:0}
.transfer-surface .calendar-grid-body>.ygrid .ytitle{line-height:18px;margin-bottom:4px}
.transfer-surface .calendar-grid-body>.ygrid .ydays{max-width:252px;margin-inline:auto;gap:0;grid-template-rows:14px;grid-auto-rows:var(--year-day-size)}
.transfer-surface .calendar-grid-body>.ygrid .yd{width:min(100%,var(--year-day-size));height:auto;aspect-ratio:1;border-radius:50%;justify-self:center;align-self:center}
@media screen and (hover:hover){.transfer-surface .calendar-grid-body>.ygrid .yd.today:hover{background:var(--accent);color:var(--accent-ink)}}
.transfer-surface .calendar-grid-body>.dayhead{display:flex;flex-shrink:0;margin:0;padding:10px 0 18px;border-bottom:1px solid var(--line)}
.transfer-surface .calendar-grid-body>.dayhead .dayh{flex:1;min-width:0;justify-content:center}
.transfer-surface .calendar-grid-body>.dayhead>.dh{flex-direction:row;gap:6px;border-left:0}
.transfer-surface .calendar-grid-body>.dayhead .dhadd{border-radius:50%;padding:0}
.transfer-surface .dhadd-icon{display:block;width:18px;height:18px;background:currentColor;mask:url('./icons/outline/plus.svg') center/contain no-repeat;-webkit-mask:url('./icons/outline/plus.svg') center/contain no-repeat}
.transfer-surface .calendar-grid-body>.dayhead .gutpad{width:58px;flex:none;font-size:9px;align-self:end;padding-left:9px}
.transfer-surface .calendar-grid-body>.dayhead.secondary .gutpad{width:112px;display:grid;grid-template-columns:54px 58px;padding-left:0}
.transfer-surface .calendar-zone-label{display:block;min-width:0;line-height:1.3;overflow-wrap:anywhere}
.transfer-surface .dayhead.secondary .calendar-zone-label{text-align:center}
.transfer-surface .calendar-grid-body>.tlwrap{flex:1;min-height:0;overflow:auto;display:flex;position:relative}
.transfer-surface .tgut{width:58px;flex:0 0 58px;background:var(--pane-content);position:relative;z-index:2}
.transfer-surface .secondary-gutter{width:54px;flex-basis:54px;border-right:1px solid var(--line);color:var(--ink-faint)}
.transfer-surface .tcols{display:flex;flex:1;min-width:0;position:relative}
.transfer-surface .tcol{flex:1;min-width:0;border-left:1px solid var(--hairline-soft)}
.transfer-surface .calendar-hover-line{position:absolute;left:0;right:0;z-index:5;border-top:1px dashed var(--ink-soft);pointer-events:none}
.transfer-surface .calendar-hover-line span{position:absolute;right:100%;transform:translateY(-50%);margin-right:5px;padding:2px 3px;background:var(--pane-content);font-size:11px;color:var(--ink);white-space:nowrap}
.transfer-surface .calendar-sidebar{display:flex;flex-direction:column;min-height:0;background:var(--pane-side);border-left:1px solid var(--line)}
.transfer-surface .calendar-sidebar-scroll{padding:22px 20px 12px;overflow:auto;min-height:0;flex:1}
.transfer-surface .calendar-sidebar .mini{padding:0}
.transfer-surface .calendar-sidebar .minihead{margin:0 0 23px}
.transfer-surface .calendar-sidebar .minit{font-size:19px;font-weight:500;text-transform:capitalize}
.transfer-surface .calendar-sidebar .miniwd{padding-bottom:10px}
.transfer-surface .calendar-sidebar .minirow{background:none!important}
.transfer-surface .calendar-sidebar .minid{height:33px;width:33px;margin:3px auto;border-radius:50%;font-size:13px}
.transfer-surface .calendar-sidebar .minid.today{background:var(--glassbtn);color:var(--ink)}
.transfer-surface .calendar-sidebar .minid.selected{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .calendar-side-section{margin-top:25px}
.transfer-surface .calendar-side-title{display:flex;align-items:center;gap:9px;min-height:32px;margin-bottom:10px}
.transfer-surface .calendar-side-title h3{font-size:13px;font-weight:600;flex:1;margin:0}
.transfer-surface .calendar-side-section .empty{padding:8px 0;text-align:left;font-size:12px}
.transfer-surface .calendar-side-section form>.fld{width:100%;font-size:12px;padding:10px;margin-bottom:8px}
.transfer-surface .calendar-account-title{display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%;background:none;border:0;padding:9px 0;color:var(--ink);font-size:12px}
.transfer-surface .calendar-account-title span{overflow:hidden;text-overflow:ellipsis}
.transfer-surface .calendar-check{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;line-height:1.4;cursor:pointer}
.transfer-surface .calendar-check input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;margin:0}
.transfer-surface .calendar-check i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.transfer-surface .calendar-sidebar-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-top:1px solid var(--line);padding:10px 17px;color:var(--ink-faint);font-size:11px}
.transfer-surface .calendar-text-button{display:block;padding:9px 0;background:none;border:0;color:var(--accent);text-align:left;font-size:13px}
.transfer-surface .calendar-text-button:disabled{opacity:.55;cursor:default}
.transfer-surface .calendar-drawer-wrap{position:fixed;inset:0;z-index:190;display:flex;justify-content:flex-end}
.transfer-surface .calendar-drawer-scrim{position:absolute;inset:0;background:#09101728;border:0;border-radius:0;cursor:default}
.transfer-surface .calendar-drawer,.transfer-surface .calendar-composer-wrap>.dlg{position:relative;width:430px;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--pane-side);border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:-12px 0 38px #07101b22;display:flex;flex-direction:column;animation:calendar-slide-in .24s ease-out;color:var(--ink);outline:none}
.transfer-surface .calendar-drawer-head{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line);flex-shrink:0}
.transfer-surface .calendar-drawer-head h2{font-size:20px;font-weight:500;margin:0}
.transfer-surface .calendar-drawer-body{overflow:auto;padding:24px;flex:1;min-height:0}
.transfer-surface .calendar-settings{display:flex;flex-direction:column;gap:28px}
.transfer-surface .calendar-settings section h3{font-size:14px;margin:0 0 12px}
.transfer-surface .calendar-settings .dim{font-size:12px;line-height:1.5;margin:8px 0}
.transfer-surface .calendar-field{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:10px 0}
.transfer-surface .calendar-field .fld{width:100%;min-width:0}
.transfer-surface .calendar-composer-wrap.dlgwrap{position:fixed;inset:0;display:flex;justify-content:flex-end;align-items:stretch;padding:0;background:#09101718;z-index:190}
.transfer-surface .calendar-composer-wrap .dh{padding:23px;flex-shrink:0}
.transfer-surface .calendar-composer-wrap .dh h3{font-size:20px;font-weight:500}
.transfer-surface .calendar-composer-wrap .db{flex:1;min-height:0;overflow:auto;padding:20px 24px}
.transfer-surface .calendar-composer-wrap .df{padding:16px 24px;flex-wrap:wrap;flex-shrink:0}
.transfer-surface .calendar-composer-wrap .frow{flex-wrap:wrap}
.transfer-surface .calendar-composer-wrap .form>.fcol{margin-bottom:6px}
.transfer-surface .calendar-composer-wrap .withmic>.fld{min-width:0}
@keyframes calendar-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.transfer-surface .calendar-drawer,.transfer-surface .calendar-composer-wrap>.dlg{animation:none}}
@media(max-width:1100px){
 body[data-page="calendar"]>.assistant-trigger{right:290px!important}
 .transfer-surface .calendar-layout{grid-template-columns:minmax(0,1fr) 270px}
 .transfer-surface .calendar-topbar{gap:6px;flex-wrap:wrap;padding:9px}
 .transfer-surface .calendar-sidebar-scroll{padding:18px 13px}
}
@media(max-width:760px){
 body[data-page="calendar"]>.assistant-trigger{right:14px!important;bottom:10px!important}
 body[data-page="calendar"] #view #mail-calendar-root{top:8px!important;bottom:52px!important}
 .transfer-surface .calendar-layout{display:flex;position:relative}
 .transfer-surface .calendar-main{flex:1}
 .transfer-surface .calendar-sidebar{display:flex;z-index:8}
 .transfer-surface .sidebar-open .calendar-sidebar{display:flex;position:absolute;inset:0 0 0 auto;width:min(310px,100%);z-index:8;box-shadow:-8px 0 25px #0003}
 .transfer-surface .calendar-sidebar-toggle{display:inline-flex}
 .transfer-surface .calendar-date-tools{order:4;width:100%;justify-content:flex-start;flex-wrap:wrap}
 .transfer-surface .calendar-mode-picker{margin:0 0 0 4px}
 .transfer-surface .calendar-period{padding:12px 9px;min-height:44px}
 .transfer-surface .calendar-period h2{font-size:16px}
 .transfer-surface .calendar-topbar>.minibtn{font-size:11px;padding:6px}
 .transfer-surface .calendar-topbar>.minibtn[aria-label="Создать встречу"]{font-size:0;gap:0}
 .transfer-surface .calendar-live img{width:17px;height:17px}
 .transfer-surface .calendar-grid-body .dayhead .dw{font-size:10px}
 .transfer-surface .calendar-grid-body .dayhead .dn{font-size:13px}
 .transfer-surface .calendar-composer-wrap>.dlg,.transfer-surface .calendar-drawer{width:min(430px,100vw)}
 .transfer-surface .calendar-drawer-body{padding:20px}
}
@media print{
 html,body{height:auto!important;overflow:visible!important;background:#fff!important}
 .transfer-surface .calendar-sidebar,.transfer-surface .calendar-hover-line,.transfer-surface .fab{display:none!important}
 .transfer-surface .calendar-layout{display:block;overflow:visible;height:auto!important}
 .transfer-surface .calendar-main,.transfer-surface .calendar-grid-body{overflow:visible!important;height:auto!important;display:block;background:white!important}
 .transfer-surface .calendar-grid-body>.ygrid{grid-template-columns:repeat(4,minmax(0,1fr));break-inside:avoid}
 .transfer-surface .calendar-grid-body>.tlwrap{display:flex;overflow:hidden!important;height:var(--print-h,672px)!important;max-height:none!important;min-height:0!important;flex:none!important}
 .transfer-surface .calendar-period{min-height:50px}
 .transfer-surface #main{display:block!important}
 .transfer-surface #main>.view.calendar-view.on{display:block!important;flex:none!important;width:calc(100% / var(--print-scale,1))!important}
 body[data-page="calendar"] #view #mail-calendar-root{position:static!important;inset:auto!important;width:100%!important;height:auto!important;border-radius:0!important;overflow:visible!important}
}
.transfer-surface .printing.calendar-view{height:auto!important}
.transfer-surface .printing .calendar-layout{display:block;height:auto!important;overflow:visible!important}
.transfer-surface .printing .calendar-sidebar{display:none!important}
.transfer-surface .printing .calendar-main,.transfer-surface .printing .calendar-grid-body{display:block;height:auto!important;overflow:visible!important}
.transfer-surface .printing .calendar-grid-body>.tlwrap{display:flex;overflow:hidden!important;height:var(--print-h,672px)!important;flex:none!important}

/* Shared account connections, including the main settings screen. */
.connections-surface{max-width:100%;min-width:0}.connection-settings{padding:0!important;max-width:100%}.connection-group{padding:16px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.12))}.connection-group h3{font-size:15px;margin:0 0 12px}.connection-group .frow{flex-wrap:wrap}.connection-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;min-width:0}.connection-row span{min-width:0;overflow-wrap:anywhere}.connection-row small{display:block;margin-top:5px;color:var(--ink-faint)}.connection-form{margin-top:16px}.connection-settings .crit{white-space:normal;overflow-wrap:anywhere}.connection-settings .arow{flex-wrap:wrap}.connection-settings .calendar-field{margin:12px 0}.connection-settings .grid2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.connection-settings .fld{max-width:100%}
.connection-settings .arow>div:first-child{flex:1 1 220px!important;min-width:0}.connection-settings .arow>div:first-child>div:first-child{overflow-wrap:anywhere}

/* UI-023. One shared column for calendar, editor, details and settings. */
.transfer-surface .connection-current{display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere}.transfer-surface .connection-current small{color:var(--ink-faint)}
.transfer-surface .connection-provider-buttons{display:flex;flex-direction:column;gap:2px}
.transfer-surface .calendar-notifications{gap:24px}.transfer-surface .calendar-notifications>h2{font-size:20px;margin:0}
.transfer-surface .calendar-notification-row{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;font-size:13px}
.transfer-surface .calendar-notification-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.transfer-surface .calendar-notification-row small{display:block;line-height:1.5;color:var(--ink-soft);margin-top:6px;font-size:11px}
.transfer-surface .calendar-notification-row>i{width:14px;height:14px;border-radius:3px;flex-shrink:0}.transfer-surface .calendar-notification-row>input{width:17px;height:17px;margin:0;accent-color:var(--accent);flex-shrink:0}
body{--calendar-side-width:360px;--calendar-reserved-width:var(--calendar-side-width)}
body[data-page="calendar"] #view #mail-calendar-root{top:0!important;bottom:0!important;right:0!important;border-radius:0}
body[data-page="calendar"]>.assistant-trigger{right:calc(var(--calendar-reserved-width) + 20px)!important}
.transfer-surface .calendar-view{position:relative}
.transfer-surface .calendar-topbar{margin-right:var(--calendar-reserved-width)}
.transfer-surface .calendar-layout{grid-template-columns:minmax(0,1fr) var(--calendar-reserved-width)}
.transfer-surface .calendar-sidebar{position:absolute;top:0;bottom:0;right:0;width:var(--calendar-side-width)}
.transfer-surface .calendar-sidebar-scroll{padding:20px}
.transfer-surface .calendar-side-section{margin-top:18px}
.transfer-surface .calendar-agenda .empty{height:auto!important;min-height:0!important;display:block;padding:4px 0 0!important}
.transfer-surface .calendar-side-title{margin-bottom:6px}
.transfer-surface .calendar-drawer-wrap{pointer-events:none;background:none;backdrop-filter:none}
.transfer-surface .calendar-drawer{pointer-events:auto;width:var(--calendar-side-width);box-shadow:none}
.transfer-surface .calendar-drawer-head{padding:14px 18px;gap:12px;border:0;min-height:52px}
.transfer-surface .calendar-drawer-head h2{font-size:17px;flex:1;min-width:0}
.transfer-surface .calendar-drawer-body{padding:8px 20px 20px}
.transfer-surface .event-editor-drawer .calendar-drawer-body{padding:0;display:flex;overflow:hidden}
.transfer-surface .event-editor{display:flex;flex-direction:column;flex:1;min-height:0}
.transfer-surface .event-editor-content{display:flex;flex-direction:column;gap:9px;padding:0 20px 12px;overflow:auto;flex:1;min-height:0}
.transfer-surface .event-editor-content>*{flex-shrink:0}
.transfer-surface .event-account{display:flex;align-items:center;gap:8px;padding:2px 0 9px;background:none;border:0;width:100%;font-size:13px;color:var(--ink);text-align:left}
.transfer-surface .event-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.transfer-surface .event-account i,.transfer-surface .event-color-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.transfer-surface .event-account:disabled{opacity:1}
.transfer-surface .event-title{font:inherit;font-size:19px;width:100%;padding:8px 0 12px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);outline:none;border-radius:0}
.transfer-surface .event-title:focus{border-bottom-color:var(--accent)}
.transfer-surface .event-title::placeholder,.transfer-surface .event-control::placeholder{color:var(--ink-faint);opacity:1}
.transfer-surface .event-all-day{display:flex;align-items:center;justify-content:space-between;font-size:13px;min-height:27px}
.transfer-surface .event-all-day label{display:flex;gap:10px;align-items:center;cursor:pointer}
.transfer-surface .event-all-day input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.transfer-surface .event-all-day>span{color:var(--ink-faint);font-size:12px}
.transfer-surface .event-control{width:100%;min-width:0;min-height:32px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--glass-input);color:var(--ink);font:inherit;font-size:12px;line-height:1.3;box-sizing:border-box;box-shadow:none}
.transfer-surface .event-control:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.transfer-surface .event-control:disabled{opacity:.55}
.transfer-surface .event-choice{display:flex;align-items:center;gap:6px;justify-content:space-between;text-align:left;white-space:nowrap}
.transfer-surface .event-choice span{overflow:hidden;text-overflow:ellipsis}
.transfer-surface .event-time-row{display:grid;grid-template-columns:52px 75px minmax(0,1fr);align-items:center;gap:7px;font-size:13px}
.transfer-surface .event-setting-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:8px;font-size:13px;min-height:32px}
.transfer-surface .event-setting-row>span{display:flex;align-items:center;gap:7px}
.transfer-surface .event-divider{height:1px;background:var(--line);margin:2px 0}
.transfer-surface .event-reminder-row{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.transfer-surface .event-reminder-row:last-child{margin-bottom:0}
.transfer-surface .event-add-reminder{border:1px solid var(--line);border-radius:50%;width:26px;height:26px;flex-shrink:0;padding:4px}
.transfer-surface .event-field{display:flex;flex-direction:column;gap:6px;font-size:12px;min-width:0;margin:0}
.transfer-surface .event-field>span{display:flex;align-items:center;gap:7px;font-weight:500}
.transfer-surface .event-comment{flex:1;min-height:104px}
.transfer-surface .event-comment textarea{flex:1;resize:none;min-height:80px}
.transfer-surface .event-editor-footer{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px 20px 16px;border-top:1px solid var(--line);flex-shrink:0}
.transfer-surface .event-editor-footer button{justify-content:center;min-height:35px}
.transfer-surface .event-invite-hint{font-size:10px;line-height:1.4;color:var(--ink-soft)}
.transfer-surface .event-tags{display:flex;flex-wrap:wrap;gap:4px;min-height:25px}
.transfer-surface .event-tag{display:flex;align-items:center;gap:5px;padding:4px 7px;background:var(--glass-input);border:1px solid var(--line);border-radius:5px;color:var(--ink);font-size:11px}
.transfer-surface .event-popup{position:fixed;z-index:220;max-height:min(430px,calc(100dvh - 24px));overflow:auto;padding:8px;background:var(--pane-side);border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 24px #0003;color:var(--ink);font-size:13px}
.transfer-surface .event-option{display:flex;gap:9px;align-items:center;width:100%;padding:10px 8px;min-height:36px;text-align:left;border:0;border-radius:5px;background:none;color:var(--ink);font:inherit}
.transfer-surface .event-option:hover,.transfer-surface .event-option:focus-visible{background:var(--accent-soft)}
.transfer-surface .event-option[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .event-option-check{width:16px;flex-shrink:0;display:flex}
.transfer-surface .event-option small{margin-left:auto;color:inherit;opacity:.85}
.transfer-surface .event-calendar-options{max-height:210px;overflow:auto}
.transfer-surface .event-calendar-options section>small{display:block;padding:8px;color:var(--ink-soft);overflow-wrap:anywhere}
.transfer-surface .event-palette{border-top:1px solid var(--line);margin-top:8px;padding:12px 8px 6px}
.transfer-surface .event-palette>div{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:13px}
.transfer-surface .event-palette button{width:23px;height:23px;border:2px solid transparent;border-radius:50%;padding:3px}
.transfer-surface .event-palette button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.transfer-surface .event-month-head{display:flex;align-items:center;gap:9px;padding:8px}
.transfer-surface .event-month-head strong{flex:1;font-weight:500;text-transform:capitalize}
.transfer-surface .event-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px 2px}
.transfer-surface .event-month-grid>*{text-align:center;min-width:0}
.transfer-surface .event-month-grid small{padding:8px 0;color:var(--ink-faint)}
.transfer-surface .event-month-grid button{height:33px;background:none;border:0;border-radius:7px;color:var(--ink);font-size:13px}
.transfer-surface .event-month-grid .outside{color:var(--ink-faint)}
.transfer-surface .event-month-grid .selected{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .event-time-entry{display:flex;gap:8px;padding:5px}
.transfer-surface .event-time-entry input{min-width:0;width:100%}
.transfer-surface .event-time-options{max-height:245px;overflow:auto}
.transfer-surface .event-repeat-custom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;align-items:end;font-size:10px}
.transfer-surface .event-repeat-custom input{margin-top:4px}
.transfer-surface .event-location{position:relative}
.transfer-surface .event-location-mode{display:flex;gap:8px;margin:0 0 4px;font-size:10px}.transfer-surface .event-location-mode button{padding:0;border:0;background:none;color:var(--ink-soft);font-size:10px;border-bottom:1px solid transparent}.transfer-surface .event-location-mode button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.transfer-surface .event-address-results{position:absolute;top:100%;left:0;right:0;max-height:230px;overflow:auto;background:var(--pane-side);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px #0003;z-index:4}
.transfer-surface .event-address-results button{display:block;width:100%;text-align:left;padding:9px;font-size:12px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink)}
.transfer-surface .event-address-results button:hover,.transfer-surface .event-address-results [aria-selected="true"]{background:var(--accent-soft)}
.transfer-surface .event-address-results small{display:block;padding:7px;font-size:10px;color:var(--ink-soft)}
.transfer-surface .event-place-verified{position:absolute;right:0;top:0;display:flex;gap:4px;align-items:center;color:var(--ink-soft);font-size:10px}
.transfer-surface .event-detail-account{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
.transfer-surface .event-detail-account span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .event-detail-title{font-size:22px;margin:22px 0 10px;line-height:1.2;overflow-wrap:anywhere}
.transfer-surface .event-detail-when{font-size:15px;line-height:1.5;margin:0 0 23px}
.transfer-surface .event-detail-info{display:flex;flex-direction:column;gap:20px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.transfer-surface .event-detail-info>div{display:flex;gap:12px;align-items:center;line-height:1.5;font-size:14px;overflow-wrap:anywhere}
.transfer-surface .event-detail-info .transfer-icon{flex-shrink:0}
.transfer-surface .event-detail-info a{color:var(--accent);text-decoration:none}
.transfer-surface .event-detail-guests,.transfer-surface .event-detail-notes{margin-top:23px}
.transfer-surface .event-detail-drawer h3{display:flex;align-items:center;gap:9px;font-size:14px;margin:0 0 15px}
.transfer-surface .event-guest{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;background:var(--accent-soft);font-size:11px;margin:6px 0;flex-wrap:wrap}
.transfer-surface .event-guest>span{overflow-wrap:anywhere;flex:1}
.transfer-surface .event-guest>small{font-size:10px;color:var(--ink-soft)}
.transfer-surface .event-note{margin:0 0 15px;border-bottom:1px solid var(--line);padding-bottom:12px}
.transfer-surface .event-note p,.transfer-surface .event-description{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
.transfer-surface .event-note-meta{display:flex;align-items:center;justify-content:space-between;gap:6px}
.transfer-surface .event-note small{color:var(--ink-faint);font-size:10px;line-height:1.6}
.transfer-surface .event-detail-notes textarea{min-height:95px;resize:vertical}
.transfer-surface .event-note-actions{display:flex;gap:8px;margin-top:10px}
.transfer-surface .event-delete-confirm{padding:12px;border:1px solid var(--line);border-radius:8px;font-size:12px}
.transfer-surface .event-delete-confirm .btn{font-size:11px;margin-right:6px}
@media(max-height:820px) and (min-width:761px){.transfer-surface .event-editor-content{gap:6px}.transfer-surface .event-comment{min-height:86px}.transfer-surface .event-comment textarea{min-height:65px}.transfer-surface .event-control{min-height:30px;padding:6px 8px}.transfer-surface .event-title{padding:5px 0 9px}.transfer-surface .event-editor-footer{padding-top:8px;padding-bottom:10px}}
@media(max-width:1100px){body{--calendar-side-width:340px}.transfer-surface .calendar-sidebar-scroll{padding:16px}}
@media(max-width:760px){body{--calendar-side-width:min(360px,100vw)}.transfer-surface .calendar-topbar{margin-right:0}.transfer-surface .calendar-layout{display:flex}.transfer-surface .calendar-sidebar{position:absolute}.transfer-surface .calendar-drawer{width:var(--calendar-side-width)}.transfer-surface .calendar-composer-wrap>.dlg{width:var(--calendar-side-width)}body[data-page="calendar"] #view #mail-calendar-root{bottom:52px!important}.transfer-surface .calendar-drawer-head{padding:14px 16px}.transfer-surface .event-editor-content{padding-left:16px;padding-right:16px}}
@media print{.transfer-surface .calendar-topbar{margin-right:0}.transfer-surface .calendar-drawer-wrap,.transfer-surface .event-popup{display:none!important}}
/* UI-024: event hover follows its calendar/tag color without moving the card. */
.transfer-surface :is(.adbar,.mev:not(.task),.agrow:not(.task)){
 transition:box-shadow 130ms ease,background-color 130ms ease;
}
@media screen and (hover:hover) and (pointer:fine){
 .transfer-surface :is(.evb:not(.tb):not(.moving),.adbar,.mev:not(.task),.agrow:not(.task)):hover{
  --event-hover-color:var(--tgc,var(--accent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--event-hover-color) 75%,var(--ink)),0 0 12px 3px color-mix(in srgb,var(--event-hover-color) 48%,transparent);
  filter:none;
 }
 .transfer-surface .evb:not(.tb):not(.moving):hover{z-index:7}
 .transfer-surface :is(.evb:not(.tb):not(.moving),.adbar).sel:hover{
  box-shadow:inset 0 0 0 2px var(--accent),0 0 12px 3px color-mix(in srgb,var(--event-hover-color) 48%,transparent);
 }
}
@media(max-height:760px) and (min-width:761px){
 .transfer-surface .event-editor-content{gap:4px;padding-bottom:5px}
 .transfer-surface .event-account{padding:0 0 2px;min-height:22px}
 .transfer-surface .event-title{font-size:18px;padding:4px 0 7px}
 .transfer-surface .event-all-day{min-height:24px}
 .transfer-surface .event-setting-row{min-height:28px}
 .transfer-surface .event-control{min-height:28px;padding:5px 8px}
 .transfer-surface .event-field{gap:4px}
 .transfer-surface .event-divider{margin:1px 0}
}

/* UI-025: reference-sized menus, transparent checkboxes and distinct event notes. */
.transfer-surface :is(.calendar-view,.calendar-sidebar,.calendar-drawer,.event-popup) input[type="checkbox"]{
 appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;place-items:center;flex:0 0 16px;width:16px;height:16px;margin:0;border:1px solid var(--ink-faint);border-radius:3px;background:transparent!important;box-shadow:none;cursor:pointer;color:var(--checkbox-color,var(--accent));
}
.transfer-surface :is(.calendar-view,.calendar-sidebar,.calendar-drawer,.event-popup) input[type="checkbox"]:checked{border-color:var(--checkbox-color,var(--accent))}
.transfer-surface :is(.calendar-view,.calendar-sidebar,.calendar-drawer,.event-popup) input[type="checkbox"]:checked::after{content:"";width:13px;height:13px;background:currentColor;mask:url('./icons/outline/check.svg') center/contain no-repeat;-webkit-mask:url('./icons/outline/check.svg') center/contain no-repeat}
.transfer-surface input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.transfer-surface .calendar-period.day-period:has(.tagfilter:empty),.transfer-surface .calendar-period.day-period:empty{display:none}
.transfer-surface .calendar-period.day-period{min-height:0;padding:0 16px}
.transfer-surface .calendar-period.day-period:has(> :only-child:empty){display:none}
.transfer-surface .calendar-grid-body>.dayhead.single-day{padding:17px 0;align-items:center;min-height:58px;gap:10px}
.transfer-surface .calendar-grid-body>.dayhead.single-day .gutpad{align-self:center}
.transfer-surface .dayhead.single-day h2{font-size:19px;line-height:1.35;font-weight:500;margin:0;text-transform:none}
.transfer-surface .calendar-live{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;min-height:30px;padding:5px 9px;font-size:11px;flex:none}
.transfer-surface .event-popup{padding:6px 0;border-radius:12px;background:var(--pane-side);font-size:13px;max-height:min(350px,calc(100dvh - 24px))}
.transfer-surface .event-option{min-height:32px;padding:7px 12px;border-radius:0;line-height:1.35}
.transfer-surface .event-option[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink)}
.transfer-surface .event-option-check{width:15px}
.transfer-surface .event-popup-date{padding:12px 14px;background:var(--pane-content)}
.transfer-surface .event-month-head{padding:2px 4px 10px}
.transfer-surface .event-month-head strong{font-size:16px}
.transfer-surface .event-month-grid{gap:2px;padding:0}
.transfer-surface .event-month-grid small{padding:7px 0}
.transfer-surface .event-month-grid button{height:29px;font-size:12px}
.transfer-surface .event-month-grid .today{outline:1px solid var(--accent);outline-offset:-3px;color:var(--accent)}
.transfer-surface .event-month-grid .selected{background:var(--glassbtn);color:var(--ink);font-weight:600}
.transfer-surface :is(.event-popup-time,.event-popup-duration){padding:3px 5px;background:color-mix(in srgb,var(--pane-side) 94%,var(--ink) 6%)}
.transfer-surface .event-time-options{max-height:166px;overflow:auto}
.transfer-surface .event-time-options .event-option{padding:7px 5px;gap:8px;white-space:nowrap;border-radius:15px;font-size:13px}
.transfer-surface .event-time-options .event-option small{font-size:11px;color:var(--ink-faint)}
.transfer-surface .event-popup-reminder{max-height:min(285px,calc(100dvh - 24px))}
.transfer-surface .event-palette{padding:12px 15px 10px}
.transfer-surface .event-palette>div{grid-template-columns:repeat(7,1fr);gap:12px 8px}
.transfer-surface .event-palette button,.transfer-surface .calendar-color-palette button{background:var(--swatch)!important;box-shadow:none}
.transfer-surface .event-calendar-options .event-color-dot{opacity:1;filter:none}
.transfer-surface .event-note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;padding:12px 13px;margin:0 0 14px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.transfer-surface .event-note h4{margin:0 0 8px;font-size:11px;font-weight:600;color:var(--ink-soft)}
.transfer-surface .event-note p{margin:0 0 12px;font-size:13px;line-height:1.5}
.transfer-surface .event-note.editing{border-color:var(--accent);background:var(--accent-soft)}
.transfer-surface .event-note-editor{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.transfer-surface .event-note small{display:block;font-size:10px}
.transfer-surface .event-note-inline-editor{margin-bottom:12px}
.transfer-surface .event-note-inline-editor textarea{display:block;width:100%;box-sizing:border-box;font-size:13px;line-height:1.5}
.transfer-surface .event-action-button{position:relative;overflow:visible}
.transfer-surface .event-action-tooltip{position:absolute;right:0;bottom:calc(100% + 7px);z-index:5;width:max-content;max-width:min(250px,calc(100vw - 48px));padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--tip-bg);color:var(--tip-ink);box-shadow:0 4px 14px #0002;font-size:11px;font-weight:500;line-height:1.4;white-space:normal;text-align:left;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 100ms ease}
.transfer-surface .event-action-button:is(:hover,:focus-visible):not(:disabled) .event-action-tooltip{visibility:visible;opacity:1}
.transfer-surface .event-detail-drawer .calendar-drawer-head{position:relative;z-index:2}
.transfer-surface .calendar-drawer-head .event-action-tooltip{bottom:auto;top:calc(100% + 7px)}
.transfer-surface .calendar-list-row{display:flex;align-items:center;gap:6px;min-height:36px}
.transfer-surface .calendar-list-row .calendar-check{flex:1;min-width:0;padding:7px 0}
.transfer-surface .calendar-list-row .calendar-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .calendar-color-button{opacity:0;flex:none}
.transfer-surface .calendar-list-row:hover .calendar-color-button,.transfer-surface .calendar-list-row:focus-within .calendar-color-button{opacity:1}
.transfer-surface .calendar-color-palette{display:grid;grid-template-columns:repeat(5,1fr);padding:7px;gap:7px}
.transfer-surface .calendar-color-palette button{width:32px;height:32px;border:0;border-radius:50%;color:#fff;font-size:11px;padding:0}
.transfer-surface .calendar-color-palette button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.transfer-surface .calendar-provider-link{display:inline-flex;align-items:center;gap:8px;padding:8px 0;background:transparent;border:0;color:var(--accent);font-family:inherit;font-size:13px;text-align:left;white-space:nowrap}
.transfer-surface .calendar-provider-link:hover{color:var(--ink)}
.transfer-surface .calendar-provider-link:disabled{opacity:.55;cursor:wait}
.transfer-surface .provider-logo{height:17px;width:17px;object-fit:contain;flex:none}
.transfer-surface .provider-apple{filter:invert(1)}
body[data-wall-period="day"] .transfer-surface .provider-apple{filter:none}
.transfer-surface .calendar-provider-links,.transfer-surface .connection-provider-buttons{display:flex;flex-wrap:wrap;gap:4px 18px}
.transfer-surface .event-popup-providers{border-radius:6px;padding:9px 0}
.transfer-surface .event-popup-providers .calendar-provider-link{display:flex;width:100%;padding:10px 16px}
.transfer-surface .event-popup-providers .calendar-provider-link:hover{background:var(--glassbtn)}
.transfer-surface .event-popup-providers .calendar-text-button{font-size:11px;margin:4px 16px;padding-top:10px;border-top:1px solid var(--line)}
.transfer-surface .calendar-current-account{display:flex;align-items:center;gap:9px;margin:6px 0 9px;font-size:13px;min-width:0}
.transfer-surface .calendar-current-account>span:last-child{overflow:hidden;text-overflow:ellipsis}
.transfer-surface .calendar-account-avatar{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);color:var(--ink);font-size:11px;flex:none}
.transfer-surface .calendar-settings:not(.connection-settings){gap:30px;padding-top:14px}
.transfer-surface .calendar-settings:not(.connection-settings)>section>h3{font-size:14px;font-weight:600;margin-bottom:12px}
.transfer-surface .calendar-personalize-copy{font-size:12px;line-height:1.5;margin:0;color:var(--ink-soft)}
.transfer-surface .event-unsaved-wrap{position:fixed;inset:0;z-index:250;background:#0004;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}
.transfer-surface .event-unsaved{width:min(330px,100%);padding:27px 23px;border:1px solid var(--line);border-radius:16px;background:var(--pane-content);box-shadow:0 12px 45px #0003;text-align:center}
.transfer-surface .event-unsaved-symbol{width:84px;height:84px;border-radius:50%;background:#ffab30;margin:0 auto 29px;display:grid;place-items:center}
.transfer-surface .event-unsaved-symbol .transfer-icon{filter:brightness(0) invert(1)}
.transfer-surface .event-unsaved h2{font-size:16px;margin:0 0 10px}
.transfer-surface .event-unsaved p{font-size:13px;line-height:1.4;color:var(--ink-soft);margin:0 0 25px}
.transfer-surface .event-unsaved .btn{display:flex;justify-content:center;width:100%;margin:10px 0 0;font-size:12px;min-height:35px}
@media(max-width:760px){.transfer-surface .calendar-color-button{opacity:1}.transfer-surface .dayhead.single-day h2{font-size:15px}}

/* UI-026: stable inputs, shared palettes, compact tags and an unobstructed sidebar. */
body[data-page="calendar"]>.assistant-panel{right:calc(var(--calendar-reserved-width) + 16px);left:auto;width:min(430px,calc(100vw - var(--calendar-reserved-width) - var(--rail) - 42px));bottom:70px;height:min(640px,calc(100dvh - 96px));max-height:calc(100dvh - 96px)}
.transfer-surface .calendar-sidebar-footer{justify-content:flex-end}
.transfer-surface .calendar-participants>.fld{background:var(--pane-content)!important;color:var(--ink)!important;caret-color:var(--ink);border:1px solid var(--line);box-shadow:none}
.transfer-surface .calendar-participants>.fld:focus{background:var(--pane-content)!important}
.transfer-surface :is(.calendar-participants,.event-editor) input:-webkit-autofill,
.transfer-surface :is(.calendar-participants,.event-editor) input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--pane-content) inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)}
.transfer-surface .event-editor-drawer .calendar-drawer-head h2{font-size:20px}
.transfer-surface .event-account{font-size:15px;line-height:1.4}
.transfer-surface .event-account>i{width:10px;height:10px}
.transfer-surface .event-delete-confirm{background:var(--pane-content);border-color:var(--line);padding:14px;border-radius:10px}
.transfer-surface .event-delete-confirm p{margin:0 0 12px;color:var(--ink)}
.transfer-surface .event-delete-confirm .btn.danger{background:var(--accent-soft)!important;color:var(--ink)!important;border:1px solid var(--accent);box-shadow:none}
.transfer-surface .event-delete-confirm .btn.danger:hover{background:var(--glassbtn)!important}
.transfer-surface .event-delete-confirm .btn.ghost{color:var(--ink-soft);background:transparent}
.transfer-surface .calendar-palette{padding:14px 15px 12px;border-top:1px solid var(--line);margin-top:6px}
.transfer-surface .event-popup-colors .calendar-palette{border-top:0;margin-top:0}
.transfer-surface .palette-heading{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13px;margin-bottom:16px}
.transfer-surface .palette-presets{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px 8px;align-items:center;justify-items:center}
.transfer-surface .palette-swatch,.transfer-surface .palette-more{width:25px;height:25px;min-width:0;padding:0;border:0;background:transparent!important;box-shadow:none;border-radius:50%;display:grid;place-items:center}
.transfer-surface .palette-swatch i{width:23px;height:23px;border-radius:50%;background:var(--swatch);display:grid;place-items:center;color:white}
.transfer-surface :is(.palette-swatch,.palette-tile)[aria-pressed="true"] i{outline:2px solid var(--ink-soft);outline-offset:2px}
.transfer-surface .palette-more i{width:24px;height:24px;border-radius:50%;background:conic-gradient(#ffb91b,#30b733,#00cbbb,#3985ff,#ad60eb,#ff527e,#ffb91b);mask:radial-gradient(circle,transparent 25%,black 28%);-webkit-mask:radial-gradient(circle,transparent 25%,black 28%)}
.transfer-surface .event-popup:is(.event-popup-calendar,.event-popup-colors):has(.color-browser){max-height:min(565px,calc(100dvh - 24px))}
.transfer-surface .palette-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.transfer-surface .color-browser section{margin-top:18px}
.transfer-surface .color-browser h3{font-size:13px;font-weight:500;color:var(--ink-soft);margin:0 0 12px}
.transfer-surface .palette-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 9px}
.transfer-surface .palette-tile{padding:0;min-width:0;border:0;background:none!important;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink-soft)}
.transfer-surface .palette-tile i{display:grid;place-items:center;background:var(--swatch);width:100%;aspect-ratio:1;border-radius:13px;color:white}
.transfer-surface .palette-tile span{font-size:10px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .palette-custom>div{display:flex;gap:8px;align-items:center}
.transfer-surface .palette-custom input[type="color"]{appearance:none;background:none;border:1px solid var(--line);padding:2px;width:34px;height:32px;border-radius:6px;flex:none;cursor:pointer}
.transfer-surface .palette-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.transfer-surface .palette-custom input[type="color"]::-webkit-color-swatch{border:0;border-radius:3px}
.transfer-surface .palette-custom .event-control{width:84px;font-variant-numeric:tabular-nums}
.transfer-surface .calendar-header-actions{margin-left:auto;padding-right:18px;flex:none}
.transfer-surface .dayhead.single-day h2{min-width:0}
.transfer-surface .calendar-tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.transfer-surface :is(.calendar-tag-trigger,.calendar-tag-chip){display:inline-flex;gap:6px;align-items:center;min-width:0;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink-soft);font-size:11px;line-height:1.3;padding:5px 8px;min-height:27px;white-space:nowrap}
.transfer-surface :is(.calendar-tag-trigger,.calendar-tag-chip):hover{background:var(--accent-soft);color:var(--ink)}
.transfer-surface .calendar-tag-trigger b{border-radius:4px;background:var(--accent-soft);color:var(--accent);font-size:10px;padding:1px 4px}
.transfer-surface .calendar-tag-chip{max-width:190px;background:var(--glass-input)}
.transfer-surface .calendar-tag-chip>i{width:6px;height:6px;border-radius:50%;flex:none}
.transfer-surface .calendar-tag-chip>span{overflow:hidden;text-overflow:ellipsis}
.transfer-surface .calendar-tag-search{display:flex;gap:7px;align-items:center;padding:7px 12px 10px}
.transfer-surface .calendar-tag-options{max-height:190px;overflow:auto}
.transfer-surface .calendar-tag-options .dim{padding:5px 14px;font-size:12px}
.transfer-surface .calendar-tag-options .event-option>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .calendar-tag-checkbox{width:15px;height:15px;flex:none;border:1px solid var(--ink-faint);border-radius:3px;display:grid;place-items:center;color:var(--accent)}
.transfer-surface .calendar-tag-options [aria-pressed="true"] .calendar-tag-checkbox{border-color:var(--accent)}
.transfer-surface .calendar-tag-options [aria-pressed="true"]{background:var(--accent-soft)}
.transfer-surface .calendar-tag-create{border-top:1px solid var(--line);padding:12px}
.transfer-surface .calendar-tag-create strong{display:block;font-size:12px;overflow-wrap:anywhere;font-weight:500}
.transfer-surface .calendar-tag-colors{display:flex;justify-content:space-between;gap:6px;margin:12px 0}
.transfer-surface .calendar-tag-colors button{width:21px;height:21px;border-radius:50%;border:0;display:grid;place-items:center;padding:0;color:white}
.transfer-surface .calendar-tag-colors button[aria-pressed="true"]{outline:1px solid var(--ink);outline-offset:2px}
.transfer-surface .calendar-tag-footer{padding:6px 12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.transfer-surface .calendar-tag-footer .calendar-text-button{font-size:11px}
.transfer-surface .event-popup-tags{max-height:min(470px,calc(100dvh - 24px))}
@media(max-width:760px){
 body[data-page="calendar"]>.assistant-panel{right:10px;left:calc(var(--rail) + 10px);width:auto;bottom:64px;height:calc(100dvh - 88px)}
 .transfer-surface .calendar-header-actions{padding-right:8px}
 .transfer-surface .calendar-grid-body>.dayhead.single-day{gap:6px;flex-wrap:wrap}
 .transfer-surface .dayhead.single-day h2{font-size:15px;flex:1}
 .transfer-surface .calendar-tag-filter .calendar-tag-trigger{font-size:0;gap:0;padding:6px}
 .transfer-surface .calendar-tag-filter .calendar-tag-trigger b{font-size:10px;margin-left:3px}
}
@media(max-height:760px) and (min-width:761px){.transfer-surface .event-editor-content{gap:3px}}

/* UI-031: home navigation and a collapsible right sidebar. */
.transfer-surface .calendar-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;overflow:visible}
.transfer-surface .calendar-home-button{border:1px solid var(--line);border-radius:50%;background:var(--glass-input)}
.transfer-surface .calendar-period h2{flex:1;min-width:0}
.transfer-surface .calendar-button-tooltip{position:absolute;top:calc(100% + 7px);right:0;z-index:30;width:max-content;max-width:240px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--tip-bg);color:var(--tip-ink);font-size:11px;font-weight:400;line-height:1.4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 100ms ease}
.transfer-surface .calendar-home-button .calendar-button-tooltip{right:auto;left:0}
.transfer-surface .calendar-icon-button:is(:hover,:focus-visible) .calendar-button-tooltip{opacity:1;visibility:visible}
.transfer-surface .calendar-sidebar{transform:translateX(0);visibility:visible;transition:transform 260ms cubic-bezier(.22,.68,0,1),visibility 0s}
.transfer-surface .sidebar-collapsed .calendar-sidebar{transform:translateX(100%);visibility:hidden;pointer-events:none;transition:transform 260ms cubic-bezier(.22,.68,0,1),visibility 0s 260ms}
.transfer-surface .calendar-layout{transition:grid-template-columns 260ms cubic-bezier(.22,.68,0,1)}
.transfer-surface .calendar-topbar{transition:margin-right 260ms cubic-bezier(.22,.68,0,1)}
@media(max-width:1240px){
 .transfer-surface .calendar-topbar{flex-wrap:wrap}
 .transfer-surface .calendar-date-tools{order:4;width:100%;flex-wrap:wrap}
}
@media(min-width:761px){
 body[data-page="calendar"]:has(.calendar-view.sidebar-collapsed):not(:has(.calendar-drawer-wrap)){--calendar-reserved-width:0px}
}
@media print{.transfer-surface .calendar-home-button{display:none}}

/* UI-035: quick tasks share the calendar's day and month indicators. */
.transfer-surface .dhadd:is(:hover,:focus-visible) .calendar-button-tooltip{opacity:1;visibility:visible}
.transfer-surface .dayhead>.dh:nth-of-type(2) .dhadd .calendar-button-tooltip{left:0;right:auto}
.transfer-surface .dhadd[aria-expanded="true"]{opacity:1}
.transfer-surface .calendar-quick-task{padding:12px;display:flex;flex-direction:column;gap:10px;font-size:12px}
.transfer-surface .calendar-quick-task header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.transfer-surface .calendar-quick-task time{color:var(--ink-soft);font-size:11px}
.transfer-surface .calendar-quick-task label{font-size:11px;color:var(--ink-soft);margin-bottom:-5px}
.transfer-surface .calendar-quick-task .fld{width:100%;font-size:13px}
.transfer-surface .calendar-quick-task footer{display:flex;align-items:center;gap:6px}
.transfer-surface .calendar-quick-task footer>span{flex:1;color:var(--ink-faint);font-size:10px}
.transfer-surface .calendar-quick-task .minibtn{padding:6px 9px;font-size:11px}
.transfer-surface .calendar-quick-task-error{font-size:11px;color:var(--ink);margin:0;padding:8px;border-left:2px solid var(--accent)}
.transfer-surface .calendar-task-strip{display:grid;flex:none;border-bottom:1px solid var(--line);background:var(--pane-bar);max-height:32vh;overflow:auto}
.transfer-surface .calendar-task-label{padding:12px 6px;color:var(--ink-faint);font-size:9px}
.transfer-surface .calendar-task-day{min-width:0;min-height:40px;padding:0 8px;display:flex;flex-direction:column}
.transfer-surface .calendar-day-task{display:flex;gap:9px;align-items:center;flex:none;min-height:40px;border-bottom:1px solid var(--line);color:var(--ink);font-size:12px;text-align:left}
.transfer-surface .calendar-day-task:last-child{border-bottom:0}
.transfer-surface .calendar-day-task .tk-check{margin:0}
.transfer-surface .calendar-task-title{padding:9px 0;flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.transfer-surface .calendar-tasks-more{flex:none;display:flex;align-items:center;gap:7px;padding:8px 0 8px 8px;color:var(--accent);font-size:12px;white-space:nowrap}
.transfer-surface .calendar-tasks-more.collapse{align-self:flex-start;padding-left:0;min-height:36px}
.transfer-surface .calendar-task-drop-hint{font-size:10px;color:var(--ink-faint);padding:12px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.transfer-surface .calendar-task-day.is-drop-target{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.transfer-surface .evb.tb .t{display:flex;align-items:center;gap:6px}
.transfer-surface .evb.tb .t>span{overflow:hidden;text-overflow:ellipsis}
.transfer-surface .evb.tb .tk-check{width:15px;height:15px;min-width:15px;margin:0;border-color:currentColor}
.transfer-surface .mev.task .box,.transfer-surface .agrow.task .bar{width:13px;height:13px;min-height:13px;flex:0 0 13px;border:1.4px solid var(--tgc,var(--accent));border-radius:50%;background:transparent;align-self:center}
@media(hover:hover){.transfer-surface .calendar-day-task:hover{background:var(--accent-soft)}}
@media(max-width:650px){.transfer-surface .calendar-task-day{padding:0 4px}.transfer-surface .calendar-day-task{gap:6px;font-size:11px}.transfer-surface .calendar-tasks-more{font-size:11px}}
@media(prefers-reduced-motion:reduce){.transfer-surface :is(.calendar-sidebar,.calendar-layout,.calendar-topbar){transition:none}}
@media print{.transfer-surface .calendar-grid-body>.ygrid{--year-day-size:22px}.transfer-surface .calendar-task-day{max-height:none;overflow:visible}}

/* UI-036: the shell's assistant is outside transfer-surface, so give it the calendar's daylight palette. */
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel{
 --text:#172e40;--muted:#455d6d;--dim:#4b6271;--line:#203d5124;--accent:#425c6c;--accent-rgb:66,92,108;
 color:var(--text);color-scheme:light;border-color:var(--line);background-color:transparent;
 background-image:linear-gradient(145deg,rgba(255,255,255,var(--chat-gloss,0)),transparent 38%,rgba(255,255,255,var(--chat-matte-tint,0))),linear-gradient(145deg,rgba(237,242,244,var(--chat-alpha-top,.9)),rgba(223,231,235,var(--chat-alpha-bottom,.88)));
 box-shadow:inset 0 1px 0 #ffffffb3,0 18px 55px #203d5126,0 3px 12px #203d5112;text-shadow:none;
}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.assistant-title,.chat-intro h2,.chat-message,.chat-history-title,.chat-history h2){color:var(--text);text-shadow:none}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.assistant-heading small,.chat-intro>p:last-child,.assistant-demo,.chat-history-preview,.chat-history-empty,.suggestions button,.icon-button){color:var(--muted)}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.chat-history-item time,.chat-key-hint,.demo-footnote,.chat-eyebrow){color:var(--dim)}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.chat-messages,.chat-history){text-shadow:none;scrollbar-color:#425c6c44 transparent}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.assistant-mark,.intro-mark,.assistant-demo,.suggestions button,.chat-history-item){background:#ffffff59;border-color:var(--line);box-shadow:none}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel .intro-mark .icon{filter:none}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel .chat-message.user{background:#526f7d12;border-color:var(--line);box-shadow:none}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel .chat-message.bot{border-color:#526f7d70}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel :is(.icon-button:hover,.icon-button:focus-visible,.icon-button[aria-expanded="true"],.suggestions button:hover,.chat-history-item:hover,.chat-history-item[aria-current="true"]){background:#526f7d15;border-color:#425c6c55;color:var(--text)}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel #chat-form{background:#ffffff8c;border-color:var(--line);box-shadow:inset 0 1px 2px #203d5108}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel #chat-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #526f7d15}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel #chat-input{color:var(--text)}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel #chat-input::placeholder{color:var(--dim)}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel button.icon-button.chat-send{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff26}
body[data-page="calendar"][data-wall-period="day"]>.assistant-panel button.icon-button.chat-send:hover{background:#354c5c;border-color:#354c5c}

/* TASKS-037. Donor layout, shared v16 palette and outline icons. */
body[data-page="tasks"] #view{min-height:0;overflow:visible}
body[data-page="tasks"] .transfer-surface{--pane-glow:transparent;--r-panel:18px;--r-btn:12px;--r-card:14px}
body[data-page="tasks"] .transfer-surface .tasks-view>.panel{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--pane-content);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 36px #06162212}
body[data-page="tasks"] .transfer-surface .tasks-view .phead{background:var(--pane-bar);border-bottom:1px solid var(--line);box-shadow:none}
body[data-page="tasks"] .transfer-surface .tasks-view .pbody{min-height:0;flex:1}
body[data-page="tasks"] .transfer-surface .tmain{background:var(--pane-content);min-height:0}
body[data-page="tasks"] .transfer-surface .tside{background:var(--pane-side)}
body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow,.kcard){background:transparent;box-shadow:none;color:var(--ink)}
body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow){border-color:var(--hairline-soft)}
body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow).done{opacity:1;color:var(--ink-faint)}
body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow).done .t{color:var(--ink-faint)}
body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow).hi{background:var(--accent-soft);outline:1px solid var(--accent);outline-offset:-1px}
body[data-page="tasks"] .transfer-surface :is(.ttgroup,.tthead,.donehead){background:var(--pane-bar);color:var(--ink-soft)}
body[data-page="tasks"] .transfer-surface :is(.check,.selbox){background:transparent;border-color:var(--ink-faint)}
body[data-page="tasks"] .transfer-surface :is(.check,.selbox) .transfer-icon{opacity:0}
body[data-page="tasks"] .transfer-surface :is(.check[aria-checked="true"],.selbox.on) .transfer-icon{opacity:1}
body[data-page="tasks"] .transfer-surface :is(.twist,.ttgt,.donehead)[aria-expanded="true"]>.transfer-icon{transform:rotate(90deg)}
body[data-page="tasks"] .transfer-surface .quickrow>.micbtn{position:static;flex-shrink:0}
body[data-page="tasks"] .transfer-surface .quickrow>input{flex:1;min-width:0}
body[data-page="tasks"] .transfer-surface :is(.check[aria-checked="true"],.selbox.on){background:var(--accent);border-color:var(--accent)}
body[data-page="tasks"] .transfer-surface :is(.check[aria-checked="true"],.selbox.on) .transfer-icon{filter:brightness(0) invert(1)}
body[data-page="tasks"][data-wall-period="evening"] .transfer-surface :is(.check[aria-checked="true"],.selbox.on) .transfer-icon{filter:brightness(.2)}
body[data-page="tasks"] .transfer-surface :is(.menu,.dlg,.sheet){background:var(--sheet-bg);color:var(--ink);border-color:var(--line)}
body[data-page="tasks"] .transfer-surface .taskcard :is(.dh,.df){background:var(--pane-bar);border-color:var(--line)}
body[data-page="tasks"] .transfer-surface :is(.taskcard .db,.tcfacts,.tcsec){background:transparent}
body[data-page="tasks"] .transfer-surface .taskcard .fld{color:var(--ink);background:var(--glass-input);border-color:var(--line)}
body[data-page="tasks"] .transfer-surface .tctitle{color:var(--ink);font-family:var(--sans)}
body[data-page="tasks"] .transfer-surface .tg{color:var(--ink-soft)}
body[data-page="tasks"] .transfer-surface :is(.batchbar,.tsnew){background:var(--pane-bar);color:var(--ink);border-color:var(--line)}
body[data-page="tasks"] .transfer-surface .kcol{background:var(--pane-side);border:1px solid var(--line);border-radius:14px}
body[data-page="tasks"] .transfer-surface .kcard{background:var(--pane-content);border:1px solid var(--line);border-radius:12px}
body[data-page="tasks"] .transfer-surface .transfer-icon{filter:none}
body[data-page="tasks"][data-wall-period="day"] .transfer-surface .transfer-nav-icon{filter:brightness(.5) saturate(.55)}
@media(hover:hover){
  body[data-page="tasks"] .transfer-surface :is(.trow,.ttrow,.kcard):hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
}
@media(max-width:880px){
  body[data-page="tasks"] .transfer-surface .tasks-view .phead{align-items:flex-start;flex-wrap:wrap;gap:8px}
  body[data-page="tasks"] .transfer-surface .tsnew{min-width:220px}
  body[data-page="tasks"] .transfer-surface .tmain{padding-bottom:44px}
  body[data-page="tasks"]>.assistant-trigger{bottom:10px;height:36px;right:14px;font-size:11px}
}

/* TASKS-038. Task workspace and calendar-sized inspector. */
body[data-page="tasks"]>.app-header{display:none!important}
body[data-page="tasks"] #view #mail-calendar-root{top:12px!important;bottom:14px!important;padding:0;border-radius:14px}
body[data-page="tasks"] .transfer-surface .fab{display:none!important}
.transfer-surface .tk-workspace{display:flex;flex:1;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--pane-content)}
.transfer-surface .tk-sidebar{width:220px;flex:none;padding:22px 10px;background:var(--pane-side);overflow-y:auto;border-right:1px solid var(--line)}
.transfer-surface .tk-sidebar h2{font-size:19px;margin:0 10px 22px;font-weight:550}
.transfer-surface .tk-bucket{display:flex;width:100%;align-items:center;gap:10px;padding:10px;border-radius:9px;font-size:13px;text-align:left;color:var(--ink-soft)}
.transfer-surface .tk-bucket span{flex:1}.transfer-surface .tk-bucket small{font-size:11px;color:var(--ink-faint)}
.transfer-surface :is(.tk-bucket[aria-current="page"],.tk-list-item.active){background:var(--accent-soft);color:var(--ink)}
.transfer-surface .tk-sidebar-heading{display:flex;align-items:center;justify-content:space-between;color:var(--ink-faint);font-size:11px;margin:27px 8px 10px}
.transfer-surface .tk-list-item{position:relative;display:flex;align-items:center;min-height:38px;border-radius:8px;margin:2px 0}
.transfer-surface .tk-list-select{display:flex;align-items:center;gap:9px;width:100%;text-align:left;min-width:0;padding:9px 10px;font-size:12px}
.transfer-surface .tk-list-select>i,.transfer-surface .tk-project-dot,.transfer-surface .tk-project-heading i{width:9px;height:9px;border-radius:3px;flex:none}
.transfer-surface .tk-list-select>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.transfer-surface .tk-list-select small{color:var(--ink-faint)}
.transfer-surface .tk-list-actions{display:flex;position:absolute;right:4px;opacity:0;pointer-events:none;background:var(--pane-side);border-radius:7px}
.transfer-surface .tk-list-item:is(:hover,:focus-within) .tk-list-actions{opacity:1;pointer-events:auto}
.transfer-surface .tk-list-item:is(:hover,:focus-within) .tk-list-select{padding-right:64px}
.transfer-surface .tk-list-item:is(:hover,:focus-within) .tk-list-select small{visibility:hidden}
.transfer-surface .tk-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.transfer-surface .tk-toolbar{display:flex;align-items:center;gap:14px;flex:none;min-height:62px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--pane-bar)}
.transfer-surface .tk-toolbar>strong{font-size:15px;max-width:220px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:500}
.transfer-surface .tk-modes{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:20px;background:var(--glass-input)}
.transfer-surface .tk-modes button{padding:5px 13px;border-radius:20px;color:var(--ink-faint);font-size:12px}
.transfer-surface .tk-modes button[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft)}
.transfer-surface .tk-spacer{flex:1;min-width:0}
.transfer-surface .tk-live{display:flex;align-items:center;gap:7px;font-size:13px;flex:none}.transfer-surface .tk-live img{width:24px;height:24px}
body[data-wall-period="day"] .transfer-surface .tk-live img{filter:brightness(.4)}
.transfer-surface .tk-create{display:grid;place-items:center;padding:0;line-height:0;background:var(--accent-soft);border:1px solid var(--line);width:35px;height:35px;border-radius:50%;flex:none}
.transfer-surface .tk-filterbar{display:flex;align-items:center;gap:14px;min-height:43px;padding:5px 20px;border-bottom:1px solid var(--hairline-soft);font-size:12px;flex-wrap:wrap}
.transfer-surface .tk-filterbar .event-choice{width:auto;min-width:110px;height:28px;min-height:28px;border:0;background:transparent;font-size:12px}
.transfer-surface .tk-search{display:flex;align-items:center;gap:9px;max-width:230px;flex:1}
.transfer-surface .tk-search input{background:none;border:0;outline:none;min-width:0;width:100%;padding:5px 0;font-size:12px;color:var(--ink)}
.transfer-surface .tk-board{display:flex;align-items:flex-start;gap:16px;overflow:auto;flex:1;min-height:0;padding:20px}
.transfer-surface .tk-column{flex:0 0 clamp(235px,24%,340px);min-width:0}
.transfer-surface .tk-section-head{display:flex;align-items:center;gap:3px;min-height:43px;margin-bottom:8px;color:var(--ink)}
.transfer-surface .tk-section-head>button:first-child{display:flex;flex:1;align-items:center;gap:10px;text-align:left;min-width:0;padding:10px 13px;font-size:13px}
.transfer-surface .tk-section-head strong{font-weight:550;flex:1;min-width:0}.transfer-surface .tk-section-head span{color:var(--ink-faint);font-size:12px}
.transfer-surface .tk-section-head>.tk-icon-btn{opacity:0}.transfer-surface .tk-section-head:is(:hover,:focus-within)>.tk-icon-btn{opacity:1}
.transfer-surface .tk-column .tk-section-head{background:var(--pane-side);border-radius:9px}
.transfer-surface .tk-column .tk-section-body{padding:10px;background:var(--pane-side);border-radius:9px;min-height:60px}
.transfer-surface .tk-card{padding:17px 15px;margin-bottom:9px;min-height:135px;background:var(--card-solid);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px #08172405;cursor:grab}
.transfer-surface .tk-card-title{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.transfer-surface .tk-card-title .tk-task-name{flex-basis:calc(100% - 35px);font-size:13px;line-height:1.6}
.transfer-surface .tk-card.done{color:var(--ink-faint)}.transfer-surface .tk-card.done .tk-card-meta{opacity:.65}
.transfer-surface .tk-card-parent{display:flex;gap:4px;align-items:center;font-size:11px;color:var(--ink-faint);margin:0 0 9px 25px}
.transfer-surface .tk-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:17px 0}
.transfer-surface .tk-card-foot{display:flex;justify-content:space-between;align-items:center;min-height:20px;font-size:11px;color:var(--ink-faint)}
.transfer-surface .tk-card-foot button{text-align:left}
.transfer-surface .tk-check{display:grid;place-items:center;width:18px;height:18px;min-width:18px;flex:none;padding:0;border:1.3px solid var(--ink-faint);border-radius:50%;background:none;margin-top:2px}
.transfer-surface .tk-check img{opacity:0}.transfer-surface .tk-check.done{border-color:var(--ok);background:var(--ok)}.transfer-surface .tk-check.done img{opacity:1;filter:brightness(0) invert(1)!important}
.transfer-surface .tk-task-name{text-align:left;min-width:0;white-space:normal;overflow-wrap:anywhere;flex:1;font-size:13px;padding:0}
.transfer-surface .tk-task-name small{color:var(--ink-faint);font-size:11px;margin-left:6px}
.transfer-surface .tk-count{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-size:11px;color:var(--ink-faint)}
.transfer-surface .tk-project-chips{display:flex;gap:4px;flex-wrap:wrap;min-width:0;max-width:100%}
.transfer-surface .tk-project-chip{display:inline-flex;gap:5px;align-items:center;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:21px;padding:0 5px;background:var(--accent-soft);border-radius:4px;color:var(--ink-soft)}
.transfer-surface .tk-project-chip i{width:10px;height:10px;flex:none;border-radius:3px}
.transfer-surface .tk-priority{font-size:11px;padding:2px 6px;border-radius:4px;background:var(--accent-soft)}.transfer-surface .tk-priority.high{background:#b44a4224;color:var(--crit)}.transfer-surface .tk-priority.medium{background:#c8913624;color:var(--warn)}
.transfer-surface :is(.tk-add-row,.tk-add-section){display:flex;align-items:center;gap:7px;padding:12px 10px;font-size:13px;white-space:nowrap;color:var(--ink-faint);text-align:left}
.transfer-surface .tk-add-row{width:100%;border-radius:8px}.transfer-surface .tk-add-section{min-width:180px;height:43px}
.transfer-surface .tk-table-scroll{overflow:auto;flex:1;min-height:0;padding:0 20px 25px}
.transfer-surface .tk-table-head,.transfer-surface .tk-table-row{display:grid;grid-template-columns:minmax(300px,2.8fr) 170px 140px 200px 145px 110px 44px;min-width:1110px;border-bottom:1px solid var(--line)}
.transfer-surface .tk-table-head{position:sticky;top:0;z-index:1;min-height:38px;align-items:center;color:var(--ink-faint);background:var(--pane-content);font-size:11px}
.transfer-surface .tk-table-head>span{padding:9px 10px;border-right:1px solid var(--line)}
.transfer-surface .tk-table-section{min-width:1110px;margin-bottom:16px}.transfer-surface .tk-table-section .tk-section-head{margin:0;min-height:49px}
.transfer-surface .tk-table-section .tk-section-head>button:first-child{flex:none}.transfer-surface .tk-table-section .tk-add-row{padding:11px 38px}
.transfer-surface .tk-table-row{min-height:43px;align-items:stretch;font-size:12px}
.transfer-surface .tk-table-row>div,.transfer-surface .tk-project-cell{display:flex;align-items:center;padding:5px 9px;border-right:1px solid var(--hairline-soft);min-width:0;text-align:left}
.transfer-surface .tk-table-row.done .tk-task-name{color:var(--ink-faint);text-decoration:line-through}
.transfer-surface .tk-name-cell{gap:8px}.transfer-surface .tk-name-cell>input{width:12px;height:12px;opacity:0;flex:none}.transfer-surface .tk-table-row:is(:hover,:focus-within) .tk-name-cell>input,.transfer-surface .tk-name-cell>input:checked{opacity:1}
.transfer-surface .tk-table-row .event-choice{font-size:11px;min-height:26px;border:0;background:transparent;padding:2px;width:100%}
.transfer-surface .tk-table-row .tk-date{font-size:11px;white-space:nowrap;flex-wrap:nowrap;max-width:100%;min-width:0}.transfer-surface .tk-table-row .tk-date-label{overflow:hidden;text-overflow:ellipsis;min-width:0}.transfer-surface .tk-date>img{flex:none}
.transfer-surface .tk-legacy-table{overflow:auto;flex:1;min-height:0}
.transfer-surface .tk-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;flex:none;border-radius:7px;color:var(--ink-soft)}
.transfer-surface .tk-icon-btn.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
.transfer-surface :is(.tk-text-btn,.tk-menu-item){text-align:left;color:var(--ink-soft);font-size:12px}
.transfer-surface .tk-text-btn{padding:5px 0}
.transfer-surface .tk-primary{padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:12px;line-height:1.4}
.transfer-surface .tk-error{color:var(--crit);padding:10px 16px;font-size:12px;white-space:normal;flex:none}
.transfer-surface .tk-muted{color:var(--ink-faint);font-size:11px;line-height:1.6}.transfer-surface .tk-danger,.transfer-surface .overdue{color:var(--crit)}
.transfer-surface .tk-pop-content{display:flex;flex-direction:column;gap:10px;padding:12px;max-height:min(660px,85dvh);overflow:auto;font-size:12px}
.transfer-surface .tk-pop-content strong{font-size:13px;font-weight:550}.transfer-surface .tk-pop-content small{font-size:10px;color:var(--ink-faint);line-height:1.6}
.transfer-surface .tk-pop-content hr{border:0;border-top:1px solid var(--line);width:calc(100% + 24px);margin:2px -12px}
.transfer-surface .tk-menu-item{display:flex;gap:9px;align-items:center;padding:8px;border-radius:6px;min-height:34px;width:100%;overflow-wrap:anywhere}
.transfer-surface .tk-pop-content .event-control{width:100%;font-size:12px}.transfer-surface .tk-pop-content form{display:flex;flex-direction:column;gap:10px}
.transfer-surface .tk-inline{display:flex;align-items:center;gap:8px}.transfer-surface .tk-inline>span:not(.tk-avatar){flex:1;min-width:0;overflow-wrap:anywhere}
.transfer-surface .tk-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--ink-soft);font-size:10px}
.transfer-surface .tk-person{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;text-align:left;padding:3px 0}.transfer-surface .tk-person>span:not(.tk-avatar){overflow-wrap:anywhere}
.transfer-surface .tk-person.compact{min-width:23px}.transfer-surface .tk-person.compact>img{opacity:.6}
.transfer-surface .tk-date{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--ink-soft);font-size:12px;text-align:left;padding:4px 0}
.transfer-surface .tk-date-picker{padding:12px;font-size:12px;max-height:85dvh;overflow:auto}
.transfer-surface .tk-date-inputs{display:flex;gap:8px;margin-bottom:9px}.transfer-surface .tk-date-inputs label{flex:1;min-width:0;font-size:10px;color:var(--ink-faint)}
.transfer-surface .tk-date-inputs .event-control{width:100%;min-width:0;font-size:11px;padding:5px;margin-top:4px}
.transfer-surface .tk-popup-footer{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.transfer-surface .tk-popup-footer>.tk-text-btn{margin-left:auto}
.transfer-surface .tk-repeat{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}.transfer-surface .tk-repeat .event-choice{font-size:12px}
.transfer-surface .tk-weekdays{display:flex;justify-content:space-between;margin-top:7px}.transfer-surface .tk-weekdays label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px}
.transfer-surface .tk-date-picker .event-month-grid button{cursor:pointer;user-select:none}
.transfer-surface .event-month-grid .tk-range,.transfer-surface .event-month-grid .tk-repeat-day:not(.selected){background:var(--accent-soft)}
.transfer-surface .tk-drawer-wrap{position:fixed;inset:0;z-index:195;display:flex;justify-content:flex-end;pointer-events:none}
.transfer-surface .tk-drawer{pointer-events:auto;width:var(--calendar-side-width);height:100dvh;min-width:0;display:flex;flex-direction:column;background:var(--pane-content);border-left:1px solid var(--line);box-shadow:-16px 0 40px #08172412;animation:task-slide-in .24s ease-out;transform:translateX(0);transition:transform .24s ease,opacity .24s ease}
.transfer-surface .tk-drawer.closing{transform:translateX(100%);opacity:0}.transfer-surface .tk-drawer.expanded{width:min(900px,calc(100vw - 75px))}
.transfer-surface .tk-drawer-head{display:flex;align-items:center;gap:1px;padding:12px 9px;min-height:52px;flex:none;border-bottom:1px solid var(--line);background:var(--pane-bar)}
.transfer-surface .tk-drawer-head .tk-icon-btn{width:27px;height:28px;padding:4px}
.transfer-surface .tk-complete{display:flex;align-items:center;gap:5px;font-size:10px;padding:6px 7px;border:1px solid var(--line);border-radius:7px;white-space:nowrap}.transfer-surface .tk-complete.done{color:var(--ok)}
.transfer-surface .tk-visibility{display:flex;align-items:center;gap:7px;background:var(--pane-side);padding:7px 15px;font-size:10px;min-height:38px;flex:none}.transfer-surface .tk-visibility>span{flex:1}
.transfer-surface .tk-drawer-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.transfer-surface .tk-detail-content{padding:16px 18px 22px}
.transfer-surface .tk-title{display:block;width:100%;resize:none;min-height:70px;field-sizing:content;background:transparent;border:1px solid transparent;font-size:23px;letter-spacing:-.5px;line-height:1.35;padding:4px 0 14px;color:var(--ink);font-weight:550;outline:none}
.transfer-surface .tk-title:focus{border-color:var(--line);border-radius:6px}
.transfer-surface .tk-property{display:grid;grid-template-columns:101px minmax(0,1fr);gap:10px;margin:15px 0;align-items:start;font-size:11px}
.transfer-surface .tk-property>span{padding-top:5px;color:var(--ink-soft)}.transfer-surface .tk-property>div{display:flex;flex-wrap:wrap;gap:3px 5px;align-items:center;min-width:0}
.transfer-surface .tk-property .event-choice{width:100%;font-size:11px;min-height:25px;padding:3px 0;background:transparent;border:0;text-align:left}
.transfer-surface .tk-dependency{display:flex;gap:4px;align-items:center;width:100%;font-size:10px;color:var(--warn)}.transfer-surface .tk-dependency>button:not(.tk-icon-btn){flex:1;min-width:0;text-align:left;overflow-wrap:anywhere}
.transfer-surface .tk-detail-section{margin-top:28px}.transfer-surface .tk-detail-section>header{display:flex;align-items:center;gap:6px;margin-bottom:11px}.transfer-surface .tk-detail-section h3{font-size:14px;font-weight:550;margin:0;line-height:1.5}.transfer-surface .tk-detail-section h3 small{font-size:11px;margin-left:3px;background:var(--accent-soft);border-radius:4px;padding:1px 4px;color:var(--ink-faint)}
.transfer-surface .tk-project-detail{border-bottom:1px solid var(--line);padding:4px 0 7px}
.transfer-surface .tk-project-heading{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px}.transfer-surface .tk-project-heading>button:not(.event-choice):not(.tk-icon-btn){display:flex;gap:6px;align-items:center;min-width:0;flex:1;text-align:left;overflow-wrap:anywhere;padding:6px 0}
.transfer-surface .tk-project-heading>.event-choice{font-size:11px;min-height:25px;width:100%;padding:0 0 4px 20px;border:0;background:none}
.transfer-surface .tk-project-field{display:grid;grid-template-columns:1fr 1.3fr;border-top:1px solid var(--line);min-height:34px;align-items:center;font-size:11px}
.transfer-surface .tk-project-field>span{display:flex;gap:6px;align-items:center;color:var(--ink-faint)}.transfer-surface .tk-project-field>.event-choice{font-size:11px;min-height:28px;border:0;border-left:1px solid var(--line);border-radius:0;background:none}
.transfer-surface .tk-project-detail>.tk-muted{margin:6px 0;font-size:10px}
.transfer-surface .tk-description-input{display:block;background:none;border:0;resize:vertical;min-height:140px;width:100%;font-size:12px;line-height:1.8;padding:0;color:var(--ink);outline:none}
.transfer-surface .tk-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:15px}.transfer-surface .tk-labels button{display:flex;gap:4px;align-items:center;background:var(--accent-soft);padding:4px 6px;border-radius:5px;font-size:10px}
.transfer-surface .tk-subtask{display:flex;align-items:center;gap:5px;min-height:38px;border-top:1px solid var(--line);margin:0 -8px;padding:4px 3px;font-size:11px;flex-wrap:wrap}
.transfer-surface .tk-subtask input{background:transparent;border:0;color:var(--ink);min-width:80px;flex:1;font-size:12px;outline:none;padding:4px 0}
.transfer-surface .tk-subtask input.done{text-decoration:line-through;color:var(--ink-faint)}
.transfer-surface .tk-subtask .tk-icon-btn{width:22px;height:24px;padding:2px}.transfer-surface .tk-subtask .tk-date{font-size:10px}
.transfer-surface .tk-sub-grip{opacity:0;cursor:grab}.transfer-surface .tk-subtask:is(:hover,:focus-within) .tk-sub-grip{opacity:1}
.transfer-surface .tk-sub-add{display:flex;align-items:center;gap:4px;min-height:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.transfer-surface .tk-sub-add>input{background:none;border:0;outline:none;min-width:0;flex:1;font-size:12px;color:var(--ink);padding:8px 0}
.transfer-surface .tk-attachment{display:flex;gap:7px;align-items:center;border:1px solid var(--line);padding:7px;border-radius:8px;margin-bottom:6px}.transfer-surface .tk-attachment a{flex:1;min-width:0;overflow-wrap:anywhere;font-size:11px}.transfer-surface .tk-attachment small{display:block;color:var(--ink-faint);font-size:9px}
.transfer-surface .tk-additional{margin-top:25px;font-size:11px;color:var(--ink-faint)}.transfer-surface .tk-additional summary{cursor:pointer}.transfer-surface .tk-additional label{display:flex;align-items:center;justify-content:space-between;margin:8px 0}.transfer-surface .tk-additional input{width:70px;background:var(--glass-input);color:var(--ink);border:1px solid var(--line);padding:4px}.transfer-surface .tk-additional .event-choice{font-size:11px}
.transfer-surface .tk-activity{background:var(--pane-side);padding:16px 18px;min-height:150px}.transfer-surface .tk-activity>header{display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:15px}
.transfer-surface .tk-activity>header>button:not(.tk-icon-btn){font-size:11px;padding:6px 9px;color:var(--ink-faint);border-radius:7px}.transfer-surface .tk-activity>header>button[aria-pressed="true"]{color:var(--ink);background:var(--glass-input);border:1px solid var(--line)}
.transfer-surface .tk-activity-row{display:flex;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.transfer-surface .tk-activity-row>div{flex:1;min-width:0}.transfer-surface .tk-activity-row strong{font-weight:550}.transfer-surface .tk-activity-row small{display:block;color:var(--ink-faint);font-size:9px}.transfer-surface .tk-activity-row p{margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}.transfer-surface .tk-activity-row .tk-muted{font-size:9px;margin-top:6px}
.transfer-surface .tk-comment-footer{display:flex;gap:8px;align-items:flex-start;flex:none;padding:12px;background:var(--pane-side);border-top:1px solid var(--line)}.transfer-surface .tk-comment-footer textarea{resize:vertical;min-height:65px;max-height:180px;flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--glass-input);color:var(--ink);font-size:12px;padding:9px;outline:none}.transfer-surface .tk-comment-footer .tk-primary{padding:8px;font-size:11px}
.transfer-surface .tk-parent-link{display:flex;align-items:center;gap:5px;padding:10px 18px;font-size:11px;color:var(--ink-faint);text-align:left}
.transfer-surface .tk-confirm{position:fixed;z-index:400;left:50%;top:50%;transform:translate(-50%,-50%);width:min(370px,calc(100vw - 32px));padding:22px;background:var(--sheet-bg);border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 100px #07172266;color:var(--ink);font-size:13px}
.transfer-surface .tk-confirm p{margin:12px 0 20px;color:var(--ink-soft);font-size:12px}.transfer-surface .tk-confirm>button{margin-right:10px;margin-top:5px;font-size:12px}
@keyframes task-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(hover:hover){.transfer-surface :is(.tk-bucket,.tk-list-item,.tk-icon-btn,.tk-menu-item,.tk-add-row,.tk-table-row,.tk-project-heading):hover{background:var(--accent-soft)}.transfer-surface .tk-card:hover{border-color:var(--accent)}}
@media(max-width:1100px){.transfer-surface .tk-sidebar{width:185px}.transfer-surface .tk-toolbar{gap:7px;padding:10px 14px}.transfer-surface .tk-toolbar>strong{max-width:140px}.transfer-surface .tk-modes button{padding:5px 9px}.transfer-surface .tk-drawer-head .tk-icon-btn{width:24px}.transfer-surface .tk-complete{padding:6px 4px;font-size:9px}}
@media(max-width:760px){.transfer-surface .tk-sidebar{width:150px;padding:16px 5px}.transfer-surface .tk-sidebar h2{font-size:17px}.transfer-surface .tk-bucket{font-size:11px;gap:6px;padding:9px 7px}.transfer-surface .tk-toolbar{flex-wrap:wrap}.transfer-surface .tk-toolbar>strong{width:100%;max-width:none}.transfer-surface .tk-modes button{font-size:10px;padding:4px 7px}.transfer-surface .tk-live span{display:none}.transfer-surface .tk-filterbar{padding:5px 10px}.transfer-surface .tk-board{padding:12px}.transfer-surface .tk-list-actions{opacity:1;pointer-events:auto}.transfer-surface .tk-list-select{padding-right:50px}.transfer-surface .tk-list-actions .tk-icon-btn{width:23px}.transfer-surface .tk-list-select small{display:none}.transfer-surface .tk-confirm{left:50vw}}
@media(prefers-reduced-motion:reduce){.transfer-surface .tk-drawer{animation:none;transition:none}}
@media print{body.printing-task>.rail,body.printing-task>.app-header,body.printing-task #view,body.printing-task>.assistant-trigger{display:none!important}body.printing-task .transfer-overlays,body.printing-task .tk-drawer-wrap,body.printing-task .tk-drawer,body.printing-task .tk-drawer-scroll{position:static!important;width:100%!important;height:auto!important;overflow:visible!important;transform:none!important;display:block!important}body.printing-task .tk-drawer-head,body.printing-task .tk-comment-footer,body.printing-task .event-popup{display:none!important}}
.transfer-surface .tk-complete>span{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-participant-trigger{display:flex;align-items:center;position:relative;width:31px;padding:0;flex:none}
.transfer-surface .tk-participant-trigger .tk-avatar{width:21px;height:21px}
.transfer-surface .tk-participant-trigger>img{margin-left:-3px;padding:0;border-radius:50%;background:var(--pane-bar)}
.transfer-surface .tk-drawer.expanded .tk-complete>span{max-width:380px}
.transfer-surface .tk-card-foot{gap:6px}.transfer-surface .tk-card-foot>button{flex:1}
.transfer-surface .tk-form-shell{display:contents;border:0;padding:0;margin:0;min-width:0}
.transfer-surface fieldset.tk-pop-content{border:0;margin:0;min-width:0}

/* TASKS-039. Project fields share the workspace palette and line icons. */
.transfer-surface .tf-grid-scroll{flex:1;min-height:0;overflow:auto;padding:0 18px 30px;scrollbar-gutter:stable}
.transfer-surface :is(.tf-grid-head,.tf-grid-row){display:grid;align-items:stretch}
.transfer-surface .tf-grid-head{position:sticky;top:0;z-index:3;min-height:43px;border-bottom:1px solid var(--line);background:var(--pane-content)}
.transfer-surface .tf-column-head{position:relative;display:flex;align-items:center;gap:5px;min-width:0;padding:0 10px;border-right:1px solid var(--hairline-soft);color:var(--ink-faint);font-size:12px;cursor:grab}
.transfer-surface .tf-column-head>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tf-column-head>.tk-icon-btn{width:24px;height:25px;opacity:0;flex:none}
.transfer-surface .tf-column-head:is(:hover,:focus-within)>.tk-icon-btn{opacity:1;background:var(--accent-soft)}
.transfer-surface .tf-column-resize{position:absolute;z-index:2;top:0;bottom:0;right:-4px;width:8px;cursor:col-resize;touch-action:none}
.transfer-surface .tf-column-resize:is(:hover,:focus-visible){background:var(--accent);outline:0;width:3px;right:-1px}
body.tf-resizing,body.tf-resizing *{cursor:col-resize!important;user-select:none!important}
.transfer-surface .tf-grid-head>.tk-icon-btn{align-self:center;justify-self:center}
.transfer-surface .tf-grid-section{padding:10px 0 20px}
.transfer-surface .tf-grid-section>.tk-section-head{margin:0;min-height:48px;border-bottom:1px solid var(--hairline-soft);max-width:none}
.transfer-surface .tf-grid-section>.tk-section-head>button:first-child{flex:0 1 auto;gap:12px;padding:11px 9px}
.transfer-surface .tf-grid-section>.tk-section-head strong{font-size:14px;font-weight:550}
.transfer-surface .tf-grid-section>.tk-section-head span{font-size:11px}
.transfer-surface .tf-grid-row{min-height:43px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .tf-grid-row:is(:hover,:focus-within){background:var(--accent-soft)}
.transfer-surface .tf-grid-cell{min-width:0;display:flex;align-items:center;gap:8px;padding:4px 9px;border-right:1px solid var(--hairline-soft);font-size:13px}
.transfer-surface .tf-grid-cell .tk-task-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.transfer-surface .tf-grid-row.done .tk-task-name{color:var(--ink-faint)}
.transfer-surface .tf-grid-cell .tk-check{margin:0}.transfer-surface .tf-row-select{width:13px;height:13px;margin:0;opacity:0;flex:none}
.transfer-surface .tf-task-delete{width:23px;height:25px;padding:3px;flex:none;color:var(--crit)}
.transfer-surface .tf-task-delete img{filter:invert(30%) sepia(39%) saturate(1736%) hue-rotate(320deg) brightness(98%) contrast(89%);opacity:.78}
.transfer-surface .tf-task-delete:is(:hover,:focus-visible){background:color-mix(in srgb,var(--crit) 12%,transparent)}
.transfer-surface .tf-task-delete:is(:hover,:focus-visible) img{opacity:1}
.transfer-surface .tf-completed-value{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums}
.transfer-surface .tf-grid-row:is(:hover,:focus-within) .tf-row-select,.transfer-surface .tf-row-select:checked{opacity:1}
.transfer-surface .tf-grid-row>.tk-icon-btn{opacity:0;align-self:center;justify-self:center}
.transfer-surface .tf-grid-row:is(:hover,:focus-within)>.tk-icon-btn{opacity:1}
.transfer-surface .tf-grid-cell>.tk-person,.transfer-surface .tf-grid-cell>.tk-inline{max-width:100%;min-width:0;overflow:hidden}
.transfer-surface .tf-grid-cell .tk-person{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .tf-cell-button{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;min-height:29px;padding:2px 1px;text-align:left;font-size:13px}
.transfer-surface :is(.tf-cell-label,.tf-computed){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tf-cell-button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.transfer-surface .tf-pill{display:inline-block;max-width:100%;padding:3px 6px;border-radius:4px;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--accent-soft);color:var(--ink)}
.transfer-surface .tf-multi-pills{display:flex;gap:4px;overflow:hidden;max-width:100%}
.transfer-surface .tf-grid-section>.tk-add-row{padding-left:52px;height:39px;font-size:13px}
.transfer-surface .tf-applied{display:flex;gap:7px;align-items:center;min-height:35px;position:sticky;left:0;flex-wrap:wrap}
.transfer-surface .tf-applied button{display:flex;gap:6px;align-items:center;padding:4px 7px;background:var(--accent-soft);border-radius:5px;font-size:11px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu){display:flex;flex-direction:column;gap:6px;padding:3px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu) form{display:flex;flex-direction:column;gap:12px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu) small{font-size:11px;line-height:1.55;color:var(--ink-faint);padding:5px 9px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu) strong{font-size:12px;font-weight:500;padding:7px 9px}
.transfer-surface .tf-option{display:flex;align-items:center;gap:10px;padding:9px 10px;width:100%;min-height:36px;border-radius:5px;text-align:left;font-size:13px;color:var(--ink);line-height:1.4}
.transfer-surface .tf-option:hover{background:var(--accent-soft)}
.transfer-surface .tf-option>img:last-child:not(:first-child){margin-left:auto}
.transfer-surface .tf-option-check{width:16px;flex:none;display:grid;place-items:center}
.transfer-surface .tf-option-edit{border-top:1px solid var(--line);margin-top:5px;border-radius:0}
.transfer-surface :is(.tf-column-menu,.tf-add-menu) hr{border:0;border-top:1px solid var(--line);margin:4px -7px}
.transfer-surface .tf-menu-link{color:var(--accent-strong,var(--ink-soft))}
.transfer-surface .event-popup:has(.tf-add-menu){max-height:calc(100dvh - 24px)}
.transfer-surface .tf-timer{font-size:28px;font-variant-numeric:tabular-nums;text-align:center;padding:12px}
.transfer-surface .tf-modal-backdrop{position:fixed;inset:0;z-index:210;background:#05101988;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.transfer-surface .tf-editor{width:min(740px,calc(100vw - 48px));min-width:0;max-width:100%;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;background:var(--sheet-bg);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 100px #03121c44}
.transfer-surface .tf-editor>header{display:flex;align-items:center;gap:8px;flex:none;padding:22px 27px;border-bottom:1px solid var(--line)}
.transfer-surface .tf-editor>header>div{flex:1;min-width:0}.transfer-surface .tf-editor h2{font-size:24px;font-weight:550;margin:0 0 4px}
.transfer-surface .tf-editor small{font-size:12px;color:var(--ink-faint);line-height:1.6}
.transfer-surface .tf-access{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;white-space:nowrap}
.transfer-surface .tf-editor>form{min-height:0;display:flex;flex-direction:column}
.transfer-surface .tf-editor-body{min-height:0;overflow:auto;padding:24px 29px 30px;display:flex;flex-direction:column;gap:20px}
.transfer-surface .tf-editor-body>label,.transfer-surface .tf-editor-top>label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-soft)}
.transfer-surface .tf-editor-top{display:grid;grid-template-columns:1.45fr 1fr;gap:30px}
.transfer-surface .tf-editor em{font-style:normal;color:var(--danger,#e77972)}
.transfer-surface .tf-editor :is(input.event-control,.event-choice){min-height:43px;font-size:14px}
.transfer-surface .tf-editor textarea{min-height:65px;resize:vertical;font-size:14px}
.transfer-surface .tf-editor label>em{display:contents}
.transfer-surface .tf-options-editor{display:flex;flex-direction:column;gap:4px;padding-top:7px}
.transfer-surface .tf-options-editor>label{font-size:13px;color:var(--ink-soft);margin-bottom:12px}
.transfer-surface .tf-edit-option{display:flex;gap:13px;align-items:center;min-height:47px;border-radius:6px;padding:2px 0}
.transfer-surface .tf-edit-option:hover{background:var(--accent-soft)}
.transfer-surface .tf-grip{width:12px;flex:none;opacity:0;cursor:grab}
.transfer-surface .tf-edit-option:hover .tf-grip{opacity:1}
.transfer-surface .tf-option-color{width:25px;height:25px;border-radius:50%;flex:none;display:grid;place-items:center}
.transfer-surface .tf-option-color img,.transfer-surface .tf-color-pop img{filter:brightness(.18)!important}
.transfer-surface .tf-edit-option>input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:7px 0;font-size:16px}
.transfer-surface .tf-edit-option>input:focus{outline:0;border-bottom:1px solid var(--accent)}
.transfer-surface .tf-add-option{display:flex;align-items:center;gap:11px;padding:12px 26px;color:var(--ink-soft);font-size:14px}
.transfer-surface .tf-field-flags{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.transfer-surface .tf-field-flags>label{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.5}
.transfer-surface .tf-field-flags input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.transfer-surface .tf-field-flags small{padding-left:26px;font-size:11px}
.transfer-surface .tf-editor footer{display:flex;justify-content:flex-end;gap:17px;align-items:center;padding:19px 29px;border-top:1px solid var(--line);flex:none;font-size:13px}
.transfer-surface .tf-editor footer .tk-primary{padding:10px 20px;min-height:40px}
.transfer-surface .tf-color-pop{padding:8px;display:flex;flex-direction:column;gap:12px}
.transfer-surface .tf-color-pop>div{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.transfer-surface .tf-color-pop button{width:28px;height:28px;display:grid;place-items:center;border-radius:5px}
.transfer-surface .tf-color-pop button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}
.transfer-surface .tf-access-note{font-size:12px;line-height:1.6;padding:12px;background:var(--accent-soft);border-radius:8px}
.transfer-surface .tk-card.done .tk-card-meta:has(.tf-pill){opacity:1}
@media(hover:none){.transfer-surface .tf-column-head>.tk-icon-btn,.transfer-surface .tf-row-select{opacity:1}}
@media(max-width:600px){
 .transfer-surface .tf-grid-scroll{padding:0 8px 20px}
 .transfer-surface .tf-modal-backdrop{padding:8px}.transfer-surface .tf-editor{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:13px}
 .transfer-surface .tf-editor>header{padding:15px;gap:4px}.transfer-surface .tf-editor h2{font-size:21px}.transfer-surface .tf-access{width:30px;height:30px;font-size:0;gap:0;padding:5px}
 .transfer-surface .tf-editor-body{padding:18px 16px}.transfer-surface .tf-editor-top{grid-template-columns:1fr;gap:15px}
 .transfer-surface .tf-editor footer{padding:14px 16px}.transfer-surface .tf-edit-option{gap:8px}
}

.transfer-surface .tf-option:disabled{opacity:.4;cursor:default}

/* UI-042: geometric center, independent of inherited image line-height. */
.transfer-surface .tk-create>img{display:block;margin:0;transform:none}
.transfer-surface .tf-row-select{appearance:none;border:1px solid var(--ink-faint);border-radius:50%;background:transparent}
.transfer-surface .tf-row-select:checked{background:var(--accent);box-shadow:inset 0 0 0 2px var(--pane-bar);border-color:var(--accent)}

/* TASKS-043: project views, using the owner's current v16 palette. */
.transfer-surface .tv-tabs{display:flex;gap:5px;align-items:center;min-height:43px;padding:0 17px;border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:thin}
.transfer-surface .tv-tabs [role=tablist]{display:flex;gap:4px;align-items:center;flex:none}
.transfer-surface .tv-tabs [role=tab]{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 11px;font-size:12px;color:var(--ink-soft);border-radius:7px;border:0;background:transparent}
.transfer-surface .tv-tabs [role=tab]:hover{background:var(--accent-soft);color:var(--ink)}
.transfer-surface .tv-tabs [aria-selected=true]{background:var(--accent-soft);color:var(--accent);font-weight:550}
.transfer-surface .tv-tabs>.tk-icon-btn{flex:none;width:30px;height:30px;border-radius:7px;background:transparent!important;box-shadow:none!important;border:0}
.transfer-surface .tv-tab-item{display:flex;align-items:center;position:relative;border-radius:7px;cursor:grab;transition:opacity .15s,box-shadow .15s}
.transfer-surface .tv-tab-item.selected{background:var(--accent-soft)}
.transfer-surface .tv-tab-item [role=tab]{background:transparent;padding-right:5px;cursor:inherit}
.transfer-surface .tv-tab-menu{display:grid;place-items:center;width:24px;height:28px;margin-right:4px;background:transparent;border:0;padding:0;opacity:0;color:var(--ink-soft);border-radius:5px}
.transfer-surface .tv-tab-item:is(:hover,:focus-within) .tv-tab-menu,.transfer-surface .tv-tab-menu[aria-expanded=true]{opacity:1}
.transfer-surface .tv-tab-menu:hover{color:var(--ink);background:var(--accent-soft)}
.transfer-surface .tv-tab-item.dragging{opacity:.4;box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.transfer-surface .tv-tab-item:is(.drop-before,.drop-after):not(.dragging)::after{content:'';position:absolute;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);pointer-events:none}
.transfer-surface .tv-tab-item.drop-before::after{left:-3px}.transfer-surface .tv-tab-item.drop-after::after{right:-3px}
.transfer-surface .tv-drag-hint{font-size:11px;color:var(--accent);white-space:nowrap;padding:5px 8px}
.tv-dragging-tabs,.tv-dragging-tabs *{cursor:grabbing!important}
@media(hover:none){.transfer-surface .tv-tab-menu{opacity:1}}
@media(prefers-reduced-motion:reduce){.transfer-surface .tv-tab-item{transition:none}}
.transfer-surface .tv-add-menu{padding:19px 21px;max-height:min(620px,80dvh);overflow:auto}
.transfer-surface .tv-add-menu h3{font-size:11px;font-weight:500;color:var(--ink-faint);margin:0 0 9px}
.transfer-surface .tv-add-menu section+section{margin-top:24px}
.transfer-surface .tv-add-menu section>div{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.transfer-surface .tv-add-menu button{display:flex;gap:14px;text-align:left;align-items:center;min-width:0;padding:12px 9px;border-radius:8px;background:transparent;color:var(--ink);border:0}
.transfer-surface .tv-add-menu button:hover{background:var(--accent-soft)}
.transfer-surface .tv-add-menu button>.ico{flex:none}
.transfer-surface .tv-add-menu strong{font-size:13px;font-weight:550;display:block}.transfer-surface .tv-add-menu small{font-size:11px;color:var(--ink-soft);line-height:1.5;display:block;margin-top:4px}
.transfer-surface .tv-view-panel{display:flex;flex:1;min-width:0;min-height:0;position:relative;flex-direction:column;overflow:hidden}
.transfer-surface :is(.tv-calendar-view,.tv-files,.tv-page,.tv-dashboard){display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden;color:var(--ink)}
.transfer-surface .tv-view-tools{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap;font-size:12px}
.transfer-surface .tv-view-tools button{display:inline-flex;gap:6px;align-items:center;font-size:12px;min-height:28px}
.transfer-surface .tv-view-tools .event-choice{width:auto;min-width:90px;border:0;background:transparent;height:30px;min-height:30px}
.transfer-surface .tv-view-tools .tk-search{max-width:190px}
.transfer-surface .tv-muted{font-size:11px;color:var(--ink-faint)}
.transfer-surface .tv-period{display:flex;align-items:center;gap:8px}.transfer-surface .tv-period strong{font-size:14px;text-transform:capitalize;font-weight:550;margin-left:8px}
.transfer-surface .tv-calendar-body{display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}
.transfer-surface .tv-calendar-scroll{flex:1;min-width:0;overflow:auto;scrollbar-width:thin}
.transfer-surface .tv-calendar-week{position:relative;min-width:680px;height:calc(93px + var(--lanes)*33px);border-bottom:1px solid var(--line)}
.transfer-surface .week .tv-calendar-week{min-height:100%}
.transfer-surface .tv-calendar-days{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));height:100%}
.transfer-surface .tv-calendar-day{min-width:0;position:relative;border-right:1px solid var(--line)}.transfer-surface .tv-calendar-day:last-child{border-right:0}
.transfer-surface .tv-calendar-day header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:11px;padding:9px;color:var(--ink-soft)}
.transfer-surface .tv-calendar-day header span{text-transform:capitalize;font-size:10px}
.transfer-surface .tv-calendar-day header button{border-radius:50%;width:25px;height:25px;padding:0;display:grid;place-items:center;font-size:12px;color:var(--ink)}
.transfer-surface .tv-calendar-day.today header button{background:var(--accent);color:var(--accent-ink)}.transfer-surface .tv-calendar-day.outside header{opacity:.45}
.transfer-surface .tv-day-add{position:absolute;bottom:6px;left:6px;right:6px;display:flex;align-items:center;gap:4px;opacity:0;font-size:10px;color:var(--ink-soft);padding:5px;white-space:nowrap;overflow:hidden}
.transfer-surface .tv-calendar-day:hover .tv-day-add,.transfer-surface .tv-day-add:focus-visible{opacity:1}
.transfer-surface .tv-calendar-lanes{position:absolute;top:62px;left:0;right:0;display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));grid-auto-rows:30px;gap:3px 0;pointer-events:none}
.transfer-surface .tv-calendar-task{display:flex;gap:6px;align-items:center;margin:0 4px;min-width:0;padding:4px 7px;background:color-mix(in srgb,var(--task-color,var(--accent)) 15%,var(--pane-content));border:1px solid color-mix(in srgb,var(--task-color,var(--accent)) 30%,var(--line));border-radius:5px;pointer-events:auto;cursor:grab;font-size:11px}
.transfer-surface .tv-calendar-task:hover{border-color:var(--accent)}.transfer-surface .tv-calendar-task.done{background:var(--glass-input);color:var(--ink-faint)}
.transfer-surface .tv-calendar-task .tk-check{width:16px;height:16px;flex:none}.transfer-surface .tv-calendar-task .tk-check img{width:10px;height:10px}
.transfer-surface .tv-calendar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:1;font-size:11px;line-height:18px;min-width:0;color:inherit}
.transfer-surface .tv-calendar-task>i{width:7px;height:7px;border-radius:2px;flex:none}
.transfer-surface .tv-unplanned{width:246px;flex:none;border-left:1px solid var(--line);overflow:auto;padding:12px 10px;background:var(--pane-side)}
.transfer-surface .tv-unplanned>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:12px}
.transfer-surface .tv-unplanned .tv-calendar-task{margin:0 0 7px;min-height:35px}.transfer-surface .tv-unplanned p{font-size:11px;color:var(--ink-faint);padding:15px 3px}
.transfer-surface .tv-unplanned .tk-add-row{font-size:11px;padding:10px 4px}
/* Inline task entry uses the saved workspace palette and the same field popovers. */
.transfer-surface .tq-compose{position:relative;color:var(--ink);border:1px solid var(--accent);background:var(--pane-content);border-radius:8px;box-shadow:0 2px 8px #00000009;scroll-margin-block:8px 48px}
.transfer-surface .tk-board:has(.tq-compose){padding-bottom:65px}
.transfer-surface .tq-name{display:flex;align-items:flex-start;gap:8px;min-width:0}
.transfer-surface .tq-title{width:100%;min-width:0;border:0;background:transparent!important;color:var(--ink);font:inherit;outline:none;line-height:22px;padding:0;box-shadow:none!important}
.transfer-surface .tq-title::placeholder{color:var(--ink-faint)}
.transfer-surface .tq-compose>.tk-icon-btn{position:absolute;right:7px;bottom:4px}
.transfer-surface .tq-compose footer{display:flex;align-items:center;gap:9px;grid-column:1/-1;min-height:32px;padding:3px 34px 3px 9px;font-size:10px;color:var(--ink-soft)}
.transfer-surface .tq-compose footer>span{flex:1}.transfer-surface .tq-compose footer>button:not(.tk-icon-btn){color:var(--accent);font-weight:550}
.transfer-surface .tq-compose .tk-error{grid-column:1/-1;margin:0 8px 8px}
.transfer-surface .tq-row{display:grid;border-radius:0;font-size:12px}.transfer-surface .tq-row>.tf-grid-cell{min-height:39px;gap:8px}
.transfer-surface .tq-row>.tk-icon-btn{position:static;align-self:center;justify-self:center}
.transfer-surface .tq-row footer{padding-left:38px}
.transfer-surface .tq-card{padding:12px 11px 0;margin-bottom:9px;font-size:12px}
.transfer-surface .tq-fields{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0 6px}
.transfer-surface .tq-fields>.tf-cell-button{width:auto;min-width:24px}.transfer-surface .tq-fields .tk-person{font-size:11px}
.transfer-surface .tq-fields .tk-date{font-size:11px}
.transfer-surface .tq-calendar-slot{position:absolute;bottom:32px;left:3px;right:3px;z-index:3}
.transfer-surface .tq-calendar{padding:7px 6px 0;font-size:11px;min-width:0}.transfer-surface .tq-calendar .tk-check{width:16px;height:16px;flex:none;margin-top:2px}
.transfer-surface .tq-calendar footer{gap:4px;padding-left:0;padding-right:22px}.transfer-surface .tq-calendar footer>span{display:none}
.transfer-surface .tq-calendar footer .tk-icon-btn{width:21px;height:23px}.transfer-surface .tq-calendar>.tk-icon-btn{width:20px;right:2px;bottom:4px}
.transfer-surface .tq-inline-name{flex:1;min-width:0;display:flex;flex-direction:column}
.transfer-surface .tq-subtask-title{display:flex;align-items:center;min-width:0;gap:2px}
.transfer-surface .tq-name-open{flex:1;min-width:0;padding:5px 4px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;line-height:20px;color:inherit;border-radius:3px;background:transparent}
.transfer-surface .tq-name-open:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.transfer-surface .tq-subtask-title>.tk-icon-btn{opacity:0;flex:none}
.transfer-surface .tf-grid-row:is(:hover,:focus-within) .tq-subtask-title>.tk-icon-btn{opacity:1}
.transfer-surface .tq-inline-name input{width:100%;border:1px solid transparent;border-radius:3px;padding:4px 3px;background:transparent!important;color:inherit;font:inherit;line-height:20px;text-overflow:ellipsis;box-shadow:none!important}
.transfer-surface .tq-inline-name input:focus{border-color:var(--accent);outline:none;background:var(--glass-input)!important}
.transfer-surface .tq-inline-name small{color:var(--red);font-size:10px}.transfer-surface .tq-parent{color:var(--ink-faint);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tq-placeholder{color:var(--ink-faint)}
.transfer-surface .tk-card-meta>.tf-cell-button{width:auto;min-width:18px;padding:0}.transfer-surface .tk-card-meta>.tf-cell-button:has(.tf-cell-label){opacity:0}
.transfer-surface .tk-card:hover .tk-card-meta>.tf-cell-button,.transfer-surface .tk-card-meta>.tf-cell-button:focus-visible{opacity:1}
.transfer-surface .tk-card-foot .tk-date{font-size:11px;min-width:0;max-width:70%;gap:4px}.transfer-surface .tk-card-foot .tk-date-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tq-card-person{margin-left:auto}.transfer-surface .tq-card-person .tk-person{padding:0}.transfer-surface .tq-card-person .tk-person>span:not(.tk-avatar){display:none}
.transfer-surface .tv-dashboard-scroll{padding:22px;overflow:auto;flex:1;min-height:0}.transfer-surface .tv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}
.transfer-surface .tv-stats>button{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);background:var(--glass-input);border-radius:10px;padding:19px 10px;color:var(--ink);min-width:0;gap:18px}
.transfer-surface .tv-stats>button:hover{border-color:var(--accent)}.transfer-surface .tv-stats span{font-size:11px;display:flex;gap:6px;align-items:center}.transfer-surface .tv-stats strong{font-weight:500;font-size:35px;line-height:1}
.transfer-surface .tv-widgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.transfer-surface .tv-widget{border:1px solid var(--line);background:var(--glass-input);border-radius:10px;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.transfer-surface .tv-widget>header{display:flex;align-items:center;gap:7px;padding:15px 16px}.transfer-surface .tv-widget h3{font-size:13px;font-weight:550;margin:0}
.transfer-surface .tv-widget>header>.ico{cursor:grab;opacity:.4}.transfer-surface .tv-widget>footer{display:flex;justify-content:space-between;margin-top:auto;padding:10px 16px;border-top:1px solid var(--line)}
.transfer-surface .tv-widget>footer>button{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-size:11px}
.transfer-surface .tv-widget-text{min-height:180px;padding:15px 20px;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.transfer-surface .tv-chart{min-height:250px;padding:15px 24px;display:flex;flex-direction:column;justify-content:center;gap:16px}.transfer-surface .tv-chart svg{width:100%;height:140px;overflow:visible}
.transfer-surface .tv-chart-legend{display:flex;flex-direction:column;gap:14px;min-width:0}.transfer-surface .tv-chart-legend button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:8px;text-align:left;font-size:11px;min-height:20px;padding:0;isolation:isolate;color:var(--ink-soft)}
.transfer-surface .tv-chart-legend button>span{display:flex;gap:7px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.transfer-surface .tv-chart-legend i{width:8px;height:8px;border-radius:50%;flex:none}.transfer-surface .tv-chart-legend strong{font-weight:500;text-align:right;color:var(--ink)}
.transfer-surface .tv-chart.bar .tv-chart-legend button{padding-bottom:14px}.transfer-surface .tv-chart-legend b{position:absolute;bottom:0;height:5px;border-radius:3px;max-width:100%}
.transfer-surface .tv-chart.donut{flex-direction:row;align-items:center;gap:26px}.transfer-surface .tv-donut{width:150px;height:150px;flex:none;border-radius:50%;display:grid;place-items:center}.transfer-surface .tv-donut>span{background:var(--pane-content);width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:30px}.transfer-surface .tv-donut small{font-size:10px;color:var(--ink-soft)}
.transfer-surface .tv-toggle{display:flex;border:1px solid var(--line);border-radius:7px;padding:2px}.transfer-surface .tv-toggle .active{background:var(--accent-soft)}
.transfer-surface .tv-add-file{border:1px solid var(--line);border-radius:7px;padding:6px 10px}
.transfer-surface .tv-files-content{flex:1;overflow:auto;min-height:0;padding:22px}.transfer-surface .tv-files-content h3{font-size:13px;margin:6px 0 15px;font-weight:550}.transfer-surface .tv-files-content section+section{margin-top:25px}
.transfer-surface .tv-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:14px;min-height:260px;padding:24px;color:var(--ink-soft)}.transfer-surface .tv-empty h2{font-size:19px;font-weight:500;margin:0;color:var(--ink)}.transfer-surface .tv-empty p{font-size:12px;max-width:400px;margin:0;line-height:1.7}.transfer-surface .tv-empty small{font-size:10px;color:var(--ink-faint)}.transfer-surface .tv-empty button{padding:8px 14px;border:1px solid var(--line);border-radius:7px;font-size:12px}
.transfer-surface .tv-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:18px}.transfer-surface .tv-file-card{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid var(--line);background:var(--glass-input);border-radius:8px;padding:10px}
.transfer-surface .tv-file-grid .tv-file-card{flex-wrap:wrap}.transfer-surface .tv-file-grid .tv-file-preview{width:100%;height:140px;background:var(--pane-side);border-radius:5px}
.transfer-surface .tv-file-preview{display:grid;place-items:center;flex:none}.transfer-surface .tv-file-preview img{max-width:100%;max-height:100%;object-fit:contain}.transfer-surface .tv-file-info{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.transfer-surface .tv-file-info button{font-size:12px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.transfer-surface .tv-file-info small,.transfer-surface .tv-file-info .tv-file-task{font-size:10px;color:var(--ink-faint)}
.transfer-surface .tv-file-list{display:flex;flex-direction:column;gap:7px}.transfer-surface .tv-file-list .tv-file-preview{width:45px;height:45px}
.transfer-surface .tv-page{overflow:auto}.transfer-surface .tv-document{width:min(800px,100%);margin:0 auto;padding:30px 35px;flex:1;display:flex;flex-direction:column;min-height:550px}.transfer-surface .tv-document h1{font-size:28px;font-weight:550;margin:0 0 26px;overflow-wrap:anywhere}
.transfer-surface .tv-document-toolbar{display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:18px}.transfer-surface .tv-document-toolbar button{display:grid;place-items:center;width:30px;height:28px;font-size:14px;border-radius:5px}.transfer-surface .tv-document-toolbar button:hover{background:var(--accent-soft)}.transfer-surface .tv-document-toolbar small{font-size:10px;color:var(--ink-faint)}
.transfer-surface .tv-document textarea{flex:1;min-height:340px;width:100%;padding:0;background:transparent;color:var(--ink);border:0;outline:0;resize:none;font:inherit;font-size:14px;line-height:1.9}
.transfer-surface .tv-document-preview{font-size:14px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-wrap}.transfer-surface .tv-document-preview p{min-height:1em}.transfer-surface .tv-document-preview h2{font-size:23px;font-weight:550}.transfer-surface .tv-document-preview blockquote{margin-left:0;padding-left:20px;border-left:2px solid var(--accent);color:var(--ink-soft)}
.transfer-surface .tv-modal-shade{position:fixed;inset:0;background:#08111877;z-index:3100;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.transfer-surface :is(.tv-editor,.tv-file-dialog){display:flex;flex-direction:column;width:min(650px,100%);max-height:90dvh;overflow:auto;background:var(--pane-content);border:1px solid var(--line);border-radius:15px;color:var(--ink);box-shadow:0 20px 80px #0003}
.transfer-surface .tv-editor{gap:20px;padding:25px}.transfer-surface :is(.tv-editor,.tv-file-dialog)>header{display:flex;align-items:center;gap:10px}.transfer-surface .tv-editor h2{margin:0;flex:1;font-size:20px;font-weight:550}.transfer-surface .tv-editor label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ink-soft)}.transfer-surface .tv-editor textarea{min-height:160px;padding:12px;background:var(--glass-input);border:1px solid var(--line);border-radius:7px;color:var(--ink);font:inherit}.transfer-surface .tv-editor>footer{display:flex;gap:15px;justify-content:flex-end;font-size:12px}
.transfer-surface .tv-file-dialog>header,.transfer-surface .tv-file-dialog>footer{padding:18px;border-bottom:1px solid var(--line);font-size:12px}.transfer-surface .tv-file-dialog>img{object-fit:contain;max-width:100%;max-height:65dvh}.transfer-surface .tv-file-dialog strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transfer-surface .tv-file-dialog a{color:var(--accent);white-space:nowrap}
.transfer-surface .tv-drilldown-list{max-height:55dvh;overflow:auto}.transfer-surface .tv-drilldown-list>div{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.transfer-surface .tv-drilldown-list>div>button:last-child{text-align:left}
@media(max-width:1150px){.transfer-surface .tv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.transfer-surface .tv-chart.donut{flex-direction:column}.transfer-surface .tv-unplanned{width:195px}.transfer-surface .tv-widgets{gap:14px}.transfer-surface .tv-dashboard-scroll{padding:15px}.transfer-surface .tv-view-tools{padding:9px 12px}}
@media(max-width:760px){.transfer-surface .tv-tabs{padding:3px 8px}.transfer-surface .tv-calendar-body{flex-direction:column}.transfer-surface .tv-unplanned{width:100%;max-height:160px;border-left:0;border-top:1px solid var(--line)}.transfer-surface .tv-widgets{grid-template-columns:minmax(0,1fr)}.transfer-surface .tv-stats{gap:8px}.transfer-surface .tv-stats span{font-size:10px;flex-direction:column}.transfer-surface .tv-stats>button{padding:12px 4px}.transfer-surface .tv-stats strong{font-size:26px}.transfer-surface .tv-document{padding:22px 16px}.transfer-surface .tv-period{gap:3px;flex-wrap:wrap}.transfer-surface .tv-period strong{font-size:12px}.transfer-surface .tv-add-menu section>div{grid-template-columns:1fr}.transfer-surface .tv-modal-shade{padding:12px}.transfer-surface .tv-editor{padding:18px}.transfer-surface .tv-file-grid{grid-template-columns:minmax(0,1fr)}.transfer-surface .tv-files-content{padding:12px}.transfer-surface .tv-day-add{opacity:1}.transfer-surface .tv-file-dialog>header{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.transfer-surface .tv-view-panel *{scroll-behavior:auto}}

.transfer-surface .event-popup-task-tabs{max-height:min(650px,calc(100dvh - 24px));padding:0}.transfer-surface .tv-add-menu{max-height:none}

.transfer-surface .tv-project-toggle{display:none}
@media(max-width:760px){.transfer-surface .tk-workspace{position:relative}.transfer-surface .tv-project-toggle{display:grid;place-items:center;width:30px;height:30px;flex:none}.transfer-surface .tk-workspace>.tk-sidebar{display:none;position:absolute;inset:63px auto 0 0;z-index:15;width:min(260px,90%);box-shadow:12px 0 35px #0002}.transfer-surface .tk-workspace.projects-open>.tk-sidebar{display:block}.transfer-surface .tk-toolbar{flex-wrap:nowrap;min-height:63px}.transfer-surface .tk-toolbar>strong{width:auto;max-width:none;overflow:hidden;text-overflow:ellipsis}.transfer-surface .tv-view-tools .tk-spacer{display:none}.transfer-surface .tv-view-tools{gap:7px}.transfer-surface .tv-files .tv-view-tools>.event-choice{max-width:140px}.transfer-surface .tk-filterbar{gap:7px}.transfer-surface .tk-filterbar .tk-search{min-width:0;flex:1}}

/* TASKS-045: field filters and explicit destructive confirmation. */
.transfer-surface .tk-delete-backdrop{z-index:450}
.transfer-surface .tf-filter-form{display:flex;flex-direction:column;gap:9px;padding:6px}
.transfer-surface .tf-filter-form>strong{font-size:12px;color:var(--ink-soft);margin-bottom:4px}
.transfer-surface .tf-filter-form>label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.transfer-surface .tf-filter-form .tf-filter-option{flex-direction:row;align-items:center;gap:9px;padding:7px 4px;font-size:13px}
.transfer-surface .tf-filter-option input{accent-color:var(--accent);width:15px;height:15px}
.transfer-surface .tf-column-menu .tf-option[aria-expanded=true]{background:var(--hover)}
.transfer-surface .event-popup-task:has(>.tf-column-menu),.transfer-surface .event-popup-task:has(>.tf-add-menu){max-height:min(760px,calc(100dvh - 24px))}
.transfer-surface .tk-delete-backdrop .tk-primary{background:#a63c37;color:#fff}
.transfer-surface .tk-delete-backdrop .tk-primary:hover{background:#8e312e}

/* TASKS-046: compact task header, fixed names and gestures. */
.transfer-surface .tv-tabs .tk-search{flex:0 1 230px;min-width:130px;margin-left:8px}
/* Кнопка фильтра стоит в конце строки вкладок, за распоркой. */
.transfer-surface .tv-tabs>.tk-spacer{flex:1 1 0;min-width:8px}
.transfer-surface .tv-tabs .tk-task-filter-button{flex:none}
.transfer-surface .tv-tabs .tk-search input{min-width:0;width:100%}
.transfer-surface .tk-check img{opacity:.52}
.transfer-surface .tk-check:is(:hover,:focus-visible) img{opacity:1}
.transfer-surface .tk-list-select>i,.transfer-surface .tk-project-dot,.transfer-surface .tk-project-heading i{width:15px;height:15px;border-radius:50%}
.transfer-surface .tk-project-chip>i{border-radius:50%}
.transfer-surface .tk-pop-content .swatches .sw{width:24px;height:24px;min-width:24px;border-radius:50%}
.transfer-surface .tf-grid-cell[data-column="name"],.transfer-surface .tf-column-head[data-column="name"]{position:sticky;left:0;z-index:2;background:var(--pane-content);box-shadow:1px 0 var(--line)}
.transfer-surface .tf-column-head[data-column="name"]{z-index:4}
.transfer-surface .tf-grid-row:is(:hover,:focus-within) .tf-grid-cell[data-column="name"]{background:var(--pane-bar)}
.transfer-surface .tf-grid-cell[data-column="name"]{gap:6px}
.transfer-surface .tf-task-grip{display:grid;place-items:center;flex:none;width:18px;padding:0;opacity:0;cursor:grab;touch-action:none}
.transfer-surface .tf-task-actions{display:flex;align-items:center;justify-content:flex-end;gap:0;flex:none;margin-left:auto;opacity:0}
.transfer-surface .tf-task-actions .tk-icon-btn{width:24px;height:26px;padding:3px}
.transfer-surface .tf-grid-row:is(:hover,:focus-within) :is(.tf-task-grip,.tf-task-actions){opacity:1}
.transfer-surface .tf-grid-row .tf-row-select{position:absolute;left:0;width:16px;transform:translateX(-16px)}
.transfer-surface .tf-grid-cell .tq-inline-name{flex:1;min-width:35px}
.transfer-surface .tf-panning,.transfer-surface .tf-panning *{cursor:grabbing!important;user-select:none!important}
.transfer-surface .tf-grid-scroll{overscroll-behavior-x:contain}
.transfer-surface .tk-completed-at{margin:12px 20px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink-soft);font-size:12px}
@media(min-width:761px){body.task-drawer-open .transfer-surface .tasks-view .tk-workspace{padding-right:var(--calendar-side-width)}body.task-drawer-expanded .transfer-surface .tasks-view .tk-workspace{padding-right:min(900px,calc(100vw - 75px))}}
@media(max-width:1100px){.transfer-surface .tv-tabs .tk-search{flex-basis:170px}}
@media(max-width:760px){.transfer-surface .tv-tabs .tk-search{flex:0 0 125px;min-width:110px}.transfer-surface .tf-task-actions{opacity:1}.transfer-surface .tf-task-grip{opacity:.6}}

.transfer-surface .section-connections{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;flex:none}
.transfer-surface .tk-sidebar>.section-connections{margin-top:18px;padding:8px 2px;border-top:1px solid var(--line)}
.transfer-surface .section-connections .calendar-provider-link{font-size:10px;padding:6px 8px;min-height:30px}
.transfer-surface .section-connections-panel{width:100%;max-height:min(70dvh,560px);overflow:auto;padding:12px}
/* Компактная панель подключений: текст переносится по строкам, кнопки остаются по ширине содержимого. */
.transfer-surface .event-popup-connections{max-height:min(70dvh,560px);padding:0}
.transfer-surface .event-popup-connections .section-connections-panel{padding:12px 14px}
.transfer-surface .event-popup-connections :is(p,h3){margin:0 0 8px;font-size:12.5px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.transfer-surface .event-popup-connections h3{font-size:14px;font-weight:600}
.transfer-surface .event-popup-connections :is(.minibtn,.btn,.pbtn){width:auto;min-width:0;align-self:flex-start;padding:6px 12px;min-height:30px;font-size:12px;white-space:normal}
.transfer-surface .event-popup-connections .connection-settings{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.transfer-surface .event-popup-connections .connection-row{flex-wrap:wrap;gap:8px;padding:9px 0}
.transfer-surface .event-popup-connections .calendar-provider-link{font-size:11.5px;padding:6px 9px;min-height:30px}
.transfer-surface .section-connections .tk-error{width:100%;font-size:11px}

.transfer-surface .tk-assignment-status{margin:12px 18px;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:11px;color:var(--ink-soft)}.transfer-surface .tk-assignment-status p{margin:6px 0}.transfer-surface .tk-assignment-status select{width:100%;margin:6px 0}

.transfer-surface .tf-grid-section>.tk-section-head{position:sticky;left:0;width:max-content;max-width:100%;z-index:1;background:var(--pane-content)}

.transfer-surface .tv-tabs{overflow:visible}.transfer-surface .tv-tabs [role=tablist]{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}

/* TASKS-047: scoped task hierarchy, aligned columns and a smaller selection circle. */
.transfer-surface .tf-grid-row .tf-grid-cell[data-column="name"]{padding-left:calc(22px + var(--task-depth,0)*var(--task-indent-step,28px))}
.transfer-surface .tf-row-select-hit{position:absolute;left:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:18px;height:28px;cursor:pointer;padding:0;margin:0}
.transfer-surface .tf-row-select-hit .tf-row-select{position:static;transform:none;left:auto;top:auto;appearance:none;display:block;box-sizing:border-box;width:8px;height:8px;min-width:8px;max-width:8px;min-height:8px;max-height:8px;padding:0;margin:0;border-radius:50%;aspect-ratio:1;flex:none}
.transfer-surface .tf-row-select-hit .tf-row-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}
.transfer-surface .tf-subtask-toggle,.transfer-surface .tf-subtask-toggle-space{display:grid;place-items:center;width:16px;min-width:16px;height:24px;padding:0;flex:none;border-radius:5px}
.transfer-surface .tf-subtask-toggle:is(:hover,:focus-visible){background:var(--accent-soft)}
.transfer-surface .tf-task-actions{opacity:1}
.transfer-surface .tf-task-actions>.tk-icon-btn{opacity:0}
.transfer-surface .tf-task-actions>.has-count,.transfer-surface .tf-grid-row:is(:hover,:focus-within) .tf-task-actions>.tk-icon-btn{opacity:1}
.transfer-surface .tf-task-actions>.tf-count-action.has-count{width:auto;min-width:30px;display:flex;gap:3px;padding:3px}
.transfer-surface .tf-count-action small{font-size:11px;font-weight:400;color:var(--ink-faint)}
.transfer-surface .tf-subtask-add{display:grid;min-height:35px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .tf-subtask-add>button{position:sticky;left:0;grid-column:1;text-align:left;padding:7px 9px 7px calc(68px + var(--task-depth,0)*var(--task-indent-step,28px));white-space:nowrap;font-size:12px;color:var(--ink-faint);background:var(--pane-content)}
.transfer-surface .tf-subtask-add>button:is(:hover,:focus-visible){color:var(--ink);background:var(--accent-soft)}
.transfer-surface .tf-subtask-compose .tf-grid-cell[data-column="name"]{padding-left:calc(68px + var(--task-depth,0)*var(--task-indent-step,28px))}
@media(max-width:760px){
 .transfer-surface .tf-grid-row .tf-grid-cell[data-column="name"]{padding-left:calc(20px + var(--task-depth,0)*var(--task-indent-step,14px));gap:4px}
 .transfer-surface .tf-task-grip{width:12px}.transfer-surface .tf-task-grip img{width:12px}
 .transfer-surface .tf-subtask-toggle,.transfer-surface .tf-subtask-toggle-space{width:12px;min-width:12px}
 .transfer-surface .tf-grid-cell .tq-inline-name{min-width:0}
 .transfer-surface .tf-task-actions>.tk-icon-btn{width:20px;padding:2px;opacity:1}
 .transfer-surface .tf-task-actions>.tf-count-action.has-count{min-width:24px;gap:1px;padding:2px}.transfer-surface .tf-count-action small{font-size:9px}
 .transfer-surface .tf-subtask-add>button{padding-left:calc(52px + var(--task-depth,0)*var(--task-indent-step,14px))}
 .transfer-surface .tf-subtask-compose .tf-grid-cell[data-column="name"]{padding-left:calc(52px + var(--task-depth,0)*var(--task-indent-step,14px))}
}

/* TASKS-048: the project starts immediately with its unsectioned task rows. */
.transfer-surface .tf-grid-section.tf-unsectioned{padding-top:0}
.transfer-surface .tf-completed-section{margin-top:8px}

/* TASKS-049: keep the gutter outside horizontal scrolling and freeze row actions. */
.transfer-surface .tf-grid-scroll{margin:0 18px;padding:0 0 30px;isolation:isolate}
.transfer-surface .tf-grid-section>.tk-add-row{position:sticky;left:0;width:var(--task-name-width,280px);max-width:100%;z-index:2;background:var(--pane-content)}
.transfer-surface .tf-grid-scroll>.tk-add-section{position:sticky;left:0;width:max-content;z-index:2;background:var(--pane-content)}
.transfer-surface .tf-grid-scroll :is(.tf-grid-cell,.tf-column-head)[data-column="name"]{background-color:var(--pane-content);background-clip:border-box}
.transfer-surface .tf-grid-scroll .tf-grid-row:is(:hover,:focus-within) .tf-grid-cell[data-column="name"]{background-color:var(--pane-bar)}

/* Task row context menu: cursor anchored, keyboard reachable and shared by list, board and calendar. */
.transfer-surface :is(.tf-grid-row,.tk-card,.tv-calendar-task).context-open{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
.transfer-surface .tk-context-menu{position:fixed;z-index:430;width:min(310px,calc(100vw - 24px));padding:6px;display:flex;flex-direction:column;gap:1px;background:var(--sheet-bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 44px #0717222b;color:var(--ink)}
.transfer-surface .tk-context-submenu{width:min(260px,calc(100vw - 24px));z-index:431}
.transfer-surface .tk-context-menu hr{height:1px;border:0;background:var(--line);margin:4px -6px}
.transfer-surface .tk-context-item{display:flex;align-items:center;gap:10px;width:100%;min-height:33px;padding:6px 9px;border-radius:7px;text-align:left;color:var(--ink);font-size:12.5px;line-height:1.35}
.transfer-surface .tk-context-item>span:not(.tk-context-check){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-context-item>.transfer-icon{flex:none;opacity:.72}
.transfer-surface .tk-context-item>.transfer-icon:last-child{margin-left:auto;opacity:.82}
.transfer-surface .tk-context-item:hover,.transfer-surface .tk-context-item:focus-visible,.transfer-surface .tk-context-item[aria-expanded=true]{background:var(--accent-soft);outline:0}
.transfer-surface .tk-context-item:disabled{opacity:.5;cursor:default}
.transfer-surface .tk-context-item.tk-danger{color:var(--danger)}
.transfer-surface .tk-context-item.tk-danger>.transfer-icon{filter:none;opacity:1}
.transfer-surface .tk-context-check{display:grid;place-items:center;width:15px;height:20px;flex:none}
.transfer-surface .tk-context-back{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 8px;border-radius:7px;color:var(--ink-soft);font-size:12px;text-align:left}
.transfer-surface .tk-context-back:hover,.transfer-surface .tk-context-back:focus-visible{background:var(--accent-soft);outline:0}
.transfer-surface .tk-context-search{display:flex;align-items:center;gap:7px;margin:4px 3px 7px;padding:0 9px;height:36px;border:1px solid var(--line);border-radius:7px;background:var(--field-bg)}
.transfer-surface .tk-context-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.transfer-surface .tk-context-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px}
.transfer-surface .tk-context-candidates{max-height:min(340px,45vh);overflow:auto;padding-right:2px}
.transfer-surface .tk-context-candidates>small{display:block;padding:14px 10px;color:var(--ink-faint);font-size:12px}
.transfer-surface .tk-context-error{margin:7px 8px 4px;color:var(--danger);font-size:11px;line-height:1.4}
/* Пункт меню с пояснением: веха и согласование объясняются прямо в подменю. */
.transfer-surface .tk-context-item.has-hint{align-items:flex-start;min-height:46px;padding-top:7px;padding-bottom:7px}
.transfer-surface .tk-context-item.has-hint>.transfer-icon{margin-top:2px}
.transfer-surface .tk-context-item.has-hint>span:not(.tk-context-check){white-space:normal;overflow:visible;text-overflow:clip}
.transfer-surface .tk-context-item>span small{display:block;margin-top:2px;color:var(--ink-faint);font-size:11px;line-height:1.35;white-space:normal}
/* Веха и согласование: знак рядом с круглой отметкой и плашка решения. */
.transfer-surface .tf-task-kind{display:inline-grid;place-items:center;width:21px;height:21px;flex:none;border-radius:6px;color:var(--ink-soft)}
.transfer-surface .tf-task-kind.is-milestone{background:color-mix(in srgb,var(--t-violet) 18%,transparent)}
.transfer-surface .tf-task-kind.is-approval{background:color-mix(in srgb,var(--t-teal) 18%,transparent)}
.transfer-surface .tk-approval-chip{flex:none;padding:2px 9px;border-radius:999px;background:var(--pane-side);color:var(--ink-soft);font-size:11px;line-height:1.6;white-space:nowrap}
.transfer-surface .tk-approval-chip.is-approved{background:var(--ok);color:#10231b}
.transfer-surface .tk-approval-chip.is-changes{background:var(--warn);color:#2a2109}
.transfer-surface .tk-approval-chip.is-rejected{background:var(--crit);color:#2d100e}
.transfer-surface .tk-kind-banner{display:flex;align-items:flex-start;gap:10px;margin:10px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--pane-side)}
.transfer-surface .tk-kind-banner>div{min-width:0;flex:1}
.transfer-surface .tk-kind-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.transfer-surface .tk-kind-banner strong{font-size:13px;font-weight:600;color:var(--ink)}
.transfer-surface .tk-kind-banner small{display:block;margin-top:2px;color:var(--ink-faint);font-size:11px;line-height:1.45}
.transfer-surface .tk-kind-banner>.transfer-icon{flex:none;margin-top:1px}
.transfer-surface .tk-approval-actions{display:flex;flex-wrap:wrap;gap:6px}
.transfer-surface .tk-approval-btn{min-height:30px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);font-size:12px}
.transfer-surface .tk-approval-btn:hover,.transfer-surface .tk-approval-btn:focus-visible{background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-approval-btn.active{border-color:transparent;color:var(--ink)}
.transfer-surface .tk-approval-btn.active.is-approved{background:color-mix(in srgb,var(--ok) 26%,transparent)}
.transfer-surface .tk-approval-btn.active.is-changes{background:color-mix(in srgb,var(--warn) 30%,transparent)}
.transfer-surface .tk-approval-btn.active.is-rejected{background:color-mix(in srgb,var(--crit) 26%,transparent)}
/* Цвет и значок проекта в его контекстном меню. */
.transfer-surface .tk-project-appearance{width:min(264px,calc(100vw - 24px));padding:11px}
.transfer-surface .tk-project-appearance>strong{display:block;margin:0 2px 8px;color:var(--ink-soft);font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.transfer-surface .tk-project-colors{margin-bottom:12px}
.transfer-surface .tk-project-colors .swatches{grid-template-columns:repeat(10,1fr);gap:6px;max-width:100%}
.transfer-surface .tk-icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.transfer-surface .tk-icon-cell{display:grid;place-items:center;height:38px;border:1px solid transparent;border-radius:8px;color:var(--ink-soft)}
.transfer-surface .tk-icon-cell:hover,.transfer-surface .tk-icon-cell:focus-visible{background:var(--accent-soft);outline:0}
.transfer-surface .tk-icon-cell.active{border-color:var(--accent);background:var(--accent-soft)}
/* Отметка по типу записи: ромб у вехи и штамп с решением у согласования. */
.transfer-surface .tk-check-milestone{width:15px;height:15px;min-width:15px;border-radius:3px;transform:rotate(45deg);border-color:var(--ink-faint)}
.transfer-surface .tk-check-milestone img{transform:rotate(-45deg);width:10px;height:10px}
.transfer-surface .tk-check-milestone:is(:hover,:focus-visible){background:var(--accent-soft)}
.transfer-surface .tk-check-milestone.done{border-color:var(--ok);background:var(--ok)}
.transfer-surface .tk-check-approval{border-radius:6px;border-color:var(--t-teal)}
.transfer-surface .tk-check-approval img{opacity:.9}
.transfer-surface .tk-check-approval:is(:hover,:focus-visible){background:color-mix(in srgb,var(--t-teal) 16%,transparent)}
.transfer-surface .tk-check-approval.is-changes{border-color:var(--warn);background:var(--warn)}
.transfer-surface .tk-check-approval.is-approved{border-color:var(--ok);background:var(--ok)}
.transfer-surface .tk-check-approval.is-rejected{border-color:var(--crit);background:var(--crit)}
.transfer-surface :is(.tk-check-approval.is-approved,.tk-check-approval.is-rejected,.tk-check-approval.is-changes,.tk-check-milestone.done) img{opacity:1;filter:brightness(0) invert(1)!important}
.transfer-surface .tf-grid-cell .tk-check-milestone{margin:0 1px}
.transfer-surface .tk-approval-menu .tk-menu-item.active{background:var(--accent-soft)}
.transfer-surface .tk-approval-badge{display:grid;place-items:center;width:19px;height:19px;flex:none;border-radius:5px;border:1px solid var(--line)}
.transfer-surface .tk-approval-badge img{width:12px;height:12px;opacity:.75}
.transfer-surface .tk-approval-badge:is(.is-approved,.is-changes,.is-rejected){border-color:transparent}
.transfer-surface .tk-approval-badge:is(.is-approved,.is-changes,.is-rejected) img{opacity:1;filter:brightness(0) invert(1)!important}
.transfer-surface .tk-approval-badge.is-approved{background:var(--ok)}
.transfer-surface .tk-approval-badge.is-changes{background:var(--warn)}
.transfer-surface .tk-approval-badge.is-rejected{background:var(--crit)}
.transfer-surface .tk-approval-chip.is-none{background:transparent;color:var(--ink-faint)}
.transfer-surface .tk-approval-chip small{margin-left:4px;font-size:10px;opacity:.75}
/* Согласования внутри задачи. */
.transfer-surface .tk-approval-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .tk-approval-name{flex:1;min-width:0;text-align:left;color:var(--ink);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-approval-name:is(:hover,:focus-visible){text-decoration:underline;outline:0}
/* Прогресс проекта рядом с его названием. */
.transfer-surface .tk-project-progress{display:inline-flex;align-items:center;gap:7px;margin-left:12px;flex:none}
.transfer-surface .tk-progress-track{width:74px;height:6px;border-radius:999px;background:var(--pane-side);overflow:hidden}
.transfer-surface .tk-progress-fill{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .2s ease}
.transfer-surface .tk-project-progress small{color:var(--ink-soft);font-size:11px;font-variant-numeric:tabular-nums}
/* Архив проектов. */
.transfer-surface .tk-archive-open{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:8px;color:var(--ink-soft);font-size:12px;text-align:left}
.transfer-surface .tk-archive-open small{margin-left:auto;color:var(--ink-faint)}
.transfer-surface .tk-archive-open:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-archive{width:min(430px,calc(100vw - 32px))}
.transfer-surface .tk-archive-list{max-height:min(320px,45dvh);overflow:auto;margin-bottom:18px}
.transfer-surface .tk-archive-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline-soft);font-size:12px}
.transfer-surface .tk-archive-row>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-archive-row .tk-text-btn{flex:none}
/* Комментарии на всю правую панель. */
.transfer-surface .tk-drawer.comments-full .tk-drawer-scroll>*:not(.tk-activity){display:none}
.transfer-surface .tk-drawer.comments-full .tk-activity{border-top:0;min-height:100%}
.transfer-surface .tk-drawer.comments-full .tk-activity>header{position:sticky;top:0;z-index:2;background:var(--pane-side);margin:-16px -18px 14px;padding:16px 18px 9px}
.transfer-surface .tk-comment-text{display:block;width:100%;min-height:34px;padding:5px 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:12px;line-height:1.5;resize:none;field-sizing:content}
.transfer-surface .tk-comment-text:is(:hover,:focus){border-color:var(--line);outline:0}
.transfer-surface .tk-comment-text:focus{background:var(--field-bg,var(--pane-content))}
/* Подсветка задачи при переходе от её подзадачи. */
@keyframes tf-flash{0%,100%{background:transparent}25%,75%{background:color-mix(in srgb,var(--accent) 26%,transparent)}}
.transfer-surface .tf-grid-row.tf-flash,.transfer-surface .tk-card.tf-flash{animation:tf-flash 1s ease-in-out 2}
/* Столбец имени закреплён и имеет свой непрозрачный фон, поэтому подсветку строки он перекрывает.
   Мигать должна вся строка вместе с названием, поэтому ячейка имени подсвечивается своим кадром поверх её фона. */
@keyframes tf-flash-name{0%,100%{background-color:var(--pane-content)}25%,75%{background-color:color-mix(in srgb,var(--accent) 26%,var(--pane-content))}}
.transfer-surface .tf-grid-row.tf-flash .tf-grid-cell[data-column="name"]{animation:tf-flash-name 1s ease-in-out 2}
.transfer-surface .tq-parent{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-faint);font-size:11px}
.transfer-surface .tq-parent:is(:hover,:focus-visible){color:var(--ink);text-decoration:underline;outline:0}
/* Свои подсказки: появляются через секунду, а не по таймеру системы. */
.transfer-surface .tk-icon-btn{position:relative}
/* Текст подсказки остаётся в кнопке для чтения с экрана, но не рисуется на месте:
   внутри прокручиваемого списка или таблицы он обрезался краем контейнера. */
.transfer-surface .tk-hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
/* Видимая подсказка: один слой поверх интерфейса, положение считает task-hint.ts. */
.transfer-surface .tk-hint-layer{position:fixed;left:0;top:0;z-index:260;width:max-content;max-width:210px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--tip-bg);color:var(--tip-ink);font-size:11px;font-weight:450;line-height:1.35;text-align:center;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;box-shadow:0 4px 14px #0000002e}
.transfer-surface .tk-hint-layer.is-on{opacity:1;visibility:visible;transition:opacity 120ms ease}
/* Страница проектов: активные и архив. */
.transfer-surface .tk-projects-open{flex:1;min-width:0;margin-left:2px;text-align:left;padding:4px 2px;color:var(--ink-soft);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-projects-open:is(:hover,:focus-visible){color:var(--ink);text-decoration:underline;outline:0}
.transfer-surface .tk-projects-page{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.transfer-surface .tk-projects-page .tk-primary{display:inline-flex;align-items:center;gap:7px}
.transfer-surface .tk-projects-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line)}
.transfer-surface .tk-projects-tab{padding:7px 13px;border-radius:8px;color:var(--ink-soft);font-size:12px}
.transfer-surface .tk-projects-tab:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-projects-tab.active{background:var(--pane-content);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.transfer-surface .tk-projects-filters .tk-search{flex:0 1 260px;min-width:150px}
/* Распорка уводит фильтр статуса в конец строки; на узком экране строка переносится как прежде. */
.transfer-surface .tk-projects-filters .tk-spacer{flex:1 1 0;min-width:0}
.transfer-surface .tk-projects-filters .tk-status-select{flex:none;margin-left:auto}
.transfer-surface .tk-status-filter{display:flex;gap:6px;flex-wrap:wrap}
.transfer-surface .tk-status-pill{padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font-size:11px}
.transfer-surface .tk-status-pill:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-status-pill.active{border-color:transparent;background:var(--accent-soft);color:var(--ink)}
.transfer-surface .tk-status-pill.is-ok{color:var(--ok)}
.transfer-surface .tk-status-pill.is-warn{color:var(--warn)}
.transfer-surface .tk-status-pill.is-crit{color:var(--crit)}
.transfer-surface .tk-status-pill.is-hold{color:var(--t-blue)}
.transfer-surface .tk-status-pill.is-done{color:var(--ok)}
.transfer-surface .tk-status-pill.is-ok.active{background:color-mix(in srgb,var(--ok) 24%,transparent);color:var(--ink)}
.transfer-surface .tk-status-pill.is-warn.active{background:color-mix(in srgb,var(--warn) 28%,transparent);color:var(--ink)}
.transfer-surface .tk-status-pill.is-crit.active{background:color-mix(in srgb,var(--crit) 24%,transparent);color:var(--ink)}
.transfer-surface .tk-status-pill.is-hold.active{background:color-mix(in srgb,var(--t-blue) 22%,transparent);color:var(--ink)}
.transfer-surface .tk-status-pill.is-done.active{background:var(--ok);color:#10231b}
.transfer-surface .tk-status-pill.is-muted.active{background:var(--pane-side);color:var(--ink)}
.transfer-surface .tk-projects-table{flex:1;min-height:0;overflow:auto;padding:0 18px 18px}
.transfer-surface .tk-projects-row{display:grid;grid-template-columns:minmax(160px,2fr) 118px 160px 132px 108px 138px 124px;align-items:center;gap:9px;min-height:44px;border-bottom:1px solid var(--hairline-soft);font-size:12px}
.transfer-surface .tk-projects-row.is-head{position:sticky;top:0;z-index:1;background:var(--pane-content);color:var(--ink-faint);font-size:11px;min-height:38px}
.transfer-surface .tk-projects-name{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;color:var(--ink);font-size:12.5px}
.transfer-surface .tk-projects-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-projects-name:is(:hover,:focus-visible){text-decoration:underline;outline:0}
.transfer-surface .tk-status-cell{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 6px;border-radius:7px}
.transfer-surface .tk-status-cell:is(:hover,:focus-visible){background:var(--accent-soft);outline:0}
.transfer-surface .tk-projects-progress{display:flex;align-items:center;gap:8px}
.transfer-surface .tk-projects-plain{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tk-projects-actions{display:flex;gap:2px;justify-content:flex-end;opacity:0}
.transfer-surface .tk-projects-row:is(:hover,:focus-within) .tk-projects-actions{opacity:1}
.transfer-surface .tk-projects-empty{padding:26px 2px}
/* Статус проекта. */
.transfer-surface .tk-status-chip{padding:3px 10px;border-radius:999px;background:var(--pane-side);color:var(--ink-soft);font-size:11px;white-space:nowrap}
.transfer-surface .tk-status-chip.is-ok{background:color-mix(in srgb,var(--ok) 26%,transparent);color:var(--ink)}
.transfer-surface .tk-status-chip.is-warn{background:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--ink)}
.transfer-surface .tk-status-chip.is-crit{background:color-mix(in srgb,var(--crit) 26%,transparent);color:var(--ink)}
.transfer-surface .tk-status-chip.is-hold{background:color-mix(in srgb,var(--t-blue) 22%,transparent);color:var(--ink)}
.transfer-surface .tk-status-chip.is-done{background:var(--ok);color:#fff}
.transfer-surface .tk-status-chip.is-muted{background:var(--pane-side);color:var(--ink-faint)}
.transfer-surface .tk-status-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-faint)}
.transfer-surface .tk-status-dot.is-ok,.transfer-surface .tk-status-dot.is-done{background:var(--ok)}
.transfer-surface .tk-status-dot.is-warn{background:var(--warn)}
.transfer-surface .tk-status-dot.is-crit{background:var(--crit)}
.transfer-surface .tk-status-dot.is-hold{background:var(--t-blue)}
.transfer-surface .tk-status-dot.is-muted,.transfer-surface .tk-status-dot.is-none{background:var(--ink-faint);opacity:.6}
/* Статус проекта рядом с его названием. */
.transfer-surface .tk-status-set{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font-size:11.5px;white-space:nowrap}
.transfer-surface .tk-status-set:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-status-set.is-set{color:var(--ink)}
.transfer-surface .tk-state-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:var(--pane-side);color:var(--ink-soft);font-size:11px;white-space:nowrap}
.transfer-surface .tk-state-chip.is-ok{color:var(--ink)}
.transfer-surface .tk-status-select{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;color:var(--ink-soft);font-size:12px}
.transfer-surface .tk-status-select:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--ink);outline:0}
.transfer-surface .tk-finish-choice{border:0;margin:0 0 14px;padding:0;min-width:0}
.transfer-surface .tk-finish-choice legend{padding:0 0 7px;color:var(--ink-soft);font-size:11px}
.transfer-surface .tk-rename-field{display:flex;flex-direction:column;gap:7px;margin:14px 0 18px;color:var(--ink-soft);font-size:11px}
/* Окно завершения проекта. */
.transfer-surface .tk-project-complete{width:min(460px,calc(100vw - 32px))}
/* Итог проекта: сводка считается по задачам, а этот текст владелец пишет сам и правит позже. */
.transfer-surface .tk-note-label{display:block;margin:0 0 7px;color:var(--ink-soft);font-size:11px;line-height:1.45}
.transfer-surface .tk-note-field{display:block;width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-fld,10px);background:var(--field-bg,var(--pane-content));color:var(--ink);font:13px/1.5 var(--sans);resize:vertical;min-height:62px}
.transfer-surface .tk-note-field:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.transfer-surface .tk-finish-note{border:0;margin:0 0 14px;padding:0;min-width:0}
.transfer-surface .tk-finish-note legend{padding:0 0 7px;color:var(--ink-soft);font-size:11px}
.transfer-surface .tk-finish-note small{display:block;margin-top:6px;font-size:11px}
.transfer-surface .tk-note-dialog{width:min(520px,calc(100vw - 32px))}
.transfer-surface .tk-note-dialog .tk-note-field{margin-bottom:14px}
.transfer-surface .tk-projects-note{display:block;margin-top:2px;color:var(--ink-faint);font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.transfer-surface .tk-projects-name:has(.tk-projects-note){align-items:flex-start;padding-top:1px}
.transfer-surface .tk-complete-summary{margin-bottom:18px}
.transfer-surface .tk-complete-line{display:grid;grid-template-columns:120px 84px 1fr;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--hairline-soft);font-size:12px}
.transfer-surface .tk-complete-line>span:first-child{color:var(--ink-soft)}
.transfer-surface .tk-complete-line strong{font-weight:550;font-size:12px}
.transfer-surface .tk-complete-line .tk-progress-track{width:100%}
@media(max-width:760px){
 .transfer-surface .tk-projects-row{grid-template-columns:minmax(110px,1.5fr) 108px 120px 96px;font-size:11px}
 .transfer-surface .tk-projects-row>span:nth-child(5),.transfer-surface .tk-projects-row>span:nth-child(6){display:none}
 .transfer-surface .tk-projects-actions{opacity:1}
}
/* Такие же компактные меню столбцов, ячеек и каталога полей. */
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu){gap:2px}
.transfer-surface .tf-option{min-height:31px;padding:6px 9px;gap:9px;font-size:12px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu) strong{padding:5px 9px}
.transfer-surface :is(.tf-cell-pop,.tf-column-menu,.tf-add-menu) small{padding:3px 9px;line-height:1.45}
.transfer-surface :is(.tf-column-menu,.tf-add-menu) hr{margin:3px -7px}
.transfer-surface .tf-option-edit{margin-top:3px}
/* Компактное меню вкладки: все пункты видны без прокрутки. */
.transfer-surface .tk-pop-content[role=menu]{gap:2px;padding:8px;max-height:min(760px,calc(100dvh - 20px))}
.transfer-surface .tk-pop-content[role=menu] .tk-menu-item{min-height:31px;padding:6px 8px}
.transfer-surface .tk-pop-content[role=menu] hr{margin:4px -8px;width:calc(100% + 16px)}
/* Закреплённый проект отмечен в боковом списке. */
.transfer-surface .tk-list-select>.transfer-icon{flex:none;opacity:.55}
@media(max-width:620px){.transfer-surface .tk-context-menu{width:min(292px,calc(100vw - 20px));padding:5px}.transfer-surface .tk-context-item{min-height:32px;font-size:12px}}

/* Two-step project creation, using the existing workspace palette. */
.transfer-surface .tpw-wizard{position:fixed;inset:0;z-index:200;overflow:auto;overscroll-behavior:contain;padding:86px 48px 40px;background:var(--pane-content);color:var(--ink)}
.transfer-surface .tpw-navigation{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between}
.transfer-surface .tpw-navigation button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink-soft)}
.transfer-surface .tpw-navigation button:hover{background:var(--accent-soft)}
.transfer-surface .tpw-name-step{width:min(440px,100%);margin:7vh auto 0;display:flex;flex-direction:column;gap:16px}
.transfer-surface .tpw-name-step h1{font-size:44px;line-height:1.15;font-weight:500;letter-spacing:-1.4px;margin:0 0 38px}
.transfer-surface .tpw-name-step>label{font-size:16px;font-weight:550;color:var(--ink-soft)}
.transfer-surface .tpw-name-step>input{height:54px;min-height:54px;font-size:20px;padding:10px 14px}
.transfer-surface .tpw-colors{margin:6px 0 20px;padding:0;border:0}
.transfer-surface .tpw-colors legend{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.transfer-surface .tpw-colors .swatches{display:grid;grid-template-columns:repeat(10,26px);gap:10px;width:max-content}
.transfer-surface .tpw-colors .sw{width:26px;height:26px;min-width:26px;border-radius:50%}
.transfer-surface .tpw-primary{min-height:46px;padding:11px 18px;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-ink);font-weight:550}
.transfer-surface .tpw-wizard button:disabled{cursor:default;opacity:.5}
.transfer-surface .tpw-wizard :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.transfer-surface .tpw-layout{display:grid;grid-template-columns:minmax(400px,540px) minmax(420px,1fr);gap:48px;max-width:1680px;margin:0 auto}
.transfer-surface .tpw-choices{min-width:0}
.transfer-surface .tpw-choices h2{margin:0;font-size:25px;font-weight:550;line-height:1.25;letter-spacing:-.5px;outline:0}
.transfer-surface .tpw-intro{margin:12px 0 28px;font-size:13px;color:var(--ink-faint)}
.transfer-surface .tpw-view-group{margin:0 0 28px}
.transfer-surface .tpw-view-group h3{margin:0 0 10px;font-size:12px;color:var(--ink-faint);font-weight:450}
.transfer-surface .tpw-view-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.transfer-surface .tpw-option{display:flex;align-items:center;gap:14px;min-height:84px;padding:14px;text-align:left;border:1px solid var(--line);border-radius:12px;background:transparent;min-width:0}
.transfer-surface .tpw-option.selected{border-color:var(--accent);background:var(--accent-soft)}
.transfer-surface .tpw-option.selected:disabled{opacity:1}
.transfer-surface .tpw-option-icon{flex:none;color:var(--accent);display:grid;place-items:center;width:22px}
.transfer-surface .tpw-option>span:last-child{min-width:0}
.transfer-surface .tpw-option strong{font-size:13px;line-height:1.3;font-weight:550;display:block}
.transfer-surface .tpw-option strong small{font-size:10px;color:var(--ink-soft);font-weight:400}
.transfer-surface .tpw-option strong+span{display:block;font-size:11px;line-height:1.4;color:var(--ink-faint);margin-top:5px}
.transfer-surface .tpw-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:42px}
.transfer-surface .tpw-footer>button:first-child{min-height:46px;border:1px solid var(--line);border-radius:var(--r-btn)}
.transfer-surface .tpw-preview{min-width:0;align-self:start;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--pane-content);box-shadow:0 8px 36px #00000005}
.transfer-surface .tpw-preview>header{display:flex;align-items:center;gap:13px;padding:25px 25px 14px;min-width:0}
.transfer-surface .tpw-preview>header i{width:30px;height:30px;border-radius:50%;flex:none}
.transfer-surface .tpw-preview>header strong{font-size:17px;font-weight:550;overflow-wrap:anywhere;min-width:0}
.transfer-surface .tpw-preview>header small{font-size:10px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}
.transfer-surface .tpw-preview>nav{display:flex;gap:18px;overflow-x:auto;padding:0 25px;border-bottom:1px solid var(--line)}
.transfer-surface .tpw-preview>nav>button{font-size:12px;white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent;color:var(--ink-soft)}
.transfer-surface .tpw-preview>nav>button[aria-pressed=true]{border-color:var(--accent);color:var(--ink);font-weight:550}
.transfer-surface .tpw-skeleton{display:block;height:8px;max-width:100%;width:78%;border-radius:5px;background:var(--ink-faint);opacity:.18}
.transfer-surface .tpw-skeleton.short{width:40%}
.transfer-surface .tpw-tag{display:block;width:45px;height:10px;border-radius:5px;background:var(--accent);opacity:.4}
.transfer-surface .tpw-preview-list{padding:30px 25px 55px;min-height:460px}
.transfer-surface .tpw-preview-list>div{display:grid;grid-template-columns:minmax(120px,1fr) 12% 25% 16%;min-height:42px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .tpw-preview-list>div:nth-child(4){margin-top:26px}
.transfer-surface .tpw-preview-list>div>span{display:flex;align-items:center;gap:10px;min-width:0;padding:0 12px;border-right:1px solid var(--hairline-soft)}
.transfer-surface .tpw-preview-list>div>span:first-child{padding-left:0}
.transfer-surface .tpw-preview-list>div>span:last-child{border:0}
.transfer-surface .tpw-preview-list>div>span>i:not(.tpw-tag){width:14px;height:14px;border:1px solid var(--line);border-radius:50%;flex:none}
.transfer-surface .tpw-preview-list .ico{opacity:.35;flex:none}
.transfer-surface .tpw-preview-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:30px 22px;min-height:460px}
.transfer-surface .tpw-preview-board article{padding:18px 12px;margin-top:16px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:15px}
.transfer-surface .tpw-preview-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:25px;min-height:460px}
.transfer-surface .tpw-preview-calendar>div{min-width:0;padding:8px;border:1px solid var(--hairline-soft)}
.transfer-surface .tpw-preview-calendar small{font-size:10px;color:var(--ink-faint)}
.transfer-surface .tpw-preview-calendar .tpw-tag{width:100%;margin-top:9px}
.transfer-surface .tpw-preview-dashboard{padding:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-height:460px}
.transfer-surface .tpw-preview-dashboard article{padding:16px;border:1px solid var(--line);border-radius:12px;height:100px}
.transfer-surface .tpw-preview-dashboard strong{font-size:26px;display:block;margin-top:12px;font-weight:400}
.transfer-surface .tpw-preview-dashboard>div{grid-column:1/-1;height:220px;display:flex;align-items:flex-end;gap:20px;padding:20px;border-bottom:1px solid var(--line)}
.transfer-surface .tpw-preview-dashboard>div>i{flex:1;background:var(--accent);opacity:.3;border-radius:6px 6px 0 0}
.transfer-surface .tpw-preview-page{display:flex;flex-direction:column;gap:26px;padding:48px 36px;min-height:460px}
.transfer-surface .tpw-preview-page>.tpw-skeleton:first-child{height:16px;margin-bottom:20px}
.transfer-surface .tpw-preview-files{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:30px;min-height:460px}
.transfer-surface .tpw-preview-files article{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;border:1px solid var(--line);border-radius:12px}
@media(max-width:1100px){.transfer-surface .tpw-layout{grid-template-columns:1fr;max-width:720px;gap:36px}.transfer-surface .tpw-footer{margin-top:26px}}
@media(max-width:760px){
 .transfer-surface .tf-grid-scroll{margin:0 8px;padding:0 0 20px}
 .transfer-surface .tpw-wizard{padding:78px 20px 28px}
 .transfer-surface .tpw-navigation{left:14px;right:14px;top:18px}
 .transfer-surface .tpw-name-step{margin:4vh auto 0}.transfer-surface .tpw-name-step h1{font-size:36px;margin-bottom:24px}
 .transfer-surface .tpw-colors .swatches{grid-template-columns:repeat(10,22px);gap:10px}.transfer-surface .tpw-colors .sw{width:22px;height:22px;min-width:22px}
 .transfer-surface .tpw-view-options{grid-template-columns:1fr}.transfer-surface .tpw-option{min-height:76px}
 .transfer-surface .tpw-choices h2{font-size:25px}.transfer-surface .tpw-preview>header{padding:18px 15px 10px}
 .transfer-surface .tpw-preview>header small{display:none}.transfer-surface .tpw-preview>nav{padding:0 15px}
 .transfer-surface .tpw-preview-list{padding:20px 14px;min-height:370px}.transfer-surface .tpw-preview-list>div{grid-template-columns:minmax(100px,1fr) 18% 28%}
 .transfer-surface .tpw-preview-list>div>span:last-child{display:none}
}

/* TASKS-050: project identity, scoped task filters and progress fields. */
.transfer-surface .tk-project-icon{display:block;flex:none;vertical-align:middle}
.transfer-surface .tk-list-select>.tk-project-icon{width:19px;height:19px}
.transfer-surface .tk-projects-collapse{display:flex;align-items:center;gap:6px;flex:none;min-width:0;padding:4px 0;text-align:left;font-size:inherit;color:inherit}
.transfer-surface .tk-projects-collapse>span{flex:1}
.transfer-surface #tk-project-list[hidden]{display:none}
.transfer-surface .tk-workspace-title{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.transfer-surface .tk-workspace-title>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:550}
.transfer-surface .tk-workspace-title.is-project>strong{font-size:22px;letter-spacing:-.3px}
.transfer-surface .tk-task-filter-button{display:flex;align-items:center;gap:6px;flex:none;padding:6px 9px;min-height:30px;border-radius:8px;color:var(--ink-soft);font-size:12px}
.transfer-surface .tk-task-filter-button:is(:hover,.active){background:var(--accent-soft);color:var(--ink)}
.transfer-surface .tk-task-filter-button small{min-width:16px;height:16px;border-radius:50%;font-size:10px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.transfer-surface .event-popup-task-filters{padding:0;max-height:calc(100dvh - 24px)}
.transfer-surface .tk-task-filters{padding:24px;min-width:0}
.transfer-surface .tk-task-filters>header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}
.transfer-surface .tk-task-filters>header strong{font-weight:550;font-size:15px}
.transfer-surface .tk-task-filters>header button{font-size:12px;color:var(--ink-soft)}
.transfer-surface .tk-task-filters button:disabled{opacity:.4;cursor:default}
.transfer-surface .tk-task-filters>h3{font-size:12px;color:var(--ink-faint);font-weight:500;margin:0 0 13px}
.transfer-surface .tk-quick-filters{display:flex;flex-wrap:wrap;gap:10px}
.transfer-surface .tk-quick-filter{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px;min-height:32px;text-align:left}
.transfer-surface .tk-quick-filter[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.transfer-surface .tk-completed-filter{display:flex}
.transfer-surface .tk-completed-filter>.tk-quick-filter{border-radius:999px 0 0 999px}
.transfer-surface .tk-completed-filter>button:last-child{display:grid;place-items:center;border:1px solid var(--line);border-left:0;border-radius:0 999px 999px 0;padding:0 8px}
.transfer-surface .tk-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.transfer-surface .tk-active-filters>button{border-radius:7px;padding:5px 8px;font-size:11px;color:var(--ink-soft);background:var(--accent-soft)}
.transfer-surface .tk-add-filter{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:25px;padding:5px 0}
.transfer-surface .tk-filter-menu{display:flex;flex-direction:column;max-width:300px;margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--pane-content)}
.transfer-surface .tk-filter-menu>button{display:flex;align-items:center;gap:9px;padding:10px 9px;font-size:13px;text-align:left;border-radius:7px}
.transfer-surface .tk-filter-menu>button:hover{background:var(--accent-soft)}
.transfer-surface .tk-filter-editor{position:relative;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.transfer-surface .tk-filter-editor-close{position:absolute;right:0;top:12px;width:28px;height:28px;display:grid;place-items:center}
.transfer-surface .tk-filter-editor .tf-filter-form{padding-right:35px}
.transfer-surface .tf-task-progress{display:flex;align-items:center;gap:10px;width:100%;min-width:0;font-size:13px;font-variant-numeric:tabular-nums}
.transfer-surface .tf-progress-track{height:8px;background:var(--hairline-soft);border-radius:999px;overflow:hidden;flex:1;min-width:35px;max-width:150px}
.transfer-surface .tf-progress-track>i{display:block;height:100%;background:var(--ok);border-radius:inherit}
.transfer-surface .tf-status-pill{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--status-color) 18%,var(--pane-content));color:var(--ink)}
.transfer-surface .tf-status-pill>i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--status-color)}
.transfer-surface .tf-status-pill.unset{color:var(--ink-soft);background:var(--accent-soft)}
.transfer-surface .tf-status-pill.unset>i{background:transparent;border:1.5px solid var(--ink-faint)}
@media(max-width:760px){
 .transfer-surface .tk-workspace-title.is-project>strong{font-size:17px}
 .transfer-surface .tk-workspace-title{gap:8px}.transfer-surface .tk-workspace-title>.tk-project-icon{width:22px;height:22px}
 .transfer-surface .tk-task-filter-button{padding:6px}.transfer-surface .tk-task-filter-button>span{display:none}
 .transfer-surface .tv-tabs .tk-search{min-width:95px;margin-left:3px;flex-basis:180px}
 .transfer-surface .tk-task-filters{padding:18px 14px}.transfer-surface .tk-quick-filter{font-size:11px;white-space:normal}
}

/* ===== Главная раздела задач: обзор поверх тех же данных, набор виджетов выбирает владелец ===== */
.transfer-surface .tk-home-link{display:flex;width:100%;align-items:center;gap:10px;padding:10px;border:0;background:none;border-radius:9px;font:inherit;font-size:13px;text-align:left;color:var(--ink-soft);cursor:pointer}
.transfer-surface .tk-home-link span{flex:1}
.transfer-surface .tk-home-link:is(:hover,:focus-visible){color:var(--ink);outline:0}
.transfer-surface .tk-home-link[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
.transfer-surface .tk-bucket-divider{height:1px;margin:8px 10px;background:var(--line)}
.transfer-surface .tkh-home{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:22px 24px 24px;gap:16px}
.transfer-surface .tkh-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.transfer-surface .tkh-greeting{flex:1 1 260px;min-width:0}
.transfer-surface .tkh-greeting p{margin:0 0 5px;color:var(--ink-soft);font-size:12px}
.transfer-surface .tkh-greeting h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.transfer-surface .tkh-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.transfer-surface .tkh-stat{display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:var(--r-btn,12px);background:var(--pane-bar);color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.transfer-surface .tkh-stat.is-static{cursor:default}
.transfer-surface .tkh-stat:not(.is-static):is(:hover,:focus-visible){color:var(--ink);outline:0}
.transfer-surface .tkh-stat.is-late{color:var(--crit)}
.transfer-surface .tkh-primary{display:flex;align-items:center;gap:6px;padding:8px 13px;border:0;border-radius:var(--r-btn,12px);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.transfer-surface .tkh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.transfer-surface .tkh-widget{display:flex;flex-direction:column;min-width:0;min-height:230px;max-height:360px;border:1px solid var(--line);border-radius:var(--r-panel,18px);background:var(--card-solid);overflow:hidden}
.transfer-surface .tkh-widget.is-wide{grid-column:1 / -1}
.transfer-surface .tkh-widget.is-dragging{opacity:.45}
.transfer-surface .tkh-widget.is-over{outline:2px solid var(--accent);outline-offset:2px}
.transfer-surface .tkh-widget-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--hairline-soft);cursor:grab}
.transfer-surface .tkh-widget-head:active{cursor:grabbing}
.transfer-surface .tkh-widget-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-surface .tkh-grip{display:grid;place-items:center;color:var(--ink-faint)}
.transfer-surface .tkh-body{flex:1;min-height:0;overflow:auto;padding:4px 0}
.transfer-surface .tkh-tabs{display:flex;gap:3px;padding:9px 11px 8px;border-bottom:1px solid var(--hairline-soft)}
.transfer-surface .tkh-tab{padding:5px 10px;border:0;border-radius:9px;background:none;color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer}
.transfer-surface .tkh-tab.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.transfer-surface .tkh-add{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;border:0;background:none;color:var(--ink-soft);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.transfer-surface .tkh-add:is(:hover,:focus-visible){color:var(--ink);outline:0}
.transfer-surface .tkh-row{display:flex;align-items:center;gap:9px;padding:7px 14px;min-width:0;border-top:1px solid var(--hairline-soft)}
.transfer-surface .tkh-row:first-child{border-top:0}
.transfer-surface .tkh-row-name{flex:1;min-width:0;border:0;background:none;padding:0;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.transfer-surface .tkh-row-name:is(:hover,:focus-visible){text-decoration:underline;outline:0}
.transfer-surface .tkh-row.done .tkh-row-name,.transfer-surface .tkh-row [data-done] .tkh-row-name{color:var(--ink-faint)}
.transfer-surface .tkh-row-stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.transfer-surface .tkh-row-parent{color:var(--ink-faint);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tkh-when{color:var(--ink-soft);font-size:11px;white-space:nowrap;flex:none}
.transfer-surface .tkh-when.is-late{color:var(--crit);font-weight:600}
.transfer-surface .tkh-chip{display:flex;align-items:center;gap:5px;flex:none;max-width:130px;padding:2px 7px;border-radius:8px;background:var(--pane-bar);color:var(--ink-soft);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tkh-chip-dot{width:7px;height:7px;border-radius:3px;flex:none;background:var(--accent)}
.transfer-surface .tkh-approval{flex:none;padding:3px 8px;border-radius:8px;font-size:10.5px;font-weight:600;background:var(--pane-bar);color:var(--ink-soft)}
.transfer-surface .tkh-approval.is-approved{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.transfer-surface .tkh-approval.is-changes{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.transfer-surface .tkh-approval.is-rejected{background:color-mix(in srgb,var(--crit) 20%,transparent);color:var(--crit)}
.transfer-surface .tkh-date{flex:none;width:34px;text-align:center;line-height:1.1}
.transfer-surface .tkh-date strong{display:block;font-size:14px;font-weight:600}
.transfer-surface .tkh-date small{color:var(--ink-soft);font-size:10px}
.transfer-surface .tkh-foot{padding:8px 14px;border-top:1px solid var(--hairline-soft)}
.transfer-surface .tkh-link{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:var(--ink-soft);font:inherit;font-size:11.5px;cursor:pointer}
.transfer-surface .tkh-link:is(:hover,:focus-visible){color:var(--ink);outline:0}
.transfer-surface .tkh-projects{display:flex;flex-direction:column;gap:7px;padding:11px 12px}
.transfer-surface .tkh-project{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:1px solid var(--hairline-soft);border-radius:var(--r-card,14px);background:var(--pane-content);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.transfer-surface .tkh-project:is(:hover,:focus-visible){border-color:var(--line);outline:0}
.transfer-surface .tkh-project-new{border-style:dashed;background:none;color:var(--ink-soft);font-size:12.5px}
.transfer-surface .tkh-project-icon{display:grid;place-items:center;width:28px;height:28px;flex:none}
.transfer-surface .tkh-project-icon.is-new{border:1px dashed var(--line);border-radius:9px}
.transfer-surface .tkh-project-text{flex:1;min-width:0}
.transfer-surface .tkh-project-text strong{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transfer-surface .tkh-project-text small{color:var(--ink-soft);font-size:10.5px}
.transfer-surface .tkh-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:11px 12px}
.transfer-surface .tkh-week-day{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 7px;border:1px solid var(--hairline-soft);border-radius:12px;background:var(--pane-content)}
.transfer-surface .tkh-week-day.is-today{border-color:var(--accent);background:var(--accent-soft)}
.transfer-surface .tkh-week-day>header{display:flex;align-items:baseline;justify-content:space-between;gap:4px;color:var(--ink-soft);font-size:10.5px}
.transfer-surface .tkh-week-day>header strong{color:var(--ink);font-size:13px;font-weight:600}
.transfer-surface .tkh-week-list{display:flex;flex-direction:column;gap:4px;min-width:0}
.transfer-surface .tkh-week-task{padding:4px 6px;border:0;border-radius:7px;background:var(--pane-bar);color:var(--ink);font:inherit;font-size:10.5px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.transfer-surface .tkh-week-list small{color:var(--ink-faint);font-size:10px}
.transfer-surface .tkh-summary{display:flex;flex-direction:column;gap:12px;padding:14px}
.transfer-surface .tkh-summary-total{margin:0;color:var(--ink-soft);font-size:12px}
.transfer-surface .tkh-summary-total strong{color:var(--ink);font-size:22px;font-weight:600;margin-right:6px}
.transfer-surface .tkh-bars{display:flex;align-items:flex-end;gap:7px;flex:1;min-height:96px}
.transfer-surface .tkh-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;flex:1;height:100%}
.transfer-surface .tkh-bar-fill{width:100%;min-height:3px;border-radius:5px 5px 0 0;background:var(--accent);opacity:.55}
.transfer-surface .tkh-bar small{color:var(--ink-faint);font-size:10px}
.transfer-surface .tkh-bar b{color:var(--ink-soft);font-size:10.5px;font-weight:600;min-height:13px}
.transfer-surface .tkh-notepad-label{display:block;padding:10px 14px 7px;color:var(--ink-soft);font-size:11px}
.transfer-surface .tkh-notepad{display:block;width:calc(100% - 28px);margin:0 14px 14px;box-sizing:border-box;min-height:110px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-fld,10px);background:var(--field-bg,var(--pane-content));color:var(--ink);font:12.5px/1.5 var(--sans);resize:vertical}
.transfer-surface .tkh-notepad:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.transfer-surface .tkh-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;padding:22px 26px;text-align:center;color:var(--ink-faint)}
.transfer-surface .tkh-empty strong{color:var(--ink-soft);font-size:12.5px;font-weight:600}
.transfer-surface .tkh-empty p{margin:0;font-size:11.5px;line-height:1.5}
.transfer-surface .tkh-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;grid-column:1 / -1;min-height:54px;padding:10px 18px;border:1px dashed transparent;border-radius:var(--r-panel,18px);color:var(--ink-soft);text-align:center}
.transfer-surface .tkh-dropzone:is(:hover,:focus-within){border-color:var(--line)}
.transfer-surface .tkh-dropzone:is(.is-active,.is-empty){min-height:96px;padding:18px;border-color:var(--line)}
.transfer-surface .tkh-dropzone.is-active{border-color:var(--accent);background:var(--accent-soft)}
.transfer-surface .tkh-dropzone strong{font-size:13px;font-weight:600;color:var(--ink-soft)}
.transfer-surface .tkh-dropzone p{margin:0;font-size:11.5px;max-width:420px}
.transfer-surface .tkh-ghost{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-btn,12px);background:var(--pane-content);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.transfer-surface .tkh-catalog{display:flex;flex-direction:column;gap:10px;padding:14px;max-height:min(70dvh,620px)}
.transfer-surface .tkh-catalog>header{display:flex;align-items:center;gap:10px}
.transfer-surface .tkh-catalog>header strong{flex:1;font-size:15px;font-weight:600}
.transfer-surface .tkh-catalog .tk-search{max-width:none;padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-fld,10px);background:var(--pane-content)}
.transfer-surface .tkh-catalog-list{display:flex;flex-direction:column;gap:7px;overflow:auto;min-height:0}
.transfer-surface .tkh-catalog-card{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--hairline-soft);border-radius:var(--r-card,14px);background:var(--pane-content)}
.transfer-surface .tkh-catalog-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--pane-bar);color:var(--ink-soft)}
.transfer-surface .tkh-catalog-text{flex:1;min-width:0}
.transfer-surface .tkh-catalog-text strong{display:block;font-size:12.5px;font-weight:600}
.transfer-surface .tkh-catalog-text small{color:var(--ink-soft);font-size:11px;line-height:1.4}
.transfer-surface .tkh-catalog-add{display:flex;align-items:center;gap:5px;flex:none;padding:6px 11px;border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
@media(max-width:1100px){.transfer-surface .tkh-grid{grid-template-columns:minmax(0,1fr)}.transfer-surface .tkh-widget.is-wide{grid-column:auto}}
@media(max-width:760px){
  .transfer-surface .tkh-home{padding:16px 12px 18px;gap:12px}
  .transfer-surface .tkh-greeting h1{font-size:21px}
  .transfer-surface .tkh-stats{gap:6px}
  .transfer-surface .tkh-stat{padding:6px 9px;font-size:11px}
  .transfer-surface .tkh-week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .transfer-surface .tkh-widget{max-height:none}
}