:root { --ink:#171513; --muted:#766f67; --line:#e5e0d9; --paper:#fff; --bg:#f4f1ec; --accent:#1d1b18; --danger:#a73a35; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.admin-header { position:sticky; top:0; z-index:20; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 max(28px,calc((100% - 1200px)/2)); color:#fff; background:#181715; }
.admin-brand { font-family:Georgia,serif; font-size:23px; letter-spacing:.08em; }
.admin-brand small { margin-left:8px; font-family:inherit; font-size:12px; letter-spacing:0; opacity:.55; }
.admin-header nav { display:flex; align-items:center; gap:27px; font-size:14px; }
.admin-header form { margin:0; }
.admin-header button { padding:6px 0; color:#fff; border:0; background:transparent; cursor:pointer; }
.admin-shell { width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:45px 0 80px; }
.admin-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:28px; }
.admin-page-heading p { margin:0 0 5px; color:#9a9187; font-size:11px; letter-spacing:.18em; }
.admin-page-heading h1 { margin:0; font-size:34px; }
.admin-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 22px; color:#fff; border:0; border-radius:7px; background:var(--accent); cursor:pointer; }
.text-link { color:var(--muted); }
.alert { margin-bottom:20px; padding:14px 17px; border-radius:8px; background:#fff; }
.alert.success { color:#246e3b; border:1px solid #b9dfc4; background:#f1fbf4; }
.alert.error { color:#8a2d29; border:1px solid #ebc0bd; background:#fff5f4; }
.alert ul { margin:7px 0 0; }
.table-card,.form-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(40,30,20,.04); }
table { width:100%; border-collapse:collapse; }
th,td { padding:15px 16px; text-align:left; border-bottom:1px solid #eeeae5; vertical-align:middle; }
th { color:var(--muted); background:#faf9f7; font-size:12px; letter-spacing:.05em; }
td { font-size:14px; }
.product-cell { display:flex; align-items:center; gap:13px; }
.product-cell img { width:66px; height:66px; object-fit:cover; border-radius:8px; }
.product-cell strong,.product-cell span { display:block; }
.product-cell span,.muted { margin-top:4px; color:var(--muted); font-size:12px; }
.status { display:inline-flex; padding:5px 10px; border-radius:999px; font-size:12px; }
.status.on { color:#26723c; background:#e8f7ec; }
.status.off { color:#777; background:#eee; }
.actions { white-space:nowrap; }
.actions a,.actions button { margin-right:10px; padding:0; border:0; background:transparent; cursor:pointer; }
.actions button { color:var(--danger); }
.actions form { display:inline; }
.admin-form { display:grid; gap:20px; }
.form-card { padding:25px; }
.form-card h2 { margin:0 0 23px; font-size:20px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.form-grid label { display:grid; gap:8px; color:#504a44; font-size:13px; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; padding:11px 12px; border:1px solid #d8d2ca; border-radius:7px; color:var(--ink); background:#fff; outline:none; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:#6d645b; box-shadow:0 0 0 3px rgba(80,70,60,.08); }
.field-hint { color:#91877d; font-size:12px; line-height:1.6; }
.form-grid .full { grid-column:1/-1; }
.form-grid .checkbox,.checkbox { display:flex; align-items:center; align-self:end; gap:8px; }
.form-grid .checkbox input,.checkbox input { width:auto; }
.existing-images { display:flex; gap:12px; margin-bottom:22px; }
.existing-images img { width:100px; height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.form-actions { display:flex; align-items:center; gap:20px; }
.contact-editor { display:grid; grid-template-columns:200px 1fr; gap:30px; }
.contact-media { display:grid; align-content:start; gap:24px; }
.contact-media-item { display:grid; gap:9px; color:var(--muted); font-size:12px; }
.contact-avatar-preview { width:180px; height:180px; object-fit:cover; object-position:50% 18%; border-radius:50%; }
.contact-qr-preview,.contact-qr-empty { width:180px; height:180px; border:1px solid var(--line); border-radius:12px; background:#faf9f7; }
.contact-qr-preview { object-fit:contain; padding:8px; }
.contact-qr-empty { display:grid; place-items:center; color:#9a9187; }

.login-page { min-height:100vh; display:grid; place-items:center; padding:25px; background:linear-gradient(135deg,#e8e0d5,#f9f7f4); }
.login-card { width:min(430px,100%); padding:42px; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(40,30,20,.14); }
.login-brand { display:block; font-family:Georgia,serif; font-size:28px; letter-spacing:.1em; }
.login-card h1 { margin:15px 0 28px; font-size:23px; }
.login-card > label:not(.checkbox) { display:grid; gap:8px; margin:17px 0; color:var(--muted); font-size:13px; }
.login-card input[type=text],.login-card input[type=email],.login-card input[type=password] { width:100%; padding:12px; color:var(--ink); border:1px solid #d8d2ca; border-radius:7px; background:#fff; outline:none; }
.login-card input[type=text]:focus,.login-card input[type=email]:focus,.login-card input[type=password]:focus { border-color:#6d645b; box-shadow:0 0 0 3px rgba(80,70,60,.08); }
.login-card .checkbox { margin:17px 0; color:var(--muted); font-size:13px; }
.login-card .admin-button { width:100%; }
.back-link { display:block; margin-top:20px; text-align:center; color:var(--muted); font-size:13px; }

@media(max-width:800px) {
    .admin-header { align-items:flex-start; padding:18px 20px; }
    .admin-header nav { align-items:flex-end; flex-direction:column; gap:8px; }
    .admin-header nav a:nth-child(3) { display:none; }
    .admin-shell { width:calc(100% - 28px); padding-top:28px; }
    .admin-page-heading { align-items:flex-start; flex-direction:column; }
    .table-card { overflow-x:auto; }
    table { min-width:850px; }
    .form-grid { grid-template-columns:1fr; }
    .form-grid .full { grid-column:auto; }
    .contact-editor { grid-template-columns:1fr; }
    .contact-media { grid-template-columns:repeat(2,minmax(0,140px)); }
    .contact-avatar-preview,.contact-qr-preview,.contact-qr-empty { width:120px; height:120px; }
}