/* STA Design System — Syrian Tourism Alliance */
:root {
    --stbn-navy-950: #071725;
    --stbn-navy-900: #0b2033;
    --stbn-navy-800: #12324b;
    --stbn-navy-700: #194766;
    --stbn-teal-700: #0d7f90;
    --stbn-teal-600: #129fb1;
    --stbn-teal-500: #1bb1c4;
    --stbn-teal-100: #e0f7fa;
    --stbn-gold-600: #c7881f;
    --stbn-gold-500: #e3a543;
    --stbn-gold-100: #fff2d8;
    --stbn-coral-600: #d95f59;
    --stbn-blue-600: #3578e5;
    --stbn-success: #16845b;
    --stbn-warning: #b9750f;
    --stbn-danger: #c44444;
    --stbn-ink: #102436;
    --stbn-muted: #6d7e8f;
    --stbn-soft: #eef3f7;
    --stbn-bg: #f4f7fa;
    --stbn-surface: #ffffff;
    --stbn-line: #dfe8ef;
    --stbn-line-soft: #edf2f6;
    --stbn-radius-sm: 10px;
    --stbn-radius: 16px;
    --stbn-radius-lg: 24px;
    --stbn-sidebar: 292px;
    --stbn-shadow-sm: 0 6px 18px rgba(15, 43, 66, .06);
    --stbn-shadow: 0 18px 48px rgba(15, 43, 66, .10);
    --stbn-shadow-lg: 0 28px 80px rgba(7, 23, 37, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 82% 5%, rgba(17, 184, 173, .10), transparent 28rem),
        radial-gradient(circle at 12% 90%, rgba(242, 184, 75, .08), transparent 26rem),
        var(--stbn-bg);
    color: var(--stbn-ink);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(16, 36, 54, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 36, 54, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 70%);
    z-index: -1;
}

h1, h2, h3, h4, h5, h6 { color: var(--stbn-ink); font-weight: 700; letter-spacing: -.025em; }
a { color: var(--stbn-teal-700); }
a:hover { color: var(--stbn-teal-600); }
.num, td .num, .stat-value { font-variant-numeric: tabular-nums; }
.stbn-icon { flex: 0 0 auto; vertical-align: -4px; }
.text-secondary { color: var(--stbn-muted) !important; }

/* Shell */
.stbn-shell { display: flex; min-height: 100vh; }
.stbn-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--stbn-sidebar);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #c9d9e6;
    background:
        radial-gradient(circle at 15% 4%, rgba(17, 184, 173, .25), transparent 18rem),
        linear-gradient(160deg, var(--stbn-navy-800), var(--stbn-navy-950) 68%);
    box-shadow: 18px 0 54px rgba(7, 23, 37, .13);
}
.stbn-sidebar::before,
.stbn-sidebar::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transform: rotate(45deg);
    border: 1px solid rgba(255, 255, 255, .06);
}
.stbn-sidebar::before { width: 280px; height: 280px; top: -145px; left: -110px; }
.stbn-sidebar::after { width: 220px; height: 220px; bottom: -130px; right: -105px; }
.stbn-sidebar-inner { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.stbn-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}
.brand-mark {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: white;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(17,184,173,.96), rgba(8,124,120,.88));
    box-shadow: 0 12px 24px rgba(4, 103, 101, .32), inset 0 1px rgba(255,255,255,.28);
    overflow: hidden;
}
.brand-mark::before { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.27); transform: rotate(45deg); }
.brand-mark .stbn-icon { position: relative; z-index: 1; }
.stbn-brand-copy strong { display: block; color: #fff; font-size: 15px; line-height: 1.45; }
.stbn-brand-copy span { display: block; color: #8faabd; font-size: 11.5px; margin-top: 2px; letter-spacing: .01em; }
.stbn-nav { padding: 17px 13px 24px; flex: 1; }
.stbn-nav .nav-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 7px;
    color: #6f8ca2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
}
.stbn-nav .nav-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.stbn-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 9px 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    color: #bed0de;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.stbn-nav a .nav-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #87a5b9;
    background: rgba(255,255,255,.045);
    transition: all .2s ease;
}
.stbn-nav a:hover { color: #fff; background: rgba(255,255,255,.065); transform: translateX(-2px); }
.stbn-nav a:hover .nav-icon { color: var(--stbn-teal-500); background: rgba(17,184,173,.12); }
.stbn-nav a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(17,184,173,.22), rgba(17,184,173,.08));
    box-shadow: inset -3px 0 var(--stbn-teal-500), 0 8px 22px rgba(2, 19, 32, .12);
}
.stbn-nav a.active .nav-icon { color: #fff; background: linear-gradient(145deg, var(--stbn-teal-500), var(--stbn-teal-700)); box-shadow: 0 7px 16px rgba(9,153,147,.25); }
.stbn-nav a.is-locked { opacity: .54; cursor: not-allowed; }
.sidebar-footer { margin-top: auto; padding: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-trust { display: flex; gap: 10px; padding: 12px; border-radius: 14px; color: #a7bece; background: rgba(255,255,255,.045); font-size: 11.5px; line-height: 1.55; }
.sidebar-trust strong { display: block; color: #fff; font-size: 12px; }
.sidebar-logout-form { margin: 0 0 10px; }
.sidebar-logout-btn { width: 100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid rgba(255,255,255,.11); border-radius:12px; color:#e7f0f5; background:rgba(255,255,255,.055); font-size:12px; font-weight:700; transition:.18s ease; }
.sidebar-logout-btn:hover { border-color:rgba(248,113,113,.35); color:#fff; background:rgba(190,55,55,.2); transform:translateY(-1px); }
.sidebar-telegram { margin-bottom:10px; padding:12px; border:1px solid rgba(83,190,237,.24); border-radius:15px; color:#dcecf4; background:linear-gradient(145deg,rgba(34,158,217,.16),rgba(255,255,255,.035)); }
.sidebar-telegram-head { display:flex; align-items:center; gap:8px; }
.sidebar-telegram-head strong { display:block; max-width:150px; overflow:hidden; color:#fff; font-size:11.5px; line-height:1.35; white-space:nowrap; text-overflow:ellipsis; }
.sidebar-telegram-head span { display:block; color:#8fbed2; font-size:9px; margin-top:2px; }
.sidebar-telegram-icon { width:31px; height:31px; flex:0 0 31px; display:grid !important; place-items:center; border-radius:10px; color:#fff !important; background:#229ed9; }
.sidebar-telegram-icon .stbn-icon, .sidebar-telegram-link .stbn-icon { fill:currentColor; stroke:none; }
.sidebar-telegram p { display:-webkit-box; overflow:hidden; margin:9px 0; color:#a8c1ce; font-size:9.5px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.sidebar-telegram-qr { width:118px; height:118px; display:grid; place-items:center; margin:0 auto 9px; padding:6px; border-radius:12px; background:#fff; }
.sidebar-telegram-qr img { display:block; width:106px; height:106px; }
.sidebar-telegram-link { display:flex; align-items:center; justify-content:center; gap:6px; min-height:35px; border-radius:10px; color:#fff !important; background:linear-gradient(135deg,#229ed9,#167ead); font-size:10.5px; font-weight:700; text-decoration:none; }
.sidebar-telegram-link:hover { filter:brightness(1.08); transform:translateY(-1px); }
.stbn-main { width: calc(100% - var(--stbn-sidebar)); min-width: 0; min-height: 100vh; margin-inline-start: var(--stbn-sidebar); display: flex; flex-direction: column; }
.stbn-overlay { display: none; }

/* Topbar */
.stbn-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px clamp(18px, 3vw, 38px);
    border-bottom: 1px solid rgba(208, 221, 231, .8);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.mobile-menu-btn { display: none; }
.topbar-context { flex: 1; min-width: 0; }
.topbar-eyebrow { color: var(--stbn-teal-700); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; margin-bottom: 1px; }
.topbar-title { color: var(--stbn-ink); font-size: clamp(17px, 2vw, 21px); font-weight: 750; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-subtitle { color: var(--stbn-muted); font-size: 12px; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--stbn-line);
    border-radius: 13px;
    color: var(--stbn-navy-700);
    background: white;
    box-shadow: 0 4px 12px rgba(15,43,66,.04);
    text-decoration: none;
    transition: all .2s ease;
}
.topbar-icon-btn:hover { color: var(--stbn-teal-700); border-color: rgba(9,153,147,.3); transform: translateY(-1px); box-shadow: var(--stbn-shadow-sm); }
.notification-dot { position: absolute; top: 6px; left: 6px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid white; border-radius: 999px; color: white; background: var(--stbn-coral-600); font-size: 8px; font-weight: 700; }
.user-menu { display: flex; align-items: center; gap: 10px; min-width: 180px; padding-inline-start: 11px; border-inline-start: 1px solid var(--stbn-line); }
.user-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--stbn-navy-700), var(--stbn-teal-700)); font-size: 13px; font-weight: 700; box-shadow: 0 7px 17px rgba(8,124,120,.2); }
.user-meta { min-width: 0; line-height: 1.3; }
.user-name { overflow: hidden; color: var(--stbn-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.user-role { color: var(--stbn-muted); font-size: 10.5px; margin-top: 3px; }
.logout-btn { min-width: 72px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px !important; border: 1px solid #efd6d6 !important; border-radius: 11px; color: #a53c3c !important; background: #fff7f7 !important; font-size: 11px; font-weight: 700; transition: .18s ease; }
.logout-btn:hover { border-color: #e6bcbc !important; color: #8b2424 !important; background: #ffeded !important; transform: translateY(-1px); }
.logout-label { display:inline; }

/* Content and headers */
.stbn-content { width: 100%; max-width: 1560px; flex: 1; padding: clamp(20px, 3vw, 38px); }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-intro-copy { max-width: 730px; }
.page-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--stbn-teal-700); font-size: 11px; font-weight: 700; letter-spacing: .07em; margin-bottom: 6px; }
.page-title { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; }
.page-description { max-width: 680px; margin: 7px 0 0; color: var(--stbn-muted); font-size: 13.5px; }
.page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 13px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 16px; }
.section-heading p { margin: 3px 0 0; color: var(--stbn-muted); font-size: 12.5px; }

/* Cards */
.card {
    border: 1px solid rgba(215, 227, 236, .86);
    border-radius: var(--stbn-radius);
    background: rgba(255,255,255,.97);
    box-shadow: var(--stbn-shadow-sm);
    overflow: hidden;
}
.card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--stbn-line-soft);
    background: linear-gradient(180deg, #fff, #fbfdfe);
    color: var(--stbn-ink);
    font-weight: 700;
}
.card-body { padding: 20px; }
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(9,153,147,.25); box-shadow: var(--stbn-shadow); }
.panel-accent { position: relative; }
.panel-accent::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(var(--stbn-teal-500), var(--stbn-gold-500)); }

/* KPI */
.stat {
    position: relative;
    height: 100%;
    min-height: 126px;
    padding: 18px;
    border: 1px solid rgba(215, 227, 236, .88);
    border-radius: var(--stbn-radius);
    background: rgba(255,255,255,.96);
    box-shadow: var(--stbn-shadow-sm);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a.stat:hover { transform: translateY(-3px); border-color: rgba(9,153,147,.26); box-shadow: var(--stbn-shadow); }
.stat::after { content: ''; position: absolute; width: 74px; height: 74px; left: -22px; bottom: -28px; border-radius: 50%; background: var(--stat-glow, rgba(17,184,173,.08)); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--stat-color, var(--stbn-teal-700)); background: var(--stat-bg, var(--stbn-teal-100)); }
.stat-label { color: var(--stbn-muted); font-size: 12.5px; font-weight: 600; }
.stat-value { position: relative; z-index: 1; color: var(--stbn-ink); font-size: clamp(25px, 3vw, 32px); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
.stat-note { position: relative; z-index: 1; color: var(--stbn-muted); font-size: 11.5px; margin-top: 7px; }
.stat-teal { --stat-color: var(--stbn-teal-700); --stat-bg: var(--stbn-teal-100); --stat-glow: rgba(17,184,173,.11); }
.stat-gold { --stat-color: var(--stbn-gold-600); --stat-bg: var(--stbn-gold-100); --stat-glow: rgba(242,184,75,.12); }
.stat-blue { --stat-color: var(--stbn-blue-600); --stat-bg: #e8f0ff; --stat-glow: rgba(53,120,229,.1); }
.stat-coral { --stat-color: var(--stbn-coral-600); --stat-bg: #fcebea; --stat-glow: rgba(217,95,89,.1); }
.stat-navy { --stat-color: var(--stbn-navy-700); --stat-bg: #e9eff4; --stat-glow: rgba(18,50,75,.1); }
.stat-mini { min-height: 104px; padding: 15px 17px; }
.stat-mini .stat-value { font-size: 26px; }
.action-stat { display: block; color: inherit; text-decoration: none; }
.action-stat .stat-arrow { position: absolute; inset-inline-end: 16px; inset-block-end: 15px; color: var(--stbn-muted); transition: transform .2s ease, color .2s ease; }
.action-stat:hover .stat-arrow { color: var(--stbn-teal-700); transform: translateX(-3px); }

/* Trust hero */
.trust-hero {
    position: relative;
    min-height: 188px;
    padding: 26px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 0;
    border-radius: var(--stbn-radius-lg);
    color: white;
    background:
        radial-gradient(circle at 12% 20%, rgba(17,184,173,.36), transparent 22rem),
        linear-gradient(135deg, var(--stbn-navy-800), var(--stbn-navy-950));
    box-shadow: var(--stbn-shadow-lg);
}
.trust-hero::before { content: ''; position: absolute; width: 260px; height: 260px; inset-inline-end: -70px; top: -110px; border: 1px solid rgba(255,255,255,.1); transform: rotate(45deg); }
.trust-hero::after { content: ''; position: absolute; width: 130px; height: 130px; inset-inline-end: 74px; bottom: -82px; border: 1px solid rgba(242,184,75,.26); transform: rotate(45deg); }
.trust-hero-content { position: relative; z-index: 1; max-width: 700px; }
.trust-hero .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #8ce4dd; font-size: 11px; font-weight: 700; margin-bottom: 9px; }
.trust-hero h1, .trust-hero h2 { color: white; font-size: clamp(24px, 3vw, 36px); margin: 0; }
.trust-hero p { color: #b8cedd; max-width: 620px; margin: 9px 0 0; font-size: 13.5px; }
.trust-hero-actions { position: relative; z-index: 1; margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent); }
.badge-status.is-verified { color: var(--stbn-success); background: #e7f7f0; border-color: #c5eadb; }
.badge-status.is-pending { color: var(--stbn-warning); background: #fff5e3; border-color: #f3ddba; }
.badge-status.is-rejected { color: var(--stbn-danger); background: #fdeceb; border-color: #efc9c7; }
.badge-status.is-suspended { color: #fff; background: #5a4548; border-color: #5a4548; }
.badge-status.is-draft { color: #607181; background: #edf2f5; border-color: #dbe4ea; }
.badge-level { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border: 1px solid var(--stbn-line); border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-level.lv-bronze { color: #966832; background: #f9f1e8; border-color: #ead6bf; }
.badge-level.lv-silver { color: #667485; background: #f1f4f7; border-color: #dce3e9; }
.badge-level.lv-gold { color: #9a7118; background: #fff7dd; border-color: #eedb9d; }
.badge-level.lv-diamond { color: #087d90; background: #e5f7fb; border-color: #bce5ec; }

/* Rail and completion */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail::before { content: ''; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 13px; width: 2px; background: linear-gradient(var(--stbn-teal-500), var(--stbn-line) 75%); }
.rail li { position: relative; min-height: 46px; padding-inline-start: 43px; padding-block: 8px; color: var(--stbn-muted); font-size: 13.5px; }
.rail li::before { content: ''; position: absolute; inset-inline-start: 5px; top: 10px; width: 18px; height: 18px; border: 4px solid white; border-radius: 50%; background: var(--stbn-line); box-shadow: 0 0 0 1px var(--stbn-line); }
.rail li.done { color: var(--stbn-ink); }
.rail li.done::before { background: var(--stbn-teal-500); box-shadow: 0 0 0 1px var(--stbn-teal-500); }
.rail li.current { color: var(--stbn-ink); font-weight: 700; }
.rail li.current::before { background: var(--stbn-gold-500); box-shadow: 0 0 0 4px rgba(242,184,75,.18); }
.rail li.blocked::before { background: var(--stbn-danger); box-shadow: 0 0 0 1px var(--stbn-danger); }
.completion { height: 9px; background: #e8eef3; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,43,66,.06); }
.completion > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--stbn-teal-700), var(--stbn-teal-500)); transition: width .35s ease; }
.completion.is-full > span { background: linear-gradient(90deg, var(--stbn-success), var(--stbn-teal-500)); }
.section-check { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 10px 0; border-bottom: 1px solid var(--stbn-line-soft); font-size: 13.5px; }
.section-check:last-child { border-bottom: 0; }
.section-check .ok { display: inline-flex; align-items: center; gap: 5px; color: var(--stbn-success); font-size: 11.5px; font-weight: 700; }
.section-check .miss { display: inline-flex; align-items: center; gap: 5px; color: var(--stbn-warning); font-size: 11.5px; font-weight: 700; }

/* Forms */
.form-label { margin-bottom: 6px; color: #2d4254; font-size: 12.5px; font-weight: 700; }
.form-control, .form-select {
    min-height: 46px;
    padding: 9px 13px;
    border: 1px solid var(--stbn-line);
    border-radius: 12px;
    color: var(--stbn-ink);
    background-color: #fff;
    font-size: 13.5px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder { color: #a0aebb; }
.form-control:hover, .form-select:hover { border-color: #c4d3de; }
.form-control:focus, .form-select:focus { border-color: var(--stbn-teal-500); box-shadow: 0 0 0 4px rgba(17,184,173,.11); }
.form-control:disabled, .form-select:disabled { background: #f2f5f7; color: #8393a0; }
.form-text { color: var(--stbn-muted); font-size: 11.5px; }
.required::after { content: ' *'; color: var(--stbn-danger); }
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: #91a0ad; z-index: 2; }
.input-icon-wrap .form-control { padding-inline-start: 44px; }
.filter-panel { padding: 16px; border: 1px solid var(--stbn-line); border-radius: var(--stbn-radius); background: rgba(255,255,255,.96); box-shadow: var(--stbn-shadow-sm); }
.filter-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--stbn-muted); font-size: 11.5px; font-weight: 700; }

/* Buttons */
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 16px; border-radius: 11px; font-size: 13px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { border-color: var(--stbn-teal-700); background: linear-gradient(135deg, var(--stbn-teal-600), var(--stbn-teal-700)); box-shadow: 0 8px 18px rgba(8,124,120,.17); }
.btn-primary:hover, .btn-primary:focus { border-color: #056d69; background: linear-gradient(135deg, var(--stbn-teal-500), var(--stbn-teal-700)); box-shadow: 0 11px 24px rgba(8,124,120,.24); }
.btn-dark { border-color: var(--stbn-navy-900); background: var(--stbn-navy-900); }
.btn-outline-secondary { border-color: var(--stbn-line); color: #3e5365; background: white; }
.btn-outline-secondary:hover { border-color: #c5d4df; color: var(--stbn-navy-800); background: #f5f9fb; }
.btn-light-glass { border: 1px solid rgba(255,255,255,.2); color: white; background: rgba(255,255,255,.10); backdrop-filter: blur(8px); }
.btn-light-glass:hover { color: white; background: rgba(255,255,255,.17); }
.btn-gold { color: #35240a; border-color: var(--stbn-gold-500); background: linear-gradient(135deg, #ffd878, var(--stbn-gold-500)); box-shadow: 0 8px 20px rgba(242,184,75,.2); }
.btn-sm { min-height: 34px; padding: 5px 11px; border-radius: 9px; font-size: 11.5px; }

/* Tables */
.table-card { border-radius: var(--stbn-radius); }
.table-responsive { scrollbar-width: thin; scrollbar-color: #c7d4de transparent; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f8fbfc; margin-bottom: 0; color: var(--stbn-ink); font-size: 13px; }
.table > :not(caption) > * > * { padding: 14px 16px; border-bottom-color: var(--stbn-line-soft); }
.table thead th { color: #718291; background: #f8fafc; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.table tbody tr { transition: background .18s ease; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f7fbfc; }
.company-cell { display: flex; align-items: center; gap: 11px; min-width: 190px; }
.company-avatar { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 12px; color: var(--stbn-teal-700); background: var(--stbn-teal-100); font-size: 14px; font-weight: 800; }
.company-name { color: var(--stbn-ink); font-size: 12.5px; font-weight: 700; }
.company-sub { color: var(--stbn-muted); font-size: 10.5px; margin-top: 2px; }
.score-pill { min-width: 42px; display: inline-flex; justify-content: center; padding: 3px 8px; border-radius: 8px; color: var(--stbn-navy-800); background: #edf3f7; font-weight: 700; }
.empty-state { padding: 42px 20px; text-align: center; }
.empty-state-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; color: var(--stbn-teal-700); background: var(--stbn-teal-100); }
.empty-state h3 { font-size: 15px; margin: 0 0 5px; }
.empty-state p { color: var(--stbn-muted); font-size: 12.5px; margin: 0; }

/* Tabs and notices */
.nav-tabs { gap: 5px; padding: 5px; border: 1px solid var(--stbn-line); border-radius: 13px; background: #f2f6f8; }
.nav-tabs .nav-link { min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border: 0 !important; border-radius: 9px; color: var(--stbn-muted); font-size: 12.5px; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--stbn-ink); }
.nav-tabs .nav-link.active { color: var(--stbn-teal-700); background: white; box-shadow: 0 5px 14px rgba(15,43,66,.08); font-weight: 700; }
.nav-tabs .nav-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stbn-warning); }
.locked-notice { padding: 14px 16px; border: 1px solid #dae5ec; border-inline-start: 4px solid var(--stbn-teal-600); border-radius: 12px; color: #415667; background: #f4f8fa; font-size: 12.5px; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; margin-bottom: 8px; border: 1px solid var(--stbn-line); border-radius: 12px; background: white; box-shadow: 0 4px 14px rgba(15,43,66,.04); }
.doc-meta { color: var(--stbn-muted); font-size: 11px; }
.alert { border: 0; border-radius: 13px; font-size: 12.5px; box-shadow: var(--stbn-shadow-sm); }
.pagination { --bs-pagination-border-color: var(--stbn-line); --bs-pagination-color: var(--stbn-navy-700); --bs-pagination-hover-color: var(--stbn-teal-700); --bs-pagination-active-bg: var(--stbn-teal-700); --bs-pagination-active-border-color: var(--stbn-teal-700); gap: 4px; }
.page-link { border-radius: 9px !important; }

/* Auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .88fr) minmax(520px, 1.12fr); background: #fff; }
.auth-brand-panel { position: relative; min-height: 100vh; padding: clamp(32px, 5vw, 76px); display: flex; flex-direction: column; overflow: hidden; color: white; background: radial-gradient(circle at 20% 15%, rgba(17,184,173,.38), transparent 22rem), linear-gradient(145deg, var(--stbn-navy-800), var(--stbn-navy-950)); }
.auth-brand-panel::before { content: ''; position: absolute; width: 460px; height: 460px; left: -230px; bottom: -210px; border: 1px solid rgba(255,255,255,.08); transform: rotate(45deg); }
.auth-brand-panel::after { content: ''; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(30deg, rgba(255,255,255,.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.04) 87.5%), linear-gradient(150deg, rgba(255,255,255,.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.04) 87.5%); background-size: 54px 94px; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.auth-brand .brand-mark { width: 54px; height: 54px; flex-basis: 54px; }
.auth-brand strong { display: block; color: #fff; font-size: 16px; }
.auth-brand span { display: block; color: #9eb7c8; font-size: 11.5px; }
.auth-story { position: relative; z-index: 1; margin: auto 0; max-width: 560px; }
.auth-story .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #8ce4dd; font-size: 11px; font-weight: 700; margin-bottom: 12px; }
.auth-story h1 { color: white; font-size: clamp(32px, 5vw, 56px); line-height: 1.25; margin: 0; }
.auth-story p { color: #b3cad9; font-size: 14px; max-width: 510px; margin: 17px 0 0; }
.auth-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.auth-feature { padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 15px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); }
.auth-feature .stbn-icon { color: #77ddd5; margin-bottom: 7px; }
.auth-feature strong { display: block; color: white; font-size: 11.5px; }
.auth-feature span { display: block; color: #8faabd; font-size: 10.5px; margin-top: 2px; }
.auth-brand-footer { position: relative; z-index: 1; color: #6f8ca2; font-size: 10.5px; }
.auth-form-panel { min-height: 100vh; padding: clamp(26px, 5vw, 68px); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 85% 10%, rgba(17,184,173,.06), transparent 18rem), #fff; }
.auth-form-wrap { width: min(100%, 510px); }
.auth-form-header { margin-bottom: 24px; }
.auth-form-header .eyebrow { color: var(--stbn-teal-700); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.auth-form-header h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); }
.auth-form-header p { color: var(--stbn-muted); font-size: 13px; margin: 7px 0 0; }
.auth-card { border: 0; box-shadow: none; background: transparent; overflow: visible; }
.auth-card .card-header { display: none; }
.auth-card .card-body { padding: 0; }
.auth-footer { margin-top: 20px; color: var(--stbn-muted); font-size: 12.5px; text-align: center; }
.auth-footer a { font-weight: 700; }
.auth-trust-note { display: flex; gap: 9px; margin-top: 22px; padding: 13px 14px; border-radius: 13px; color: #607383; background: #f2f7f8; font-size: 11.5px; }
.auth-trust-note .stbn-icon { color: var(--stbn-teal-700); }

/* Public verification */
.verify-shell { min-height: 100vh; padding: clamp(24px, 5vw, 64px) 16px; background: radial-gradient(circle at 75% 4%, rgba(17,184,173,.13), transparent 26rem), linear-gradient(180deg, #eef6f7, #f7f9fb 50%, #eef2f5); }
.verify-wrap { width: min(100%, 780px); margin: 0 auto; }
.verify-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 26px; }
.verify-brand-copy strong { display: block; font-size: 14px; }
.verify-brand-copy span { display: block; color: var(--stbn-muted); font-size: 10.5px; }
.verify-card { position: relative; overflow: hidden; border: 1px solid rgba(207,224,232,.9); border-radius: 24px; background: white; box-shadow: var(--stbn-shadow-lg); }
.verify-card-top { position: relative; padding: 30px; color: white; background: radial-gradient(circle at 15% 20%, rgba(17,184,173,.38), transparent 20rem), linear-gradient(135deg, var(--stbn-navy-800), var(--stbn-navy-950)); }
.verify-card-top::after { content: ''; position: absolute; width: 180px; height: 180px; left: -80px; top: -95px; border: 1px solid rgba(255,255,255,.1); transform: rotate(45deg); }
.verify-seal { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; color: #fff; background: linear-gradient(145deg, var(--stbn-teal-500), var(--stbn-teal-700)); box-shadow: 0 15px 30px rgba(4,103,101,.3); }
.verify-card-top h1 { color: white; margin: 0; font-size: clamp(23px, 4vw, 34px); }
.verify-card-top p { color: #a9c4d5; margin: 6px 0 0; font-size: 12.5px; }
.verify-card-body { padding: 26px 30px 30px; }
.verify-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.verify-data-item { padding: 14px; border: 1px solid var(--stbn-line-soft); border-radius: 13px; background: #f9fbfc; }
.verify-data-item span { display: block; color: var(--stbn-muted); font-size: 10.5px; }
.verify-data-item strong { display: block; margin-top: 3px; color: var(--stbn-ink); font-size: 13px; }
.verify-timestamp { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 19px; color: var(--stbn-muted); font-size: 10.5px; }

/* Responsive */
@media (max-width: 1199.98px) {
    :root { --stbn-sidebar: 268px; }
    .user-menu { min-width: auto; }
    .user-meta { display: none; }
    .auth-shell { grid-template-columns: minmax(340px, .78fr) minmax(480px, 1.22fr); }
    .auth-features { grid-template-columns: 1fr; max-width: 300px; }
}
@media (max-width: 991.98px) {
    body.sidebar-open { overflow: hidden; }
    .stbn-sidebar { transform: translateX(105%); width: min(86vw, 310px); transition: transform .25s ease; box-shadow: -20px 0 65px rgba(7,23,37,.28); }
    [dir="ltr"] .stbn-sidebar { transform: translateX(-105%); }
    body.sidebar-open .stbn-sidebar { transform: translateX(0); }
    .stbn-overlay { position: fixed; inset: 0; z-index: 1030; display: block; opacity: 0; visibility: hidden; border: 0; background: rgba(7,23,37,.56); backdrop-filter: blur(3px); transition: opacity .25s ease, visibility .25s ease; }
    body.sidebar-open .stbn-overlay { opacity: 1; visibility: visible; }
    .stbn-main { width: 100%; margin-inline-start: 0; }
    .mobile-menu-btn { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--stbn-line); border-radius: 13px; color: var(--stbn-navy-700); background: white; }
    .stbn-topbar { min-height: 70px; }
    .topbar-eyebrow, .topbar-subtitle { display: none; }
    .auth-shell { display: block; min-height: 100vh; background: #fff; }
    .auth-brand-panel { min-height: auto; padding: 22px 20px; }
    .auth-story, .auth-brand-footer { display: none; }
    .auth-form-panel { min-height: calc(100vh - 98px); padding: 32px 20px; align-items: flex-start; }
}
@media (max-width: 767.98px) {
    .stbn-content { padding: 20px 14px 34px; }
    .stbn-topbar { padding-inline: 14px; }
    .topbar-title { font-size: 16px; }
    .topbar-actions { gap: 6px; }
    .user-menu { padding-inline-start: 6px; }
    .topbar-icon-btn { width: 38px; height: 38px; border-radius: 11px; }
    .user-avatar { width: 37px; height: 37px; flex-basis: 37px; border-radius: 11px; }
    .user-menu .logout-btn { min-width:38px; width:38px; padding:0 !important; }
    .logout-label { display:none; }
    .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
    .trust-hero { min-height: 220px; padding: 22px; align-items: flex-start; flex-direction: column; }
    .trust-hero-actions { margin: 18px 0 0; }
    .card-header { padding: 13px 16px; }
    .card-body { padding: 16px; }
    .stat { min-height: 112px; padding: 15px; }
    .stat-value { font-size: 25px; }
    .verify-card-top, .verify-card-body { padding: 23px 20px; }
    .verify-data-grid { grid-template-columns: 1fr; }
    .auth-form-panel { padding-inline: 17px; }
    .auth-form-header { margin-bottom: 20px; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
    .nav-tabs .nav-link { white-space: nowrap; }
    .table > :not(caption) > * > * { padding: 12px 13px; }
}
@media (max-width: 420px) {
    .topbar-context { max-width: 135px; }
    .topbar-title { font-size: 14px; }
    .auth-brand-copy strong { font-size: 14px; }
    .auth-brand .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:focus-visible { outline: 3px solid rgba(17,184,173,.5); outline-offset: 2px; }

/* Directory cards */
.directory-card { position: relative; overflow: hidden; }
.directory-card-band { height: 6px; background: linear-gradient(90deg, var(--stbn-teal-500), var(--stbn-navy-700) 62%, var(--stbn-gold-500)); }
.directory-logo { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border: 1px solid #c8e8e5; border-radius: 15px; color: var(--stbn-teal-700); background: linear-gradient(145deg, #effbf9, var(--stbn-teal-100)); font-size: 19px; font-weight: 800; box-shadow: inset 0 1px #fff; }
.directory-company-name { color: var(--stbn-ink); font-size: 14px; font-weight: 750; text-decoration: none; }
.directory-company-name:hover { color: var(--stbn-teal-700); }
.verified-seal { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--stbn-teal-500), var(--stbn-teal-700)); box-shadow: 0 8px 18px rgba(8,124,120,.2); }
.service-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.service-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border: 1px solid #dfe9ef; border-radius: 8px; color: #506475; background: #f7fafb; font-size: 10.5px; font-weight: 600; }
.service-chip-more { color: var(--stbn-teal-700); background: var(--stbn-teal-100); border-color: #cbece8; }
.directory-card-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; padding-top: 15px; border-top: 1px solid var(--stbn-line-soft); }
.directory-score { color: var(--stbn-ink); font-size: 22px; font-weight: 800; line-height: 1.2; }
.directory-score span { color: var(--stbn-muted); font-size: 10px; font-weight: 500; }
@media (max-width: 420px) { .directory-card-footer { grid-template-columns: 1fr auto; } .directory-card-footer .btn { grid-column: 1 / -1; } }

/* Reviews */
.review-criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.review-criterion { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--stbn-line-soft); border-radius: 10px; color: var(--stbn-muted); background: #f9fbfc; font-size: 10.5px; }
.review-criterion strong { color: var(--stbn-ink); font-size: 11px; }
.review-quote { position: relative; padding: 14px 16px; border-radius: 12px; color: #334a5d; background: #f3f7f9; font-size: 13px; line-height: 1.8; }
.review-quote::before { content: '“'; position: absolute; inset-inline-start: 8px; top: -2px; color: rgba(9,153,147,.22); font-family: Georgia, serif; font-size: 38px; line-height: 1; }
@media (max-width: 767.98px) { .review-criteria-grid { grid-template-columns: repeat(2, 1fr); } }

.auth-form-wrap.auth-form-wide { width: min(100%, 720px); }

/* Reference company registry */
.reference-toolbar { border-top: 3px solid var(--stbn-navy-700); }
.reference-grid-card { border-radius: 15px; }
.reference-grid { min-width: 1260px; }
.reference-grid th { position: sticky; top: 0; z-index: 2; background: #f5f8fa; }
.table-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; }
.table-sort:hover { color: var(--stbn-teal-700); }
.reference-primary { color: var(--stbn-ink); font-size: 11.5px; font-weight: 700; line-height: 1.55; }
.reference-secondary { color: var(--stbn-muted); font-size: 10.5px; line-height: 1.5; }
.quality-flag { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 7px; border: 1px solid #efd796; border-radius: 7px; color: #90630c; background: #fff8e7; font-size: 9.5px; font-weight: 700; }
.reference-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reference-detail-item { min-width: 0; padding: 13px 14px; border: 1px solid var(--stbn-line-soft); border-radius: 11px; background: #f8fafb; }
.reference-detail-item span { display: block; margin-bottom: 5px; color: var(--stbn-muted); font-size: 10.5px; }
.reference-detail-item strong { display: block; color: var(--stbn-ink); font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere; }
.reference-detail-wide { grid-column: 1 / -1; }
.reference-raw { border: 1px dashed #cfdae1; border-radius: 12px; background: #fbfcfd; }
.reference-raw summary { padding: 13px 15px; color: var(--stbn-teal-700); cursor: pointer; font-size: 12px; font-weight: 700; }
.reference-raw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0 14px 14px; }
.reference-raw-grid > div { padding: 10px; border-bottom: 1px solid var(--stbn-line-soft); }
.reference-raw-grid span { display: block; color: var(--stbn-muted); font-size: 9.5px; }
.reference-raw-grid strong { display: block; margin-top: 3px; color: var(--stbn-ink); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .reference-detail-grid, .reference-raw-grid { grid-template-columns: 1fr; }
    .reference-detail-wide { grid-column: auto; }
}

.import-summary { display: grid; grid-template-columns: auto minmax(190px,1.7fr) repeat(3,minmax(110px,1fr)); align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--stbn-line); border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: var(--stbn-shadow-sm); }
.import-summary > div { min-width: 0; }
.import-summary span:not(.stat-icon) { display: block; color: var(--stbn-muted); font-size: 9.5px; }
.import-summary strong { display: block; margin-top: 2px; color: var(--stbn-ink); font-size: 11.5px; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .import-summary { grid-template-columns: auto 1fr; } .import-summary > div { grid-column: 2; } }

/* Telegram platform settings */
.channel-enable-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border:1px solid var(--stbn-line); border-radius:14px; background:#f7fafb; }
.channel-enable-row strong { display:block; color:var(--stbn-ink); font-size:13px; }
.channel-enable-row p { margin:4px 0 0; color:var(--stbn-muted); font-size:11px; }
.form-switch-lg { position:relative; flex:0 0 auto; cursor:pointer; }
.form-switch-lg input { position:absolute; opacity:0; pointer-events:none; }
.form-switch-lg span { position:relative; display:block; width:54px; height:30px; border-radius:999px; background:#c9d4da; transition:.2s ease; }
.form-switch-lg span::after { content:""; position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(7,23,37,.2); transition:.2s ease; }
.form-switch-lg input:checked + span { background:linear-gradient(135deg,#229ed9,#1487bd); }
.form-switch-lg input:checked + span::after { transform:translateX(-24px); }
.telegram-preview-card { overflow:hidden; border-top:3px solid #229ed9; }
.telegram-preview-card .card-body { background:linear-gradient(180deg,#f5fbfe 0%,#fff 70%); }
.telegram-logo { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 12px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#34b7f1,#188dcc); box-shadow:0 12px 25px rgba(34,158,217,.22); }
.telegram-logo .stbn-icon, .btn-telegram .stbn-icon { fill:currentColor; stroke:none; }
.telegram-preview-card h2 { margin:0; color:var(--stbn-ink); font-size:20px; }
.telegram-preview-card p { max-width:340px; margin:7px auto 16px; color:var(--stbn-muted); font-size:12px; line-height:1.7; }
.telegram-qr-preview { width:188px; height:188px; display:grid; place-items:center; margin:0 auto 16px; padding:10px; border:1px solid #d8eaf2; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgba(19,77,106,.08); }
.telegram-qr-preview img { display:block; width:168px; height:168px; }
.btn-telegram { border-color:#229ed9 !important; color:#fff !important; background:linear-gradient(135deg,#229ed9,#188dcc) !important; box-shadow:0 8px 18px rgba(34,158,217,.2); }
.btn-telegram:hover { transform:translateY(-1px); box-shadow:0 11px 22px rgba(34,158,217,.28); }
.telegram-preview-empty { min-height:190px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; margin-top:14px; border:1px dashed #c8dce6; border-radius:16px; color:#79909c; background:rgba(255,255,255,.7); }
.telegram-preview-empty strong { color:var(--stbn-ink); font-size:13px; }
.telegram-preview-empty span { font-size:11px; }
@media (max-width: 575.98px) { .channel-enable-row { align-items:flex-start; } }

.telegram-dashboard-banner { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; border:1px solid rgba(34,158,217,.22); border-radius:18px; background:linear-gradient(135deg,#eefaff 0%,#fff 60%,#f1fbf9 100%); box-shadow:var(--stbn-shadow-sm); }
.telegram-dashboard-banner::after { content:""; position:absolute; width:190px; height:190px; inset-inline-end:-80px; bottom:-120px; border-radius:50%; background:rgba(34,158,217,.08); }
.telegram-dashboard-copy { position:relative; z-index:1; display:flex; align-items:flex-start; gap:14px; }
.telegram-dashboard-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,#34b7f1,#188dcc); box-shadow:0 10px 22px rgba(34,158,217,.22); }
.telegram-dashboard-icon .stbn-icon { fill:currentColor; stroke:none; }
.telegram-dashboard-banner h2 { margin:0; color:var(--stbn-ink); font-size:19px; }
.telegram-dashboard-banner p { max-width:620px; margin:5px 0 13px; color:var(--stbn-muted); font-size:12.5px; line-height:1.7; }
.telegram-dashboard-qr { position:relative; z-index:1; flex:0 0 138px; padding:9px; border:1px solid #d6eaf3; border-radius:15px; background:#fff; text-align:center; box-shadow:0 8px 20px rgba(19,77,106,.08); }
.telegram-dashboard-qr img { display:block; width:118px; height:118px; margin:0 auto; }
.telegram-dashboard-qr span { display:block; margin-top:5px; color:var(--stbn-muted); font-size:9px; }
@media (max-width: 767.98px) { .telegram-dashboard-banner { align-items:flex-start; padding:18px; } .telegram-dashboard-qr { display:none; } .telegram-dashboard-icon { width:42px; height:42px; flex-basis:42px; } }

/* STA brand lockup and development credit */
.sta-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    color: var(--stbn-ink);
    text-decoration: none;
}
.sta-brand-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    filter: drop-shadow(0 9px 18px rgba(7, 23, 37, .14));
}
.sta-brand-copy { display: block; min-width: 0; line-height: 1.25; }
.sta-brand-copy strong { display: block; color: var(--stbn-ink); font-size: 16px; font-weight: 750; white-space: nowrap; }
.sta-brand-en { display: block; margin-top: 4px; color: var(--stbn-muted); font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 9px; font-weight: 650; letter-spacing: .095em; direction: ltr; text-align: inherit; white-space: nowrap; }
.sta-brand-copy small { display: inline-block; margin-top: 4px; padding: 2px 7px; border: 1px solid rgba(227, 165, 67, .32); border-radius: 999px; color: var(--stbn-gold-600); background: rgba(227, 165, 67, .10); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.sta-brand-lockup.is-compact { gap: 10px; }
.sta-brand-lockup.is-compact .sta-brand-logo { width: 52px; height: 52px; flex-basis: 52px; }
.sta-brand-lockup.is-compact .sta-brand-copy strong { font-size: 13.5px; }
.sta-brand-lockup.is-compact .sta-brand-en { font-size: 7.5px; }
.sta-brand-lockup.is-light .sta-brand-copy strong { color: #fff; }
.sta-brand-lockup.is-light .sta-brand-en { color: #9eb7c8; }
.sta-brand-lockup.is-light .sta-brand-copy small { color: #ffd783; border-color: rgba(255, 215, 131, .25); background: rgba(227, 165, 67, .12); }

.stbn-brand .sta-brand-lockup { width: 100%; }
.stbn-brand .sta-brand-logo { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .20)); }
.auth-brand .sta-brand-lockup { display: inline-flex; align-items: center; gap: 15px; }
.auth-brand .sta-brand-logo { width: 76px; height: 76px; flex-basis: 76px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .24)); }
.auth-brand .sta-brand-copy strong { font-size: 18px; }
.auth-brand .sta-brand-en { color: #a9c6d6; font-size: 9.5px; }

.developer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--stbn-muted);
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 10px;
    letter-spacing: .02em;
}
.developer-credit strong { color: var(--stbn-ink); font-weight: 700; }
.developer-credit.is-light { color: #7996a9; }
.developer-credit.is-light strong { color: #dceaf1; }
.app-developer-credit { padding: 8px 24px 18px; }
.auth-brand-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.verify-brand { flex-direction: column; gap: 8px; }
.verify-brand .sta-brand-logo { width: 72px; height: 72px; flex-basis: 72px; }
.verify-official-label { padding: 4px 11px; border: 1px solid rgba(18, 159, 177, .18); border-radius: 999px; color: var(--stbn-teal-700); background: rgba(18, 159, 177, .07); font-size: 10px; font-weight: 700; }
.verify-developer-credit { margin-top: 9px; }

@media (max-width: 991.98px) {
    .auth-brand .sta-brand-logo { width: 58px; height: 58px; flex-basis: 58px; }
    .auth-brand .sta-brand-copy strong { font-size: 15px; }
    .auth-brand .sta-brand-en { font-size: 8px; }
}
@media (max-width: 767.98px) {
    .app-developer-credit { padding: 4px 14px 16px; }
    .verify-brand .sta-brand-lockup { flex-direction: column; text-align: center; }
    .verify-brand .sta-brand-copy strong, .verify-brand .sta-brand-en { white-space: normal; text-align: center; }
}
@media (max-width: 420px) {
    .auth-brand .sta-brand-logo { width: 50px; height: 50px; flex-basis: 50px; }
    .auth-brand .sta-brand-copy strong { font-size: 13px; }
    .auth-brand .sta-brand-en { font-size: 7px; }
    .stbn-brand .sta-brand-copy strong { white-space: normal; }
}