:root {
  --navy:#0e2740; --navy-2:#173a5c; --ink:#16212e; --muted:#64748b; --line:#e2e8f0; --bg:#f4f6fa; --card:#fff;
  --brand:#35c8f2; --brand-d:#19b0dc; --brand-soft:#e4f7fd; --on-brand:#06263a; --ok:#0f766e; --ok-soft:#d9f5ef; --err:#b91c1c; --lock:#94a3b8;
  --r:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg) }
a { color:var(--navy-2) } [hidden] { display:none !important }
h1,h2,h3 { margin:0; line-height:1.2; letter-spacing:-.01em }
button,input,select,textarea { font:inherit; color:inherit }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; font-size:.9rem; text-decoration:none; color:var(--ink); white-space:nowrap }
.btn:hover { background:#f8fafc; border-color:#cbd5e1 } .btn:disabled { opacity:.55; cursor:not-allowed }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand) } .btn.primary:hover { background:var(--brand-d); border-color:var(--brand-d) }
.btn.dark { background:var(--navy); border-color:var(--navy); color:#fff } .btn.dark:hover { background:var(--navy-2) }
.btn.small { padding:5px 10px; font-size:.82rem } .btn.danger { color:var(--err) }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .card:focus-visible { outline:2px solid var(--brand); outline-offset:2px }
input[type=text],input[type=email],input[type=search],input[type=number],input[type=date],input[type=url],select,textarea { padding:9px 11px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; width:100% }
label.f { display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:4px }

/* top bar */
.top { background:var(--navy); color:#fff; position:sticky; top:0; z-index:20 }
.top .in { max-width:1240px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px }
.logo { display:inline-flex; align-items:center; color:#fff; text-decoration:none } .logo img { height:26px; width:auto; display:block }
.logo small { font-weight:500; opacity:.7; margin-left:12px; padding-left:12px; border-left:1px solid rgba(255,255,255,.25); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase }
.top .sp { flex:1 } .top .who { font-size:.85rem; opacity:.85; text-align:right; line-height:1.25 } .top .who b { display:block; opacity:1 }
.top .btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.3) } .top .btn:hover { background:rgba(255,255,255,.1) }
@media (max-width:640px) { .top .who { display:none } .logo small { display:none } }

/* hero */
.hero { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 70%,#24557f 100%); color:#fff }
.hero .in { max-width:1240px; margin:0 auto; padding:30px 20px 70px }
.hero h1 { font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:800 } .hero p { margin:8px 0 0; opacity:.85; max-width:60ch }
.stats { display:flex; gap:26px; margin-top:22px; flex-wrap:wrap } .stats div { font-size:.8rem; opacity:.8; text-transform:uppercase; letter-spacing:.05em } .stats b { display:block; font-size:1.5rem; opacity:1; color:#fff; letter-spacing:-.02em; text-transform:none }

.wrap { max-width:1240px; margin:0 auto; padding:0 20px 60px }
.tools { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:14px; margin-top:-40px; position:relative; display:grid; grid-template-columns:minmax(200px,2fr) minmax(150px,1fr) minmax(130px,1fr) auto auto; gap:10px; align-items:center }
@media (max-width:820px) { .tools { grid-template-columns:1fr 1fr } .tools .search { grid-column:1/-1 } .tools .view { display:none } }
.seg { display:inline-flex; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden } .seg button { white-space:nowrap; border:0; background:#fff; padding:9px 13px; font-weight:600; font-size:.86rem; cursor:pointer; color:var(--muted) } .seg button[aria-pressed=true] { background:var(--navy); color:#fff }
.count { margin:22px 2px 12px; color:var(--muted); font-size:.88rem }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px }
.card { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .15s,box-shadow .15s; text-align:left; border:0; padding:0; width:100% }
.card:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(16,24,40,.08),0 12px 28px rgba(16,24,40,.12) }
@media (prefers-reduced-motion:reduce) { .card { transition:none } .card:hover { transform:none } }
.thumb { aspect-ratio:1.9; width:100%; display:block; object-fit:cover; background:var(--navy) }
.ph { aspect-ratio:1.9; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; color:#fff; position:relative; overflow:hidden }
.ph::after { content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.09) }
.ph b { font-size:1rem; line-height:1.2; position:relative; z-index:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden } .ph i { font-style:normal; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-bottom:6px; position:relative; z-index:1 }
.card .body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1 }
.card h3 { font-size:1rem; font-weight:700 } .card .by { color:var(--muted); font-size:.85rem }
.meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:8px }
.pill { display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:700; padding:3px 9px; border-radius:99px; background:#eef2f7; color:#334155; white-space:nowrap }
.pill.ce { background:var(--brand-soft); color:#0b5f7d } .pill.ok { background:var(--ok-soft); color:#0b5d56 } .pill.lock { background:#f1f5f9; color:#64748b } .pill.new { background:#e0ecff; color:#1d4ed8 }
.imgwrap { position:relative } .imgwrap .flag { position:absolute; top:10px; left:10px; z-index:2 }
.empty { text-align:center; padding:60px 20px; color:var(--muted) }

/* drawer */
.scrim { position:fixed; inset:0; background:rgba(9,20,33,.55); z-index:40; display:flex; justify-content:flex-end }
.drawer { background:#fff; width:min(560px,100%); height:100%; overflow-y:auto; box-shadow:-10px 0 40px rgba(0,0,0,.25); animation:slide .2s ease-out }
@keyframes slide { from { transform:translateX(40px); opacity:0 } } @media (prefers-reduced-motion:reduce) { .drawer { animation:none } }
.drawer .pad { padding:14px 20px 20px } .drawer h2 { font-size:1.12rem; font-weight:800; margin:0; line-height:1.3 }
.drawer .imgwrap .thumb { height:150px; object-fit:cover } .drawer .imgwrap .ph { height:150px; width:100% }
.drawer .close { position:absolute; top:12px; right:12px; z-index:3; background:rgba(9,20,33,.6); color:#fff; border:0; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.1rem }
.facts { display:grid; grid-template-columns:1fr 2fr 1fr; gap:10px; margin:12px 0; padding:10px 12px; background:var(--bg); border-radius:10px } .facts div { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; line-height:1.3 } .facts b { display:block; color:var(--ink); font-size:.86rem; text-transform:none; letter-spacing:0; margin-bottom:2px }
.desc { color:#334155; font-size:.88rem; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.actions { display:grid; gap:8px; margin-top:12px }
.act { display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--line); border-radius:10px } .act .t { flex:1; min-width:0 } .act .t b { display:block; font-size:.92rem } .act .t > span { color:var(--muted); font-size:.8rem; display:block; line-height:1.35 } .act .t .pill { font-size:.7rem; padding:1px 8px; vertical-align:middle } .act .btn { padding:7px 14px; font-size:.86rem }
.act .ic { width:36px; height:36px; border-radius:9px; background:var(--brand-soft); color:#0b7fa3; display:flex; align-items:center; justify-content:center; flex:none } .act .ic svg { width:20px; height:20px }
.act.off { opacity:.6 } .lockbox { margin-top:20px; padding:16px; border-radius:10px; background:#f8fafc; border:1px dashed #cbd5e1 } .lockbox b { display:block; margin-bottom:4px }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:99px; font-size:.9rem; z-index:60; box-shadow:var(--shadow) }

/* login */
.login { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr } @media (max-width:860px) { .login { grid-template-columns:1fr } .login .art { display:none } }
.login .art { background:linear-gradient(150deg,var(--navy),var(--navy-2) 60%,#24557f); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between }
.login .art h1 { font-size:2.3rem; font-weight:800; max-width:14ch } .login .art ul { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; opacity:.92 } .login .art li::before { content:"\2713"; color:var(--brand); font-weight:800; margin-right:10px }
.login .panel { display:flex; align-items:center; justify-content:center; padding:32px 20px } .login .box { width:min(400px,100%) } .login .box h2 { font-size:1.5rem; font-weight:800 } .login .box p { color:var(--muted) }
.login form { display:grid; gap:12px; margin-top:20px } .login .btn { padding:12px } .note { font-size:.85rem; color:var(--muted); margin-top:18px } .msg-err { color:var(--err); font-size:.9rem; min-height:1.3em }

/* admin */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:22px 0 18px; overflow-x:auto } .tabs button { border:0; background:none; padding:10px 14px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap } .tabs button[aria-selected=true] { color:var(--ink); border-color:var(--brand) }
.panel-card { background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:18px; overflow-x:auto } .panel-card + .panel-card { margin-top:18px }
table { border-collapse:collapse; width:100%; font-size:.87rem } th,td { text-align:left; padding:8px 9px; border-bottom:1px solid #eef2f7; vertical-align:middle } th { color:var(--muted); font-weight:600; white-space:nowrap; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em }
.bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center } .formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px } .span2 { grid-column:span 2 } @media (max-width:520px) { .span2 { grid-column:auto } }
.warn { background:#fef3c7; color:#92400e; padding:10px 14px; border-radius:8px; margin-top:16px; font-size:.9rem } .muted { color:var(--muted); font-size:.85rem }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.75rem; font-weight:700 } .tag.sent,.tag.on { background:var(--ok-soft); color:#0b5d56 } .tag.failed { background:#fee2e2; color:#991b1b } .tag.pending,.tag.dry_run,.tag.off { background:#fef3c7; color:#92400e }
.modal { position:fixed; inset:0; background:rgba(9,20,33,.55); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:4vh 14px; overflow-y:auto } .modal .sheet { background:#fff; border-radius:var(--r); width:min(760px,100%); padding:22px }
.checklist { max-height:52vh; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin-top:10px } .checklist label { display:flex; gap:9px; padding:5px 0; align-items:flex-start; font-size:.9rem } .checklist input { margin-top:3px }
.mini { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:5px; background:#e2e8f0; display:block }

.login .art .logo img { height:34px }
.preview { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:16px; padding:14px; border-radius:10px; background:var(--navy); }
.preview .btn.primary { padding:12px } .preview .btn:not(.primary) { background:transparent; color:#fff; border-color:rgba(255,255,255,.35) } .preview .btn:not(.primary):hover { background:rgba(255,255,255,.1) }
.preview .plink { grid-column:1/-1; color:rgba(255,255,255,.7); font-size:.8rem; overflow-wrap:anywhere; font-family:ui-monospace,Menlo,Consolas,monospace }
.preview.none { display:block; background:#f8fafc; border:1px dashed #cbd5e1 } .preview.none b { display:block }
@media (max-width:460px) { .preview { grid-template-columns:1fr } }
.imgwrap .play { position:absolute; right:10px; top:10px; z-index:2; background:rgba(9,20,33,.72); color:#fff; font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:99px }
.card .upd { color:var(--muted); font-size:.78rem }

/* list view */
.seg.view button { padding:9px 11px; font-size:1rem; line-height:1 }
.list { display:flex; flex-direction:column; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
.lrow { display:grid; grid-template-columns:72px minmax(220px,2.2fr) minmax(120px,1fr) minmax(140px,1.2fr) 70px 110px 120px; gap:14px; align-items:center; padding:10px 16px; border-bottom:1px solid #eef2f7; text-align:left }
.lrow.card { border-radius:0; box-shadow:none; transform:none; cursor:pointer } .lrow.card:hover { background:#f8fafc; transform:none; box-shadow:none }
.lhead { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding:10px 16px; background:#f8fafc }
.lthumb { width:72px; aspect-ratio:1.9; object-fit:cover; border-radius:6px; background:var(--navy); display:block } .ph2 { background:linear-gradient(135deg,var(--navy),#24557f) }
.lt b { display:block; font-size:.95rem } .lt small { color:var(--muted); font-size:.75rem } .lby, .lcat, .lupd { color:#334155; font-size:.88rem } .lce { font-weight:700; font-size:.88rem; white-space:nowrap }
.list .pill.ok { background:var(--ok-soft); color:#0b5d56 }
@media (max-width:900px) { .lrow { grid-template-columns:56px 1fr 90px } .lhead, .lby, .lcat, .lupd { display:none } .lrow .lby { display:none } .lt small { display:none } .lrow .lce { text-align:right } }
.preview-btn { display:flex; width:100%; padding:9px; margin-top:10px; font-size:.95rem }