:root { --ink:#0d0d0d; --muted:#76736d; --paper:#ffffff; --surface:#ffffff; --line:rgba(13,13,13,.1); --sage:#65705f; --sage-light:rgba(174,184,160,.2); --accent:#ff5c34; --accent-strong:#d9431f; --plum:#351e28; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.admin-shell { width:min(1400px,calc(100% - 28px)); margin:0 auto; padding:32px 0 70px; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Georgia,serif; font-weight:500; }
h1 { font-size:clamp(2.5rem,6vw,5rem); line-height:.95; }
h2 { font-size:1.7rem; }
.login-card { width:min(460px,100%); margin:10vh auto; padding:32px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 20px 60px rgba(0,0,0,.08); }
.login-card > p:not(.eyebrow) { color:var(--muted); }
.login-card form,.editor-form { display:grid; gap:15px; margin-top:25px; }
label { display:grid; gap:7px; }
label span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
input,select,textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); }
textarea { resize:vertical; line-height:1.6; }
.primary-button,.cms-header button,.cms-header a,.danger-button { padding:10px 15px; border:0; border-radius:999px; font-weight:800; text-decoration:none; }
.primary-button { background:var(--accent); color:white; box-shadow:0 10px 24px rgba(255,92,52,.2); }
.form-status { margin:0; color:var(--muted); font-size:.72rem; }
.cms-header { margin-bottom:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cms-header nav { display:flex; flex-wrap:wrap; gap:8px; }
.cms-header nav button,.cms-header nav a { background:white; color:var(--ink); border:1px solid var(--line); }
.analytics-panel { margin-bottom:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.analytics-panel .panel-heading button { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--accent-strong); font-weight:800; }
.analytics-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.analytics-metrics article { padding:16px; display:grid; gap:4px; border-radius:12px; background:var(--sage-light); }
.analytics-metrics span { color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.analytics-metrics strong { color:var(--ink); font-family:Georgia,serif; font-size:2.5rem; font-weight:500; line-height:1; }
.analytics-metrics small { color:var(--muted); font-size:.64rem; }
.analytics-chart { height:150px; margin-top:18px; padding:10px 4px 0; display:grid; grid-template-columns:repeat(30,minmax(3px,1fr)); gap:3px; align-items:end; border-bottom:1px solid var(--line); }
.chart-day { height:100%; min-width:0; display:grid; grid-template-rows:1fr auto; gap:4px; }
.chart-bars { display:flex; align-items:end; justify-content:center; gap:1px; }
.chart-bars i { width:42%; min-width:1px; display:block; border-radius:3px 3px 0 0; }
.site-bar { background:var(--plum); }
.blog-bar { background:var(--accent); }
.chart-day span { overflow:hidden; color:var(--muted); font-size:.45rem; text-align:center; }
.analytics-note { margin:10px 0 0; color:var(--muted); font-size:.65rem; }
.reels-panel { margin-bottom:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.reels-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; }
.reel-search { display:grid; grid-template-columns:1fr auto; gap:7px; }
.reel-search button,.reel-actions button,.reel-row-head button { padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--accent-strong); font-weight:800; }
.reel-product-list { max-height:520px; margin-top:10px; display:grid; gap:7px; overflow:auto; }
.reel-product-list button { padding:8px; display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px; background:white; text-align:left; }
.reel-product-list button:hover { border-color:var(--accent); }
.reel-product-list img,.reel-product-list > button > span { width:42px; height:42px; flex:0 0 auto; object-fit:contain; border-radius:7px; background:var(--paper); display:grid; place-items:center; }
.reel-product-list div { min-width:0; display:grid; gap:2px; }
.reel-product-list small,.reel-product-list em { color:var(--muted); font-size:.58rem; font-style:normal; }
.reel-product-list strong { overflow:hidden; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.reel-editor { min-width:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#f8f8f6; }
.reel-product-heading { margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.reel-product-heading img { width:65px; height:65px; object-fit:contain; border-radius:10px; background:white; }
.reel-product-heading span { color:var(--accent); font-size:.62rem; font-weight:800; text-transform:uppercase; }
.reel-product-heading h3 { margin:3px 0 0; font-family:Georgia,serif; font-size:1.5rem; font-weight:500; }
.reel-rows { margin-top:14px; display:grid; gap:10px; }
.reel-row { padding:13px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border:1px solid var(--line); border-radius:12px; background:white; }
.reel-row-head { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }
.reel-row-head button { padding:5px 9px; color:var(--accent); }
.reel-actions { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reel-actions > div { display:flex; flex-wrap:wrap; gap:7px; }
.reel-actions .primary-button { border:0; color:white; }
.ads-manager,.outreach-panel { margin-bottom:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.ads-manager .panel-heading .primary-button { border:0; color:white; }
.outreach-panel .panel-heading button { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--accent-strong); font-weight:800; }
.ad-settings-grid { margin:16px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ad-setting { padding:14px; display:grid; gap:10px; border:1px solid var(--line); border-radius:12px; background:#f8f8f6; }
.ad-setting-head { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.ad-setting-head > div { min-width:0; display:grid; gap:3px; }
.ad-setting-head span { color:var(--accent); font-size:.56rem; font-weight:800; text-transform:uppercase; }
.ad-setting-head strong { font-size:.74rem; line-height:1.3; }
.ad-toggle { display:flex; grid-auto-flow:column; align-items:center; gap:5px; }
.ad-toggle input { width:auto; }
.ad-toggle span { color:var(--sage); font-size:.58rem; }
.outreach-grid { margin:16px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.outreach-card { padding:14px; display:grid; gap:10px; border:1px solid var(--line); border-radius:12px; background:#f8f8f6; }
.outreach-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.outreach-card-head span { color:var(--accent); font-size:.58rem; font-weight:800; text-transform:uppercase; }
.outreach-card-head small,.outreach-card p { color:var(--muted); font-size:.66rem; line-height:1.5; }
.outreach-card strong { font-size:.78rem; line-height:1.35; }
.outreach-card textarea { font-size:.72rem; }
.outreach-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.outreach-card-actions a,.outreach-card-actions button { padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--accent-strong); font-size:.68rem; font-weight:800; text-decoration:none; }
.cms-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
.post-list-panel,.editor-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.post-list-panel { position:sticky; top:15px; max-height:calc(100vh - 30px); overflow:auto; }
.panel-heading { margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-heading > span { padding:5px 8px; border-radius:999px; background:var(--sage-light); color:var(--ink); font-size:.68rem; font-weight:800; }
.admin-post-list { display:grid; gap:7px; }
.admin-post-list button { padding:12px; display:grid; gap:5px; border:1px solid var(--line); border-radius:10px; background:white; text-align:left; }
.admin-post-list button:hover { border-color:var(--accent); }
.admin-post-list span { color:var(--accent); font-size:.58rem; font-weight:800; text-transform:uppercase; }
.admin-post-list strong { font-size:.78rem; line-height:1.35; }
.admin-post-list small { color:var(--muted); font-size:.62rem; }
.editor-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wide { grid-column:1 / -1; }
.editor-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.danger-button { border:1px solid rgba(217,67,31,.25); background:rgba(255,92,52,.08); color:var(--accent-strong); }
.empty-state { color:var(--muted); font-size:.75rem; }
@media(max-width:1100px){.ad-settings-grid,.outreach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.cms-header{align-items:flex-start;flex-direction:column}.analytics-metrics{grid-template-columns:1fr}.analytics-chart{gap:1px}.reels-layout,.cms-layout,.ad-settings-grid,.outreach-grid{grid-template-columns:1fr}.reel-product-list{max-height:300px}.reel-row{grid-template-columns:1fr}.reel-row .wide,.reel-row-head{grid-column:auto}.reel-actions{align-items:stretch;flex-direction:column}.post-list-panel{position:static;max-height:400px}.editor-form{grid-template-columns:1fr}.wide{grid-column:auto}.editor-actions{align-items:stretch;flex-direction:column}}
