:root{
  --red:#c1121f;
  --red-dark:#8f1019;
  --red-soft:#fff1f2;
  --black:#121212;
  --black-2:#1d1d1f;
  --bg:#f6f7f9;
  --surface:#ffffff;
  --text:#171717;
  --muted:#6b7280;
  --line:#e6e8ec;
  --line-dark:#d1d5db;
  --success:#15803d;
  --warning:#b45309;
  --radius:16px;
  --shadow:0 10px 28px rgba(17,24,39,.07);
  --shadow-lg:0 24px 60px rgba(17,24,39,.16);
}
*{box-sizing:border-box}
html,body{min-height:100%}
html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);font-size:14px;line-height:1.55;background:
  url('assets/herbal-watermark.svg') no-repeat right 42px bottom 28px/420px auto,
  radial-gradient(circle at 85% 4%,rgba(193,18,31,.045),transparent 24%),
  linear-gradient(180deg,#fbfbfc 0%,#f5f6f8 100%);background-attachment:fixed}
a{color:var(--red-dark);text-decoration:none;transition:.18s ease}a:hover{color:var(--red)}button,input,select,textarea{font:inherit}

/* Header */
.app-header{position:sticky;top:0;z-index:70;min-height:74px;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(115deg,#0e0e0f 0%,#171719 68%,#32090d 100%);border-bottom:3px solid var(--red);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.header-left,.header-right{display:flex;align-items:center;gap:15px;min-width:0}.nav-toggle{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;border-radius:11px;cursor:pointer}
.brand{display:flex;align-items:center;gap:13px;color:#fff}.brand:hover{color:#fff}.brand-mark{width:46px;height:46px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(193,18,31,.25);border:1px solid rgba(255,255,255,.18)}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.brand-name{font-size:19px;font-weight:900;letter-spacing:-.35px}.brand-subtitle{font-size:11px;color:#d1d5db;margin-top:2px}
.user-menu{display:flex;align-items:center;gap:11px}.user-avatar{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#111;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.18)}.user-copy{text-align:right;line-height:1.2}.user-name{color:#fff;font-size:13px;font-weight:800}.user-role{color:#d1d5db;font-size:11px;margin-top:3px}.logout-link{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:0 14px;border-radius:10px;background:#fff;color:#111!important;font-size:12px;font-weight:850;border:1px solid #fff}.logout-link:hover{background:#ffe4e6;color:var(--red-dark)!important}

/* Layout / sidebar */
.app-layout{display:flex;min-height:calc(100vh - 74px)}.sidebar{width:260px;flex:0 0 260px;background:rgba(255,255,255,.97);border-right:1px solid #eadde0;padding:18px 13px 15px;display:flex;flex-direction:column;gap:13px;position:sticky;top:74px;height:calc(100vh - 74px);overflow:auto;box-shadow:6px 0 28px rgba(17,24,39,.035)}
.sidebar-head{padding:7px 10px 13px;border-bottom:1px solid #f0dfe2}.sidebar-title{font-size:12px;font-weight:900;color:#111;text-transform:uppercase;letter-spacing:.55px}.sidebar-subtitle{font-size:11px;color:#8a8f98;margin-top:4px}.side-nav{display:flex;flex-direction:column;gap:4px}.nav-section{margin:14px 10px 4px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.9px;color:#9ca3af}
.side-link{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:#30343a;font-size:13px;font-weight:750;border:1px solid transparent}.side-link:hover{background:#fafafa;border-color:#eceff2;color:#111;transform:translateX(1px)}.side-link.active{background:linear-gradient(90deg,#fff1f2,#ffffff);border-color:#fecdd3;color:#a10f1a;box-shadow:inset 3px 0 0 var(--red),0 7px 18px rgba(193,18,31,.07)}.nav-dot{width:9px;height:9px;border-radius:3px;background:#2e3136;flex:0 0 9px}.side-link:hover .nav-dot{background:#111}.side-link.active .nav-dot{background:var(--red);box-shadow:0 0 0 4px rgba(193,18,31,.11)}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot{margin-top:auto}.support-box{padding:14px;border-radius:13px;background:linear-gradient(145deg,#111,#242426);color:#fff;box-shadow:0 9px 22px rgba(0,0,0,.13)}.support-box strong{display:block;font-size:12px;margin-bottom:5px}.support-box span{display:block;color:#d1d5db;font-size:11px;line-height:1.5}.sidebar-backdrop{display:none}
.main-shell{flex:1;min-width:0;display:flex;flex-direction:column;background:transparent}.container{max-width:1460px;width:100%;margin:0 auto;padding:28px}.footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 28px;border-top:1px solid var(--line);background:rgba(255,255,255,.92);color:#7b8089;font-size:11px}

/* Typography */
h1,h2,h3{margin-top:0;color:#111;letter-spacing:-.32px}h1{display:flex;align-items:center;gap:12px;font-size:29px;font-weight:900;margin-bottom:21px}h1:before{content:"";width:5px;height:31px;border-radius:99px;background:linear-gradient(180deg,var(--red),#111)}h2{font-size:22px;font-weight:850;margin-bottom:12px}h3{font-size:16px;font-weight:820;margin-bottom:11px}p{margin-top:0}.muted,small{color:var(--muted)}

/* Cards */
.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:19px;box-shadow:var(--shadow);margin-bottom:17px;color:var(--text);backdrop-filter:blur(3px)}.card:hover{border-color:#dddfe4;box-shadow:0 15px 38px rgba(17,24,39,.08)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:17px}.grid>.card{margin-bottom:0;position:relative;overflow:hidden}.grid>.card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),#111 72%,transparent)}.grid>.card>.muted:first-child{font-size:11px;text-transform:uppercase;letter-spacing:.62px;font-weight:800;color:#7c828b}.stat{margin-top:8px;font-size:31px;line-height:1;font-weight:900;color:#111;letter-spacing:-1px}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0 7px;background:transparent;color:var(--text)}th{padding:11px 13px;color:#6b7280;font-size:10px;text-transform:uppercase;letter-spacing:.64px;font-weight:900;text-align:left;border:0;background:transparent}td{padding:13px;background:#fff;border-top:1px solid #eceff2;border-bottom:1px solid #eceff2;vertical-align:middle;color:#292d33}tr td:first-child{border-left:1px solid #eceff2;border-top-left-radius:10px;border-bottom-left-radius:10px}tr td:last-child{border-right:1px solid #eceff2;border-top-right-radius:10px;border-bottom-right-radius:10px}tbody tr:hover td{background:#fff9fa;border-color:#f3d9dd}td a{font-weight:800;color:#a4101b}td a:hover{color:var(--red)}

/* Forms */
.row{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end}.field{flex:1;min-width:175px}label{display:block;margin-bottom:6px;color:#4b5563;font-size:11px;font-weight:800;letter-spacing:.1px}input,select,textarea{width:100%;min-height:43px;padding:10px 12px;border:1px solid var(--line-dark);border-radius:10px;background:#fff;color:#171717;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}textarea{min-height:105px;resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af}input:hover,select:hover,textarea:hover{border-color:#aeb4bd}input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(193,18,31,.10)}input[readonly],input:disabled,select:disabled,textarea:disabled{background:#f3f4f6;color:#737983;border-color:#e1e4e8;cursor:not-allowed}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid #b81321;border-radius:10px;background:linear-gradient(145deg,#d71929,#a90d19);color:#fff!important;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 8px 20px rgba(193,18,31,.14);transition:transform .14s,box-shadow .14s,filter .14s}.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 10px 24px rgba(193,18,31,.19)}.btn.secondary{background:linear-gradient(145deg,#111,#2a2a2c);border-color:#111;box-shadow:none}.btn.light{background:#fff;color:#111!important;border-color:#d7dbe1;box-shadow:none}.btn.light:hover{background:#fafafa;color:var(--red-dark)!important;border-color:#f2b7bf}.btn.danger{background:linear-gradient(145deg,#dc2626,#991b1b);border-color:#b91c1c}

/* Alerts / badges */
.alert{padding:12px 14px;border-radius:11px;margin:0 0 17px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;font-weight:700;box-shadow:0 8px 20px rgba(17,24,39,.05)}.alert.success{background:#ecfdf3;border-color:#bbf7d0;color:#166534}.alert.error{background:#fff1f2;border-color:#fecaca;color:#991b1b}.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb;font-size:11px;font-weight:800;line-height:1.15}.badge.warn{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.badge.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}.badge.status-done,span.badge.status-done{background:#facc15!important;color:#3d2d00!important;border-color:#eab308!important;box-shadow:0 2px 10px rgba(234,179,8,.16)!important}.badge.status-pending,span.badge.status-pending{background:#e5e7eb!important;color:#374151!important;border-color:#d1d5db!important}.badge.status-confirmed,span.badge.status-confirmed{background:#f97316!important;color:#fff!important;border-color:#ea580c!important;box-shadow:0 2px 10px rgba(249,115,22,.18)!important}.badge.status-cancelled,span.badge.status-cancelled,.badge.danger{background:#dc2626!important;color:#fff!important;border-color:#b91c1c!important;box-shadow:0 2px 10px rgba(220,38,38,.16)!important}.right{text-align:right}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Modal */
.modal{position:fixed;inset:0;z-index:150;background:rgba(17,17,17,.58);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}.modal.open{display:flex}.modal-box{width:100%;max-width:780px;max-height:88vh;overflow:auto;background:#fff;border-radius:18px;padding:22px;border:1px solid #eceff2;box-shadow:var(--shadow-lg)}.order-line{display:grid;grid-template-columns:2fr 100px 120px 120px 44px;gap:10px;margin-bottom:10px}hr{border:0;border-top:1px solid var(--line);margin:20px 0}code{background:#f3f4f6;padding:3px 6px;border-radius:6px}

/* Login */
.login-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:url('assets/herbal-watermark.svg') no-repeat left 8% bottom 8%/430px auto,radial-gradient(circle at top right,rgba(193,18,31,.10),transparent 30%),linear-gradient(135deg,#fafafa,#fff 50%,#f3f4f6)}.login-panel{width:100%;max-width:980px;background:#fff;border:1px solid #e8eaee;border-radius:26px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:var(--shadow-lg)}.login-side{padding:44px 38px;background:linear-gradient(155deg,#101011 0%,#1d1d20 62%,#4b0c13 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-side:after{content:"";position:absolute;right:-80px;bottom:-100px;width:300px;height:300px;background:url('assets/herbal-watermark.svg') center/contain no-repeat;opacity:.27}.login-logo{position:relative;z-index:1;width:68px;height:68px;border-radius:18px;background:#fff;overflow:hidden;margin-bottom:20px;box-shadow:0 14px 30px rgba(193,18,31,.24)}.login-logo img{width:100%;height:100%;object-fit:cover;display:block}.login-side h1{position:relative;z-index:1;font-size:34px;font-weight:900;line-height:1.08;margin:0 0 14px;color:#fff}.login-side h1:before{display:none}.login-side p,.login-points{position:relative;z-index:1}.login-side p{font-size:15px;color:#d1d5db;max-width:420px;margin-bottom:20px}.login-points{padding-left:18px;margin:0;display:grid;gap:10px;color:#f3f4f6}.login-card{padding:42px 38px;display:flex;flex-direction:column;justify-content:center}.eyebrow{display:inline-flex;align-self:flex-start;padding:6px 10px;border-radius:999px;background:#fff1f2;color:#a20f1a;font-size:11px;font-weight:900;letter-spacing:.7px;margin-bottom:14px}.login-card h2{margin-bottom:8px}.login-card form{margin-top:10px}.login-card .field+.field{margin-top:14px}.login-card .btn{width:100%;margin-top:16px;min-height:46px;font-size:14px}.login-foot{text-align:center;color:#9ca3af;font-size:12px;margin-top:18px}

/* Keep embedded dashboard on light surface even if index has own styles */
.el-dashboard .db-panel,.el-dashboard .db-filter,.el-dashboard .db-money-card,.el-dashboard .db-status-card{color:#111}.el-dashboard table,.el-dashboard td,.el-dashboard th{color:#111}

@media(max-width:960px){.nav-toggle{display:inline-grid;place-items:center}.sidebar{position:fixed;left:0;top:74px;bottom:0;height:auto;transform:translateX(-105%);transition:transform .22s ease;z-index:95;box-shadow:var(--shadow-lg)}.sidebar-backdrop{display:block;position:fixed;inset:74px 0 0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:.2s;z-index:90}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}.app-layout{display:block}.container{padding:22px 16px}.footer{padding:16px;flex-direction:column;align-items:flex-start}.user-copy{display:none}}
@media(max-width:820px){.login-panel{grid-template-columns:1fr}.login-side{padding:30px 24px}.login-card{padding:30px 24px}}
@media(max-width:700px){.app-header{padding:12px 14px;min-height:72px}.brand-name{font-size:17px}.brand-subtitle{display:none}h1{font-size:25px}.grid{grid-template-columns:1fr 1fr}.row>.field{min-width:100%}.row>.btn{width:100%}.order-line{grid-template-columns:1fr 1fr}.card{padding:16px;overflow-x:auto}table{min-width:650px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.brand-mark{width:40px;height:40px}.logout-link{padding:0 10px;min-height:38px}.login-side h1{font-size:28px}body{background-size:260px auto,auto,auto}}

/* Smart universal order search */
.app-header{display:grid;grid-template-columns:auto minmax(300px,680px) auto}
.header-search-wrap{position:relative;width:100%;max-width:680px;justify-self:center;z-index:95}
.header-search-box{height:44px;display:flex;align-items:center;gap:10px;padding:0 11px 0 14px;border-radius:13px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.header-search-box:focus-within{box-shadow:0 0 0 3px rgba(193,18,31,.22),0 10px 26px rgba(0,0,0,.18)}
.header-search-box .search-mark{color:#991b1b;font-size:21px;font-weight:900;line-height:1}
.header-search-box input{height:40px;min-height:40px;padding:0;border:0!important;box-shadow:none!important;background:transparent;flex:1;min-width:0;color:#151515;font-weight:650}
.header-search-box input::placeholder{color:#8a8a8a;font-weight:500}
.search-shortcut{white-space:nowrap;padding:5px 8px;border-radius:8px;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.35px}
.smart-search-results{position:absolute;left:0;right:0;top:calc(100% + 9px);background:#fff;border:1px solid #eadde0;border-radius:15px;box-shadow:0 22px 60px rgba(0,0,0,.2);overflow:hidden;max-height:520px;overflow-y:auto;color:#171717}
.smart-search-head{padding:10px 14px;background:#faf7f7;border-bottom:1px solid #eee3e4;color:#6b7280;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.smart-search-empty,.smart-search-loading{padding:18px 15px;color:#6b7280;text-align:center;font-size:13px}
.smart-result{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:12px;padding:12px 14px;border-bottom:1px solid #f0e8e9;color:#171717!important;background:#fff}
.smart-result:last-child{border-bottom:0}
.smart-result:hover,.smart-result.active{background:#fff6f6;color:#171717!important}
.smart-result-main{min-width:0}
.smart-result-title{display:flex;align-items:center;gap:8px;min-width:0;font-weight:900;color:#171717}
.smart-order-no{display:inline-flex;padding:3px 7px;border-radius:7px;background:#171717;color:#fff;font-size:11px;letter-spacing:.25px}
.smart-customer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smart-result-meta{margin-top:5px;display:flex;gap:9px;flex-wrap:wrap;color:#6b7280;font-size:11px}
.smart-result-right{text-align:right;white-space:nowrap}
.smart-result-amount{font-weight:900;color:#991b1b}
.smart-status-row{display:flex;justify-content:flex-end;gap:5px;margin-top:6px}
.smart-mini-badge{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid #e5e7eb;background:#f3f4f6;color:#4b5563}
.smart-mini-badge.done{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.smart-mini-badge.confirmed{background:#ffedd5;border-color:#fdba74;color:#9a3412}
.smart-mini-badge.cancelled{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.smart-search-tip{padding:9px 14px;background:#111;color:#e5e7eb;font-size:10px;text-align:center}
@media(max-width:1050px){.app-header{grid-template-columns:auto 1fr auto}.brand-copy{display:none}.header-search-wrap{max-width:none}.search-shortcut{display:none}}
@media(max-width:760px){.app-header{grid-template-columns:auto 1fr}.header-right{display:none}.header-search-box{height:42px}.header-search-wrap{min-width:0}.smart-result{grid-template-columns:1fr}.smart-result-right{text-align:left}.smart-status-row{justify-content:flex-start}}