@font-face {
  font-family: 'Aptos';
  src: url('./fonts/Aptos-Regular.woff2') format('woff2'),
       url('./fonts/Aptos-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aptos';
  src: url('./fonts/Aptos-Bold.woff2') format('woff2'),
       url('./fonts/Aptos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root{
  --navy:#082b73;
  --navy-2:#0a3f9c;
  --navy-3:#0b4fb8;
  --blue:#1d64d8;
  --blue-dk:#0f4db4;
  --line:#b9c9e8;
  --panel:#f1f3f6;
  --panel-2:#ffffff;
  --field:#d8dee8;
  --field-bg:#eef2f7;
  --text:#102443;
  --text-m:#48607f;
  --text-d:#7688a3;
  --ok:#0c7a43;
  --warn:#a15f00;
  --err:#b42318;
  --shadow:0 8px 24px rgba(8,43,115,.10);
  --font:'Inter','Aptos','Segoe UI',sans-serif;
  --mono:'Roboto Mono','Aptos Mono','Consolas',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font);background:#e9edf4;color:var(--text);display:flex;flex-direction:column;}
body::before{display:none;}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:200;min-height:72px;background:linear-gradient(180deg,#06255f 0%, #082b73 45%, #0a377f 100%);
  border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:14px;flex-shrink:0;}
.app-name{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.05;}
.app-name span{font-size:13px;font-weight:500;opacity:.82;letter-spacing:0;display:inline-block;margin-left:8px;}
.eng-pill{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.2px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.24);padding:8px 14px;border-radius:999px;}

/* LOADING */
#overlay{position:fixed;inset:0;z-index:9999;background:rgba(233,237,244,.96);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.ring{width:44px;height:44px;border:3px solid rgba(29,100,216,.15);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ld-t{font-size:16px;font-weight:800;color:var(--navy);}
.ld-s{font-family:var(--mono);font-size:11px;color:var(--text-d);}

/* SHELL */
.shell{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;padding:0;max-width:100%;width:100%;}

/* TABS */
.tabs{display:flex;gap:8px;background:#dfe3ea;border:none;border-radius:0;padding:10px 10px 0;box-shadow:none;}
.tab-btn{padding:10px 18px;border:1px solid var(--line);border-bottom:none;background:#f7f8fb;font-family:var(--font);font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;border-radius:10px 10px 0 0;transition:all .18s;letter-spacing:0;}
.tab-btn:hover{background:#eef4ff;color:var(--blue-dk);}
.tab-btn.active{background:var(--navy-3);color:#fff;border-color:var(--navy-3);box-shadow:none;}
.tab-content{display:none;}
.tab-content.active{display:flex;flex-direction:column;}

/* PANEL */
.panel{background:#dfe3ea;border:none;border-radius:0;box-shadow:none;padding:0 10px 10px;flex:1;}

/* TAB1 LAYOUT */
.calc-grid{display:grid;grid-template-columns:340px 1fr;gap:14px;height:100%;align-items:start;}

/* INPUT COLUMN */
.calc-grid>div:first-child,.tbl-col{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.calc-grid>div:first-child{padding:16px;}
.tbl-col{padding:14px;min-width:0;}
.sec-lbl{font-size:11px;font-weight:800;color:var(--navy);letter-spacing:.9px;text-transform:uppercase;display:block;margin-bottom:8px;}
.dd-wrap{position:relative;margin-bottom:12px;}
.ref-dd{width:100%;height:42px;padding:0 38px 0 12px;background:var(--field-bg);border:1px solid #8db2eb;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:700;color:var(--text);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;transition:all .18s;}
.ref-dd:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,100,216,.10);}
.dd-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--navy);font-size:10px;pointer-events:none;}
.ref-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px;margin-bottom:12px;}
.chip{font-size:10px;font-family:var(--mono);background:#eff5ff;border:1px solid #b7cdf4;color:#285baa;padding:3px 8px;border-radius:999px;}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #8db2eb;border-radius:8px;overflow:hidden;margin-bottom:12px;background:#fff;}
.mode-btn{padding:9px 4px;text-align:center;border:none;border-right:1px solid #8db2eb;background:#f7faff;font-family:var(--font);font-size:11px;font-weight:700;color:var(--navy);cursor:pointer;transition:all .15s;line-height:1.25;}
.mode-btn:last-child{border-right:none;}
.mode-btn.active{background:var(--navy-3);color:#fff;}
.mode-btn:hover:not(.active){background:#eef4ff;}
.mode-btn .sub{font-size:9px;opacity:.78;display:block;font-weight:500;}
.hint-box{font-size:12px;color:var(--text-m);line-height:1.45;padding:10px 12px;margin-bottom:12px;background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--navy-3);border-radius:8px;}
.field{margin-bottom:12px;}
.field-lbl{font-size:11px;font-weight:700;color:var(--text);letter-spacing:0;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.field-lbl .u{color:var(--text-m);font-family:var(--mono);font-size:11px;font-weight:600;}
.inp-row{display:flex;overflow:hidden;border:1px solid #8db2eb;border-radius:8px;background:var(--field-bg);transition:all .18s;min-height:42px;}
.inp-row:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,100,216,.10);}
.inp-row input{flex:1;border:none;outline:none;padding:10px 12px;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);background:transparent;}
.inp-row input::placeholder{color:#98a6bb;font-size:12px;font-weight:400;}
.inp-unit{background:#e4edf9;border-left:1px solid #8db2eb;padding:0 12px;font-family:var(--mono);font-size:11px;font-weight:600;color:#285baa;display:flex;align-items:center;min-width:56px;justify-content:center;}
.field-off .inp-row{opacity:.42;pointer-events:none;}
.qual-box{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px;}
.q-val{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--navy);text-align:center;margin-bottom:8px;}
input[type="range"]{width:100%;accent-color:var(--blue);cursor:pointer;}
.q-lbl{display:flex;justify-content:space-between;font-size:10px;font-family:var(--mono);color:var(--text-d);margin-top:4px;gap:10px;}
.btn-get,.btn-clr,.btn-xlsx,.btn-clr-t{border-radius:8px;font-family:var(--font);cursor:pointer;transition:all .18s;}
.btn-get{width:100%;padding:12px;background:var(--navy-3);color:#fff;border:none;font-size:13px;font-weight:800;letter-spacing:.3px;box-shadow:none;margin-bottom:8px;}
.btn-get:hover{background:var(--blue-dk);transform:none;box-shadow:none;}
.btn-clr{width:100%;padding:8px;background:#fff;color:var(--text);border:1px solid var(--line);font-size:12px;font-weight:700;}
.btn-clr:hover{border-color:var(--blue);color:var(--blue);background:#f8fbff;}
.cp-pill{margin-top:10px;border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:10px;text-align:center;border:1px solid;line-height:1.5;}
.cp-pill.loading{color:#285baa;border-color:#b7cdf4;background:#eff5ff;}
.cp-pill.ok{color:var(--ok);border-color:#aad6ba;background:#f2fbf5;}
.cp-pill.warn{color:var(--warn);border-color:#f1d29b;background:#fff8eb;}
.ref-card{margin-top:12px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc;padding:10px 12px;}
.ref-card-t{font-size:11px;font-weight:800;color:var(--navy);letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;}
.rc-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid #dbe4f1;gap:10px;}
.rc-row:last-child{border-bottom:none;}
.rc-row .rv{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--navy);}

/* TABLE COLUMN */
.tbl-col{display:flex;flex-direction:column;}
.tbl-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.tbl-title{font-size:12px;font-weight:800;color:var(--navy);letter-spacing:1px;text-transform:uppercase;}
.row-cnt{font-size:12px;color:var(--text-d);font-family:var(--mono);}
.tbl-acts{display:flex;gap:8px;}
.btn-xlsx{padding:9px 14px;background:var(--navy-3);color:#fff;border:none;font-size:12px;font-weight:700;box-shadow:none;}
.btn-xlsx:hover{background:var(--blue-dk);transform:none;}
.btn-clr-t{padding:9px 13px;background:#fff;color:var(--err);border:1px solid #efc0bc;font-size:12px;font-weight:700;}
.btn-clr-t:hover{background:#fff5f4;border-color:var(--err);}
.sbar{display:flex;align-items:center;justify-content:space-between;border-radius:8px;padding:10px 12px;margin-bottom:10px;background:#f7f9fc;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text-m);transition:all .3s;gap:8px;}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--text-d);flex-shrink:0;margin-right:8px;transition:all .3s;}
.sdot.ok{background:#00a651;box-shadow:0 0 6px rgba(0,166,81,.45);}
.sdot.err{background:#e5484d;box-shadow:0 0 6px rgba(229,72,77,.45);}
.phase-pill{font-family:var(--mono);font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid;letter-spacing:.6px;white-space:nowrap;}
.SUPERHEATED{color:#b65d00;border-color:#e2b57c;background:#fff6eb;}
.SUBCOOLED{color:#1f4fa3;border-color:#9fbae9;background:#eef4ff;}
.SUPERCRITICAL{color:#6f2dbd;border-color:#c9a3ef;background:#f7f0ff;}
.SATURATION{color:#0c7a43;border-color:#9cd1b0;background:#effaf3;}
.TWOPHASE{color:#106d8c;border-color:#9fd0df;background:#eefafd;}
.err-box{display:none;margin-bottom:10px;border-radius:8px;padding:10px 12px;background:#fff4f2;border:1px solid #efc0bc;color:var(--err);font-size:12px;font-weight:600;}
.err-box.show{display:block;}
.tbl-empty{padding:52px 24px;text-align:center;border:2px dashed #bfd0ea;border-radius:10px;color:var(--text-d);font-size:13px;line-height:1.8;background:#fafbfd;}
.tbl-empty strong{color:var(--navy);}
.tbl-wrap{overflow:auto;border-radius:10px;border:1px solid var(--line);background:#fff;flex:1;}
.dtbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;white-space:nowrap;}
.dtbl thead tr{background:var(--navy-3);}
.dtbl thead th{color:#fff;padding:9px 10px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.35px;position:sticky;top:0;z-index:10;}
.dtbl thead th:first-child{text-align:left;padding-left:12px;}
.tsg{font-size:9px;opacity:.78;display:block;font-weight:400;}
.dtbl tbody td{padding:8px 10px;border-bottom:1px solid #e7edf5;text-align:center;color:var(--text);font-size:12px;}
.dtbl tbody td:first-child{text-align:left;font-weight:700;color:var(--navy);padding-left:12px;}
.dtbl tbody tr:hover td{background:#f7faff;}
.dtbl .liq{color:#1f4fa3;}
.dtbl .vap{color:#946200;}
.dtbl .del-btn{background:transparent;border:none;color:var(--err);cursor:pointer;font-size:13px;padding:1px 5px;border-radius:4px;transition:all .15s;}
.dtbl .del-btn:hover{background:#fff0ef;}
.dtbl .pc{font-size:10px;font-family:var(--font);font-weight:700;}
.dtbl .pc.SUBCOOLED{color:#1f4fa3;}
.dtbl .pc.SUPERHEATED{color:#b65d00;}
.dtbl .pc.SUPERCRITICAL{color:#6f2dbd;}
.dtbl .pc.SATURATION{color:#0c7a43;}
.dtbl .pc.TWOPHASE{color:#106d8c;}
.sat-liq td{border-bottom:none;padding-bottom:2px;}
.sat-vap td{padding-top:2px;border-bottom:1px solid #dae6f5;background:#f9fbfe;}

/* CYCLE CALCULATOR STYLES */
.cyc-wrap{display:flex;flex-direction:column;gap:0;overflow-y:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px;}
.cyc-refbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #dbe4f1;}
.cyc-refbar .sec-lbl{margin-bottom:0;}
.cyc-status{font-family:var(--mono);font-size:11px;font-weight:700;padding:6px 14px;border-radius:999px;border:1px solid;transition:all .25s;color:#285baa;border-color:#b7cdf4;background:#eff5ff;}
.cyc-status.ok{color:var(--ok);border-color:#aad6ba;background:#f2fbf5;}
.cyc-status.err{color:var(--err);border-color:#efc0bc;background:#fff4f2;}
.cyc-sec{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px;background:#fff;}
.cyc-sec-hdr{width:100%;padding:11px 16px;background:#f5f8fc;border:none;font-family:var(--font);font-size:12px;font-weight:800;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;letter-spacing:.2px;transition:background .15s;}
.cyc-sec-hdr:hover{background:#eef4ff;}
.cyc-sec-hdr .arr{font-size:13px;transition:transform .2s;}
.cyc-sec-hdr.closed .arr{transform:rotate(-90deg);}
.cyc-body{padding:14px 16px;}
.cyc-body.closed{display:none;}
.cyc-grid{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start;}
.cyc-igrp{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin-bottom:10px;}
.cyc-igrp:last-child{margin-bottom:0;}
.cyc-igrp .sec-lbl{color:var(--text-m);}
.cyc-field{margin-bottom:8px;}
.cyc-field:last-child{margin-bottom:0;}
.cyc-lbl{font-size:10px;font-weight:800;color:var(--text-m);letter-spacing:.6px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.cyc-lbl .u{color:#285baa;font-family:var(--mono);font-size:10px;font-weight:600;}
.kpi-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.kpi{flex:1;min-width:90px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:center;}
.kpi-v{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--navy);line-height:1.2;}
.kpi-l{font-size:9px;font-weight:800;color:var(--text-d);text-transform:uppercase;letter-spacing:.8px;margin-top:3px;}
.state-tbl-wrap{overflow:auto;border-radius:8px;border:1px solid var(--line);background:#fff;}
.state-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;white-space:nowrap;}
.state-tbl thead tr{background:var(--navy-3);}
.state-tbl thead th{color:#fff;padding:8px 12px;font-size:10px;font-weight:600;letter-spacing:.3px;text-align:center;}
.state-tbl thead th:first-child{text-align:left;}
.state-tbl tbody td{padding:8px 12px;border-bottom:1px solid #e7edf5;text-align:center;font-size:12px;}
.state-tbl tbody td:first-child{text-align:left;color:var(--text-m);}
.state-tbl tbody tr:last-child td{border-bottom:none;}
.state-tbl tbody tr:hover td{background:#f7faff;}
.st-num{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--navy-3);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;margin-right:6px;}
.warn-box{margin-top:10px;padding:9px 12px;background:#fff8eb;border:1px solid #f1d29b;border-radius:8px;font-size:12px;font-weight:600;color:var(--warn);}
.ph-wrap{border:1px solid var(--line);border-radius:10px;background:#f8fbff;padding:8px;margin-top:12px;overflow:hidden;}
.ph-wrap canvas{display:block;max-width:100%;height:auto;}
.ph-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--text-d);}
.ph-leg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle;}
#cyc-detail tr{border-bottom:1px solid #e7edf5;}
#cyc-detail tr:last-child{border-bottom:none;}
#cyc-detail td:nth-child(1),#cyc-detail td:nth-child(3){padding:8px 12px;font-size:11px;color:var(--text-m);font-weight:600;background:#f7f9fc;}
#cyc-detail td:nth-child(2),#cyc-detail td:nth-child(4){padding:8px 12px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy);}
#cyc-detail tr:hover td{background:#f7faff;}

@media(max-width:1100px){
  .calc-grid{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .topbar{min-height:auto;align-items:flex-start;flex-direction:column;}
  .app-name{font-size:22px;}
  .tabs{overflow:auto;}
  .cyc-grid{grid-template-columns:1fr;}
  #cyc-detail tr{display:block;}
  #cyc-detail td{display:block;padding:4px 12px!important;}
}