:root { --admin-navy:#0b2b4b; --admin-navy-2:#123c61; --admin-gold:#c99a3d; --admin-paper:#f5f5f2; --admin-white:#fff; --admin-ink:#1c2630; --admin-muted:#73808b; --admin-line:#e4e6e7; --admin-green:#477257; --admin-red:#a44343; --admin-orange:#aa6c2f; --admin-shadow:0 18px 55px rgba(18,35,50,.11); --admin-radius:20px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--admin-ink); background:var(--admin-paper); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
img { display:block; max-width:100%; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.admin-sprite { position:absolute; width:0; height:0; overflow:hidden; }
[hidden] { display:none !important; }
.admin-login { min-height:100vh; padding:40px 20px; display:grid; place-items:center; background:radial-gradient(circle at 16% 20%,rgba(201,154,61,.13),transparent 28%),linear-gradient(135deg,#071d31,#0b2b4b 58%,#184c72); }
.login-card { width:min(100%,460px); padding:46px; background:rgba(255,255,255,.98); border-radius:28px; box-shadow:0 35px 90px rgba(0,0,0,.25); }
.admin-brand { display:inline-flex; align-items:center; gap:11px; color:var(--admin-navy); font-weight:850; letter-spacing:.3em; }
.admin-brand img { width:44px; height:36px; object-fit:contain; }
.admin-brand--center { margin:0 auto 34px; display:flex; justify-content:center; }
.login-kicker,.admin-modal__head span,.admin-topbar>div>span { color:var(--admin-gold); font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-card h1 { margin:8px 0 9px; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:2.8rem; font-weight:500; letter-spacing:-.04em; }
.login-card>p { margin:0 0 28px; color:var(--admin-muted); font-size:.88rem; line-height:1.7; }
.admin-form { display:grid; gap:17px; }
.admin-form label,.field { display:grid; gap:7px; color:#485560; font-size:.7rem; font-weight:750; }
.admin-form input,.admin-form select,.admin-form textarea,.field input,.field select,.field textarea,.admin-filter-input,.admin-filter-select { width:100%; min-height:46px; padding:11px 13px; color:var(--admin-ink); background:var(--admin-white); border:1px solid var(--admin-line); border-radius:11px; outline:none; transition:border-color .2s,box-shadow .2s; }
.admin-form textarea,.field textarea { min-height:110px; resize:vertical; line-height:1.55; }
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus,.field input:focus,.field select:focus,.field textarea:focus,.admin-filter-input:focus,.admin-filter-select:focus { border-color:var(--admin-gold); box-shadow:0 0 0 3px rgba(201,154,61,.12); }
.admin-button { min-height:43px; padding:10px 17px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--admin-line); border-radius:11px; background:white; font-size:.73rem; font-weight:800; cursor:pointer; transition:transform .2s,background .2s,border-color .2s; }
.admin-button:hover { transform:translateY(-1px); border-color:#cbd0d3; }
.admin-button--primary { color:white; background:var(--admin-navy); border-color:var(--admin-navy); }
.admin-button--primary:hover { background:var(--admin-gold); border-color:var(--admin-gold); }
.admin-button--danger { color:var(--admin-red); border-color:rgba(164,67,67,.25); }
.admin-button--full { width:100%; min-height:50px; }
.admin-button svg { width:17px; height:17px; }
.form-message { min-height:18px; color:var(--admin-red); font-size:.73rem; text-align:center; }
.login-store-link { margin-top:25px; display:block; color:var(--admin-muted); font-size:.72rem; text-align:center; }
.admin-layout { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.admin-sidebar { position:fixed; z-index:60; inset:0 auto 0 0; width:260px; padding:27px 20px 22px; display:flex; flex-direction:column; color:rgba(255,255,255,.8); background:var(--admin-navy); }
.admin-sidebar .admin-brand { color:white; }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:0 7px; }
.sidebar-close { display:none; color:white; border:0; background:transparent; font-size:1.8rem; cursor:pointer; }
.sidebar-label { margin:32px 10px 11px; color:rgba(255,255,255,.38); font-size:.56rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.admin-nav { display:grid; gap:5px; }
.admin-nav button { width:100%; min-height:48px; padding:0 13px; display:grid; grid-template-columns:23px 1fr auto; align-items:center; gap:11px; color:rgba(255,255,255,.69); border:0; border-radius:12px; background:transparent; font-size:.76rem; text-align:left; cursor:pointer; }
.admin-nav button:hover,.admin-nav button.active { color:white; background:rgba(255,255,255,.1); }
.admin-nav button.active { box-shadow:inset 3px 0 var(--admin-gold); }
.admin-nav em { min-width:22px; padding:3px 6px; color:var(--admin-navy); background:var(--admin-gold); border-radius:20px; font-size:.58rem; font-style:normal; text-align:center; }
.sidebar-foot { margin-top:auto; padding-top:18px; display:grid; gap:6px; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-foot a,.sidebar-foot button { min-height:42px; padding:0 11px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.65); border:0; background:transparent; font-size:.7rem; cursor:pointer; }
.admin-workspace { min-width:0; grid-column:2; }
.admin-topbar { min-height:94px; padding:18px clamp(25px,4vw,58px); display:flex; align-items:center; gap:22px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--admin-line); backdrop-filter:blur(15px); }
.admin-topbar h1 { margin:4px 0 0; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.8rem; font-weight:500; letter-spacing:-.025em; }
.admin-user { margin-left:auto; display:flex; align-items:center; gap:11px; }
.admin-user>span { width:39px; height:39px; display:grid; place-items:center; color:white; background:var(--admin-navy); border-radius:50%; font-size:.75rem; font-weight:800; }
.admin-user p { margin:0; display:grid; font-size:.68rem; }
.admin-user small { color:var(--admin-muted); }
.sidebar-open { display:none; width:42px; height:42px; place-items:center; border:1px solid var(--admin-line); background:white; border-radius:10px; }
.password-alert { margin:24px clamp(25px,4vw,58px) 0; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#744917; background:#fff5df; border:1px solid #edd8ae; border-radius:14px; }
.password-alert div { display:grid; gap:2px; font-size:.73rem; }
.password-alert span { color:#977043; }
.password-alert button { color:#744917; border:0; border-bottom:1px solid currentColor; background:transparent; font-size:.7rem; font-weight:800; cursor:pointer; }
.admin-content { padding:34px clamp(25px,4vw,58px) 70px; }
.admin-loading { min-height:55vh; display:grid; place-items:center; align-content:center; gap:14px; color:var(--admin-muted); font-size:.75rem; }
.admin-loading span { width:38px; height:38px; border:3px solid #e1e4e4; border-top-color:var(--admin-gold); border-radius:50%; animation:admin-spin .8s linear infinite; }
@keyframes admin-spin { to{transform:rotate(360deg)} }
.admin-page-head { margin-bottom:24px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.admin-page-head h2 { margin:0 0 5px; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:500; letter-spacing:-.03em; }
.admin-page-head p { margin:0; color:var(--admin-muted); font-size:.78rem; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card { min-height:150px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; background:white; border:1px solid var(--admin-line); border-radius:var(--admin-radius); box-shadow:0 7px 24px rgba(25,39,51,.035); }
.metric-card__top { display:flex; align-items:start; justify-content:space-between; color:var(--admin-muted); font-size:.66rem; font-weight:750; }
.metric-card__icon { width:38px; height:38px; display:grid; place-items:center; color:var(--admin-navy); background:#eef2f4; border-radius:11px; font-style:normal; font-weight:800; }
.metric-card strong { color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:500; }
.metric-card small { color:var(--admin-muted); font-size:.62rem; }
.admin-grid-2 { margin-top:20px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:20px; }
.admin-card { overflow:hidden; background:white; border:1px solid var(--admin-line); border-radius:var(--admin-radius); }
.admin-card__head { min-height:72px; padding:18px 21px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--admin-line); }
.admin-card__head h3 { margin:0; color:var(--admin-navy); font-size:.86rem; }
.admin-card__head p { margin:3px 0 0; color:var(--admin-muted); font-size:.63rem; }
.admin-card__head button { border:0; color:var(--admin-gold); background:transparent; font-size:.66rem; font-weight:800; cursor:pointer; }
.table-scroll { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; white-space:nowrap; }
.admin-table th { padding:13px 17px; color:var(--admin-muted); background:#fafaf8; border-bottom:1px solid var(--admin-line); font-size:.57rem; font-weight:800; letter-spacing:.09em; text-align:left; text-transform:uppercase; }
.admin-table td { padding:14px 17px; border-bottom:1px solid #edf0f0; font-size:.7rem; vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tbody tr:hover { background:#fcfcfa; }
.table-link { padding:0; color:var(--admin-navy); border:0; background:transparent; font-size:inherit; font-weight:800; cursor:pointer; }
.table-product { min-width:245px; display:flex; align-items:center; gap:11px; }
.table-product img,.stock-item img { width:48px; height:48px; object-fit:cover; background:#eee; border-radius:10px; }
.table-product div,.stock-item div { display:grid; gap:2px; }
.table-product strong,.stock-item strong { color:var(--admin-ink); font-size:.7rem; }
.table-product small,.stock-item small { color:var(--admin-muted); font-size:.59rem; }
.status-chip { display:inline-flex; padding:5px 9px; color:#56636c; background:#edf0f1; border-radius:20px; font-size:.57rem; font-weight:800; text-transform:capitalize; }
.status-chip--paid,.status-chip--delivered,.status-chip--active { color:var(--admin-green); background:#e9f4ec; }
.status-chip--processing,.status-chip--shipped { color:#536fa2; background:#edf1f8; }
.status-chip--payment-pending,.status-chip--low { color:var(--admin-orange); background:#fff2df; }
.status-chip--cancelled,.status-chip--refunded,.status-chip--archived,.status-chip--unsubscribed { color:var(--admin-red); background:#f9eaea; }
.table-actions { display:flex; align-items:center; gap:4px; }
.table-actions button,.table-actions a { width:34px; height:34px; display:grid; place-items:center; color:var(--admin-muted); border:1px solid transparent; background:transparent; border-radius:8px; cursor:pointer; }
.table-actions button:hover,.table-actions a:hover { color:var(--admin-navy); border-color:var(--admin-line); background:white; }
.table-actions svg { width:16px; height:16px; }
.stock-list { padding:8px 20px 15px; display:grid; }
.stock-item { padding:12px 0; display:flex; align-items:center; gap:11px; border-bottom:1px solid #edf0f0; }
.stock-item:last-child { border:0; }
.stock-item>span { margin-left:auto; color:var(--admin-orange); font-size:.63rem; font-weight:800; }
.admin-empty { padding:50px 20px; color:var(--admin-muted); font-size:.76rem; text-align:center; }
.admin-toolbar { margin-bottom:17px; padding:13px; display:flex; align-items:center; gap:10px; background:white; border:1px solid var(--admin-line); border-radius:15px; }
.search-wrap { position:relative; flex:1; min-width:210px; }
.search-wrap svg { position:absolute; left:13px; top:50%; width:17px; transform:translateY(-50%); color:var(--admin-muted); }
.search-wrap .admin-filter-input { padding-left:39px; }
.admin-filter-input,.admin-filter-select { min-height:41px; font-size:.69rem; }
.admin-filter-select { width:auto; min-width:145px; }
.inventory-number { font-weight:800; }
.inventory-number.low { color:var(--admin-orange); }
.category-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.category-card { padding:24px; display:grid; grid-template-columns:1fr auto; gap:12px; background:white; border:1px solid var(--admin-line); border-radius:var(--admin-radius); }
.category-card h3 { margin:0 0 7px; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.35rem; font-weight:500; }
.category-card p { margin:0 0 16px; color:var(--admin-muted); font-size:.72rem; }
.category-card small { color:var(--admin-gold); font-size:.62rem; font-weight:800; }
.category-card button { align-self:start; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--admin-line); background:white; border-radius:10px; cursor:pointer; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:20px; }
.settings-card { padding:25px; background:white; border:1px solid var(--admin-line); border-radius:var(--admin-radius); }
.settings-card h3 { margin:0 0 5px; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.35rem; font-weight:500; }
.settings-card>p { margin:0 0 22px; color:var(--admin-muted); font-size:.7rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid .field--full { grid-column:1/-1; }
.field small { color:var(--admin-muted); font-size:.59rem; font-weight:400; }
.checkbox-field { min-height:44px; padding:10px 12px; display:flex; align-items:center; gap:9px; border:1px solid var(--admin-line); border-radius:11px; font-size:.7rem; }
.checkbox-field input { width:17px; height:17px; accent-color:var(--admin-navy); }
.form-actions { margin-top:22px; display:flex; justify-content:flex-end; gap:10px; }
.admin-modal-backdrop { position:fixed; z-index:100; inset:0; padding:24px; display:grid; place-items:center; background:rgba(3,15,26,.62); backdrop-filter:blur(5px); }
.admin-modal { width:min(100%,850px); max-height:calc(100vh - 48px); overflow:hidden; display:flex; flex-direction:column; background:white; border-radius:24px; box-shadow:var(--admin-shadow); }
.admin-modal__head { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--admin-line); }
.admin-modal__head h2 { margin:4px 0 0; color:var(--admin-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.55rem; font-weight:500; }
.admin-modal__head button { width:39px; height:39px; color:var(--admin-muted); border:1px solid var(--admin-line); background:white; border-radius:50%; font-size:1.4rem; cursor:pointer; }
.admin-modal__body { padding:24px; overflow:auto; }
.product-form-image { padding:15px; display:grid; grid-template-columns:100px 1fr; gap:16px; align-items:center; background:#f7f7f4; border-radius:14px; }
.product-form-image img { width:100px; height:90px; object-fit:cover; background:#e8e8e4; border-radius:11px; }
.product-form-image p { margin:0 0 8px; color:var(--admin-muted); font-size:.65rem; }
.product-form-image input[type=file] { font-size:.64rem; }
.order-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.order-summary div { padding:14px; background:#f7f7f4; border-radius:11px; }
.order-summary span { display:block; color:var(--admin-muted); font-size:.57rem; text-transform:uppercase; }
.order-summary strong { margin-top:4px; display:block; color:var(--admin-navy); font-size:.74rem; }
.order-items-list { margin:22px 0; border:1px solid var(--admin-line); border-radius:14px; overflow:hidden; }
.order-item-row { padding:13px 15px; display:grid; grid-template-columns:1fr auto auto; gap:15px; border-bottom:1px solid var(--admin-line); font-size:.7rem; }
.order-item-row:last-child { border:0; }
.admin-toast { position:fixed; z-index:130; right:26px; bottom:26px; max-width:360px; padding:14px 18px; color:white; background:#162b3c; border-radius:11px; box-shadow:var(--admin-shadow); font-size:.72rem; opacity:0; pointer-events:none; transform:translateY(15px); transition:.25s; }
.admin-toast.visible { opacity:1; transform:translateY(0); }
.sidebar-scrim { position:fixed; z-index:50; inset:0; background:rgba(3,15,26,.55); }
@media (max-width:1100px) { .metrics-grid { grid-template-columns:repeat(2,1fr); } .admin-grid-2,.settings-grid { grid-template-columns:1fr; } }
@media (max-width:800px) { .admin-layout { grid-template-columns:1fr; } .admin-workspace { grid-column:1; } .admin-sidebar { transform:translateX(-105%); transition:transform .25s; box-shadow:var(--admin-shadow); } .admin-sidebar.open { transform:translateX(0); } .sidebar-close,.sidebar-open { display:grid; } .admin-topbar { padding-inline:20px; } .admin-user small { display:none; } .password-alert,.admin-content { margin-left:20px; margin-right:20px; padding-left:0; padding-right:0; } .password-alert { padding:14px; } .admin-content { margin:0; padding:28px 20px 60px; } .category-cards { grid-template-columns:1fr; } }
@media (max-width:600px) { .login-card { padding:34px 25px; } .admin-topbar h1 { font-size:1.45rem; } .admin-user p { display:none; } .metrics-grid { grid-template-columns:1fr; } .metric-card { min-height:130px; } .admin-page-head { align-items:start; flex-direction:column; } .admin-page-head .admin-button { width:100%; } .admin-toolbar { align-items:stretch; flex-direction:column; } .search-wrap { min-width:0; } .admin-filter-select { width:100%; } .form-grid { grid-template-columns:1fr; } .form-grid .field--full { grid-column:auto; } .admin-modal-backdrop { padding:0; align-items:end; } .admin-modal { max-height:92vh; border-radius:22px 22px 0 0; } .product-form-image { grid-template-columns:1fr; } .order-summary { grid-template-columns:repeat(2,1fr); } .admin-toast { left:18px; right:18px; bottom:18px; } }