:root { --ink:#19202d; --muted:#667085; --line:#e4e7ec; --panel:#fff; --soft:#f7f8fa; --brand:#315efb; --brand-dark:#2549c9; --danger:#c43232; --warning:#9b5b00; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--soft); font:15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header { height:68px; padding:0 max(24px, calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-size:17px; font-weight:750; text-decoration:none; letter-spacing:-.025em; }
a { color:var(--brand); } nav a { font-size:14px; text-decoration:none; }
.container { max-width:1160px; margin:0 auto; padding:54px 24px 80px; }
.hero { max-width:610px; margin:0 0 38px; } .hero h1,.center-card h1,.login-card h1,.dashboard-heading h1 { margin:5px 0 10px; font-size:clamp(28px, 4vw, 42px); letter-spacing:-.045em; line-height:1.1; } .hero>p:last-child { color:var(--muted); margin:0; }
.eyebrow { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.13em; margin:0; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:16px; }
.product-card,.panel,.center-card,.login-card,.empty-state { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.025); }
.product-card { min-height:210px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; } .product-card h2 { margin:0; font-size:19px; letter-spacing:-.02em; } .price { margin:17px 0 2px; font-size:27px; font-weight:760; letter-spacing:-.04em; } .stock { margin:0; color:#14804a; font-size:13px; } .stock-empty { color:var(--warning); }
.button { appearance:none; width:100%; padding:11px 16px; border:1px solid var(--brand); border-radius:8px; background:var(--brand); color:white; cursor:pointer; font:inherit; font-weight:700; text-align:center; text-decoration:none; transition:background .16s; } .button:hover { background:var(--brand-dark); } .button-secondary { display:inline-block; width:auto; margin-top:18px; background:white; color:var(--brand); }
.dialog { width:min(460px, calc(100vw - 32px)); border:1px solid var(--line); border-radius:14px; padding:30px; color:var(--ink); box-shadow:0 24px 80px rgba(16,24,40,.28); } .dialog::backdrop { background:rgba(16,24,40,.42); } .dialog h2 { margin:5px 0 20px; font-size:23px; letter-spacing:-.03em; } .dialog-close { float:right; } .dialog-close button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:27px; line-height:.8; } .form-stack { display:grid; gap:15px; } label { display:grid; gap:6px; color:#344054; font-size:14px; font-weight:650; } input,textarea { width:100%; padding:10px 11px; border:1px solid #cfd4dc; border-radius:8px; color:var(--ink); background:#fff; font:inherit; font-weight:400; } input:focus,textarea:focus { outline:3px solid rgba(49,94,251,.16); border-color:var(--brand); } textarea { resize:vertical; } .form-hint,.muted,.panel-title p { color:var(--muted); font-size:13px; margin:0; } .announcement-content { white-space:pre-wrap; color:#475467; }
.center-card,.login-card,.empty-state { max-width:560px; margin:48px auto; padding:38px; text-align:center; } .center-card p { color:var(--muted); } .center-card form { margin-top:25px; } .login-card { max-width:400px; text-align:left; } .login-card h1 { font-size:30px; margin-bottom:26px; }
.flash-stack { display:grid; gap:8px; margin-bottom:20px; } .flash { padding:11px 14px; border-radius:8px; } .flash-success { color:#066b3a; background:#ecfdf3; border:1px solid #abefc6; } .flash-error { color:#a12727; background:#fff1f1; border:1px solid #fecdca; }
.dashboard-heading,.panel-title,.admin-product { display:flex; align-items:center; justify-content:space-between; gap:18px; } .dashboard-heading { margin-bottom:25px; } .dashboard-heading h1 { font-size:32px; margin:2px 0 0; } .link-button { appearance:none; border:0; background:transparent; color:var(--brand); cursor:pointer; padding:3px; font:inherit; font-weight:650; } .danger { color:var(--danger); }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; } .panel { padding:24px; } .panel h2 { margin:0 0 18px; font-size:18px; letter-spacing:-.02em; } .wide-panel { margin-top:16px; } .panel-title { align-items:flex-start; margin-bottom:18px; } .panel-title h2 { margin:0; } .panel-title>span { color:var(--muted); font-size:13px; white-space:nowrap; }
.admin-product-list { border-top:1px solid var(--line); } .admin-product { padding:16px 0; border-bottom:1px solid var(--line); align-items:flex-start; } .product-summary { flex:1; } .product-summary h3 { margin:0 0 3px; font-size:16px; } .product-summary p { color:var(--muted); margin:0; font-size:13px; } .is-archived { opacity:.6; } details { min-width:155px; } summary { color:var(--brand); cursor:pointer; font-size:13px; font-weight:650; } .compact-form { margin-top:12px; width:min(420px, 100%); } .button-small { width:auto; padding:8px 12px; font-size:13px; }
.stock-text { min-width:220px; } .stock-text pre { max-width:420px; max-height:190px; overflow:auto; margin:9px 0 0; padding:10px; border-radius:7px; background:#f7f8fa; color:#344054; white-space:pre-wrap; word-break:break-word; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:660px; } th,td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; } th { color:var(--muted); font-size:12px; font-weight:700; } td small { display:block; max-width:260px; margin-top:4px; color:var(--muted); } .actions { display:flex; gap:10px; } .status { display:inline-block; color:#344054; background:#f2f4f7; border-radius:20px; padding:2px 8px; font-size:12px; } .status-warning { color:#8a5200; background:#fff5d8; } .status-danger { color:#a12727; background:#ffe6e6; } .order-id { max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (max-width:700px) { .container { padding:34px 16px 56px; } .site-header { padding:0 16px; } .admin-grid { grid-template-columns:1fr; } .admin-product { display:grid; grid-template-columns:1fr auto; } .admin-product details { grid-column:1/-1; } .hero h1 { font-size:32px; } }