/* ============================================================
   Office Farm — шуточный скин «Windows XP» (Luna, голубая).
   Включается data-skin="xp" на <html>, поверх светлых токенов.
   ============================================================ */
.auth-theme{display:flex;gap:6px}
.of-xpb .xp-flag{transition:filter .15s}
.of-xpb:not([aria-pressed=true]) .xp-flag{filter:grayscale(1) opacity(.75)}
.of-xpb:hover .xp-flag{filter:none}
.xp-wb,.xp-task,.xp-off{display:none}

[data-skin=xp]{
  --bg-base:#ECE9D8;--bg-surface:#FFFFFF;--bg-elevated:#FFFFFF;--bg-inset:#F1EFE2;
  --border-subtle:#D6D2C2;--border-strong:#7F9DB9;
  --text-primary:#000000;--text-secondary:#2B2B2B;--text-muted:#575757;
  --accent:#316AC5;--on-accent:#FFFFFF;--accent-ink:#0A246A;--accent-wash:rgba(49,106,197,.16);
  --success:#1E7A1E;--warning:#8F5200;--danger:#C1272D;--info:#0B55C4;
  --success-soft:#E1F3D8;--warning-soft:#FFF2CC;--danger-soft:#FCE1DF;--info-soft:#DCE8FB;
  --scrim:rgba(0,0,0,.22);--shadow-drag:2px 4px 10px rgba(0,0,0,.35);
  --xp-title:linear-gradient(180deg,#0997FF 0%,#0053EE 9%,#0050EE 40%,#0066FF 88%,#0066FF 93%,#005BFF 95%,#003DD7 96%,#003DD7 100%);
  --xp-frame:#0054E3;
  --xp-font:Tahoma,Verdana,'Segoe UI',sans-serif;
  --xp-mono:'Lucida Console',Monaco,'Courier New',monospace;
  color-scheme:light;
}
[data-skin=xp] body{
  font-family:var(--xp-font);font-size:12px;-webkit-font-smoothing:auto;
  /* «Безмятежность»: небо + два холма */
  background:
    radial-gradient(130% 70% at 22% 112%,#9BD248 0 38%,#6CB52E 52%,transparent 53%),
    radial-gradient(110% 55% at 90% 118%,#86C43A 0 40%,#5DA425 52%,transparent 53%),
    radial-gradient(60% 20% at 70% 30%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(40% 14% at 25% 22%,rgba(255,255,255,.45),transparent 70%),
    linear-gradient(180deg,#2C6FD6 0%,#5A9BEA 38%,#A9CDF4 70%,#D8EAF8 100%);
  background-attachment:fixed;
}
[data-skin=xp] .num,[data-skin=xp] .mono,[data-skin=xp] code{font-family:var(--xp-mono)!important;font-weight:400;letter-spacing:0}
[data-skin=xp] .hud{font-family:var(--xp-font);letter-spacing:0;text-transform:none;font-size:11px;font-weight:700}
[data-skin=xp] button,[data-skin=xp] input,[data-skin=xp] select,[data-skin=xp] textarea{font-family:var(--xp-font)}

/* ---------- раскладка: окно + панель задач ---------- */
[data-skin=xp] .app{padding:10px 10px 40px;gap:10px;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
[data-skin=xp] .main{background:var(--bg-base);border:3px solid var(--xp-frame);border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 3px 12px rgba(0,0,0,.35);overflow:clip;min-height:calc(100vh - 50px)}
[data-skin=xp] .top{background:var(--xp-title);border:0;padding:4px 5px 4px 10px;min-height:30px;border-radius:7px 7px 0 0;margin:0 -3px;gap:8px}
[data-skin=xp] .top h1{font-family:'Trebuchet MS',var(--xp-font);font-size:13px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #0F1089;letter-spacing:0;display:flex;align-items:center;gap:6px}
[data-skin=xp] .top h1:before{content:'';width:16px;height:16px;background:linear-gradient(180deg,#FFE27A,#F2B630);border:1px solid #B7851B;border-radius:2px;box-shadow:inset 0 3px 0 #FFF3BF}
[data-skin=xp] .xp-wb{display:flex;gap:2px}
[data-skin=xp] .xp-wb i{width:21px;height:21px;border:1px solid #fff;border-radius:3px;background:linear-gradient(180deg,#5B95F9,#2D6BE9 45%,#1A50D8);box-shadow:inset 0 -1px 2px rgba(0,0,0,.25);position:relative}
[data-skin=xp] .xp-wb .mn:after{content:'';position:absolute;left:5px;bottom:5px;width:7px;height:3px;background:#fff}
[data-skin=xp] .xp-wb .mx:after{content:'';position:absolute;inset:4px;border:1px solid #fff;border-top-width:3px}
[data-skin=xp] .xp-wb .cl,[data-skin=xp] .modal .mh .ibtn,[data-skin=xp] .drawer .dh .ibtn[title="Закрыть"]{background:linear-gradient(180deg,#F0A390,#E0593B 30%,#C9381A 70%,#B12A0C);border:1px solid #fff;border-radius:3px;color:#fff}
[data-skin=xp] .xp-wb .cl:before,[data-skin=xp] .xp-wb .cl:after{content:'';position:absolute;left:4px;right:4px;top:9px;height:2px;background:#fff;transform:rotate(45deg)}
[data-skin=xp] .xp-wb .cl:after{transform:rotate(-45deg)}
[data-skin=xp] .top .burger{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
[data-skin=xp] .page{padding:14px 16px 28px}

/* ---------- сайдбар = панель задач Проводника ---------- */
[data-skin=xp] .side{background:linear-gradient(180deg,#7BA2E7 0%,#6375D6 100%);border:0;border-radius:4px;padding:12px 10px;top:10px;height:calc(100vh - 50px);box-shadow:2px 3px 12px rgba(0,0,0,.3);gap:0}
[data-skin=xp] .logo{padding:2px 6px 10px}
[data-skin=xp] .logo b{font-family:'Trebuchet MS',var(--xp-font);color:#fff;text-shadow:1px 1px 0 #0F1089;font-style:italic}
[data-skin=xp] .logo b i{color:#FFD34E}
[data-skin=xp] .logo span{color:#E3EAFD;letter-spacing:.06em}
[data-skin=xp] .navl{margin-top:4px;padding:6px 10px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#FFFFFF 30%,#C6D3F7);color:#215DC6;font-size:11px;font-weight:700}
[data-skin=xp] .nav{background:#D6DFF7;border-radius:0;color:#215DC6;padding:7px 10px;border:1px solid #fff;border-top:0}
[data-skin=xp] .nav:last-of-type{border-radius:0 0 4px 4px}
[data-skin=xp] .nav:hover{background:#D6DFF7;color:#428EFF;text-decoration:underline}
[data-skin=xp] .nav.on{background:#D6DFF7;color:#0A246A;font-weight:700}
[data-skin=xp] .nav.on .cnt{color:#0A246A}
[data-skin=xp] .nav svg{opacity:1}
[data-skin=xp] .side .tools{padding:8px 0}
[data-skin=xp] .me{background:#D6DFF7;border:1px solid #fff;border-radius:4px;color:#0A246A}
[data-skin=xp] .me small{color:#33508F}
[data-skin=xp] .me>button{color:#215DC6;text-decoration:underline}
[data-skin=xp] .ava{background:linear-gradient(180deg,#FFE27A,#E89A20)!important;color:#5A3300;border:1px solid #fff;border-radius:3px}

/* ---------- кнопки, поля, переключатели ---------- */
[data-skin=xp] .btn,[data-skin=xp] .ibtn,[data-skin=xp] .btn.ghost{background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F0 45%,#ECEBE6 85%,#D6D0C5 100%);border:1px solid #003C74;border-radius:3px;color:#000;font-weight:400;box-shadow:none}
[data-skin=xp] .btn:hover:not(:disabled),[data-skin=xp] .ibtn:hover:not(:disabled){box-shadow:inset 0 0 0 1px #FFE7A2,inset 0 -2px 0 #F8B330,inset 0 2px 0 #FFF0CF;color:#000;border-color:#003C74}
[data-skin=xp] .btn:active:not(:disabled),[data-skin=xp] .ibtn:active:not(:disabled){background:linear-gradient(180deg,#CDCAC3,#E3E2DA 25%,#F2F1EC)}
[data-skin=xp] .btn:focus-visible,[data-skin=xp] .ibtn:focus-visible{outline:1px dotted #000;outline-offset:-4px}
[data-skin=xp] .btn.pri{background:linear-gradient(180deg,#4AB44A 0%,#3C9F3C 12%,#37A137 50%,#2E8B2E 88%,#1F6E1F 100%);border:1px solid #1E5E1E;color:#fff;font-weight:700;font-style:italic;text-shadow:1px 1px 0 rgba(0,0,0,.35);border-radius:3px 12px 12px 3px;padding-right:18px}
[data-skin=xp] .btn.pri:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);filter:brightness(1.08);color:#fff}
[data-skin=xp] .btn:disabled,[data-skin=xp] .btn.pri:disabled{filter:grayscale(1);opacity:.55;cursor:default}
[data-skin=xp] .inp,[data-skin=xp] select.inp,[data-skin=xp] textarea.inp{background-color:#fff;border:1px solid #7F9DB9;border-radius:0;color:#000;font-size:12px}
[data-skin=xp] .inp:focus{border-color:#316AC5;box-shadow:none}
[data-skin=xp] select.inp{background-image:linear-gradient(180deg,#C1D3FB,#A6C0F7);background-size:17px calc(100% - 2px);background-position:right 1px center;background-repeat:no-repeat}
[data-skin=xp] select.inp{padding-right:24px}
[data-skin=xp] .search{background:#fff;border:1px solid #7F9DB9;border-radius:0}
[data-skin=xp] .fm-sw{width:13px;height:13px;border-radius:0;border:1px solid #1C5180;background:linear-gradient(135deg,#DCDCD7,#FFFFFF)}
[data-skin=xp] .fm-sw:after{display:none}
[data-skin=xp] .fm-tg.on .fm-sw{background:linear-gradient(135deg,#DCDCD7,#FFFFFF);border-color:#1C5180}
[data-skin=xp] .fm-tg.on .fm-sw:after{display:block;left:3px;top:0;width:4px;height:8px;border-radius:0;background:none;border:solid #21A121;border-width:0 2px 2px 0;transform:rotate(45deg)}
[data-skin=xp] .fm-tg:hover .fm-sw{box-shadow:inset 0 0 0 1px #F8B330}
[data-skin=xp] .fm-tg input:focus-visible+.fm-sw{outline:1px dotted #000;outline-offset:2px;box-shadow:none}
[data-skin=xp] .of-seg{background:#ECE9D8;border:1px solid #919B9C;border-radius:3px}
[data-skin=xp] .of-seg button{border-radius:2px}
[data-skin=xp] .of-seg button.on{background:linear-gradient(180deg,#FFF,#F4F4F0 45%,#ECEBE6);color:#000;box-shadow:inset 0 3px 0 #FFC73C,0 0 0 1px #919B9C}

/* ---------- таблица = «Подробно» в Проводнике ---------- */
[data-skin=xp] .panel{background:#fff;border:1px solid #7F9DB9;border-radius:0;box-shadow:none}
[data-skin=xp] th{background:linear-gradient(180deg,#FFFFFF 0%,#F1EFE2 85%,#E2DECD 100%);color:#000;font-weight:400;font-size:11px;border-bottom:2px solid #D6D2C2;border-right:1px solid #E2DECD;text-transform:none;letter-spacing:0}
[data-skin=xp] tbody tr:hover td{background:#E8EEFA}
[data-skin=xp] .of-tbl tr.of-grp td,[data-skin=xp] .of-tbl tbody tr.of-grp:hover td{background:linear-gradient(90deg,#DCE6F7,#fff 70%);color:#215DC6;font-weight:700;border-top:1px solid #fff}

/* ---------- окна: модалки и карточка ---------- */
[data-skin=xp] .modal{background:var(--bg-base);border:3px solid var(--xp-frame);border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 4px 16px rgba(0,0,0,.45);overflow:hidden}
[data-skin=xp] .modal .mh{background:var(--xp-title);border:0;padding:4px 5px 4px 10px;margin:0 -3px;border-radius:7px 7px 0 0}
[data-skin=xp] .modal .mh h3{font-family:'Trebuchet MS',var(--xp-font);font-size:13px;color:#fff;text-shadow:1px 1px 0 #0F1089}
[data-skin=xp] .modal .mh .ibtn,[data-skin=xp] .drawer .dh .ibtn[title="Закрыть"]{width:21px;height:21px}
[data-skin=xp] .modal .mh .ibtn svg,[data-skin=xp] .drawer .dh .ibtn[title="Закрыть"] svg{stroke:#fff;stroke-width:2.4}
[data-skin=xp] .modal .mf{border-top:0;background:var(--bg-base)}
[data-skin=xp] .modal-wrap{background:transparent}
[data-skin=xp] .drawer{background:var(--bg-base);border-left:3px solid var(--xp-frame);bottom:30px;top:0;box-shadow:-3px 0 14px rgba(0,0,0,.35)}
[data-skin=xp] .drawer:before{content:'Свойства: сетап';display:flex;align-items:center;flex:none;height:30px;padding:0 10px 0 32px;background:var(--xp-title);color:#fff;font:700 13px/1 'Trebuchet MS',var(--xp-font);text-shadow:1px 1px 0 #0F1089;position:relative}
[data-skin=xp] .drawer:after{content:'';position:absolute;left:10px;top:7px;width:16px;height:16px;background:linear-gradient(180deg,#FFE27A,#F2B630);border:1px solid #B7851B;border-radius:2px}
[data-skin=xp] .drawer .dh .ibtn[title="Закрыть"]{position:absolute;top:4px;right:5px;z-index:2}
[data-skin=xp] .dh{border-bottom:1px solid #D6D2C2}
[data-skin=xp] .scrim{background:rgba(0,0,0,.12)}
[data-skin=xp] .of-bmc,[data-skin=xp] .of-sub,[data-skin=xp] .of-cl{background:#fff;border:1px solid #D0D0BF;border-radius:4px}

/* ---------- всплывающая подсказка из трея ---------- */
[data-skin=xp] .toast{left:auto;right:10px;bottom:44px;transform:translateY(8px);background:#FFFFE1;color:#000;border:1px solid #000;border-radius:7px;box-shadow:2px 3px 6px rgba(0,0,0,.35);padding:9px 14px 9px 34px;max-width:min(360px,calc(100vw - 20px))}
[data-skin=xp] .toast.on{transform:none}
[data-skin=xp] .toast:before{content:'i';position:absolute;left:10px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;background:#2B66D9;color:#fff;font:700 11px/16px Georgia,serif;text-align:center}
[data-skin=xp] .toast.err{border-color:#000;color:#000}
[data-skin=xp] .toast.err:before{content:'!';background:#E0302A;font-family:var(--xp-font)}
[data-skin=xp] .toast:after{content:'';position:absolute;right:46px;bottom:-9px;width:14px;height:9px;background:#FFFFE1;clip-path:polygon(0 0,100% 0,100% 100%);border-right:1px solid #000}

/* ---------- скроллбары Luna ---------- */
[data-skin=xp] ::-webkit-scrollbar{width:16px;height:16px}
[data-skin=xp] ::-webkit-scrollbar-track{background:#F4F3EE;border-left:1px solid #EEEDE5}
[data-skin=xp] ::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#C8D6FB,#BAD1FC 50%,#A9C0F2);border:1px solid #fff;border-radius:3px;box-shadow:inset 0 0 0 1px #A4B9E9}
[data-skin=xp] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#DAE6FE,#C9DCFE 50%,#B7CEFA)}

/* ---------- панель задач + «Пуск» ---------- */
[data-skin=xp] .xp-task{display:flex;position:fixed;left:0;right:0;bottom:0;height:30px;z-index:45;background:linear-gradient(180deg,#1F2F86 0%,#3168D5 3%,#4993E6 6%,#2157D7 10%,#2663E0 92%,#1941A5 100%);color:#fff;align-items:stretch;padding-bottom:env(safe-area-inset-bottom)}
[data-skin=xp] .xp-go{display:flex;align-items:center;gap:6px;padding:0 22px 0 9px;border-radius:0 12px 12px 0;background:radial-gradient(120% 90% at 30% 10%,#79C76E 0,transparent 55%),linear-gradient(180deg,#3C9F3C,#37A137 50%,#2E8B2E 88%,#1F6E1F);box-shadow:inset -1px 0 2px rgba(0,0,0,.45),2px 0 3px rgba(0,0,0,.35);color:#fff}
[data-skin=xp] .xp-go b{font:italic 700 17px/1 'Trebuchet MS',var(--xp-font);text-shadow:1px 1px 1px rgba(0,0,0,.5);letter-spacing:.01em}
[data-skin=xp] .xp-go .xp-flag{width:19px;height:19px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}
[data-skin=xp] .xp-go:hover,[data-skin=xp] .xp-go.on{filter:brightness(1.1)}
[data-skin=xp] .xp-go.on{background:linear-gradient(180deg,#1F6E1F,#2E8B2E 40%,#37A137)}
[data-skin=xp] .xp-tasks{flex:1;display:flex;gap:3px;padding:3px 8px;min-width:0}
[data-skin=xp] .xp-tb{display:flex;align-items:center;gap:6px;width:min(200px,100%);padding:0 8px;border-radius:3px;background:linear-gradient(180deg,#1E52B7,#1B4FBE 50%,#2459C9);box-shadow:inset 1px 1px 2px rgba(0,0,0,.4);color:#fff;font-size:11px;min-width:0}
[data-skin=xp] .xp-tb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-skin=xp] .xp-tb svg{flex:none;width:14px;height:14px}
[data-skin=xp] .xp-tray{display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;font-size:11px;border-left:1px solid #092E6F;background:linear-gradient(180deg,#0C59B9 0,#139EE9 5%,#18B5F2 10%,#139BEB 14%,#1290E8 19%,#0D8DEA 63%,#0D9FF1 81%,#0F9EED 88%,#119BE9 91%,#1392E2 94%,#137ED7 97%,#095BC9 100%);box-shadow:inset 1px 0 1px #18BBFF;white-space:nowrap}
[data-skin=xp] .xp-ico{display:grid;place-items:center;width:16px;height:16px}
[data-skin=xp] .xp-ico svg{width:12px;height:12px}
[data-skin=xp] .xp-start{position:fixed;left:0;bottom:30px;width:min(380px,100vw);z-index:46;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:3px 0 12px rgba(0,0,0,.5);border:1px solid #0E3AA7;color:#000;background:#fff}
[data-skin=xp] .xp-sh{display:flex;align-items:center;gap:10px;padding:8px 10px;height:58px;background:linear-gradient(180deg,#1868CE 0%,#0E60CB 12%,#0E60CB 20%,#1164CF 32%,#1667CF 33%,#1B6CD3 47%,#1E70D9 54%,#2476DC 60%,#297AE0 65%,#3482E3 77%,#3786E5 79%,#428EE9 90%,#4791EB 100%);color:#fff;border-bottom:2px solid #E08A20}
[data-skin=xp] .xp-sh b{font:700 15px 'Trebuchet MS',var(--xp-font);text-shadow:1px 1px 1px rgba(0,0,0,.4)}
[data-skin=xp] .xp-av{width:42px;height:42px;display:grid;place-items:center;border:2px solid #fff;border-radius:4px;background:linear-gradient(135deg,#FFD15C,#E8762B);color:#5A2300;font-weight:700;font-size:15px;box-shadow:1px 1px 3px rgba(0,0,0,.4)}
[data-skin=xp] .xp-sb{display:grid;grid-template-columns:1fr 1fr}
[data-skin=xp] .xp-sl{background:#fff;padding:6px 0;border-right:1px solid #95BDEE}
[data-skin=xp] .xp-sr{background:#D3E5FA;padding:6px 0}
[data-skin=xp] .xp-start .xp-sb button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;text-align:left;font-size:11.5px;color:#000}
[data-skin=xp] .xp-sr button{color:#0A246A!important;font-weight:700}
[data-skin=xp] .xp-start .xp-sb button:hover,[data-skin=xp] .xp-start .xp-sb button.on{background:#316AC5;color:#fff!important}
[data-skin=xp] .xp-start .xp-sb button:hover small{color:#DCE6F7}
[data-skin=xp] .xp-sb button span{display:grid}
[data-skin=xp] .xp-sb button small{color:#575757;font-size:10.5px;font-weight:400}
[data-skin=xp] .xp-sb svg{width:22px;height:22px;flex:none}
[data-skin=xp] .xp-sf{display:flex;justify-content:flex-end;gap:4px;padding:6px 8px;background:linear-gradient(180deg,#4282D6,#3B85E0 10%,#418AE3 55%,#3A82DE 80%,#3D7BD8);border-top:1px solid #2A5EB8}
[data-skin=xp] .xp-sf button{display:flex;align-items:center;gap:6px;color:#fff;font-size:11px;padding:4px 6px;border-radius:3px}
[data-skin=xp] .xp-sf button:hover{background:rgba(255,255,255,.15)}
[data-skin=xp] .xp-i{width:22px;height:22px;border-radius:4px;border:1px solid #fff;position:relative;flex:none}
[data-skin=xp] .xp-i.x{background:linear-gradient(180deg,#FFD15C,#E89A20)}
[data-skin=xp] .xp-i.x:after{content:'⟲';position:absolute;inset:0;display:grid;place-items:center;color:#5A2300;font-weight:700;font-size:13px}
[data-skin=xp] .xp-i.off{background:linear-gradient(180deg,#F0A390,#E0593B 35%,#B12A0C)}
[data-skin=xp] .xp-i.off:after{content:'';position:absolute;inset:4px;border:2px solid #fff;border-top-color:transparent;border-radius:50%}
[data-skin=xp] .xp-i.off:before{content:'';position:absolute;left:9px;top:3px;width:2px;height:8px;background:#fff;z-index:1}

/* ---------- вход = экран приветствия XP ---------- */
[data-skin=xp] .auth{background:
    linear-gradient(180deg,#00309C 0,#00309C 78px,#E8A05A 78px,#F6C98F 80px,transparent 80px),
    linear-gradient(0deg,#003399 0,#1941B5 94px,#93AEEC 94px,#5A7EDC 96px,transparent 96px),
    radial-gradient(70% 60% at 18% 28%,#93AEEC,transparent 70%),#5A7EDC;color:#fff}
[data-skin=xp] .auth-card{background:transparent;border:0;box-shadow:none;border-left:1px solid rgba(255,255,255,.55);border-radius:0;padding:24px 32px}
[data-skin=xp] .auth-brand b{font-family:'Trebuchet MS',var(--xp-font);font-style:italic;color:#fff;font-size:22px}
[data-skin=xp] .auth-brand b i{color:#FFD34E}
[data-skin=xp] .auth-brand span{color:#DDE6FF}
[data-skin=xp] .auth-head h1{font-family:'Trebuchet MS',var(--xp-font);font-weight:400;color:#fff;font-size:26px;text-shadow:1px 1px 2px rgba(0,0,0,.3)}
[data-skin=xp] .auth-head p,[data-skin=xp] .auth-foot{color:#E8EEFF}
[data-skin=xp] .auth-f>span{color:#fff;font-weight:700}
[data-skin=xp] .auth .inp{background:#fff;border:1px solid #2C4FA8;border-radius:3px;color:#000;height:36px}
[data-skin=xp] .auth .inp:focus{border-color:#F8B330;box-shadow:0 0 0 2px rgba(248,179,48,.5)}
[data-skin=xp] .auth-eye{color:#3C5FB8;top:1px;height:34px}
[data-skin=xp] .auth-err{background:#FFFFE1;color:#000;border:1px solid #000;border-radius:6px}
[data-skin=xp] .auth-go{border-radius:3px 14px 14px 3px}
[data-skin=xp] .auth-theme{top:22px;right:20px}
[data-skin=xp] .auth-theme .ibtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);color:#fff}
[data-skin=xp] .xp-off{display:flex;align-items:center;gap:10px;position:absolute;left:24px;bottom:28px;color:#fff;font-size:13px;font-family:var(--xp-font)}
[data-skin=xp] .xp-off i{width:26px;height:26px;border-radius:4px;border:1px solid #fff;background:linear-gradient(180deg,#F0A390,#E0593B 35%,#B12A0C);position:relative}
[data-skin=xp] .xp-off i:after{content:'';position:absolute;inset:5px;border:2px solid #fff;border-top-color:transparent;border-radius:50%}
[data-skin=xp] .xp-off i:before{content:'';position:absolute;left:11px;top:4px;width:2px;height:9px;background:#fff;z-index:1}
[data-skin=xp] .xp-off:hover{text-decoration:underline}

/* ---------- мобилка ---------- */
@media (max-width:960px){
  [data-skin=xp] .app{padding:0 0 30px;gap:0;grid-template-columns:1fr}
  [data-skin=xp] .main{border-radius:0;border-width:0 0 0 0;min-height:calc(100vh - 30px);box-shadow:none}
  [data-skin=xp] .top{margin:0;border-radius:0}
  [data-skin=xp] .side{top:0;height:calc(100vh - 30px);border-radius:0;z-index:30}
  [data-skin=xp] .xp-wb .mn,[data-skin=xp] .xp-wb .mx{display:none}
  [data-skin=xp] .drawer{border-left:0;width:100%}
  [data-skin=xp] .xp-tasks{padding:3px 4px}
  [data-skin=xp] .xp-tb{width:auto;flex:1}
  [data-skin=xp] .xp-go{padding:0 16px 0 8px}
  [data-skin=xp] .auth{background:
    linear-gradient(180deg,#00309C 0,#00309C 48px,#E8A05A 48px,#F6C98F 50px,transparent 50px),
    linear-gradient(0deg,#003399 0,#1941B5 70px,#93AEEC 70px,#5A7EDC 72px,transparent 72px),#5A7EDC}
  [data-skin=xp] .auth-card{border-left:0;padding:20px 18px}
  [data-skin=xp] .auth-theme{top:8px;right:10px}
  [data-skin=xp] .xp-off{left:16px;bottom:20px}
}
@media (max-width:480px){
  [data-skin=xp] .xp-tb span{display:none}
  [data-skin=xp] .xp-tb{flex:none;width:34px;justify-content:center}
  [data-skin=xp] .xp-sb{grid-template-columns:1fr}
  [data-skin=xp] .xp-sl{border-right:0;border-bottom:1px solid #95BDEE}
}