:root{
  --bg:#05090c; --panel:#0b151b; --panel2:#10232c; --ink:#eef8fc; --muted:#8aa5b1;
  --nav:#08151b; --navdark:#03090c; --blue:#00a7ff; --cyan:#58d9ff;
  --line:#1d414f; --danger:#ff5364; --warn:#ffbd3a; --ok:#38d39f; --purple:#9a7cff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 18% 0%,rgba(0,167,255,.10),transparent 30%),linear-gradient(180deg,#05090c 0%,#081219 50%,#05090c 100%);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:var(--cyan);text-decoration:none}
a:hover{color:#9beaff}
button,input,select,textarea{font:inherit}

.topbar{height:62px;background:#050b0f;border-bottom:1px solid #15333e;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:7px 18px;position:sticky;top:0;z-index:30;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.top-search form{margin:0}
.top-search input{width:min(430px,90%);padding:10px 13px;background:#09151b;color:var(--ink);border:1px solid #28505f;border-radius:7px;outline:none}
.top-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,167,255,.10)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:20px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand img{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important;object-fit:contain!important;display:block!important;background:#000;border:1px solid #1689b6;border-radius:50%;box-shadow:0 0 18px rgba(0,167,255,.22)}
.brand b{color:var(--blue);text-shadow:0 0 14px rgba(0,167,255,.35)}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#7edcff;margin-top:2px}
.userbox{justify-self:end;display:flex;align-items:center;gap:9px;font-size:13px;color:#d1e0e6}
.userbox a{color:#6edcff}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0d2631;border:1px solid #237a99;color:#fff;font-weight:800}

.mainnav{height:50px;background:#08151b;display:flex;padding-left:145px;border-bottom:1px solid #183d4a;position:sticky;top:62px;z-index:28}
.mainnav a{display:flex;align-items:center;color:#d6e4ea;padding:0 28px;font-weight:650;position:relative}
.mainnav a:hover,.mainnav a.active{background:linear-gradient(180deg,rgba(0,167,255,.22),rgba(0,167,255,.06));color:#fff}
.mainnav a.active:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--blue);box-shadow:0 0 14px rgba(0,167,255,.75)}

.flash{max-width:1240px;margin:12px auto 0;padding:11px 14px;border-radius:7px;border:1px solid var(--line);background:#0d1a21}
.flash.success{background:#0b241d;color:#78e8be;border-color:#1a684f}
.flash.error{background:#281016;color:#ff99a5;border-color:#71303b}
.flash.info{background:#0b1f2a;color:#8cdcff;border-color:#1a5268}

.page{max-width:1400px;margin:28px auto 110px;padding:0 22px}
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px}
.sidebar{position:sticky;top:132px;align-self:start;background:linear-gradient(180deg,#071217,#0b171d);border:1px solid #1c414e;border-radius:10px;padding:10px;box-shadow:0 15px 35px rgba(0,0,0,.24)}
.sidehead,.sidebtn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 13px;margin-bottom:5px;border-radius:6px}
.sidehead{background:#03090c;color:#80e1ff;font-weight:850;letter-spacing:.08em;font-size:11px}
.sidebtn{background:#0c1b22;color:#d8e7ed;border:1px solid #1a3b47}
.sidebtn:hover,.sidebtn.active{background:linear-gradient(90deg,#0878b8,#0b93d2);color:#fff;border-color:#28bcff;box-shadow:0 0 15px rgba(0,167,255,.18)}
.sidebtn span{color:#bcecff;background:rgba(255,255,255,.07);border-radius:999px;padding:1px 7px}
.side-sep{height:1px;background:#17323d;margin:22px 0}

.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.metric{background:linear-gradient(145deg,#10232c,#09151b);border:1px solid #224b59;padding:15px 16px;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.18);position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);box-shadow:0 0 14px rgba(0,167,255,.7)}
.metric small{color:#7ad8fa;font-weight:850;text-transform:uppercase;font-size:10px;letter-spacing:.07em}
.metric strong{display:block;font-size:29px;margin-top:4px;color:#fff}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar form,.toolbar .group{display:flex;gap:8px;flex-wrap:wrap}
.input,select,textarea{border:1px solid #28505f;border-radius:7px;padding:9px 11px;background:#09151b;color:var(--ink);outline:none}
.input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,167,255,.09)}
textarea{width:100%;min-height:110px;resize:vertical}
.btn{border:1px solid #2a5362;border-radius:7px;background:#0d1b22;padding:9px 13px;cursor:pointer;color:#dceaf0}
.btn:hover{background:#112833;border-color:#2992bd;color:#fff}
.btn.primary{background:linear-gradient(180deg,#08a3ed,#0878b8);border-color:#2bc3ff;color:#fff;box-shadow:0 0 18px rgba(0,167,255,.18)}
.btn.danger{background:#9b2e3b;border-color:#d64b5c;color:#fff}
.btn.small{padding:5px 8px;font-size:12px}

.card{background:linear-gradient(180deg,#0d1b22,#09151b);border:1px solid #1d414e;border-radius:10px;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.18)}
.card.pad{padding:18px}.card h2,.card h3{margin-top:0}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:900px;background:#0b171d}
thead{background:#102630}
th{font-size:11px;text-align:left;color:#8bdcff;padding:12px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #24505f}
td{padding:12px;border-top:1px solid #173642;font-size:13px;color:#dbe9ee}
tbody tr:hover td{background:#10242d}
.caseid{font-weight:850;color:#54d7ff}

.badge{display:inline-block;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:850;border:1px solid transparent}
.badge.new{background:#0d2936;color:#76dcff;border-color:#1b5a72}
.badge.design{background:#1a1838;color:#b6aaff;border-color:#4d438c}
.badge.wait{background:#32250f;color:#ffd36d;border-color:#70531f}
.badge.qc{background:#34151b;color:#ff97a3;border-color:#80333e}
.badge.revision{background:#34162a;color:#f2a0c4;border-color:#78305a}
.badge.done{background:#0d2d24;color:#78e7bb;border-color:#286950}
.badge.hold{background:#1a2429;color:#b2c0c6;border-color:#435861}
.badge.cancelled{background:#28191b;color:#c9999f;border-color:#5d363b}
.priority{font-size:10px;font-weight:850;padding:3px 6px;border-radius:4px;border:1px solid transparent}
.priority.rush{background:#34151a;color:#ff8996;border-color:#87303b}
.priority.standard{background:#12242d;color:#94c4d7;border-color:#315364}

.grid2{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.field label{display:block;font-size:10px;color:#78cbe9;font-weight:850;text-transform:uppercase;margin-bottom:4px;letter-spacing:.04em}
.field .value{font-weight:650;color:#f3f8fb}
.section{background:linear-gradient(180deg,#0d1b22,#09151b);border:1px solid #1d414e;border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 12px 28px rgba(0,0,0,.14)}
.section h3{font-size:14px;color:#8fe1ff;margin:0 0 12px;letter-spacing:.04em;text-transform:uppercase}
.notes{border-left:3px solid var(--blue);background:#0b171d;padding:11px 12px;white-space:pre-wrap;color:#d7e7ed}
.file-row,.message{display:flex;justify-content:space-between;gap:10px;padding:10px;border:1px solid #1a3945;border-radius:7px;margin-bottom:8px;background:#0b171d}
.message{display:block}.message.me{background:#0d2632;margin-left:28px;border-color:#205268}.message small{display:block;color:#7fa4b3;margin-bottom:5px}
.dropzone{border:2px dashed #275f74;border-radius:9px;padding:22px;text-align:center;background:#09161c;color:#a9c6d1}.dropzone.drag{background:#0d2935;border-color:var(--blue)}
.timeline{border-left:2px solid #224a59;margin-left:8px;padding-left:16px}.timeline-item{margin-bottom:16px}.timeline-item small{color:#7194a2}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select{width:100%}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 18%,rgba(0,167,255,.15),transparent 28%),linear-gradient(145deg,#03080b,#08151b 55%,#040a0e)}
.login-card{width:min(430px,96vw);background:linear-gradient(180deg,#0e1d24,#09151b);border:1px solid #245061;border-radius:14px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 36px rgba(0,167,255,.10)}
.login-card .brand{justify-content:center;margin-bottom:22px}.login-card input{width:100%;margin-bottom:12px}.login-card .btn{width:100%}
.dropbar{position:fixed;bottom:0;left:0;right:0;min-height:70px;display:grid;place-items:center;background:linear-gradient(180deg,#0b1a21,#050d11);border-top:1px solid #214959;color:#85b8cb;z-index:20;box-shadow:0 -8px 28px rgba(0,0,0,.24)}

@media(max-width:1000px){
 .metrics{grid-template-columns:repeat(3,1fr)}
 .mainnav{padding-left:15px}
 .layout{grid-template-columns:175px minmax(0,1fr)}
 .grid2{grid-template-columns:1fr}
 .form-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
 .topbar{grid-template-columns:1fr auto}
 .top-search{display:none}
 .brand{font-size:15px}
 .brand img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}
 .userbox span:not(.avatar){display:none}
 .mainnav{padding:0;overflow:auto}
 .mainnav a{padding:0 16px;white-space:nowrap}
 .page{padding:0 10px}
 .layout{display:block}
 .sidebar{position:static;display:flex;overflow:auto;gap:5px;margin-bottom:12px}
 .sidehead,.side-sep{display:none}
 .sidebtn{width:auto;min-width:max-content}
 .metrics{grid-template-columns:repeat(2,1fr)}
 .grid3,.form-grid{grid-template-columns:1fr}
 .form-grid .full{grid-column:auto}
}


/* QUICK CASE DROP / CREATE */
.dropbar{cursor:pointer}
.dropbar-inner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.dropbar-inner strong{color:#eaf8ff;letter-spacing:.12em;font-size:12px}
.drop-browse{border:0;background:transparent;color:#48ceff;text-decoration:underline;cursor:pointer;padding:0}
.dropbar.drag-active{background:linear-gradient(180deg,#0d2b37,#07151b);box-shadow:0 -8px 36px rgba(0,167,255,.18),inset 0 2px 0 #00a7ff}
.dropbar.drag-active .dropbar-inner strong{color:#63dcff}
.modal-open{overflow:hidden}
.quickcase-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:1000;display:grid;place-items:center;padding:24px}
.quickcase-backdrop[hidden]{display:none!important}
.quickcase-modal{width:min(980px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#0d1b22,#071217);border:1px solid #245264;border-radius:14px;box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 30px rgba(0,167,255,.12)}
.quickcase-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #1b3d4a;position:sticky;top:0;background:#0a171d;z-index:2}
.quickcase-head small{color:#58d9ff;letter-spacing:.16em;font-weight:800}.quickcase-head h2{margin:4px 0 0;color:#fff}
.quickcase-close{border:0;background:transparent;color:#9bc7d7;font-size:30px;cursor:pointer;line-height:1}
.quickcase-modal form{padding:18px}
.quickcase-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:15px}
.quickcase-file{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#09151b;border:1px solid #1d404d;border-radius:7px;padding:9px 10px}
.quickcase-file span{min-width:0}.quickcase-file strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quickcase-file small{display:block;color:#7f9daa;margin-top:2px}
.quickcase-file button{border:0;background:#132a34;color:#88dfff;border-radius:50%;width:26px;height:26px;cursor:pointer}
.quickcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quickcase-grid label{display:block;color:#75d4f5;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.quickcase-grid label input,.quickcase-grid label select,.quickcase-grid label textarea{width:100%;margin-top:5px;text-transform:none}
.quickcase-full{grid-column:1/-1}
.quickcase-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:16px}
#quickCaseStatus{margin-right:auto;color:#8fcce2;font-size:12px}
@media(max-width:760px){.quickcase-files,.quickcase-grid{grid-template-columns:1fr}.quickcase-full{grid-column:auto}}


/* 3SHAPE METADATA AUTO-FILL */
.quickcase-grid .autofilled{
  border-color:#25d0ff!important;
  background:linear-gradient(180deg,#0a2029,#0a1820)!important;
  box-shadow:0 0 0 2px rgba(0,167,255,.10),inset 3px 0 0 #00a7ff!important;
}
.meta-reading{color:#71d9ff}
.meta-success{color:#62e6b4;font-weight:700}
.meta-warning{color:#ffd26b}
.meta-source{color:#7597a5;font-size:11px;margin-left:5px}