/* MAPA ROM OS · the operating system of a paper factory.
   Governing idea: kraft, ink, die-cut precision. Windows are sheets of board on a workbench.
   Theme: pixelflame-light — warm paper grounds, flame-orange accent; green/amber/red semantic only.
   Motion: transform/opacity only. Fonts bundled locally in ../fonts/. */

@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url("../fonts/fraunces-italic-400-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url("../fonts/fraunces-italic-400-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/fraunces-normal-400-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/fraunces-normal-400-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-normal-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-normal-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-mono-normal-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-mono-normal-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-sans-normal-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-sans-normal-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-sans-normal-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-sans-normal-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#f3ede1; --surface:#fdfbf6; --surface-2:#fbf8f1; --kraft:#ebe2d0;
  --line:rgba(22,19,17,.14); --line-2:rgba(22,19,17,.22);
  --ink:#161311; --muted:#6e675c; --faint:#9a9284;
  --flame:#d46e22; --flame-d:#a8531a; --flame-soft:#f6e3cf;
  --green:#2F7D5B; --green-d:#225C43; --green-soft:#E0F0E7;
  --amber:#C9781E; --amber-d:#9E5C12; --amber-soft:#F7E9D6;
  --red:#BC4438; --red-soft:#F6E0DD;
  --blue:#36617F; --blue-soft:#E2EAF0;
  --kraft-edge:#C49A6C;
  --shadow-sheet:0 1px 1px rgba(22,19,17,.08), 0 10px 30px rgba(22,19,17,.14), 0 2px 6px rgba(22,19,17,.08);
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-ui:"IBM Plex Sans","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden}
body{
  font-family:var(--font-ui); color:var(--ink); font-size:14px; line-height:1.5;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(0deg, rgba(22,19,17,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(196,154,108,.05) 0 1px, transparent 1px 9px),
    var(--kraft);
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--flame); outline-offset:2px;
}
::selection{background:var(--flame-soft)}

/* ============ BOOT ============ */
#boot{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:
    repeating-linear-gradient(0deg, rgba(22,19,17,.03) 0 1px, transparent 1px 6px),
    var(--kraft);
  cursor:pointer; transition:opacity .45s ease;
}
#boot.done{opacity:0; pointer-events:none}
.boot-sheet{text-align:center; color:var(--ink)}
.boot-mark{width:88px; height:88px; color:var(--ink); animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{
  0%{transform:scale(1.6) rotate(-4deg); opacity:0}
  60%{transform:scale(.96) rotate(.5deg); opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.boot-name{
  font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:.04em;
  margin-top:14px; animation:inkIn .6s .25s ease both;
}
.boot-sub{
  font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.14em;
  text-transform:uppercase; margin-top:8px; animation:inkIn .6s .45s ease both;
}
@keyframes inkIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.boot-line{
  width:280px; height:3px; background:var(--line-2); margin:26px auto 14px; overflow:hidden;
}
#boot-progress{
  display:block; height:100%; width:100%; background:var(--flame);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.3,.6,.3,1);
}
#boot.rolling #boot-progress{transform:scaleX(1)}
.boot-steps{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); min-height:18px; letter-spacing:.03em;
}
.boot-skip{
  position:fixed; bottom:22px; left:0; right:0; font-family:var(--font-mono);
  font-size:11px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase;
}

/* ============ SHELL ============ */
#shell{height:100%; display:flex; flex-direction:column}

#statusbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:38px; padding:0 16px; flex:none;
  background:var(--ink); color:#EFE9DC;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
  border-bottom:3px solid var(--flame);
}
.sb-left,.sb-right{display:flex; align-items:center; gap:10px; white-space:nowrap}
.sb-mark{display:inline-flex; color:#EFE9DC}
.sb-brand{font-weight:700; letter-spacing:.08em}
.sb-badge{
  border:1px solid rgba(239,233,220,.35); padding:1px 7px; font-size:10.5px;
  letter-spacing:.08em; color:rgba(239,233,220,.8);
}
.sb-demo{
  background:var(--amber); color:#241708; padding:1px 7px; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600; cursor:help;
}
.sb-mid{display:flex; gap:22px; overflow:hidden}
.sb-mid .vital{display:flex; gap:7px; align-items:baseline; white-space:nowrap}
.sb-mid .vital b{font-weight:700; color:#fff}
.sb-mid .vital span{color:rgba(239,233,220,.65); font-size:11px}
.sb-mid .vital.warn b{color:#F0B25E}
.sb-dot{width:4px; height:4px; background:var(--green); display:inline-block}
.sb-right{color:rgba(239,233,220,.85)}

/* ============ WORKBENCH ============ */
#workbench{position:relative; flex:1; overflow:hidden}

/* ============ LINIA (production-line strip, not a dock) ============ */
#linia{
  flex:none; height:62px; display:flex; align-items:stretch;
  background:
    repeating-linear-gradient(-45deg, rgba(22,19,17,.05) 0 2px, transparent 2px 12px),
    var(--bg);
  border-top:1px solid var(--line-2);
  box-shadow:0 -6px 18px rgba(22,19,17,.05);
}
.linia-belt{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; overflow-x:auto;
}
.station{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;
  min-width:92px; height:48px; padding:3px 10px; position:relative;
  background:var(--surface-2); border:1px solid var(--line-2);
  transition:transform .15s ease; user-select:none;
}

.station:hover{transform:translateY(-3px)}
.station:active{transform:translateY(-1px)}
.station svg{width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:square}
.station .st-name{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-indent:.1em; text-transform:uppercase; color:var(--muted);
}
.station.open{background:var(--surface); border-color:var(--kraft-edge)}
.station.open::after{
  content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:22px; height:3px; background:var(--flame);
}
.station.min::after{background:var(--amber)}
.station .st-alert{
  position:absolute; top:5px; right:9px; width:8px; height:8px; background:var(--red); border-radius:50%;
}
.linia-end{
  display:grid; place-items:center; padding:0 18px; border-left:1px solid var(--line-2);
  font-family:var(--font-mono); font-size:12px; color:var(--muted); min-width:86px;
}

/* ============ WINDOWS: sheets of board ============ */
.sheet{
  position:absolute; top:0; left:0; width:min(680px, calc(100vw - 60px));
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sheet);
  display:flex; flex-direction:column;
  will-change:transform; touch-action:none;
  opacity:0; transform:scale(.97);
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,1.2,.4,1);
}
.sheet.on{opacity:1}
.sheet.closing{opacity:0; transform:scale(.97) !important; pointer-events:none}
.sheet.dragging{transition:none}
.sheet.dragging .sheet-title{cursor:grabbing}

/* fly-to-dock close/minimize/restore */
.sheet.flying{transition:transform .28s cubic-bezier(.5,0,.85,.4), opacity .24s ease}
.sheet.maxed{transition:transform .2s ease}

/* resize grip, bottom-right: three ink ticks */
.sheet-resize{
  position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; touch-action:none;
  background:
    linear-gradient(135deg, transparent calc(50% + 5px), var(--line-2) calc(50% + 5px), var(--line-2) calc(50% + 6px), transparent calc(50% + 6px)),
    linear-gradient(135deg, transparent calc(50% + 1px), var(--line-2) calc(50% + 1px), var(--line-2) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(135deg, transparent calc(50% - 3px), var(--line-2) calc(50% - 3px), var(--line-2) calc(50% - 2px), transparent calc(50% - 2px));
}
.sheet.maxed .sheet-resize{display:none}

.sheet:not(.focused){filter:saturate(.85)}
.sheet:not(.focused)::after{
  content:""; position:absolute; inset:0; background:rgba(243,237,225,.55); pointer-events:none;
}



.sheet-bar{
  flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px 9px 18px;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(196,154,108,.14) 0 3px, rgba(196,154,108,.03) 3px 8px),
    var(--surface-2);
  cursor:grab; user-select:none;
}
.sheet-glyph{flex:none; display:grid; place-items:center; width:26px; height:26px; border:1.5px solid var(--ink)}
.sheet-glyph svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:square}
.sheet-title{
  flex:1; font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.02em;
}
.sheet-title small{
  display:block; font-family:var(--font-mono); font-weight:400; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.sheet-btn{
  flex:none; width:24px; height:24px; display:grid; place-items:center;
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink);
  transition:transform .12s ease;
}
.sheet-btn:hover{transform:rotate(-4deg) scale(1.06)}
.sheet-btn svg{width:12px; height:12px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:square}
.sheet-btn.close:hover{background:var(--red); border-color:var(--red); color:#fff}
.sheet-btn.min:hover{background:var(--amber); border-color:var(--amber); color:#fff}

.sheet-body{flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 22px 24px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}

/* ============ SHARED COMPONENTS ============ */
h2.app-h{font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.01em; margin-bottom:4px}
p.app-sub{color:var(--muted); font-size:13px; margin-bottom:16px}

.stamp{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border:1.5px solid currentColor;
}
.stamp.green{color:var(--green-d); background:var(--green-soft)}
.stamp.amber{color:var(--amber-d); background:var(--amber-soft)}
.stamp.red{color:var(--red); background:var(--red-soft)}
.stamp.ink{color:var(--ink); background:var(--surface-2)}

.card{
  border:1px solid var(--line); background:var(--surface-2); padding:14px 16px; margin-bottom:10px;
}
.card{position:relative}

.signal{position:relative}
.tender{position:relative}
.card.risk{border-left:3px solid var(--red)}
.card.opp{border-left:3px solid var(--amber)}
.card.ok{border-left:3px solid var(--green)}
.card h4{font-size:14px; font-weight:700; margin-bottom:3px}
.card p{font-size:13px; color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink);
  transition:transform .12s ease; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--ink); color:#EFE9DC}
.btn.primary:hover{background:var(--flame-d); border-color:var(--flame-d)}
.btn.approve{background:var(--green); border-color:var(--green); color:#fff}
.btn.small{padding:4px 10px; font-size:10.5px}

.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.pos{color:var(--green-d)} .neg{color:var(--red)} .warn{color:var(--amber-d)}

.kv{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted); font-size:12.5px}
.kv .v{font-family:var(--font-mono); font-weight:600; font-size:13px}

.empty{
  text-align:center; color:var(--muted); padding:28px 18px; border:1.5px dashed var(--line-2);
  font-size:13px; margin-top:8px;
}
.empty .stamp{margin-bottom:8px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}

.metric{border:1px solid var(--line); background:var(--surface-2); padding:12px 14px}
.metric .m-label{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.metric .m-value{font-family:var(--font-mono); font-size:22px; font-weight:700; margin-top:2px}
.metric .m-note{font-size:11.5px; color:var(--muted); margin-top:2px}

svg.chart{display:block; width:100%; height:auto}
svg.chart text{font-family:var(--font-mono)}

hr.rule{border:0; border-top:1px solid var(--line); margin:16px 0}

/* ============ PULS ============ */
.puls-p{
  font-size:14.5px; line-height:1.65; margin-bottom:12px; max-width:72ch;
}
.puls-p::first-letter{font-family:var(--font-display); font-weight:600}
.puls-decizie{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  border:1.5px solid var(--amber); background:var(--amber-soft); padding:12px 16px; margin:14px 0 18px;
}
.puls-decizie .pd-text{font-size:13.5px; font-weight:600}
.puls-decizie .pd-label{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-d)}
.signal-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px}
.signal{
  border:1px solid var(--line); background:var(--surface-2); padding:13px 14px;
  display:flex; flex-direction:column; gap:7px;
}
.signal h4{font-size:13.5px; line-height:1.35}
.signal p{font-size:12px; color:var(--muted); flex:1}
.signal .btn{align-self:flex-start}
.signal.risc{border-top:3px solid var(--red)}
.signal.marja{border-top:3px solid var(--blue)}
.signal.oportunitate{border-top:3px solid var(--amber)}

/* ============ COCKPIT ============ */
.legend{display:flex; gap:16px; flex-wrap:wrap; margin:6px 0 4px; font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.legend i{display:inline-block; width:14px; height:3px; margin-right:5px; vertical-align:middle}
.subprag-row{
  display:grid; grid-template-columns:74px 1fr auto auto; gap:12px; align-items:center;
  padding:9px 12px; border:1px solid var(--line); background:var(--surface-2); margin-bottom:6px;
}
.subprag-row .sp-id{font-family:var(--font-mono); font-weight:700; font-size:12px}
.subprag-row .sp-what{font-size:12.5px; color:var(--muted)}
.subprag-row .sp-what b{color:var(--ink)}

/* ============ OFERTARE ============ */
.of-presets{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.of-preset{
  border:1.5px solid var(--line-2); background:var(--surface-2); padding:12px; text-align:center;
  transition:transform .12s ease;
}
.of-preset:hover{transform:translateY(-2px)}
.of-preset.sel{border-color:var(--ink); background:var(--surface)}
.of-preset svg{width:64px; height:44px; stroke:var(--ink); fill:none; stroke-width:1.6}
.of-preset .of-code{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; margin-top:6px}
.of-preset .of-name{font-size:11.5px; color:var(--muted)}
.of-form{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px}
.of-field label{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:4px}
.of-field input, .of-field select{
  width:100%; padding:7px 9px; border:1.5px solid var(--line-2); background:var(--surface);
  font-family:var(--font-mono); font-size:13px; color:var(--ink);
}
.of-field input:focus, .of-field select:focus{border-color:var(--flame); outline:none}
.of-result{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:stretch;
  border:1.5px solid var(--line-2); padding:14px 16px; background:var(--surface-2);
}
.of-result.ok{border-color:var(--green)}
.of-result.amber{border-color:var(--amber); background:var(--amber-soft)}
.of-result.red{border-color:var(--red); background:var(--red-soft)}
.of-guard{font-size:12px; margin-top:10px; font-weight:600}
.of-timer{display:flex; gap:14px; align-items:baseline; margin:14px 0 4px; font-family:var(--font-mono)}
.of-timer .t-us{font-size:15px; font-weight:700; color:var(--flame-d)}
.of-timer .t-them{font-size:12px; color:var(--faint)}
.quote-doc{
  margin-top:14px; border:1px solid var(--line-2); background:var(--surface); padding:20px 24px;
  position:relative; box-shadow:0 2px 8px rgba(22,19,17,.06);
}
.quote-doc .qd-stamp{
  position:absolute; top:14px; right:18px; transform:rotate(6deg);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--green-d); color:var(--green-d); padding:4px 10px; opacity:.85;
}
.quote-doc .qd-stamp.warn{border-color:var(--amber-d); color:var(--amber-d)}
.quote-doc h3{font-family:var(--font-display); font-size:16px; margin-bottom:10px}
.quote-doc table{width:100%; border-collapse:collapse; font-size:12.5px}
.quote-doc td{padding:5px 0; border-bottom:1px dashed var(--line)}
.quote-doc td:last-child{text-align:right; font-family:var(--font-mono); font-weight:600}

/* ============ RADAR ============ */
.tender{
  border:1px solid var(--line); background:var(--surface-2); padding:14px 16px; margin-bottom:10px;
}
.tender-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px}
.tender h4{font-size:14px}
.tender .t-meta{font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:8px}
.match{display:flex; align-items:center; gap:8px}
.match .match-bar{width:70px; height:6px; background:var(--line); overflow:hidden}
.match .match-bar i{display:block; height:100%; background:var(--flame); transform-origin:left}
.match b{font-family:var(--font-mono); font-size:13px}
.t-why{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px}
.t-why span{font-size:11px; background:var(--surface); border:1px solid var(--line); padding:2px 8px; color:var(--muted)}
.t-deadline{font-family:var(--font-mono); font-size:11.5px}
.t-deadline.urgent{color:var(--red); font-weight:700}
.docprep{margin-top:10px; border-top:1px dashed var(--line-2); padding-top:10px}
.docstep{
  display:flex; gap:9px; align-items:center; font-family:var(--font-mono); font-size:12px;
  padding:4px 0; color:var(--faint); opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
}
.docstep.show{opacity:1; transform:none}
.docstep.done{color:var(--ink)}
.docstep .ds-box{width:13px; height:13px; border:1.5px solid currentColor; display:grid; place-items:center; flex:none}
.docstep .ds-box svg{width:9px; height:9px; stroke:var(--green-d); stroke-width:2.6; fill:none}

/* ============ CLIENTI ============ */
.cl-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.client-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  border:1px solid var(--line); background:var(--surface-2); padding:11px 14px; margin-bottom:7px;
}
.client-row.risc{border-left:3px solid var(--red)}
.client-row.atentie{border-left:3px solid var(--amber)}
.client-row.activ{border-left:3px solid var(--green)}
.client-row h4{font-size:13.5px}
.client-row .c-sub{font-size:11.5px; color:var(--muted)}
.silence{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.silence .s-bar{position:relative; width:90px; height:6px; background:var(--line)}
.silence .s-bar i{position:absolute; inset:0; transform-origin:left; background:var(--green)}
.silence .s-bar.over i{background:var(--red)}
.silence .s-bar u{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink)}
.winback{
  border:1px dashed var(--line-2); background:var(--surface); padding:12px 14px; margin:2px 0 10px;
  font-size:13px; line-height:1.6;
}
.winback .wb-label{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px}
.wb-actions{display:flex; gap:8px; margin-top:10px}

/* ============ APROVIZIONARE ============ */
.board-row{
  display:grid; grid-template-columns:1fr 120px 110px; gap:14px; align-items:center;
  border:1px solid var(--line); background:var(--surface-2); padding:12px 14px; margin-bottom:8px;
}
.board-row h4{font-size:13.5px}
.board-row .b-sub{font-size:11.5px; color:var(--muted)}
.coverage{font-family:var(--font-mono); text-align:right}
.coverage b{font-size:19px}
.coverage span{font-size:10.5px; color:var(--faint); display:block; letter-spacing:.08em; text-transform:uppercase}
.reco{
  border:1.5px solid var(--line-2); padding:12px 14px; margin:4px 0 10px; font-size:13px; background:var(--surface);
}
.reco.buy{border-color:var(--red)}
.reco.free{border-color:var(--green)}
.reco .r-head{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px}

/* ============ ASISTENT ============ */
.as-wrap{display:flex; flex-direction:column; gap:0; min-height:100%}
.as-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.as-chip{
  font-family:var(--font-mono); font-size:11.5px; padding:6px 12px;
  border:1.5px solid var(--line-2); background:var(--surface-2);
  transition:transform .12s ease;
}
.as-chip:hover{transform:translateY(-1px); border-color:var(--ink)}
.as-chip[disabled]{opacity:.45; cursor:default; transform:none}
.as-thread{flex:1; min-height:120px}
.msg{max-width:56ch; margin-bottom:12px; opacity:0; transform:translateY(5px); transition:opacity .25s ease, transform .25s ease}
.msg.show{opacity:1; transform:none}
.msg.q{
  margin-left:auto; background:var(--ink); color:#EFE9DC; padding:9px 14px; font-size:13.5px;
}
.msg.a{background:var(--surface-2); border:1px solid var(--line); padding:11px 14px; font-size:13.5px; line-height:1.6}
.msg.a .btn{margin-top:9px}
.aslog{
  margin:2px 0 16px; border-left:3px solid var(--kraft-edge); background:var(--surface-2);
  padding:9px 12px; max-width:56ch;
}
.aslog .al-title{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px;
}
.al-entry{
  display:grid; grid-template-columns:64px 62px 1fr; gap:8px; font-family:var(--font-mono);
  font-size:11px; padding:2.5px 0; color:var(--muted);
  opacity:0; transform:translateY(3px); transition:opacity .25s ease, transform .25s ease;
}
.al-entry.show{opacity:1; transform:none}
.al-entry .al-ora{color:var(--faint)}
.al-entry .al-tip{font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.al-entry .al-tip.citit{color:var(--blue)}
.al-entry .al-tip.calculat{color:var(--amber-d)}
.al-entry .al-tip.trimis{color:var(--green-d)}
.as-input{
  display:flex; gap:8px; border-top:1px solid var(--line); padding:12px 0 14px; margin-top:6px;
  position:sticky; bottom:-24px; background:var(--surface);
}
.as-input input{
  flex:1; padding:9px 12px; border:1.5px solid var(--line-2); background:var(--surface);
  font-family:var(--font-mono); font-size:13px;
}
.as-input input:focus{border-color:var(--flame); outline:none}

/* ============ OPTIMIZATOR ============ */
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.opt-panel{border:1px solid var(--line); background:var(--surface-2); padding:12px}
.opt-panel .o-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.opt-panel svg{display:block; width:100%; height:auto; background:var(--surface); border:1px solid var(--line)}

@media (max-width:1100px){
  .signal-row,.grid3,.of-presets{grid-template-columns:1fr 1fr}
  .grid2,.opt-grid{grid-template-columns:1fr}
}

/* ============ SETTINGS GEAR (linia end) ============ */
.linia-end{display:flex; align-items:center; gap:12px; justify-content:center}
#linia-gear{
  display:grid; place-items:center; width:26px; height:26px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--muted);
  transition:transform .12s ease;
}
#linia-gear:hover{transform:rotate(22deg); color:var(--ink); border-color:var(--ink)}