/* =================================================================
   Input & Schema
   Restrained palette · rich micro-interactions
   ================================================================= */
:root {
    --is-ink:        #0f172a;
    --is-ink-2:      #334155;
    --is-ink-3:      #64748b;
    --is-ink-4:      #94a3b8;
    --is-bg:         #f8fafc;
    --is-surface:    #ffffff;
    --is-surface-2:  #f6f8fb;
    --is-surface-3:  #eef2f7;
    --is-border:     rgb(15 23 42 / .07);
    --is-border-2:   rgb(15 23 42 / .12);
    --is-accent:     #1d4ed8;
    --is-accent-soft:rgb(29 78 216 / .08);
    --is-success:    #16a34a;
    --is-warning:    #ca8a04;
    --is-danger:     #dc2626;
    --is-mono:       'JetBrains Mono', 'Fira Code', Consolas, monospace;
    --is-radius:     12px;
    --is-radius-sm:  8px;
    --is-shadow-1:   0 1px 2px rgb(15 23 42 / .04), 0 0 0 1px var(--is-border);
    --is-shadow-2:   0 4px 16px -8px rgb(15 23 42 / .12), 0 0 0 1px var(--is-border);
    --is-shadow-3:   0 12px 36px -12px rgb(15 23 42 / .25), 0 0 0 1px rgb(15 23 42 / .08);
    --is-shadow-focus: 0 0 0 3px rgb(29 78 216 / .14);
}
.is-page { padding-bottom: 60px; background: var(--is-bg); }
code, .is-mono { font-family: var(--is-mono); }

/* ============================
   HERO
   ============================ */
.is-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--is-border);
    background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}
.is-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.is-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at 60% 30%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 60% 30%, black 0%, transparent 70%);
}
.is-hero-glow {
    position: absolute; top: -120px; right: -120px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(29,78,216,.10) 0%, transparent 65%);
    filter: blur(20px);
    animation: isGlow 14s ease-in-out infinite alternate;
}
@keyframes isGlow {
    0%   { transform: translate3d(0,0,0) scale(1); opacity: .55; }
    100% { transform: translate3d(-30px,20px,0) scale(1.06); opacity: .7; }
}
.is-hero-inner {
    position: relative; z-index: 1;
    max-width: 1480px; margin: 0 auto;
    padding: 36px 28px 28px;
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px; align-items: end;
}
.is-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--is-ink-4);
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 10px;
    animation: isFadeUp .55s ease both;
}
.is-breadcrumb-active { color: var(--is-ink-2); font-weight: 600; }
.is-title {
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--is-ink);
    font-weight: 600;
    margin: 0 0 12px;
    max-width: 820px;
    animation: isFadeUp .65s .08s ease both;
}
.is-accent {
    background: linear-gradient(90deg, var(--is-ink) 0%, #1e293b 50%, #1d4ed8 110%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-sub {
    color: var(--is-ink-3);
    font-size: 14px; line-height: 1.55;
    max-width: 700px;
    margin: 0 0 18px;
    animation: isFadeUp .7s .14s ease both;
}
.is-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
    animation: isFadeUp .7s .2s ease both;
}
.is-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--is-surface);
    box-shadow: var(--is-shadow-1);
    font-size: 12px; color: var(--is-ink-2);
    font-feature-settings: 'tnum';
}
.is-pill i { color: var(--is-ink-4); font-size: 10px; }
.is-pill strong { color: var(--is-ink); font-weight: 600; font-family: var(--is-mono); }
.is-pill-live { background: rgb(22 163 74 / .07); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .22); color: var(--is-success); }
.is-pill-live strong { color: var(--is-success); }
.is-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--is-success);
    box-shadow: 0 0 0 0 rgb(22 163 74 / .6);
    animation: isLive 1.8s ease-out infinite;
}
@keyframes isLive {
    0%   { box-shadow: 0 0 0 0 rgb(22 163 74 / .55); }
    70%  { box-shadow: 0 0 0 7px rgb(22 163 74 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); }
}

/* HERO CTA */
.is-hero-cta { display: flex; gap: 10px; animation: isFadeUp .7s .26s ease both; }
.is-btn-primary, .is-btn-secondary, .is-btn-ghost {
    position: relative; overflow: hidden;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500; font-size: 13px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.is-btn-primary {
    padding: 10px 16px; border-radius: 10px;
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(15,23,42,.50), inset 0 0 0 1px rgba(255,255,255,.08);
}
.is-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(15,23,42,.55), inset 0 0 0 1px rgba(255,255,255,.10); }
.is-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.is-btn-shine {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.16) 50%, transparent 75%);
    transform: translateX(-110%);
    animation: isShine 3.5s ease-in-out infinite;
}
@keyframes isShine { 0%, 35% { transform: translateX(-110%); } 65%, 100% { transform: translateX(110%); } }
.is-btn-primary > i, .is-btn-primary > span:not(.is-btn-shine) { position: relative; z-index: 1; }

.is-btn-secondary {
    padding: 10px 14px; border-radius: 10px;
    background: var(--is-surface);
    box-shadow: var(--is-shadow-1);
    color: var(--is-ink-2);
}
.is-btn-secondary:hover { color: var(--is-ink); box-shadow: var(--is-shadow-2); transform: translateY(-1px); }
.is-btn-secondary i { color: var(--is-ink-4); }
.is-btn-secondary:hover i { color: var(--is-ink-2); }

.is-btn-ghost {
    padding: 10px 12px; border-radius: 10px;
    background: transparent;
    color: var(--is-ink-3);
}
.is-btn-ghost:hover { color: var(--is-ink); background: rgba(15,23,42,.05); }

.is-icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--is-surface);
    box-shadow: var(--is-shadow-1);
    color: var(--is-ink-3);
    cursor: pointer;
    transition: all .15s ease;
    border: 0;
}
.is-icon-btn:hover { color: var(--is-ink); transform: translateY(-1px); box-shadow: var(--is-shadow-2); }
.is-icon-btn i { font-size: 12px; }

@keyframes isFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================
   LAYOUT
   ============================ */
.is-layout {
    max-width: 1480px; margin: 24px auto;
    padding: 0 28px;
    display: grid; grid-template-columns: 340px minmax(0,1fr);
    gap: 18px;
}

/* ============================
   CONNECTIONS PANE
   ============================ */
.is-conn-pane {
    background: var(--is-surface);
    border-radius: var(--is-radius);
    box-shadow: var(--is-shadow-1);
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 140px);
    position: sticky; top: 18px;
}
.is-pane-head {
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--is-border);
}
.is-pane-title { font-size: 13px; font-weight: 600; color: var(--is-ink); letter-spacing: -.01em; }
.is-pane-sub { font-size: 11px; color: var(--is-ink-4); margin-top: 2px; }

.is-conn-filter {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--is-border);
}
.is-conn-filter input {
    width: 100%;
    background: var(--is-surface-2);
    border: 1px solid var(--is-border);
    border-radius: 8px;
    padding: 8px 32px 8px 32px;
    font-size: 12.5px; color: var(--is-ink);
    transition: all .15s ease;
}
.is-conn-filter input:focus { outline: none; background: var(--is-surface); border-color: var(--is-accent); box-shadow: var(--is-shadow-focus); }
.is-conn-filter i {
    position: absolute; left: 22px; top: 50%;
    transform: translateY(-50%);
    color: var(--is-ink-4); font-size: 11px;
}

.is-conn-types {
    padding: 10px 12px 4px;
    display: flex; flex-wrap: wrap; gap: 6px;
    border-bottom: 1px solid var(--is-border);
}
.is-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--is-surface-2);
    box-shadow: inset 0 0 0 1px var(--is-border);
    color: var(--is-ink-3);
    font-size: 11px; font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: all .15s ease;
}
.is-chip i { font-size: 9px; opacity: .8; }
.is-chip:hover { color: var(--is-ink-2); background: var(--is-surface-3); }
.is-chip.active {
    color: var(--is-ink);
    background: var(--is-surface);
    box-shadow: inset 0 0 0 1px var(--is-border-2), 0 1px 2px rgba(15,23,42,.06);
}
.is-chip.active i { color: var(--is-accent); opacity: 1; }

.is-conn-list {
    flex: 1; overflow-y: auto;
    padding: 8px;
}
.is-conn-item {
    position: relative;
    display: grid; grid-template-columns: 36px 1fr auto;
    gap: 10px; align-items: center;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    margin-bottom: 4px;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
    text-align: left;
    width: 100%;
}
.is-conn-item:hover { background: var(--is-surface-2); }
.is-conn-item.active {
    background: var(--is-accent-soft);
    border-color: rgb(29 78 216 / .22);
}
.is-conn-item.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--is-accent);
    border-radius: 999px;
    animation: isBarIn .25s ease both;
}
@keyframes isBarIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.is-conn-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 4px 10px -4px var(--c1);
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
}
.is-conn-item[data-tone="sapphire"] { --c1: #3b82f6; --c2: #1d4ed8; }
.is-conn-item[data-tone="azure"]    { --c1: #38bdf8; --c2: #0369a1; }
.is-conn-item[data-tone="teal"]     { --c1: #2dd4bf; --c2: #0d9488; }
.is-conn-item[data-tone="violet"]   { --c1: #a78bfa; --c2: #6d28d9; }

.is-conn-meta { min-width: 0; }
.is-conn-name { font-size: 13px; font-weight: 600; color: var(--is-ink); letter-spacing: -.01em; line-height: 1.2; }
.is-conn-host { font-size: 11px; color: var(--is-ink-4); font-family: var(--is-mono); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-conn-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 500;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--is-success);
    background: rgb(22 163 74 / .08);
}
.is-conn-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.is-conn-status[data-state="idle"]   { color: var(--is-ink-4); background: rgb(15 23 42 / .05); }
.is-conn-status[data-state="error"]  { color: var(--is-danger);  background: rgb(220 38 38 / .08); }
.is-conn-status[data-state="testing"]{ color: var(--is-warning); background: rgb(202 138 4 / .10); }

/* ============================
   SCHEMA PANE
   ============================ */
.is-schema-pane {
    background: var(--is-surface);
    border-radius: var(--is-radius);
    box-shadow: var(--is-shadow-1);
    min-height: 600px;
    overflow: hidden;
    display: flex; flex-direction: column;
}

.is-schema-empty {
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 32px;
    text-align: center;
    flex: 1;
}
.is-schema-empty[data-shown="true"] {
    display: flex;
    animation: isFadeUp .5s ease both;
}
.is-empty-orbits {
    position: relative;
    width: 110px; height: 110px;
    margin-bottom: 18px;
}
.is-empty-orbit {
    position: absolute; inset: 0;
    border: 1px dashed rgb(29 78 216 / .22);
    border-radius: 50%;
    animation: isOrbit 16s linear infinite;
}
.is-empty-orbit.o1 { inset: 10px; animation-duration: 12s; }
.is-empty-orbit.o2 { inset: 0;   animation-duration: 18s; animation-direction: reverse; }
.is-empty-orbit.o3 { inset: -12px; animation-duration: 22s; border-color: rgb(15 23 42 / .10); }
@keyframes isOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.is-empty-core {
    position: absolute; inset: 28px;
    background: var(--is-surface);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--is-accent);
    font-size: 22px;
    box-shadow: inset 0 0 0 1px var(--is-border), 0 6px 18px -8px rgb(29 78 216 / .35);
    animation: isCorePulse 2.4s ease-in-out infinite;
}
@keyframes isCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.is-empty-title { font-size: 16px; font-weight: 600; color: var(--is-ink); letter-spacing: -.015em; }
.is-empty-sub { font-size: 13px; color: var(--is-ink-3); margin-top: 6px; max-width: 380px; }

.is-schema-content { display: none; flex-direction: column; flex: 1; min-height: 0; }
.is-schema-content[data-shown="true"] { display: flex; }

/* Schema head — selected connection */
.is-schema-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--is-border);
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px; align-items: center;
    background: linear-gradient(180deg, var(--is-surface-2) 0%, var(--is-surface) 100%);
}
.is-schema-head-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    color: #fff;
    font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 6px 14px -6px var(--c1);
}
.is-schema-head[data-tone="sapphire"] { --c1: #3b82f6; --c2: #1d4ed8; }
.is-schema-head[data-tone="azure"]    { --c1: #38bdf8; --c2: #0369a1; }
.is-schema-head[data-tone="teal"]     { --c1: #2dd4bf; --c2: #0d9488; }
.is-schema-head[data-tone="violet"]   { --c1: #a78bfa; --c2: #6d28d9; }
.is-schema-head-name { font-size: 18px; font-weight: 600; color: var(--is-ink); letter-spacing: -.02em; line-height: 1.15; }
.is-schema-head-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; color: var(--is-ink-3);
    font-family: var(--is-mono);
    margin-top: 4px;
}
.is-schema-head-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--is-ink-4); }
.is-schema-head-actions { display: flex; gap: 8px; }

/* Schema toolbar */
.is-schema-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--is-border);
    background: var(--is-surface);
    gap: 12px;
}
.is-tabs { display: flex; gap: 4px; background: var(--is-surface-2); border-radius: 8px; padding: 3px; box-shadow: inset 0 0 0 1px var(--is-border); }
.is-stab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--is-ink-3);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.is-stab i { font-size: 10px; }
.is-stab:hover { color: var(--is-ink-2); }
.is-stab.active { background: var(--is-surface); color: var(--is-ink); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.is-stab.active i { color: var(--is-accent); }
.is-toolbar-right { display: flex; align-items: center; gap: 8px; }
.is-search-mini { position: relative; }
.is-search-mini input {
    width: 220px;
    background: var(--is-surface-2);
    border: 1px solid var(--is-border);
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    color: var(--is-ink);
    transition: all .15s ease;
}
.is-search-mini input:focus { outline: none; background: var(--is-surface); border-color: var(--is-accent); box-shadow: var(--is-shadow-focus); }
.is-search-mini i {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--is-ink-4); font-size: 10px;
}

/* Stab panels */
.is-stab-panel { display: none; }
.is-stab-panel[data-active="true"] { display: block; }
.is-tables-grid { padding: 16px; }

/* Single table card */
.is-table {
    background: var(--is-surface);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--is-border);
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow .2s ease, transform .12s ease;
}
.is-table:hover { box-shadow: inset 0 0 0 1px var(--is-border-2), 0 2px 8px -4px rgba(15,23,42,.10); }
.is-table-head {
    display: grid; grid-template-columns: 28px 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--is-surface-2);
    border-bottom: 1px solid var(--is-border);
    transition: background-color .15s ease;
}
.is-table:not(.expanded) .is-table-head { border-bottom-color: transparent; }
.is-table-head:hover { background: var(--is-surface-3); }
.is-table-chev {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    color: var(--is-ink-4);
    font-size: 11px;
}
.is-table.expanded .is-table-chev { transform: rotate(90deg); color: var(--is-accent); }
.is-table-meta { min-width: 0; }
.is-table-name {
    font-family: var(--is-mono);
    font-size: 13px; font-weight: 600;
    color: var(--is-ink); letter-spacing: -.01em;
}
.is-table-sub {
    font-size: 11px; color: var(--is-ink-4);
    margin-top: 2px;
}
.is-table-stat {
    font-family: var(--is-mono);
    font-size: 11px; color: var(--is-ink-3);
    padding: 4px 10px;
    background: var(--is-surface);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--is-border);
}
.is-table-stat strong { color: var(--is-ink); font-weight: 600; }
.is-table-mapped {
    font-size: 10.5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--is-accent-soft);
    color: var(--is-accent);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgb(29 78 216 / .14);
}

/* Columns list */
.is-cols-list {
    display: none;
    padding: 0;
}
.is-table.expanded .is-cols-list {
    display: block;
    animation: isExpand .35s cubic-bezier(.2,.7,.3,1.05) both;
}
@keyframes isExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.is-col-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.3fr) 110px minmax(0, 1.4fr) 30px;
    gap: 10px;
    padding: 10px 14px;
    font-size: 10px; color: var(--is-ink-4);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    background: var(--is-surface);
    border-bottom: 1px solid var(--is-border);
}
.is-col {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.3fr) 110px minmax(0, 1.4fr) 30px;
    gap: 10px; align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--is-border);
    transition: background-color .12s ease;
}
.is-col:last-child { border-bottom: 0; }
.is-col:hover { background: var(--is-surface-2); }
.is-col-pk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgb(202 138 4 / .12);
    color: var(--is-warning);
    font-size: 9px;
    visibility: hidden;
}
.is-col[data-pk="true"] .is-col-pk { visibility: visible; }
.is-col[data-fk] .is-col-pk {
    visibility: visible;
    background: rgb(29 78 216 / .10); color: var(--is-accent);
}
.is-col-pk i { font-size: 9px; }
.is-col-name {
    font-family: var(--is-mono); font-size: 12.5px;
    color: var(--is-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-col-type {
    font-family: var(--is-mono); font-size: 10.5px;
    color: var(--is-ink-4);
    background: var(--is-surface-2);
    padding: 2px 8px; border-radius: 4px;
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--is-border);
}
.is-col-alias-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    border: 1px dashed transparent;
    transition: all .15s ease;
    overflow: hidden;
    min-width: 0;
}
.is-col-alias-wrap:hover {
    background: var(--is-surface);
    border-color: var(--is-border-2);
}
.is-col-alias {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--is-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-col-alias-empty {
    font-size: 11.5px;
    color: var(--is-ink-4);
    font-style: italic;
}
.is-col-alias-icon {
    color: var(--is-ink-4); font-size: 10px;
    opacity: 0;
    transition: opacity .15s ease;
}
.is-col-alias-wrap:hover .is-col-alias-icon { opacity: 1; }
.is-col-saved {
    animation: isColSaved .8s ease both;
}
@keyframes isColSaved {
    0%   { background: rgb(22 163 74 / 0); }
    35%  { background: rgb(22 163 74 / .14); }
    100% { background: rgb(22 163 74 / 0); }
}
.is-col-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    color: var(--is-ink-4);
    font-size: 10px;
    cursor: help;
    transition: all .15s ease;
}
.is-col-info:hover { color: var(--is-ink-2); background: var(--is-surface-3); }

/* Configuration view */
.is-config {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.is-config-row {
    background: var(--is-surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px var(--is-border);
}
.is-config-row .key {
    font-size: 10px; color: var(--is-ink-4);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    display: block;
}
.is-config-row .val {
    font-family: var(--is-mono); font-size: 13px; color: var(--is-ink);
    margin-top: 4px; word-break: break-all;
}

/* ============================
   GLOBAL CONSTANTS
   ============================ */
.is-constants {
    max-width: 1480px; margin: 24px auto;
    padding: 0 28px;
}
.is-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.is-section-eyebrow {
    font-size: 11px; color: var(--is-ink-4);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 2px;
}
.is-section-title {
    font-size: 20px; font-weight: 600; color: var(--is-ink);
    letter-spacing: -.02em;
}
.is-section-sub {
    font-size: 12.5px; color: var(--is-ink-3); margin-top: 4px;
}
.is-section-sub code {
    background: var(--is-surface-2);
    padding: 1px 6px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--is-border);
    font-size: 11.5px;
    color: var(--is-accent);
}
.is-const-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.is-const {
    background: var(--is-surface);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--is-shadow-1);
    transition: transform .15s ease, box-shadow .15s ease;
    animation: isFadeUp .45s ease both;
    position: relative;
}
.is-const:hover { transform: translateY(-2px); box-shadow: var(--is-shadow-2); }
.is-const-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.is-const-name {
    font-family: var(--is-mono);
    font-size: 13px; font-weight: 600;
    color: var(--is-accent);
}
.is-const-type {
    font-size: 10px;
    color: var(--is-ink-4);
    background: var(--is-surface-2);
    padding: 2px 7px; border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em;
}
.is-const-val-row {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 8px;
}
.is-const-val {
    flex: 1;
    background: var(--is-surface-2);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--is-mono);
    font-size: 16px; font-weight: 600;
    color: var(--is-ink);
    transition: all .15s ease;
}
.is-const-val:hover { border-color: var(--is-border-2); background: var(--is-surface); }
.is-const-val:focus { outline: none; background: var(--is-surface); border-color: var(--is-accent); box-shadow: var(--is-shadow-focus); }
.is-const-unit {
    font-family: var(--is-mono);
    font-size: 11px; color: var(--is-ink-4);
}
.is-const-desc {
    font-size: 11.5px; color: var(--is-ink-3); line-height: 1.45;
}
.is-const-actions {
    position: absolute; top: 10px; right: 10px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}
.is-const:hover .is-const-actions { opacity: 1; }
.is-const-actions button {
    width: 22px; height: 22px;
    background: var(--is-surface-2);
    border: 1px solid var(--is-border);
    border-radius: 5px;
    color: var(--is-ink-3);
    cursor: pointer;
    font-size: 9px;
    transition: all .15s ease;
}
.is-const-actions button:hover { color: var(--is-ink); background: var(--is-surface); }
.is-const-actions button.del:hover { color: var(--is-danger); border-color: rgb(220 38 38 / .35); }

/* ============================
   MODAL
   ============================ */
.is-modal {
    position: fixed; inset: 0;
    z-index: 60;
    background: rgba(15,23,42,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .22s ease;
}
.is-modal[data-open="true"] { display: flex; opacity: 1; }
.is-modal-panel {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    background: var(--is-surface);
    border-radius: 16px;
    box-shadow: var(--is-shadow-3);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.7,.3,1.05), opacity .2s ease;
}
.is-modal-sm .is-modal-panel { width: min(520px, 100%); }
.is-modal[data-open="true"] .is-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.is-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--is-border);
    display: flex; align-items: center; justify-content: space-between;
}
.is-modal-eyebrow { font-size: 10.5px; color: var(--is-ink-4); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.is-modal-title { font-size: 17px; font-weight: 600; color: var(--is-ink); letter-spacing: -.02em; }
.is-modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--is-surface-2);
    border: 0;
    color: var(--is-ink-3);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s ease;
}
.is-modal-close:hover { color: var(--is-ink); background: var(--is-surface-3); }
.is-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
}

/* Type picker */
.is-type-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.is-type-card {
    position: relative; overflow: hidden;
    text-align: left;
    background: var(--is-surface);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    border: 1px solid var(--is-border);
    transition: all .2s ease;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    animation: isFadeUp .4s ease both;
}
.is-type-card:hover {
    border-color: var(--is-border-2);
    transform: translateY(-2px);
    box-shadow: var(--is-shadow-2);
}
.is-type-card[data-tone="sapphire"] { --c1: #3b82f6; --c2: #1d4ed8; }
.is-type-card[data-tone="azure"]    { --c1: #38bdf8; --c2: #0369a1; }
.is-type-card[data-tone="teal"]     { --c1: #2dd4bf; --c2: #0d9488; }
.is-type-card[data-tone="violet"]   { --c1: #a78bfa; --c2: #6d28d9; }
.is-type-card:hover { border-color: var(--c1); }
.is-type-icon {
    width: 44px; height: 44px;
    grid-row: 1 / span 2;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: 0 6px 14px -6px var(--c1);
}
.is-type-label { font-size: 14px; font-weight: 600; color: var(--is-ink); letter-spacing: -.01em; }
.is-type-desc  { font-size: 11.5px; color: var(--is-ink-3); line-height: 1.4; }
.is-type-arrow {
    position: absolute; right: 14px; top: 50%;
    transform: translate(-6px, -50%);
    color: var(--is-ink-4);
    opacity: 0;
    transition: all .2s ease;
}
.is-type-card:hover .is-type-arrow { opacity: 1; transform: translate(0, -50%); color: var(--c2); }

/* Connection form */
.is-form-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.is-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--is-surface-2);
    color: var(--is-ink-3);
    border: 0;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.is-back:hover { color: var(--is-ink); background: var(--is-surface-3); }
.is-form-type {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--is-surface-2);
    box-shadow: inset 0 0 0 1px var(--is-border);
    font-size: 12px;
    color: var(--is-ink-2);
    font-weight: 500;
}
.is-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.is-field {
    display: flex; flex-direction: column; gap: 5px;
}
.is-field-wide { grid-column: 1 / -1; }
.is-field > span {
    font-size: 11px;
    color: var(--is-ink-3);
    font-weight: 500;
    letter-spacing: .01em;
}
.is-field > span small { color: var(--is-ink-4); font-weight: 400; }
.is-field input,
.is-field select,
.is-field textarea {
    background: var(--is-surface-2);
    border: 1px solid var(--is-border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    color: var(--is-ink);
    font-family: var(--is-mono);
    transition: all .15s ease;
    width: 100%;
}
.is-field textarea {
    font-family: var(--is-mono);
    font-size: 12px;
    min-height: 72px;
    resize: vertical;
}
.is-field input:focus,
.is-field select:focus,
.is-field textarea:focus {
    outline: none;
    background: var(--is-surface);
    border-color: var(--is-accent);
    box-shadow: var(--is-shadow-focus);
}

/* Test result */
.is-test-result {
    margin-top: 16px;
    background: var(--is-surface-2);
    border-radius: 10px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px var(--is-border);
    display: none;
}
.is-test-result[data-shown="true"] { display: block; animation: isFadeUp .25s ease both; }
.is-test-result header {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500;
    color: var(--is-ink-2);
    margin-bottom: 10px;
}
.is-test-result header i { color: var(--is-accent); }
.is-test-status {
    margin-left: auto;
    font-family: var(--is-mono);
    font-size: 11px;
    color: var(--is-ink-3);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--is-surface);
    box-shadow: inset 0 0 0 1px var(--is-border);
}
.is-test-status[data-state="ok"]   { color: var(--is-success); }
.is-test-status[data-state="fail"] { color: var(--is-danger);  }
.is-test-result ul {
    list-style: none; margin: 0; padding: 0;
    font-family: var(--is-mono);
    font-size: 12px;
}
.is-test-step {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 8px; align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgb(15 23 42 / .06);
    color: var(--is-ink-2);
    animation: isStepIn .25s ease both;
}
.is-test-step:last-child { border-bottom: 0; }
.is-test-step[data-state="run"]  { color: var(--is-warning); }
.is-test-step[data-state="ok"]   { color: var(--is-success); }
.is-test-step[data-state="fail"] { color: var(--is-danger);  }
.is-test-step span:last-child { font-size: 10.5px; color: var(--is-ink-4); }
@keyframes isStepIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }

.is-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid var(--is-surface-3);
    border-top-color: var(--is-warning);
    border-radius: 50%;
    animation: isSpin .7s linear infinite;
}
@keyframes isSpin { to { transform: rotate(360deg); } }

.is-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--is-border);
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}

/* Alias modal-specific */
.is-alias-source {
    background: var(--is-surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px var(--is-border);
    display: flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap;
}
.is-alias-source-label {
    font-size: 10px; color: var(--is-ink-4);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.is-alias-source-name {
    font-family: var(--is-mono);
    font-size: 14px; font-weight: 600;
    color: var(--is-ink);
}
.is-alias-source-type {
    font-family: var(--is-mono); font-size: 11px;
    color: var(--is-ink-4);
    background: var(--is-surface);
    padding: 2px 8px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--is-border);
}
.is-alias-preview {
    margin-top: 14px;
    background: #0f172a;
    border-radius: 10px;
    padding: 12px 14px;
    color: #cbd5e1;
    font-family: var(--is-mono); font-size: 12px;
}
.is-alias-preview-label {
    display: block;
    font-size: 10px; color: rgb(255 255 255 / .45);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 6px;
}
.is-alias-preview code { color: #f8fafc; font-weight: 500; }

/* ============================
   TOAST
   ============================ */
.is-toast-stack {
    position: fixed; bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 70;
    pointer-events: none;
}
.is-toast {
    pointer-events: auto;
    background: var(--is-surface);
    border-radius: 10px;
    box-shadow: var(--is-shadow-3);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    min-width: 260px; max-width: 380px;
    font-size: 13px; color: var(--is-ink);
    transform: translateY(20px); opacity: 0;
    transition: transform .3s cubic-bezier(.2,.7,.3,1.05), opacity .3s ease;
}
.is-toast.show { transform: translateY(0); opacity: 1; }
.is-toast i { color: var(--is-accent); font-size: 14px; }
.is-toast[data-tone="success"] i { color: var(--is-success); }
.is-toast[data-tone="error"]   i { color: var(--is-danger);  }
.is-toast[data-tone="info"]    i { color: var(--is-accent);  }
.is-toast .body strong { display: block; }
.is-toast .body span   { color: var(--is-ink-3); font-size: 11.5px; }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1100px) {
    .is-layout { grid-template-columns: 1fr; }
    .is-conn-pane { position: static; max-height: none; }
}
@media (max-width: 720px) {
    .is-hero-inner { grid-template-columns: 1fr; }
    .is-hero-cta { flex-direction: row; }
    .is-form-grid { grid-template-columns: 1fr; }
    .is-type-grid { grid-template-columns: 1fr; }
    .is-config { grid-template-columns: 1fr; }
    .is-col, .is-col-head {
        grid-template-columns: 24px 1fr 70px 1fr;
    }
    .is-col-info, .is-col-head .is-col-info-h { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .is-empty-orbit, .is-empty-core, .is-live-dot, .is-hero-glow, .is-btn-shine { animation: none !important; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}