:root { color-scheme: light; --ink:#0d1b2a; --navy:#112240; --gold:#c9a84c; --paper:#f5f0e8; --white:#fffefa; --muted:#747b7c; --line:rgba(13,27,42,.14); --teal:#4a8c83; font-family:Inter,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(ellipse at 84% 10%,rgba(201,168,76,.10),transparent 32%),var(--paper); }
button,input,textarea,select { font:inherit; }
.admin-header { height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 6vw; border-bottom:1px solid var(--line); background:rgba(245,240,232,.94); }
.brand { color:var(--ink); font:600 24px/1 'Cormorant Garamond',serif; letter-spacing:2px; text-decoration:none; }
.brand span { color:var(--gold); }
.brand small { margin-left:11px; color:var(--muted); font:600 9px Inter,sans-serif; letter-spacing:1.3px; }
.header-actions { display:flex; align-items:center; gap:24px; }
.header-actions a,.header-actions button { padding:5px 0; border:0; background:none; color:var(--muted); font-size:10px; text-decoration:none; cursor:pointer; }
.header-actions a:hover,.header-actions button:hover { color:var(--gold); }
.admin-main { max-width:1320px; min-height:calc(100vh - 72px); margin:auto; padding:52px 5vw 80px; }
.login-view { width:min(100%,440px); margin:9vh auto; padding:38px; border:1px solid var(--line); background:var(--white); box-shadow:0 20px 55px rgba(13,27,42,.07); animation:rise .45s both; }
.eyebrow { margin:0 0 9px; color:#8c7130; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
.login-view h1 { margin:0; font:500 47px/.96 'Cormorant Garamond',serif; }
.login-view h1 em { color:var(--teal); font-weight:400; }
.login-copy { margin:15px 0 27px; color:var(--muted); font-size:12px; line-height:1.6; }
label { display:block; margin-bottom:7px; font-size:10px; font-weight:700; }
input:not([type=checkbox]):not([type=file]),textarea { width:100%; min-height:42px; padding:10px 11px; border:1px solid var(--line); border-radius:6px; outline:none; background:white; color:var(--ink); font-size:12px; transition:border-color .18s,box-shadow .18s; }
textarea { resize:vertical; }
input:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,168,76,.13); }
.login-view input { margin-bottom:12px; }
.primary-button { min-height:44px; padding:0 18px; border:0; border-radius:6px; background:var(--ink); color:white; font-size:11px; font-weight:600; cursor:pointer; transition:background .2s,transform .2s,box-shadow .2s; }
.primary-button:hover { background:var(--navy); transform:translateY(-1px); }
.primary-button:not(:disabled):hover { box-shadow:0 6px 15px rgba(13,27,42,.16); }
.login-view .primary-button { width:100%; }
.form-status,.page-status { min-height:18px; margin:10px 0 0; color:#a24e40; font-size:11px; line-height:1.5; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
.dashboard-heading h1 { margin:0; font:500 50px/.95 'Cormorant Garamond',serif; }
.secure-label { padding:7px 10px; border:1px solid rgba(74,140,131,.35); color:#376d67; font-size:9px; }
.admin-tabs { display:flex; gap:6px; margin-bottom:20px; padding:6px; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:rgba(255,254,250,.78); scrollbar-width:thin; }
.admin-tabs button { flex:1 0 auto; min-height:42px; padding:0 17px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background .2s,color .2s,transform .2s,box-shadow .2s; }
.admin-tabs button:hover { transform:translateY(-1px); background:rgba(201,168,76,.12); color:var(--ink); }
.admin-tabs button[aria-selected=true] { background:var(--ink); color:white; box-shadow:0 4px 12px rgba(13,27,42,.14); }
.admin-tabs button[aria-selected=true]:hover { background:var(--navy); color:white; }
.admin-tabs button:focus-visible,.primary-button:focus-visible,.text-button:focus-visible,.product-actions button:focus-visible { outline:3px solid rgba(201,168,76,.65); outline-offset:3px; }
.tab-panel:not([hidden]) { animation:panel-enter .24s ease-out both; }
.tab-panel > .dashboard-grid,.tab-panel > section { min-width:0; }
#panel-orders .orders-panel { margin-top:0; }
.dashboard-grid { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.45fr); gap:20px; align-items:start; }
.editor-panel,.products-panel { padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--white); }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.section-heading h2 { margin:0; font:500 25px/1 'Cormorant Garamond',serif; }
.section-heading p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.text-button { border:0; background:none; color:var(--muted); font-size:10px; cursor:pointer; }
#product-form { padding-top:17px; }
#product-form > label { margin-top:13px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:13px; }
.field-row label { margin-bottom:7px; }
.field-row input { margin-bottom:0; }
.variant-setup { margin:18px 0 14px; padding:14px; border:1px solid var(--line); border-radius:7px; }
.variant-setup legend { padding:0 6px; color:#8c7130; font-size:10px; font-weight:700; }
.variant-setup > .publish-toggle { margin:3px 0 0; }
.variant-field-label { display:block; margin:4px 0 8px; font-size:10px; font-weight:700; }
.size-checkboxes { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.size-checkboxes label { margin:0; cursor:pointer; }
.size-checkboxes input { position:absolute; opacity:0; pointer-events:none; }
.size-checkboxes span { min-width:38px; min-height:34px; display:grid; place-items:center; padding:0 9px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:10px; transition:background .18s,color .18s,border-color .18s; }
.size-checkboxes input:checked + span { border-color:var(--ink); background:var(--ink); color:white; }
.size-checkboxes input:focus-visible + span { outline:3px solid rgba(201,168,76,.5); outline-offset:2px; }
#variant-options > label[for="product-colors"] { margin:0 0 7px; }
.variant-matrix { display:grid; gap:7px; margin-top:13px; }
.variant-row { display:grid; grid-template-columns:minmax(72px,1.05fr) repeat(3,minmax(0,1fr)); align-items:end; gap:7px; padding:9px; border:1px solid var(--line); border-radius:5px; background:#fffefa; }
.variant-name { align-self:center; color:var(--ink); font-size:10px; }
.variant-input { min-width:0; margin:0; color:var(--muted); font-size:8px; }
.variant-input input { width:100%; min-height:34px; margin-top:5px; padding:6px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--ink); font:inherit; font-size:10px; }
.photo-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:17px; }
.photo-heading label { margin:0; }
.photo-heading span { color:var(--muted); font-size:9px; }
input[type=file] { max-width:100%; margin-top:8px; color:var(--muted); font-size:10px; }
.image-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.image-thumb { position:relative; width:58px; height:58px; border:1px solid var(--line); background:#eee9df; }
.image-thumb img { width:100%; height:100%; object-fit:cover; }
.image-thumb button { position:absolute; top:-5px; right:-5px; width:19px; height:19px; border:0; border-radius:50%; background:var(--ink); color:white; cursor:pointer; }
.publish-toggle { display:flex; align-items:center; gap:8px; margin:18px 0; font-size:10px; cursor:pointer; }
.publish-toggle input { accent-color:var(--teal); }
#save-product { width:100%; }
.live-mark { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; }
.live-mark i { width:6px; height:6px; border-radius:50%; background:var(--teal); }
.admin-product-list { display:grid; gap:0; }
.catalog-search { margin:18px 0 4px; color:var(--muted); font-size:10px; }
.catalog-search input { margin-top:7px; }
.admin-product { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px 8px; border-bottom:1px solid var(--line); border-radius:6px; transition:background .18s,transform .18s,box-shadow .18s; }
.admin-product:hover { transform:translateY(-1px); background:var(--white); box-shadow:0 5px 16px rgba(13,27,42,.06); }
.admin-product:last-child { border-bottom:0; }
.admin-product img { width:64px; height:68px; object-fit:cover; background:#eee9df; }
.admin-product h3 { margin:0 0 5px; font:500 20px/1 'Cormorant Garamond',serif; }
.admin-product p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.product-actions { display:flex; gap:6px; }
.product-actions button { min-height:30px; padding:0 9px; border:1px solid var(--line); border-radius:5px; background:transparent; font-size:9px; cursor:pointer; transition:border-color .18s,color .18s,background .18s,transform .18s; }
.product-actions button:hover { transform:translateY(-1px); border-color:var(--gold); background:rgba(201,168,76,.08); }
.product-actions .delete-button:hover { border-color:#b55c4e; color:#a24e40; }
.empty-catalog { padding:35px 5px; color:var(--muted); font-size:11px; line-height:1.6; }
.orders-panel { margin-top:20px; padding:22px; border:1px solid var(--line); background:var(--white); }
.orders-help { margin:16px 0 4px; color:var(--muted); font-size:10px; line-height:1.6; }
.order-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:12px; }
.admin-order { min-width:0; padding:17px; border:1px solid var(--line); border-radius:8px; background:#fffefa; transition:transform .2s,box-shadow .2s,border-color .2s; }
.admin-order:hover { transform:translateY(-2px); border-color:rgba(201,168,76,.5); box-shadow:0 8px 22px rgba(13,27,42,.07); }
.order-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.order-title h3 { margin:0; font:500 20px/1 'Cormorant Garamond',serif; }
.order-status { padding:6px 8px; background:#f5ecd3; color:#81651f; font-size:9px; white-space:nowrap; }
.order-status.is-shipped { background:#e4efe9; color:#376d67; }
.order-date,.order-customer,.order-address,.order-items,.order-total { font-size:10px; line-height:1.6; }
.order-date { margin:9px 0; color:var(--muted); }
.stock-warning { margin:0 0 9px; padding:8px 10px; border-left:3px solid #b55c4e; background:#fbf3f0; color:#743b30; font-size:10px; line-height:1.5; }
.stock-warning[hidden] { display:none; }
.order-customer { display:grid; gap:3px; padding:10px 0; border-top:1px solid var(--line); }
.order-customer a { color:#376d67; overflow-wrap:anywhere; }
.order-address { margin:3px 0 0; color:var(--muted); }
.order-items { display:grid; gap:4px; margin:0; padding:10px 0 10px 17px; border-top:1px solid var(--line); }
.order-total { margin:0; font-weight:700; }
.order-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.order-actions .primary-button { min-height:36px; font-size:10px; }
.store-settings-panel,.discounts-panel { margin:0 0 20px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--white); }
.managers-panel { margin:0 0 20px; padding:22px; border:1px solid rgba(201,168,76,.35); border-radius:8px; background:var(--white); }
.manager-layout { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:26px; padding-top:18px; }
#manager-form > label:not(.publish-toggle) { margin:14px 0 7px; }
#manager-form > input { width:100%; min-height:42px; padding:10px 11px; border:1px solid var(--line); border-radius:2px; background:white; color:var(--ink); font-size:12px; }
.permission-list { margin:18px 0; padding:13px; border:1px solid var(--line); }
.permission-list legend { padding:0 6px; color:#8c7130; font-size:10px; font-weight:700; }
.permission-list .publish-toggle { margin:10px 0; align-items:flex-start; line-height:1.5; }
.permission-list .publish-toggle:last-child { margin-bottom:2px; }
.manager-list { display:grid; align-content:start; gap:9px; }
.manager-card { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:7px; background:#fffefa; transition:transform .2s,box-shadow .2s,border-color .2s; }
.manager-card:hover { transform:translateY(-2px); border-color:rgba(201,168,76,.5); box-shadow:0 7px 18px rgba(13,27,42,.06); }
.manager-card strong { font-size:12px; }
.manager-card p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.5; overflow-wrap:anywhere; }
.manager-status { display:inline-block; margin-top:8px; padding:4px 7px; background:#e4efe9; color:#376d67; font-size:8px; text-transform:uppercase; letter-spacing:.5px; }
.manager-status.is-disabled { background:#f5ecd3; color:#81651f; }
.manager-card.is-disabled { opacity:.72; }
.store-settings-panel form { padding-top:18px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.settings-wide { grid-column:1 / -1; }
.settings-grid textarea { display:block; }
.store-control-group { margin:22px 0 16px; padding:16px; border:1px solid var(--line); }
.store-control-group legend { padding:0 7px; color:#8c7130; font-size:10px; font-weight:700; }
.store-control-group .publish-toggle { margin:2px 0 14px; }
.store-control-group .settings-grid { margin-top:14px; }
.settings-help { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.discount-layout { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr); gap:26px; padding-top:18px; }
#discount-form { min-width:0; }
#discount-form > label:not(.publish-toggle) { margin:14px 0 7px; }
#discount-form > input,#discount-form select { width:100%; min-height:42px; padding:10px 11px; border:1px solid var(--line); border-radius:2px; background:white; color:var(--ink); font-size:12px; }
#discount-form .publish-toggle { margin:16px 0; }
.discount-form-actions { display:flex; align-items:center; gap:14px; }
.discount-form-actions .primary-button { min-height:38px; font-size:10px; }
.discount-list { display:grid; align-content:start; gap:9px; }
.discount-card { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px; border:1px solid var(--line); border-radius:7px; background:#fffefa; transition:transform .2s,box-shadow .2s,border-color .2s; }
.discount-card:hover { transform:translateY(-2px); border-color:rgba(201,168,76,.5); box-shadow:0 7px 18px rgba(13,27,42,.06); }
.discount-card strong { font-size:12px; letter-spacing:.5px; }
.discount-card p { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
@media(max-width:700px) { .discount-layout,.manager-layout { grid-template-columns:1fr; } }
@media(max-width:520px) { .store-settings-panel,.discounts-panel,.managers-panel { padding:17px 14px; } .settings-grid { grid-template-columns:1fr; gap:12px; } .settings-wide { grid-column:auto; } .store-control-group { padding:12px; } .discount-card,.manager-card { align-items:flex-start; flex-direction:column; } .variant-row { grid-template-columns:repeat(3,minmax(0,1fr)); } .variant-name { grid-column:1/-1; } }
[hidden] { display:none !important; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes panel-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:850px) { .dashboard-grid { grid-template-columns:1fr; } .admin-main { padding-top:38px; } }
@media(max-width:520px) { .admin-header { height:64px; padding-inline:5vw; } .brand { font-size:20px; } .brand small { display:none; } .header-actions { gap:13px; } .header-actions a,.header-actions button { font-size:9px; } .admin-main { padding:32px 5vw 55px; } .login-view { margin:6vh auto; padding:28px 22px; } .dashboard-heading { align-items:center; } .dashboard-heading h1 { font-size:40px; } .secure-label { font-size:8px; } .admin-tabs { gap:3px; padding:4px; } .admin-tabs button { min-height:39px; padding:0 12px; font-size:10px; } .editor-panel,.products-panel,.orders-panel { padding:17px 14px; } .admin-product { grid-template-columns:52px minmax(0,1fr); gap:10px; } .admin-product img { width:52px; height:58px; } .product-actions { grid-column:2; } .product-actions button { min-height:28px; } .order-list { grid-template-columns:1fr; } .order-title h3 { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }