:root{
  --bg:#F4EFE3; --surface:#FBF8F0; --surface-2:#EFE8D6;
  --text:#241F17; --text-secondary:#6B6252; --text-muted:#8C8371;
  --border:#DCD2B8; --border-strong:#C7BA95;
  --accent:#1F3B54; --accent-soft:#DCE5EA;
  --cta:#B96E24; --cta-text:#FBF8F0;
  --success:#4B6B3A; --success-soft:#E3E9D8;
  --attention:#9C4326; --attention-soft:#F1DDD3;
  --radius:3px;
}
[data-mode="dark"]{
  --bg:#0D2136; --surface:#122B44; --surface-2:#0A1B2C;
  --text:#E8F1F7; --text-secondary:#9FBAD0; --text-muted:#6F8AA3;
  --border:#274864; --border-strong:#3A6486;
  --accent:#7FD1E8; --accent-soft:#173C55;
  --cta:#E8A94A; --cta-text:#12233A;
  --success:#8FCB7A; --success-soft:#1B3324;
  --attention:#F08A6C; --attention-soft:#3A2119;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    --bg:#0D2136; --surface:#122B44; --surface-2:#0A1B2C;
    --text:#E8F1F7; --text-secondary:#9FBAD0; --text-muted:#6F8AA3;
    --border:#274864; --border-strong:#3A6486;
    --accent:#7FD1E8; --accent-soft:#173C55;
    --cta:#E8A94A; --cta-text:#12233A;
    --success:#8FCB7A; --success-soft:#1B3324;
    --attention:#F08A6C; --attention-soft:#3A2119;
  }
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:600; margin:0; color:var(--text);}
a{color:inherit;}
.wrap{max-width:1000px; margin:0 auto; padding:28px 20px 80px;}
.topbar{border-bottom:1px solid var(--border); padding:18px 20px;}
.topbar-inner{max-width:1000px; margin:0 auto;}
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.02em;}
.wordmark span{color:var(--cta);}

.plotbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:24px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; color:var(--text-secondary);}
.field input, .field select{font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); color:var(--text); width:100px;}
.field select{width:130px;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:8px;}
.card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; text-decoration:none;}
.card-art{padding:18px; border-bottom:1px solid var(--border); background:var(--surface-2); color:var(--accent);}
.card-body{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;}
.meta-row{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-secondary);}
.meta-row span{border:1px solid var(--border); border-radius:var(--radius); padding:2px 7px;}
.price-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:4px;}
.price{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px;}
.badge{display:inline-block; font-size:12px; font-weight:500; padding:3px 9px; border-radius:20px;}
.badge-neutral{background:var(--surface-2); color:var(--text-secondary);}
.badge-match{background:var(--success-soft); color:var(--success);}
.badge-nomatch{background:var(--attention-soft); color:var(--attention);}

button.btn, a.btn{font:inherit; font-size:14px; font-weight:500; cursor:pointer; border-radius:var(--radius); padding:10px 16px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); text-decoration:none; display:inline-block;}
button.btn:hover, a.btn:hover{border-color:var(--accent);}
button.btn-primary, a.btn-primary{background:var(--cta); border-color:var(--cta); color:var(--cta-text);}
button.btn-block{width:100%;}

.detail-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:32px;}
@media (max-width:760px){.detail-layout{grid-template-columns:1fr;}}
.detail-art{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; color:var(--accent);}
.detail-panel{display:flex; flex-direction:column; gap:16px;}
.banner{border-radius:var(--radius); padding:14px 16px; font-size:14px;}
.banner-match{background:var(--success-soft); color:var(--success);}
.banner-nomatch{background:var(--attention-soft); color:var(--attention);}
.spec-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-size:14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 0;}
.spec-list dt{color:var(--text-muted); font-size:12px; margin-bottom:2px;}
.spec-list dd{margin:0; font-weight:500;}
.cta-row{display:flex; gap:10px; flex-wrap:wrap;}

.order-form{border:1px solid var(--border); border-radius:var(--radius); padding:20px; background:var(--surface); margin-top:16px;}
.order-form .field{width:100%; margin-bottom:12px;}
.order-form input{width:100%;}
.error-note{color:var(--attention); font-size:13px; margin-top:8px;}
.toast{margin-top:18px; background:var(--success-soft); color:var(--success); padding:14px 16px; border-radius:var(--radius); font-size:14px;}
.section-gap{margin-top:6px; margin-bottom:22px; color:var(--text-secondary); font-size:14px;}

/* Dashboard shared styles (admin / in-house / freelancer) */
.subtabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.subtab{font:inherit; font-size:13px; padding:7px 12px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-secondary); text-decoration:none; display:inline-block;}
.subtab.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600;}
.stats-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.stat-card{flex:1; min-width:130px; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--surface);}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px;}
.stat-label{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.admin-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px;}
.admin-table th{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-strong); color:var(--text-secondary); font-weight:500; font-size:12px;}
.admin-table td{padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
.item-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:14px 16px; margin-bottom:12px;}
.item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.item-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.item-meta{font-size:12px; color:var(--text-secondary); margin-top:3px;}
.item-notes{font-size:13px; color:var(--text-secondary); margin-top:8px; background:var(--surface-2); padding:8px 10px; border-radius:var(--radius);}
.b-blue{background:var(--accent-soft); color:var(--accent);}
.b-amber{background:#F1E4D2; color:var(--cta);}
.b-rust{background:var(--attention-soft); color:var(--attention);}
.b-green{background:var(--success-soft); color:var(--success);}
.add-form{border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--surface); max-width:680px; margin-top:10px;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:12px;}
.form-grid .field input, .form-grid .field select, .form-grid .field textarea{width:100%;}
.review-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.topnav{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.topnav .who{font-size:13px; color:var(--text-secondary);}
.topnav .who a{color:var(--attention); text-decoration:none;}