:root{
  --bg:#0b0f14;--bg2:#101823;--card:#131d29;--card2:#182433;--line:#2a3848;--text:#eef5ff;--muted:#8ea4c0;
  --cyan:#00d7ff;--good:#1ecf8f;--warn:#ffb020;--bad:#ff647d;--violet:#8b5cf6;--panel:#101722;
  --shadow:0 12px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:Segoe UI,Arial,sans-serif}
body{min-height:100vh}
.app{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.side{padding:18px;border-right:1px solid var(--line);background:rgba(255,255,255,.02);position:sticky;top:0;height:100vh;overflow:auto}
.brand{padding:8px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.brand h1{margin:0 0 6px;font-size:20px}
.brand .power{font-size:12px;color:var(--cyan);font-weight:700;letter-spacing:.4px}
.brand .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.55}
.nav button{display:block;width:100%;margin:0 0 8px;padding:12px 13px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);font-weight:700;text-align:left;cursor:pointer}
.nav button.active,.nav button:hover{background:rgba(0,215,255,.08);border-color:rgba(0,215,255,.25)}
.main{padding:20px;min-width:0}
.top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.top h2{margin:0 0 4px;font-size:30px}
.muted{color:var(--muted);font-size:13px}
button,input,select,textarea{font:inherit;border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:12px;padding:10px 12px}
button{cursor:pointer;font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:#92a2b8}
.primary{background:rgba(0,215,255,.12);border-color:rgba(0,215,255,.28)}
.success{background:rgba(30,207,143,.12);border-color:rgba(30,207,143,.28)}
.warnbtn{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.28)}
.danger{background:rgba(255,100,125,.12);border-color:rgba(255,100,125,.28)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .v{font-size:28px;font-weight:800;margin-top:8px}
.panel{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
.ph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:rgba(255,255,255,.015)}
.ph h3{margin:0;font-size:18px}
.pb{padding:16px 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.form{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field.full{grid-column:1/-1}
.table{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.02)}
table{width:100%;border-collapse:collapse;min-width:1550px}
th,td{padding:9px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:top}
th{font-size:12px;color:#9fdcff;text-transform:uppercase;background:#0d1622;position:sticky;top:0;z-index:1}
.recipe{background:#0d141c;border:1px solid var(--line);border-radius:12px;padding:8px 10px;white-space:pre-wrap;line-height:1.45;font-family:Consolas,monospace;font-size:12px}
.rowa{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.bg{color:#8effcb;background:rgba(30,207,143,.14)}
.bw{color:#ffd58a;background:rgba(255,176,32,.14)}
.bb{color:#ffb1bf;background:rgba(255,100,125,.14)}
.bv{color:#d7c0ff;background:rgba(139,92,246,.18)}
.bx{color:#bce8ff;background:rgba(0,215,255,.16)}
.hidden{display:none!important}
.notice,.filebox{padding:10px 12px;border-radius:12px;margin-bottom:12px;font-size:13px}
.notice{background:rgba(0,215,255,.08);border:1px solid rgba(0,215,255,.22);color:#b8f2ff}
.filebox{border:1px dashed rgba(0,215,255,.25);background:rgba(0,215,255,.03)}
.builder{border:1px solid var(--line);border-radius:14px;padding:12px;background:#0d141c}
.builder-row{display:grid;grid-template-columns:1.05fr 2fr .8fr auto;gap:8px;align-items:center;margin-bottom:8px}
.builder-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.box{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.small{font-size:12px;color:var(--muted)}
.comp-form{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-bottom:14px}
.inline-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.result-row.bad-row:hover{background:rgba(255,100,125,.05)}
.result-row.good-row:hover{background:rgba(30,207,143,.05)}
.result-row.mid-row:hover{background:rgba(255,176,32,.05)}
.mixing-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.02);margin-bottom:12px;box-shadow:var(--shadow)}
.mixing-card h4{margin:0 0 10px}
.line-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line);background:#0c1420;margin:0 8px 8px 0}
.section-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mini-card{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.mini-card .label{font-size:11px;color:var(--muted)}
.mini-card .value{font-size:18px;font-weight:800;margin-top:4px}
.print-header{display:none}
code.inline{padding:2px 6px;border-radius:8px;background:#0d141c;border:1px solid var(--line)}
@media(max-width:1600px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .comp-form,.filters,.grid3,.form,.section-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:1120px){
  .app{grid-template-columns:1fr}
  .side{position:relative;height:auto}
}
@media(max-width:980px){
  .grid2,.grid3,.cards,.form,.filters,.setting-grid,.comp-form,.section-kpis{grid-template-columns:1fr}
}
@media print{
  .side,.top .rowa,.no-print,.nav{display:none!important}
  .app{display:block}
  .main{padding:0}
  body{background:#fff;color:#000}
  .panel,.kpi,.mixing-card,.mini-card{background:#fff;border:1px solid #999;box-shadow:none}
  .recipe{background:#fff;color:#000}
  .print-header{display:block;margin-bottom:16px}
}


/* ==============================
   V54 ENTERPRISE VISUAL UPGRADE
   ============================== */
body{
  background:
    radial-gradient(circle at 18% 6%, rgba(0,215,255,.18), transparent 34%),
    radial-gradient(circle at 78% 0%, rgba(139,92,246,.18), transparent 34%),
    linear-gradient(180deg,#050914,#08111f)!important;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:58px 58px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 82%);
}
.side{background:linear-gradient(180deg,rgba(9,16,29,.94),rgba(6,10,18,.76))!important;backdrop-filter:blur(18px)}
.brand{border:1px solid var(--line);border-radius:22px;padding:16px!important;background:linear-gradient(135deg,rgba(0,215,255,.12),rgba(139,92,246,.07));box-shadow:var(--shadow)}
.brand h1{font-size:23px!important;letter-spacing:-.04em}.brand .power{color:#67f7ff!important}.brand .hint{color:#9eb6d6!important}
.nav button{border-radius:16px!important}.nav button.active,.nav button:hover{transform:translateX(3px);background:rgba(0,215,255,.1)!important;border-color:rgba(0,215,255,.35)!important}
.top{padding:26px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.top h2{font-size:42px!important;letter-spacing:-.06em}.muted{color:#98afd0!important}.panel,.kpi,.mixing-card,.mini-card,.box{backdrop-filter:blur(16px)}
.kpi{border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:999px;background:rgba(0,215,255,.13)}
.kpi .v{font-size:34px!important;letter-spacing:-.05em}.panel{border-radius:24px!important;background:rgba(12,20,34,.74)!important}.ph{background:rgba(255,255,255,.035)!important}.ph h3{letter-spacing:-.03em}
button,input,select,textarea{transition:.18s ease!important}button:hover{transform:translateY(-1px);border-color:rgba(0,215,255,.35);box-shadow:0 12px 30px rgba(0,215,255,.08)}
.primary{background:linear-gradient(135deg,rgba(0,215,255,.22),rgba(103,247,255,.08))!important;border-color:rgba(0,215,255,.45)!important}.success{background:rgba(30,207,143,.12)!important;border-color:rgba(30,207,143,.3)!important}
.filebox,.builder,.recipe{border-radius:18px!important}.recipe{color:#c9f3ff}.barrel-rack{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}.barrel-unit{min-width:42px}.barrel-tube{width:34px;height:120px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0b111a;position:relative}.barrel-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(180deg,#00d7ff,#1ecf8f)}.hold-card{border-color:rgba(255,176,32,.35)!important;background:rgba(255,176,32,.06)!important}.safe-card{border-color:rgba(30,207,143,.32)!important;background:rgba(30,207,143,.05)!important}
@media(max-width:980px){.top h2{font-size:32px!important}}

/* V55 production cards */
.stock-match{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(0,215,255,.045);margin-top:8px}
.stock-match strong{color:var(--cyan)}
.v55-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.barrel-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.03);margin-bottom:12px}
.barrel-card h4{margin:0 0 8px}