:root{
  --bg:#f7fbff;
  --surface:#ffffff;
  --surface-soft:#f7fafc;
  --line:#dde7ef;
  --line-strong:#c8d8e5;
  --text:#15202b;
  --muted:#718091;

  --orange:#ff6900;
  --orange-soft:#fff1e7;

  --sky:#dff3ff;
  --sky-strong:#8fd3ff;
  --sky-deep:#4aaee8;

  --gold:#c99a2e;
  --gold-soft:#fff7dd;

  --sea:#006fb9;
  --sea-deep:#005b99;
  --sea-soft:#e8f4fb;

  --yellow:#f4c542;
  --yellow-soft:#fff6cb;

  --red:#d94a4a;
  --red-deep:#bb3737;
  --red-soft:#ffeded;

  --green:#2f9d68;
  --green-soft:#e8f7ef;

  --shadow:0 14px 38px rgba(38,78,110,.10);
  --shadow-soft:0 8px 22px rgba(38,78,110,.07);
  --radius:20px;
}

*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 88% -10%, rgba(143,211,255,.62), transparent 28%),
    radial-gradient(circle at -8% 28%, rgba(255,105,0,.09), transparent 24%),
    linear-gradient(180deg,#fbfdff 0%,#f3f9fd 46%,#f8fbfd 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid rgba(0,111,185,.22);outline-offset:2px}

#app{max-width:760px;margin:auto;min-height:100vh;padding-bottom:92px}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px 11px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(200,216,229,.8);
}

.brand{display:flex;gap:11px;align-items:center}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--orange),#ff8e3b);
  color:white;font-weight:900;letter-spacing:-1px;
  border:1px solid rgba(201,154,46,.42);
  box-shadow:0 8px 20px rgba(255,105,0,.18);
}
.brand-title{font-size:17px;font-weight:900;line-height:1.05;letter-spacing:-.35px;color:#17212b}
.brand-title span{color:var(--orange)}
.brand-sub{font-size:10.5px;color:var(--muted);margin-top:4px}

.icon-btn{
  width:42px;height:42px;border:1px solid #bfd8e8;border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#edf8ff);
  color:var(--sea);font-size:25px;display:grid;place-items:center;
  box-shadow:var(--shadow-soft);
}

.view{padding:14px 14px 24px}

.hero{
  border:1px solid rgba(201,154,46,.32);
  border-radius:26px;
  padding:19px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(223,243,255,.82)),
    linear-gradient(180deg,#ffffff,#eef8ff);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:"";
  position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--orange),var(--gold),var(--sky-deep));
}
.hero:after{
  content:"986";
  position:absolute;right:-7px;bottom:-28px;
  font-size:112px;font-weight:950;letter-spacing:-12px;
  color:rgba(0,111,185,.045);pointer-events:none;
}
.eyebrow{
  display:flex;align-items:center;gap:7px;
  color:var(--sea-deep);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(47,157,104,.10);
}
.hero h1{font-size:27px;line-height:1.03;margin:14px 0 7px;letter-spacing:-1px;color:#13212d}
.hero p{margin:0;color:#647789;font-size:13px;line-height:1.5;max-width:500px}
.preview-chip{
  display:inline-flex;margin-top:15px;padding:7px 10px;border-radius:999px;
  font-size:10.5px;font-weight:850;letter-spacing:.45px;
  color:#865d07;background:var(--gold-soft);border:1px solid rgba(201,154,46,.34);
}

.section-head{display:flex;align-items:end;justify-content:space-between;margin:22px 2px 10px}
.section-head h2{font-size:15px;margin:0;letter-spacing:-.2px;color:#192631}
.section-head span{font-size:11px;color:var(--muted)}

.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-card{
  padding:15px;border-radius:18px;background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  min-height:98px;box-shadow:var(--shadow-soft);
}
.stat-card:nth-child(1){border-top:3px solid var(--gold)}
.stat-card:nth-child(2){border-top:3px solid var(--sea)}
.stat-card:nth-child(3){border-top:3px solid var(--green)}
.stat-card:nth-child(4){border-top:3px solid var(--orange)}
.stat-top{display:flex;justify-content:space-between;align-items:center}
.stat-icon{font-size:18px;color:var(--sea)}
.stat-value{font-size:28px;font-weight:950;letter-spacing:-1.2px;margin-top:9px;color:#14212c}
.stat-label{color:var(--muted);font-size:11.5px;margin-top:3px}

.badge{padding:5px 7px;border-radius:999px;font-size:9.5px;font-weight:900;border:1px solid transparent}
.badge.orange{background:var(--orange-soft);color:#be4c00;border-color:#ffd0ad}
.badge.green{background:var(--green-soft);color:#23784f;border-color:#ccebdc}
.badge.amber{background:var(--gold-soft);color:#876108;border-color:#edd796}
.badge.red{background:var(--red-soft);color:#a93434;border-color:#f2caca}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f7fbfe);
  border-radius:16px;padding:12px 6px;min-height:82px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--shadow-soft);
}
.quick:active{transform:translateY(1px)}
.quick .qicon{font-size:20px;color:var(--orange)}
.quick span:last-child{font-size:10.5px;color:#526273;text-align:center;font-weight:750}

.card-list{display:flex;flex-direction:column;gap:9px}
.case-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.97);
  border-radius:18px;padding:14px;
  display:flex;gap:11px;align-items:flex-start;
  box-shadow:var(--shadow-soft);
}
.case-card:hover{border-color:#bfd8e8}
.case-main{min-width:0;flex:1}
.case-so{font-size:11px;color:var(--sea);font-weight:900;letter-spacing:.25px}
.case-name{font-size:14px;font-weight:850;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#18242f}
.case-meta{font-size:11px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.status{
  flex:none;padding:6px 8px;border-radius:10px;
  font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.3px;
  border:1px solid transparent;
}
.status.pending-customer{background:var(--yellow-soft);color:#7b5b00;border-color:#efd975}
.status.pending-parts{background:var(--sea-soft);color:var(--sea-deep);border-color:#c8e5f5}
.status.appointment{background:var(--orange-soft);color:#b84c00;border-color:#ffd4b6}
.status.parts-arrived{background:var(--green-soft);color:#24794f;border-color:#caeadb}
.status.closed{background:#edf1f4;color:#66727e;border-color:#dce4ea}
.status.cancelled{background:var(--red-soft);color:#a93333;border-color:#f4cccc}

.search-wrap{position:relative;margin-bottom:12px}
.search{
  width:100%;height:50px;border-radius:16px;border:1px solid var(--line-strong);
  background:#fff;color:var(--text);padding:0 14px 0 40px;outline:none;
  box-shadow:var(--shadow-soft);
}
.search::placeholder{color:#99a6b1}
.search:focus{border-color:var(--sea);box-shadow:0 0 0 3px rgba(0,111,185,.10)}
.search-icon{position:absolute;left:14px;top:14px;color:var(--sea)}

.filters{display:flex;gap:7px;overflow:auto;padding-bottom:10px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{
  white-space:nowrap;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:8px 11px;
  font-size:10.5px;color:#5d6b78;font-weight:750;
}
.filter.active{
  background:var(--sea);border-color:var(--sea);color:white;font-weight:850;
  box-shadow:0 6px 16px rgba(0,111,185,.16);
}

.page-title{font-size:24px;font-weight:950;letter-spacing:-.8px;margin:5px 0 3px;color:#14212c}
.page-sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.notice{
  border:1px dashed rgba(201,154,46,.44);
  background:linear-gradient(90deg,#fffaf0,#f6fbff);
  color:#7b6740;border-radius:14px;padding:11px 12px;
  font-size:10.5px;line-height:1.5;margin-bottom:14px;
}
.empty{padding:36px 18px;text-align:center;color:var(--muted);font-size:12px}

.part-row,.apt-row{
  padding:14px;border-radius:17px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-soft);
}
.part-row+.part-row,.apt-row+.apt-row{margin-top:9px}
.row-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.row-title{font-size:13px;font-weight:850;color:#18242f}
.row-sub{font-size:10.5px;color:var(--muted);margin-top:4px}
.progress{height:7px;background:#e9f0f5;border-radius:99px;overflow:hidden;margin-top:11px}
.progress>i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--sea),var(--sky-deep),var(--gold));
  border-radius:99px;
}

.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  z-index:30;width:min(760px,100%);height:76px;
  padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  display:grid;grid-template-columns:repeat(4,1fr);gap:3px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(38,78,110,.08);
}
.nav-item{
  border:0;background:transparent;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#7d8b98;font-size:9px;font-weight:750;
}
.nav-icon{font-size:20px;line-height:1}
.nav-item.active{color:var(--orange);background:var(--orange-soft)}

.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,34,46,.34);backdrop-filter:blur(3px)}
.sheet-card{
  position:relative;width:100%;max-width:760px;margin:auto;background:#fff;
  border:1px solid #d5e1ea;border-bottom:0;border-radius:26px 26px 0 0;
  max-height:88vh;overflow:auto;
  padding:9px 17px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -22px 70px rgba(38,78,110,.18);
}
.sheet-handle{width:44px;height:4px;background:#cad7e1;border-radius:99px;margin:2px auto 17px}
.detail-title{font-size:20px;font-weight:950;letter-spacing:-.5px;color:#15222e}
.detail-so{color:var(--sea);font-size:11px;font-weight:900;margin-top:5px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0}
.detail-field{padding:12px;background:#f7fafc;border:1px solid #e0e8ee;border-radius:14px}
.detail-field label{display:block;font-size:9px;color:#81909c;text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.detail-field div{font-size:12px;font-weight:750;line-height:1.4;color:#22313d}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.action{
  border:1px solid #d8e2e9;background:#fff;border-radius:14px;
  padding:12px 9px;font-size:11px;font-weight:900;
  box-shadow:0 4px 12px rgba(38,78,110,.06);
}
.action.primary,.action.sea{
  background:var(--sea);border-color:var(--sea);color:#fff;
}
.action.primary:hover,.action.sea:hover{background:var(--sea-deep)}
.action.warning{
  background:var(--yellow);border-color:#e2b631;color:#493800;
}
.action.warning:hover{background:#e9bb32}
.action.danger{
  background:var(--red);border-color:var(--red);color:#fff;
}
.action.danger:hover{background:var(--red-deep)}
.action.sky{
  background:var(--sky);border-color:#bce4fb;color:#205d82;
}
.action.gold{
  background:var(--gold-soft);border-color:#ead28c;color:#765708;
}

.toast{
  position:fixed;left:50%;bottom:94px;transform:translateX(-50%);
  z-index:100;background:#173145;color:#fff;border:1px solid #294a61;
  padding:10px 13px;border-radius:12px;font-size:11px;
  box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center;
}
.hidden{display:none!important}

/* PHONE LAYOUT — primary mobile target */
@media (max-width:979px){
  #app{max-width:760px}
  .view{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

/* DESKTOP LAYOUT — dedicated workspace, not stretched mobile */
@media (min-width:980px){
  body{background:
    radial-gradient(circle at 86% -12%,rgba(143,211,255,.50),transparent 27%),
    radial-gradient(circle at 14% 110%,rgba(255,105,0,.07),transparent 28%),
    linear-gradient(180deg,#f8fcff,#f2f8fc);
  }

  #app{max-width:none;margin:0;min-height:100vh;padding:0 0 0 232px}

  .topbar{
    position:sticky;top:0;
    padding:17px 30px;
    min-height:76px;
    border-bottom:1px solid var(--line);
  }

  .brand-mark{width:44px;height:44px}
  .brand-title{font-size:18px}
  .brand-sub{font-size:11px}

  .view{
    padding:28px 34px 56px;
    width:100%;
    max-width:1540px;
    margin:0 auto;
  }

  .bottom-nav{
    left:0;top:0;bottom:0;transform:none;
    width:232px;height:100vh;
    padding:92px 14px 18px;
    display:flex;flex-direction:column;gap:7px;
    background:rgba(255,255,255,.97);
    border-top:0;border-right:1px solid var(--line);
    box-shadow:10px 0 30px rgba(38,78,110,.06);
  }
  .bottom-nav:before{
    content:"ESC KT OPS";
    position:absolute;left:18px;top:24px;
    color:#173145;font-size:14px;font-weight:950;letter-spacing:.7px;
    border-left:4px solid var(--orange);padding-left:10px;
  }
  .nav-item{
    width:100%;height:48px;
    flex-direction:row;justify-content:flex-start;
    padding:0 14px;gap:12px;
    font-size:11px;border:1px solid transparent;
  }
  .nav-icon{font-size:19px;width:24px;text-align:center}
  .nav-item.active{
    color:var(--sea-deep);
    background:linear-gradient(90deg,var(--sky),#f6fbff);
    border-color:#cde8f7;
    box-shadow:none;
  }

  .hero{padding:27px 28px;border-radius:28px}
  .hero h1{font-size:36px;max-width:760px}
  .hero p{font-size:14px;max-width:720px}
  .hero:after{font-size:160px;right:20px;bottom:-48px}

  .section-head{margin-top:28px}
  .section-head h2{font-size:16px}

  .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .stat-card{min-height:112px;padding:17px}
  .stat-value{font-size:32px}

  .quick-grid{grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}
  .quick{min-height:92px;flex-direction:row;gap:10px;padding:16px}
  .quick .qicon{font-size:23px}
  .quick span:last-child{font-size:11px;font-weight:800}

  .card-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .case-card{min-height:94px;padding:16px}

  .search-wrap{max-width:760px}
  .filters{padding-bottom:14px}

  .part-row,.apt-row{padding:16px}

  .sheet{align-items:stretch;justify-content:flex-end}
  .sheet-card{
    width:520px;max-width:520px;height:100vh;max-height:100vh;margin:0;
    border-radius:26px 0 0 26px;border-bottom:1px solid #d5e1ea;
    padding:18px 22px 30px;
    box-shadow:-24px 0 70px rgba(38,78,110,.18);
  }
  .sheet-handle{display:none}
  .detail-title{font-size:23px;margin-top:6px}
  .detail-grid{gap:11px}
  .actions{grid-template-columns:1fr 1fr;gap:10px}

  .toast{bottom:28px}
}

@media (min-width:1400px){
  .view{padding-left:46px;padding-right:46px}
  .card-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}