/* Layout: одноэкранная «ОС» — экран входа → рабочий стол с иконками, перетаскиваемыми окнами, панелью задач, меню «Пуск» и треем.
   Осознанно одна тема: дневная Luna-эстетика с вечерними обоями. */
:root{
  color-scheme: light;
  --luna-blue:#0a52e0; --luna-deep:#003dd7; --luna-light:#3c81f3;
  --start-green:#3d9b35; --start-dark:#2d7a26;
  --face:#ece9d8; --face-edge:#aca899; --ink:#111; --ink-soft:#4b4b4b;
  --paper:#fff; --tray:#0f8de8; --select:#316ac5; --twitch:#7a4bd6;
  --balloon:#ffffe1; --sunset-1:#2a1450; --sunset-2:#a33a6b; --sunset-3:#f39a4b;
  --font-ui: Tahoma, Verdana, "PT Sans", "Segoe UI", sans-serif;
  --font-title: "Trebuchet MS", "PT Sans", Tahoma, sans-serif;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--sunset-1);color:var(--ink);font:12px/1.35 var(--font-ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:1px dotted #000;outline-offset:1px}
#os{position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden}

/* ---------- Экран входа ---------- */
#login{position:absolute;inset:0;display:flex;flex-direction:column;background:#5a7edc;color:#fff;z-index:1000}
#login .band{height:72px;background:#00309c;flex:none}
#login .band.bottom{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
#login .rule{height:2px;background:linear-gradient(90deg,transparent,#f99736 30%,#f99736 70%,transparent)}
#login .rule.light{background:linear-gradient(90deg,transparent,#8ba8ec 30%,#8ba8ec 70%,transparent)}
#login .mid{flex:1;display:grid;grid-template-columns:1fr 2px 1fr;align-items:center;gap:32px;padding:24px max(16px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at 20% 30%,#89a7ee 0,#5a7edc 55%)}
#login .divider{height:70%;background:linear-gradient(transparent,#a7bdf2,transparent)}
#login .brand{justify-self:end;text-align:right;max-width:360px}
#login .brand h1{font:italic 700 44px/1 var(--font-title);margin:0 0 10px;letter-spacing:-.5px;text-shadow:1px 2px 2px rgba(0,0,0,.25)}
#login .brand h1 sup{font-size:18px;color:#f99736;font-style:normal;margin-left:4px}
#login .brand p{font-size:15px;margin:0;opacity:.95}
.users{display:flex;flex-direction:column;gap:10px}
.user-tile{display:flex;align-items:center;gap:14px;background:none;border:0;padding:8px 18px 8px 8px;border-radius:8px;cursor:pointer;text-align:left;color:#fff;max-width:340px}
.user-tile:hover,.user-tile:focus-visible{background:linear-gradient(90deg,#00309c,rgba(0,48,156,0));outline:none}
.user-tile .pic{width:52px;height:52px;border-radius:5px;border:2px solid #fff;flex:none;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.user-tile:hover .pic{border-color:#ffcc33}
.user-tile b{display:block;font-size:17px;font-weight:400}
.user-tile small{font-size:11px;opacity:.85}
.power{display:flex;align-items:center;gap:8px;background:none;border:0;color:#fff;cursor:pointer;font-size:14px}
.power i{width:24px;height:24px;border-radius:4px;background:linear-gradient(#f38b60,#d4441e);border:1px solid #fff;display:grid;place-items:center;font-style:normal}
#login .hint{font-size:11px;opacity:.85;max-width:300px;text-align:right}

/* ---------- Рабочий стол ---------- */
#desk{position:absolute;inset:0 0 30px 0;overflow:hidden}
#wall{position:absolute;inset:0;width:100%;height:100%;display:block}
#icons{position:absolute;top:12px;left:max(12px,env(safe-area-inset-left,0px));bottom:12px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:6px}
.dicon{width:84px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;cursor:pointer;color:#fff}
.dicon svg{width:42px;height:42px;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.45))}
.dicon span{font-size:11px;text-align:center;text-shadow:1px 1px 1px #000,0 0 2px #000;padding:0 2px;line-height:1.25}
.dicon.sel span,.dicon:focus-visible span{background:var(--select);text-shadow:none}
.dicon:focus-visible{outline:1px dotted #fff}

/* ---------- Окна ---------- */
.win{position:absolute;display:flex;flex-direction:column;background:var(--luna-deep);border-radius:8px 8px 0 0;padding:0 3px 3px;box-shadow:2px 3px 10px rgba(0,0,0,.45);min-width:260px}
.win .tb{height:28px;display:flex;align-items:center;gap:5px;padding:0 3px 0 6px;border-radius:7px 7px 0 0;margin:0 -3px;
  background:linear-gradient(#0997ff 0%,#0053ee 8%,#0050ee 40%,#0066ff 88%,#0066ff 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);cursor:default;touch-action:none;user-select:none}
.win .tb svg{width:18px;height:18px;flex:none}
.win .tb .t{flex:1;color:#fff;font:700 13px var(--font-title);text-shadow:1px 1px #0f1089;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win.inactive{background:#7a96df}
.win.inactive .tb{background:linear-gradient(#7c9ce8,#7b97e0 40%,#7b9ae6 88%,#8aa6ea)}
.win.inactive .tb .t{color:#d8e4f8;text-shadow:none}
.tbb{width:21px;height:21px;border:1px solid #fff;border-radius:3px;display:grid;place-items:center;cursor:pointer;padding:0;
  background:linear-gradient(135deg,#3c8cf6,#2563e0 60%,#1d4fc6);color:#fff;font-weight:700;line-height:1}
.tbb:hover{filter:brightness(1.15)}
.tbb.x{background:linear-gradient(135deg,#ec8a6c,#d9452a 55%,#c4321a)}
.win .body{flex:1;background:var(--face);overflow:auto;min-height:0;display:flex;flex-direction:column}
.menubar{display:flex;gap:2px;padding:2px 4px;border-bottom:1px solid #d4d0c3;background:var(--face);font-size:11px;flex:none}
.menubar span{padding:2px 6px}
.menubar span:hover{background:var(--select);color:#fff}
.statusbar{border-top:1px solid #d4d0c3;padding:3px 8px;font-size:11px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;flex:none;background:var(--face)}
.pad{padding:12px;display:flex;flex-direction:column;gap:10px}
.xpbtn{min-width:75px;padding:4px 12px;border:1px solid #003c74;border-radius:3px;cursor:pointer;
  background:linear-gradient(#fff,#ecebe6 86%,#d6d0c5);box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)}
.xpbtn:hover{box-shadow:inset 0 0 0 2px #f8b636}
.xpbtn:active{background:linear-gradient(#e5e4de,#f3f3ee)}
.xpbtn:disabled{color:#a19f93;border-color:#c9c7ba;cursor:default;box-shadow:none}
.xpbtn.primary{box-shadow:inset 0 0 0 1px #6c9ae8}
fieldset{border:1px solid #d0d0bf;border-radius:4px;padding:8px 10px;margin:0}
legend{color:#0046d5;padding:0 3px}
.note{font-size:11px;color:var(--ink-soft)}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:#fff3c4;border:1px solid #e3c766;color:#6b5300;vertical-align:middle}

/* ТВ-тюнер */
.screen{background:#000;aspect-ratio:16/9;max-width:100%;position:relative;overflow:hidden;border:2px inset #c8c4b4}
.screen canvas{width:100%;height:100%;display:block}
.screen .osd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;color:#7dff8a;font:700 15px/1.2 "Courier New",monospace;text-shadow:0 0 6px rgba(125,255,138,.6);pointer-events:none}
.screen .osd .big{align-self:center;text-align:center;font-size:18px}
.wmp-controls{display:flex;align-items:center;gap:8px;background:linear-gradient(#4b5d85,#1b2847);padding:6px 10px;border-radius:0 0 10px 10px;color:#cfe0ff;font-size:11px}
.wmp-controls .round{width:28px;height:28px;border-radius:50%;border:1px solid #8fb0ec;background:radial-gradient(circle at 40% 30%,#9fd1ff,#2b5fbf 70%);display:grid;place-items:center;color:#fff}
.wmp-controls .seek{flex:1;height:4px;border-radius:2px;background:#0d1530;position:relative}
.wmp-controls .seek::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#73b8ff;border-radius:2px}
.sched{width:100%;border-collapse:collapse;font-size:11px;background:#fff}
.sched td{padding:4px 6px;border-bottom:1px solid #eee}
.sched td:first-child{width:90px;color:#0046d5;font-weight:700}
.sched tr.today td{background:#fffbe0}

/* Кассеты */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:14px;background:linear-gradient(#5b3a22,#3e2614);flex:1;align-content:start}
.vhs{background:#141414;border-radius:3px;padding:8px 8px 10px;color:#ddd;cursor:pointer;border:0;text-align:left;box-shadow:0 3px 0 #0a0a0a,0 4px 8px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px;transition:transform .12s}
.vhs:hover,.vhs:focus-visible{transform:translateY(-3px)}
.vhs .label{background:var(--c,#f2efe4);color:#1a1a1a;padding:6px 7px;border-radius:2px;font:700 12px/1.2 var(--font-ui);min-height:46px;display:flex;flex-direction:column;justify-content:space-between}
.vhs .label small{font-weight:400;font-size:10px;color:#444}
.vhs .reels{display:flex;justify-content:space-around;align-items:center;height:26px;background:#0b0b0b;border-radius:2px}
.vhs .reels i{width:18px;height:18px;border-radius:50%;background:repeating-conic-gradient(#ddd 0 20deg,#333 20deg 60deg);border:2px solid #555}
.vhs .meta{display:flex;justify-content:space-between;font-size:10px;color:#999;font-variant-numeric:tabular-nums}

/* Проводник */
.explorer{display:grid;grid-template-columns:180px 1fr;flex:1;min-height:0}
.taskpane{background:linear-gradient(#7ba2e7,#6375d6);padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.tp-box{background:#d6dff7;border-radius:4px 4px 0 0;overflow:hidden}
.tp-box h4{margin:0;padding:5px 8px;font-size:11px;color:#fff;background:linear-gradient(90deg,#0055e5,#2b75f0)}
.tp-box div{padding:6px 8px;font-size:11px;color:#21347d;display:flex;flex-direction:column;gap:4px}
.files{background:#fff;overflow:auto;min-width:0}
.files table{width:100%;border-collapse:collapse;font-size:11px}
.files th{text-align:left;font-weight:400;padding:3px 8px;background:linear-gradient(#fff,#ebeadb);border-right:1px solid #d0cdbb;border-bottom:1px solid #d0cdbb;white-space:nowrap}
.files td{padding:3px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.files tr.f{cursor:pointer}
.files tr.f:hover td{background:#e8f0fd}
.files tr.f.sel td{background:var(--select);color:#fff}
.files td.name{display:flex;align-items:center;gap:6px}
.files td.name svg{width:16px;height:16px;flex:none}
.detail{padding:10px;border-top:1px solid #ddd;background:#f7f7f2;font-size:11px;white-space:normal}

/* Рулетка */
.roulette{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;padding:12px}
.wheel-wrap{position:relative;max-width:300px;width:100%;justify-self:center;aspect-ratio:1}
.wheel-wrap canvas{width:100%;height:100%;display:block}
.wheel-wrap .pin{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:22px solid #c4321a;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4))}
.result{min-height:38px;padding:6px 8px;background:#fff;border:1px solid #7f9db9;font-weight:700}
.history{list-style:none;margin:0;padding:0;font-size:11px;background:#fff;border:1px solid #7f9db9;max-height:150px;overflow:auto}
.history li{padding:3px 6px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;gap:6px}
.history li span:last-child{color:var(--ink-soft);white-space:nowrap}

/* Мессенджер */
.msn{display:grid;grid-template-columns:170px minmax(0,1fr);flex:1;min-height:0}
.contacts{background:linear-gradient(#e9f1fd,#fff 40%);border-right:1px solid #b9c9e6;overflow:auto;padding:6px 0}
.contacts h5{margin:6px 8px 3px;font-size:11px;color:#2c3d8f}
.contact{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:11px;cursor:pointer;width:100%;border:0;background:none;text-align:left}
.contact:hover,.contact.sel{background:#d5e3fa}
.dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.25)}
.dot.on{background:#3dbb3d}.dot.away{background:#f3b416}.dot.off{background:#bbb}
.chat{display:flex;flex-direction:column;min-width:0;background:#fff}
.chat .head{padding:6px 10px;border-bottom:1px solid #dde5f3;font-size:11px;color:var(--ink-soft);background:linear-gradient(#f4f8fe,#e6eefb)}
.log{flex:1;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.log .m b{color:#2c3d8f}
.log .m.me b{color:#b03a2e}
.log .m.sys{color:#777;font-style:italic;font-size:11px}
.compose{display:flex;gap:6px;padding:6px;border-top:1px solid #dde5f3;background:#f4f8fe}
.compose input{flex:1;min-width:0;border:1px solid #7f9db9;padding:4px 6px;font:inherit}

/* Зона 90-х / корзина */
.zona{flex:1;background:#262017;color:#e8dcc0;padding:16px;display:flex;flex-direction:column;gap:10px;font-family:"Courier New",monospace}
.zona h3{margin:0;font-size:20px;color:#f2c14e;letter-spacing:2px}
.bars{height:36px;background:repeating-linear-gradient(90deg,#5a5040 0 6px,transparent 6px 22px);border-top:3px solid #5a5040;border-bottom:3px solid #5a5040}

/* ---------- Панель задач ---------- */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:stretch;z-index:900;
  background:linear-gradient(#1f2f86 0,#3165c4 3%,#3682e5 6%,#4490e6 10%,#3883e5 12%,#2b71e0 15%,#2663da 18%,#235bd6 20%,#2258d5 23%,#2157d6 38%,#245ddb 54%,#2562df 86%,#245fdc 89%,#2158d4 92%,#1d4ec0 95%,#1941a5 98%);
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
#startbtn{display:flex;align-items:center;gap:6px;padding:0 22px 0 10px;border:0;cursor:pointer;color:#fff;border-radius:0 12px 12px 0;
  font:italic 700 18px var(--font-title);text-shadow:1px 1px 2px rgba(0,0,0,.6);
  background:linear-gradient(#3c8f3c 0,#5eb85c 8%,#4ea84b 40%,#3e9a3a 88%,#2f7d2b 100%);box-shadow:inset -2px 0 3px rgba(0,0,0,.25)}
#startbtn:hover{filter:brightness(1.1)}
#startbtn.on{background:linear-gradient(#2a6e2a,#3c8f3c 30%,#2f7d2b)}
#startbtn svg{width:20px;height:20px}
#tasks{flex:1;display:flex;gap:3px;padding:3px 6px;min-width:0;overflow:hidden}
.task{flex:0 1 160px;min-width:0;display:flex;align-items:center;gap:5px;padding:0 8px;border-radius:3px;cursor:pointer;color:#fff;border:1px solid #1c4cbf;
  background:linear-gradient(#3c81f3,#3170e8);font-size:11px;box-shadow:inset 0 1px rgba(255,255,255,.3)}
.task span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.task svg{width:16px;height:16px;flex:none}
.task.active{background:linear-gradient(#1e52b7,#2457c2);box-shadow:inset 1px 1px 2px rgba(0,0,0,.4)}
#tray{display:flex;align-items:center;gap:8px;padding:0 10px;color:#fff;font-size:11px;border-left:1px solid #092e95;
  background:linear-gradient(#0c59b9 0,#139ee9 6%,#18b5f2 10%,#139beb 14%,#1290e8 19%,#0d8dea 63%,#0d9ff1 81%,#0f9eed 88%,#119be9 91%,#1392e2 94%,#137ed7 97%,#095bc9);box-shadow:inset 1px 0 1px #18bbff}
#tray .coin{display:flex;align-items:center;gap:4px;cursor:default;font-variant-numeric:tabular-nums}
#tray .coin i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7b0,#e7b416 60%,#a8760a);border:1px solid #7a5300}
#tray .live{width:10px;height:10px;border-radius:50%;background:#888;border:1px solid #fff}
#tray .live.on{background:#ff3b30;box-shadow:0 0 6px #ff3b30}
#clock{font-variant-numeric:tabular-nums}

/* Пузырь уведомления */
#balloon{position:absolute;right:max(10px,env(safe-area-inset-right,0px));bottom:42px;width:270px;max-width:calc(100% - 20px);background:var(--balloon);border:1px solid #000;border-radius:8px;padding:8px 26px 10px 10px;z-index:950;box-shadow:2px 3px 6px rgba(0,0,0,.35);font-size:11px}
#balloon::after{content:"";position:absolute;right:46px;bottom:-14px;border:7px solid transparent;border-top:7px solid var(--balloon);}
#balloon b{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:12px}
#balloon b i{width:16px;height:16px;border-radius:50%;background:#2b6fe0;color:#fff;font:700 11px/16px var(--font-ui);text-align:center;font-style:normal}
#balloon button{position:absolute;right:5px;top:5px;width:16px;height:16px;border:1px solid #999;border-radius:3px;background:#fff;font-size:10px;line-height:1;padding:0;cursor:pointer}

/* ---------- Меню «Пуск» ---------- */
#startmenu{position:absolute;left:env(safe-area-inset-left,0px);bottom:30px;width:400px;max-width:100%;z-index:960;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:3px 3px 10px rgba(0,0,0,.5);background:#1854e0;border:1px solid #0b3cb3}
.sm-head{display:flex;align-items:center;gap:10px;padding:8px 10px;color:#fff;background:linear-gradient(#1868ce,#0e60cb 12%,#0e60cb 80%,#0f5ab7);border-bottom:2px solid #f99736}
.sm-head .pic{width:44px;height:44px;border-radius:4px;border:2px solid #d8e4f8;display:grid;place-items:center;flex:none}
.sm-head b{font:700 15px var(--font-title);text-shadow:1px 1px 2px rgba(0,0,0,.5);display:block}
.sm-head small{opacity:.9}
.sm-cols{display:grid;grid-template-columns:1fr 1fr}
.sm-left{background:#fff;padding:6px 0;display:flex;flex-direction:column}
.sm-right{background:#d3e5fa;border-left:1px solid #95bdee;padding:6px 0;display:flex;flex-direction:column}
.sm-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border:0;background:none;cursor:pointer;text-align:left;width:100%;font-size:11px}
.sm-item svg{width:28px;height:28px;flex:none}
.sm-right .sm-item svg{width:22px;height:22px}
.sm-item b{display:block;font-size:12px}
.sm-item small{color:#777}
.sm-item:hover,.sm-item:focus-visible{background:var(--select);color:#fff;outline:none}
.sm-item:hover small{color:#dbe6fb}
.sm-right .sm-item{color:#00136b;font-weight:700}
.sm-sep{height:1px;margin:4px 10px;background:linear-gradient(90deg,transparent,#c5c5c5,transparent)}
.sm-foot{display:flex;justify-content:flex-end;gap:12px;padding:6px 10px;background:linear-gradient(#4282d6,#3b77d4 30%,#2c64c8)}
.sm-foot button{display:flex;align-items:center;gap:6px;border:0;background:none;color:#fff;cursor:pointer;font-size:11px;padding:2px 4px}
.sm-foot button i{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;border:1px solid #fff;font-style:normal;font-weight:700}
.sm-foot button:hover{filter:brightness(1.2)}

/* ---------- Телефон ---------- */
@media (max-width:700px){
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;min-width:0}
  .win .tb{border-radius:0}
  #login .mid{grid-template-columns:1fr;gap:20px;align-content:center}
  #login .divider{display:none}
  #login .brand{justify-self:start;text-align:left}
  #login .brand h1{font-size:34px}
  #login .hint{display:none}
  .explorer{grid-template-columns:1fr}
  .taskpane{display:none}
  .roulette{grid-template-columns:1fr}
  .msn{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .contacts{max-height:110px;border-right:0;border-bottom:1px solid #b9c9e6}
  .task{flex-basis:44px}
  .task span{display:none}
  #tray .coin span.l{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Адресная строка проводника и ссылки в левой панели */
.addr{display:flex;align-items:center;gap:6px;padding:3px 6px;border-bottom:1px solid #d4d0c3;background:var(--face);font-size:11px;flex:none;color:var(--ink-soft)}
.addr-box{flex:1;min-width:0;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #7f9db9;padding:1px 4px;color:var(--ink)}
.addr-box svg{width:16px;height:16px;flex:none}
.addr-box select{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:1px 0;cursor:pointer}
.tp-link{border:0;background:none;padding:0;text-align:left;color:#21347d;cursor:pointer;font:inherit}
.tp-link:hover{text-decoration:underline;color:#4b6fd8}
.tp-link.on{font-weight:700}
.files td:last-child{color:var(--ink-soft)}

/* Кошелёк */
#tray button.coin{border:0;background:none;color:#fff;font:inherit;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px}
#tray button.coin:hover{text-decoration:underline}
.wallet-head{display:flex;gap:12px;align-items:center}
.wallet-title{font:700 20px var(--font-title);color:#0046d5}
.wallet-bal{font:700 26px var(--font-title);color:#0046d5;font-variant-numeric:tabular-nums}
.wallet-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px}
.wallet-cols fieldset{min-width:0}
.hist{max-height:180px;overflow:auto}
.sched td.amt{text-align:right;font-variant-numeric:tabular-nums;color:#1a7f1a;font-weight:700;width:auto}
.sched td.amt.neg{color:#b3261e}
.earn{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
@media (max-width:700px){ .wallet-cols{grid-template-columns:1fr} }
#wtop td:first-child{width:24px;font-weight:400;color:var(--ink-soft)}

/* Свойства экрана */
.dp{display:flex;flex-direction:column;flex:1;min-height:0;padding:8px 8px 10px;gap:8px}
.dp-tabs{display:flex;gap:2px;margin-bottom:-9px;position:relative;z-index:1;padding-left:4px}
.dp-tabs span{padding:3px 10px;border:1px solid #919b9c;border-bottom:0;border-radius:3px 3px 0 0;background:#fcfcfe;box-shadow:inset 0 2px 0 #ffc83c}
.dp-page{flex:1;min-height:0;border:1px solid #919b9c;background:#fcfcfe;padding:14px 12px 10px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.monitor{align-self:center;display:flex;flex-direction:column;align-items:center}
.mon-screen{width:200px;max-width:100%;aspect-ratio:16/10;border:9px solid #d8d4c8;border-bottom-width:14px;border-radius:6px;box-shadow:inset 0 0 0 1px #777,0 1px 0 #999;overflow:hidden;background:#3a6ea5}
.mon-screen canvas{width:100%;height:100%;display:block}
.mon-neck{width:34px;height:10px;background:linear-gradient(#c9c4b6,#aaa596)}
.mon-foot{width:90px;height:6px;border-radius:3px 3px 1px 1px;background:linear-gradient(#d8d4c8,#a8a291)}
.dp-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px}
.dp-listwrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.dp-list{height:120px;overflow:auto;border:1px solid #7f9db9;background:#fff}
.dp-list:focus-visible{outline:1px dotted #000}
.dp-opt{display:flex;align-items:center;gap:5px;padding:1px 4px;cursor:pointer;white-space:nowrap}
.dp-opt span{overflow:hidden;text-overflow:ellipsis}
.dp-opt.sel{background:var(--select);color:#fff}
.dp-side{display:flex;flex-direction:column;gap:4px;padding-top:17px}
.dp-side select{font:inherit}
.dp-side input[type=color]{width:60px;height:24px;padding:0;border:1px solid #7f9db9}
.dp-btns{display:flex;justify-content:flex-end;gap:6px}
#ctxmenu{position:fixed;z-index:2000;min-width:150px;background:#fff;border:1px solid #aca899;box-shadow:2px 2px 3px rgba(0,0,0,.35);padding:2px;display:flex;flex-direction:column;font-size:11px}
#ctxmenu button{border:0;background:none;text-align:left;padding:4px 18px;cursor:pointer;font:inherit}
#ctxmenu button:hover,#ctxmenu button:focus-visible{background:var(--select);color:#fff;outline:none}
#ctxmenu .sm-sep{margin:3px 2px}
@media (max-width:700px){ .dp-row{grid-template-columns:1fr} .dp-side{padding-top:0} }
