/* ===== BASE & SHARED ATOMS ===== */
:root{--ink:#111827;--ink2:#374151;--mut:#6b7280;--line:#e5e7eb;--line2:#f0f1f3;--bg:#f5f6f8;--cardif:#00875a;--cardif-d:#006b47;--cardif-l:#eaf5f0;--ok:#0a7a4f;--warn:#a16207;--bad:#b42318;--r:8px;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#e7eaee;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-weight:600}
svg.i{width:1.150em;height:1.150em;vertical-align:-.22em;flex:none}
[v-cloak]{display:none}
.num{font-variant-numeric:tabular-nums}
/* demo bar */
.demobar{position:sticky;top:0;z-index:60;background:#0b1118;color:#cfd6de;display:flex;gap:12px;align-items:center;padding:6px 14px;flex-wrap:wrap;font-size:12.500px}
.demobar .tag{background:#f5c542;color:#1a1300;font-weight:700;border-radius:3px;padding:1px 6px;font-size:10.500px;letter-spacing:.05em;text-transform:uppercase}
.seg{display:inline-flex;background:#1b2530;border-radius:6px;padding:2px}
.seg button{border:0;background:none;color:#9aa6b2;padding:4px 10px;border-radius:4px;font-size:12.500px}
.seg button.on{background:#fff;color:#0b1118;font-weight:600}
.demobar select{background:#1b2530;color:#fff;border:1px solid #2c3a48;border-radius:6px;padding:4px 8px;font-size:12.500px}
.sp{flex:1}
.rq{background:#17352b;color:#7fe0b6;border-radius:3px;padding:1px 5px;font-size:10.500px;font-weight:600;margin-left:3px}
.stage{display:flex;justify-content:center}
.stage.pad{padding:20px}
.frame{container-type:inline-size;width:100%;background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.stage.pad .frame{max-width:1240px;border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(16,22,29,.10);min-height:calc(100vh - 80px)}
.stage .frame.mobile{width:390px;height:780px;min-height:0;border:10px solid #0b1118;border-radius:40px;overflow-y:auto;margin:20px 0}
/* shared atoms */
.btn{border:1px solid transparent;background:var(--brand,var(--cardif));color:#fff;border-radius:6px;padding:8px 14px;font-weight:600;font-size:13.500px;display:inline-flex;gap:6px;align-items:center;justify-content:center}
.btn.ghost{background:#fff;color:var(--ink2);border-color:#d1d5db}.btn.ghost:hover{background:#f9fafb}
.btn.sm{padding:5px 10px;font-size:12.500px}.btn:disabled{opacity:.55;cursor:default}
.in{width:100%;border:1px solid #d1d5db;border-radius:6px;padding:8px 10px;background:#fff;font-size:13.500px}
.in:focus{outline:2px solid color-mix(in srgb,var(--brand,var(--cardif)) 35%,#fff);border-color:transparent}
label.l{font-size:12.500px;font-weight:600;color:var(--ink2);display:block;margin-bottom:4px}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:1px 7px;font-size:11.500px;font-weight:500;background:#f3f4f6;color:var(--ink2);border:1px solid #e5e7eb;white-space:nowrap}
.badge.ok{background:#ecf7f1;border-color:#cde8db;color:var(--ok)}.badge.warn{background:#fdf7e6;border-color:#f2e2b3;color:var(--warn)}.badge.bad{background:#fef1f0;border-color:#f6d0cc;color:var(--bad)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tg:disabled{opacity:.6;cursor:default}.in:disabled{background:#f3f4f6;color:#6b7280}
.tg{width:34px;height:20px;border-radius:99px;border:0;background:#cbd1d8;position:relative;transition:.15s;flex:none;padding:0}
.tg:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tg.on{background:var(--cardif)}.tg.on:after{left:16px}.tg.danger.on{background:var(--bad)}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:6px;font-size:13.500px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cardif-logo{height:30px;display:inline-flex;align-items:center}
.cardif-logo img{height:100%;max-width:170px;object-fit:contain}
.cardif-txt{font-weight:800;color:var(--cardif);letter-spacing:.02em;font-size:13px;white-space:nowrap}