:root{
  color-scheme:light;
  --ink:#0A1A30;
  --ink-2:#44586F;
  --muted:#7D8CA1;
  --blue:#1657D0;
  --blue-700:#0E3B94;
  --blue-100:#E6EEFC;
  --blue-50:#F2F7FE;
  --white:#FFFFFF;
  --ground:#F6F9FE;
  --line:#DDE7F5;
  --line-strong:#C6D6EE;
  --good:#0E8A5F;
  --good-bg:#E6F5EE;
  --warn:#B26A00;
  --warn-bg:#FDF1E0;
  --danger:#B3261E;
  --danger-bg:#FBEAE8;
  --shadow:0 1px 2px rgba(10,26,48,.05), 0 8px 24px rgba(10,26,48,.06);
  --r-s:8px; --r-m:14px; --r-l:20px;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Sora", "IBM Plex Sans", system-ui, sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink-2); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; line-height:1.2; letter-spacing:-.02em}
h1{font-size:1.5rem; font-weight:600}
h2{font-size:1.2rem; font-weight:600}
h3{font-size:1rem; font-weight:600}
p{margin:0}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.side{background:#0C1E3A; color:#B9CBE4; padding:22px 16px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; height:100vh; overflow-y:auto}
.side .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; color:#fff}
.side .brand:hover{text-decoration:none}
.mark{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(150deg,var(--blue),var(--blue-700)); color:#fff; font-family:var(--display); font-size:.8rem; font-weight:700}
.side nav{display:flex; flex-direction:column; gap:2px}
.side nav a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.92rem; color:#B9CBE4}
.side nav a:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.side nav a.on{background:rgba(255,255,255,.12); color:#fff; font-weight:500}
.side .sep{font-size:.74rem; font-weight:600; color:#63799A; padding:14px 12px 6px; letter-spacing:.02em}
.side .foot{margin-top:auto; display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:#7F97B8}
.side .foot a{color:#DCE7F8}
.count{margin-left:auto; background:var(--warn-bg); color:var(--warn); font-size:.75rem; padding:1px 8px; border-radius:999px}

.main{padding:26px 30px 60px; min-width:0}
.topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.topbar .intro{color:var(--muted); font-size:.92rem; margin-top:4px; max-width:70ch}

/* ---------- bits ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-family:var(--sans); font-size:.9rem; font-weight:500; padding:9px 16px; border-radius:999px; transition:.15s}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-700); text-decoration:none}
.btn-ghost{background:var(--white); color:var(--ink); border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); text-decoration:none}
.btn-danger{background:var(--danger-bg); color:var(--danger); border:1px solid #F0C8C4}
.btn-danger:hover{background:#F6D9D6; text-decoration:none}
.btn-sm{padding:6px 12px; font-size:.84rem}

.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow)}
.card-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.card-body{padding:18px}

.flash{background:var(--good-bg); border:1px solid #B7E3CE; color:var(--good); border-radius:var(--r-m); padding:12px 16px; margin-bottom:18px; font-size:.92rem}
.errors{background:var(--danger-bg); border:1px solid #F0C8C4; color:var(--danger); border-radius:var(--r-m); padding:12px 16px; margin-bottom:18px; font-size:.92rem}
.errors ul{margin:6px 0 0; padding-left:18px}

.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px}
.tile{display:block; border:1px solid var(--line); border-radius:var(--r-m); padding:16px 18px; background:var(--white)}
.tile:hover{border-color:var(--line-strong); text-decoration:none}
.tile b{display:block; font-family:var(--display); font-size:1.7rem; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.tile span{font-size:.84rem; color:var(--muted)}

table.list{width:100%; border-collapse:collapse; font-size:.92rem}
table.list th{text-align:left; font-weight:600; font-size:.78rem; color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
table.list td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle}
table.list tr:last-child td{border-bottom:0}
table.list tr.row-drag{background:var(--blue-50)}
table.list td.primary{color:var(--ink); font-weight:500}
table.list td.actions{text-align:right; white-space:nowrap}
.handle{cursor:grab; color:var(--line-strong); width:24px; text-align:center; user-select:none}
.handle:active{cursor:grabbing}
.state{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:3px 10px; border-radius:999px; border:0; cursor:pointer; font-family:var(--sans)}
.state.live{background:var(--good-bg); color:var(--good)}
.state.draft{background:var(--warn-bg); color:var(--warn)}
.pill{display:inline-block; font-size:.76rem; padding:2px 9px; border-radius:6px; background:var(--ground); border:1px solid var(--line); color:var(--ink-2); margin-right:4px}
.empty{padding:34px 18px; text-align:center; color:var(--muted)}

/* ---------- forms ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px; grid-column:span 2}
.field.half{grid-column:span 1}
.field label{font-size:.85rem; font-weight:500; color:var(--ink)}
.field .help{font-size:.82rem; color:var(--muted)}
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field select, .field textarea{
  font-family:var(--sans); font-size:.94rem; color:var(--ink); background:var(--white);
  border:1px solid var(--line-strong); border-radius:var(--r-s); padding:10px 12px; width:100%;
}
.field textarea{min-height:110px; resize:vertical; line-height:1.6}
.field textarea.tall{min-height:260px; font-family:ui-monospace, Menlo, monospace; font-size:.88rem}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.field .err{font-size:.83rem; color:var(--danger)}
.check{display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ink)}
.check input{width:16px; height:16px; accent-color:var(--blue)}
.checks{display:flex; flex-wrap:wrap; gap:14px}
.form-actions{grid-column:span 2; display:flex; gap:10px; align-items:center; padding-top:6px; border-top:1px solid var(--line); margin-top:4px; padding-top:16px}
.preview-img{border:1px solid var(--line); border-radius:var(--r-s); padding:8px; background:var(--ground); display:flex; align-items:center; gap:12px; font-size:.86rem}
.preview-img img{width:72px; height:72px; object-fit:cover; border-radius:6px}

/* ---------- media ---------- */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.media-card{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--white); display:flex; flex-direction:column}
.media-card .shot{aspect-ratio:4/3; background:var(--ground); display:grid; place-items:center; overflow:hidden}
.media-card .shot img{width:100%; height:100%; object-fit:cover}
.media-card .meta{padding:10px 12px; font-size:.8rem; color:var(--muted); display:flex; flex-direction:column; gap:6px; word-break:break-all}
.copy-path{font-family:ui-monospace, Menlo, monospace; font-size:.76rem; color:var(--ink-2)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:380px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); padding:30px; display:flex; flex-direction:column; gap:18px}

/* ---------- settings tabs ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tabs a{padding:8px 16px; border-radius:999px; font-size:.9rem; background:var(--white); border:1px solid var(--line); color:var(--ink-2)}
.tabs a:hover{text-decoration:none; border-color:var(--line-strong)}
.tabs a.on{background:var(--blue); border-color:var(--blue); color:#fff}

.pager{display:flex; gap:8px; margin-top:16px}

@media (max-width:1000px){ .tiles{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; align-items:center; gap:12px; overflow-x:auto; padding:14px}
  .side nav{flex-direction:row}
  .side .sep, .side .foot{display:none}
  .main{padding:18px 16px 50px}
  .form{grid-template-columns:1fr}
  .field.half{grid-column:span 1}
  .field, .form-actions{grid-column:span 1}
}