:root{--blue:#0b6fb8;--blue-d:#084f85;--teal:#12a3b4;--bg:#f2f6fa;--card:#fff;--ink:#17283b;--mute:#6a7a8c;--line:#dde5ee;--green:#16a34a;--red:#dc2626;--amber:#d97706;--r:12px}
:root[data-theme="dark"]{--blue:#398cc6;--blue-d:#28658f;--teal:#247e86;--bg:#111923;--card:#1b2633;--ink:#e7edf4;--mute:#a6b3c2;--line:#344252;--green:#27a66a;--red:#c94c55;--amber:#b98028}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--blue);text-decoration:none}
.topbar{background:linear-gradient(90deg,var(--blue-d),var(--blue) 60%,var(--teal));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;background:#fff;border-radius:10px;padding:3px}
.brand strong{display:block;font-size:16px}.brand small{opacity:.85;font-size:12px}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{color:#fff;padding:8px 12px;border-radius:8px;font-weight:500}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.2)}
.theme-toggle{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:8px;background:rgba(0,0,0,.12);color:#fff;cursor:pointer}
.theme-toggle:hover{background:rgba(255,255,255,.2)}
.theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-theme-row{display:flex;justify-content:flex-end;margin-bottom:8px}
.login-theme-toggle{border-color:var(--line);background:var(--card);color:var(--ink)}
.login-theme-toggle:hover{background:var(--bg)}
.login-theme-toggle:focus-visible{outline-color:var(--blue)}
.nav .who{margin:0 8px;font-size:13px;opacity:.95}.nav .who em{background:rgba(255,255,255,.22);border-radius:20px;padding:1px 8px;font-style:normal;font-size:11px;text-transform:uppercase;margin-left:4px}
.nav .logout{background:rgba(0,0,0,.2)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
.container{max-width:1180px;margin:22px auto;padding:0 16px}
.foot{text-align:center;color:var(--mute);font-size:12px;padding:20px}
h1{font-size:24px;margin:0 0 4px}h2{font-size:18px;margin:0 0 12px}
.sub{color:var(--mute);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 1px 3px rgba(20,40,70,.05);margin-bottom:18px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.stat{border-left:5px solid var(--blue)}
.stat b{display:block;font-size:30px;line-height:1.1}.stat span{color:var(--mute);font-size:13px}
.stat.green{border-color:var(--green)}.stat.red{border-color:var(--red)}.stat.amber{border-color:var(--amber)}.stat.teal{border-color:var(--teal)}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--blue-d)}
.btn.sec{background:#e8eef5;color:var(--ink)}.btn.sec:hover{background:#d9e3ee}
.btn.red{background:var(--red)}.btn.green{background:var(--green)}.btn.amber{background:var(--amber)}
.btn.sm{padding:5px 10px;font-size:13px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1}
label{display:block;font-weight:600;font-size:13px;margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid rgba(11,111,184,.35);border-color:var(--blue)}
.password-field{position:relative;display:block;width:100%;min-width:0}
.password-field input{width:100%!important;padding-right:44px}
.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:6px;background:transparent;color:var(--mute);display:grid;place-items:center;cursor:pointer}
.password-toggle:hover{background:#edf2f7;color:var(--ink)}
.password-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:#eef3f9;text-align:left;padding:10px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);white-space:nowrap}
td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:#fafcfe}
.thumb{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#dde5ee;vertical-align:middle;margin-right:8px}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700}
.b-active{background:#dcfce7;color:#166534}.b-expired{background:#fee2e2;color:#991b1b}.b-suspended{background:#fef3c7;color:#92400e}.b-invalid{background:#e5e7eb;color:#374151}
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px}
.a-ok{background:#dcfce7;color:#166534}.a-err{background:#fee2e2;color:#991b1b}
.pager{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px;border-radius:6px;background:#e8eef5;font-size:13px}.pager span{background:var(--blue);color:#fff}
.bars .row{display:flex;align-items:center;gap:10px;margin:8px 0}
.bars .lab{width:150px;font-size:13px}.bars .bar{flex:1;background:#eef3f9;border-radius:6px;height:18px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:6px}
.bars .n{width:40px;text-align:right;font-weight:700}
.detail{display:flex;gap:20px;flex-wrap:wrap}
.detail img.big{width:140px;height:170px;object-fit:cover;border-radius:12px;background:#dde5ee}
.detail dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:6px 12px}.detail dt{color:var(--mute)}.detail dd{margin:0;font-weight:600}
:root[data-theme="dark"] .btn.sec{background:#2b3847;color:var(--ink)}
:root[data-theme="dark"] .btn.sec:hover{background:#354557}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#131d28;color:var(--ink);border-color:var(--line);color-scheme:dark}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#8e9dad}
:root[data-theme="dark"] th{background:#202d3b;color:var(--mute)}
:root[data-theme="dark"] tr:hover td{background:#202d3b}
:root[data-theme="dark"] .pager a,:root[data-theme="dark"] .pager span{background:#2b3847;color:var(--ink)}
:root[data-theme="dark"] .pager span{background:var(--blue);color:#fff}
:root[data-theme="dark"] .bars .bar{background:#2b3847}
:root[data-theme="dark"] .detail img.big,:root[data-theme="dark"] .thumb{background:#273443}
:root[data-theme="dark"] .a-ok{background:#153b2d;color:#b8f0d1}
:root[data-theme="dark"] .a-err{background:#48252b;color:#ffd2d4}
:root[data-theme="dark"] .b-active{background:#153b2d;color:#b8f0d1}
:root[data-theme="dark"] .b-expired{background:#48252b;color:#ffd2d4}
:root[data-theme="dark"] .b-suspended{background:#49381a;color:#ffe1a3}
:root[data-theme="dark"] .b-invalid{background:#303946;color:#d4dde7}
:root[data-theme="dark"] .login-box{background:var(--card);color:var(--ink)}
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-d),var(--teal));padding:16px}
.login-box{background:#fff;border-radius:16px;padding:30px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login-box img{width:70px;display:block;margin:0 auto 8px}.login-box h1{text-align:center;font-size:20px}.login-box p{text-align:center;color:var(--mute);margin:0 0 20px}
.login-box .btn{width:100%;margin-top:6px;padding:11px}
/* scanner */
.scan-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#reader{width:100%;border-radius:12px;overflow:hidden;background:#000;min-height:260px}
.result{border-radius:var(--r);padding:20px;text-align:center;color:#fff;min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#8a98a8}
.result.ok{background:var(--green)}.result.bad{background:var(--red)}
.result .big-msg{font-size:26px;font-weight:800;margin:6px 0}.result .icon{font-size:56px;line-height:1}
.result img{width:110px;height:130px;object-fit:cover;border-radius:10px;border:3px solid rgba(255,255,255,.8);margin:8px 0;background:#fff}
.result dl{display:grid;grid-template-columns:auto auto;gap:3px 14px;text-align:left;margin:8px 0 0;font-size:14px}.result dt{opacity:.85}.result dd{margin:0;font-weight:700}
.manual{display:flex;gap:8px;margin-top:10px}
/* membership card */
.card-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.card-side{min-width:0}.card-side-label{font-size:12px;font-weight:700;color:var(--mute);margin:0 0 6px}
.card-print-sheet{width:100%;aspect-ratio:1.586/1;position:relative;container-type:inline-size}
.mcard{--card-navy:#101827;--card-red:#d82432;--card-yellow:#f2c230;width:100%;aspect-ratio:1.586/1;box-sizing:border-box;background:repeating-linear-gradient(132deg,transparent 0 5.667cqw,rgba(255,255,255,.035) 5.833cqw,transparent 6cqw 11.333cqw),linear-gradient(145deg,var(--card-navy),#20283a 56%,#10141e);color:#fff;border:1px solid rgba(242,194,48,.65);border-radius:1.667cqw;padding:3.667cqw;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 30px rgba(3,12,24,.24)}
.mcard:after{content:"";position:absolute;left:0;right:0;bottom:0;height:.833cqw;background:linear-gradient(90deg,var(--card-red) 0 42%,var(--card-yellow) 42% 68%,#fff 68%)}
.mcard .card-watermark{position:absolute;z-index:0;width:36.667cqw;height:36.667cqw;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:cover;border-radius:50%;opacity:.22;pointer-events:none}
.mcard .org{display:flex;gap:2cqw;align-items:center;position:relative;z-index:1;min-width:0}
.mcard .brand-copy{min-width:0}.mcard .org b{font-size:2.667cqw;display:block;line-height:1.2}.mcard .org small{display:block;color:var(--card-yellow);margin-top:.5cqw}
.mcard .card-kind{margin-left:auto;border:1px solid rgba(242,194,48,.72);border-radius:.667cqw;padding:1cqw 1.5cqw;color:var(--card-yellow);font-size:1.667cqw;font-weight:800;white-space:nowrap}
.mcard .mid{display:flex;gap:2.333cqw;align-items:center;position:relative;z-index:1;min-width:0}
.mcard .ph{width:18.667cqw;height:23.667cqw;flex:none;object-fit:cover;border-radius:.833cqw;border:2px solid rgba(255,255,255,.9);background:#fff}
.mcard .info{flex:1;min-width:0}.mcard .nm{font-size:3.667cqw;font-weight:800;line-height:1.15;margin-bottom:2cqw;overflow-wrap:anywhere}
.mcard .card-field{display:flex;justify-content:space-between;gap:1.667cqw;font-size:2cqw;margin:.833cqw 0;line-height:1.25}.mcard .card-field span{color:var(--card-yellow);flex:none}.mcard .card-field b{text-align:right;overflow-wrap:anywhere}
.mcard .qr{background:#fff;border-radius:.833cqw;padding:1.167cqw;flex:none;width:23.333cqw;height:23.333cqw;box-sizing:border-box;display:grid;place-items:center}
.mcard .qr img,.mcard .qr canvas{width:21cqw!important;height:21cqw!important}
.mcard .stat-pill{display:inline-block;margin-top:1.333cqw;padding:.667cqw 1.667cqw;border-radius:.5cqw;font-weight:800;font-size:1.667cqw;background:#fff}
.mcard .stat-pill.active{color:#166534}.mcard .stat-pill.expired{color:#991b1b}.mcard .stat-pill.suspended{color:#92400e}
.mcard .card-foot{display:flex;flex-direction:column;gap:1cqw;border-top:1px solid rgba(242,194,48,.42);padding-top:1.333cqw;position:relative;z-index:1}
.mcard .card-foot-brand{display:flex;justify-content:space-between;gap:1.667cqw;color:var(--card-yellow);font-size:1.5cqw;font-weight:700}
.mcard .card-contact{display:flex;justify-content:space-between;gap:1.333cqw;flex-wrap:wrap;color:#fff;font-size:1.833cqw;font-weight:700;line-height:1.25}
.mcard .card-contact span:first-child{color:var(--card-yellow);letter-spacing:1px}
.mcard-back{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 30px,transparent 31px 60px),linear-gradient(145deg,#101827,#20283a 56%,#10141e);color:#fff;border-color:rgba(242,194,48,.65)}
.mcard-back:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(216,36,50,.12),transparent 45%,rgba(242,194,48,.08));pointer-events:none}
.mcard-back .back-brand,.mcard-back .back-message,.mcard-back .back-contact,.mcard-back .back-foot{position:relative;z-index:1}
.mcard-back .back-brand{display:flex;align-items:center;min-height:8cqw}
.mcard-back .back-brand b{display:block;color:#fff;font-size:2.5cqw;line-height:1.2}
.mcard-back .back-brand small{display:block;color:#f2c230;font-size:1.5cqw;font-weight:800;margin-top:.5cqw}
.mcard-back .back-message{text-align:center}
.mcard-back .back-message span,.mcard-back .back-contact span{display:block;color:#f2c230;font-size:1.5cqw;font-weight:800;letter-spacing:.167cqw}
.mcard-back .back-message h2{color:#fff;font-size:3.167cqw;margin:.667cqw 0}
.mcard-back .back-message p{margin:0;font-size:2cqw;font-weight:600}
.mcard-back .back-contact{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:2cqw;border-top:1px solid rgba(242,194,48,.38);border-bottom:1px solid rgba(242,194,48,.38);padding:1.667cqw 0}
.mcard-back .back-contact b{display:block;margin-top:.333cqw;font-size:2cqw;overflow-wrap:anywhere}
.mcard-back .back-foot{display:flex;justify-content:space-between;gap:1.667cqw;color:#fff;font-size:1.5cqw;font-weight:700}
@media(max-width:860px){
 .g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.scan-layout{grid-template-columns:1fr}
 .card-sides{grid-template-columns:1fr}
 .menu-btn{display:block}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-top:8px}
 body.nav-open .nav{display:flex}.nav .who{margin:6px 12px}
 .form-grid{grid-template-columns:1fr}
}
@media(max-width:460px){.g4{grid-template-columns:1fr}.detail dl{grid-template-columns:110px 1fr}}
@page{size:85.6mm 53.98mm;margin:0}
@media print{.topbar,.foot,.noprint,.alert,.card-side-label{display:none!important}body{background:#fff;width:85.6mm;height:auto;margin:0;overflow:visible}.container{width:85.6mm;height:auto;max-width:none;margin:0;padding:0}.card-sides{display:block}.card-side{position:relative;width:85.6mm;height:53.98mm;break-after:page;page-break-after:always}.card-side:last-child{break-after:auto;page-break-after:auto}.card-print-sheet{width:600px;height:378.3px;aspect-ratio:auto;position:absolute;top:0;left:0;transform:scale(.5392);transform-origin:top left}.mcard{position:absolute;top:0;left:0;width:600px;height:378.3px;max-width:none;aspect-ratio:auto;padding:22px;transform:none;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.mcard .mid{flex-wrap:nowrap;gap:14px}.mcard .ph{width:112px;height:142px}.mcard .info{flex:1 1 0}.mcard .qr{width:140px;height:140px;margin-left:0}.mcard .qr img,.mcard .qr canvas{width:126px!important;height:126px!important}.mcard .nm{font-size:22px}.mcard .card-kind{font-size:10px;padding:6px 9px}}