/* NSCLOCK UI kit — components for inner pages (auth, contact, pricing, panel, kit).
   Builds on the tokens in style.css. Every component is documented on kit.html. */

/* ===== Forms ===== */
.nc-label { display: block; font-size: .85rem; font-weight: 500; color: var(--nc-fg-2); margin-bottom: .45rem; }
.nc-hint { font-size: .8rem; color: var(--nc-muted); margin-top: .4rem; }
.nc-input, .nc-select, .nc-textarea { display: block; width: 100%; padding: .75rem .95rem; font: inherit; font-size: .95rem; color: var(--nc-fg); background: var(--nc-bg-1); border: 1px solid var(--nc-line-2); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.nc-input::placeholder, .nc-textarea::placeholder { color: #5d6278; }
.nc-input:hover, .nc-select:hover, .nc-textarea:hover { border-color: rgba(255,255,255,.22); }
.nc-input:focus, .nc-select:focus, .nc-textarea:focus { outline: none; border-color: var(--nc-brand); box-shadow: 0 0 0 4px rgba(106,123,255,.18); background: var(--nc-bg-2); }
.nc-input.is-invalid { border-color: var(--nc-block); box-shadow: 0 0 0 4px rgba(255,107,125,.12); }
.nc-error { font-size: .8rem; color: var(--nc-block); margin-top: .4rem; }
.nc-select { appearance: none; padding-right: 2.5rem; background: var(--nc-bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8fa5' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.nc-textarea { min-height: 130px; resize: vertical; }
.nc-input-group { position: relative; }
.nc-input-group .nc-input { padding-left: 2.6rem; }
.nc-input-group > svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--nc-muted); pointer-events: none; }
.nc-input-group .reveal-pw { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--nc-muted); font-size: .8rem; padding: .35rem .5rem; border-radius: 8px; cursor: pointer; }
.nc-input-group .reveal-pw:hover { color: var(--nc-fg); background: rgba(255,255,255,.05); }

.nc-check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--nc-fg-2); cursor: pointer; }
.nc-check input { appearance: none; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--nc-line-2); background: var(--nc-bg-1); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.nc-check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .15s; }
.nc-check input:checked { background: var(--nc-brand); border-color: var(--nc-brand); }
.nc-check input:checked::after { transform: rotate(-45deg) scale(1); }
.nc-check input:focus-visible { outline: 2px solid var(--nc-brand); outline-offset: 2px; }

/* switch */
.nc-switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; cursor: pointer; }
.nc-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #262a3a; transition: background .25s; }
.nc-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3,.7,.3,1.3); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.nc-switch input:checked + span { background: var(--nc-brand); }
.nc-switch input:checked + span::after { transform: translateX(18px); }
.nc-switch input:focus-visible + span { outline: 2px solid var(--nc-brand); outline-offset: 2px; }

/* segmented control */
.nc-seg { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--nc-line-2); background: var(--nc-bg-1); gap: 2px; }
.nc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.nc-seg label { padding: .45rem .9rem; border-radius: 9px; font-size: .85rem; color: var(--nc-muted); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.nc-seg label:hover { color: var(--nc-fg); }
.nc-seg input:checked + label { background: var(--nc-bg-3); color: var(--nc-fg); box-shadow: inset 0 0 0 1px var(--nc-line-2); }
.nc-seg input:focus-visible + label { outline: 2px solid var(--nc-brand); outline-offset: -2px; }

/* option cards (radio / checkbox as cards) */
.nc-option { position: relative; display: block; height: 100%; cursor: pointer; }
.nc-option input { position: absolute; opacity: 0; pointer-events: none; }
.nc-option .box { height: 100%; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--nc-line-2); background: var(--nc-bg-1); display: flex; gap: .8rem; align-items: center; transition: border-color .2s, background .2s, box-shadow .2s; }
.nc-option .box:hover { border-color: rgba(255,255,255,.22); }
.nc-option input:checked + .box { border-color: var(--nc-brand); background: linear-gradient(180deg, rgba(106,123,255,.14), rgba(106,123,255,.03)); box-shadow: 0 0 0 3px rgba(106,123,255,.12); }
.nc-option input:focus-visible + .box { outline: 2px solid var(--nc-brand); outline-offset: 2px; }
.nc-option .box strong { display: block; font-weight: 500; }
.nc-option .box small { color: var(--nc-muted); }
.nc-option .tick { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--nc-line-2); flex: none; display: grid; place-items: center; }
.nc-option input:checked + .box .tick { background: var(--nc-brand); border-color: var(--nc-brand); }
.nc-option input:checked + .box .tick::after { content: ""; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-top: -2px; }
.nc-option .plat-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nc-bg-3); flex: none; }
.nc-option .plat-ico svg { width: 18px; height: 18px; fill: currentColor; }

/* ===== Status, badges, alerts ===== */
.nc-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.nc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nc-pill.allow { color: var(--nc-allow); background: rgba(69,211,159,.12); }
.nc-pill.route { color: var(--nc-route); background: rgba(245,196,81,.12); }
.nc-pill.block { color: var(--nc-block); background: rgba(255,107,125,.12); }
.nc-pill.neutral { color: var(--nc-fg-2); background: rgba(255,255,255,.06); }
.nc-pill.brand { color: var(--nc-brand-2); background: var(--nc-brand-soft); }
.nc-alert { display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid; font-size: .92rem; }
.nc-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.nc-alert.info { color: var(--nc-brand-2); border-color: rgba(106,123,255,.35); background: var(--nc-brand-soft); }
.nc-alert.ok { color: var(--nc-allow); border-color: rgba(69,211,159,.35); background: rgba(69,211,159,.08); }
.nc-alert.warn { color: var(--nc-route); border-color: rgba(245,196,81,.35); background: rgba(245,196,81,.08); }
.nc-alert.err { color: var(--nc-block); border-color: rgba(255,107,125,.35); background: rgba(255,107,125,.08); }
.nc-alert p { margin: 0; color: var(--nc-fg-2); }
.nc-alert strong { display: block; color: var(--nc-fg); font-weight: 500; }

/* toast */
.nc-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 100; display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem; border-radius: 12px; background: var(--nc-bg-3); border: 1px solid var(--nc-line-2); box-shadow: 0 20px 50px -15px rgba(0,0,0,.8); font-size: .92rem; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nc-toast.show { transform: translate(-50%, 0); }
.nc-toast svg { width: 18px; height: 18px; color: var(--nc-allow); }

/* surfaces */
.nc-card { border: 1px solid var(--nc-line); border-radius: 18px; background: var(--nc-bg-1); }
.nc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--nc-line); }
.nc-card-head h2, .nc-card-head h3 { font-size: 1rem; margin: 0; letter-spacing: -.01em; }
.nc-card-body { padding: 1.3rem; }
.nc-empty { text-align: center; padding: 3rem 1.5rem; color: var(--nc-muted); }
.nc-empty .f-icon { margin: 0 auto 1rem; }
.nc-empty h3 { color: var(--nc-fg); font-size: 1.05rem; }
.sample-tag { font: 500 .7rem var(--nc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nc-muted); border: 1px dashed var(--nc-line-2); padding: .2rem .5rem; border-radius: 6px; }

/* tables */
.nc-table-wrap { overflow-x: auto; }
.nc-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.nc-table th { font-size: .75rem; font-weight: 500; color: var(--nc-muted); text-align: left; padding: .8rem 1.3rem; border-bottom: 1px solid var(--nc-line); white-space: nowrap; }
.nc-table td { padding: .85rem 1.3rem; border-bottom: 1px solid var(--nc-line); color: var(--nc-fg-2); vertical-align: middle; }
.nc-table tr:last-child td { border-bottom: 0; }
.nc-table tbody tr { transition: background .2s; }
.nc-table tbody tr:hover { background: rgba(255,255,255,.02); }
.nc-table .src { display: inline-flex; align-items: center; gap: .55rem; color: var(--nc-fg); }
.nc-table .src svg { width: 16px; height: 16px; fill: currentColor; color: var(--nc-muted); }
.nc-table tr.new td { animation: rowIn .7s ease; }
@keyframes rowIn { from { background: rgba(106,123,255,.14); } }

/* ===== Auth pages (giriş / kayıt) ===== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-form { display: flex; flex-direction: column; padding: 2rem clamp(1.25rem, 5vw, 4.5rem); }
.auth-form .brand img { height: 20px; width: auto; }
.auth-form .inner { width: 100%; max-width: 440px; margin: auto; padding-block: 3rem; }
.auth-form h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -.035em; }
.auth-side { position: relative; overflow: hidden; border-left: 1px solid var(--nc-line); background: radial-gradient(ellipse at 30% 0%, rgba(106,123,255,.16), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(106,123,255,.08), transparent 50%), var(--nc-bg-1); display: flex; align-items: center; justify-content: center; padding: 3rem; isolation: isolate; }
.auth-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--nc-line) 1px, transparent 1px), linear-gradient(90deg, var(--nc-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.auth-side .inner { max-width: 440px; width: 100%; }
.auth-side h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.03em; }
.divider-text { display: flex; align-items: center; gap: 1rem; color: var(--nc-muted); font-size: .8rem; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--nc-line); }
.float-card { animation: floaty 6s ease-in-out infinite; }
.float-card.d2 { animation-delay: -3s; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@media (max-width: 991.98px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* stepper */
.stepper { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.stepper li { flex: 1; display: grid; gap: .5rem; font-size: .8rem; color: var(--nc-muted); }
.stepper li::before { content: ""; height: 3px; border-radius: 3px; background: var(--nc-line-2); transition: background .3s; }
.stepper li.done::before, .stepper li.on::before { background: var(--nc-brand); }
.stepper li.on { color: var(--nc-fg); }
.step-pane { animation: paneIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes paneIn { from { opacity: .001; transform: translateX(16px); } }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .55rem; }
.pw-meter i { height: 4px; border-radius: 4px; background: var(--nc-line-2); transition: background .3s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--nc-block); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--nc-route); }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: var(--nc-brand-2); }
.pw-meter[data-s="4"] i { background: var(--nc-allow); }

/* ===== Page hero (inner pages) ===== */
.page-hero { position: relative; padding-block: 5rem 3rem; text-align: center; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -240px; width: 900px; height: 600px; max-width: 160vw; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(106,123,255,.14), transparent); }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -.045em; line-height: 1.05; padding-bottom: .06em; }
.page-hero p { color: var(--nc-fg-2); font-size: 1.12rem; max-width: 56ch; margin: 1rem auto 0; }

/* contact */
.contact-card { display: flex; gap: 1rem; padding: 1.2rem; border-radius: 16px; border: 1px solid var(--nc-line); background: var(--nc-bg-1); }
.contact-card h3 { font-size: 1rem; margin: 0 0 .2rem; }
.contact-card p { margin: 0; color: var(--nc-muted); font-size: .92rem; }
.contact-card .f-icon { margin: 0; flex: none; }
.form-success { text-align: center; padding: 2.5rem 1rem; }
.form-success .ok-ring { width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(69,211,159,.12); color: var(--nc-allow); animation: pop .5s cubic-bezier(.2,.9,.3,1.4); }
.form-success .ok-ring svg { width: 34px; height: 34px; }

/* pricing comparison */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.cmp th, .cmp td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--nc-line); text-align: center; font-size: .93rem; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--nc-fg-2); }
.cmp thead th { position: sticky; top: 64px; background: rgba(0,0,0,.9); backdrop-filter: blur(10px); font-size: 1rem; font-weight: 600; color: var(--nc-fg); z-index: 1; }
.cmp thead th.pro { color: var(--nc-brand-2); }
.cmp td.pro { background: rgba(106,123,255,.05); }
.cmp .group td { text-align: left; font: 500 .75rem var(--nc-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nc-brand-2); padding-top: 1.8rem; background: transparent; }
.cmp svg { width: 18px; height: 18px; }
.cmp .yes { color: var(--nc-allow); } .cmp .no { color: #3e4256; }

/* ===== Panel (app shell) ===== */
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.app-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .25rem; padding: 1.2rem .9rem; border-right: 1px solid var(--nc-line); background: var(--nc-bg-1); overflow-y: auto; }
.app-side .brand { padding: .3rem .6rem 1.2rem; }
.app-side .brand img { height: 18px; width: auto; }
.app-side .group-label { margin: 1rem .7rem .4rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nc-muted); }
.app-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; font-size: .92rem; color: var(--nc-fg-2); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.app-link svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.app-link:hover { background: rgba(255,255,255,.04); color: var(--nc-fg); }
.app-link.active { background: var(--nc-brand-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(106,123,255,.3); }
.app-link.active svg { opacity: 1; color: var(--nc-brand-2); }
.app-link .soon { margin-left: auto; font-size: .65rem; padding: .1rem .4rem; border-radius: 6px; border: 1px solid var(--nc-line-2); color: var(--nc-muted); }
.app-side .plan-box { margin-top: auto; padding: 1rem; border-radius: 14px; border: 1px solid var(--nc-line); background: radial-gradient(ellipse at 100% 0%, rgba(106,123,255,.12), transparent 70%), var(--nc-bg-2); font-size: .85rem; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--nc-line); background: rgba(0,0,0,.75); backdrop-filter: blur(12px); }
.app-top .site-pick { max-width: 240px; }
.app-top .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 600; background: var(--nc-brand); }
.app-top .menu-btn { display: none; }
.app-content { padding: clamp(1rem, 3vw, 2rem); display: grid; gap: 1.25rem; }
.app-content h1 { font-size: 1.6rem; letter-spacing: -.03em; margin: 0; }
.view[hidden] { display: none !important; }
.view { animation: paneIn .4s cubic-bezier(.2,.7,.2,1); }
.stat { padding: 1.2rem 1.3rem; border-radius: 16px; border: 1px solid var(--nc-line); background: var(--nc-bg-1); height: 100%; }
.stat .k { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--nc-muted); }
.stat .k i { width: 8px; height: 8px; border-radius: 50%; }
.stat .v { font-size: 2rem; font-weight: 600; letter-spacing: -.04em; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.stat .bar { height: 4px; border-radius: 4px; background: var(--nc-line); margin-top: .8rem; overflow: hidden; }
.stat .bar i { display: block; height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.chart { width: 100%; height: 220px; display: block; }
.chart .grid line { stroke: var(--nc-line); }
.chart .axis text { fill: var(--nc-muted); font-size: 10px; font-family: var(--nc-mono); }
.chart rect { transition: height .8s cubic-bezier(.2,.7,.2,1), y .8s cubic-bezier(.2,.7,.2,1); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--nc-muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.plat-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .6rem 0; }
.plat-row svg { width: 20px; height: 20px; fill: currentColor; color: var(--nc-fg-2); }
.plat-row .meter { height: 6px; border-radius: 6px; background: var(--nc-line); overflow: hidden; margin-top: .35rem; }
.plat-row .meter i { display: block; height: 100%; background: var(--nc-brand); border-radius: 6px; }
.plat-row small { color: var(--nc-muted); font-variant-numeric: tabular-nums; }
.filter-row { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--nc-line); flex-wrap: wrap; }
.filter-row:last-child { border-bottom: 0; }
.filter-row .f-icon { margin: 0; flex: none; }
.filter-row .txt { flex: 1; min-width: 180px; }
.filter-row .txt strong { display: block; font-weight: 500; }
.filter-row .txt small { color: var(--nc-muted); }
.filter-row.off .txt, .filter-row.off .f-icon { opacity: .45; }
.filter-row .nc-select { width: auto; min-width: 170px; padding-block: .5rem; }
@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-top .menu-btn { display: inline-flex; }
}

/* ===== Bootstrap component skins =====
   Any Bootstrap component used later (modal, tabs, pagination, tooltip, DataTables via its Bootstrap 5 build…) already looks like NSCLOCK:
   only Bootstrap's own CSS variables are set here, from the tokens. Do not restyle these components inline. */
.card { --bs-card-bg: var(--nc-bg-1); --bs-card-color: var(--nc-fg); --bs-card-border-color: var(--nc-line); --bs-card-border-radius: 18px; --bs-card-inner-border-radius: 17px; --bs-card-cap-bg: transparent; --bs-card-spacer-x: 1.3rem; --bs-card-spacer-y: 1.3rem; --bs-card-cap-padding-x: 1.3rem; --bs-card-cap-padding-y: 1.1rem; }
.form-control, .form-select { color: var(--nc-fg); background-color: var(--nc-bg-1); border: 1px solid var(--nc-line-2); border-radius: 12px; padding: .75rem .95rem; }
.form-control::placeholder { color: #5d6278; }
.form-control:focus, .form-select:focus { color: var(--nc-fg); background-color: var(--nc-bg-2); border-color: var(--nc-brand); box-shadow: 0 0 0 4px rgba(106,123,255,.18); }
.form-select { padding-right: 2.5rem; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--nc-fg-2); --bs-table-border-color: var(--nc-line); --bs-table-hover-bg: rgba(255,255,255,.02); --bs-table-hover-color: var(--nc-fg); --bs-table-striped-bg: rgba(255,255,255,.02); --bs-table-striped-color: var(--nc-fg-2); }
.modal { --bs-modal-bg: var(--nc-bg-2); --bs-modal-color: var(--nc-fg); --bs-modal-border-color: var(--nc-line-2); --bs-modal-border-radius: 20px; --bs-modal-inner-border-radius: 19px; --bs-modal-padding: 1.5rem; --bs-modal-header-border-color: var(--nc-line); --bs-modal-footer-border-color: var(--nc-line); }
.modal-title { font-size: 1.1rem; }
.modal-backdrop { --bs-backdrop-bg: var(--nc-bg); --bs-backdrop-opacity: .7; }
.offcanvas { --bs-offcanvas-bg: var(--nc-bg-1); --bs-offcanvas-color: var(--nc-fg); --bs-offcanvas-border-color: var(--nc-line); }
.nav-tabs { --bs-nav-link-color: var(--nc-muted); --bs-nav-link-hover-color: var(--nc-fg); --bs-nav-tabs-border-color: var(--nc-line); --bs-nav-tabs-border-radius: 10px; --bs-nav-tabs-link-hover-border-color: transparent transparent var(--nc-line-2); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--nc-brand); }
.nav-tabs .nav-link { border-width: 0 0 2px; border-radius: 0; margin-bottom: -1px; }
.nav-pills { --bs-nav-link-color: var(--nc-muted); --bs-nav-link-hover-color: var(--nc-fg); --bs-nav-pills-link-active-bg: var(--nc-brand-soft); --bs-nav-pills-link-active-color: var(--nc-brand-2); --bs-nav-pills-border-radius: 10px; }
.pagination { --bs-pagination-color: var(--nc-fg-2); --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--nc-line-2); --bs-pagination-hover-color: #fff; --bs-pagination-hover-bg: rgba(255,255,255,.06); --bs-pagination-hover-border-color: var(--nc-line-2); --bs-pagination-focus-color: #fff; --bs-pagination-focus-bg: var(--nc-bg-2); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(106,123,255,.25); --bs-pagination-active-color: var(--nc-brand-2); --bs-pagination-active-bg: var(--nc-brand-soft); --bs-pagination-active-border-color: rgba(106,123,255,.35); --bs-pagination-disabled-color: var(--nc-muted); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--nc-line); --bs-pagination-border-radius: 10px; }
.tooltip { --bs-tooltip-bg: var(--nc-bg-3); --bs-tooltip-color: var(--nc-fg); --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: 10px; --bs-tooltip-font-size: .8rem; }
.popover { --bs-popover-bg: var(--nc-bg-2); --bs-popover-border-color: var(--nc-line-2); --bs-popover-border-radius: 14px; --bs-popover-header-bg: transparent; --bs-popover-header-color: var(--nc-fg); --bs-popover-body-color: var(--nc-fg-2); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--nc-fg-2); --bs-list-group-border-color: var(--nc-line); --bs-list-group-border-radius: 14px; --bs-list-group-action-hover-bg: rgba(255,255,255,.03); --bs-list-group-action-hover-color: #fff; --bs-list-group-active-bg: var(--nc-brand-soft); --bs-list-group-active-color: var(--nc-brand-2); --bs-list-group-active-border-color: rgba(106,123,255,.35); }
.progress { --bs-progress-bg: var(--nc-line); --bs-progress-bar-bg: var(--nc-brand); --bs-progress-height: 6px; --bs-progress-border-radius: 6px; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--nc-muted); --bs-breadcrumb-item-active-color: var(--nc-fg-2); }
.spinner-border, .spinner-grow { color: var(--nc-brand-2); }

/* ===== Kit page ===== */
.kit-nav { position: sticky; top: 88px; display: grid; gap: .15rem; }
.kit-nav a { padding: .4rem .7rem; border-radius: 8px; font-size: .9rem; color: var(--nc-muted); text-decoration: none; }
.kit-nav a:hover { color: var(--nc-fg); background: rgba(255,255,255,.04); }
.kit-sec { padding-block: 2.5rem; border-bottom: 1px solid var(--nc-line); scroll-margin-top: 80px; }
.kit-sec h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.kit-sec > p { color: var(--nc-muted); max-width: 64ch; }
.kit-demo { padding: 1.5rem; border-radius: 16px; border: 1px solid var(--nc-line); background: var(--nc-bg-1); }
.kit-code { margin: 0; padding: .9rem 1.1rem; border-radius: 12px; background: var(--nc-bg-2); border: 1px solid var(--nc-line); font: 400 .8rem/1.6 var(--nc-mono); color: var(--nc-fg-2); overflow-x: auto; white-space: pre; }
.swatch { border-radius: 14px; overflow: hidden; border: 1px solid var(--nc-line); }
.swatch .c { height: 72px; }
.swatch .m { padding: .6rem .8rem; font-size: .8rem; }
.swatch .m code { display: block; color: var(--nc-muted); font-size: .72rem; }
.type-row { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px dashed var(--nc-line); }
.type-row code { font-size: .75rem; color: var(--nc-muted); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.icon-grid div { display: grid; justify-items: center; gap: .5rem; padding: 1rem .5rem; border-radius: 12px; border: 1px solid var(--nc-line); font: .7rem var(--nc-mono); color: var(--nc-muted); }
.icon-grid svg { width: 24px; height: 24px; color: var(--nc-fg); fill: none; }
.icon-grid svg.fill { fill: currentColor; }

/* Bootstrap display utilities use !important; keep the hidden attribute stronger */
.d-grid[hidden], .d-flex[hidden], .d-block[hidden], .d-inline-flex[hidden] { display: none !important; }
a.app-link { text-decoration: none; }

/* verification code */
.code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.code-inputs input { width: 100%; aspect-ratio: 1 / 1.15; max-width: 100%; text-align: center; font: 600 1.6rem var(--nc-mono); color: var(--nc-fg); background: var(--nc-bg-1); border: 1px solid var(--nc-line-2); border-radius: 14px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.code-inputs input:focus { outline: none; border-color: var(--nc-brand); box-shadow: 0 0 0 4px rgba(106,123,255,.18); transform: translateY(-2px); }
.code-inputs input.filled { border-color: rgba(106,123,255,.6); background: var(--nc-bg-2); }
.code-inputs.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mail-ill { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: var(--nc-brand-soft); border: 1px solid rgba(106,123,255,.35); color: var(--nc-brand-2); margin-bottom: 1.5rem; animation: floaty 5s ease-in-out infinite; }
.mail-ill svg { width: 38px; height: 38px; }

/* 404 */
.nf { position: relative; padding-block: 6rem 4rem; text-align: center; isolation: isolate; }
.nf-code { font-size: clamp(7rem, 22vw, 15rem); font-weight: 700; letter-spacing: -.08em; line-height: .9; background: linear-gradient(180deg, #fff 20%, rgba(106,123,255,.2)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; }
.nf-code::after { content: attr(data-t); position: absolute; inset: 0; color: var(--nc-block); -webkit-text-fill-color: var(--nc-block); opacity: .35; clip-path: inset(0 0 60% 0); animation: glitch 3s steps(1) infinite; }
@keyframes glitch { 0%, 92% { transform: none; clip-path: inset(0 0 100% 0); } 93% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 96% { transform: translate(5px, -2px); clip-path: inset(60% 0 10% 0); } }
.nf .fcard { max-width: 420px; margin: 2.5rem auto 0; text-align: left; }

/* legal */
.legal-nav { position: sticky; top: 88px; display: grid; gap: .2rem; }
.legal-nav a { padding: .55rem .8rem; border-radius: 10px; color: var(--nc-muted); text-decoration: none; font-size: .95rem; }
.legal-nav a:hover { color: var(--nc-fg); background: rgba(255,255,255,.04); }
.legal-doc section { padding-block: 0 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--nc-line); scroll-margin-top: 88px; }
.legal-doc h2 { font-size: 1.7rem; letter-spacing: -.03em; }
.legal-doc h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.legal-doc p, .legal-doc li { color: var(--nc-fg-2); max-width: 70ch; }
.legal-doc .ph { color: var(--nc-muted); font-family: var(--nc-mono); font-size: .85rem; }

/* language switch */
.lang-switch { position: relative; }
.lang-switch > button { display: inline-flex; align-items: center; gap: .45rem; }
.lang-switch .flag { font: 600 .72rem var(--nc-mono); letter-spacing: .04em; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: .4rem; border-radius: 14px; border: 1px solid var(--nc-line-2); background: var(--nc-bg-2); box-shadow: 0 20px 50px -15px rgba(0,0,0,.8); display: grid; gap: 2px; z-index: 70; }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--nc-fg-2); text-decoration: none; font-size: .9rem; }
.lang-menu a:hover { background: rgba(255,255,255,.05); color: var(--nc-fg); }
.lang-menu a[aria-current] { color: #fff; background: var(--nc-brand-soft); }
.lang-menu .flag { width: 28px; color: var(--nc-muted); }
footer .lang-switch .lang-menu { top: auto; bottom: calc(100% + 8px); }

/* language switch: always visible in the header, own slot at the far right on desktop */
.nav-lang .lang-switch > button { gap: .4rem; padding-inline: .7rem; }
.lang-switch .lang-name { display: none; font-size: .85rem; }
.lang-switch .chev { opacity: .6; transition: transform .2s; }
.lang-switch > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (min-width: 992px) {
  .nav-lang { margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--nc-line-2); }
  .nav-lang .lang-switch .lang-name { display: inline; }
  .nav-lang .lang-switch .flag { display: none; }
}
.lang-menu a .ico { color: var(--nc-brand-2); }

/* grid children default to min-width:auto; let wide tables scroll inside their card instead of widening the panel */
.app-content > * { min-width: 0; }
.app-top .site-pick { min-width: 0; flex: 1 1 auto; }

/* ===== Right-to-left (Arabic and other RTL locales) =====
   Bootstrap is swapped for its RTL build by build.py; these rules mirror our own physical offsets. */
[dir="rtl"] .btn .ar, [dir="rtl"] .r-more, [dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ar { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .nc-input-group .nc-input { padding-left: .95rem; padding-right: 2.6rem; }
[dir="rtl"] .nc-input-group > svg { left: auto; right: .9rem; }
[dir="rtl"] .nc-input-group .reveal-pw { right: auto; left: .5rem; }
[dir="rtl"] .nc-select { padding-right: .95rem; padding-left: 2.5rem; background-position: left 1rem center; }
[dir="rtl"] .nc-option .tick { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-menu a .ico { margin-left: 0 !important; margin-right: auto; }
@media (min-width: 992px) { [dir="rtl"] .nav-lang { margin-left: 0; padding-left: 0; border-left: 0; margin-right: .9rem; padding-right: .9rem; border-right: 1px solid var(--nc-line-2); } }
[dir="rtl"] .app-side { border-right: 0; border-left: 1px solid var(--nc-line); }
[dir="rtl"] .app-link { text-align: right; }
[dir="rtl"] .app-link .soon { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nc-table th, [dir="rtl"] .nc-table td, [dir="rtl"] .cmp th:first-child, [dir="rtl"] .cmp td:first-child { text-align: right; }
[dir="rtl"] .plan li, [dir="rtl"] .checks li { text-align: right; }
[dir="rtl"] .divider-text, [dir="rtl"] .contact-card, [dir="rtl"] .filter-row { direction: rtl; }
[dir="rtl"] .stepper li { text-align: right; }
[dir="rtl"] .legal-doc, [dir="rtl"] .legal-nav { text-align: right; }
[dir="rtl"] .kit-code, [dir="rtl"] code, [dir="rtl"] .font-mono { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .trace div span { margin-left: 0; margin-right: auto; }
/* the traffic diagram is a left-to-right flow chart; keep its geometry and let labels stay readable */
[dir="rtl"] .tflow svg { direction: ltr; }
[dir="rtl"] .ticker-track { animation-direction: reverse; }

/* language switch flags */
.flag-ico { width: 20px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); overflow: hidden; }
.lang-switch > button { gap: .45rem; }
.lang-switch > button .flag { display: none; }
.lang-menu a { gap: .65rem; }
.lang-menu a .flag { margin-left: auto; width: auto; font-size: .7rem; color: var(--nc-muted); }
.lang-menu a[aria-current] .flag { display: none; }
[dir="rtl"] .lang-menu a .flag { margin-left: 0; margin-right: auto; }
@media (max-width: 991.98px) { .nav-lang .lang-switch .lang-name { display: none; } .nav-lang .lang-switch > button .flag { display: inline; } }

/* ===== Long-form text (blog posts, help articles) — see DESIGN.md "Article pages" ===== */
.prose { max-width: 70ch; margin-inline: auto; font-size: 1.06rem; line-height: 1.75; color: var(--nc-fg-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.7rem; letter-spacing: -.03em; color: var(--nc-fg); margin-top: 2.2em; }
.prose h3 { font-size: 1.25rem; color: var(--nc-fg); margin-top: 1.8em; }
.prose a { color: var(--nc-brand-2); text-underline-offset: 3px; }
.prose strong { color: var(--nc-fg); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding: .9rem 1.2rem; border-inline-start: 3px solid var(--nc-brand); background: var(--nc-brand-soft); border-radius: 0 12px 12px 0; color: var(--nc-fg); }
[dir="rtl"] .prose blockquote { border-radius: 12px 0 0 12px; }
.prose img, .prose figure { max-width: 100%; border-radius: 16px; border: 1px solid var(--nc-line); }
.prose figcaption { font-size: .85rem; color: var(--nc-muted); margin-top: .5rem; }
.prose code { font-family: var(--nc-mono); font-size: .88em; padding: .15em .4em; border-radius: 6px; background: var(--nc-bg-2); color: var(--nc-fg); }
.prose pre { padding: 1rem 1.2rem; border-radius: 12px; background: var(--nc-bg-2); border: 1px solid var(--nc-line); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose hr { border: 0; border-top: 1px solid var(--nc-line); margin-block: 2.5em; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; color: var(--nc-muted); font-size: .9rem; margin-top: 1.2rem; }
.article-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.article-meta svg { width: 16px; height: 16px; }