/* Owner-only preview. One coherent layer over the established application. */
:root.surf-preview{color-scheme:dark;--surf-bg:#101214;--surf-panel:#1b1e22;--surf-raised:#262b31;--surf-line:#363c44;--surf-text:#f5f3ef;--surf-muted:#aeb5be;--surf-red:#ed4055;--surf-amber:#efbd69;color:var(--surf-text);background:var(--surf-bg);font-family:Manrope,system-ui,sans-serif}
.surf-preview body{background:var(--surf-bg);background-image:none;color:var(--surf-text)}
.surf-preview .shell{max-width:1160px;padding:0 32px}
.surf-preview header{height:72px;gap:16px;border-bottom:1px solid var(--surf-line)}
.surf-preview .brand{font-family:inherit;color:var(--surf-text);font-size:23px;font-weight:800;letter-spacing:-.7px;gap:12px}
.surf-preview .brand small{color:var(--surf-muted);font-size:7px;letter-spacing:1px;line-height:1.5}
.surf-preview .logo{width:42px;height:42px;background:var(--surf-red);color:white;border-radius:13px;font:800 29px/1 Manrope,system-ui,sans-serif;box-shadow:0 3px 0 #992235}
.surf-preview .team{display:flex;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border:1px solid var(--surf-line);border-radius:20px;background:var(--surf-panel);color:var(--surf-muted);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:0}
.surf-preview .user-profile>div>span{color:var(--surf-muted)}
.surf-preview .intro{min-height:0;padding:24px 0 14px;overflow:visible}
.surf-preview .intro:before,.surf-preview .intro:after,.surf-preview .surf-mark{display:none}
.surf-preview .intro h1{font-family:inherit;font-size:34px;font-weight:800;line-height:1.2;letter-spacing:-1.2px;text-transform:none;color:var(--surf-text);margin:0}
.surf-preview h1 span{color:var(--surf-muted)}
.surf-preview .notice{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 20px;min-height:24px;background:transparent;border:0;border-radius:0;color:var(--surf-muted);font-size:11px;font-weight:500;line-height:1.6}
.surf-preview .notice>span:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#b3d1c4;margin-right:8px;vertical-align:middle}
.surf-preview .notice.connection-problem{color:#ffabb6}.surf-preview .notice.connection-problem>span:before{background:var(--surf-red)}
.surf-preview .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;margin:0 0 24px;background:transparent;border:0;border-radius:0;box-shadow:none}
.surf-preview .stats>div{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;min-height:90px;padding:14px;border:1px solid var(--surf-line);border-radius:14px;background:var(--surf-panel)}
.surf-preview .stats>div:last-child{border:1px solid var(--surf-line)}
.surf-preview .stats span{color:var(--surf-muted);font-size:11px;font-weight:500;line-height:1.5;text-transform:none;letter-spacing:0}
.surf-preview .stats strong{font:800 30px/1.1 Manrope,system-ui,sans-serif;letter-spacing:-.8px;font-variant-numeric:tabular-nums;color:var(--surf-text);margin:0}
.surf-preview .stats>div:last-child strong{color:#ff98a7}
.surf-preview .dot.green{background:#b3d1c4}.surf-preview .dot.amber{background:var(--surf-amber)}.surf-preview .dot.red{background:#ff98a7}
.surf-preview .toolbar{padding:0 0 16px;min-height:0;border-color:var(--surf-line)}
.surf-preview .tab{min-height:44px;background:transparent;color:var(--surf-muted);border-radius:10px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none}
.surf-preview .tab.active{background:#38232b;color:#ffabb6;box-shadow:none}
.surf-preview .section-heading{align-items:center;gap:12px;margin:22px 0 14px}
.surf-preview .section-heading h2,.surf-preview h2,.surf-preview h3{font-family:inherit;color:var(--surf-text);text-transform:none}
.surf-preview .section-heading h2{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.4}
.surf-preview .section-heading h2 span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:24px;margin-left:6px;padding:2px 7px;background:var(--surf-raised);color:var(--surf-muted);border-radius:7px;font-size:11px;vertical-align:middle}
.surf-preview .muted,.surf-preview .hint,.surf-preview small,.surf-preview .section-heading>span{color:var(--surf-muted)}
.surf-preview .section-heading>span{font-size:11px;line-height:1.5}
.surf-preview .board-tools{margin-bottom:16px}
.surf-preview .filter-buttons{display:flex;gap:4px;padding:4px;background:var(--surf-panel);border:1px solid var(--surf-line);border-radius:12px}
.surf-preview .filter-buttons button,.surf-preview .shelf-toggle,.surf-preview .row-count-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 12px;border:1px solid var(--surf-line);border-radius:9px;background:var(--surf-panel);color:var(--surf-muted);font-size:11px;line-height:1.35;text-align:center}
.surf-preview .filter-buttons button{border:0;background:transparent;flex:1}.surf-preview .filter-buttons button[aria-pressed=true]{background:#3a2730;color:#ffbac4;box-shadow:inset 0 0 0 1px #954859}
.surf-preview .shelf-group{padding:16px;background:var(--surf-panel);border:1px solid var(--surf-line);border-radius:14px;margin:0 0 14px;box-shadow:none}
.surf-preview .shelf-group .section-heading{margin:0 0 14px;padding:0;border:0;gap:12px}
.surf-preview .shelf-heading h3{margin:0 0 5px;font-size:15px;line-height:1.4;font-weight:800}
.surf-preview .shelf-summary{font-size:11px;line-height:1.5;color:var(--surf-muted)}
.surf-preview .shelf-heading-actions{gap:8px;align-items:center}
.surf-preview #cards .shelf-group>.shelf-trays{display:flex;flex-wrap:wrap;justify-content:center;--tray-gap:6px;gap:var(--tray-gap);padding:0;border:0}
.surf-preview #cards .shelf-trays>.compact-tray{flex:0 0 calc((100% - 8 * var(--tray-gap)) / 9);min-width:0;height:124px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #4b535e;border-radius:8px;background:var(--surf-raised);color:var(--surf-text);box-shadow:none}
.surf-preview .compact-tray strong{font-size:20px;line-height:1.3;font-variant-numeric:tabular-nums}
.surf-preview .compact-tray small{font-size:10px;line-height:1.4}
.surf-preview #cards .compact-tray.is-empty{background:#20242a;border-color:#3f4751;color:#c5ccd5}
.surf-preview #cards .compact-tray.is-expired{background:#3b2029;border-color:#f57b8e;color:#ffbac4}
.surf-preview .compact-tray.is-expired small{color:#ffbac4}.surf-preview .expiry-dot{background:#ff98a7;width:6px;height:6px}
.surf-preview button{touch-action:manipulation;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
.surf-preview button:active:not(:disabled){transform:translateY(1px)}
.surf-preview button:focus-visible,.surf-preview a:focus-visible{outline:2px solid #ff98a7;outline-offset:3px}
.surf-preview .primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;border-radius:10px;background:var(--surf-red);color:white;border:0;text-transform:none;letter-spacing:0;box-shadow:0 3px 0 #972638}
.surf-preview .primary:hover{background:#f45468;transform:none;box-shadow:0 3px 0 #972638}.surf-preview .primary:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.surf-preview .text-button,.surf-preview .account-back{color:var(--surf-text);min-height:44px}
.surf-preview .catalog-row,.surf-preview .history-row,.surf-preview .empty,.surf-preview dialog,.surf-preview .batch,.surf-preview #detail-batches .batch,.surf-preview .tray-card,.surf-preview .daily-task,.surf-preview .schedule-card,.surf-preview .schedule-empty,.surf-preview .payroll-summary>div,.surf-preview .payroll-period,.surf-preview .payroll-details,.surf-preview #assistant-memory,.surf-preview .ai-message,.surf-preview .pilot-summary>div,.surf-preview .warehouse-row,.surf-preview .warehouse-counts>div{background:var(--surf-panel);border:1px solid var(--surf-line);color:var(--surf-text);border-radius:12px;box-shadow:none}
.surf-preview input,.surf-preview select,.surf-preview textarea{background:var(--surf-bg);border:1px solid var(--surf-line);border-radius:9px;color:var(--surf-text);font-size:16px}
.surf-preview .account-back,.surf-preview .unit-actions button,.surf-preview .refill-button,.surf-preview .account-menu>button,.surf-preview .pilot-menu>button,.surf-preview .training-entry,.surf-preview .warehouse-entry,.surf-preview .assistant-suggestions button,.surf-preview .guide-controls{background:var(--surf-panel);color:var(--surf-text);border-color:var(--surf-line);border-radius:10px;min-height:44px}
.surf-preview .unit-actions button:last-child{color:#ffabb6}
.surf-preview .account-menu{gap:10px}.surf-preview .account-menu>button{padding:18px 16px}.surf-preview .account-menu>button:hover{background:var(--surf-raised)}
.surf-preview .account-menu-icon{display:grid;place-items:center;background:#38232b;color:#ffabb6;border-radius:11px;font-size:22px}
.surf-preview .account-menu strong{font-size:14px}.surf-preview .account-menu small{font-size:12px}
.surf-preview .training-entry,.surf-preview .warehouse-entry{padding:16px;border:1px solid var(--surf-line)}
.surf-preview .batch-timer{font-family:inherit;color:var(--surf-text);font-variant-numeric:tabular-nums}
.surf-preview .quantity,.surf-preview #detail-batches .quantity{background:var(--surf-raised);color:var(--surf-text)}
.surf-preview .batch.expired,.surf-preview #detail-batches .batch.expired,.surf-preview .payroll-warning,.surf-preview .pilot-alert{background:#3b2029;border-color:#f57b8e;color:#ffbac4}
.surf-preview .batch.soon{background:#30291f;border-color:var(--surf-amber)}
.surf-preview .progress,.surf-preview .tasks-progress-track{background:var(--surf-line)}.surf-preview .progress div{background:#b3d1c4}.surf-preview .batch.expired .progress div{background:var(--surf-red)}
.surf-preview .daily-task{padding:18px 16px;margin:8px 0}.surf-preview .daily-task label{font-size:14px;font-weight:500;line-height:1.65}
.surf-preview .daily-task .task-label,.surf-preview .schedule-card strong,.surf-preview .schedule-card>b{color:var(--surf-text)}
.surf-preview .daily-task.is-done{background:#202d28;border-color:#436457}.surf-preview .daily-task.is-done .task-label{color:#c1d7ca}
.surf-preview .daily-task .task-by,.surf-preview .schedule-card span,.surf-preview .payroll-summary span,.surf-preview .payroll-period p,.surf-preview .payroll-period small,.surf-preview .tasks-progress-heading span{color:var(--surf-muted)}
.surf-preview .daily-task-group{margin:24px 0}.surf-preview .daily-task-group h3{font-size:16px;font-weight:800}
.surf-preview .daily-task .task-check-track{stroke:#929daa}.surf-preview .daily-task .task-check-fill{fill:#b3d1c4}.surf-preview .daily-task.is-done .task-check-track{stroke:#b3d1c4}.surf-preview .daily-task .task-check-tick{stroke:#142219}.surf-preview .daily-task .task-check-ring{stroke:#ff98a7}
.surf-preview .schedule-card{padding:18px 16px;gap:12px}.surf-preview .schedule-card strong{font-size:15px}.surf-preview .schedule-card>b{font-size:16px;font-variant-numeric:tabular-nums}.surf-preview .schedule-card span{font-size:12px}
.surf-preview .schedule-card.schedule-uncertain{border-color:var(--surf-amber)}
.surf-preview .schedule-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;border:0;background:transparent}
.surf-preview .schedule-tabs button{display:flex;align-items:center;justify-content:center;padding:10px 8px;min-height:44px;border:1px solid var(--surf-line);border-radius:9px;background:var(--surf-panel);color:var(--surf-muted);font-size:12px;text-align:center;line-height:1.4}
.surf-preview .schedule-tabs button[aria-pressed=true]{background:#38232b;color:#ffbac4;border-color:#a54a5b}
.surf-preview .hours-editor{border-top:1px solid var(--surf-line);padding-top:4px;margin-top:4px}
.surf-preview .hours-editor summary{color:#ffabb6;min-height:44px;font-size:12px;font-weight:600;line-height:44px}
.surf-preview .hours-editor button{background:var(--surf-raised);color:var(--surf-text);border:1px solid var(--surf-line);border-radius:8px;min-height:44px;padding:10px 14px}
.surf-preview .schedule-link-row,.surf-preview .payroll-entry,.surf-preview .memory-note{border-color:var(--surf-line)}
.surf-preview .ai-user{background:#30232b}.surf-preview #guide-content p{color:var(--surf-text)}
.surf-preview .warehouse-row-heading>b{background:var(--surf-raised);color:var(--surf-text)}
.surf-preview .tray-morph{background:var(--surf-panel);border-color:var(--surf-line)}.surf-preview .tray-morph span{color:var(--surf-text)}
.surf-preview footer{border-color:var(--surf-line);color:var(--surf-muted)}
.surf-preview .preview-spark{position:fixed;z-index:100;pointer-events:none;display:block;border-radius:50%;background:var(--surf-red)}
.surf-preview .preview-wave{position:fixed;z-index:99;pointer-events:none;border:2px solid #ff98a7;border-radius:50%;width:28px;height:28px;margin:-14px 0 0 -14px}
@media(max-width:700px){
 .surf-preview body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .surf-preview .shell{padding:0 16px}.surf-preview header{height:60px}.surf-preview .brand{font-size:21px}.surf-preview .brand small{font-size:6px}.surf-preview .team{font-size:0;padding:7px 12px}.surf-preview .team:after{font-size:10px;line-height:1.3}
 .surf-preview .intro{display:none}.surf-preview .intro h1{font-size:27px;line-height:1.22;letter-spacing:-.9px}
 .surf-preview .notice{font-size:10px;margin:12px 0;line-height:1.6;min-height:20px}
 .surf-preview .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:0;padding:12px 0;background:var(--surf-panel);border:1px solid var(--surf-line);border-radius:14px;overflow:hidden}
 .surf-preview .stats>div,.surf-preview .stats>div:last-child{padding:0 6px;min-height:60px;border:0;border-radius:0;background:transparent;gap:7px;align-items:center;text-align:center}.surf-preview .stats>div+div{border-left:1px solid var(--surf-line)}
 .surf-preview .stats span{display:flex;justify-content:center;align-items:center;gap:4px;font-size:10px;line-height:1.4;white-space:nowrap}.surf-preview .stats strong{font-size:26px}
 .surf-preview main .toolbar{padding:0;margin:0;border:0;min-height:0;gap:0;height:0}
 .surf-preview .section-heading{margin:20px 0 12px}.surf-preview .section-heading h2{font-size:19px}.surf-preview .section-heading>span{font-size:10px;max-width:130px;text-align:right}
 .surf-preview .board-tools{margin-bottom:14px}.surf-preview .filter-buttons button{flex:1;min-width:0;font-size:10px;padding:9px 4px}
 .surf-preview .shelf-group{padding:14px 8px}.surf-preview .shelf-group .section-heading{margin-bottom:12px}.surf-preview .shelf-heading h3{font-size:14px}
 .surf-preview .shelf-heading-actions{gap:6px}.surf-preview .shelf-toggle,.surf-preview .row-count-button{font-size:10px;padding:8px;min-height:40px}
 .surf-preview #cards .shelf-group>.shelf-trays{--tray-gap:3px}.surf-preview #cards .shelf-trays>.compact-tray{height:108px;gap:12px;border-radius:6px}
 .surf-preview .compact-tray strong{font-size:16px}.surf-preview .compact-tray small{font-size:9px}
 .surf-preview .toolbar nav{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));min-height:76px;border-top:1px solid var(--surf-line);background:#191c20;box-shadow:0 -6px 20px #0003}
 .surf-preview .toolbar nav .tab{display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-width:0;min-height:56px;padding:5px 1px;gap:4px;border:0;border-radius:10px;background:transparent;color:var(--surf-muted);font-size:9px;line-height:1.3;text-align:center;box-shadow:none;text-transform:none;transform:none}
 .surf-preview .toolbar nav .tab:before{width:19px;height:19px;flex-shrink:0}
 .surf-preview .toolbar nav .tab.active{background:#3a252e;color:#ffabb6;box-shadow:inset 0 0 0 1px #713644}
 .surf-preview .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px));font-size:12px}
}
@media(prefers-reduced-motion:reduce){.surf-preview *{animation:none!important;transition:none!important}.surf-preview button:active:not(:disabled){transform:none}}


:root.surf-preview{--surf-bg:#101214;--surf-panel:#1b1e22;--surf-raised:#262b31;--surf-line:#363c44;--surf-text:#f5f3ef;--surf-muted:#aeb5be;--surf-red:#ed4055;--surf-amber:#efbd69;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.surf-preview body,.surf-preview button,.surf-preview input,.surf-preview select,.surf-preview textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.surf-preview .shell{max-width:1000px}.surf-preview header{height:76px;border-color:var(--surf-line)}.surf-preview .brand{font-size:25px}.surf-preview .brand small{font-size:8px;letter-spacing:1px}.surf-preview .logo{background:#ffabb6;color:#ffffff;border-radius:14px;box-shadow:0 3px 0 #992235}
.surf-preview #connection{font-size:12px;line-height:1.5;margin:0 0 14px;min-height:18px}.surf-preview #connection:empty{display:none}
.surf-preview .section-heading h2{font-size:22px;font-weight:700;letter-spacing:-.5px}.surf-preview .section-heading>span{font-size:12px;line-height:1.5}.surf-preview .filter-buttons{background:#1b1e22;padding:4px;border:1px solid var(--surf-line);border-radius:13px;gap:4px}.surf-preview .filter-buttons button{min-height:44px;font-size:13px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--surf-muted)}.surf-preview .filter-buttons button[aria-pressed=true]{background:#262b31;color:#fff;box-shadow:none}
.surf-preview .primary{background:#ed4055;color:#fff;box-shadow:0 3px 0 #972638;border-radius:12px;min-height:48px;font-size:15px}.surf-preview .primary:hover{background:#f45468}.surf-preview .batch,.surf-preview #detail-batches .batch{padding:18px;border-radius:18px}.surf-preview #detail-batches .batch:first-child{border-width:2px}.surf-preview #detail-batches .batch:first-child:before{content:'ПЕРВАЯ В ОЧЕРЕДИ FIFO';display:block;font-size:10px;font-weight:650;letter-spacing:1px;color:var(--surf-muted);margin-bottom:12px}.surf-preview .unit-actions button{min-height:48px;font-size:15px;border-radius:12px}.surf-preview .batch-timer{font-size:20px}.surf-preview .hint,.surf-preview p.muted{font-size:14px;line-height:1.6}.surf-preview .training-entry{margin-top:16px}.surf-preview .training-entry small{font-size:13px}.surf-preview .daily-task{padding:16px;border-radius:16px}.surf-preview .daily-task label{font-size:16px;line-height:1.5}.surf-preview .daily-task .task-by{font-size:12px}.surf-preview .tasks-progress-heading{font-size:14px}.surf-preview .tasks-progress-track{height:9px;border-radius:8px}.surf-preview .tasks-progress-track>span{background:#b3d1c4;border-radius:8px}
.surf-preview :is(button,input,select,textarea):focus-visible{outline:3px solid #ff98a7;outline-offset:3px}.surf-preview [hidden]{display:none!important}
@media(max-width:700px){.surf-preview .shell{padding:0 16px}.surf-preview header{height:64px}.surf-preview .section-heading>span{font-size:11px}.surf-preview .toolbar nav{background:#191c20f5;border-color:#363c44;padding-bottom:calc(8px + max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)))}.surf-preview .toolbar nav .tab{font-size:11px;min-height:54px}.surf-preview .toolbar nav .tab.active{background:#3a252e;color:#ffabb6;box-shadow:none}.surf-preview .toolbar nav.mv2-blob .tab.active{background:transparent}.surf-preview dialog[open]{border-radius:24px 24px 0 0;max-width:100%;width:100%;max-height:calc(100dvh - 24px);margin:auto 0 0;top:auto;bottom:0;padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px))}.surf-preview dialog .close{min-height:44px;min-width:44px}.surf-preview #preview-more-dialog[open]{width:calc(100% - 24px);border-radius:24px;max-height:calc(100dvh - 48px)}.surf-preview .schedule-card span{font-size:13px}}
@media(max-width:350px){.surf-preview .filter-buttons button{font-size:12px;padding:8px 5px}}

@media(max-width:700px){.surf-preview #connection{margin-bottom:6px}.surf-preview #board>.section-heading>span{display:none}.surf-preview .board-tools{margin-bottom:8px}}
@media(max-width:700px){.surf-preview body:not(.keyboard-visible) dialog[open]{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:100%;margin:0;max-height:calc(var(--visible-height,100dvh) - 24px)}.surf-preview body.keyboard-visible dialog[open]{top:calc(var(--visible-top,0px) + 12px);bottom:auto;left:0;right:0;transform:none;width:100%;max-width:100%;margin:0;max-height:calc(var(--visible-height,100dvh) - 24px)}.surf-preview body:not(.keyboard-visible) #preview-more-dialog[open]{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:calc(100% - 24px);margin:0}}

/* Original palette restored; redesigned layout and motion retained. */
.surf-preview .logo{background:var(--surf-red);color:#fff;box-shadow:0 3px 0 #992235}
/* Physical display map restored: nine slots per line, centered wrap, shorter tiles. */
.surf-preview #cards .shelf-trays>.compact-tray{height:104px}.surf-preview #cards .shelf-group>.shelf-trays[hidden]{display:none!important}
@media(max-width:700px){.surf-preview #cards .shelf-trays>.compact-tray{height:88px;gap:10px}.surf-preview .tasks-date-control #tasks-today{min-height:48px}.surf-preview .tasks-date-control input[type=date]{min-height:48px}}
/* Functional motion: flat identity, one factual progress module. */
.surf-preview .logo{background:var(--surf-red);color:#fff;box-shadow:none;transform:none;border-radius:10px}.surf-preview .brand{gap:10px}.surf-preview .tasks-progress-heading{align-items:center;gap:12px;min-height:28px}.surf-preview .tasks-progress-heading strong{font-size:16px;line-height:1.4;font-weight:650;font-variant-numeric:tabular-nums}.surf-preview .tasks-progress-state{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px}.surf-preview .tasks-progress-track{height:6px;margin:12px 0 24px;border-radius:3px;background:var(--surf-line)}.surf-preview .tasks-progress-track>span{background:var(--surf-red);border-radius:3px;transition:width 180ms cubic-bezier(.22,1,.36,1)}.task-completion-mark{width:20px;height:20px;flex-shrink:0}.task-completion-mark[hidden]{display:none!important}.task-completion-mark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.surf-preview .tasks-progress-state:has(.task-completion-mark:not([hidden])){color:var(--surf-text)}.surf-preview .daily-task.is-done .task-label{color:var(--surf-text)}
@media(prefers-reduced-motion:reduce){.surf-preview .tasks-progress-track>span,.surf-preview .daily-task .task-check-tick{transition:none!important}}
html.surf-preview .daily-task.is-done{background:#202d28;border-color:#436457}html.surf-preview .daily-task .task-check{box-shadow:none}html.surf-preview .daily-task .task-check-fill{fill:#b3d1c4}html.surf-preview .daily-task .task-check-tick{stroke:#142219}html.surf-preview .daily-task.is-done .task-check-track{stroke:#b3d1c4}.surf-preview .tasks-progress-heading{flex-wrap:wrap}
html.surf-preview .daily-task.is-done .task-label{color:#c1d7ca}html.surf-preview .tasks-progress-track>span{background:#b3d1c4}

/* ═══ Glass — слой в духе macOS (3 ноября 2026) ═══════════════════════════════
   Материалы: стекло только у шапки, дока и шторок (blur дорогой для WebView);
   карточки — полупрозрачные градиенты с бликом сверху и многослойной тенью.
   Палитра прежняя: #101214 / #1B1E22 / #ED4055 / #F5F3EF. */
html.surf-preview{
 --g-bg:#0d0e11;--g-card:linear-gradient(180deg,#1f2227f2,#191b1ff2);--g-card-solid:#1c1f23;
 --g-edge:#ffffff12;--g-edge-strong:#ffffff1f;--g-sheen:inset 0 1px 0 #ffffff0f;
 --g-shadow:0 1px 1px #00000040,0 2px 4px #00000033,0 12px 28px -12px #000000b3;
 --g-shadow-lift:0 1px 1px #00000040,0 6px 12px #00000040,0 22px 44px -16px #000000cc;
 --g-glass:#1a1c20b8;--g-blur:saturate(170%) blur(22px);
 --g-red:#ed4055;--g-red-soft:#ed40552e;--g-mint:#b3d1c4;
 --g-spring:cubic-bezier(.22,1,.36,1);--g-out:cubic-bezier(.22,1,.36,1);
 --g-num:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
 background:var(--g-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent
}
html.surf-preview body{background:var(--g-bg);position:relative;isolation:isolate}
/* Фон: мягкий тёплый свет сверху и холодный снизу + зерно, как у обоев macOS. */
html.surf-preview body::before{content:'';position:fixed;inset:-20vh -20vw;z-index:-2;pointer-events:none;
 background:radial-gradient(60vmax 40vmax at 12% -6%,#ed405524,transparent 60%),radial-gradient(50vmax 40vmax at 100% 18%,#6a7bff12,transparent 62%),radial-gradient(70vmax 50vmax at 50% 120%,#3fb6a00f,transparent 60%)}
html.surf-preview body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Шапка: липкое стекло, при прокрутке ужимается и получает разделитель. */
html.surf-preview header{position:sticky;top:0;z-index:40;margin:0 -32px;padding:0 32px;border-bottom:1px solid transparent;
 background:transparent;transition:height .32s var(--g-out),background-color .32s var(--g-out),border-color .32s var(--g-out),box-shadow .32s var(--g-out)}
html.surf-preview.glass-scrolled header{background:var(--g-glass);border-bottom-color:var(--g-edge);box-shadow:0 8px 24px -16px #000c}
html.surf-preview .logo{background:linear-gradient(160deg,#ff6577,#e23149);box-shadow:inset 0 1px 0 #ffffff40,0 4px 12px -4px #ed4055aa;border-radius:12px;transition:transform .32s var(--g-out),width .32s var(--g-out),height .32s var(--g-out)}
html.surf-preview .brand{letter-spacing:-.6px;font-weight:750}
html.surf-preview .team{background:#ffffff0d;border-color:var(--g-edge);color:#d6dbe1;box-shadow:var(--g-sheen);transition:background-color .2s ease}
@media(hover:hover){html.surf-preview .team:hover{background:#ffffff17}}

/* Строка соединения — живой индикатор. */
html.surf-preview .notice>span{position:relative}
html.surf-preview .notice>span:before{background:var(--g-mint)}
/* The live ring is its own layer animated by transform/opacity, so it never repaints. */
html.surf-preview .notice>span::after{content:'';position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
 border:1.5px solid #b3d1c4;box-sizing:border-box;opacity:0;pointer-events:none;animation:g-live 2.4s ease-out infinite}
html.surf-preview .notice.connection-problem>span::after{animation:none}
@keyframes g-live{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}

/* Карточки: общий материал. */
html.surf-preview :is(.stats,.shelf-group,.daily-task,.schedule-card,.schedule-empty,.catalog-row,.history-row,.warehouse-row,.warehouse-counts>div,.payroll-summary>div,.payroll-period,.payroll-details,.batch,.empty,.training-entry,.warehouse-entry,.account-menu>button,.pilot-menu>button,.preview-destination){
 background:var(--g-card);border:1px solid var(--g-edge);box-shadow:var(--g-sheen),var(--g-shadow);position:relative}
html.surf-preview :is(.shelf-group,.daily-task,.schedule-card,.batch){border-radius:18px}
html.surf-preview .stats>div{background:transparent}

/* Свет под курсором (только мышь): JS задаёт --gx/--gy. */
@media(hover:hover) and (pointer:fine){
 html.surf-preview .g-lit{background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-200px),#ffffff0d,transparent 45%),var(--g-card)}
 html.surf-preview :is(.training-entry,.warehouse-entry,.account-menu>button,.preview-destination,.schedule-card,.catalog-row){transition:transform .32s var(--g-out),box-shadow .32s var(--g-out),border-color .2s ease}
 html.surf-preview :is(.training-entry,.warehouse-entry,.account-menu>button,.preview-destination):hover{transform:translateY(-2px);box-shadow:var(--g-sheen),var(--g-shadow-lift);border-color:var(--g-edge-strong)}
}

/* Сводка: цифры в скруглённом начертании, плавная смена. */
html.surf-preview .stats{border-radius:20px}
html.surf-preview .stats strong{font-family:var(--g-num);font-weight:700;letter-spacing:-.5px}
html.surf-preview .stats>div:last-child strong{color:#ff8fa0;text-shadow:0 0 18px #ed405566}
html.surf-preview .dot{box-shadow:0 0 8px currentColor}
html.surf-preview .dot.green{color:#b3d1c4}html.surf-preview .dot.amber{color:#efbd69}html.surf-preview .dot.red{color:#ff98a7}

/* Сегментированные переключатели: подложка + бегунок (span.g-thumb от JS). */
html.surf-preview .filter-buttons{position:relative;isolation:isolate;background:#0000004d;border:1px solid var(--g-edge);border-radius:14px;box-shadow:inset 0 1px 2px #0006}
html.surf-preview .filter-buttons button{position:relative;z-index:1;border-radius:10px;color:#aab2bc;font-weight:600;transition:color .24s var(--g-out),transform .12s ease}
html.surf-preview .filter-buttons button[aria-pressed=true]{color:#fff;background:#2b3037;box-shadow:inset 0 1px 0 #ffffff14,0 1px 3px #0008}
html.surf-preview .filter-buttons.g-has-thumb button[aria-pressed=true]{background:transparent;box-shadow:none}
html.surf-preview .g-thumb{position:absolute;z-index:0;left:0;top:0;border-radius:10px;pointer-events:none;
 background:linear-gradient(180deg,#343a42,#2a2f36);box-shadow:inset 0 1px 0 #ffffff1a,0 1px 2px #0009,0 4px 10px -4px #000a;
 transition:transform .5s var(--g-out),width .5s var(--g-out),height .35s var(--g-out)}
html.surf-preview .schedule-tabs button{background:var(--g-card);border-color:var(--g-edge);box-shadow:var(--g-sheen);border-radius:12px;transition:background-color .24s ease,color .24s ease,border-color .24s ease}
html.surf-preview .schedule-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#43252e,#371f27);border-color:#ed405566;color:#ffc2cb;box-shadow:inset 0 1px 0 #ffffff12,0 6px 16px -8px #ed405588}

/* Полки и подложки. */
html.surf-preview .shelf-heading h3{letter-spacing:-.2px}
html.surf-preview :is(.shelf-toggle,.row-count-button){background:#ffffff0a;border-color:var(--g-edge);color:#cfd5dc;border-radius:10px;box-shadow:var(--g-sheen)}
@media(hover:hover){html.surf-preview :is(.shelf-toggle,.row-count-button):hover{background:#ffffff14;color:#fff}}
html.surf-preview .shelf-chevron{display:inline-block;transition:transform .42s var(--g-spring)}
html.surf-preview .shelf-toggle[aria-expanded=false] .shelf-chevron{transform:rotate(-90deg)}
html.surf-preview #cards .shelf-trays>.compact-tray{position:relative;overflow:hidden;border:1px solid #ffffff17;border-radius:9px;
 background:linear-gradient(180deg,#2d3239,#23272d);box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #0007,0 6px 12px -8px #000;
 transition:transform .36s var(--g-spring),box-shadow .24s ease,border-color .24s ease}
html.surf-preview #cards .shelf-trays>.compact-tray::after{content:'';position:absolute;inset:0 0 55% 0;pointer-events:none;background:linear-gradient(180deg,#ffffff0d,transparent)}
html.surf-preview #cards .compact-tray.is-empty{background:linear-gradient(180deg,#1e2126,#1a1d21);border-style:dashed;border-color:#ffffff1c;color:#8e97a2;box-shadow:none}
html.surf-preview #cards .compact-tray.is-expired{background:linear-gradient(180deg,#4a2330,#361b24);border-color:#f57b8e99;color:#ffc2cb;box-shadow:inset 0 1px 0 #ffffff14,0 0 0 1px #ed405522,0 8px 18px -8px #ed405588}
/* The expiry dot pulses through its ::after ring (motion-v2.css, transform/opacity only). */
html.surf-preview #cards .compact-tray strong{font-weight:750}
html.surf-preview #cards .compact-tray small{font-family:var(--g-num);font-variant-numeric:tabular-nums;opacity:.85}
@media(hover:hover) and (pointer:fine){html.surf-preview #cards .compact-tray:hover{transform:translateY(-3px);border-color:#ffffff33;box-shadow:inset 0 1px 0 #ffffff1a,0 10px 20px -10px #000}}

/* Кнопки. */
html.surf-preview .primary{background:linear-gradient(180deg,#f4566a,#e1374c);box-shadow:inset 0 1px 0 #ffffff40,0 1px 2px #0008,0 8px 20px -8px #ed4055aa;border-radius:12px;font-weight:650;letter-spacing:-.1px;transition:transform .32s var(--g-spring),box-shadow .2s ease,filter .2s ease}
html.surf-preview .primary:hover{background:linear-gradient(180deg,#f8687a,#e7404f);filter:none}
html.surf-preview .primary:active:not(:disabled){transform:none;box-shadow:inset 0 1px 0 #ffffff30,0 2px 6px -2px #ed4055aa}
html.surf-preview :is(.text-button,.account-back){border-radius:10px;transition:background-color .2s ease,transform .32s var(--g-spring)}
@media(hover:hover){html.surf-preview :is(.text-button,.account-back):hover{background:#ffffff0f}}
html.surf-preview .training-entry,html.surf-preview .warehouse-entry{border-radius:16px}
html.surf-preview :is(.training-entry,.warehouse-entry) small{transition:transform .32s var(--g-spring)}
@media(hover:hover){html.surf-preview :is(.training-entry,.warehouse-entry):hover small{transform:translateX(3px)}}

/* Поля ввода. */
html.surf-preview :is(input,select,textarea){background:#0000004d;border-color:var(--g-edge);border-radius:11px;box-shadow:inset 0 1px 2px #0006;transition:border-color .2s ease,box-shadow .2s ease}
html.surf-preview :is(input,select,textarea):focus{border-color:#ed405599;box-shadow:inset 0 1px 2px #0006,0 0 0 4px #ed405526;outline:none}

/* Задания. */
html.surf-preview .daily-task{transition:background-color .32s var(--g-out),border-color .32s var(--g-out),transform .36s var(--g-spring)}
html.surf-preview .daily-task.is-done{background:linear-gradient(180deg,#22322bf2,#1d2a25f2);border-color:#4f7565aa}
html.surf-preview .tasks-progress-track{background:#ffffff12;box-shadow:inset 0 1px 1px #0008;overflow:hidden}
html.surf-preview .tasks-progress-track>span{background:linear-gradient(90deg,#8fc3ad,#c6e4d6);box-shadow:0 0 12px #b3d1c466;transition:width .6s var(--g-out)}

/* Шторки и диалоги: стекло, ручка, мягкий фон. */
html.surf-preview dialog{background:linear-gradient(180deg,#22252bf0,#1a1d21f5);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge-strong);box-shadow:inset 0 1px 0 #ffffff14,0 30px 80px -20px #000e}
html.surf-preview dialog::backdrop{background:#05060899;-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
html.surf-preview #preview-more-dialog{background:linear-gradient(180deg,#22252bf0,#1a1d21f5)}
html.surf-preview .preview-destination{border-radius:16px}
html.surf-preview .preview-destination-icon,html.surf-preview .account-menu-icon{background:linear-gradient(160deg,#4a2731,#331c23);box-shadow:inset 0 1px 0 #ffffff17}

/* Десктоп: разделы — капсула под шапкой. */
@media(min-width:701px){
 html.surf-preview .toolbar{position:sticky;top:84px;z-index:30;padding:8px 0 16px}
 html.surf-preview .toolbar nav{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--g-edge);border-radius:16px;background:var(--g-glass);box-shadow:var(--g-sheen),var(--g-shadow)}
 html.surf-preview .toolbar nav .tab{border-radius:11px;padding:8px 16px;min-height:40px;transition:background-color .24s ease,color .24s ease}
 html.surf-preview .toolbar nav .tab:hover{background:#ffffff0d;color:#fff}
 html.surf-preview .toolbar nav .tab.active{background:linear-gradient(180deg,#45262f,#38202a);color:#ffc2cb;box-shadow:inset 0 1px 0 #ffffff14,0 4px 12px -6px #ed405599}
 html.surf-preview.glass-scrolled header{height:60px}
 html.surf-preview.glass-scrolled .toolbar{top:60px}
}

/* Телефон: плавающий док. */
@media(max-width:700px){
 html.surf-preview header{margin:0 -16px;padding:0 16px}
 html.surf-preview.glass-scrolled header{height:52px}
 html.surf-preview.glass-scrolled .logo{width:34px;height:34px;font-size:23px;border-radius:10px}
 html.surf-preview body{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 html.surf-preview .toolbar nav{left:12px;right:12px;bottom:calc(10px + max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)));
  min-height:66px;padding:6px;gap:2px;border:1px solid var(--g-edge-strong);border-radius:26px;
  background:#1b1e23f2;
  box-shadow:inset 0 1px 0 #ffffff17,0 1px 2px #0008,0 18px 40px -12px #000d}
 html.surf-preview .toolbar nav .tab{min-height:52px;border-radius:20px;font-size:10.5px;font-weight:600;color:#9aa3ad;transition:color .28s var(--g-out)}
 html.surf-preview .toolbar nav .tab::before{transition:transform .42s var(--g-spring)}
 html.surf-preview .toolbar nav .tab.active{color:#fff;background:#ffffff14;box-shadow:inset 0 1px 0 #ffffff14}
 html.surf-preview .toolbar nav .tab.active::before{transform:translateY(-1px) scale(1.08);background-color:#ff8fa0}
 html.surf-preview .toolbar nav.mv2-blob>.mv2-tab-blob{border-radius:20px!important;background:linear-gradient(180deg,#ffffff1f,#ffffff0d)!important;box-shadow:inset 0 1px 0 #ffffff1f,0 4px 14px -6px #000c!important}
 html.surf-preview .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px));border-radius:16px;background:#23262bf0;border:1px solid var(--g-edge-strong);box-shadow:0 18px 40px -12px #000d}
 html.surf-preview dialog[open]{border-radius:28px 28px 0 0;padding-top:30px}
 html.surf-preview dialog[open]::before{content:'';position:absolute;top:9px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#ffffff38}
 html.surf-preview #preview-more-dialog[open]{border-radius:28px}
 html.surf-preview dialog.g-dragging{transition:none!important}
}

/* Тонкая полоса прокрутки на компьютере. */
@media(hover:hover) and (pointer:fine){
 html.surf-preview{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
 html.surf-preview ::-webkit-scrollbar{width:10px;height:10px}html.surf-preview ::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
}
@media(prefers-reduced-motion:reduce){
 html.surf-preview .notice>span::after,html.surf-preview #cards .compact-tray.is-expired .expiry-dot{animation:none}
 html.surf-preview .g-thumb{transition:none}
}
html.surf-preview body{min-height:100vh;min-height:100dvh}
html.surf-preview .empty button,html.surf-preview #reset-filters{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0f;color:#fff;box-shadow:var(--g-sheen)}

/* ═══ Glass · Задания: сгруппированный список в духе «Напоминаний» ═════════════ */
/* Дата и «Сегодня». */
html.surf-preview .tasks-date-control{gap:10px;margin:6px 0 10px}
html.surf-preview .tasks-date-control label{font-size:12px;font-weight:600;color:#aab2bc;letter-spacing:.1px}
html.surf-preview .tasks-date-control input[type=date]{font-family:var(--g-num);font-weight:600;font-variant-numeric:tabular-nums;color-scheme:dark}
html.surf-preview .tasks-date-control #tasks-today{padding:0 18px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0f;color:#fff;font-weight:600;box-shadow:var(--g-sheen)}
html.surf-preview .tasks-date-control #tasks-today:disabled{opacity:.5}
html.surf-preview #tasks-status{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12px;line-height:1.5}
html.surf-preview #tasks-status::before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:#8f99a5}
html.surf-preview #tasks-status:empty{display:none}

/* Прогресс — отдельная карточка; в конце дня мягко светится зелёным. */
html.surf-preview #tasks-progress:has(.tasks-progress-heading){padding:16px 16px 18px;margin:0 0 6px;border:1px solid var(--g-edge);border-radius:20px;background:var(--g-card);box-shadow:var(--g-sheen),var(--g-shadow);transition:border-color .5s var(--g-out),box-shadow .5s var(--g-out)}
html.surf-preview #tasks-progress:has(.task-completion-mark:not([hidden])){border-color:#7fb39d66;box-shadow:var(--g-sheen),var(--g-shadow),0 0 0 1px #b3d1c41f,0 14px 34px -14px #7fb39d88}
html.surf-preview .tasks-progress-heading{min-height:0;gap:10px}
html.surf-preview .tasks-progress-heading strong{font-family:var(--g-num);font-size:18px;font-weight:700;letter-spacing:-.3px}
html.surf-preview .tasks-progress-state{padding:4px 10px;border-radius:999px;background:#ffffff0d;border:1px solid var(--g-edge);color:#c3cad2;font-size:12px;font-weight:600}
html.surf-preview .tasks-progress-state:has(.task-completion-mark:not([hidden])){background:#2a3d35;border-color:#5f8f7a88;color:#d6ece2}
html.surf-preview .tasks-progress-state .task-completion-mark{width:16px;height:16px}
html.surf-preview .tasks-progress-track{height:8px;margin:14px 0 0;border-radius:999px}
html.surf-preview .tasks-progress-track>span{border-radius:999px}

/* Заголовок группы: подпись как в боковой панели macOS + счётчик-капсула. */
html.surf-preview .daily-task-group{margin:22px 0 0}
html.surf-preview .daily-task-group h3{display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#9aa3ad}
html.surf-preview .daily-task-group h3 small{margin:0;padding:2px 9px;border-radius:999px;background:#ffffff0d;border:1px solid var(--g-edge);color:#c3cad2;font-family:var(--g-num);font-size:11px;font-weight:650;letter-spacing:0;font-variant-numeric:tabular-nums}

/* Строки: общая карточка, разделитель с отступом под галочку. */
html.surf-preview .daily-task-group>.daily-task{margin:0;padding:14px 16px 14px 14px;border-radius:0;border-top-width:0;box-shadow:none;overflow:hidden;
 transition:background-color .3s var(--g-out),background-image .3s var(--g-out)}
html.surf-preview .daily-task-group>h3+.daily-task{border-top-width:1px;border-radius:18px 18px 0 0}
html.surf-preview .daily-task-group>.daily-task:last-child{border-radius:0 0 18px 18px;box-shadow:0 14px 28px -16px #000c}
html.surf-preview .daily-task-group>h3+.daily-task:last-child{border-radius:18px}
html.surf-preview .daily-task-group>.daily-task+.daily-task::before{content:'';position:absolute;top:0;left:58px;right:0;height:1px;background:#ffffff12}
html.surf-preview .daily-task-group>.daily-task:active{transform:none;background-image:linear-gradient(#ffffff0a,#ffffff0a),var(--g-card)}
html.surf-preview .daily-task-group>.daily-task.is-done{background:linear-gradient(180deg,#1f2c27f2,#1b2622f2);border-color:var(--g-edge)}
html.surf-preview .daily-task label{gap:12px;font-size:15px;line-height:1.45;font-weight:500;letter-spacing:-.1px}
html.surf-preview .daily-task .task-label{padding-top:3px}
html.surf-preview .daily-task.is-done .task-label{color:#bcd3c7}
html.surf-preview .daily-task .task-check-track{stroke:#7d8793;stroke-width:1.8}
html.surf-preview .daily-task input:active+.task-check{transform:scale(.86)}

/* Автор отметки: появляется плавно и не занимает место, пока его нет. */
html.surf-preview .daily-task .task-by{margin:6px 0 0 44px;height:17px;font-size:12px;color:#8f99a5;transition:height .3s var(--g-out),margin .3s var(--g-out),opacity .25s ease}
html.surf-preview .daily-task.is-done .task-by{color:#8fb3a3}
html.surf-preview .daily-task .task-by.is-empty{height:0;min-height:0;margin-top:0;opacity:0}

/* Сохранение: тонкий блик проходит по строке, пока сервер отвечает. */
html.surf-preview .daily-task.is-saving::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#ffffff0d 50%,transparent 70%);background-size:220% 100%;animation:g-sheen-sweep 1.1s linear infinite}
@keyframes g-sheen-sweep{from{background-position:120% 0}to{background-position:-120% 0}}
html.surf-preview .daily-task.is-error{background:linear-gradient(180deg,#3a2029f2,#2f1b22f2)}
@media(prefers-reduced-motion:reduce){html.surf-preview .daily-task.is-saving::after{animation:none;background:#ffffff08}html.surf-preview .daily-task .task-by{transition:none}}

/* Сводка на компьютере: четыре самостоятельные плашки без общей серой подложки. */
@media(min-width:701px){
 html.surf-preview .stats{background:none;border:0;box-shadow:none;border-radius:0}
 html.surf-preview .stats>div,html.surf-preview .stats>div:last-child{background:var(--g-card);border:1px solid var(--g-edge);border-radius:18px;box-shadow:var(--g-sheen),var(--g-shadow)}
}

/* ═══ Glass · Смены ════════════════════════════════════════════════════════════ */
html.surf-preview #schedule-status,html.surf-preview #payroll-status{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;font-size:12px;line-height:1.55;color:#9aa3ad}
html.surf-preview #schedule-status::before,html.surf-preview #payroll-status::before{content:'';flex:0 0 6px;height:6px;margin-top:6px;border-radius:50%;background:var(--g-mint);box-shadow:0 0 8px #b3d1c488}
html.surf-preview #schedule-status:empty,html.surf-preview #payroll-status:empty{display:none}

/* Переключатель разделов: единый лоток с бегунком (span.g-thumb от JS). */
html.surf-preview .schedule-tabs{position:relative;isolation:isolate;gap:4px;padding:4px;margin:0 0 18px;background:#0000004d;border:1px solid var(--g-edge);border-radius:16px;box-shadow:inset 0 1px 2px #0006}
html.surf-preview .schedule-tabs button,html.surf-preview .schedule-tabs button[aria-pressed=true]{position:relative;z-index:1;min-height:42px;border:0;border-radius:12px;background:transparent;box-shadow:none;color:#aab2bc;font-size:12.5px;font-weight:600;transition:color .24s var(--g-out)}
html.surf-preview .schedule-tabs button[aria-pressed=true]{color:#fff}
html.surf-preview .schedule-tabs:not(.g-has-thumb) button[aria-pressed=true]{background:#2b3037;box-shadow:inset 0 1px 0 #ffffff14,0 1px 3px #0008}
html.surf-preview .schedule-tabs .g-thumb{border-radius:12px}

/* Подписи дней — как в боковой панели macOS. */
html.surf-preview #schedule-today>h3,html.surf-preview .schedule-day>h3{margin:0 4px 8px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#9aa3ad}
html.surf-preview .schedule-day{margin:20px 0 0}
html.surf-preview #schedule-mine>p.muted{font-size:12px;margin:0 4px 4px}

/* Смены: сгруппированный список, аватар с инициалом и цветная метка типа смены. */
html.surf-preview .schedule-card{--kind:#8f99a5;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;margin:0;padding:14px 16px 14px 14px;border-radius:0;border-top-width:0;box-shadow:none;overflow:hidden}
html.surf-preview :is(#schedule-today,.schedule-day)>h3+.schedule-card{border-top-width:1px;border-radius:18px 18px 0 0}
html.surf-preview :is(#schedule-today,.schedule-day)>.schedule-card:last-child{border-radius:0 0 18px 18px;box-shadow:0 14px 28px -16px #000c}
html.surf-preview :is(#schedule-today,.schedule-day)>h3+.schedule-card:last-child{border-radius:18px}
html.surf-preview .schedule-card+.schedule-card::after{content:'';position:absolute;top:0;left:66px;right:0;height:1px;background:#ffffff12}
html.surf-preview .schedule-card::before{content:attr(data-initial);grid-row:1;grid-column:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
 background:radial-gradient(circle at 30% 25%,#ffffff2e,transparent 60%),color-mix(in srgb,var(--kind) 34%,#1d2025);box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px color-mix(in srgb,var(--kind) 45%,transparent);color:#fff;font:700 16px/1 var(--g-num)}
html.surf-preview .schedule-card>div{grid-row:1;grid-column:2;gap:3px}
html.surf-preview .schedule-card>div strong{font-size:15px;font-weight:650;letter-spacing:-.1px}
html.surf-preview .schedule-card>div span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#aab2bc}
html.surf-preview .schedule-card>div span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--kind);box-shadow:0 0 8px var(--kind)}
html.surf-preview .schedule-card>b{grid-row:1;grid-column:3;font-family:var(--g-num);font-size:16px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:#fff}
html.surf-preview .schedule-card>p,html.surf-preview .schedule-card>details{grid-column:2/-1}
html.surf-preview .schedule-card[data-kind=утро]{--kind:#efbd69}
html.surf-preview .schedule-card[data-kind=мид]{--kind:#8fc3ad}
html.surf-preview .schedule-card[data-kind=вечер]{--kind:#8c9bff}
html.surf-preview .schedule-card[data-kind=фулл]{--kind:#ed4055}
html.surf-preview .schedule-card[data-kind=уют]{--kind:#d59bf0}
html.surf-preview .schedule-card[data-kind=поставка]{--kind:#7fb6e6}
html.surf-preview .schedule-card[data-kind=Выходной]{--kind:#6b737d}

/* Комментарии и предупреждения — компактные плашки. */
html.surf-preview .schedule-card>p{margin:0;padding:7px 10px;border-radius:10px;background:#ffffff0a;border:1px solid var(--g-edge);font-size:12.5px;line-height:1.5;color:#c3cad2}
html.surf-preview .schedule-card.schedule-uncertain{border-color:var(--g-edge)}
html.surf-preview .schedule-card.schedule-uncertain>b{color:#efbd69}
html.surf-preview .schedule-card.schedule-uncertain>p:not(.shift-comment){background:#efbd6914;border-color:#efbd6940;color:#f3d9a8}

/* «Уточнить часы»: капсула со стрелкой, плавное раскрытие там, где браузер умеет. */
html.surf-preview .hours-editor{border-top:0;margin:0;padding:0}
html.surf-preview .hours-editor summary{display:inline-flex;align-items:center;gap:6px;min-height:34px;line-height:1;padding:0 12px;border-radius:999px;background:#ffffff0a;border:1px solid var(--g-edge);color:#ffb3be;font-size:12px;font-weight:600;list-style:none;transition:background-color .2s ease}
html.surf-preview .hours-editor summary::-webkit-details-marker{display:none}
html.surf-preview .hours-editor summary::after{content:'';width:6px;height:6px;margin-left:2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .36s var(--g-spring)}
html.surf-preview .hours-editor[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
@media(hover:hover){html.surf-preview .hours-editor summary:hover{background:#ffffff14}}
html.surf-preview .hours-editor form{margin-top:12px;padding:14px;border-radius:14px;background:#0000002e;border:1px solid var(--g-edge);gap:10px}
html.surf-preview .hours-editor form p{margin:0;font-size:12px;line-height:1.5;color:#9aa3ad}
html.surf-preview .hours-editor label{font-size:12px;font-weight:600;color:#aab2bc}
html.surf-preview .hours-editor input{margin-top:6px;min-height:44px;color-scheme:dark;font-family:var(--g-num)}
html.surf-preview .hours-editor button[type=submit]{background:linear-gradient(180deg,#f4566a,#e1374c);border:0;color:#fff;font-weight:650;box-shadow:inset 0 1px 0 #ffffff40,0 6px 16px -8px #ed4055aa;border-radius:12px}
html.surf-preview .hours-editor button[type=button]{background:#ffffff0f;border:1px solid var(--g-edge-strong);border-radius:12px}
@supports(interpolate-size:allow-keywords){
 html.surf-preview .hours-editor{interpolate-size:allow-keywords}
 html.surf-preview .hours-editor::details-content{height:0;opacity:0;overflow:clip;transition:height .42s var(--g-out),opacity .3s ease,content-visibility .42s allow-discrete}
 html.surf-preview .hours-editor[open]::details-content{height:auto;opacity:1}
}

/* Пустые состояния. */
html.surf-preview .schedule-empty{padding:16px;border:1px dashed #ffffff24;border-radius:16px;background:#ffffff06;box-shadow:none;color:#aab2bc;font-size:13px;line-height:1.6}

/* Часы и оплата. */
html.surf-preview .payroll-controls{gap:10px;margin:0 0 14px}
html.surf-preview .payroll-controls label{font-size:12px;font-weight:600;color:#aab2bc}
html.surf-preview #payroll-reload{min-height:44px;padding:0 16px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0f;color:#fff;font-weight:600}
html.surf-preview .payroll-summary{gap:0;margin:0 0 12px;border:1px solid var(--g-edge);border-radius:20px;background:var(--g-card);box-shadow:var(--g-sheen),var(--g-shadow);overflow:hidden}
html.surf-preview .payroll-summary>div{margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:14px 16px}
html.surf-preview .payroll-summary>div+div{border-top:1px solid #ffffff12}
html.surf-preview .payroll-summary span{font-size:12.5px;color:#aab2bc}
html.surf-preview .payroll-summary strong{font-family:var(--g-num);font-size:19px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:#fff}
html.surf-preview .payroll-summary>div:nth-child(2) strong{color:#c6e4d6;text-shadow:0 0 18px #b3d1c455}
html.surf-preview .payroll-warning{margin:0 0 12px;padding:12px 14px;border:1px solid #efbd6940;border-left:1px solid #efbd6940;border-radius:14px;background:#efbd6912;color:#f3d9a8;font-size:12.5px;line-height:1.6}
html.surf-preview .payroll-period{margin:0 0 10px;padding:16px;border-radius:18px}
html.surf-preview .payroll-period h3{margin:0;font-size:15px;font-weight:650}
html.surf-preview .payroll-period p{margin:2px 0 10px;font-size:12px}
html.surf-preview .payroll-period>strong{display:block;font-family:var(--g-num);font-size:20px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
html.surf-preview .payroll-period small{margin-top:6px;font-size:12px;line-height:1.5}
html.surf-preview .payroll-details{margin:14px 0 0;padding:4px 16px;border-radius:18px}
html.surf-preview .payroll-details>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:14px;font-weight:650;list-style:none;cursor:pointer}
html.surf-preview .payroll-details>summary::-webkit-details-marker{display:none}
html.surf-preview .payroll-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid #aab2bc;border-bottom:1.6px solid #aab2bc;transform:rotate(45deg);transition:transform .36s var(--g-spring)}
html.surf-preview .payroll-details[open]>summary::after{transform:rotate(-135deg)}
html.surf-preview .payroll-entry{padding:12px 0;border-color:#ffffff12}
html.surf-preview .payroll-entry>strong{font-size:13.5px}
html.surf-preview .payroll-entry>span{font-family:var(--g-num);color:#aab2bc}
@supports(interpolate-size:allow-keywords){
 html.surf-preview .payroll-details{interpolate-size:allow-keywords}
 html.surf-preview .payroll-details::details-content{height:0;opacity:0;overflow:clip;transition:height .45s var(--g-out),opacity .3s ease,content-visibility .45s allow-discrete}
 html.surf-preview .payroll-details[open]::details-content{height:auto;opacity:1}
}

/* Связать имена (администраторы). */
html.surf-preview .schedule-link-row{gap:10px;padding:12px 0;border-color:#ffffff12}
html.surf-preview .schedule-link-row label{font-size:13px;font-weight:600}
@media(prefers-reduced-motion:reduce){html.surf-preview :is(.hours-editor,.payroll-details)::details-content{transition:none}}
html.surf-preview .schedule-card[data-dup]>div span{display:none}
html.surf-preview .schedule-card[data-dup]>div strong{display:inline-flex;align-items:center;gap:8px}
html.surf-preview .schedule-card[data-dup]>div strong::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--kind);box-shadow:0 0 8px var(--kind)}
html.surf-preview .schedule-day .schedule-card::before{font-size:15px;letter-spacing:-.3px}
html.surf-preview .payroll-entry>p{margin:6px 0 0;padding:7px 10px;border-radius:10px;background:#ffffff0a;border:1px solid var(--g-edge);font-size:12.5px;line-height:1.5;color:#c3cad2}
html.surf-preview .payroll-entry>small{color:#efbd69;font-size:12px}
html.surf-preview .payroll-entry>.hours-editor{margin-top:8px}

/* ═══ Glass · Подложки и партии ════════════════════════════════════════════════ */
/* Полка: заголовок плотнее, действия — тихие капсулы. */
html.surf-preview .shelf-group{padding:16px 12px 14px}
html.surf-preview .shelf-group .section-heading{align-items:flex-start;margin-bottom:14px;padding:0 4px}
html.surf-preview .shelf-heading h3{font-size:15px;font-weight:700;margin-bottom:3px}
html.surf-preview .shelf-summary{font-family:var(--g-num);font-variant-numeric:tabular-nums;color:#9aa3ad}
html.surf-preview :is(.shelf-toggle,.row-count-button){min-height:34px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:600}
html.surf-preview .shelf-chevron{font-size:13px;line-height:1;transform-origin:50% 45%}
html.surf-preview .row-empty{margin:4px 0;padding:14px;border:1px dashed #ffffff1f;border-radius:12px;text-align:center;font-size:12.5px}
html.surf-preview .training-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
html.surf-preview .training-entry span{font-weight:650}

/* Карточка подложки: шапка экрана. */
html.surf-preview #tray-detail .account-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:4px 0 14px;padding:0 14px 0 10px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0d;box-shadow:var(--g-sheen);color:#fff;font-size:13px;font-weight:600}
html.surf-preview #detail-shelf{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#9aa3ad}
html.surf-preview #tray-detail>.section-heading{margin:0 0 4px;align-items:center}
html.surf-preview #detail-title{font-size:26px;font-weight:750;letter-spacing:-.7px;line-height:1.2}
html.surf-preview #detail-edit{min-height:34px;padding:0 12px;border:1px solid var(--g-edge);border-radius:999px;background:#ffffff0a;font-size:12px;font-weight:600}
html.surf-preview #detail-summary{margin:0 0 16px;font-family:var(--g-num);font-size:14px;font-variant-numeric:tabular-nums;color:#aab2bc}

/* Партия. */
html.surf-preview #detail-batches .batch{--state:#b3d1c4;margin:0 0 12px;padding:16px;border:1px solid var(--g-edge);border-radius:20px;background:var(--g-card);box-shadow:var(--g-sheen),var(--g-shadow)}
html.surf-preview #detail-batches .batch.soon{--state:#efbd69;border-color:#efbd6955;background:linear-gradient(180deg,#2b261df2,#221e18f2)}
html.surf-preview #detail-batches .batch.expired{--state:#ff8fa0;border-color:#f57b8e80;background:linear-gradient(180deg,#3a1f28f2,#2c1820f2);box-shadow:var(--g-sheen),var(--g-shadow),0 0 0 1px #ed40551f,0 16px 36px -18px #ed4055aa}
html.surf-preview #detail-batches .batch:first-child{border-width:1px}
html.surf-preview #detail-batches .batch:first-child::before{content:none}
html.surf-preview #detail-batches .batch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;padding-right:44px}
html.surf-preview #detail-batches .batch-head strong{font-size:17px;font-weight:700;letter-spacing:-.2px;color:#fff}
html.surf-preview #detail-batches .quantity{flex-shrink:0;padding:4px 10px;border-radius:999px;background:#ffffff12;border:1px solid var(--g-edge);color:#e6eaee;font-family:var(--g-num);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
html.surf-preview .batch-remove-all{display:grid;place-items:center;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:#ffffff0f;border:1px solid var(--g-edge);color:#c3cad2;font-size:20px;line-height:1;box-shadow:var(--g-sheen);transition:background-color .2s ease,color .2s ease,transform .32s var(--g-spring)}
html.surf-preview .batch-remove-all:hover{background:#ed405533;color:#fff}
html.surf-preview .batch.expired .batch-remove-all{background:#ed405529;border-color:#ed405566;color:#ffc2cb}
html.surf-preview #detail-batches .detail-first{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:3px 10px;border-radius:999px;background:#ed40551f;border:1px solid #ed405544;color:#ffb3be;font-size:11px;font-weight:650;letter-spacing:.2px}
html.surf-preview #detail-batches .detail-first::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff8fa0;box-shadow:0 0 6px #ff8fa0}
html.surf-preview #detail-batches .batch-meta{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:#0000002e;border:1px solid var(--g-edge);font-size:12px;line-height:1.5;color:#9aa3ad;font-variant-numeric:tabular-nums}
html.surf-preview #detail-batches .batch .batch-timer{margin:14px 0 8px;font-family:var(--g-num);font-size:30px;font-weight:700;letter-spacing:-.8px;line-height:1.1;color:var(--state)}
html.surf-preview #detail-batches .batch.fresh .batch-timer{color:#fff}
html.surf-preview #detail-batches .batch.expired .batch-timer{text-shadow:0 0 22px #ed405566}
html.surf-preview #detail-batches .progress{height:6px;border-radius:999px;background:#ffffff12;box-shadow:inset 0 1px 1px #0008;overflow:hidden}
html.surf-preview #detail-batches .progress div{border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--state) 70%,#000),var(--state));box-shadow:0 0 10px color-mix(in srgb,var(--state) 60%,transparent);transition:width 1s linear}
html.surf-preview #detail-batches .unit-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px}
html.surf-preview #detail-batches .unit-actions button{min-height:46px;margin:0;border-radius:14px;font-size:14px;font-weight:650;letter-spacing:0;text-transform:none;box-shadow:var(--g-sheen)}
html.surf-preview #detail-batches .unit-actions button[data-reason="Продано"]{background:#b3d1c41a;border:1px solid #b3d1c44d;color:#d6ece2}
html.surf-preview #detail-batches .unit-actions button[data-reason="Списано"]{background:#ed40551a;border:1px solid #ed40554d;color:#ffc2cb}
@media(hover:hover){html.surf-preview #detail-batches .unit-actions button[data-reason="Продано"]:hover{background:#b3d1c42e}html.surf-preview #detail-batches .unit-actions button[data-reason="Списано"]:hover{background:#ed40552e}}
html.surf-preview #detail-batches .unit-actions button:disabled{opacity:.45}

/* Добавить ещё / партию. */
html.surf-preview .refill-options{gap:8px;margin:4px 0 12px}
html.surf-preview .refill-button{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px dashed #ed405566;border-radius:14px;background:#ed40550d;color:#ffb3be;font-size:14px;font-weight:600;text-align:center}
html.surf-preview #detail-add{margin-top:4px;min-height:52px;border-radius:16px;font-size:15px}
html.surf-preview #tray-detail>p.muted:last-child{margin-top:14px;font-size:12.5px;line-height:1.55;text-align:center;color:#8f99a5}
html.surf-preview #detail-batches .batch-head strong{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto}
@media(max-width:360px){html.surf-preview #detail-batches .batch-head{flex-wrap:wrap;row-gap:8px}html.surf-preview #detail-batches .quantity{margin-left:0}}

/* Поиск над длинным списком (окно «Новая партия»). Вне тестового дизайна скрыт. */
.g-select-search{display:none}
html.surf-preview .g-select-search:not([hidden]){display:block;margin:4px 0 12px}
html.surf-preview .g-search-field{position:relative;display:block;margin:0}
html.surf-preview .g-search-field input{width:100%;box-sizing:border-box;margin:0;min-height:46px;padding:0 40px 0 40px;border-radius:12px;font-size:16px;-webkit-appearance:none;appearance:none}
html.surf-preview .g-search-field input::-webkit-search-cancel-button{display:none}
html.surf-preview .g-search-icon{position:absolute;left:14px;top:50%;width:15px;height:15px;margin-top:-8px;border:2px solid #9aa3ad;border-radius:50%;box-sizing:border-box;pointer-events:none}
html.surf-preview .g-search-icon::after{content:'';position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;border-radius:1px;background:#9aa3ad;transform:rotate(45deg)}
html.surf-preview .g-search-clear{position:absolute;right:6px;top:50%;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:#ffffff1a;color:#e6eaee;font-size:18px;line-height:1}
html.surf-preview .g-search-results{display:grid;gap:2px;margin-top:6px;padding:4px;max-height:264px;overflow:auto;border:1px solid var(--g-edge-strong);border-radius:14px;background:#14161af2;box-shadow:0 14px 30px -14px #000d;animation:g-drop .32s var(--g-out)}
html.surf-preview .g-search-results[hidden]{display:none}
@keyframes g-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html.surf-preview .g-search-results button{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#e6eaee;font-size:15px;text-align:left;line-height:1.35}
html.surf-preview .g-search-results button:hover,html.surf-preview .g-search-results button:focus-visible{background:#ffffff12}
html.surf-preview .g-search-results button[aria-selected=true]{color:#ffc2cb}
html.surf-preview .g-search-results mark{background:#ed405533;color:#fff;border-radius:4px;padding:0 2px}
html.surf-preview .g-search-empty{margin:0;padding:12px;color:#9aa3ad;font-size:13px;text-align:center}
html.surf-preview label.g-picked select{animation:g-picked .7s var(--g-out)}
@keyframes g-picked{0%{box-shadow:inset 0 1px 2px #0006,0 0 0 0 #ed405566}40%{box-shadow:inset 0 1px 2px #0006,0 0 0 4px #ed405540}100%{box-shadow:inset 0 1px 2px #0006,0 0 0 0 #ed405500}}
@media(prefers-reduced-motion:reduce){html.surf-preview .g-search-results,html.surf-preview label.g-picked select{animation:none}}
html.surf-preview .g-search-field .keyboard-done{display:none!important}
html.surf-preview .g-search-field .keyboard-field{display:block}
html.surf-preview .keyboard-done{padding:6px 12px;border:1px solid #ed405566;border-radius:999px;background:#2a1c22f2;color:#ffc2cb;font-size:12px;font-weight:650;box-shadow:inset 0 1px 0 #ffffff14,0 4px 10px -4px #000c}

/* ═══ Glass · Каталог, Десерты, Склад ═════════════════════════════════════════ */
html.surf-preview{--g-ico-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");
 --g-ico-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
 --g-ico-cake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14c0-2 1.5-3.5 3.5-3.2L8 16.5C5 17.5 3 16 3 14z'/%3E%3Cpath d='M21 14c0-2-1.5-3.5-3.5-3.2L16 16.5c3 1 5-.5 5-2.5z'/%3E%3Cpath d='M8 16.5 6.5 10.8C7 8 9 6.5 12 6.5s5 1.5 5.5 4.3L16 16.5c-2.5 1-5.5 1-8 0z'/%3E%3Cpath d='M10.5 7 11 16.9M13.5 7 13 16.9'/%3E%3C/svg%3E")}

/* «Назад» — стеклянная капсула на всех вложенных экранах. */
html.surf-preview .account-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:4px 0 14px;padding:0 14px 0 10px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0d;box-shadow:var(--g-sheen);color:#fff;font-size:13px;font-weight:600}

/* Входы каталога: иконка-плитка, заголовок, подпись и шеврон. */
html.surf-preview #catalog .warehouse-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 12px;align-items:center;column-gap:14px;row-gap:2px;margin:0 0 10px;padding:14px 16px 14px 14px;border-radius:18px;text-align:left}
html.surf-preview #catalog .warehouse-entry::before{content:'';grid-row:1/3;grid-column:1;width:44px;height:44px;border-radius:13px;background:radial-gradient(circle at 30% 20%,#ffffff2e,transparent 60%),var(--tile,#3a2a31);box-shadow:inset 0 1px 0 #ffffff24,0 6px 14px -6px var(--tile-glow,#ed405588)}
html.surf-preview #catalog .warehouse-entry::after{content:'';grid-row:1/3;grid-column:3;width:8px;height:8px;border-right:2px solid #8f99a5;border-top:2px solid #8f99a5;transform:rotate(45deg);transition:transform .32s var(--g-spring)}
@media(hover:hover){html.surf-preview #catalog .warehouse-entry:hover::after{transform:translateX(3px) rotate(45deg)}}
html.surf-preview #catalog .warehouse-entry>span{grid-column:2;font-size:16px;font-weight:700;letter-spacing:-.2px;color:#fff}
html.surf-preview #catalog .warehouse-entry>small{grid-column:2;font-size:12.5px;line-height:1.4;color:#9aa3ad;transform:none!important}
html.surf-preview #catalog .warehouse-entry[data-view=warehouse]{--tile:linear-gradient(160deg,#5b7cf0,#3346a8);--tile-glow:#4a63d088}
html.surf-preview #catalog .invoice-entry{--tile:linear-gradient(160deg,#e9a84f,#a8661f);--tile-glow:#d48a3a88}
html.surf-preview #catalog .desserts-entry{--tile:linear-gradient(160deg,#ff6577,#c22a40);--tile-glow:#ed405588}
html.surf-preview #catalog .warehouse-entry>span::before{content:none}
/* Белая иконка внутри плитки: отдельный слой маски поверх ::before. */
html.surf-preview #catalog .warehouse-entry{position:relative}
html.surf-preview #catalog .warehouse-entry>span::after{content:'';position:absolute;left:24px;top:50%;width:24px;height:24px;margin-top:-12px;background:#fff;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;pointer-events:none}
html.surf-preview #catalog .warehouse-entry[data-view=warehouse]{--ico:var(--g-ico-box)}
html.surf-preview #catalog .invoice-entry{--ico:var(--g-ico-doc)}
html.surf-preview #catalog .desserts-entry{--ico:var(--g-ico-cake)}

/* Поле поиска с лупой (десерты, склад). */
html.surf-preview :is(.search-label,.warehouse-controls label){font-size:12px;font-weight:600;color:#aab2bc}
html.surf-preview :is(#catalog-search,#warehouse-search){padding-left:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px 50%;background-size:16px;-webkit-appearance:none;appearance:none}
html.surf-preview :is(#catalog-search,#warehouse-search)::-webkit-search-cancel-button{filter:invert(.7)}

/* Десерты: сгруппированный список, срок — капсула справа. */
html.surf-preview #catalog-list>.catalog-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:13px 14px 13px 16px;border-radius:0;border-top-width:0;box-shadow:none}
html.surf-preview #catalog-list>.catalog-row:first-child{border-top-width:1px;border-radius:18px 18px 0 0}
html.surf-preview #catalog-list>.catalog-row:last-child{border-radius:0 0 18px 18px;box-shadow:0 14px 28px -16px #000c}
html.surf-preview #catalog-list>.catalog-row:only-child{border-radius:18px}
html.surf-preview #catalog-list>.catalog-row+.catalog-row::before{content:'';position:absolute;top:0;left:16px;right:0;height:1px;background:#ffffff12}
html.surf-preview #catalog-list .catalog-row>div{display:flex;flex-direction:column;gap:3px}
html.surf-preview #catalog-list .catalog-row strong{font-size:15px;font-weight:600;overflow-wrap:break-word}
html.surf-preview #catalog-list .catalog-row small{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#9aa3ad}
html.surf-preview #catalog-list .catalog-row small::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g-mint)}
html.surf-preview #catalog-list .catalog-row .text-button{min-height:34px;padding:0 12px;border:1px solid var(--g-edge);border-radius:999px;background:#ffffff0a;font-size:12px;font-weight:600}
html.surf-preview #catalog-list .catalog-row.g-no-hours small{color:#f3d9a8}
html.surf-preview #catalog-list .catalog-row.g-no-hours small::before{background:#efbd69;box-shadow:0 0 6px #efbd69}
html.surf-preview #new-dessert{min-height:34px;padding:0 12px;border:1px solid #ed405566;border-radius:999px;background:#ed40551a;color:#ffc2cb;font-size:12px;font-weight:650}

/* Склад: сводка, фильтры, строки. */
html.surf-preview #warehouse-status{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;font-size:12px;line-height:1.55}
html.surf-preview #warehouse-status::before{content:'';flex:0 0 6px;height:6px;margin-top:6px;border-radius:50%;background:var(--g-mint);box-shadow:0 0 8px #b3d1c488}
html.surf-preview #warehouse>.hint{font-size:12px;line-height:1.5;color:#8f99a5}
html.surf-preview #warehouse-refresh{min-height:34px;padding:0 12px;border:1px solid var(--g-edge);border-radius:999px;background:#ffffff0a;font-size:12px;font-weight:600}
html.surf-preview .warehouse-counts{gap:0;margin:14px 0;border:1px solid var(--g-edge);border-radius:20px;background:var(--g-card);box-shadow:var(--g-sheen),var(--g-shadow);overflow:hidden}
html.surf-preview .warehouse-counts>div{margin:0;padding:14px 8px;border:0;border-radius:0;background:none;box-shadow:none;text-align:center}
html.surf-preview .warehouse-counts>div+div{border-left:1px solid #ffffff12}
html.surf-preview .warehouse-counts strong{font-family:var(--g-num);font-size:26px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:#fff}
html.surf-preview .warehouse-counts>div:nth-child(2) strong{color:#efbd69}
html.surf-preview .warehouse-counts>div:nth-child(3) strong{color:#ff8fa0}
html.surf-preview .warehouse-counts span{margin-top:4px;font-size:11.5px;color:#9aa3ad}
html.surf-preview .warehouse-controls{gap:10px}
html.surf-preview .warehouse-controls select{min-height:46px;color-scheme:dark}
html.surf-preview .warehouse-filters{margin:12px 0 8px}
html.surf-preview #warehouse-results-count{margin:0 4px 8px;font-size:12px;color:#9aa3ad}
html.surf-preview #warehouse-list>.warehouse-row{margin:0;padding:13px 16px;border-radius:0;border-top-width:0;box-shadow:none}
html.surf-preview #warehouse-list>.warehouse-row:first-child{border-top-width:1px;border-radius:18px 18px 0 0}
html.surf-preview #warehouse-list>.warehouse-row:last-child{border-radius:0 0 18px 18px;box-shadow:0 14px 28px -16px #000c}
html.surf-preview #warehouse-list>.warehouse-row:only-child{border-radius:18px}
html.surf-preview #warehouse-list>.warehouse-row+.warehouse-row::before{content:'';position:absolute;top:0;left:16px;right:0;height:1px;background:#ffffff12}
html.surf-preview .warehouse-row-heading{align-items:baseline;gap:12px}
html.surf-preview .warehouse-row-heading>strong{font-size:15px;font-weight:600;line-height:1.35}
html.surf-preview .warehouse-row-heading>b{flex-shrink:0;padding:0;background:none;font-family:var(--g-num);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
html.surf-preview .warehouse-row-heading>b small{font-family:inherit;font-size:12px;font-weight:600;color:#9aa3ad}
html.surf-preview .warehouse-row>p{margin:3px 0 0;font-size:12px;color:#8f99a5}
html.surf-preview .stock-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:650}
html.surf-preview .stock-low .stock-badge{background:#efbd6914;border:1px solid #efbd6955;color:#f3d9a8}
html.surf-preview .stock-negative .stock-badge{background:#ed40551a;border:1px solid #ed405566;color:#ffc2cb}
html.surf-preview .stock-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
html.surf-preview .stock-low .warehouse-row-heading>b{color:#efbd69}
html.surf-preview .stock-negative .warehouse-row-heading>b{color:#ff8fa0}
html.surf-preview .warehouse-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
html.surf-preview .warehouse-row-bottom small{font-size:12px;color:#8f99a5}
html.surf-preview .warehouse-row-bottom .text-button{min-height:32px;padding:0 12px;border:1px solid var(--g-edge);border-radius:999px;background:#ffffff0a;font-size:12px;font-weight:600;white-space:nowrap}
html.surf-preview #warehouse-more{min-height:44px;margin-top:12px;border:1px solid var(--g-edge-strong);border-radius:999px;background:#ffffff0d;font-weight:600}

/* Шапка: подпись «Команда» на всех узких ширинах (раньше пропадала на 541–700 px). */
@media(max-width:700px){html.surf-preview .team::after{content:'Команда'}}

/* Десерты и склад: отдельные карточки с промежутками вместо сплошного списка. */
html.surf-preview :is(#catalog-list,#warehouse-list){display:grid;gap:8px}
html.surf-preview :is(#catalog-list>.catalog-row,#warehouse-list>.warehouse-row),
html.surf-preview :is(#catalog-list>.catalog-row,#warehouse-list>.warehouse-row):is(:first-child,:last-child,:only-child){border-top-width:1px;border-radius:16px;box-shadow:var(--g-sheen),0 8px 18px -12px #000c}
html.surf-preview :is(#catalog-list>.catalog-row+.catalog-row,#warehouse-list>.warehouse-row+.warehouse-row)::before{content:none}
html.surf-preview #catalog-list>.catalog-row{padding:14px 16px}

/* Задания: отдельные карточки с промежутками (смены остаются сплошным списком). */
html.surf-preview .daily-task-group{display:grid;gap:8px}
html.surf-preview .daily-task-group>h3{margin-bottom:0}
html.surf-preview .daily-task-group>.daily-task,
html.surf-preview .daily-task-group>.daily-task:is(:last-child,h3+.daily-task){border-top-width:1px;border-radius:16px;box-shadow:var(--g-sheen),0 8px 18px -12px #000c}
html.surf-preview .daily-task-group>.daily-task.is-done{border-color:#4f756566}
html.surf-preview .daily-task-group>.daily-task+.daily-task::before{content:none}

/* ═══ Glass · Подложки на телефоне: один ряд с горизонтальной прокруткой ═══════
   Порядок подложек прежний (слева направо как на витрине); плитки шире,
   название целиком в две строки, количество крупно. Края затухают, если есть скрытые. */
@media(max-width:700px){
 html.surf-preview #cards .shelf-group>.shelf-trays{--tray-gap:8px;flex-wrap:nowrap;justify-content:flex-start;gap:var(--tray-gap);
  margin:0 -12px;padding:4px 12px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);
  transition:--fade-l .2s,--fade-r .2s}
 html.surf-preview #cards .shelf-group>.shelf-trays::-webkit-scrollbar{display:none}
 html.surf-preview #cards .shelf-group>.shelf-trays.g-more-left{--fade-l:18px}
 html.surf-preview #cards .shelf-group>.shelf-trays.g-more-right{--fade-r:18px}
 html.surf-preview #cards .shelf-trays>.compact-tray{flex:0 0 clamp(66px,calc((100% - 4 * var(--tray-gap)) / 4.5),100px);max-width:none;height:82px;padding:10px 3px 8px;gap:6px;justify-content:space-between;border-radius:14px;scroll-snap-align:start}
 html.surf-preview #cards .compact-tray strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;font-size:11px;font-weight:650;line-height:1.25;letter-spacing:-.2px;text-align:center;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;word-break:normal;hyphens:manual}
 html.surf-preview #cards .compact-tray small{font-family:var(--g-num);font-size:11px;font-weight:600;opacity:1;color:#aab2bc}
 html.surf-preview #cards .compact-tray small::first-line{font-size:inherit}
 html.surf-preview #cards .compact-tray.is-expired small{color:#ffc2cb}
 html.surf-preview #cards .compact-tray.is-empty strong{color:#8e97a2}
 html.surf-preview #cards .compact-tray .expiry-dot{top:6px;right:6px}
 html.surf-preview .shelf-group .row-empty{margin:0 12px}
}
@property --fade-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --fade-r{syntax:'<length>';inherits:false;initial-value:0px}

/* ═══ Glass · Полка как витрина ════════════════════════════════════════════════
   Панель — глубокое тёмное стекло с бликом сверху; подложки стоят в утопленном
   «ложе» с внутренней тенью и светлой кромкой снизу, как стеклянная полка. */
html.surf-preview .shelf-group{
 background:
  radial-gradient(120% 60% at 50% -10%,#ffffff0d,transparent 60%),
  linear-gradient(180deg,#1b1e23f5 0%,#15171bf5 100%);
 border-color:#ffffff10;
 box-shadow:inset 0 1px 0 #ffffff14,inset 0 -1px 0 #00000066,0 1px 1px #00000040,0 18px 36px -18px #000000d9}
html.surf-preview .shelf-group.g-lit{background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-200px),#ffffff0a,transparent 45%),radial-gradient(120% 60% at 50% -10%,#ffffff0d,transparent 60%),linear-gradient(180deg,#1b1e23f5,#15171bf5)}
html.surf-preview #cards .shelf-group>.shelf-trays{position:relative;padding:12px 10px 14px;border-radius:14px;
 background:
  linear-gradient(180deg,transparent calc(100% - 3px),#ffffff17 calc(100% - 3px),#ffffff17 calc(100% - 2px),transparent calc(100% - 2px)),
  radial-gradient(80% 50% at 50% 100%,#ed40550a,transparent 70%),
  linear-gradient(180deg,#0b0c0fcc,#101216cc);
 box-shadow:inset 0 2px 6px #000000b3,inset 0 0 0 1px #00000080,0 1px 0 #ffffff0d}
@media(min-width:701px){html.surf-preview #cards .shelf-group>.shelf-trays{padding:14px 12px 16px}}
@media(max-width:700px){
 html.surf-preview #cards .shelf-group>.shelf-trays{margin:0;padding:12px 10px 14px;scroll-padding-inline:10px}
 html.surf-preview .shelf-group{padding:16px 10px 12px}
}
/* Плитки чуть приподняты над ложем. */
html.surf-preview #cards .shelf-trays>.compact-tray{box-shadow:inset 0 1px 0 #ffffff17,0 1px 0 #00000080,0 6px 10px -6px #000000e6}
html.surf-preview #cards .compact-tray.is-empty{background:linear-gradient(180deg,#16181cb3,#121418b3);box-shadow:none}

/* ═══ Glass · Шторки и окна ═══════════════════════════════════════════════════ */
html.surf-preview dialog{color:var(--surf-text)}
html.surf-preview dialog form,html.surf-preview #training-dialog[open],html.surf-preview #remove-batch-dialog[open]{display:flex;flex-direction:column}
/* Заголовок и круглая «×». */
html.surf-preview .dialog-heading{gap:12px;margin:0 0 6px}
html.surf-preview dialog h2{margin:0;font-size:20px;font-weight:750;letter-spacing:-.4px;line-height:1.25;color:#fff}
html.surf-preview dialog .close{display:grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid var(--g-edge);border-radius:50%;background:#ffffff0f;color:#c3cad2;font-size:20px;line-height:1;box-shadow:var(--g-sheen);transition:background-color .2s ease,color .2s ease,transform .32s var(--g-spring)}
@media(hover:hover){html.surf-preview dialog .close:hover{background:#ffffff1f;color:#fff}}
/* Подзаголовок: имя товара/партии под заголовком. */
html.surf-preview dialog :is(#warehouse-minimum-name,#row-count-name,#writeoff-name,#remove-name,#notification-person,#remove-batch-description,#guide-step){margin:0 0 14px;font-size:14px;font-weight:600;color:#ffc2cb}
html.surf-preview dialog form>p.muted:not([id]){margin:0 0 14px;font-size:13px;line-height:1.5;color:#9aa3ad}
/* Поля: подпись сверху, ровный шаг. */
html.surf-preview dialog label{display:block;margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1px;color:#aab2bc}
html.surf-preview dialog label>:is(input,select,textarea),html.surf-preview dialog label>.keyboard-field{display:block;margin-top:7px}
html.surf-preview dialog :is(input,select){min-height:48px;font-weight:600;color:#fff}
html.surf-preview dialog select,html.surf-preview .warehouse-controls select,html.surf-preview .payroll-controls select{-webkit-appearance:none;appearance:none;padding-right:40px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
html.surf-preview dialog input[type=number]{font-family:var(--g-num);font-variant-numeric:tabular-nums}
html.surf-preview dialog input[type=datetime-local]{font-family:var(--g-num);color-scheme:dark}
/* Подсказка: тихая плашка с иконкой «i». */
html.surf-preview dialog .hint{position:relative;margin:0 0 16px;padding:10px 12px 10px 36px;border-radius:12px;background:#ffffff08;border:1px solid var(--g-edge);font-size:12.5px;line-height:1.5;color:#9aa3ad}
html.surf-preview dialog .hint::before{content:'i';position:absolute;left:12px;top:11px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#ffffff1a;color:#c3cad2;font:700 10px/1 var(--g-num)}
/* Главная кнопка прилипает к низу длинной шторки. */
html.surf-preview dialog .primary.wide{position:sticky;bottom:0;z-index:2;margin-top:6px;min-height:52px;border-radius:16px;font-size:15px}
html.surf-preview dialog [role=status]:not(:empty){margin:10px 0 0;font-size:13px;color:#ffc2cb;text-align:center}
/* Новая партия: превью срока — капсула. */
html.surf-preview .expiry-preview:not(:empty){display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#b3d1c414;border:1px solid #b3d1c440;color:#d6ece2;font-family:var(--g-num);font-size:13px;font-weight:600}
html.surf-preview .expiry-preview:not(:empty)::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--g-mint);box-shadow:0 0 8px var(--g-mint)}
html.surf-preview #batch-form:has([type=submit]:disabled) .expiry-preview{background:#efbd6914;border-color:#efbd6955;color:#f3d9a8}
html.surf-preview #batch-form:has([type=submit]:disabled) .expiry-preview::before{background:#efbd69;box-shadow:0 0 8px #efbd69}
html.surf-preview dialog .primary:disabled{filter:saturate(.3) brightness(.7);box-shadow:none}
/* Снять всю партию: «×» в углу, две кнопки как в карточке партии. */
html.surf-preview #remove-batch-dialog>.close{position:absolute;top:22px;right:20px}
html.surf-preview #remove-batch-dialog>h2{margin:0 44px 6px 0}
html.surf-preview #remove-batch-dialog>p:not([id]){margin:0 0 16px;font-size:13px;line-height:1.5;color:#9aa3ad}
html.surf-preview #remove-batch-dialog .unit-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
html.surf-preview #remove-batch-dialog .unit-actions button{min-height:52px;margin:0;border-radius:14px;font-size:15px;font-weight:650;text-transform:none;letter-spacing:0;box-shadow:var(--g-sheen)}
html.surf-preview #remove-batch-dialog [data-bulk-reason="Продано"]{background:#b3d1c41a;border:1px solid #b3d1c44d;color:#d6ece2}
html.surf-preview #remove-batch-dialog [data-bulk-reason="Списано"]{background:#ed40551f;border:1px solid #ed405566;color:#ffc2cb}
/* Обучение: навигация по шагам. */
html.surf-preview .guide-controls{position:sticky;bottom:0;margin-top:16px;padding:12px 0 0;border-top:1px solid #ffffff12;background:linear-gradient(180deg,transparent,#1a1d21 30%);border-radius:0}
html.surf-preview .guide-controls .primary{min-height:46px;border-radius:14px}
html.surf-preview .guide-controls .text-button{min-height:46px;padding:0 16px;border:1px solid var(--g-edge);border-radius:14px;background:#ffffff0a}
html.surf-preview #training-dialog .hint{margin-top:12px}
/* Компьютер: окно по центру, шире отступы. */
@media(min-width:701px){html.surf-preview dialog[open]{padding:24px;border-radius:24px;width:460px}}
html.surf-preview label>.g-select-search:not([hidden]){margin:7px 0 6px}
html.surf-preview label>.g-select-search+select,html.surf-preview label>.g-select-search+.keyboard-field{margin-top:0}
html.surf-preview dialog :is(input,textarea)::placeholder{font-size:14px;font-weight:500;color:#6f7782}
html.surf-preview .dialog-heading+label,html.surf-preview .dialog-heading+input+label{margin-top:10px}
/* Схема в «Обучении» рисуется светлой: переводим её в тёмную, сохраняя оттенок акцентов. */
html.surf-preview #guide-content svg{border-radius:14px}
html.surf-preview #guide-content h3{font-size:19px;letter-spacing:-.3px}
html.surf-preview #guide-content p{font-size:15px;line-height:1.6;color:#d6dbe1}
html.surf-preview .guide-picture{margin:4px 0 14px;padding:0;border:1px solid var(--g-edge);border-radius:16px;background:#141619;overflow:hidden}
html.surf-preview .guide-picture svg{display:block;border-radius:0}
html.surf-preview .guide-picture figcaption{padding:8px 12px;border-top:1px solid #ffffff10;background:#101215;color:#8f99a5;font-size:11.5px}
html.surf-preview dialog .primary.wide{box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -8px #ed4055aa,0 -10px 18px 6px #1c1f24}

/* ═══ Glass · Движение ═════════════════════════════════════════════════════════ */
/* Скелетоны: пока список пуст и данные грузятся, вместо надписи — мерцающие карточки. */
html.surf-preview :is(#tasks-progress:empty+#tasks-list:empty,#schedule-today:empty,#warehouse-list:empty)::before,
html.surf-preview :is(#tasks-progress:empty+#tasks-list:empty,#schedule-today:empty,#warehouse-list:empty)::after{content:'';display:block;height:68px;margin:0 0 8px;border-radius:16px;border:1px solid var(--g-edge);
 background:linear-gradient(100deg,transparent 30%,#ffffff0d 50%,transparent 70%) 0 0/220% 100%,var(--g-card);animation:g-skeleton 1.3s linear infinite}
html.surf-preview :is(#tasks-progress:empty+#tasks-list:empty,#schedule-today:empty,#warehouse-list:empty)::after{height:52px;opacity:.6;animation-delay:.15s}
@keyframes g-skeleton{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}

/* Тост: выезжает снизу с пружиной. */
html.surf-preview #toast:not([hidden]){animation:g-toast-in .55s cubic-bezier(.22,1,.36,1)}
@keyframes g-toast-in{from{opacity:0;translate:0 16px;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* Логотип: один короткий блик при открытии приложения. */
html.surf-preview .logo{position:relative;overflow:hidden}
html.surf-preview .logo::after{content:'';position:absolute;inset:-20% auto -20% -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff8c,transparent);transform:skewX(-18deg) translateX(0);animation:g-logo-shine 1.1s .6s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
@keyframes g-logo-shine{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(420%)}}

/* Результаты поиска появляются по очереди. */
html.surf-preview .g-search-results button{animation:g-rise .38s cubic-bezier(.22,1,.36,1) backwards}
html.surf-preview .g-search-results button:nth-child(2){animation-delay:.025s}html.surf-preview .g-search-results button:nth-child(3){animation-delay:.05s}
html.surf-preview .g-search-results button:nth-child(4){animation-delay:.075s}html.surf-preview .g-search-results button:nth-child(n+5){animation-delay:.1s}
@keyframes g-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Капсулы-кнопки: мягкое нажатие с пружинным возвратом. */
html.surf-preview :is(.shelf-toggle,.row-count-button,.text-button,.account-back,#tasks-today,#payroll-reload,.schedule-tabs button,.filter-buttons button,.g-search-clear,dialog .close){transition:background-color .2s ease,color .2s ease,scale .4s var(--g-spring)}

@media(prefers-reduced-motion:reduce){
 html.surf-preview :is(#tasks-progress:empty+#tasks-list:empty,#schedule-today:empty,#warehouse-list:empty)::before,
 html.surf-preview :is(#tasks-progress:empty+#tasks-list:empty,#schedule-today:empty,#warehouse-list:empty)::after,
 html.surf-preview #toast:not([hidden]),html.surf-preview .logo::after,html.surf-preview .g-search-results button{animation:none}
 html.surf-preview .logo::after{display:none}
}

/* ═══ Glass · Бордо: чёрный + винный, тёплое стекло вместо холодного серого ══════ */
html.surf-preview{
 --g-bg:#0a0708;--g-card:linear-gradient(180deg,#201619f2,#170f12f2);--g-edge:#ffd6dc14;--g-edge-strong:#ffd6dc26;
 --g-glass:#180d11b8;--wine:#7a1430;--wine-deep:#4a0c1d;--wine-glow:#a3213f;background:#0a0708}
html.surf-preview body{background:#0a0708}
/* Фон: бордовые отсветы на чёрном, медленно перетекают (около полуминуты на цикл). */
html.surf-preview body::before{inset:-25vh -25vw;
 background:
  radial-gradient(55vmax 45vmax at 8% 4%,#6b112acc,transparent 62%),
  radial-gradient(50vmax 42vmax at 96% 38%,#430b1bd9,transparent 64%),
  radial-gradient(70vmax 52vmax at 35% 108%,#5a0f23b3,transparent 62%),
  radial-gradient(40vmax 30vmax at 70% 0%,#2a0710,transparent 70%),
  linear-gradient(180deg,#0c0708,#060405);
}
html.surf-preview body::after{opacity:.06}

/* Логотип: бордовая плитка, белые буква и точка. */
html.surf-preview .logo{background:linear-gradient(160deg,#9e1f3f,#5c0f24);color:#fff;box-shadow:inset 0 1px 0 #ffffff33,inset 0 -1px 0 #00000040,0 6px 16px -6px #a3213fcc}

/* Шапка, док, окна — винное стекло. */
html.surf-preview.glass-scrolled header{background:#160b0ff2;border-bottom-color:#ffd6dc14}
@media(max-width:700px){
 html.surf-preview .toolbar nav{background:#1a0e12f2;border-color:#ffd6dc24;box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #0008,0 18px 40px -12px #000d,0 0 40px -18px #a3213f66}
 html.surf-preview .toolbar nav .tab.active{background:linear-gradient(180deg,#7a143059,#4a0c1d59)}
 html.surf-preview .toolbar nav.mv2-blob>.mv2-tab-blob{background:linear-gradient(180deg,#8e1b3873,#4a0c1d73)!important;box-shadow:inset 0 1px 0 #ffffff26,0 0 0 1px #ff8fa02e,0 6px 18px -6px #a3213f99!important}
}
@media(min-width:701px){html.surf-preview .toolbar nav{background:#180d11f2}html.surf-preview .toolbar nav .tab.active{background:linear-gradient(180deg,#8e1b38,#5c0f24);color:#fff}}
html.surf-preview dialog{background:linear-gradient(180deg,#24171bf0,#170e11f5)}
html.surf-preview #preview-more-dialog{background:linear-gradient(180deg,#24171bf0,#170e11f5)}
html.surf-preview dialog .primary.wide{box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -8px #a3213faa,0 -10px 18px 6px #1a1013}

/* Главная кнопка: от алого к бордо. */
html.surf-preview .primary{background:linear-gradient(180deg,#e8394f,#9e1f3f)}
html.surf-preview .primary:hover{background:linear-gradient(180deg,#f04a5f,#ad2446)}

/* Бегунки «Все» и разделов смен — бордовое стекло с мягким свечением. */
html.surf-preview :is(.filter-buttons,.schedule-tabs){background:#0000006b;border-color:#ffd6dc14}
html.surf-preview .g-thumb{background:linear-gradient(180deg,#8e1b38,#5a0f23);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -1px 0 #00000040,0 6px 16px -6px #a3213fa6}
html.surf-preview .filter-buttons:not(.g-has-thumb) button[aria-pressed=true],html.surf-preview .schedule-tabs:not(.g-has-thumb) button[aria-pressed=true]{background:linear-gradient(180deg,#8e1b38,#5a0f23)}
html.surf-preview :is(.filter-buttons,.schedule-tabs) button:not([aria-pressed=true]){color:#c9b6ba}

/* Полки: тёплое стекло, ложе почти чёрное с винным отсветом. */
html.surf-preview .shelf-group{background:radial-gradient(120% 60% at 50% -10%,#ff8fa00d,transparent 60%),linear-gradient(180deg,#1f1518f5,#150d10f5);border-color:#ffd6dc12}
html.surf-preview .shelf-group.g-lit{background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-200px),#ff8fa00f,transparent 45%),radial-gradient(120% 60% at 50% -10%,#ff8fa00d,transparent 60%),linear-gradient(180deg,#1f1518f5,#150d10f5)}
html.surf-preview #cards .shelf-group>.shelf-trays{background:
  linear-gradient(180deg,transparent calc(100% - 3px),#ff8fa01f calc(100% - 3px),#ff8fa01f calc(100% - 2px),transparent calc(100% - 2px)),
  radial-gradient(80% 60% at 50% 100%,#a3213f1f,transparent 70%),
  linear-gradient(180deg,#090506d9,#0f0809d9)}
html.surf-preview :is(.shelf-toggle,.row-count-button){background:#ffd6dc0d}

/* Подложки: тёплый графит + цветная полоска статуса снизу. */
html.surf-preview #cards .shelf-trays>.compact-tray{background:linear-gradient(180deg,#2c2024,#1f1619);border-color:#ffd6dc1f;
 box-shadow:inset 0 1px 0 #ffffff17,inset 0 -3px 0 #8fc3add9,0 1px 0 #00000080,0 6px 10px -6px #000000e6}
html.surf-preview #cards .compact-tray small{color:#bfd9cd}
html.surf-preview #cards .compact-tray.is-expired{background:linear-gradient(180deg,#5a1a2a,#3a1019);border-color:#f57b8e8c;
 box-shadow:inset 0 1px 0 #ffffff17,inset 0 -3px 0 #ff6b80,0 0 0 1px #ed40551f,0 8px 18px -8px #ed405599}
html.surf-preview #cards .compact-tray.is-expired small{color:#ffc2cb}
html.surf-preview #cards .compact-tray.is-empty{background:linear-gradient(180deg,#140c0eb3,#100a0bb3);border-color:#ffd6dc1c;box-shadow:none}
html.surf-preview #cards .compact-tray.is-empty small{color:#8b7c80}
@media(hover:hover) and (pointer:fine){html.surf-preview #cards .compact-tray:not(.is-empty):hover{border-color:#ffd6dc40}}

/* Сводка: «Свежие» мятная, «Снять» розовая — чтобы цифры жили. */
html.surf-preview .stats>div:nth-child(2) strong{color:#cfe8dc}
html.surf-preview .stats>div:nth-child(3) strong{color:#f3d9a8}

html.surf-preview #cards .shelf-trays>.compact-tray:not(.is-expired):not(.is-empty){background:radial-gradient(90% 55% at 50% 105%,#8fc3ad2e,transparent 70%),linear-gradient(180deg,#30242a,#221819)}

/* ═══ Glass · Бордо: переливы заметнее ═════════════════════════════════════════
   Два неподвижных слоя света: винный (body::before) и розово-сливовый (.shell::before). */
html.surf-preview body::before{
 background:
  radial-gradient(50vmax 42vmax at 10% 6%,#8a1534e6,transparent 60%),
  radial-gradient(46vmax 40vmax at 95% 40%,#5e0f25f2,transparent 62%),
  radial-gradient(62vmax 48vmax at 30% 106%,#7a1430cc,transparent 60%),
  linear-gradient(180deg,#0c0708,#060405);
 animation:none;transition:transform 2.6s cubic-bezier(.22,1,.36,1)}
/* The background moves only right after an interaction (body.g-drift-N, set by design-preview.js)
   and then rests: a constantly moving full-screen layer under glass heated phones in ~15 minutes.
   Transform/opacity only, no blend mode; the layers are oversized so edges never show. */
html.surf-preview .shell::before{content:'';position:fixed;inset:-12vh -12vw;z-index:-1;pointer-events:none;
 background:
  radial-gradient(28vmax 24vmax at 78% 18%,#d0355a33,transparent 65%),
  radial-gradient(32vmax 26vmax at 18% 62%,#5a1a4a40,transparent 65%),
  radial-gradient(26vmax 22vmax at 62% 86%,#ff6b801f,transparent 65%);
 opacity:.85;transition:transform 2.6s cubic-bezier(.22,1,.36,1),opacity 2.6s ease-in-out}
html.surf-preview body.g-drift-1::before{transform:translate3d(-4vw,3vh,0) scale(1.06)}
html.surf-preview body.g-drift-1 .shell::before{transform:translate3d(5vw,-4vh,0) scale(1.08);opacity:1}
html.surf-preview body.g-drift-2::before{transform:translate3d(3vw,-2vh,0) scale(1.1)}
html.surf-preview body.g-drift-2 .shell::before{transform:translate3d(-6vw,3vh,0) scale(1.04);opacity:.7}
html.surf-preview body.g-drift-3::before{transform:translate3d(-2vw,-3vh,0) scale(1.03)}
html.surf-preview body.g-drift-3 .shell::before{transform:translate3d(3vw,5vh,0) scale(1.12);opacity:.95}
html.surf-preview body.g-alive::before,html.surf-preview body.g-alive .shell::before{will-change:transform,opacity}

/* Логотип и главная кнопка «вздыхают» один раз вместе с фоном, а не бесконечно. */
html.surf-preview body.g-alive .logo{animation:g-breathe 2.6s ease-in-out}
@keyframes g-breathe{0%,100%{box-shadow:inset 0 1px 0 #ffffff33,inset 0 -1px 0 #00000040,0 6px 16px -6px #a3213fcc}50%{box-shadow:inset 0 1px 0 #ffffff33,inset 0 -1px 0 #00000040,0 8px 26px -4px #d0355ae6}}
html.surf-preview .primary:not(:disabled){background-size:100% 160%}
html.surf-preview body.g-alive .primary:not(:disabled){animation:g-primary-flow 2.6s ease-in-out}
@keyframes g-primary-flow{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}

/* Стекло шапки и дока включается только на время прокрутки: тогда под ним едет контент
   и размытие видно; в покое — почти непрозрачный фон без пересчёта blur. */
html.surf-preview header,html.surf-preview .toolbar nav{transition:background-color .3s ease}
html.surf-preview.glass-scrolled body.g-scrolling header{background:#160b0fbf;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
@media(max-width:700px){html.surf-preview body.g-scrolling .toolbar nav{background:#1a0e12c7;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}}

/* Слабый или перегретый телефон (body.g-lite): бесконечные кольца просрочки и индикатор связи замирают. */
html.surf-preview body.g-lite .notice>span::after,html.surf-preview body.g-lite .compact-tray.is-expired .expiry-dot::after,
html.surf-preview body.g-lite #detail-batches .batch.expired::after{animation:none}
/* Витрину давно не трогали (body.g-rest, rest.js): кольца замирают, чтобы телефон не грелся. */
html.surf-preview body.g-rest .notice>span::after,html.surf-preview body.g-rest .compact-tray.is-expired .expiry-dot::after,
html.surf-preview body.g-rest #detail-batches .batch.expired::after{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){html.surf-preview body::before,html.surf-preview .shell::before{transition:none}html.surf-preview .logo,html.surf-preview .primary{animation:none!important}}
/* Стекло пропускает перелив фона. */
html.surf-preview{--g-card:linear-gradient(180deg,#22171bd1,#170f12d6)}
html.surf-preview .shelf-group{background:radial-gradient(120% 60% at 50% -10%,#ff8fa012,transparent 60%),linear-gradient(180deg,#211619cf,#150d10d6)}
html.surf-preview .shelf-group.g-lit{background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-200px),#ff8fa012,transparent 45%),radial-gradient(120% 60% at 50% -10%,#ff8fa012,transparent 60%),linear-gradient(180deg,#211619cf,#150d10d6)}

/* Смены: разделы одним ровным рядом с бегунком. */
html.surf-preview .schedule-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:2px;padding:4px;border-radius:14px}
html.surf-preview .schedule-tabs button,html.surf-preview .schedule-tabs button[aria-pressed=true]{min-height:40px;padding:8px 6px;border-radius:10px;font-size:13px;white-space:nowrap}
html.surf-preview .schedule-tabs .g-thumb{border-radius:10px}

/* Ложе под подложками: мягкая выемка, растворяется кверху; кромка светится и гаснет к краям. */
html.surf-preview #cards .shelf-group>.shelf-trays{
 background:
  linear-gradient(90deg,transparent 4%,#ff8fa04d 30%,#ffb3be66 50%,#ff8fa04d 70%,transparent 96%) 0 100%/100% 1px no-repeat,
  radial-gradient(70% 40% at 50% 100%,#a3213f2e,transparent 75%),
  linear-gradient(180deg,#07040500 0%,#0704058c 45%,#070405cc 100%);
 box-shadow:inset 0 -10px 18px -12px #000000cc}
/* Полоска статуса на плитках тоньше и мягче. */
html.surf-preview #cards .shelf-trays>.compact-tray{box-shadow:inset 0 1px 0 #ffffff17,inset 0 -2px 0 #8fc3adb3,0 1px 0 #00000080,0 6px 10px -6px #000000e6}
html.surf-preview #cards .compact-tray.is-expired{box-shadow:inset 0 1px 0 #ffffff17,inset 0 -2px 0 #ff6b80cc,0 0 0 1px #ed40551a,0 8px 16px -8px #ed405580}
html.surf-preview #cards .compact-tray.is-empty{box-shadow:none}

/* ═══ Glass · Заставка при запуске ═════════════════════════════════════════════
   Первый кадр рисуется ещё до скриптов (html.g-splash ставит inline-скрипт в <head>);
   design-preview.js подменяет его живым слоем #g-splash в той же точке и анимирует. */
html.g-splash::before,#g-splash{position:fixed;inset:0;z-index:2147483000;
 background:radial-gradient(60vmax 45vmax at 50% 42%,#7a14306b,transparent 62%),radial-gradient(50vmax 40vmax at 0% 0%,#4a0c1d99,transparent 60%),radial-gradient(50vmax 40vmax at 100% 100%,#4a0c1d80,transparent 60%),#0a0708}
html.g-splash::before{content:''}
html.g-splash::after,#g-splash .g-splash-logo{width:84px;height:84px;border-radius:24px;background:linear-gradient(160deg,#9e1f3f,#5c0f24);color:#fff;
 font:800 56px/84px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-2px;text-align:center;
 box-shadow:inset 0 1px 0 #ffffff33,inset 0 -1px 0 #00000040,0 14px 40px -10px #d0355acc}
html.g-splash::after{content:'в.';position:fixed;left:50%;top:44%;margin:-42px 0 0 -42px;z-index:2147483001}
#g-splash{display:block;touch-action:manipulation;cursor:pointer}
#g-splash .g-splash-brand{position:absolute;left:0;top:0;display:flex;align-items:center;transform-origin:0 0;will-change:transform}
#g-splash .g-splash-logo{position:relative;flex:0 0 auto;overflow:hidden}
#g-splash .g-splash-logo::after{content:'';position:absolute;inset:-20% auto -20% -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffffa6,transparent);transform:skewX(-18deg);opacity:0}
#g-splash .g-splash-word{display:flex;color:#f5f3ef;font-weight:750;letter-spacing:-.04em;white-space:nowrap}
#g-splash .g-splash-word span{display:inline-block;opacity:0}
#g-splash .g-splash-line{position:absolute;left:50%;width:120px;height:2px;margin-left:-60px;border-radius:2px;overflow:hidden;background:#ffffff14}
#g-splash .g-splash-line::after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,#ff8fa0,transparent);animation:g-splash-line 1.1s ease-in-out infinite}
@keyframes g-splash-line{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
html.g-splash-hold header .brand{visibility:hidden}

/* ═══ Glass · Свайп партии ═════════════════════════════════════════════════════ */
html.surf-preview #detail-batches .batch{touch-action:pan-y;user-select:none;-webkit-user-select:none}
html.surf-preview #detail-batches .batch.g-swiping{position:relative;z-index:3;cursor:grabbing}
.g-swipe-under{position:fixed;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 26px;box-sizing:border-box;border-radius:20px;pointer-events:none;
 background:#120a0d;border:1px solid #ffd6dc14;font:700 16px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;overflow:hidden}
.g-swipe-under span{opacity:.35;transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.g-swipe-under .g-swipe-off{color:#ffc2cb}.g-swipe-under .g-swipe-sold{color:#d6ece2}
.g-swipe-under.g-left{background:linear-gradient(90deg,#7a1430,#3a0c18 60%,#120a0d)}
.g-swipe-under.g-right{background:linear-gradient(270deg,#2f5a4a,#16261f 60%,#120a0d)}
.g-swipe-under.g-no-sell.g-right{background:linear-gradient(270deg,#3a2a12,#1c150b 60%,#120a0d)}
.g-swipe-under.g-no-sell .g-swipe-sold{color:#f3d9a8;font-size:13px}
.g-swipe-under.g-left .g-swipe-off,.g-swipe-under.g-right .g-swipe-sold{opacity:.85}
.g-swipe-under.g-armed.g-left .g-swipe-off,.g-swipe-under.g-armed.g-right .g-swipe-sold{opacity:1;transform:scale(1.12)}

/* ═══ Glass · Задания: волна отметки и конфетти ═══════════════════════════════════ */
html.surf-preview .daily-task::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(100deg,transparent 35%,#b3d1c440 50%,transparent 65%) 120% 0/250% 100% no-repeat}
html.surf-preview .daily-task.is-saving::after{background:linear-gradient(100deg,transparent 30%,#ffffff0d 50%,transparent 70%) 0 0/220% 100%}
.g-confetti{position:fixed;z-index:2147482000;border-radius:2px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.g-confetti{display:none}}
html.surf-preview #detail-batches .batch.g-swiping{background-color:#1b1114}
html.surf-preview #detail-batches .batch.expired.g-swiping{background-color:#2a1219}
.g-swipe-under.g-left .g-swipe-sold,.g-swipe-under.g-right .g-swipe-off{opacity:0}