:root{
  color-scheme:light;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-muted:#f4f6f7;
  --panel:var(--surface);
  --panel-2:var(--surface-muted);
  --muted-bg:#f8fafb;
  --text:#22282c;
  --fg:var(--text);
  --muted:#69757d;
  --border:#e1e6e9;
  --border-strong:#c8d1d6;
  --accent:#00a3ad;
  --accent-dark:#00838b;
  --primary:var(--accent);
  --primary-fg:#ffffff;
  --primary-soft:#edf7f8;
  --primary-glow:var(--accent-dark);
  --nav-bg:#252c31;
  --nav-bg-strong:#1f2529;
  --nav-text:#c9d3d8;
  --nav-muted:#7f919a;
  --code-bg:#292f33;
  --code-head:#20262a;
  --code-text:#eef6f8;
  --danger:#d4483e;
  --success:#18a058;
  --warning:#f08b26;
  --radius:4px;
  --shadow-sm:none;
  --shadow-md:0 14px 36px rgba(15,23,42,.14);
  --shadow-lg:0 20px 52px rgba(15,23,42,.16);
  --gradient-primary:linear-gradient(135deg,var(--accent),var(--accent-dark));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.9em;background:#edf7f8;border:1px solid #ccebef;color:#006d75;padding:1px 5px;border-radius:4px}

/* ------ Layout ------ */
.app{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh;min-width:0}
.sidebar{background:var(--nav-bg);border-right:1px solid #1a2024;display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding:24px 18px;position:sticky;top:0}
.sidebar .brand{border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;padding:0 8px 18px}
.sidebar .brand.restaurant-brand{align-items:flex-start;background:transparent;justify-content:flex-start;min-height:0}
.sidebar .brand .brand-logo{display:block;height:auto;max-height:82px;max-width:218px;object-fit:contain;object-position:left center;width:100%}
.sidebar .brand .logo{align-items:center;background:var(--accent);border-radius:5px;color:#fff;display:flex;font-size:14px;font-weight:800;height:32px;justify-content:center;width:32px}
.sidebar .brand .name{color:#fff;font-size:18px;font-weight:700;letter-spacing:0}
.sidebar .brand .sub{color:var(--nav-muted);font-size:13px;margin-top:1px}
.restaurant-badge{align-items:center;align-self:flex-start;background:var(--accent);border-radius:999px;color:#fff!important;display:inline-flex;font-size:12px!important;font-weight:800;gap:6px;letter-spacing:0;margin-top:2px;padding:4px 12px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:18px 0}
.sidebar nav a{align-items:center;border-radius:6px;color:var(--nav-text);display:flex;font-size:14px;font-weight:700;gap:10px;letter-spacing:0;padding:8px;text-decoration:none;transition:background .15s,color .15s}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar nav a.active{background:var(--accent);color:#fff}
.sidebar nav a.active::before{content:none}
.sidebar nav a svg{flex-shrink:0;height:16px;stroke-width:2;width:16px}
.sidebar-api{border-top:1px solid rgba(255,255,255,.08);color:var(--nav-muted);font-size:12px;letter-spacing:0;margin-top:auto;overflow:hidden;padding:14px 8px 0;text-overflow:ellipsis;white-space:nowrap}

.main{background:var(--bg);min-width:0}
.main > header{align-items:center;background:rgba(37,44,49,.96);backdrop-filter:blur(12px);border-bottom:1px solid #1a2024;display:flex;gap:20px;justify-content:space-between;min-height:64px;padding:14px 28px;position:sticky;top:0;z-index:10}
.main > header .title-block{min-width:0}
.main > header h1{color:#fff;font-size:24px;font-weight:700;letter-spacing:0;line-height:1.2;margin:0}
.main > header p{color:var(--nav-muted);font-size:13.5px;margin:4px 0 0}
.main > .body{margin:0 auto;max-width:1180px;padding:34px 28px 80px;width:100%}
.user-menu{flex-shrink:0;position:relative}
.user-trigger{align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#eef6f8;cursor:pointer;display:flex;font:inherit;gap:10px;max-width:280px;min-height:38px;min-width:210px;padding:6px 9px;text-align:left;transition:background .15s,border-color .15s}
.user-trigger:hover,.user-trigger[aria-expanded="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.avatar{align-items:center;background:var(--accent);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:12px;font-weight:800;height:30px;justify-content:center;width:30px}
.user-copy{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.user-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-email{color:#b9c6d3;font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chevron{color:var(--nav-muted);font-size:11px;line-height:1;margin-left:auto}
.user-dropdown{background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-md);overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);width:240px;z-index:20}
.dropdown-user{border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px}
.dropdown-user strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-user span{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-item{align-items:center;background:transparent;border:0;color:var(--fg);cursor:pointer;display:flex;font:inherit;font-size:13px;gap:8px;padding:10px 12px;text-align:left;width:100%}
.dropdown-item:hover{background:var(--surface-muted)}
.dropdown-item svg{flex-shrink:0;height:14px;width:14px}

/* ------ Cards ------ */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card .head{background:#f8fafb;border-bottom:1px solid var(--border);padding:14px 16px}
.card .head h3{font-size:17px;font-weight:700;letter-spacing:0;line-height:1.2;margin:0}
.card .head .row-flex{align-items:center;display:flex;gap:8px;justify-content:space-between}
.card .body{padding:18px}
.card.hover-lift{transition:border-color .15s,box-shadow .15s}
.card.hover-lift:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}

/* ------ Forms ------ */
.row{display:grid;gap:14px}
.row.cols-2{grid-template-columns:1fr 1fr}
.row.cols-3{grid-template-columns:repeat(3,1fr)}
.row.split{grid-template-columns:340px 1fr}
.field{display:block}
.field > label{color:#475467;display:block;font-size:12px;font-weight:800;letter-spacing:0;margin-bottom:6px;text-transform:uppercase}
input,select,textarea{background:#fff;border:1px solid var(--border);border-radius:5px;color:var(--fg);font:inherit;min-height:38px;min-width:0;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:none;outline:2px solid rgba(0,163,173,.16);outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{font-family:inherit;min-height:86px;resize:vertical}
.ip-entry{align-items:center;display:flex;gap:8px}
.ip-entry input,.ip-entry select{flex:1 1 auto}
.ip-entry .btn{flex:0 0 auto;min-width:74px}
.ip-tags{background:#f8fafb;border:1px dashed var(--border);border-radius:5px;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:34px;padding:8px}
.ip-tags-empty{color:var(--muted);font-size:12px;line-height:1.6}
.ip-tag{align-items:center;background:#edf7f8;background:color-mix(in srgb,var(--accent) 10%,#fff);border:1px solid #ccebef;border-color:color-mix(in srgb,var(--accent) 24%,#fff);border-radius:999px;color:var(--accent-dark);display:inline-flex;font-size:12px;font-weight:800;gap:6px;max-width:100%;padding:3px 7px}
.ip-tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-tag button{align-items:center;background:transparent;border:0;border-radius:50%;color:var(--accent-dark);cursor:pointer;display:inline-flex;font:inherit;font-size:13px;height:18px;justify-content:center;line-height:1;padding:0;width:18px}
.ip-tag button:hover{background:rgba(0,163,173,.12);background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ------ Buttons ------ */
.btn{align-items:center;background:var(--accent);border:1px solid var(--accent);border-radius:6px;color:var(--primary-fg);cursor:pointer;display:inline-flex;font:inherit;font-size:13px;font-weight:800;gap:6px;justify-content:center;line-height:1.2;min-height:34px;padding:7px 10px;text-decoration:none;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:none;filter:none;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:not-allowed;opacity:.55;transform:none}
.btn svg{flex-shrink:0;height:14px;width:14px}
.btn.outline{background:#fff;border-color:var(--border);color:#243238}
.btn.outline:hover{background:#f8fafb;border-color:var(--border-strong);color:#243238}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-muted);border-color:var(--surface-muted);color:var(--fg)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.sm{font-size:12px;min-height:30px;padding:6px 10px}
.btn.sm svg{height:13px;width:13px}
.btn.icon{height:32px;padding:6px;width:32px}
.btn.icon.xs{height:28px;padding:4px;width:28px}
.btn-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px}
.btn-row.right{justify-content:flex-end}
.btn-row.between{justify-content:space-between}

/* ------ Misc ------ */
.badge{align-items:center;background:var(--surface-muted);border:1px solid var(--border);border-radius:999px;color:var(--fg);display:inline-flex;font-size:11px;font-weight:700;padding:2px 8px}
.badge.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.badge.success{background:#e8f7ee;border-color:#bce8ca;color:#11733a}
.badge.muted{background:var(--surface-muted);color:var(--muted)}
.kv{background:#f8fafb;border:1px solid var(--border);border-radius:5px;display:flex;gap:8px;justify-content:space-between;padding:9px 12px}
.kv .k{color:var(--muted);font-size:12px}
.kv .v{font-size:13px;font-weight:700;text-align:right}
.muted{color:var(--muted)}
.hidden{display:none!important}
.divider{background:var(--border);height:1px;margin:12px 0}
.error{color:var(--danger);font-size:13px;font-weight:700}
.empty{color:var(--muted);font-size:13px;padding:8px 0}

/* ------ Settings ------ */
.settings-edit-grid{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 300px}
.password-panel{background:#f8fafb;border:1px solid var(--border);border-radius:5px;padding:14px}
.password-panel h4{font-size:13px;font-weight:800;margin:0 0 4px}
.password-panel p{font-size:12px;line-height:1.45;margin:0 0 14px}
.password-panel .field + .field{margin-top:12px}

/* ------ Toast ------ */
.toast{animation:slide .25s ease;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-md);font-size:13px;max-width:340px;padding:10px 14px;position:fixed;right:20px;top:20px;z-index:9999}
.toast.success{border-left:4px solid var(--success)}
.toast.error{border-left:4px solid var(--danger)}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ------ Auth pages ------ */
.center{align-items:center;background:var(--nav-bg);display:flex;justify-content:center;min-height:100vh;padding:28px 16px}
.auth-card{background:var(--panel);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:6px;box-shadow:0 28px 80px rgba(15,23,42,.28);max-width:420px;padding:22px;width:100%}
.auth-card.wide{max-width:720px}
.auth-brand{align-items:flex-start;background:var(--nav-bg-strong);border-bottom:1px solid #1a2024;border-radius:2px 2px 0 0;display:flex;flex-direction:column;gap:10px;margin:-22px -22px 18px;padding:18px 22px}
.auth-brand .brand-logo{display:block;height:auto;max-height:70px;max-width:220px;object-fit:contain;object-position:left center;width:100%}
.auth-card h2{font-size:24px;font-weight:700;letter-spacing:0;line-height:1.2;margin:0 0 6px}
.auth-card p.sub{color:var(--muted);font-size:13px;margin:0 0 20px}

/* ------ Stepper ------ */
.stepper{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.stepper .step{align-items:center;display:flex;gap:8px}
.stepper .dot{align-items:center;background:#fff;border:1px solid var(--border);border-radius:50%;color:var(--muted);display:flex;flex-shrink:0;font-size:12px;font-weight:800;height:26px;justify-content:center;width:26px}
.stepper .dot.active{border-color:var(--accent);color:var(--accent)}
.stepper .dot.done{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper .label{color:var(--muted);font-size:13px}
.stepper .label.active{color:var(--fg);font-weight:800}
.stepper .line{background:var(--border);height:1px;width:32px}

/* ------ Tiles (booking modes, etc.) ------ */
.tile{background:#fff;border:1px solid var(--border);border-radius:5px;color:inherit;cursor:pointer;padding:14px;text-align:left;transition:background .15s,border-color .15s}
.tile:hover{border-color:var(--accent)}
.tile.selected{background:#edf7f8;background:color-mix(in srgb,var(--accent) 8%,#fff);border-color:var(--accent)}
.tile h4{align-items:center;display:flex;font-size:14px;font-weight:800;justify-content:space-between;margin:0 0 4px}
.tile p{color:var(--muted);font-size:12px;margin:0}

/* ------ Show cards (availability) ------ */
.show-section{margin-bottom:28px}
.show-section > h2{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:0;margin:0 0 10px;text-transform:uppercase}
.show-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.show-card{background:#fff;border:1px solid var(--border);border-radius:5px;color:inherit;cursor:pointer;display:block;overflow:hidden;padding:16px;position:relative;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.show-card::before{background:var(--accent);bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .15s;width:3px}
.show-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-1px)}
.show-card:hover::before{opacity:1}
.show-card.disabled{background:var(--surface-muted);cursor:not-allowed;opacity:.72}
.show-card.disabled:hover{border-color:var(--border);box-shadow:none;transform:none}
.show-card.disabled:hover::before{opacity:0}
.show-card .top{align-items:flex-start;display:flex;gap:8px;justify-content:space-between;margin-bottom:12px}
.show-card .name{font-size:14.5px;font-weight:800;letter-spacing:0;line-height:1.3}
.show-card .time-list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.show-card .time{align-items:center;color:var(--muted);display:inline-flex;font-size:12px;gap:5px;margin-top:4px}
.show-card .time-list .time{margin-top:0}
.show-card .time strong{color:var(--fg);font-weight:800}
.show-card .time.secondary{font-size:11.5px}
.show-card .time svg{flex-shrink:0;height:12px;width:12px}
.show-card .meta{color:var(--muted);display:flex;font-size:11.5px;font-weight:700;justify-content:space-between;margin-bottom:6px}
.show-card .meta span:first-child{color:var(--fg)}
.bar{background:var(--surface-muted);border-radius:999px;height:6px;overflow:hidden}
.bar > span{background:var(--accent);border-radius:999px;display:block;height:100%;transition:width .3s}
.show-card .cta{align-items:center;color:var(--accent-dark);display:inline-flex;font-size:12px;font-weight:800;gap:4px;margin-top:10px;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s,gap .15s}
.show-card:hover .cta{gap:8px;opacity:1;transform:none}

/* ------ Items list ------ */
.item-list{list-style:none;margin:0;padding:0}
.item-list > li{align-items:center;border-bottom:1px solid var(--border);display:flex;gap:10px;justify-content:space-between;padding:10px 0}
.item-list > li:last-child{border-bottom:0}
.item-list > li.cat-head{border-bottom:0;color:var(--muted);display:block;font-size:12px;font-weight:800;letter-spacing:0;padding:14px 0 6px;text-transform:uppercase}
.item-list > li.cat-head:first-child{padding-top:4px}
.item-list .info{min-width:0}
.item-list .info .name{font-size:13px;font-weight:700}
.item-list .info .meta{color:var(--muted);font-size:12px;margin-top:2px}
.qty{align-items:center;display:inline-flex;gap:4px}
.qty button{background:#fff;border:1px solid var(--border);border-radius:5px;color:var(--fg);cursor:pointer;font-size:14px;height:28px;line-height:1;width:28px}
.qty button:hover:not([disabled]){background:var(--surface-muted);border-color:var(--border-strong)}
.qty button[disabled]{cursor:not-allowed;opacity:.4}
.qty .count{font-size:13px;font-weight:800;text-align:center;width:28px}

/* ------ Status pill ------ */
.status{align-items:center;display:inline-flex;font-size:13px;gap:6px}
.status .dot{background:var(--muted);border-radius:50%;height:8px;width:8px}
.status.ok .dot{background:var(--success)}
.status.down .dot{background:var(--danger)}

/* ------ Dashboard cards ------ */
.dash-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.dash-card{background:#fff;border:1px solid var(--border);border-radius:5px;color:inherit;display:block;overflow:hidden;padding:22px;position:relative;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.dash-card::before{background:var(--accent);bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .15s;width:3px}
.dash-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-1px)}
.dash-card:hover::before{opacity:1}
.dash-card > *{position:relative}
.dash-card .icon{align-items:center;background:var(--accent);border-radius:5px;color:#fff;display:flex;height:44px;justify-content:center;margin-bottom:14px;width:44px}
.dash-card .icon svg{height:22px;stroke-width:2;width:22px}
.dash-card h4{font-size:17px;font-weight:800;letter-spacing:0;margin:0 0 4px}
.dash-card p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}
.dash-card .arrow{align-items:center;color:var(--accent-dark);display:inline-flex;font-size:12px;font-weight:800;gap:4px;margin-top:12px;transition:gap .15s}
.dash-card:hover .arrow{gap:8px}

/* ------ JSON viewer ------ */
.json{background:var(--code-bg);border:0;border-radius:4px;color:var(--code-text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;max-height:480px;overflow:auto;padding:14px;white-space:pre-wrap;word-break:break-all}

/* ------ Success screen ------ */
.success-icon{align-items:center;background:#e8f7ee;border-radius:50%;color:#11733a;display:flex;height:48px;justify-content:center;margin:0 auto 12px;width:48px}

/* ------ Responsive ------ */
@media (max-width:980px){
  .app{display:block}
  .sidebar{border-bottom:1px solid #1a2024;border-right:0;height:auto;min-height:0;padding-bottom:14px;position:relative}
  .sidebar .brand{align-items:center;flex-direction:row;justify-content:space-between;padding-bottom:12px}
  .sidebar .brand .brand-logo{max-height:54px;max-width:180px}
  .restaurant-badge{margin-top:0}
  .sidebar nav{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:thin}
  .sidebar nav a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);flex:0 0 auto;padding:8px 10px}
  .sidebar-api{display:none}
  .main > header{padding-left:16px;padding-right:16px}
  .row.cols-2,.row.cols-3,.row.split,.settings-edit-grid{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  body{font-size:15px}
  .main > header{align-items:flex-start;flex-direction:column;gap:10px;position:static}
  .main > .body{padding:24px 16px 60px}
  .sidebar{padding-left:16px;padding-right:16px}
  .sidebar .brand{align-items:flex-start;flex-direction:column}
  .user-trigger{justify-content:flex-start;max-width:none;min-width:0;width:100%}
  .user-menu{width:100%}
  .user-dropdown{left:0;right:auto;width:100%}
  .btn-row.between{align-items:stretch;flex-direction:column}
  .btn-row.between .btn{width:100%}
  .stepper .label{display:none}
  .stepper .line{width:16px}
}