/* Sarkan Control — Windows XP (Luna) с анимациями. Без внешних шрифтов и картинок. */
:root {
  --title1: #0058ee; --title2: #3a93ff; --title3: #0045c9;
  --face: #ece9d8; --face2: #f6f4ec; --edge: #0831d9; --ink: #000; --muted: #555;
  --task1: #245edb; --task2: #1941a5; --start1: #3c9a3c; --start2: #5ec85e;
  --sel: #316ac5; --red: #c62828; --amber: #e8a400; --green: #2e8b2e;
  --font: Tahoma, "Segoe UI", Verdana, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 12px/1.35 var(--font); color: var(--ink); background: #3a6ea5; }
button, input, select, textarea { font: inherit; }

/* ── загрузка ── */
.boot { position: fixed; inset: 0; background: #000; display: grid; place-content: center; gap: 40px; z-index: 9999; transition: opacity .5s; }
.boot.off { opacity: 0; pointer-events: none; }
.boot-logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.boot-logo svg { width: 54px; animation: spin3 2.4s cubic-bezier(.6,0,.4,1) infinite; }
.boot-logo b { font: italic 700 34px/1 var(--font); letter-spacing: -1px; }
.boot-logo span { color: #f60; font: 700 14px var(--font); align-self: flex-start; }
.boot-bar { width: 150px; height: 16px; margin: 0 auto; border: 2px solid #b2b2b2; border-radius: 4px; padding: 2px; overflow: hidden; display: flex; gap: 2px; }
.boot-bar i { width: 10px; background: linear-gradient(#2838c7, #4f6bed 50%, #2838c7); border-radius: 1px; animation: slide 1.6s linear infinite; }
@keyframes slide { from { transform: translateX(-40px); } to { transform: translateX(160px); } }
@keyframes spin3 { 0%,20% { transform: rotate(0); } 50%,70% { transform: rotate(120deg); } 100% { transform: rotate(240deg); } }

/* ── вход ── */
.welcome { position: fixed; inset: 0; display: grid; grid-template-rows: 80px 1fr 80px; background: #5a7edc; }
.welcome::before, .welcome::after { content: ""; display: block; background: #00309c; }
.welcome::before { border-bottom: 2px solid #fff6; }
.welcome::after { border-top: 2px solid #f9a133; }
.welcome-mid { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; background: radial-gradient(circle at 15% 20%, #9cb9f3 0%, #6b8ee0 35%, #5a7edc 70%); }
.welcome-mid .sep { height: 70%; background: linear-gradient(transparent, #fff8, transparent); }
.welcome-brand { justify-self: end; padding-right: 40px; color: #fff; text-align: right; }
.welcome-brand b { font: italic 700 44px/1 var(--font); display: block; text-shadow: 1px 2px 3px #0005; }
.welcome-brand span { opacity: .9; font-size: 14px; }
.welcome-user { padding-left: 40px; display: flex; gap: 14px; align-items: center; animation: rise .5s ease-out; }
.avatar { width: 64px; height: 64px; border: 3px solid #fff; border-radius: 6px; background: linear-gradient(135deg, #f9a133, #d8402a); display: grid; place-items: center; box-shadow: 0 2px 6px #0006; }
.avatar svg { width: 34px; }
.welcome-user b { color: #fff; font-size: 20px; display: block; margin-bottom: 6px; }
.welcome-user form { display: flex; gap: 6px; }
.welcome-user input { width: 230px; padding: 5px 7px; border: 1px solid #7f9db9; border-radius: 2px; }
.go { width: 28px; height: 28px; border: 1px solid #fff; border-radius: 4px; background: linear-gradient(#5fd35f, #2b9b2b); color: #fff; font-weight: 700; cursor: pointer; }
.welcome-user .err { color: #ffe9a8; margin-top: 6px; min-height: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) { .welcome-mid { grid-template-columns: 1fr; } .welcome-mid .sep { display: none; } .welcome-brand { justify-self: center; padding: 0; text-align: center; } .welcome-user { padding: 0 16px; justify-self: center; } .welcome-user input { width: 160px; } }

/* ── рабочий стол ── */
.desktop { position: fixed; inset: 0 0 30px 0; overflow: hidden;
  background: radial-gradient(ellipse 120% 60% at 30% 110%, #5aa83c 0 40%, transparent 41%),
              radial-gradient(ellipse 90% 50% at 85% 115%, #4b9a31 0 45%, transparent 46%),
              linear-gradient(#1f6fe0 0%, #5aa0f0 45%, #a6cdf5 62%, #79b75a 63%, #4e8f2f 100%); }
.icons { position: absolute; top: 10px; left: 8px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 86px); height: calc(100% - 20px); gap: 4px; }
.icon { width: 82px; padding: 4px 2px; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; cursor: default; border: 1px dashed transparent; border-radius: 2px; user-select: none; }
.icon:hover { background: #0b61ff33; }
.icon.sel { background: #0b61ff66; border-color: #fff8; }
.icon .ico { width: 36px; height: 36px; margin: 0 auto 4px; display: grid; place-items: center; }
.icon .badge { position: relative; }
.icon .badge::after { content: attr(data-n); position: absolute; top: -40px; right: 10px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); font-size: 10px; line-height: 16px; box-shadow: 0 0 0 1px #fff; }
.icon .badge[data-n=""]::after, .icon .badge[data-n="0"]::after { display: none; }

/* ── окна ── */
.win { position: absolute; min-width: 320px; min-height: 160px; display: flex; flex-direction: column; background: var(--face);
  border: 3px solid var(--edge); border-top-width: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 12px #0007;
  transform-origin: var(--ox, 50%) var(--oy, 100%); animation: winIn .22s cubic-bezier(.2,.9,.3,1.2); }
.win.closing { animation: winOut .16s ease-in forwards; }
.win.min { animation: winMin .2s ease-in forwards; }
.win.inactive { border-color: #7a96df; }
.win.inactive .tb { background: linear-gradient(#7a96df, #a6b9ee 10%, #94a8e8 90%, #7a96df); }
.win.max { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; }
@keyframes winIn { from { opacity: 0; transform: scale(.6) translateY(30px); } }
@keyframes winOut { to { opacity: 0; transform: scale(.8); } }
@keyframes winMin { to { opacity: 0; transform: scale(.1) translateY(400px); } }
.tb { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 7px; color: #fff; border-radius: 6px 6px 0 0; cursor: move;
  background: linear-gradient(var(--title1), var(--title2) 8%, var(--title1) 40%, var(--title3) 92%, #0034b0); font: 700 13px var(--font); text-shadow: 1px 1px #0a1f6b; user-select: none; }
.tb .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb button { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; color: #fff; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #5a8fff, #2462e6 60%, #1d4fc7); font-weight: 700; line-height: 1; }
.tb button.x { background: linear-gradient(135deg, #f0a080, #e05230 55%, #c13a1c); }
.tb button:hover { filter: brightness(1.15); }
.wb { flex: 1; overflow: auto; padding: 8px; position: relative; }
.wb.flush { padding: 0; }
.rs { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #aaa 50% 60%, transparent 60% 70%, #aaa 70% 80%, transparent 80%); }
@media (max-width: 760px) { .win { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; } .rs { display: none; } }

/* ── панель задач ── */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: stretch; z-index: 5000;
  background: linear-gradient(#3168d5, var(--task1) 10%, #2157d6 60%, var(--task2)); border-top: 1px solid #0f3fa8; }
.start { padding: 0 18px 0 10px; display: flex; align-items: center; gap: 6px; border: 0; color: #fff; font: italic 700 15px var(--font); text-shadow: 1px 1px 1px #1a4f1a;
  background: linear-gradient(var(--start2), var(--start1) 50%, #2f8a2f); border-radius: 0 12px 12px 0; cursor: pointer; box-shadow: inset -2px 0 2px #0004; }
.start svg { width: 18px; transition: transform .4s cubic-bezier(.5,-.6,.5,1.6); }
.start:hover svg, .start.on svg { transform: rotate(120deg); }
.tasks { flex: 1; display: flex; gap: 3px; padding: 3px 6px; overflow: hidden; }
.task { max-width: 170px; flex: 1 1 0; min-width: 40px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 3px; color: #fff; cursor: pointer;
  background: linear-gradient(#3c81f3, #2a6ae8); border: 1px solid #1a49b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rise .2s; }
.task.on { background: linear-gradient(#1e4fc1, #1a45b0); box-shadow: inset 1px 1px 3px #0006; }
.tray { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #fff; background: linear-gradient(#0e8bf0, #1696ea 10%, #0d7ad3); border-left: 1px solid #0a59a8; box-shadow: inset 1px 0 #4fb0f5; }
.tray .ses { font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 8px; background: #0005; }
.tray .ses.warn { background: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.startmenu { position: fixed; left: 0; bottom: 30px; width: 380px; max-width: 100vw; z-index: 6000; border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 3px 0 12px #0008;
  border: 2px solid #1c50c8; border-bottom: 0; transform-origin: 0 100%; animation: menu .18s ease-out; background: #fff; }
@keyframes menu { from { opacity: 0; transform: scaleY(.3) translateY(40px); } }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 8px; color: #fff; font: 700 15px var(--font); background: linear-gradient(#1868ce, #0e60cb 15%, #2b7ee6 70%, #1a5fd0); text-shadow: 1px 1px #0a2f80; }
.sm-head .avatar { width: 42px; height: 42px; border-width: 2px; }
.sm-body { display: grid; grid-template-columns: 1fr 1fr; max-height: 70vh; }
.sm-col { padding: 6px 4px; overflow: auto; }
.sm-col.r { background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 2px; cursor: pointer; }
.sm-item:hover { background: var(--sel); color: #fff; }
.sm-item .n { font-size: 10px; color: #888; width: 12px; }
.sm-item:hover .n { color: #cfe; }
.sm-sep { height: 1px; margin: 4px 6px; background: linear-gradient(90deg, transparent, #aac, transparent); }
.sm-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 6px; background: linear-gradient(#1868ce, #2b7ee6); }
.sm-foot button { display: flex; align-items: center; gap: 4px; color: #fff; background: none; border: 0; cursor: pointer; }
.sm-foot i { width: 22px; height: 22px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(135deg, #f0a080, #d0401c); display: grid; place-items: center; font-style: normal; }

/* ── элементы ── */
.btn { padding: 3px 12px; min-width: 70px; border: 1px solid #003c74; border-radius: 3px; cursor: pointer; background: linear-gradient(#fff, #ecebe6 85%, #d6d0c5); }
.btn:hover { box-shadow: inset 0 0 0 2px #f8b330; }
.btn:active { background: linear-gradient(#e3e2dc, #f4f3ee); }
.btn.pri { box-shadow: inset 0 0 0 1px #4a7bd9; }
.btn.red { color: var(--red); }
.btn.sm { min-width: 0; padding: 1px 7px; }
.btn[disabled] { color: #aaa; border-color: #c9c7ba; cursor: default; box-shadow: none; }
input.f, select.f, textarea.f { padding: 3px 5px; border: 1px solid #7f9db9; background: #fff; border-radius: 0; min-width: 0; }
textarea.f { resize: vertical; }
fieldset { border: 1px solid #d0d0bf; border-radius: 4px; padding: 6px 8px 8px; margin: 0 0 8px; }
legend { color: #0046d5; padding: 0 3px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.mono { font-family: Consolas, "Lucida Console", monospace; }
.tabs { display: flex; gap: 2px; padding: 4px 4px 0; border-bottom: 1px solid #919b9c; }
.tab { padding: 3px 10px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ece9d8); cursor: pointer; }
.tab.on { background: #fcfcfe; border-top: 2px solid #ffc83d; margin-bottom: -1px; }
table.lv { width: 100%; border-collapse: collapse; background: #fff; }
table.lv th { position: sticky; top: 0; text-align: left; font-weight: 400; padding: 3px 6px; background: linear-gradient(#fff, #ebeadb); border-bottom: 1px solid #d6d2c2; border-right: 1px solid #e3e0d0; white-space: nowrap; cursor: default; z-index: 1; }
table.lv td { padding: 3px 6px; border-bottom: 1px solid #f0efe6; vertical-align: top; }
table.lv tr.click { cursor: pointer; }
table.lv tr.click:hover td { background: #e8f0fd; }
table.lv tr.sel td { background: var(--sel); color: #fff; }
.pill { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; background: #ddd; white-space: nowrap; }
.pill.ok { background: #d4f1d4; color: #1c6b1c; } .pill.bad { background: #fbd5d5; color: #9b1c1c; } .pill.warn { background: #fdecc0; color: #7a5300; } .pill.info { background: #d6e6fb; color: #17458f; }
.lvl-error td:first-child { box-shadow: inset 3px 0 var(--red); } .lvl-warn td:first-child { box-shadow: inset 3px 0 var(--amber); }
.meter { height: 14px; border: 1px solid #888; background: #fff; padding: 1px; min-width: 70px; }
.meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #2bb52b 0 8px, transparent 8px 10px); transition: width .6s; }
.meter.hot i { background: repeating-linear-gradient(90deg, #e33 0 8px, transparent 8px 10px); }
.meter.mid i { background: repeating-linear-gradient(90deg, #e8a400 0 8px, transparent 8px 10px); }
.bars { display: flex; gap: 1px; height: 18px; align-items: stretch; }
.bars i { flex: 1; background: #2bb52b; border-radius: 1px; }
.bars i.f { background: var(--red); } .bars i.p { background: #e8a400; } .bars i.n { background: #ddd; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.toast { position: fixed; right: 12px; bottom: 40px; z-index: 9000; max-width: 340px; padding: 10px 12px 10px 34px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; box-shadow: 2px 2px 6px #0005; animation: rise .25s; }
.toast::before { content: "i"; position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: #2a6ae8; color: #fff; font: 700 12px/18px Georgia, serif; text-align: center; }
.toast.err::before { content: "!"; background: var(--red); }
.spinner { width: 18px; height: 18px; animation: spin3 1.2s linear infinite; display: inline-block; vertical-align: middle; }

/* ── обращения: три колонки ── */
.tk { display: grid; grid-template-columns: 280px 1fr 270px; height: 100%; }
.tk-l, .tk-r { overflow: auto; background: #f6f6f0; border-right: 1px solid #c9c6b6; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.tk-r { border-right: 0; border-left: 1px solid #c9c6b6; }
.tk-c { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.tk-card { padding: 6px 8px; border: 1px solid #c9d3e6; border-radius: 4px; background: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tk-card:hover { transform: translateX(2px); box-shadow: -3px 0 0 var(--sel); }
.tk-card.on { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.tk-card.p2 { border-left: 4px solid var(--red); background: #fff5f5; }
.tk-card.p1 { border-left: 4px solid var(--amber); }
.tk-card .h { display: flex; gap: 4px; align-items: center; }
.tk-card .h b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-head { padding: 6px 8px; display: flex; gap: 6px; align-items: center; border-bottom: 1px solid #ddd; background: #fafaf5; flex-wrap: wrap; }
.tk-head b { flex: 1; min-width: 140px; }
.chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: repeating-linear-gradient(45deg, #fbfbf8 0 10px, #f7f7f2 10px 20px); }
.msg { max-width: 78%; padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #dcdcd0; white-space: pre-wrap; word-break: break-word; animation: rise .2s; }
.msg.staff { align-self: flex-end; background: #e3edff; border-color: #a8c2f0; }
.msg.note { align-self: flex-end; background: #fff7c2; border-color: #e3cf5a; border-style: dashed; }
.msg.system { align-self: center; background: none; border: 0; color: var(--muted); font-size: 11px; }
.msg small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.composer { border-top: 1px solid #ddd; padding: 6px; display: flex; flex-direction: column; gap: 5px; background: #fafaf5; }
.composer textarea { min-height: 56px; }
.composer.note textarea { background: #fffbe0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.kv span:nth-child(odd) { color: var(--muted); }
@media (max-width: 1000px) { .tk { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .tk-l { max-height: 35vh; } .tk-r { display: none; } }

/* ── графики ── */
svg.chart { width: 100%; height: 120px; background: #000; border: 2px inset #fff; }
svg.chart .grid line { stroke: #0a5f0a; stroke-width: 1; }
svg.chart path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.term { height: 100%; background: #000; color: #ccc; display: flex; flex-direction: column; }
.term .xt { flex: 1; padding: 4px; min-height: 0; }
.term pre { flex: 1; margin: 0; padding: 6px; overflow: auto; font: 13px/1.3 Consolas, monospace; white-space: pre-wrap; }
.term input { background: #111; color: #0f0; border: 0; border-top: 1px solid #333; padding: 6px; font: 13px Consolas, monospace; }