/* Granite Calc — compact v3. Blue + orange, tight practical spacing. */

:root{
  --blue-900:#1E3A8A; --blue-700:#1D4ED8; --blue-600:#2563EB; --blue-50:#EFF4FF;
  --orange-500:#F97316; --orange-600:#EA580C;
  --green-600:#16A34A; --green-700:#15803D;
  --red-500:#EF4444; --red-600:#DC2626;
  --bg:#F1F5F9; --card:#FFFFFF; --ink:#0F172A; --muted:#64748B; --line:#E2E8F0;
  --grad-blue:linear-gradient(135deg,#1E3A8A 0%,#2563EB 100%);
  --grad-orange:linear-gradient(135deg,#F97316 0%,#EA580C 100%);
  --grad-green:linear-gradient(135deg,#16A34A 0%,#15803D 100%);
  --shadow:0 1px 3px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.06);
  font-size:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select{font:inherit;color:var(--ink);width:100%;min-height:42px;
  border:1.5px solid var(--line);border-radius:9px;padding:5px 10px;background:#fff;font-size:.95rem}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:3px solid rgba(37,99,235,.4);outline-offset:1px;border-color:var(--blue-600)}
[hidden]{display:none !important}

.screen{min-height:100dvh;display:flex;flex-direction:column}
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);
  padding:20px;margin:14px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:5px;text-align:left;font-weight:600;font-size:.88rem}

.btn{min-height:44px;border-radius:10px;border:none;font-size:.98rem;font-weight:700;
  padding:0 18px;color:#fff;box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-primary{background:var(--grad-blue)}
.btn-accent{background:var(--grad-orange)}
.btn-green{background:var(--grad-green)}
.btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626)}
.btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-link{background:none;border:none;color:var(--blue-600);text-decoration:underline;
  font-size:.9rem;min-height:40px}
.support-link{background:#F0FDF4;border:1.5px solid #BBF7D0;border-radius:10px;
  color:var(--green-700);font-size:.9rem;font-weight:700;min-height:44px;
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:4px}
.support-link:active{background:#DCFCE7}

/* ---------- auth ---------- */
.auth-screen{background:var(--grad-blue);justify-content:center;align-items:center;padding:20px}
.auth-card{background:var(--card);border-radius:18px;box-shadow:0 12px 36px rgba(15,23,42,.3);
  padding:28px 24px;width:100%;max-width:370px;display:flex;flex-direction:column;gap:14px;
  text-align:center;align-items:center}
.auth-logo{width:72px;height:72px;border-radius:16px}
.brand{font-size:1.5rem;font-weight:800;background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{color:var(--muted);font-size:.88rem;line-height:1.5}
.auth-card .field{width:100%}
.pin-input{text-align:center;letter-spacing:.45em;font-weight:700}
.pin-big{font-size:1.55rem;min-height:56px;max-width:220px}
.inline-error{color:var(--red-600);font-weight:700;font-size:.92rem;
  background:#FEF2F2;border:1.5px solid #FECACA;border-radius:9px;padding:9px 14px;width:100%}

/* ---------- topbar ---------- */
.topbar{background:var(--grad-blue);color:#fff;display:flex;align-items:center;gap:8px;
  padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top));
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.icon-btn{min-width:42px;min-height:42px;background:none;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:9px}
.icon-btn:active{background:rgba(255,255,255,.15)}
.topbar-cust-wrap{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.tb-name{font-weight:800;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-wa{font-size:.78rem;opacity:.85;white-space:nowrap}
.topbar.simple h2{font-size:1.05rem;font-weight:800}

/* ---------- stone strip ---------- */
.stone-strip{background:var(--card);box-shadow:var(--shadow);
  padding:8px 12px 6px;display:flex;flex-direction:column;gap:8px;
  position:sticky;top:0;z-index:10}
.strip-row{display:flex;gap:10px;align-items:center}
.stone-name{font-weight:700;min-height:38px;text-align:left !important}
.unit-info{font-size:.7rem;font-weight:700;color:var(--blue-700);background:var(--blue-50);
  border-radius:8px;padding:5px 10px;white-space:nowrap;line-height:1.45;
  display:flex;flex-direction:column;flex:none;text-align:left}
.mini{display:flex;flex-direction:column;gap:3px;font-size:.72rem;font-weight:700;
  color:var(--muted);flex:1}
.mini input{min-height:38px;font-size:.95rem;font-weight:700;text-align:center;padding:4px 6px}
.m-name{flex:2}
.rows-head{display:grid;grid-template-columns:58px 58px 106px 1fr 34px;
  gap:8px;font-weight:700;font-size:.7rem;color:var(--muted);
  border-top:1.5px solid var(--line);padding:6px 8px 0;align-items:center}
.rows-head span{text-align:center}
.head-ic{width:34px;height:32px;border:none;background:none;color:var(--red-500);
  display:flex;align-items:center;justify-content:center;border-radius:8px}
.head-ic:active{background:#FEF2F2}
.head-ic.restore{color:var(--green-600)}
.head-ic.restore:active{background:#F0FDF4}

/* ---------- rows ---------- */
.rows{flex:1;overflow-y:auto;padding:4px 12px 150px}
.row{display:grid;grid-template-columns:58px 58px 106px 1fr 34px;
  gap:8px;align-items:center;background:var(--card);border-radius:10px;
  box-shadow:var(--shadow);padding:6px 8px;margin-bottom:8px;position:relative}
.row input[data-f=h],.row input[data-f=w]{min-height:40px;text-align:center;
  font-size:1rem;font-weight:700;padding:3px 4px}

/* segmented qty stepper: [−][num][+] joined, zero gaps */
.qty{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:9px;
  overflow:hidden;height:40px;background:#fff}
.qty button{width:30px;border:none;background:var(--blue-50);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.qty button:active{background:#DBEAFE}
.qty input{width:44px;min-height:0;border:none;border-radius:0;text-align:center;
  padding:0 2px;font-weight:800;font-size:.95rem;
  border-left:1.5px solid var(--line);border-right:1.5px solid var(--line)}
.qty input:focus-visible{outline-offset:-3px}

.sub{text-align:center;font-weight:800;font-size:.98rem;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--blue-900)}
.row.deleted{opacity:.55;background:#F8FAFC}
.row.deleted input,.row.deleted .sub{text-decoration:line-through;color:var(--muted)}
.rows-empty{text-align:center;color:var(--muted);padding:36px 20px;font-size:.92rem}

/* three-dot row menu */
.dots{width:34px;height:40px;border:none;background:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;border-radius:9px}
.dots:active{background:var(--blue-50)}
.row-menu{position:fixed;z-index:45;
  background:var(--card);border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.25);
  border:1.5px solid var(--line);display:flex;flex-direction:column;min-width:160px;overflow:hidden}
.row-menu button{min-height:46px;border:none;background:none;text-align:left;
  padding:0 16px;font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:12px}
.row-menu button:active{background:var(--blue-50)}
.rm-del{color:var(--red-600)}
.rm-restore{color:var(--green-700)}

/* ---------- bottom bar (keyboard-aware) ---------- */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:15;
  background:var(--card);border-top:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 14px;padding-bottom:calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(15,23,42,.08);font-variant-numeric:tabular-nums;
  transition:transform .1s ease}
.bb-left{font-weight:700;font-size:.88rem;color:var(--muted);white-space:nowrap}
.bb-right{font-weight:800;font-size:1rem;color:var(--blue-900);white-space:nowrap}
.fab-mid{width:52px;height:52px;border-radius:50%;border:none;background:var(--grad-orange);
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 5px 14px rgba(234,88,12,.45);margin-top:-22px}
.fab-mid:active{transform:scale(.93)}
#ad-slot{min-height:0}

/* ---------- drawer ---------- */
.backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:30}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,330px);z-index:31;
  background:var(--card);transform:translateX(-105%);transition:transform .22s ease;
  display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  box-shadow:8px 0 24px rgba(15,23,42,.2)}
.drawer.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer-brand{display:flex;align-items:center;gap:12px;padding:4px 18px 12px;
  font-weight:800;font-size:1.1rem;color:var(--blue-900)}
.drawer-brand img{width:38px;height:38px;border-radius:10px}
.drawer-cust{display:flex;flex-direction:column;gap:10px;padding:4px 18px 14px;
  border-bottom:1.5px solid var(--line);margin-bottom:8px}
.drawer-cust label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;
  font-weight:600;color:var(--muted)}
.drawer-item{min-height:48px;text-align:left;padding:0 18px;margin:2px 10px;border-radius:10px;
  background:none;border:none;font-size:.98rem;font-weight:600;
  display:flex;align-items:center;gap:14px;color:var(--ink)}
.drawer-item:active{background:var(--blue-50)}
.d-accent{color:var(--orange-600);background:#FFF7ED}
.d-green{color:var(--green-700)}
.d-bottom{border-top:1.5px solid var(--line);border-radius:0;margin:4px 0 0;
  padding:12px 28px 0;color:var(--muted)}
.d-support{color:var(--green-700)}
.d-bottom-last{border-radius:0;margin:0;padding:6px 28px 0;color:var(--muted)}
.drawer-spacer{flex:1}
.stone-list{display:flex;flex-direction:column;margin:2px 0 4px}
.stone-list .drawer-item{padding-left:52px;font-weight:500;min-height:42px;font-size:.92rem}
.stone-list .drawer-item.active{background:var(--blue-50);font-weight:800;color:var(--blue-700);
  border-left:4px solid var(--orange-500)}

/* ---------- bill ---------- */
.quote-body{padding:14px;display:flex;flex-direction:column;gap:14px;
  max-width:560px;margin:0 auto;width:100%;padding-bottom:60px}
.quote-cust{font-weight:700;font-size:.92rem;background:var(--card);border-radius:10px;
  padding:11px 14px;box-shadow:var(--shadow);line-height:1.6}
.quote-table{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.qt-head,.quote-line{display:grid;grid-template-columns:1.4fr .95fr .75fr 1fr;gap:8px;
  align-items:center;padding:11px 14px;font-variant-numeric:tabular-nums}
.qt-head{background:var(--grad-blue);color:#fff;font-weight:700;font-size:.78rem}
.quote-line{font-size:.88rem;font-weight:600}
.quote-line:nth-child(odd){background:var(--blue-50)}
.quote-line span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote-line span:first-child{white-space:normal;overflow-wrap:anywhere;
  line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quote-line span:not(:first-child),.qt-head span:not(:first-child){text-align:right}
.quote-extras{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.quote-extras label{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:700;font-size:.92rem}
.quote-extras input{max-width:160px;text-align:right;font-variant-numeric:tabular-nums}
.grand-total{display:flex;justify-content:space-between;align-items:center;
  font-size:1.1rem;font-weight:800;background:var(--blue-50);color:var(--blue-900);
  border-radius:10px;padding:13px 14px;font-variant-numeric:tabular-nums}

/* ---------- modal, toast (TOP so keyboard never hides it), install ---------- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:40;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--card);border-radius:16px;box-shadow:0 16px 48px rgba(15,23,42,.35);
  padding:24px 20px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;
  text-align:center;align-items:center}
.modal-box .pin-big{margin:2px auto}
#pin-stage-1,#pin-stage-2{display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}
.modal-actions{display:flex;gap:12px;width:100%}
.modal-actions .btn{flex:1}
.pin-verified{color:var(--green-600);font-weight:800;font-size:1.02rem}
.toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));
  transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;
  font-size:.92rem;font-weight:600;z-index:70;max-width:92vw;text-align:center;
  box-shadow:0 8px 24px rgba(15,23,42,.4)}
.install-banner{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--grad-blue);
  color:#fff;display:flex;align-items:center;gap:12px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(15,23,42,.3)}
.install-banner span{flex:1;font-weight:600;font-size:.88rem}
.install-banner .btn{min-height:40px;white-space:nowrap}
#install-close{background:none;border:none;color:#fff;font-size:1.1rem;min-width:42px;min-height:42px}

@media (min-width:700px){
  .rows,.stone-strip{padding-left:26px;padding-right:26px}
  .rows-head,.row{grid-template-columns:76px 76px 116px 1fr 38px}
}