:root{
  --bg:#0f172a;
  --card:#1e293b;
  --card2:#334155;
  --accent:#f97316;
  --accent2:#fb923c;
  --text:#f8fafc;
  --muted:#94a3b8;
  --border:#475569;
  --panel-hdr:#151f30;
  --green:#22c55e;
  --modal-bg:rgba(0,0,0,.65);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif;min-height:100vh;}

/* ── NAVBAR ── */
.top-navbar{
  display:flex;align-items:center;justify-content:space-between;
  background:#111827;padding:0 32px;height:56px;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;
}
.nav-left{display:flex;align-items:center;gap:12px;}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;}
.brand-name{font-weight:700;font-size:16px;letter-spacing:1px;}
.divider{color:var(--muted);}
.app-name{color:var(--muted);font-size:14px;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-btn{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:6px 14px;font-size:13px;cursor:pointer;transition:all .2s;}
.nav-btn:hover{color:var(--text);border-color:var(--accent);}
.nav-btn.primary{background:var(--accent);color:white;border-color:var(--accent);}
.nav-btn.primary:hover{background:var(--accent2);}

/* ── CONTAINER ── */
.container{width:1400px;max-width:97%;margin:28px auto;}

/* ── TOOLBAR ── */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px 20px;margin-bottom:24px;gap:12px;flex-wrap:wrap;
}
.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.toolbar-label{color:var(--muted);font-size:14px;white-space:nowrap;}
.formula-dropdown{
  height:42px;padding:0 14px;font-size:14px;border-radius:8px;
  border:1px solid var(--border);background:var(--card2);color:var(--text);
  min-width:280px;cursor:pointer;
}
.formula-dropdown:focus{outline:none;border-color:var(--accent);}
.btn-add{
  height:42px;padding:0 20px;background:var(--accent);color:white;
  border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;
}
.btn-add:hover{background:var(--accent2);}
.btn-clear{
  height:42px;padding:0 18px;background:transparent;color:var(--muted);
  border:1px solid var(--border);border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;
}
.btn-clear:hover{color:#f87171;border-color:#f87171;}

/* ── EMPTY STATE ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:340px;text-align:center;gap:12px;
  background:var(--card);border:2px dashed var(--border);border-radius:16px;
}
.empty-icon{font-size:48px;}
.empty-title{font-size:22px;font-weight:600;}
.empty-sub{font-size:14px;line-height:1.8;color:var(--muted);}

/* ── PANELS GRID ── */
.panels-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}

/* ── CALC PANEL ── */
.calc-panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;position:relative;
}

/* ── PANEL HEADER ── */
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel-hdr);padding:14px 20px;border-bottom:1px solid var(--border);
}
.panel-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;}
.panel-icon{font-size:20px;}
.panel-tag{
  font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;
  background:rgba(249,115,22,.15);color:var(--accent);border:1px solid rgba(249,115,22,.3);
}
.panel-header-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  background:rgba(255,255,255,.07);border:1px solid var(--border);
  color:var(--muted);border-radius:7px;padding:5px 12px;font-size:13px;
  cursor:pointer;transition:all .2s;
}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);}
.panel-close{
  background:transparent;border:none;color:var(--muted);
  font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;
  line-height:1;transition:all .2s;
}
.panel-close:hover{color:#f87171;background:rgba(248,113,113,.1);}

/* ── UNIT SYSTEM SWITCHER ── */
.sys-switcher{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.sys-label{font-size:12px;color:var(--muted);margin-right:4px;}
.sys-tab{
  padding:4px 14px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s;letter-spacing:.5px;
}
.sys-tab:hover{border-color:var(--accent);color:var(--accent);}
.sys-tab.active{background:var(--accent);border-color:var(--accent);color:white;}

/* ── FORMULA BOX ── */
.panel-formula-box{
  background:rgba(249,115,22,.06);border-bottom:1px solid var(--border);padding:16px 20px;
}
.pf-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}
.pf-eq{font-size:24px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.pf-defs{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;}

/* ── INPUTS ── */
.panel-inputs{padding:18px 20px 4px;}
.pi-row{display:flex;align-items:center;gap:12px;margin-bottom:13px;}
.pi-row label{color:var(--muted);font-size:13px;white-space:nowrap;min-width:175px;}
.pi-ctrl{display:flex;gap:8px;flex:1;}
.pi-ctrl input{flex:1;}
input,select{
  height:44px;padding:0 12px;font-size:15px;border-radius:8px;
  border:1px solid var(--border);background:var(--card2);color:white;
}
.unit-sel{width:110px;}
.unit-sel-wide{width:100%;flex:1;}
input:focus,select:focus{outline:none;border-color:var(--accent);}
input[type=number]::-webkit-inner-spin-button{opacity:.4;}

/* ── DERIVED GRID ── */
.derived-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;padding:6px 20px 16px;
}
.dg-item{
  background:var(--card2);border-radius:8px;padding:10px 12px;
  display:flex;flex-direction:column;gap:3px;
}
.dg-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.dg-val{font-size:17px;font-weight:700;}
.dg-unit{font-size:11px;color:var(--accent);}

/* ── RESULTS ── */
.panel-result{
  margin:4px 20px 20px;border-radius:10px;
  display:flex;flex-wrap:wrap;background:var(--card2);padding:16px 20px;
  align-items:center;justify-content:space-between;gap:12px;
}
.panel-result.two-results{
  background:transparent;gap:12px;padding:0;
}
.pr-item{
  flex:1 1 140px;min-width:140px;
  background:var(--card2);border-radius:10px;padding:14px 18px;
}
.pr-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.pr-value{font-size:36px;font-weight:700;color:var(--text);}
.pr-value.highlight{color:var(--accent);}
.pr-unit{font-size:12px;color:var(--muted);margin-top:2px;}

/* Single result: label left, value right */
.panel-result:not(.two-results) .pr-item{
  display:contents;
}
.panel-result:not(.two-results) .pr-label{
  font-size:16px;font-weight:600;color:var(--text);margin:0;
}
.panel-result:not(.two-results) .pr-value{
  font-size:40px;
}

.panel-result-empty{
  margin:4px 20px 20px;padding:20px;text-align:center;
  color:var(--muted);font-size:14px;background:var(--card2);
  border-radius:10px;border:1px dashed var(--border);
}

/* ── UNIT EDITOR MODAL ── */
.unit-modal-overlay{
  position:fixed;inset:0;background:var(--modal-bg);
  z-index:999;display:flex;align-items:center;justify-content:center;
}
.unit-modal{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  width:500px;max-width:95vw;overflow:hidden;
}
.um-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;background:var(--panel-hdr);border-bottom:1px solid var(--border);
  font-weight:700;font-size:15px;
}
.um-body{padding:20px;display:flex;flex-direction:column;gap:14px;}
.um-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.um-label{font-size:14px;color:var(--muted);min-width:170px;}
.um-sel{flex:1;min-width:120px;}
.um-hint{font-size:11px;color:var(--border);width:100%;padding-left:182px;}
.um-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--border);
}
.btn-primary{
  padding:8px 22px;background:var(--accent);color:white;border:none;
  border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-primary:hover{background:var(--accent2);}
.btn-secondary{
  padding:8px 18px;background:transparent;color:var(--muted);
  border:1px solid var(--border);border-radius:8px;font-size:14px;cursor:pointer;
}
.btn-secondary:hover{color:var(--text);}

/* ── FOOTER ── */
.footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;border-top:1px solid var(--border);
  color:var(--muted);font-size:13px;margin-top:40px;
}
.footer-link{color:var(--accent);}
.footer { display:flex; flex-direction:column; gap:0; padding:0; margin-top:40px; border-top:1px solid var(--border); }
.footer-top { display:flex; gap:40px; flex-wrap:wrap; padding:32px 40px; }
.footer-col { flex:1; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.footer-logo { font-size:20px; font-weight:800; letter-spacing:2px; color:var(--text); }
.footer-tagline { font-size:10px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
.footer-heading { font-size:12px; font-weight:600; color:var(--text); margin-top:4px; }
.footer-text { font-size:12px; color:var(--muted); line-height:1.7; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding:14px 40px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.footer-link { color:var(--accent); text-decoration:none; }
.footer-link:hover { text-decoration:underline; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .panels-grid{grid-template-columns:1fr !important;}
  .derived-grid{grid-template-columns:repeat(2,1fr);}
  .pi-row{flex-direction:column;align-items:flex-start;}
  .pi-ctrl{width:100%;}
/* .panel-result.two-results{flex-direction:column;} */
}
@media(max-width:600px){
  .top-navbar{flex-direction:column;height:auto;padding:12px 16px;gap:8px;}
  .nav-right{flex-wrap:wrap;justify-content:center;}
  .derived-grid{grid-template-columns:1fr 1fr;}
  .pi-row label{min-width:unset;}
}

/* ══════════════════════════════════════════════════
   FORMULA MANAGER / MODALS
══════════════════════════════════════════════════ */

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:500;display:flex;align-items:center;justify-content:center;
  padding:20px;
}

.big-modal{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  width:680px;max-width:100%;height:82vh;max-height:82vh;display:flex;flex-direction:column;
  overflow:hidden;
}
.wide-modal{ width:820px; }

.bm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;background:var(--panel-hdr);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.bm-title{ font-size:17px;font-weight:700; }

.bm-toolbar{
  display:flex;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.bm-search{
  flex:1;height:40px;padding:0 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--card2);color:var(--text);font-size:14px;
}
.bm-search:focus{outline:none;border-color:var(--accent);}

.bm-list{ flex:1;overflow-y:auto;padding:14px 22px;display:flex;flex-direction:column;gap:10px; }
.bm-empty{ color:var(--muted);text-align:center;padding:40px 0;font-size:14px; }

/* ── Formula cards in library ── */
.fm-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card2);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;cursor:pointer;transition:border-color .2s;
}
.fm-card:hover{ border-color:var(--accent); }
.fm-icon{ font-size:28px;flex-shrink:0; }
.fm-info{ flex:1;min-width:0; }
.fm-name{ font-size:15px;font-weight:600; }
.fm-tag{
  display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;
  background:rgba(249,115,22,.12);color:var(--accent);margin:4px 0;
}
.fm-desc{ font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.fm-actions{ display:flex;gap:6px;flex-shrink:0; }

.icon-btn.danger{ color:#f87171;border-color:rgba(248,113,113,.3); }
.icon-btn.danger:hover{ background:rgba(248,113,113,.12);border-color:#f87171; }

/* ── Formula read view ── */
.fe-read{ flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:18px; }
.rd-section{ display:flex;flex-direction:column;gap:8px; }
.rd-label{ font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px; }
.rd-formula{ font-size:26px;font-weight:700;color:var(--accent); }
.rd-desc{ font-size:14px;color:var(--muted);line-height:1.6; }
.rd-table{ width:100%;border-collapse:collapse;font-size:13px; }
.rd-table th{ text-align:left;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);font-weight:500; }
.rd-table td{ padding:7px 10px;border-bottom:1px solid rgba(71,85,105,.4); }
.rd-sym{ color:var(--accent);font-weight:600;white-space:nowrap; }
.rd-units{ color:var(--muted);font-size:12px; }
.rd-json{
  background:var(--card2);border:1px solid var(--border);border-radius:8px;
  padding:14px;font-size:12px;overflow-x:auto;color:#7dd3fc;
  white-space:pre;max-height:220px;overflow-y:auto;
}

/* ── Formula edit view ── */
.fe-edit{ flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:12px;overflow:hidden; }
.fe-edit-label{ font-size:13px;color:var(--muted); }
.fe-textarea{
  flex:1;min-height:200px;padding:14px;font-family:monospace;font-size:13px;
  background:var(--card2);border:1px solid var(--border);border-radius:8px;
  color:#7dd3fc;resize:none;width:100%;
}
.fe-textarea.tall{ min-height:200px; }
.fe-textarea:focus{ outline:none;border-color:var(--accent); }
.fe-edit-actions{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.fe-edit-hint{ flex:1;font-size:12px;color:#f87171; }

/* ── Create / Upload dialog ── */
.create-tabs{ display:flex;border-bottom:1px solid var(--border);padding:0 22px;flex-shrink:0;background:var(--panel-hdr); }
.ctab{
  padding:12px 20px;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-size:14px;cursor:pointer;transition:all .2s;
}
.ctab:hover{ color:var(--text); }
.ctab.active{ color:var(--accent);border-bottom-color:var(--accent); }

.ctab-body{
  flex:1;overflow-y:auto;padding:20px 22px;
  display:flex;flex-direction:column;
}

.upload-zone{
  border:2px dashed var(--border);border-radius:12px;padding:40px 20px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;transition:border-color .2s;
}
.upload-zone:hover,.upload-zone.drag{ border-color:var(--accent);background:rgba(249,115,22,.04); }
.uz-icon{ font-size:40px; }
.uz-text{ font-size:15px; }
.uz-sub{ font-size:13px;color:var(--muted); }

.up-name{ font-size:14px;font-weight:600;margin-bottom:8px;color:var(--accent); }
.up-preview{
  background:var(--card2);border:1px solid var(--border);border-radius:8px;
  padding:12px;font-size:12px;color:#7dd3fc;max-height:220px;overflow-y:auto;
  white-space:pre;margin-bottom:12px;
}

.fm-clickable{ cursor:pointer; }
.fm-card:not(.fm-clickable){ cursor:default; }
.fm-card:not(.fm-clickable):hover{ border-color:var(--border); }

.fm-builtin-badge{
  font-size:11px;padding:3px 10px;border-radius:12px;
  background:rgba(100,116,139,.2);color:var(--muted);
  border:1px solid var(--border);white-space:nowrap;
}

/* ── pi-ctrl: input flexible, unit-sel fixed width ── */
.pi-ctrl {
  display: flex;
  gap: 8px;
  flex: 1;
  align-items: center;
}
.pi-ctrl input {
  flex: 1;
  min-width: 0;
}
.unit-sel {
  width: 120px !important;
  min-width: 120px !important;
  flex-shrink: 0 !important;
}
.unit-sel-wide {
  width: 100% !important;
  flex: 1 !important;
}

/* Number input ka + button hatao */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }