:root{
    --bg:#FDFCFA;
    --panel:#FFFFFF;
    --panel-line:#E9E4D8;
    --ink:#211D18;
    --ink-soft:#6F675A;
    --gold:#A9832B;
    --gold-light:#C9A84A;
    --gold-wash:#F7F0DD;
    --sidebar:#1B1712;
    --sidebar-ink:#EFE9DD;
    --sidebar-ink-dim:#9C927E;
    --danger:#B3432B;
    --danger-wash:#FBECE7;
    --teal:#2F6F62;
    --teal-wash:#E7F1EE;
    --green:#3F7D45;
    --green-wash:#EAF3EA;
    --radius:10px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; tap-highlight-color:transparent;}
  html{-webkit-tap-highlight-color:transparent;}
  body{
    margin:0;
    font-family:'Work Sans',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Playfair Display',serif; margin:0;}
  ::selection{background:var(--gold-wash);}

  /* Classic focus/click states -- no default blue tap/focus flash anywhere */
  a, button, input, select, textarea, .nav-item, [role="button"]{
    outline:none;
    -webkit-tap-highlight-color:transparent;
  }
  a:focus, button:focus{outline:none;}
  a:focus-visible, button:focus-visible, .nav-item:focus-visible{
    outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
  }
  input[type=checkbox]{accent-color:var(--gold);}
  button, .nav-item, .btn-gold, .btn-outline, .btn-danger-outline{
    -webkit-user-select:none; user-select:none;
  }

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

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:250px; flex-shrink:0;
    background:var(--sidebar); color:var(--sidebar-ink);
    display:flex; flex-direction:column;
    position:fixed; top:0; bottom:0; left:0; z-index:40;
    transition:transform .28s ease;
  }
  .sidebar-brand{
    padding:26px 24px 22px; border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:12px;
  }
  .sidebar-brand .mark{
    width:38px; height:38px; border-radius:9px;
    background:linear-gradient(135deg,var(--gold) 0%, var(--gold-light) 100%);
    display:flex; align-items:center; justify-content:center;
    color:#1B1712; font-family:'Playfair Display',serif; font-weight:700; font-size:18px;
    flex-shrink:0;
  }
  .sidebar-brand .name{font-family:'Playfair Display',serif; font-size:18px; line-height:1.1;}
  .sidebar-brand .sub{font-size:11px; color:var(--sidebar-ink-dim); letter-spacing:.04em; margin-top:2px;}
  .nav{padding:18px 12px; flex:1; overflow-y:auto;}
  .nav-label{font-size:11px; color:var(--sidebar-ink-dim); padding:10px 12px 6px; letter-spacing:.03em;}
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; border-radius:8px; cursor:pointer;
    color:var(--sidebar-ink-dim); font-size:14.5px; font-weight:500;
    transition:background .15s, color .15s; margin-bottom:2px;
  }
  .nav-item i{width:18px; text-align:center; font-size:15px;}
  .nav-item:hover{background:rgba(255,255,255,.06); color:var(--sidebar-ink);}
  .nav-item.active{background:var(--gold); color:#1B1712; font-weight:600;}
  .nav-item .count-pill{
    margin-left:auto; background:rgba(255,255,255,.12); color:var(--sidebar-ink);
    font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  }
  .nav-item.active .count-pill{background:rgba(27,23,18,.18); color:#1B1712;}
  .sidebar-foot{
    padding:16px 20px 20px; border-top:1px solid rgba(255,255,255,.08);
    font-size:12px; color:var(--sidebar-ink-dim);
  }
  .sidebar-foot button{
    width:100%; margin-top:10px; background:transparent; border:1px solid rgba(255,255,255,.18);
    color:#E2A28F; padding:9px; border-radius:8px; font-size:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .sidebar-foot button:hover{background:rgba(179,67,43,.15); border-color:#B3432B;}

  .overlay{
    position:fixed; inset:0; background:rgba(20,17,12,.45);
    z-index:35; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .overlay.show{opacity:1; pointer-events:auto;}

  /* ---------- Main ---------- */
  .main{margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column;}
  .topbar{
    background:var(--panel); border-bottom:1px solid var(--panel-line);
    padding:18px 32px; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:20;
  }
  .topbar-left{display:flex; align-items:center; gap:16px;}
  .hamburger{
    display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--panel-line);
    background:var(--panel); align-items:center; justify-content:center; cursor:pointer; font-size:16px;
  }
  .page-title{font-size:23px;}
  .page-sub{font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .topbar-right{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft);}
  .date-pill{background:var(--gold-wash); color:var(--gold); padding:7px 14px; border-radius:999px; font-weight:600; font-size:12.5px;}

  .content{padding:28px 32px 60px; max-width:1180px; width:100%;}
  .section{display:none;}
  .section.active{display:block;}

  /* ---------- Cards / stats ---------- */
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px;}
  .stat-card{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
    padding:20px; position:relative; overflow:hidden;
  }
  .stat-card .num{font-family:'Playfair Display',serif; font-size:30px; margin-top:6px;}
  .stat-card .lbl{font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
  .stat-card i{position:absolute; right:16px; top:16px; font-size:20px; color:var(--gold-light); opacity:.6;}

  .panel{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
    padding:24px;
  }
  .panel + .panel{margin-top:20px;}
  .panel-head{display:flex; align-items:center; gap:10px; margin-bottom:18px; justify-content:space-between;}
  .panel-head-left{display:flex; align-items:center; gap:10px;}
  .panel-head i{color:var(--gold); font-size:17px;}
  .panel-head h2{font-size:18px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}

  label.field-label{font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-bottom:6px; display:block;}
  input[type=text], input[type=number], input[type=date], input[type=tel], select, textarea, input[type=file]{
    width:100%; background:#FBFAF7; border:1px solid #DCD5C4; border-radius:8px;
    padding:10px 12px; font-size:14px; font-family:'Work Sans',sans-serif; color:var(--ink);
  }
  textarea{resize:vertical; min-height:74px; line-height:1.5;}
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash);}
  .btn-gold{
    background:linear-gradient(135deg,var(--gold) 0%, var(--gold-light) 100%);
    color:#1B1712; font-weight:600; border:none; border-radius:8px; padding:11px 18px;
    cursor:pointer; font-size:14px; transition:box-shadow .15s, transform .1s;
  }
  .btn-gold:hover{box-shadow:0 4px 14px rgba(169,131,43,.35);}
  .btn-gold:active{transform:translateY(1px);}
  .btn-outline{
    background:transparent; border:1px solid var(--panel-line); color:var(--ink);
    font-weight:600; border-radius:8px; padding:9px 14px; cursor:pointer; font-size:13px;
  }
  .btn-outline:hover{border-color:var(--gold); color:var(--gold);}
  .btn-danger-outline{
    background:transparent; border:1px solid #E6C8BC; color:var(--danger);
    font-weight:600; border-radius:8px; padding:9px 12px; cursor:pointer; font-size:13px;
  }
  .btn-danger-outline:hover{background:var(--danger-wash);}
  .btn-icon-sm{
    background:transparent; border:1px solid var(--panel-line); color:var(--ink-soft);
    border-radius:7px; width:32px; height:32px; cursor:pointer; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .btn-icon-sm:hover{border-color:var(--gold); color:var(--gold);}
  .btn-icon-sm.danger:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-wash);}
  .hint{font-size:12px; color:var(--ink-soft); margin-top:10px;}

  .rate-row{
    display:flex; justify-content:space-between; align-items:center;
    background:#FBFAF7; border:1px solid #EEE8D9; padding:11px 14px; border-radius:8px; margin-bottom:8px;
  }
  .rate-row .cat{font-weight:600; font-size:14px;}
  .rate-row .val{color:var(--gold); font-weight:700; font-size:14px;}

  .checkbox-row{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--gold);}

  /* ---------- Multi-image picker ---------- */
  .dropzone{
    border:2px dashed var(--gold-light); border-radius:12px; padding:26px 20px; text-align:center;
    cursor:pointer; background:var(--gold-wash); transition:background .15s;
  }
  .dropzone:hover{background:#F2E7C6;}
  .dropzone i{font-size:28px; color:var(--gold); margin-bottom:6px;}
  .img-preview-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
  .img-preview{
    position:relative; width:74px; height:74px; border-radius:8px; overflow:hidden;
    border:1px solid var(--panel-line);
  }
  .img-preview img{width:100%; height:100%; object-fit:cover; display:block;}
  .img-preview .rm{
    position:absolute; top:2px; right:2px; width:19px; height:19px; border-radius:50%;
    background:rgba(27,23,18,.75); color:#fff; border:none; font-size:10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .img-preview .cover-tag{
    position:absolute; bottom:0; left:0; right:0; background:rgba(27,23,18,.7); color:#EFE9DD;
    font-size:9px; text-align:center; padding:2px 0; font-weight:600; letter-spacing:.02em;
  }

  /* ---------- Dashboard table ---------- */
  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{text-align:left; color:var(--ink-soft); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.02em; padding:8px 10px; border-bottom:1px solid var(--panel-line);}
  td{padding:10px; border-bottom:1px solid #F1EDE2; vertical-align:middle;}
  .thumb{width:36px; height:36px; border-radius:6px; object-fit:cover; border:1px solid var(--panel-line);}
  .thumb-stack{display:flex; align-items:center;}
  .thumb-stack .thumb{margin-left:-10px; box-shadow:0 0 0 2px var(--panel);}
  .thumb-stack .thumb:first-child{margin-left:0;}
  .tag{display:inline-block; background:var(--gold-wash); color:var(--gold); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap;}
  .tag-pending{background:#F1ECE0; color:#7A7160;}
  .tag-confirmed{background:var(--gold-wash); color:var(--gold);}
  .tag-shipped{background:var(--teal-wash); color:var(--teal);}
  .tag-delivered{background:var(--green-wash); color:var(--green);}
  .tag-cancelled{background:var(--danger-wash); color:var(--danger);}
  .empty-state{text-align:center; padding:30px; color:var(--ink-soft); font-size:14px;}
  .status-select{
    width:auto; padding:6px 10px; font-size:12.5px; font-weight:600; border-radius:999px;
    border:1px solid #DCD5C4; background:#FBFAF7; cursor:pointer;
  }
  .table-wrap{overflow-x:auto;}
  .row-actions{display:flex; gap:6px;}
  .coupon-code{font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.03em;}
  .switch{position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .switch .slider{
    position:absolute; cursor:pointer; inset:0; background:#DCD5C4; border-radius:999px; transition:.15s;
  }
  .switch .slider::before{
    content:""; position:absolute; width:16px; height:16px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:.15s;
  }
  .switch input:checked + .slider{background:var(--gold);}
  .switch input:checked + .slider::before{transform:translateX(18px);}

  /* ---------- Ratings modal ---------- */
  .rating-modal-overlay{
    position:fixed; inset:0; background:rgba(20,17,12,.55); z-index:60;
    opacity:0; pointer-events:none; transition:opacity .2s;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .rating-modal-overlay.show{opacity:1; pointer-events:auto;}
  .rating-modal{
    background:var(--panel); border-radius:14px; width:100%; max-width:480px;
    max-height:88vh; overflow-y:auto; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.3);
    transform:translateY(10px); opacity:0; transition:transform .2s, opacity .2s;
  }
  .rating-modal-overlay.show .rating-modal{transform:translateY(0); opacity:1;}
  .rating-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px;}
  .rating-modal-head h3{font-size:17px;}
  .rating-modal-head .sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
  .rating-modal-close{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--panel-line); background:var(--panel);
    cursor:pointer; flex-shrink:0; color:var(--ink-soft);
  }
  .rating-modal-close:hover{border-color:var(--gold); color:var(--gold);}
  .star-picker{font-size:22px; color:var(--gold); cursor:pointer; margin:10px 0 4px;}
  .star-picker i{margin-right:4px; transition:transform .1s;}
  .star-picker i:hover{transform:scale(1.15);}
  .review-list{margin-top:16px; max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;}
  .review-row{
    border:1px solid var(--panel-line); border-radius:10px; padding:10px 12px; background:#FCFBF8;
  }
  .review-row-top{display:flex; align-items:center; gap:8px; font-size:13px;}
  .review-stars{color:var(--gold); letter-spacing:1px; font-size:13px;}
  .review-comment{font-size:12.5px; color:var(--ink-soft); margin-top:5px; line-height:1.4;}
  .review-row-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
  .rating-summary-pill{
    display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--gold);
  }

  @media (max-width:1000px){
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .grid-2, .grid-3{grid-template-columns:1fr;}
  }
  @media (max-width:820px){
    .sidebar{transform:translateX(-100%);}
    .sidebar.open{transform:translateX(0);}
    .main{margin-left:0;}
    .hamburger{display:flex;}
    .content{padding:22px 18px 50px;}
    .topbar{padding:16px 18px;}
  }

  /* ---------- Admin login gate ---------- */
  .hidden{ display:none !important; }
  .admin-auth-overlay{
    position:fixed; inset:0; z-index:100; background:#141109;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .admin-auth-card{
    width:100%; max-width:400px; background:var(--panel); border-radius:16px;
    padding:30px 28px; box-shadow:0 25px 70px rgba(0,0,0,.45);
  }
  .admin-auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .admin-auth-brand .mark{
    width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-weight:700; font-size:19px; color:#1B1712;
    background:linear-gradient(135deg,var(--gold) 0%, var(--gold-light) 100%);
  }
  .admin-auth-brand .name{ font-family:'Playfair Display',serif; font-weight:700; font-size:17px; }
  .admin-auth-brand .sub{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-soft); }
  .admin-auth-tabs{ display:flex; border-bottom:1px solid var(--panel-line); margin-bottom:18px; }
  .admin-auth-tab{
    flex:1; text-align:center; padding:10px 4px; font-size:13px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; border-bottom:2px solid transparent;
  }
  .admin-auth-tab.active{ color:var(--gold); border-bottom-color:var(--gold); }
  .admin-auth-error{ color:#B3261E; font-size:12.5px; min-height:16px; margin-bottom:6px; }
  .admin-auth-hint{ font-size:11.5px; color:var(--ink-soft); margin-top:12px; line-height:1.4; }

  /* ---------- Notification bell (topbar) ---------- */
  .topbar-bell{
    position:relative; width:38px; height:38px; border-radius:8px; border:1px solid var(--panel-line);
    background:var(--panel); display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--ink-soft); font-size:15px; transition:border-color .15s, color .15s;
  }
  .topbar-bell:hover{border-color:var(--gold); color:var(--gold);}
  .bell-badge{
    position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff;
    font-size:10.5px; font-weight:700; min-width:17px; height:17px; border-radius:999px;
    display:flex; align-items:center; justify-content:center; padding:0 4px; pointer-events:none;
  }
  .notif-panel{
    position:absolute; top:48px; right:0; width:300px; max-height:380px;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:12px;
    box-shadow:0 16px 40px rgba(20,17,12,.18); z-index:50; overflow:hidden;
    display:flex; flex-direction:column; cursor:default;
  }
  .notif-panel-head{
    padding:12px 16px; border-bottom:1px solid var(--panel-line); display:flex; justify-content:space-between;
    align-items:center; font-weight:600; font-size:13.5px; color:var(--ink);
  }
  .notif-panel-head button{border:none; background:none; color:var(--ink-soft); font-size:11.5px; cursor:pointer;}
  .notif-panel-head button:hover{color:var(--gold);}
  #notifList{overflow-y:auto; flex:1;}
  .notif-row{padding:11px 16px; border-bottom:1px solid #F1EDE2; font-size:12.5px; cursor:pointer;}
  .notif-row:hover{background:var(--gold-wash);}
  .notif-row-top{display:flex; justify-content:space-between; font-weight:600; color:var(--ink);}
  .notif-row-sub{color:var(--ink-soft); margin-top:2px; font-size:11.5px;}

  /* ---------- Toast (new order alert) ---------- */
  .admin-toast{
    position:fixed; bottom:24px; right:24px; z-index:200; background:var(--sidebar); color:var(--sidebar-ink);
    border:1px solid var(--gold); padding:13px 18px; border-radius:10px; font-size:13px; max-width:300px;
    box-shadow:0 12px 30px rgba(0,0,0,.3); opacity:0; transform:translateY(10px); transition:all .25s ease;
  }
  .admin-toast.show{opacity:1; transform:translateY(0);}
  .admin-toast i{color:var(--gold-light); margin-right:6px;}