/* =====================================================================
   AURUM · Back-office console design system
   Dense, dark, gold-accented operations UI.
   ===================================================================== */

:root{
  --a-bg:#0a0a09;
  --a-surface:#111110;
  --a-surface-2:#171715;
  --a-surface-3:#1f1e1b;
  --a-elevated:#232220;
  --a-line:rgba(255,250,235,.075);
  --a-line-strong:rgba(201,162,39,.22);

  --a-text:#ece7dc;
  --a-text-dim:#a8a196;
  --a-text-faint:#6e6a62;

  --a-gold:#c9a227;
  --a-gold-soft:rgba(201,162,39,.13);
  --a-gold-line:rgba(201,162,39,.34);

  --a-ok:#57a86a;
  --a-ok-soft:rgba(87,168,106,.13);
  --a-warn:#d69f3c;
  --a-warn-soft:rgba(214,159,60,.13);
  --a-danger:#cf5f45;
  --a-danger-soft:rgba(207,95,69,.13);
  --a-info:#5b8fbd;
  --a-info-soft:rgba(91,143,189,.13);
  --a-purple:#8a72c4;

  --a-radius:10px;
  --a-radius-sm:6px;
  --a-shadow:0 12px 34px rgba(0,0,0,.5);

  --sidebar-w:262px;
  --topbar-h:64px;

  --font-display:"Cormorant Garamond",Georgia,serif;
  --font:"Inter","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--a-bg);color:var(--a-text);
  font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;}
p{margin:0 0 .9em;}
::selection{background:var(--a-gold);color:#0a0a09;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#2b2a26;border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:#3d3a33;}

/* ================= Shell ================= */
.shell{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--a-surface);
  border-right:1px solid var(--a-line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:60;
}
.sidebar__brand{
  height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 20px;
  border-bottom:1px solid var(--a-line);flex:0 0 var(--topbar-h);
}
.sidebar__mark{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid var(--a-gold);
  color:var(--a-gold);font-family:var(--font-display);font-size:17px;font-weight:600;
}
.sidebar__name{font-family:var(--font-display);font-size:20px;letter-spacing:.28em;line-height:1;}
.sidebar__role{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--a-gold);margin-top:4px;}
.sidebar__nav{flex:1;overflow-y:auto;padding:14px 12px 26px;}
.sidebar__group{margin-bottom:6px;}
.sidebar__label{
  padding:16px 12px 8px;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a-text-faint);
}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--a-radius-sm);
  color:var(--a-text-dim);font-size:13.2px;transition:.2s;margin-bottom:1px;position:relative;
}
.nav-item:hover{background:var(--a-surface-2);color:var(--a-text);}
.nav-item.is-active{background:var(--a-gold-soft);color:var(--a-gold);font-weight:600;}
.nav-item.is-active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:2px;background:var(--a-gold);border-radius:2px;}
.nav-item__icon{width:17px;text-align:center;font-size:14px;opacity:.9;flex:0 0 17px;}
.nav-item__badge{
  margin-left:auto;min-width:19px;height:18px;padding:0 6px;border-radius:20px;background:var(--a-danger);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;
}
.nav-item__badge--gold{background:var(--a-gold);color:#0a0a09;}
.sidebar__footer{padding:12px;border-top:1px solid var(--a-line);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  height:var(--topbar-h);flex:0 0 var(--topbar-h);background:rgba(17,17,16,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--a-line);display:flex;align-items:center;gap:18px;padding:0 24px;
  position:sticky;top:0;z-index:50;
}
.topbar__title{font-size:16px;font-weight:600;letter-spacing:-.01em;}
.topbar__sub{font-size:11.5px;color:var(--a-text-faint);}
.topbar__spacer{flex:1;}
.topbar__search{
  display:flex;align-items:center;gap:9px;background:var(--a-surface-2);border:1px solid var(--a-line);
  border-radius:20px;padding:7px 16px;width:300px;transition:.25s;
}
.topbar__search:focus-within{border-color:var(--a-gold-line);width:340px;}
.topbar__search input{flex:1;background:none;border:0;font-size:13px;}
.topbar__search input:focus{outline:0;}
.topbar__search svg,.topbar__search .ico{color:var(--a-text-faint);}

.icon-btn{
  width:36px;height:36px;border-radius:var(--a-radius-sm);display:grid;place-items:center;
  color:var(--a-text-dim);border:1px solid transparent;transition:.2s;position:relative;font-size:15px;
}
.icon-btn:hover{background:var(--a-surface-2);color:var(--a-gold);border-color:var(--a-line);}
.icon-btn__dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--a-danger);border:2px solid var(--a-surface);}

.user-chip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:22px;border:1px solid var(--a-line);transition:.2s;}
.user-chip:hover{border-color:var(--a-gold-line);background:var(--a-surface-2);}
.user-chip__name{font-size:12.5px;font-weight:600;line-height:1.2;}
.user-chip__role{font-size:10px;color:var(--a-text-faint);}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:grid;place-items:center;
  background:linear-gradient(140deg,#c9a227,#8a6f1c);color:#0a0a09;font-size:11.5px;font-weight:700;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar--lg{width:46px;height:46px;flex:0 0 46px;font-size:15px;}
.avatar--sm{width:26px;height:26px;flex:0 0 26px;font-size:9.5px;}

.content{flex:1;padding:26px;min-width:0;}
.content--flush{padding:0;}

/* ================= Page header ================= */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
.page-head__title{font-family:var(--font-display);font-size:29px;font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.page-head__desc{font-size:13px;color:var(--a-text-faint);margin-top:5px;}
.page-head__actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}

.crumbs{font-size:11px;color:var(--a-text-faint);margin-bottom:7px;letter-spacing:.06em;}
.crumbs a:hover{color:var(--a-gold);}

/* ================= Buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 17px;
  border-radius:var(--a-radius-sm);border:1px solid var(--a-line);background:var(--a-surface-2);
  color:var(--a-text);font-size:13px;font-weight:500;transition:.2s;white-space:nowrap;
}
.btn:hover{background:var(--a-surface-3);border-color:var(--a-line-strong);}
.btn--primary{background:var(--a-gold);border-color:var(--a-gold);color:#0a0a09;font-weight:600;}
.btn--primary:hover{background:#dcb436;border-color:#dcb436;transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,162,39,.28);}
.btn--ghost{background:transparent;}
.btn--danger{background:var(--a-danger-soft);border-color:rgba(207,95,69,.3);color:var(--a-danger);}
.btn--danger:hover{background:var(--a-danger);color:#fff;}
.btn--ok{background:var(--a-ok-soft);border-color:rgba(87,168,106,.3);color:var(--a-ok);}
.btn--ok:hover{background:var(--a-ok);color:#fff;}
.btn--sm{padding:6px 12px;font-size:12px;}
.btn--xs{padding:4px 9px;font-size:11px;border-radius:5px;}
.btn--lg{padding:13px 26px;font-size:14.5px;}
.btn--block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;}

.btn-group{display:inline-flex;border:1px solid var(--a-line);border-radius:var(--a-radius-sm);overflow:hidden;}
.btn-group a,.btn-group button{padding:7px 14px;font-size:12.5px;color:var(--a-text-dim);border-right:1px solid var(--a-line);transition:.2s;}
.btn-group a:last-child,.btn-group button:last-child{border-right:0;}
.btn-group .is-active{background:var(--a-gold);color:#0a0a09;font-weight:600;}
.btn-group a:not(.is-active):hover{background:var(--a-surface-2);color:var(--a-text);}

/* ================= Cards & panels ================= */
.card{background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;}
.card__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--a-line);
}
.card__title{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px;}
.card__hint{font-size:11.5px;color:var(--a-text-faint);}
.card__body{padding:20px;}
.card__body--flush{padding:0;}
.card__foot{padding:14px 20px;border-top:1px solid var(--a-line);background:var(--a-surface-2);}

.grid{display:grid;gap:16px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-5{grid-template-columns:repeat(5,1fr);}
.g-6{grid-template-columns:repeat(6,1fr);}
.g-2-1{grid-template-columns:2fr 1fr;}
.g-1-2{grid-template-columns:1fr 2fr;}
.g-3-2{grid-template-columns:3fr 2fr;}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}

.flex{display:flex;} .col{flex-direction:column;}
.between{justify-content:space-between;} .center{align-items:center;}
.wrap{flex-wrap:wrap;} .grow{flex:1;} .ml-auto{margin-left:auto;}
.gap-4{gap:4px;} .gap-6{gap:6px;} .gap-8{gap:8px;} .gap-10{gap:10px;}
.gap-12{gap:12px;} .gap-16{gap:16px;} .gap-20{gap:20px;} .gap-24{gap:24px;}
.mb-0{margin-bottom:0;} .mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;} .mb-20{margin-bottom:20px;} .mb-24{margin-bottom:24px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.text-right{text-align:right;} .text-center{text-align:center;}
.nowrap{white-space:nowrap;}

/* ================= KPI tiles ================= */
.kpi{
  background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-radius);
  padding:18px 20px;position:relative;overflow:hidden;transition:.25s;
}
.kpi:hover{border-color:var(--a-line-strong);transform:translateY(-2px);}
.kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-accent,var(--a-gold));opacity:.7;}
.kpi--ok{--kpi-accent:var(--a-ok);}
.kpi--warn{--kpi-accent:var(--a-warn);}
.kpi--danger{--kpi-accent:var(--a-danger);}
.kpi--info{--kpi-accent:var(--a-info);}
.kpi--purple{--kpi-accent:var(--a-purple);}
.kpi__label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a-text-faint);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.kpi__value{font-family:var(--font-display);font-size:31px;font-weight:600;line-height:1.05;letter-spacing:-.01em;}
.kpi__value small{font-size:16px;color:var(--a-text-faint);font-family:var(--font);}
.kpi__foot{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--a-text-faint);}
.kpi__spark{margin-top:12px;height:34px;}

.delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;}
.delta--up{color:var(--a-ok);}
.delta--down{color:var(--a-danger);}
.delta--flat{color:var(--a-text-faint);}

/* ================= Tables ================= */
.table-wrap{overflow-x:auto;}
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th{
  text-align:left;padding:11px 14px;background:var(--a-surface-2);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-faint);
  border-bottom:1px solid var(--a-line);white-space:nowrap;position:sticky;top:0;z-index:2;
}
.table td{padding:12px 14px;border-bottom:1px solid var(--a-line);vertical-align:middle;}
.table tbody tr{transition:background .15s;}
.table tbody tr:hover{background:var(--a-surface-2);}
.table tbody tr:last-child td{border-bottom:0;}
.table--compact td{padding:8px 12px;}
.table--compact th{padding:8px 12px;}
.table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:12.5px;}
.table .actions{display:flex;gap:5px;justify-content:flex-end;}
.table a.strong{color:var(--a-gold);font-weight:600;}
.table a.strong:hover{text-decoration:underline;}
.row-click{cursor:pointer;}

.tstrip{width:100%;border-collapse:collapse;font-size:12.5px;}
.tstrip td{padding:9px 0;border-bottom:1px dashed var(--a-line);}
.tstrip tr:last-child td{border-bottom:0;}

/* ================= Badges & chips ================= */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.badge--ok{background:var(--a-ok-soft);color:var(--a-ok);}
.badge--warn{background:var(--a-warn-soft);color:var(--a-warn);}
.badge--danger{background:var(--a-danger-soft);color:var(--a-danger);}
.badge--info{background:var(--a-info-soft);color:var(--a-info);}
.badge--gold{background:var(--a-gold-soft);color:var(--a-gold);}
.badge--muted{background:rgba(168,161,150,.12);color:var(--a-text-dim);}
.badge__dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:6px;
  background:var(--a-surface-2);border:1px solid var(--a-line);font-size:11.5px;color:var(--a-text-dim);
}
.chip--gold{background:var(--a-gold-soft);border-color:var(--a-gold-line);color:var(--a-gold);}

.tier{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:3px;}
.tier--guest{background:rgba(168,161,150,.14);color:var(--a-text-dim);}
.tier--silver{background:rgba(190,196,204,.15);color:#c3c9d1;}
.tier--gold{background:var(--a-gold-soft);color:var(--a-gold);}
.tier--platinum{background:rgba(138,114,196,.15);color:var(--a-purple);}
.tier--founder{background:linear-gradient(90deg,rgba(201,162,39,.3),rgba(138,114,196,.25));color:#e8d08a;}

/* ================= Forms ================= */
.form-row{display:grid;gap:14px;margin-bottom:14px;}
.fld{margin-bottom:15px;}
.fld__label{display:block;font-size:11.5px;font-weight:600;color:var(--a-text-dim);margin-bottom:6px;}
.fld__label .req{color:var(--a-danger);}
.inp,.sel,.txt{
  width:100%;padding:9px 12px;background:var(--a-surface-2);border:1px solid var(--a-line);
  border-radius:var(--a-radius-sm);font-size:13.2px;transition:.2s;
}
.inp:focus,.sel:focus,.txt:focus{outline:0;border-color:var(--a-gold-line);background:var(--a-surface-3);box-shadow:0 0 0 3px rgba(201,162,39,.1);}
.inp::placeholder,.txt::placeholder{color:var(--a-text-faint);}
.inp[readonly]{opacity:.65;}
.txt{min-height:92px;resize:vertical;line-height:1.65;}
.sel{
  appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8a196' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:9px;
}
.fld__hint{font-size:11px;color:var(--a-text-faint);margin-top:5px;}
.inp-group{display:flex;align-items:stretch;}
.inp-group__addon{
  display:grid;place-items:center;padding:0 12px;background:var(--a-surface-3);border:1px solid var(--a-line);
  font-size:12.5px;color:var(--a-text-faint);
}
.inp-group__addon:first-child{border-right:0;border-radius:var(--a-radius-sm) 0 0 var(--a-radius-sm);}
.inp-group__addon:last-child{border-left:0;border-radius:0 var(--a-radius-sm) var(--a-radius-sm) 0;}
.inp-group .inp:not(:first-child){border-radius:0 var(--a-radius-sm) var(--a-radius-sm) 0;}
.inp-group .inp:not(:last-child){border-radius:var(--a-radius-sm) 0 0 var(--a-radius-sm);}

.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;}
.switch input{position:absolute;opacity:0;pointer-events:none;}
.switch__track{width:38px;height:21px;border-radius:20px;background:var(--a-surface-3);border:1px solid var(--a-line);transition:.25s;position:relative;flex:0 0 38px;}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--a-text-faint);transition:.25s;}
.switch input:checked + .switch__track{background:var(--a-gold-soft);border-color:var(--a-gold-line);}
.switch input:checked + .switch__track::after{left:19px;background:var(--a-gold);}

.checkbox{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;}
.checkbox input{width:16px;height:16px;accent-color:var(--a-gold);}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 16px;
  background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-radius);margin-bottom:18px;
}
.filter-bar .fld{margin-bottom:0;min-width:150px;}

/* ================= Tabs ================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--a-line);margin-bottom:20px;overflow-x:auto;}
.tab{
  padding:10px 18px;font-size:13px;color:var(--a-text-dim);border-bottom:2px solid transparent;
  transition:.2s;white-space:nowrap;
}
.tab:hover{color:var(--a-text);}
.tab.is-active{color:var(--a-gold);border-bottom-color:var(--a-gold);font-weight:600;}

/* ================= Charts ================= */
.chart{width:100%;}
.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:11.5px;color:var(--a-text-dim);}
.chart-legend__item{display:flex;align-items:center;gap:7px;}
.chart-legend__swatch{width:9px;height:9px;border-radius:2px;}
.chart-tip{
  position:fixed;z-index:200;pointer-events:none;background:var(--a-elevated);border:1px solid var(--a-line-strong);
  border-radius:6px;padding:8px 11px;font-size:12px;box-shadow:var(--a-shadow);white-space:nowrap;opacity:0;transition:opacity .12s;
}
.chart-tip.is-on{opacity:1;}
.chart-tip b{color:var(--a-gold);}

.bar-row{display:flex;align-items:center;gap:12px;padding:8px 0;}
.bar-row__label{width:150px;flex:0 0 150px;font-size:12.5px;color:var(--a-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-row__track{flex:1;height:8px;background:var(--a-surface-3);border-radius:20px;overflow:hidden;}
.bar-row__fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#8a6f1c,#c9a227);transition:width .8s var(--ease);}
.bar-row__val{width:82px;flex:0 0 82px;text-align:right;font-size:12.5px;font-family:var(--font-mono);}

.progress{height:6px;border-radius:20px;background:var(--a-surface-3);overflow:hidden;}
.progress__fill{height:100%;border-radius:20px;background:var(--a-gold);transition:width .6s var(--ease);}
.progress__fill--ok{background:var(--a-ok);}
.progress__fill--warn{background:var(--a-warn);}
.progress__fill--danger{background:var(--a-danger);}

/* ================= POS terminal ================= */
.pos{display:grid;grid-template-columns:1fr 400px;height:calc(100vh - var(--topbar-h));overflow:hidden;}
.pos__catalog{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--a-line);}
.pos__cats{display:flex;gap:8px;padding:14px 18px;overflow-x:auto;border-bottom:1px solid var(--a-line);background:var(--a-surface);}
.pos-cat{
  padding:8px 16px;border-radius:20px;border:1px solid var(--a-line);font-size:12.5px;
  color:var(--a-text-dim);white-space:nowrap;transition:.2s;
}
.pos-cat:hover{border-color:var(--a-gold-line);color:var(--a-text);}
.pos-cat.is-active{background:var(--a-gold);border-color:var(--a-gold);color:#0a0a09;font-weight:600;}
.pos__items{flex:1;overflow-y:auto;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;align-content:start;}
.pos-tile{
  background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-radius);
  overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;text-align:left;
}
.pos-tile:hover{border-color:var(--a-gold-line);transform:translateY(-2px);box-shadow:var(--a-shadow);}
.pos-tile:active{transform:scale(.98);}
.pos-tile__img{aspect-ratio:16/10;overflow:hidden;background:var(--a-surface-3);}
.pos-tile__img img{width:100%;height:100%;object-fit:cover;}
.pos-tile__body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:5px;}
.pos-tile__name{font-size:12.8px;font-weight:600;line-height:1.3;}
.pos-tile__price{font-size:13px;color:var(--a-gold);font-weight:600;margin-top:auto;}
.pos-tile.is-86{opacity:.42;pointer-events:none;}
.pos-tile__86{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,9,.7);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-danger);}

.pos__ticket{display:flex;flex-direction:column;background:var(--a-surface);min-width:0;}
.pos__ticket-head{padding:14px 18px;border-bottom:1px solid var(--a-line);}
.pos__lines{flex:1;overflow-y:auto;padding:8px 18px;}
.pos-line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--a-line);}
.pos-line__name{font-size:13px;font-weight:500;}
.pos-line__meta{font-size:11px;color:var(--a-text-faint);margin-top:3px;}
.pos-line__price{font-size:13px;font-family:var(--font-mono);text-align:right;}
.pos-line__ctrl{display:flex;align-items:center;gap:6px;margin-top:6px;}
.pos-line__ctrl button{width:24px;height:24px;border:1px solid var(--a-line);border-radius:4px;font-size:13px;color:var(--a-text-dim);}
.pos-line__ctrl button:hover{border-color:var(--a-gold-line);color:var(--a-gold);}
.pos__totals{padding:14px 18px;border-top:1px solid var(--a-line);background:var(--a-surface-2);}
.pos__totals-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--a-text-dim);padding:3px 0;}
.pos__totals-row--grand{font-family:var(--font-display);font-size:24px;color:var(--a-gold);padding-top:10px;margin-top:8px;border-top:1px solid var(--a-line);}
.pos__actions{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid var(--a-line);}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.keypad button{
  padding:18px 0;background:var(--a-surface-2);border:1px solid var(--a-line);border-radius:var(--a-radius-sm);
  font-size:19px;font-weight:600;transition:.15s;
}
.keypad button:hover{background:var(--a-surface-3);border-color:var(--a-gold-line);}
.keypad button:active{transform:scale(.96);}

/* ================= KDS ================= */
.kds{padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;align-content:start;}
.ticket{
  background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-radius);
  display:flex;flex-direction:column;overflow:hidden;border-top:3px solid var(--tk,var(--a-info));
}
.ticket--new{--tk:var(--a-info);}
.ticket--warn{--tk:var(--a-warn);}
.ticket--late{--tk:var(--a-danger);animation:tickPulse 1.6s infinite;}
@keyframes tickPulse{0%,100%{box-shadow:0 0 0 0 rgba(207,95,69,.4);}50%{box-shadow:0 0 0 8px rgba(207,95,69,0);}}
.ticket__head{padding:11px 14px;border-bottom:1px solid var(--a-line);display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ticket__no{font-size:14px;font-weight:700;}
.ticket__timer{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--tk);}
.ticket__meta{padding:7px 14px;font-size:11.5px;color:var(--a-text-faint);border-bottom:1px solid var(--a-line);display:flex;gap:12px;flex-wrap:wrap;}
.ticket__items{padding:10px 14px;flex:1;}
.ticket__item{display:flex;gap:10px;padding:6px 0;font-size:13.5px;align-items:flex-start;}
.ticket__item.is-done{opacity:.4;text-decoration:line-through;}
.ticket__qty{min-width:24px;font-weight:700;color:var(--a-gold);}
.ticket__note{font-size:11.5px;color:var(--a-warn);padding-left:34px;}
.ticket__foot{padding:10px 14px;border-top:1px solid var(--a-line);display:flex;gap:8px;}

/* ================= Floor plan ================= */
.floor{
  position:relative;background:
    linear-gradient(rgba(255,250,235,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,250,235,.028) 1px,transparent 1px);
  background-size:40px 40px;border:1px solid var(--a-line);border-radius:var(--a-radius);
  min-height:560px;overflow:auto;
}
.tbl{
  position:absolute;display:grid;place-items:center;border:2px solid var(--tb,var(--a-line));
  background:var(--a-surface-2);color:var(--a-text);cursor:pointer;transition:.2s;text-align:center;
}
.tbl:hover{transform:scale(1.05);z-index:5;box-shadow:var(--a-shadow);}
.tbl--round{border-radius:50%;}
.tbl--available{--tb:rgba(87,168,106,.55);}
.tbl--occupied{--tb:rgba(201,162,39,.7);background:var(--a-gold-soft);}
.tbl--reserved{--tb:rgba(91,143,189,.6);background:var(--a-info-soft);}
.tbl--dirty{--tb:rgba(214,159,60,.6);background:var(--a-warn-soft);}
.tbl--blocked{--tb:rgba(207,95,69,.5);background:var(--a-danger-soft);opacity:.6;}
.tbl__no{font-size:14px;font-weight:700;line-height:1;}
.tbl__seats{font-size:10px;color:var(--a-text-faint);margin-top:2px;}
.tbl__timer{font-size:9.5px;color:var(--a-gold);font-family:var(--font-mono);}

/* ================= Modal / drawer ================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(6,6,5,.8);backdrop-filter:blur(3px);z-index:1000;
  display:none;place-items:center;padding:26px;
}
.modal-backdrop.is-open{display:grid;}
.modal{
  background:var(--a-surface);border:1px solid var(--a-line-strong);border-radius:var(--a-radius);
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--a-shadow);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.modal--lg{max-width:860px;}
.modal--xl{max-width:1100px;}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--a-line);}
.modal__title{font-size:16px;font-weight:600;}
.modal__body{padding:20px;overflow-y:auto;}
.modal__foot{padding:14px 20px;border-top:1px solid var(--a-line);display:flex;justify-content:flex-end;gap:9px;background:var(--a-surface-2);}
.modal__close{font-size:22px;color:var(--a-text-faint);line-height:1;}
.modal__close:hover{color:var(--a-danger);}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);background:var(--a-surface);
  border-left:1px solid var(--a-line-strong);z-index:1000;transform:translateX(100%);
  transition:transform .32s var(--ease);display:flex;flex-direction:column;box-shadow:var(--a-shadow);
}
.drawer.is-open{transform:none;}

/* ================= Alerts / flash ================= */
.flash-stack{position:fixed;top:18px;right:18px;z-index:1500;display:flex;flex-direction:column;gap:9px;max-width:380px;}
.flash{
  display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:var(--a-radius-sm);
  background:var(--a-elevated);border:1px solid var(--a-line);box-shadow:var(--a-shadow);font-size:13px;
  animation:flashIn .32s var(--ease);
}
@keyframes flashIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
.flash__icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 20px;font-size:11px;font-weight:700;}
.flash--success{border-left:3px solid var(--a-ok);} .flash--success .flash__icon{background:var(--a-ok-soft);color:var(--a-ok);}
.flash--error{border-left:3px solid var(--a-danger);} .flash--error .flash__icon{background:var(--a-danger-soft);color:var(--a-danger);}
.flash--info{border-left:3px solid var(--a-gold);} .flash--info .flash__icon{background:var(--a-gold-soft);color:var(--a-gold);}
.flash__close{margin-left:auto;color:var(--a-text-faint);font-size:17px;line-height:1;}

.alert{padding:13px 16px;border-radius:var(--a-radius-sm);background:var(--a-surface-2);border:1px solid var(--a-line);font-size:13px;margin-bottom:16px;display:flex;gap:11px;align-items:flex-start;}
.alert--ok{border-left:3px solid var(--a-ok);}
.alert--warn{border-left:3px solid var(--a-warn);}
.alert--danger{border-left:3px solid var(--a-danger);}
.alert--info{border-left:3px solid var(--a-gold);}

/* ================= Empty / loading ================= */
.empty{text-align:center;padding:56px 20px;color:var(--a-text-faint);}
.empty__icon{font-size:38px;opacity:.35;margin-bottom:12px;}
.empty__title{font-size:15px;color:var(--a-text-dim);margin-bottom:6px;}

.skeleton{background:linear-gradient(90deg,var(--a-surface-2) 25%,var(--a-surface-3) 50%,var(--a-surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:5px;}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

.spinner{width:18px;height:18px;border:2px solid var(--a-line);border-top-color:var(--a-gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ================= Pager ================= */
.pager{display:flex;gap:5px;justify-content:center;padding:16px 0;}
.pager__btn{
  min-width:33px;height:33px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--a-line);
  border-radius:var(--a-radius-sm);font-size:12.5px;color:var(--a-text-dim);transition:.2s;
}
.pager__btn:hover{border-color:var(--a-gold-line);color:var(--a-gold);}
.pager__btn.is-current{background:var(--a-gold);border-color:var(--a-gold);color:#0a0a09;font-weight:600;}
.pager__btn.is-disabled{opacity:.35;pointer-events:none;}

/* ================= Login ================= */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.login-art{position:relative;overflow:hidden;}
.login-art img{width:100%;height:100%;object-fit:cover;}
.login-art__scrim{position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,10,9,.55),rgba(10,10,9,.92));}
.login-art__copy{position:absolute;bottom:60px;left:56px;right:56px;}
.login-form{display:grid;place-items:center;padding:40px;}
.login-card{width:100%;max-width:400px;}

/* ================= Timeline ================= */
.timeline{position:relative;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:1px;background:var(--a-line);}
.timeline__item{position:relative;padding-bottom:18px;}
.timeline__item::before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--a-surface);border:2px solid var(--a-gold);}
.timeline__time{font-size:11px;color:var(--a-text-faint);}
.timeline__title{font-size:13px;font-weight:500;}

/* ================= Receipt ================= */
.receipt{
  background:#fdfbf6;color:#1a1a1a;font-family:var(--font-mono);font-size:12px;
  padding:22px;max-width:340px;margin:0 auto;line-height:1.55;
}
.receipt h3{font-family:var(--font-display);font-size:22px;letter-spacing:.3em;text-align:center;margin-bottom:4px;}
.receipt__rule{border-top:1px dashed #b9b3a5;margin:10px 0;}
.receipt__row{display:flex;justify-content:space-between;gap:12px;}
.receipt__center{text-align:center;}

/* ================= Utilities ================= */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.dim{color:var(--a-text-dim);} .faint{color:var(--a-text-faint);}
.gold{color:var(--a-gold);} .ok{color:var(--a-ok);} .warn{color:var(--a-warn);} .danger{color:var(--a-danger);}
.f11{font-size:11px;} .f12{font-size:12px;} .f13{font-size:13px;} .f15{font-size:15px;} .f18{font-size:18px;}
.fw6{font-weight:600;} .fw7{font-weight:700;}
.serif{font-family:var(--font-display);}
.upper{text-transform:uppercase;letter-spacing:.12em;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hidden{display:none !important;}
.scroll-y{overflow-y:auto;}
.divider{height:1px;background:var(--a-line);margin:16px 0;}

/* ================= Responsive ================= */
@media(max-width:1400px){ .g-6{grid-template-columns:repeat(3,1fr);} }
@media(max-width:1200px){
  .g-4,.g-5{grid-template-columns:repeat(2,1fr);}
  .g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr;}
  .pos{grid-template-columns:1fr 340px;}
}
@media(max-width:1024px){
  .sidebar{position:fixed;transform:translateX(-100%);transition:transform .3s var(--ease);}
  .sidebar.is-open{transform:none;}
  .g-3{grid-template-columns:repeat(2,1fr);}
  .login-wrap{grid-template-columns:1fr;}
  .login-art{display:none;}
  .topbar__search{width:190px;}
}
@media(max-width:720px){
  .g-2,.g-3,.g-4,.g-5,.g-6{grid-template-columns:1fr;}
  .content{padding:16px;}
  .pos{grid-template-columns:1fr;height:auto;}
  .topbar__search{display:none;}
  .page-head__title{font-size:23px;}
}

@media print{
  .sidebar,.topbar,.page-head__actions,.filter-bar,.pager,.btn{display:none !important;}
  body{background:#fff;color:#000;}
  .card{border-color:#ddd;background:#fff;}
  .content{padding:0;}
}