/* Infinikey Media platform design system - colors taken from the Infinikey logo (sky blue + charcoal) */
:root{--blue:#1A6FA8;--blue-2:#2A8FD1;--sky:#70C0E0;--ink:#232A33;--muted:#6B7684;--bg:#F3F7FB;--soft:#EAF4FB;--line:#E3EAF1;--radius:16px;--shadow:0 1px 2px rgba(35,42,51,.04),0 10px 28px rgba(35,42,51,.06)}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{letter-spacing:-.015em;color:var(--ink)}
a{color:var(--blue)}
.logo{height:38px;width:auto}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}

/* buttons / forms / cards */
.btn{border-radius:12px;font-weight:600;padding:.55rem 1.1rem}
.btn-sm{padding:.35rem .75rem;border-radius:10px}
.btn-lg{padding:.8rem 1.6rem;border-radius:14px}
.btn-accent{background:linear-gradient(135deg,var(--blue),var(--blue-2));border:0;color:#fff;box-shadow:0 6px 16px rgba(26,111,168,.25);transition:transform .15s,filter .15s}
.btn-accent:hover,.btn-accent:focus{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
.btn-primary-ifk{background:var(--ink);border:0;color:#fff}.btn-primary-ifk:hover{background:#000;color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn-ghost:hover{background:var(--soft);color:var(--blue)}
.form-control,.form-select{border-radius:12px;border-color:#D4DEE8;padding:.62rem .9rem}
.form-control:focus,.form-select:focus{border-color:var(--blue-2);box-shadow:0 0 0 .22rem rgba(42,143,209,.2)}
.form-label{font-weight:600;font-size:.88rem}
.form-text,.text-secondary{color:var(--muted)!important}
.form-control-color{height:46px;padding:.3rem}
.card-ifk{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.badge{border-radius:999px;font-weight:600;padding:.45em .8em}
.alert{border-radius:14px;border:0}
code{color:var(--blue);background:var(--soft);padding:.1em .4em;border-radius:6px}

/* app shell */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:264px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:22px 16px;z-index:1040;transition:transform .25s}
.side-logo{display:block;padding:2px 8px 22px}.side-logo img{height:40px}
.side-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:0 14px 8px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none;transition:background .15s}
.side-nav a i{font-size:1.1rem;color:var(--muted)}
.side-nav a:hover{background:var(--soft)}
.side-nav a.active{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 8px 18px rgba(26,111,168,.28)}
.side-nav a.active i{color:#fff}
.side-user{margin-top:auto;padding:12px;border-radius:14px;background:var(--bg);display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--sky),var(--blue-2));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar-sm{width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--blue);font-weight:800;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.side-user .who{min-width:0;flex:1;line-height:1.2}.side-user .who strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-user .who span{font-size:.74rem;color:var(--muted)}
.app-main{margin-left:264px;flex:1;min-width:0}
.app-top{display:none;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1030}
.app-top img{height:32px}
.app-content{padding:30px 32px 56px;max-width:1500px}
.app-content h1{font-weight:800;font-size:1.55rem}
.scrim{display:none;position:fixed;inset:0;background:rgba(20,28,38,.45);z-index:1035}
.scrim.show{display:block}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none;box-shadow:0 0 50px rgba(0,0,0,.25)}.app-main{margin-left:0}.app-top{display:flex}.app-content{padding:20px 16px 48px}}

/* stats / tables */
.stat{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.stat .num{font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1.1}
.stat .bi{width:46px;height:46px;border-radius:13px;background:var(--soft);color:var(--blue)!important;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem!important}
.text-warning{color:var(--blue-2)!important}
.table{--bs-table-hover-bg:#F7FAFD}
.table thead th{background:#F6F9FC;color:var(--muted);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700;padding:.9rem .85rem}
.table td{padding:.8rem .85rem;border-color:var(--line)}
.pill{display:inline-block;padding:.2em .7em;border-radius:999px;background:var(--soft);color:var(--blue);font-weight:600;font-size:.76rem;white-space:nowrap}
.page-link{color:var(--blue);border-radius:10px!important;margin:0 2px;border-color:var(--line)}.active>.page-link{background:var(--blue);border-color:var(--blue)}
.empty-state i{font-size:2.4rem;color:var(--blue-2)}

/* auth split screen */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.auth-brand{background:linear-gradient(155deg,#0E4A74,var(--blue) 50%,var(--blue-2));color:#fff;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.auth-brand::before{width:420px;height:420px;right:-140px;top:-120px}.auth-brand::after{width:300px;height:300px;left:-100px;bottom:-110px}
.auth-brand>*{position:relative;z-index:1}
.logo-pill{display:inline-block;background:#fff;border-radius:14px;padding:8px 16px; margin-bottom: 10px; width: 185px;}.logo-pill img{height:50px;display:block}
.auth-brand h2{color:#fff;font-weight:800;font-size:2rem;line-height:1.2}
.auth-brand ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.auth-brand li{display:flex;gap:10px;align-items:flex-start;opacity:.95}.auth-brand li i{color:var(--sky)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card .mobile-logo{display:none;margin-bottom:22px}
.auth-card h1{font-weight:800;font-size:1.65rem}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-brand{display:none}.auth-card .mobile-logo{display:block}.auth-card .mobile-logo img{height:44px}}

/* mock chat illustration */
.mc{width:100%;max-width:330px;background:#fff;border-radius:20px;box-shadow:0 26px 60px rgba(14,74,116,.28);overflow:hidden;border:1px solid var(--line);color:var(--ink)}
.mc-head{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;padding:14px 16px;display:flex;gap:10px;align-items:center}
.mc-head small{opacity:.9;display:block;font-size:.74rem}
.mc-av{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.mc-body{background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:8px}
.mc-b{background:#fff;padding:9px 12px;border-radius:14px 14px 14px 4px;max-width:88%;font-size:.84rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.mc-u{align-self:flex-end;background:var(--blue);color:#fff;padding:9px 12px;border-radius:14px 14px 4px 14px;font-size:.84rem}
.mc-chips{display:flex;flex-wrap:wrap;gap:6px}.mc-chip{border:1.5px solid var(--blue-2);color:var(--blue);background:#fff;border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:600}
.mc-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted)}
.mc-foot span{flex:1;border:1px solid var(--line);border-radius:12px;padding:7px 10px}.mc-foot i{width:34px;height:34px;border-radius:50%;background:var(--blue-2);color:#fff;display:flex;align-items:center;justify-content:center}

/* landing */
.land-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.land-nav img{height:50px}
.hero-land{background:radial-gradient(900px 420px at 85% 0%,#D9EEF9 0,transparent 70%),linear-gradient(180deg,#F3F9FD,#fff);padding:72px 0 64px;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--soft);color:var(--blue);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px}
.hero-land h1{font-size:clamp(2.2rem,5vw,3rem);font-weight:800;line-height:1.08;margin:18px 0}
.hero-land h1 em{font-style:normal;background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-land .lead{color:var(--muted);max-width:34rem}
.hero-visual{position:relative;min-height:430px}
.hv-dash{position:absolute;left:0;top:10px;width:88%;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.hv-dash .row-l{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.hv-dash .row-l:last-child{border:0}.hv-dash .row-l b{flex:1}
.hv-chat{position:absolute;right:0;bottom:0}
@media(max-width:991.98px){.hero-visual{min-height:470px;margin-top:30px}.hv-dash{width:100%}.hv-chat{right:auto;left:50%;transform:translateX(-50%);bottom:-20px}}
.land-section{padding:76px 0}
.land-section h2{font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem)}
.sec-sub{color:var(--muted);max-width:40rem}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;height:100%;transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feat .ico{width:48px;height:48px;border-radius:14px;background:var(--soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px}
.step-no{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.code-card{background:#161C24;color:#cfe7f7;border-radius:var(--radius);padding:22px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;overflow-x:auto;box-shadow:var(--shadow)}
.code-card .dots span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:#3a4553}
.code-card .k{color:#70C0E0}.code-card .s{color:#9be2b0}
.swatch{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);margin-right:6px}
.accordion-item{border:1px solid var(--line)!important;border-radius:14px!important;margin-bottom:10px;overflow:hidden}
.accordion-button{font-weight:700;color:var(--ink)}.accordion-button:not(.collapsed){background:var(--soft);color:var(--blue);box-shadow:none}
.cta-band{background:linear-gradient(135deg,#0E4A74,var(--blue) 55%,var(--blue-2));color:#fff;border-radius:28px;padding:56px 28px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}.cta-band p{color:#dff0fb}
.btn-white{background:#fff;color:var(--blue);border:0}.btn-white:hover{background:var(--soft);color:var(--blue)}
.footer-land{background:#161C24;color:#9fb0c0;padding:20px 0}.footer-land a{color:#cfe7f7}

/* settings live preview */
.sticky-col{position:sticky;top:20px}
.pv{--pv-p:#1A6FA8;--pv-a:#1F7FC2;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.pv-head{background:var(--pv-p);color:#fff;padding:14px 16px;display:flex;gap:10px;align-items:center}
.pv-av{width:40px;height:40px;border-radius:50%;background:var(--pv-a);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.pv-av img{width:100%;height:100%;object-fit:cover;background:#fff}
.pv-body{background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.pv-b{background:#fff;padding:9px 12px;border-radius:14px 14px 14px 4px;font-size:.85rem;max-width:90%;box-shadow:0 1px 2px rgba(0,0,0,.06);white-space:pre-line}
.pv-chip{border:1.5px solid var(--pv-a);color:var(--pv-p);background:#fff;border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:600}
.pv-chip.alt{background:var(--pv-a);color:#fff}
.logo-drop{border:2px dashed #C9D8E6;border-radius:14px;padding:14px;display:flex;align-items:center;gap:14px;background:#FBFDFF}
.logo-drop img{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.save-bar{position:sticky;bottom:0;background:rgba(243,247,251,.92);backdrop-filter:blur(8px);padding:14px 0;border-top:1px solid var(--line);margin-top:8px;z-index:5}
.form-switch .form-check-input{width:2.6em;height:1.4em}.form-check-input:checked{background-color:var(--blue-2);border-color:var(--blue-2)}