:root{
  --canvas:#ffffff; --surface:#f9f8f7; --surface-2:#f0efed; --border:#e6e5e3;
  --text:#2c2c2b; --text-2:#7d7a75;
  --accent:#2783de; --accent-soft:#e5f2fc;
  --green:#46a171; --green-soft:#e8f1ec;
  --orange:#d5803b; --orange-soft:#fbebde;
  --red:#e56458; --red-soft:#fce9e7;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --radius:12px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --canvas:#191919; --surface:#202020; --surface-2:#383836; --border:rgba(255,255,255,.20);
  --text:#ffffff; --text-2:rgba(255,255,255,.65);
  --accent:#5e9fe8; --accent-soft:rgba(94,159,232,.14);
  --green:#72bc8f; --green-soft:rgba(114,188,143,.14);
  --orange:#de9255; --orange-soft:rgba(222,146,85,.14);
  --red:#e97366; --red-soft:rgba(233,115,102,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 12px 34px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--canvas);color:var(--text);
  font-size:16px;line-height:1.5;min-height:100vh;
  transition:background .25s ease,color .25s ease;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-sm{width:16px;height:16px}

/* Layout */
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:720px}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#7db8f2);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:var(--shadow)}
.header-actions{display:flex;align-items:center;gap:8px}
.nav-user{color:var(--text-2);font-size:14px;display:flex;align-items:center;gap:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 16px;min-height:44px;
  transition:transform .05s ease,background .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{opacity:.92}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{opacity:.92}
.btn-icon{padding:0;width:40px;height:40px;min-height:40px;border-radius:var(--radius-sm);
  background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-icon:hover{background:var(--surface-2)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;min-height:38px;font-size:14px}

/* Cards & sections */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.section{padding:48px 0}
.hero{text-align:center;padding:56px 0 24px}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
.hero p{color:var(--text-2);font-size:clamp(16px,2.5vw,19px);max-width:560px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:6px 12px;border-radius:999px;margin-bottom:18px}

/* Forms */
.form-card{padding:28px}
@media(min-width:640px){.form-card{padding:36px}}
.form-row{display:grid;gap:16px}
@media(min-width:560px){.form-row.cols-2{grid-template-columns:1fr 1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field .req{color:var(--red)}
.input{width:100%;font-family:inherit;font-size:15px;color:var(--text);background:var(--canvas);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;min-height:46px;
  transition:border-color .2s ease,box-shadow .2s ease}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.invalid{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field .hint{font-size:13px;color:var(--text-2);margin-top:6px}
.field .error-text{font-size:13px;color:var(--red);margin-top:6px;display:none}
.field.has-error .error-text{display:block}

/* Image picker tabs */
.img-picker{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--canvas)}
.tabs{display:flex;background:var(--surface-2)}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;font-size:14px;
  font-weight:600;color:var(--text-2);cursor:pointer;border:none;background:transparent;transition:.2s}
.tab.active{color:var(--accent);background:var(--canvas)}
.tab:hover:not(.active){color:var(--text)}
.tab-body{padding:18px}
.tab-pane{display:none}
.tab-pane.active{display:block}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:26px;text-align:center;
  color:var(--text-2);cursor:pointer;transition:.2s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dropzone .icon{width:34px;height:34px;margin:0 auto 10px}
.paste-zone{min-height:120px}
.paste-zone:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.preview-wrap{margin-top:16px;position:relative;display:none}
.preview-wrap.show{display:block}
.preview-wrap img{width:100%;max-height:280px;object-fit:contain;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface)}
.preview-clear{position:absolute;top:8px;right:8px}

/* Toasts */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;
  max-width:min(360px,calc(100vw - 36px))}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:13px 14px;box-shadow:var(--shadow-lg);
  animation:toastIn .28s ease}
.toast.success{border-left-color:var(--green)} .toast.success .icon{color:var(--green)}
.toast.error{border-left-color:var(--red)} .toast.error .icon{color:var(--red)}
.toast.info{border-left-color:var(--accent)} .toast.info .icon{color:var(--accent)}
.toast .msg{font-size:14px;line-height:1.4;flex:1}
.toast .close{cursor:pointer;color:var(--text-2);background:none;border:none;padding:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.toast.hide{animation:toastOut .25s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;padding:20px;animation:fade .2s ease}
.modal-overlay.show{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);
  width:100%;max-width:420px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:12px;padding:20px 20px 0}
.modal-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--red-soft);color:var(--red)}
.modal-body{padding:14px 20px 20px}
.modal-body h3{font-size:18px;margin-bottom:6px}
.modal-body p{color:var(--text-2);font-size:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px}

/* Table (admin) */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar h1{font-size:24px}
.search{position:relative;flex:1;max-width:320px}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-2)}
.search input{padding-left:40px}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
th{color:var(--text-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2)}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
.avatar{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.name-cell{display:flex;align-items:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 9px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.empty{text-align:center;padding:60px 20px;color:var(--text-2)}
.empty .icon{width:46px;height:46px;margin:0 auto 14px;color:var(--text-2)}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}
.stat{padding:18px 20px}
.stat .n{font-size:28px;font-weight:700}
.stat .l{color:var(--text-2);font-size:13px;margin-top:2px}

/* Detail page */
.detail-grid{display:grid;gap:24px}
@media(min-width:820px){.detail-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.detail-img{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.detail-img img{width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-sm)}
.detail-list{padding:24px}
.detail-list .row{padding:14px 0;border-bottom:1px solid var(--border)}
.detail-list .row:last-child{border-bottom:none}
.detail-list .k{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);margin-bottom:4px}
.detail-list .v{font-size:16px;font-weight:500;word-break:break-word}

/* Auth */
.auth-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:400px;padding:32px}
.auth-card .brand{justify-content:center;margin-bottom:6px}
.auth-card .sub{text-align:center;color:var(--text-2);font-size:14px;margin-bottom:24px}

/* Success page */
.success-hero{text-align:center;padding:16px 0 8px}
.success-check{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;margin:0 auto 16px}
.success-check .icon{width:34px;height:34px}

/* Footer */
.site-footer{border-top:1px solid var(--border);color:var(--text-2);font-size:13px;padding:24px 0;text-align:center;margin-top:40px}

@media(max-width:520px){
  .container{padding:0 16px}
  .row-actions .btn-sm span{display:none}
  .site-header .bar{height:58px}
}