*{box-sizing:border-box}
:root{
  --bg:#f3f4f6;--card:#fff;--text:#20242b;--muted:#7a8390;--line:#e8eaee;
  --purple:#512b62;--purple2:#27263f;--pink:#c53159;--green:#249b67;
  --orange:#e48b2d;--red:#c93c51;--shadow:0 12px 30px rgba(29,35,45,.07)
}
html,body{margin:0;padding:0}
body{
  min-height:100vh;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
.patron-app{min-height:100vh}
.patron-top{
  position:sticky;top:0;z-index:60;height:66px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#fff;background:linear-gradient(110deg,#1d2032 0%,#4c2a5d 65%,#6c3155 100%);
  box-shadow:0 5px 20px rgba(21,23,37,.18)
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{max-width:62px;max-height:42px;width:auto;height:auto;object-fit:contain}
.brand-title{min-width:0}
.brand-title b{display:block;font-size:13px;letter-spacing:.5px}
.brand-title span{display:block;margin-top:2px;font-size:9px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:7px}
.live-pill,.top-btn{
  min-height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.09);color:#fff;padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:9px;font-weight:900
}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#45d68e;box-shadow:0 0 0 5px rgba(69,214,142,.11)}
.top-btn.icon{width:34px;padding:0}
.shell{width:min(1180px,100%);margin:0 auto;padding:14px 14px 34px}
.welcome{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin:2px 0 12px
}
.welcome h1{margin:0;font-size:24px;letter-spacing:-.6px}
.welcome p{margin:5px 0 0;color:var(--muted);font-size:11px}
.periods{display:flex;gap:6px;flex-wrap:wrap}
.periods a{
  padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);
  color:#717a86;font-size:9px;font-weight:900
}
.periods a.active{background:#2d3045;color:#fff;border-color:#2d3045}
.kpi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px
}
.kpi{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:17px;padding:14px;box-shadow:var(--shadow)
}
.kpi:after{
  content:'';position:absolute;width:90px;height:90px;border-radius:50%;
  right:-40px;top:-46px;background:rgba(81,43,98,.05)
}
.kpi .k-label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7a8390;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.35px}
.kpi .ico{
  width:27px;height:27px;border-radius:9px;display:grid;place-items:center;
  background:#f5f2f7;color:#713a79;font-size:13px
}
.kpi b{display:block;margin-top:10px;font-size:24px;line-height:1;letter-spacing:-.65px}
.kpi small{display:block;margin-top:7px;color:#9098a2;font-size:9px}
.kpi.alert b{color:var(--red)}
.main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:12px;margin-top:12px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:var(--shadow)
}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h2{margin:0;font-size:14px}
.card-head p{margin:4px 0 0;color:#8a929d;font-size:9px}
.card-head a{font-size:9px;font-weight:900;color:#9f2b52}
.stack{display:flex;flex-direction:column;gap:8px}
.open-order{
  border:1px solid #eceef1;border-radius:13px;padding:11px;
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center
}
.order-meta{min-width:0}
.order-topline{display:flex;align-items:center;gap:7px;min-width:0}
.mode{
  flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#f1eef4;color:#693873;
  font-size:8px;font-weight:900;text-transform:uppercase
}
.order-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-meta small{display:block;margin-top:5px;color:#8d959f;font-size:8px}
.order-price{text-align:right}
.order-price b{display:block;font-size:14px}
.order-price small{display:block;margin-top:3px;color:#999;font-size:8px}
.pay-list{display:flex;flex-direction:column;gap:7px}
.pay-row{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center}
.pay-row span{font-size:9px;color:#69727e;font-weight:800}
.pay-bar{height:7px;border-radius:999px;background:#f0f1f3;overflow:hidden}
.pay-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4e2a61,#c2355e)}
.pay-row b{font-size:10px}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.clean-table{width:100%;border-collapse:collapse}
.clean-table th,.clean-table td{padding:9px 7px;border-bottom:1px solid #f0f1f3;text-align:left;font-size:9px}
.clean-table th{color:#89919b;font-size:8px;text-transform:uppercase;letter-spacing:.3px}
.clean-table tr:last-child td{border-bottom:0}
.clean-table td:last-child,.clean-table th:last-child{text-align:right}
.stock-row,.product-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid #f0f1f3
}
.stock-row:last-child,.product-row:last-child{border-bottom:0}
.stock-row b,.product-row b{font-size:10px}
.stock-row small,.product-row small{display:block;margin-top:3px;color:#9098a1;font-size:8px}
.stock-badge{padding:5px 7px;border-radius:8px;background:#fff0f2;color:#b3374e;font-size:8px;font-weight:900}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quick{
  min-height:70px;padding:11px;border-radius:13px;border:1px solid #e8eaf0;background:#fafbfc;
  display:flex;flex-direction:column;justify-content:space-between
}
.quick i{font-style:normal;font-size:17px}
.quick b{font-size:10px}
.quick small{font-size:8px;color:#8d959f}
.empty{
  padding:18px 12px;border-radius:12px;background:#f7f8f9;color:#8b939d;
  text-align:center;font-size:9px
}
.footer{text-align:center;color:#a0a6ae;font-size:8px;letter-spacing:1px;text-transform:uppercase;margin-top:20px}

/* login */
.login-page{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background:
    radial-gradient(circle at 80% 10%,rgba(180,57,92,.24),transparent 35%),
    radial-gradient(circle at 12% 90%,rgba(91,52,116,.28),transparent 32%),
    #161827
}
.login-box{width:min(100%,390px)}
.login-logo{text-align:center;margin-bottom:16px}
.login-logo img{max-width:145px;max-height:90px;width:auto;height:auto;object-fit:contain}
.login-logo h1{margin:8px 0 0;color:#fff;font-size:20px}
.login-logo p{margin:5px 0 0;color:rgba(255,255,255,.54);font-size:10px}
.login-card{
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.97);
  border-radius:20px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.28)
}
.login-card h2{margin:0;font-size:18px}
.login-card .sub{margin:5px 0 14px;color:#858d98;font-size:10px}
.field{margin-top:9px}
.field label{display:block;margin-bottom:5px;color:#626b77;font-size:9px;font-weight:900}
.field input{
  width:100%;height:47px;border:1px solid #dfe2e6;border-radius:12px;background:#fff;
  padding:0 13px;outline:0;font-size:14px
}
.field input:focus{border-color:#8d5b95;box-shadow:0 0 0 3px rgba(81,43,98,.08)}
.login-submit{
  width:100%;height:48px;border:0;border-radius:12px;margin-top:13px;
  background:linear-gradient(100deg,#342741,#a92f58);color:#fff;font-size:11px;font-weight:900
}
.login-error{padding:10px 11px;border-radius:10px;background:#fff0f2;color:#a33248;font-size:9px;margin-bottom:10px}
.login-note{margin-top:11px;color:#8b939e;font-size:8px;line-height:1.45}

/* install toast */
.install-bar{
  display:none;position:fixed;z-index:100;left:50%;bottom:14px;transform:translateX(-50%);
  width:min(calc(100% - 24px),480px);padding:10px;border-radius:14px;background:#202332;color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.22);align-items:center;justify-content:space-between;gap:10px
}
.install-bar.show{display:flex}
.install-bar span{font-size:9px;line-height:1.4}
.install-bar button{border:0;border-radius:9px;background:#fff;color:#252839;padding:8px 10px;font-size:9px;font-weight:900}

@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main-grid,.split-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .patron-top{height:60px;padding:0 11px}
  .brand img{max-width:52px;max-height:36px}
  .brand-title b{font-size:11px}
  .brand-title span{max-width:145px}
  .live-pill{display:none}
  .shell{padding:11px 10px 28px}
  .welcome{align-items:flex-start;flex-direction:column}
  .welcome h1{font-size:20px}
  .periods{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .periods a{text-align:center}
  .kpi-grid{gap:8px}
  .kpi{padding:12px;border-radius:15px}
  .kpi b{font-size:20px}
  .main-grid{margin-top:8px;gap:8px}
  .card{padding:12px;border-radius:15px}
  .split-grid{margin-top:8px;gap:8px}
}