/* ==========================================================================
   Turkos Capital · ACTP — Portal design system
   Vanilla CSS. Dark institutional palette derived from the brand mark:
   navy #26384C · cyan #6CF5F8 · ice white. Champagne hairlines for gravitas.
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
	--bg: #04080f;
	--bg-1: #060d17;
	--bg-2: #0a1522;
	--panel: rgba(13, 24, 39, 0.66);
	--panel-solid: #0c1726;
	--panel-hi: rgba(22, 38, 60, 0.72);
	--line: rgba(150, 190, 230, 0.09);
	--line-2: rgba(150, 190, 230, 0.16);
	--line-3: rgba(150, 190, 230, 0.28);
	--text: #e9eff7;
	--text-2: #b8c6d8;
	--muted: #8495aa;
	--dim: #56677d;
	--navy: #26384c;
	--navy-2: #34506c;
	--cyan: #6cf5f8;
	--cyan-2: #2fd0dc;
	--cyan-glow: rgba(108, 245, 248, 0.35);
	--champagne: #d8c49b;
	--ok: #44e2a6;
	--ok-bg: rgba(68, 226, 166, 0.1);
	--warn: #f6c56a;
	--warn-bg: rgba(246, 197, 106, 0.1);
	--bad: #ff6f80;
	--bad-bg: rgba(255, 111, 128, 0.1);
	--info: #8fb7ff;
	--radius: 14px;
	--radius-sm: 9px;
	--radius-lg: 22px;
	--shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 60px -20px rgba(0, 0, 0, 0.65);
	--blur: saturate(140%) blur(18px);
	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
	--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--side: 264px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html.tks-root { background: var(--bg); color-scheme: dark; }
body.tks-body {
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01", "ss03";
	overflow-x: hidden;
}
body.is-booting { overflow: hidden; }
::selection { background: rgba(108, 245, 248, 0.28); color: var(--strong); }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--strong); }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(150, 190, 230, 0.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(150, 190, 230, 0.14); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ==========================================================================
   Logo (shared by intro, login, sidebar)
   ========================================================================== */
.tks-logo { display: block; width: 100%; height: auto; overflow: visible; }
.tks-logo .m-bar { fill: #e9eff7; }
.tks-logo .m-sq1, .tks-logo .m-sq2 { fill: var(--cyan); }
.tks-logo.is-static .clipT, .tks-logo.is-static .clipC { width: 900px; }

/* ==========================================================================
   Intro sequence
   ========================================================================== */
.intro {
	position: fixed; inset: 0; z-index: 100;
	display: grid; place-items: center;
	background: radial-gradient(1200px 700px at 50% 55%, #0b1b2c 0%, #050b14 55%, #03060b 100%);
	transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.intro.is-play canvas { opacity: 1; }
.intro-stage { position: relative; width: min(760px, 78vw); }
.intro .tks-logo { filter: drop-shadow(0 0 40px rgba(108, 245, 248, 0.08)); }
.intro .m-bar { transform-origin: 160px 305px; transform: scaleY(0); }
.intro .m-sq1, .intro .m-sq2 { opacity: 0; transform: translateY(-40px); }
.intro.is-play .m-bar { animation: barRise 0.9s var(--ease) 0.25s forwards; }
.intro.is-play .m-sq1 { animation: sqDrop 0.8s var(--ease) 0.75s forwards; }
.intro.is-play .m-sq2 { animation: sqDrop 0.8s var(--ease) 0.95s forwards; }
.intro.is-play .clipT { animation: wipeT 1.05s var(--ease-io) 1.35s forwards; }
.intro.is-play .clipC { animation: wipeC 1.2s var(--ease-io) 1.95s forwards; }
.intro.is-play .sweep { animation: sweep 1.6s var(--ease-io) 2.5s forwards; }
.intro-line { position: relative; height: 1px; margin: 34px auto 0; width: 100%; overflow: hidden; }
.intro-line span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--champagne) 30%, var(--cyan) 70%, transparent); transform: scaleX(0); transform-origin: left; }
.intro.is-play .intro-line span { animation: line 1.4s var(--ease-io) 2.6s forwards; }
.intro-tag { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(8px); }
.intro-tag i { flex: 1; height: 1px; background: var(--line-2); }
.intro.is-play .intro-tag { animation: fadeUp 1s var(--ease) 3.1s forwards; }
.intro-skip { position: absolute; right: 28px; bottom: 26px; background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: fadeIn 0.6s ease 0.8s forwards; }
.intro-skip:hover { color: var(--strong); border-color: var(--line-3); }
.intro.is-leaving .intro-stage { transition: transform 1s var(--ease-io), opacity 0.6s ease 0.4s; }

@keyframes barRise { to { transform: scaleY(1); } }
@keyframes sqDrop { to { opacity: 1; transform: none; } }
@keyframes wipeT { to { width: 790px; } }
@keyframes wipeC { to { width: 760px; } }
@keyframes sweep { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(1680px); } }
@keyframes line { to { transform: scaleX(1); } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ==========================================================================
   Ambient background
   ========================================================================== */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient::before {
	content: ""; position: absolute; inset: -20%;
	background:
		radial-gradient(40% 35% at 12% 8%, rgba(47, 208, 220, 0.10), transparent 70%),
		radial-gradient(35% 30% at 88% 0%, rgba(52, 80, 108, 0.45), transparent 70%),
		radial-gradient(45% 40% at 70% 100%, rgba(47, 208, 220, 0.06), transparent 70%);
	animation: drift 26s ease-in-out infinite alternate;
}
.ambient::after {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
	opacity: 0.55;
}
@keyframes drift { to { transform: translate3d(-4%, 3%, 0) rotate(3deg); } }

/* ==========================================================================
   Login
   ========================================================================== */
.login { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 1.35fr minmax(420px, 1fr); }
.login-art { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.login-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art .art-copy { position: absolute; left: 56px; bottom: 56px; right: 56px; z-index: 2; }
.login-art .eyebrow { color: var(--champagne); }
.login-art h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.0; letter-spacing: -0.02em; margin: 16px 0 18px; max-width: 13ch; }
.login-art h1 em { font-style: italic; color: var(--cyan); }
.login-art p { color: var(--text-2); max-width: 54ch; font-size: 15px; margin: 0; }
.art-stats { display: flex; gap: 36px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.art-stats div b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; color: var(--strong); }
.art-stats div span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.art-top { position: absolute; top: 34px; left: 56px; right: 56px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); z-index: 2; }
.art-top .live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); margin-right: 10px; vertical-align: middle; animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.login-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(32px, 5vw, 80px); background: linear-gradient(180deg, rgba(10, 21, 34, 0.6), rgba(4, 8, 15, 0.9)); }
.login-card { width: 100%; max-width: 420px; margin: 0 auto; opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease) 0.2s, transform 0.9s var(--ease) 0.2s; }
.login.is-in .login-card { opacity: 1; transform: none; }
.login-logo { width: 248px; margin-bottom: 54px; }
.login-card h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.01em; margin: 0 0 6px; }
.login-card .sub { color: var(--muted); margin: 0 0 34px; }
.login-foot { position: absolute; bottom: 26px; left: clamp(32px, 5vw, 80px); right: clamp(32px, 5vw, 80px); display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; letter-spacing: 0.08em; }
.jur { display: flex; gap: 8px; margin-top: 28px; }
.jur span { font-size: 10px; letter-spacing: 0.18em; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); }

.field { position: relative; margin-bottom: 18px; }
.field label { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.input, .select, .textarea {
	width: 100%; padding: 13px 15px; border-radius: 11px;
	background: rgba(6, 13, 23, 0.7); border: 1px solid var(--line-2); color: var(--text);
	transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: rgba(108, 245, 248, 0.55); box-shadow: 0 0 0 4px rgba(108, 245, 248, 0.09); background: rgba(8, 18, 31, 0.9); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.select option { background: var(--panel-solid); }
.textarea { min-height: 92px; resize: vertical; }
.input.sm, .select.sm { padding: 9px 12px; font-size: 13px; border-radius: 9px; }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding: 6px; }

/* Buttons */
.btn {
	--b: var(--line-2);
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 10px 16px; border-radius: 10px; border: 1px solid var(--b);
	background: rgba(20, 36, 56, 0.55); color: var(--text); font-weight: 550; font-size: 13px; letter-spacing: 0.01em;
	cursor: pointer; transition: transform 0.18s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.2s;
	white-space: nowrap; user-select: none; overflow: hidden;
}
.btn:hover { background: rgba(30, 52, 80, 0.7); border-color: var(--line-3); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: linear-gradient(135deg, #7cf8fa, #2fd0dc); color: #031018; border-color: transparent; box-shadow: 0 10px 30px -10px var(--cyan-glow), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; }
.btn.primary:hover { box-shadow: 0 14px 40px -10px rgba(108, 245, 248, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.35) inset; color: #000; }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.9s var(--ease); }
.btn.primary:hover::after { left: 130%; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); border-color: rgba(255, 111, 128, 0.3); background: rgba(255, 111, 128, 0.06); }
.btn.ok { color: var(--ok); border-color: rgba(68, 226, 166, 0.3); background: rgba(68, 226, 166, 0.06); }
.btn.sm { padding: 7px 11px; font-size: 12px; border-radius: 8px; }
.btn.xs { padding: 4px 9px; font-size: 11px; border-radius: 7px; }
.btn.block { width: 100%; padding: 14px; font-size: 14px; }
.btn.is-busy { color: transparent !important; }
.btn.is-busy::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(3, 16, 24, 0.25); border-top-color: #031018; animation: spin 0.7s linear infinite; }
.btn:not(.primary).is-busy::before { border-color: rgba(255, 255, 255, 0.15); border-top-color: var(--strong); }
@keyframes spin { to { transform: rotate(360deg); } }

.alert { border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.alert.bad { color: #ffc5cc; background: var(--bad-bg); border-color: rgba(255, 111, 128, 0.3); }
.alert.ok { color: #c9f7e4; background: var(--ok-bg); border-color: rgba(68, 226, 166, 0.3); }
.alert.warn { color: #fde6b8; background: var(--warn-bg); border-color: rgba(246, 197, 106, 0.3); }

/* ==========================================================================
   App shell
   ========================================================================== */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side {
	position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
	border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 16, 27, 0.92), rgba(4, 8, 15, 0.96));
	backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 22px 16px;
}
.side .brand { padding: 6px 10px 26px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.side .brand .tks-logo { width: 176px; }
.side .brand small { display: block; margin-top: 12px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); }
.nav-group { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); padding: 16px 12px 8px; }
.nav a {
	position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
	color: var(--text-2); font-weight: 500; transition: background 0.2s, color 0.2s;
}
.nav a svg { width: 17px; height: 17px; opacity: 0.75; flex: none; }
.nav a:hover { background: rgba(255, 255, 255, 0.035); color: var(--strong); }
.nav a.is-active { background: linear-gradient(90deg, rgba(108, 245, 248, 0.11), rgba(108, 245, 248, 0.02)); color: var(--strong); }
.nav a.is-active::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav a.is-active svg { opacity: 1; color: var(--cyan); }
.nav .count { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); }
.side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.me { display: flex; gap: 11px; align-items: center; padding: 8px; border-radius: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #031018; background: linear-gradient(135deg, var(--cyan), #8fb7ff); flex: none; }
.me b { display: block; font-weight: 600; font-size: 13px; }
.me span { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; }
.me .btn { margin-left: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
	position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 34px; min-height: 64px;
	background: rgba(4, 8, 15, 0.72); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); min-width: 0; }
.crumbs b { color: var(--text); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs i { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }
.top-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); background: rgba(255, 255, 255, 0.02); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.pill.bad .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.clock { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 14px; }
.clock b { color: var(--text-2); font-weight: 500; }
.sandbox-ribbon { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warn); border: 1px solid rgba(246, 197, 106, 0.35); padding: 4px 9px; border-radius: 6px; }
.burger { display: none; }

.view { padding: 34px 34px 80px; max-width: 1560px; width: 100%; margin: 0 auto; animation: viewIn 0.6s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Headings */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.h-hero { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.02em; margin: 10px 0 8px; }
.h-hero em { font-style: italic; color: var(--cyan); }
.h-sec { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; margin: 0; }
.lede { color: var(--text-2); max-width: 70ch; margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sec-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.sec-head .sub { color: var(--muted); font-size: 12px; }

/* Cards */
.card {
	position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(16, 30, 48, 0.62), rgba(9, 18, 30, 0.58));
	backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); padding: 22px;
	isolation: isolate;
}
.card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(108, 245, 248, 0.07), transparent 45%);
}
.card:hover::before { opacity: 1; }
.card.flush { padding: 0; overflow: hidden; }
.card.hair { border-color: rgba(216, 196, 155, 0.16); }
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.span-2 { grid-column: span 2; }

/* KPI tiles */
.kpi { padding: 20px 22px 18px; }
.kpi .eyebrow { font-size: 10px; }
.kpi .v { font-family: var(--serif); font-size: 44px; line-height: 1; margin: 14px 0 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .v small { font-family: var(--font); font-size: 13px; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.kpi .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.kpi .spark { position: absolute; right: 18px; top: 18px; width: 86px; height: 32px; opacity: 0.8; }
.kpi.is-alert .v { color: var(--bad); }
.kpi.is-ok .v { color: var(--strong); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.b-ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(68, 226, 166, 0.22); }
.b-warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(246, 197, 106, 0.22); }
.b-bad { color: var(--bad); background: var(--bad-bg); border-color: rgba(255, 111, 128, 0.22); }
.b-info { color: var(--info); background: rgba(143, 183, 255, 0.1); border-color: rgba(143, 183, 255, 0.22); }
.b-dim { color: var(--muted); background: rgba(255, 255, 255, 0.03); border-color: var(--line-2); }
.b-cyan { color: var(--cyan); background: rgba(108, 245, 248, 0.08); border-color: rgba(108, 245, 248, 0.24); }
.tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); color: var(--text-2); }
.jur-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); }
.jur-BR { color: #7fe3a0; border-color: rgba(127, 227, 160, 0.3); }
.jur-HK { color: var(--champagne); border-color: rgba(216, 196, 155, 0.35); }
.jur-CN { color: #ff9aa6; border-color: rgba(255, 154, 166, 0.3); }
.jur-INT { color: var(--info); border-color: rgba(143, 183, 255, 0.3); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.t th { text-align: start; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; position: sticky; top: 0; background: rgba(9, 18, 30, 0.96); }
table.t td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr { transition: background 0.2s; }
table.t tbody tr:hover { background: rgba(108, 245, 248, 0.025); }
table.t tr.is-click { cursor: pointer; }
table.t .r { text-align: end; }
table.t td.wrap { white-space: normal; }

/* ==========================================================================
   Pipeline / stage rail
   ========================================================================== */
.pipeline { position: relative; padding: 26px 22px 18px; }
.pipe-rail { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pipe-col { position: relative; padding: 0 6px; min-height: 150px; border-left: 1px dashed var(--line); }
.pipe-col:first-child { border-left: 0; }
.pipe-col h5 { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); font-weight: 600; }
.pipe-col p { margin: 0 0 14px; font-size: 12px; color: var(--text-2); line-height: 1.3; min-height: 32px; }
.pipe-chip {
	display: block; padding: 9px 10px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--line-2);
	background: rgba(12, 24, 40, 0.85); font-size: 12px; transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; color: var(--text);
	animation: chipIn 0.7s var(--ease) both;
}
.pipe-chip:hover { transform: translateY(-2px); border-color: rgba(108, 245, 248, 0.45); box-shadow: 0 10px 30px -12px rgba(108, 245, 248, 0.35); color: var(--strong); }
.pipe-chip b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--cyan); }
.pipe-chip span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-chip .bar { height: 2px; border-radius: 2px; margin-top: 8px; background: var(--line-2); overflow: hidden; }
.pipe-chip .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); }
.pipe-chip.has-crit { border-color: rgba(255, 111, 128, 0.4); }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; position: relative; margin: 6px 0 4px; }
.stages::before { content: ""; position: absolute; left: 6.25%; right: 6.25%; top: 19px; height: 2px; background: var(--line-2); border-radius: 2px; }
.stages .fill { position: absolute; left: 6.25%; top: 19px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); box-shadow: 0 0 14px var(--cyan-glow); width: 0; transition: width 1.4s var(--ease); }
.stage-btn { position: relative; background: none; border: 0; padding: 0 4px; cursor: pointer; text-align: center; color: var(--muted); }
.stage-btn .node { position: relative; z-index: 1; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--line-3); transition: all 0.35s var(--ease); }
.stage-btn.done .node { background: rgba(108, 245, 248, 0.12); border-color: rgba(108, 245, 248, 0.55); color: var(--cyan); }
.stage-btn.current .node { background: var(--cyan); color: #031018; border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(108, 245, 248, 0.12), 0 0 30px var(--cyan-glow); }
.stage-btn.current .node::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(108, 245, 248, 0.5); animation: ring 2.2s var(--ease) infinite; }
.stage-btn.sel .node { outline: 2px solid rgba(216, 196, 155, 0.6); outline-offset: 4px; }
.stage-btn b { display: block; font-size: 12px; font-weight: 550; color: var(--text-2); line-height: 1.25; }
.stage-btn small { display: block; font-size: 10.5px; color: var(--dim); margin-top: 3px; font-family: var(--mono); }
.stage-btn.current b { color: var(--strong); }
@keyframes ring { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 26px 0 22px; overflow-x: auto; }
.tabs a { position: relative; padding: 12px 14px; color: var(--muted); font-weight: 550; font-size: 13px; white-space: nowrap; }
.tabs a:hover { color: var(--strong); }
.tabs a.is-active { color: var(--strong); }
.tabs a.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); border-radius: 2px; }
.tabs a .n { font-size: 10px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); }
.tabs a .n.bad { background: var(--bad-bg); color: var(--bad); }

/* Deal header */
.deal-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.deal-ref { display: flex; gap: 10px; align-items: center; }
.deal-ref .mono { color: var(--cyan); font-size: 13px; }
.deal-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; margin: 10px 0 12px; letter-spacing: -0.015em; }
.parties { display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-2); font-size: 13px; }
.parties span b { color: var(--dim); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-inline-end: 8px; }
.deal-figs { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: rgba(9, 18, 30, 0.6); }
.deal-figs div { padding: 14px 20px; border-left: 1px solid var(--line); min-width: 130px; }
.deal-figs div:first-child { border-left: 0; }
.deal-figs span { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.deal-figs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Gates */
.gate { display: grid; grid-template-columns: 30px 1fr auto; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); align-items: start; transition: background 0.2s; }
.gate:last-child { border-bottom: 0; }
.gate:hover { background: rgba(255, 255, 255, 0.015); }
.gate .chk { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-3); display: grid; place-items: center; margin-top: 1px; }
.gate .chk svg { width: 14px; height: 14px; }
.gate.met .chk { background: rgba(68, 226, 166, 0.14); border-color: rgba(68, 226, 166, 0.5); color: var(--ok); }
.gate.waived .chk { background: var(--warn-bg); border-color: rgba(246, 197, 106, 0.5); color: var(--warn); }
.gate .lbl { font-weight: 500; color: var(--text); }
.gate .req { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gate .who { font-size: 12px; color: var(--muted); margin-top: 6px; }
.gate .who q { color: var(--text-2); font-style: italic; quotes: "“" "”"; }
.gate .acts { display: flex; gap: 6px; }

/* Checklist / rule rows */
.rule { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.rule:last-child { border-bottom: 0; }
.rule .rid { font-family: var(--mono); font-size: 12px; color: var(--dim); padding-top: 2px; }
.rule .rl { font-weight: 550; }
.rule .rd { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.rule.fail .rd { color: #ffb4bd; }
.rule.warn .rd { color: #f8dca4; }

.ring { position: relative; width: 132px; height: 132px; }
.ring svg { transform: rotate(-90deg); }
.ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .lbl b { font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1; display: block; }
.ring .lbl span { font-size: 10px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }

/* Doc list */
.doc-row { display: grid; grid-template-columns: minmax(0, 1.7fr) 112px 118px 160px 300px; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row .dn { font-weight: 550; display: flex; gap: 10px; align-items: center; }
.doc-row .dn .ico { width: 30px; height: 36px; flex: none; border-radius: 6px; border: 1px solid var(--line-2); display: grid; place-items: center; background: rgba(255, 255, 255, 0.02); color: var(--muted); }
.doc-row .dn .ico.has { color: var(--cyan); border-color: rgba(108, 245, 248, 0.3); }
.doc-row .dm { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.doc-row.missing .dn { color: var(--muted); }
.doc-stage { padding: 12px 18px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); background: rgba(216, 196, 155, 0.035); border-bottom: 1px solid var(--line); }
.hash { font-family: var(--mono); font-size: 11px; color: var(--dim); cursor: copy; }
.hash:hover { color: var(--cyan); }

/* Instruments sequence */
.seq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.seq-step { position: relative; padding: 18px 16px; border-left: 1px solid var(--line); }
.seq-step:first-child { border-left: 0; }
.seq-step .no { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.seq-step b { display: block; margin: 8px 0 4px; font-weight: 600; font-size: 13px; }
.seq-step .mt { font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.seq-step p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.seq-step.done { background: linear-gradient(180deg, rgba(68, 226, 166, 0.07), transparent); }
.seq-step.done .no { color: var(--ok); }
.seq-step.now { background: linear-gradient(180deg, rgba(108, 245, 248, 0.09), transparent); }
.seq-step.now .no { color: var(--cyan); }
.seq-step::after { content: ""; position: absolute; right: -6px; top: 26px; width: 10px; height: 10px; border-top: 1px solid var(--line-3); border-right: 1px solid var(--line-3); transform: rotate(45deg); background: var(--bg-2); z-index: 1; }
.seq-step:last-child::after { display: none; }

/* Map & charts */
.map-wrap { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(20, 40, 64, 0.6), rgba(5, 10, 18, 0.9)); border: 1px solid var(--line); }
.map-wrap svg { display: block; width: 100%; height: auto; }
.map-legend { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.map-legend i { display: inline-block; width: 10px; height: 2px; background: var(--cyan); margin-right: 6px; vertical-align: middle; }
.chart { width: 100%; height: 220px; display: block; }
.chart text { fill: var(--dim); font-size: 10px; font-family: var(--mono); }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; animation: chipIn 0.5s var(--ease) both; }
.feed li:last-child { border-bottom: 0; }
.feed .fd { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.feed .fd.bad { background: var(--bad); box-shadow: 0 0 8px rgba(255, 111, 128, 0.5); }
.feed .fd.ok { background: var(--ok); box-shadow: 0 0 8px rgba(68, 226, 166, 0.5); }
.feed b { font-weight: 550; }
.feed .t { font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }

.exc { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.exc:last-child { border-bottom: 0; }
.exc .m { color: var(--text-2); font-size: 13px; }
.exc .meta { font-size: 11px; color: var(--dim); margin-top: 5px; font-family: var(--mono); }

/* Empty / skeleton */
.empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--text-2); margin-bottom: 6px; }
.skel { border-radius: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.loading-view { display: grid; gap: 18px; }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 10, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn 0.25s ease both; opacity: 0; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0e1c2e, #0a1422); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; animation: modalIn 0.45s var(--ease) both; }
.modal.wide { width: min(880px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-h h3 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 26px; }
.modal-b { padding: 22px 24px; }
.modal-f { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--line); }
.x { background: none; border: 1px solid var(--line-2); width: 32px; height: 32px; border-radius: 9px; color: var(--muted); cursor: pointer; font-size: 16px; }
.x:hover { color: var(--strong); border-color: var(--line-3); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.drop { border: 1px dashed var(--line-3); border-radius: 14px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 18px; }
.drop:hover, .drop.is-over { border-color: rgba(108, 245, 248, 0.6); background: rgba(108, 245, 248, 0.04); color: var(--text-2); }
.drop b { color: var(--text); }
.drop .fh { font-family: var(--mono); font-size: 11px; color: var(--cyan); margin-top: 8px; word-break: break-all; }
.hint { font-size: 12px; color: var(--muted); margin: -8px 0 16px; }
.notice-ai { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(216, 196, 155, 0.22); background: rgba(216, 196, 155, 0.05); color: #e6d9bd; font-size: 12.5px; }

/* Toasts */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; gap: 10px; }
.toast { min-width: 280px; max-width: 420px; padding: 13px 16px; border-radius: 13px; border: 1px solid var(--line-2); background: rgba(12, 24, 40, 0.92); backdrop-filter: var(--blur); box-shadow: 0 20px 50px -20px #000; font-size: 13px; animation: toastIn 0.45s var(--ease) both; display: flex; gap: 10px; align-items: flex-start; }
.toast.ok { border-color: rgba(68, 226, 166, 0.35); }
.toast.bad { border-color: rgba(255, 111, 128, 0.4); }
.toast i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--cyan); }
.toast.ok i { background: var(--ok); }
.toast.bad i { background: var(--bad); }
.toast.out { animation: toastOut 0.35s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* Misc layout */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 18px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 18px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.legal { font-size: 11.5px; color: var(--dim); line-height: 1.6; }
.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-2); }
.dots i.ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 6px rgba(68, 226, 166, 0.5); }
.dots i.bad { background: var(--bad); border-color: var(--bad); }
.dots i.warn { background: var(--warn); border-color: var(--warn); }
.spec-bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; min-width: 120px; }
.spec-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); }
.spec-bar.bad i { background: var(--bad); }
.duty-out { font-family: var(--serif); font-size: 30px; }
.chain { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.chain i { width: 14px; height: 14px; border-radius: 3px; background: rgba(108, 245, 248, 0.2); border: 1px solid rgba(108, 245, 248, 0.4); animation: blockIn 0.5s var(--ease) both; }
@keyframes blockIn { from { opacity: 0; transform: scale(0.4); } }

.does { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.does ul { margin: 0; padding: 0; list-style: none; }
.does li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 13px; display: flex; gap: 10px; }
.does li::before { content: "—"; color: var(--dim); }
.does .yes li::before { content: "✓"; color: var(--ok); }
.does .no li::before { content: "✕"; color: var(--bad); }

/* Responsive */
@media (max-width: 1280px) {
	.g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.g-main { grid-template-columns: 1fr; }
	.deal-head { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
	.login { grid-template-columns: 1fr; }
	.login-art { display: none; }
	.shell { grid-template-columns: 1fr; }
	.side { position: fixed; left: 0; top: 0; z-index: 40; width: var(--side); transform: translateX(-100%); transition: transform 0.4s var(--ease); }
	.shell.nav-open .side { transform: none; box-shadow: 40px 0 80px rgba(0, 0, 0, 0.6); }
	.burger { display: inline-flex; }
	.g-4, .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pipe-rail, .stages, .seq { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
	.stages::before, .stages .fill { display: none; }
	.doc-row { grid-template-columns: 1fr auto; }
	.doc-row > :nth-child(2), .doc-row > :nth-child(3), .doc-row > :nth-child(4) { display: none; }
	.clock { display: none; }
}
@media (max-width: 640px) {
	.view { padding: 22px 16px 60px; }
	.top { padding: 12px 16px; }
	.g-2, .g-4, .g-3, .g-5 { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.deal-figs { flex-wrap: wrap; }
	.kv { grid-template-columns: 1fr; }
	.does { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Layout guards */
.stack { grid-template-columns: minmax(0, 1fr); }
.notice-ai svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--champagne); }
.empty svg, .pill svg { width: 16px; height: 16px; }

/* MFA */
.mfa-enrol { display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; margin-bottom: 22px; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(6, 13, 23, 0.6); }
.qr-wrap { width: 148px; height: 148px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(108, 245, 248, 0.25), 0 10px 40px -10px var(--cyan-glow); }
.qr-wrap .qr { width: 100%; height: 100%; display: block; }
.mfa-key { font-size: 13px; letter-spacing: 0.08em; color: var(--cyan); word-break: break-all; margin: 6px 0; }
.otp { font-size: 22px; letter-spacing: 0.4em; text-align: center; }
.recovery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recovery span { padding: 10px; border: 1px solid var(--line-2); border-radius: 9px; text-align: center; background: rgba(6, 13, 23, 0.7); color: var(--text); }

/* ==========================================================================
   Light theme — same system, same geometry, inverted surfaces.
   Contrast targets WCAG 2.2 AA (≥ 4.5:1 body text, ≥ 3:1 UI).
   ========================================================================== */
:root { --strong: #ffffff; --logo-bar: #e9eff7; --logo-sq: #6cf5f8;
	--map-dot: rgba(150,200,235,.30); --map-dot-rgb: 150,200,235; --map-head: #e8feff; --map-route: #6cf5f8; --map-route-soft: rgba(108,245,248,.12); --map-arc: rgba(216,196,155,.5); --map-label: #e9eff7; --map-sub: rgba(150,170,195,.9); --map-node: #dffeff; --map-node-hk: #f1e4c6; --map-glow: 108,245,248; --map-glow-hk: 216,196,155; }
.wm-on-light { display: none; }
.tks-logo .m-bar { fill: var(--logo-bar); }
.tks-logo .m-sq1, .tks-logo .m-sq2 { fill: var(--logo-sq); }

html[data-theme="light"] {
	color-scheme: light;
	--bg: #f3f5f8; --bg-1: #eef1f5; --bg-2: #ffffff;
	--panel: rgba(255, 255, 255, 0.82); --panel-solid: #ffffff; --panel-hi: #ffffff;
	--line: rgba(16, 36, 62, 0.09); --line-2: rgba(16, 36, 62, 0.15); --line-3: rgba(16, 36, 62, 0.26);
	--text: #0b1726; --text-2: #2b3d52; --muted: #4f6077; --dim: #5d6e85;
	--navy: #26384c; --cyan: #08727c; --cyan-2: #0a9aa6; --cyan-glow: rgba(10, 154, 166, 0.22);
	--champagne: #77581b; --ok: #0a7350; --ok-bg: rgba(10, 115, 80, 0.08); --warn: #865600; --warn-bg: rgba(181, 120, 0, 0.1);
	--bad: #b1203a; --bad-bg: rgba(177, 32, 58, 0.07); --info: #2a52b0;
	--strong: #04101c; --logo-bar: #26384c; --logo-sq: #4fdde8;
	--shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 44px -24px rgba(16, 36, 62, 0.28);
	--map-dot: rgba(38, 56, 76, 0.22); --map-dot-rgb: 38,56,76; --map-head: #0a9aa6; --map-route: #0a9aa6; --map-route-soft: rgba(10, 154, 166, 0.12); --map-arc: rgba(119, 88, 27, 0.55); --map-label: #0b1726; --map-sub: rgba(60, 80, 105, 0.95); --map-node: #08727c; --map-node-hk: #77581b; --map-glow: 10,154,166; --map-glow-hk: 160,120,40;
}
html[data-theme="light"] .wm-on-dark { display: none; }
html[data-theme="light"] .wm-on-light { display: inline; }
html[data-theme="light"].tks-root, html[data-theme="light"] body.tks-body { background: var(--bg); }
html[data-theme="light"] ::selection { background: rgba(10, 154, 166, 0.2); color: var(--strong); }
html[data-theme="light"] .intro { background: radial-gradient(1200px 700px at 50% 55%, #ffffff 0%, #eef2f6 60%, #e5eaf0 100%); }
html[data-theme="light"] .intro .tks-logo { filter: none; }
html[data-theme="light"] .ambient::before { background: radial-gradient(40% 35% at 12% 8%, rgba(10, 154, 166, 0.08), transparent 70%), radial-gradient(35% 30% at 88% 0%, rgba(38, 56, 76, 0.08), transparent 70%), radial-gradient(45% 40% at 70% 100%, rgba(10, 154, 166, 0.05), transparent 70%); }
html[data-theme="light"] .ambient::after { opacity: 0.8; }
html[data-theme="light"] .login-panel { background: linear-gradient(180deg, #ffffff, #f4f6f9); }
html[data-theme="light"] .input, html[data-theme="light"] .select, html[data-theme="light"] .textarea { background: #ffffff; }
html[data-theme="light"] .input:focus, html[data-theme="light"] .select:focus, html[data-theme="light"] .textarea:focus { border-color: rgba(10, 154, 166, 0.7); box-shadow: 0 0 0 4px rgba(10, 154, 166, 0.12); background: #fff; }
html[data-theme="light"] .btn { background: #ffffff; box-shadow: 0 1px 2px rgba(16, 36, 62, 0.06); }
html[data-theme="light"] .btn:hover { background: #f1f5f9; }
html[data-theme="light"] .btn.primary { background: linear-gradient(135deg, #63f2f5, #1bc3cf); color: #021015; box-shadow: 0 10px 26px -12px rgba(10, 154, 166, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; }
html[data-theme="light"] .btn.ghost { background: transparent; box-shadow: none; }
html[data-theme="light"] .btn.danger { background: rgba(177, 32, 58, 0.05); }
html[data-theme="light"] .btn.ok { background: rgba(10, 115, 80, 0.06); }
html[data-theme="light"] .side { background: linear-gradient(180deg, #ffffff, #f7f9fb); }
html[data-theme="light"] .top { background: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .card { background: linear-gradient(180deg, #ffffff, #fbfcfd); }
html[data-theme="light"] .card::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 154, 166, 0.06), transparent 45%); }
html[data-theme="light"] .card.hair { border-color: rgba(119, 88, 27, 0.2); }
html[data-theme="light"] table.t th { background: rgba(255, 255, 255, 0.97); }
html[data-theme="light"] table.t tbody tr:hover, html[data-theme="light"] .gate:hover { background: rgba(10, 154, 166, 0.035); }
html[data-theme="light"] .pipe-chip { background: #ffffff; }
html[data-theme="light"] .pipe-chip:hover { box-shadow: 0 10px 26px -14px rgba(10, 154, 166, 0.5); }
html[data-theme="light"] .deal-figs { background: #ffffff; }
html[data-theme="light"] .stage-btn .node { background: #ffffff; }
html[data-theme="light"] .stage-btn.current .node { color: #021015; background: #4fdde8; border-color: #0a9aa6; }
html[data-theme="light"] .stage-btn.done .node { background: rgba(10, 154, 166, 0.1); }
html[data-theme="light"] .seq-step::after { background: #fff; }
html[data-theme="light"] .map-wrap { background: radial-gradient(ellipse at 50% 40%, #f4f8fb, #e4ebf2); }
html[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 40px -20px rgba(16, 36, 62, 0.45); }
html[data-theme="light"] .modal-back { background: rgba(16, 28, 44, 0.32); }
html[data-theme="light"] .modal { background: linear-gradient(180deg, #ffffff, #f8fafc); box-shadow: 0 40px 100px -30px rgba(16, 36, 62, 0.45); }
html[data-theme="light"] .mfa-enrol, html[data-theme="light"] .recovery span { background: #f7f9fb; }
html[data-theme="light"] .notice-ai { color: #4d3a12; background: rgba(119, 88, 27, 0.05); border-color: rgba(119, 88, 27, 0.22); }
html[data-theme="light"] .alert.bad { color: #8d1328; }
html[data-theme="light"] .alert.ok { color: #075a3e; }
html[data-theme="light"] .alert.warn { color: #6a4300; }
html[data-theme="light"] .skel { background: linear-gradient(90deg, rgba(16, 36, 62, 0.04), rgba(16, 36, 62, 0.09), rgba(16, 36, 62, 0.04)); background-size: 200% 100%; }
html[data-theme="light"] .tag, html[data-theme="light"] .pill, html[data-theme="light"] .doc-row .dn .ico, html[data-theme="light"] .dots i, html[data-theme="light"] .spec-bar { background: rgba(16, 36, 62, 0.04); }
html[data-theme="light"] .nav a:hover { background: rgba(16, 36, 62, 0.045); }
html[data-theme="light"] .nav a.is-active { background: linear-gradient(90deg, rgba(10, 154, 166, 0.1), rgba(10, 154, 166, 0.02)); }
html[data-theme="light"] .nav a.is-active::before { box-shadow: none; }
html[data-theme="light"] .chain i { background: rgba(10, 154, 166, 0.16); border-color: rgba(10, 154, 166, 0.45); }
html[data-theme="light"] .qr-wrap { box-shadow: 0 0 0 1px rgba(16, 36, 62, 0.15); }
html[data-theme="light"] .doc-stage { background: rgba(119, 88, 27, 0.04); }
html[data-theme="light"] .avatar { color: #fff; background: linear-gradient(135deg, #0a9aa6, #2a52b0); }

/* ==========================================================================
   Preference controls (theme + language)
   ========================================================================== */
.prefs { display: inline-flex; gap: 8px; align-items: center; }
.pref-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 600 12px var(--font); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.pref-btn:hover, .pref-btn[aria-expanded="true"] { border-color: var(--line-3); color: var(--strong); background: rgba(127, 127, 127, 0.06); }
.pref-btn svg { width: 16px; height: 16px; }
.pref-btn .code { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.lang-wrap { position: relative; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70; min-width: 230px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel-solid); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5); display: none; }
.lang-menu.open { display: block; animation: modalIn .25s var(--ease) both; }
.lang-menu button { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 14px var(--font); cursor: pointer; text-align: start; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(127, 127, 127, 0.08); outline: none; }
.lang-menu button .c { font: 600 10.5px var(--mono); color: var(--dim); }
.lang-menu button .en { font-size: 11.5px; color: var(--muted); }
.lang-menu button[aria-checked="true"] { color: var(--cyan); }
.lang-menu button[aria-checked="true"] .c { color: var(--cyan); }
.lang-note { padding: 8px 10px 4px; font-size: 11px; color: var(--dim); border-top: 1px solid var(--line); margin-top: 4px; line-height: 1.4; }
.login-prefs { position: absolute; top: 22px; inset-inline-end: clamp(32px, 5vw, 80px); z-index: 5; }
.side-note { font-size: 10.5px; color: var(--dim); padding: 10px 8px 0; line-height: 1.4; }

/* ==========================================================================
   Internationalisation: scripts without Latin display faces, and RTL.
   ========================================================================== */
html[lang|="zh"] { --font: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; --serif: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html[lang|="ar"] { --font: "Inter", "Noto Sans Arabic", "SF Arabic", "Segoe UI", "Geeza Pro", Tahoma, sans-serif; --serif: "Noto Naskh Arabic", "Noto Sans Arabic", "SF Arabic", "Segoe UI", "Geeza Pro", Tahoma, serif; }
html[lang|="zh"] .h-hero, html[lang|="zh"] .h-sec, html[lang|="zh"] .deal-head h1, html[lang|="zh"] .login-card h2, html[lang|="zh"] .login-art h1, html[lang|="zh"] .modal-h h3 { font-weight: 600; letter-spacing: 0; }
html[lang|="zh"] .h-hero em, html[lang|="zh"] .login-art h1 em { font-style: normal; }
html[lang|="ar"] .h-hero, html[lang|="ar"] .deal-head h1, html[lang|="ar"] .login-card h2, html[lang|="ar"] .login-art h1, html[lang|="ar"] .modal-h h3, html[lang|="ar"] .h-sec { font-weight: 600; letter-spacing: 0; line-height: 1.35; }
html[lang|="ar"] .h-hero em, html[lang|="ar"] .login-art h1 em { font-style: normal; }
/* Arabic letters must stay joined: never track or uppercase Arabic text. */
html[lang|="ar"] .eyebrow, html[lang|="ar"] .field label, html[lang|="ar"] table.t th, html[lang|="ar"] .nav-group, html[lang|="ar"] .deal-figs span, html[lang|="ar"] .parties span b, html[lang|="ar"] .art-stats span, html[lang|="ar"] .side .brand small, html[lang|="ar"] .doc-stage, html[lang|="ar"] .pipe-col h5, html[lang|="ar"] .ring .lbl span, html[lang|="ar"] .login-foot, html[lang|="ar"] .sandbox-ribbon, html[lang|="ar"] .jur span { letter-spacing: 0 !important; text-transform: none !important; }
html[lang|="ar"] body.tks-body { font-size: 15px; }
html[lang|="zh"] .eyebrow, html[lang|="zh"] table.t th, html[lang|="zh"] .field label { letter-spacing: 0.08em; }

[dir="rtl"] .side { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .nav a.is-active::before { left: auto; right: -16px; }
[dir="rtl"] .nav .count, [dir="rtl"] .me .btn, [dir="rtl"] .top-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .login-art { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .stages::before, [dir="rtl"] .stages .fill { left: auto; right: 6.25%; }
[dir="rtl"] .pipe-col, [dir="rtl"] .seq-step, [dir="rtl"] .deal-figs div { border-left: 0; border-right: 1px dashed var(--line); }
[dir="rtl"] .seq-step, [dir="rtl"] .deal-figs div { border-right-style: solid; }
[dir="rtl"] .pipe-col:first-child, [dir="rtl"] .seq-step:first-child, [dir="rtl"] .deal-figs div:first-child { border-right: 0; }
[dir="rtl"] .seq-step::after { right: auto; left: -6px; transform: rotate(-135deg); }
[dir="rtl"] .toasts { right: auto; left: 22px; }
[dir="rtl"] .pw-toggle { right: auto; left: 10px; }
[dir="rtl"] .select { background-position: 18px 55%, 13px 55%; padding-right: 15px; padding-left: 36px; }
[dir="rtl"] .gate, [dir="rtl"] .rule, [dir="rtl"] .exc { text-align: right; }
[dir="rtl"] .mono, [dir="rtl"] .hash, [dir="rtl"] .tag, [dir="rtl"] .num, [dir="rtl"] .clock, [dir="rtl"] .jur-tag { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .map-wrap, [dir="rtl"] #chart, [dir="rtl"] .chain, [dir="rtl"] .ring { direction: ltr; }
[dir="rtl"] .btn svg[data-flip], [dir="rtl"] .icon-arrow { transform: scaleX(-1); }
[dir="rtl"] .kv { text-align: right; }
[dir="rtl"] .feed li, [dir="rtl"] .doc-row { text-align: right; }
@media (max-width: 1020px) { [dir="rtl"] .side { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .shell.nav-open .side { transform: none; } }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, box-shadow .4s ease !important; }

/* system evidence detail kept in English inside translated UI */
.en-detail{opacity:.78;unicode-bidi:isolate}
html[lang|="zh"] .en-detail,html[lang|="ar"] .en-detail{font-family:Inter,system-ui,sans-serif}
/* RTL: Latin proper names, codes and English evidence keep their own direction */
html[dir=rtl] [data-notr], html[dir=rtl] bdi, html[dir=rtl] .mono, html[dir=rtl] .user-meta, html[dir=rtl] .rd { unicode-bidi: plaintext; }
html[dir=rtl] .modal-h h3 { unicode-bidi: plaintext; text-align: right; }
html[lang|="ar"] body *:not(.mono):not(.hash) { letter-spacing: 0 !important; }

/* ---------- Trade Finance Framework · principal structure ---------- */
.b-champ { color: var(--champagne); background: rgba(216, 196, 155, 0.1); border-color: rgba(216, 196, 155, 0.3); }
.verdict { position: relative; overflow: hidden; }
.verdict::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vc, var(--cyan)), transparent); opacity: .9; }
.verdict.v-ok { --vc: var(--ok); } .verdict.v-bad { --vc: var(--bad); } .verdict.v-warn { --vc: var(--warn); }
.verdict h3 { color: var(--vc); }
.vring { width: 78px; height: 78px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 2px solid var(--vc); box-shadow: 0 0 28px -6px var(--vc); flex: none; }
.vring b { font-size: 26px; font-weight: 650; line-height: 1; color: var(--strong); font-variant-numeric: tabular-nums; }
.vring span { font-size: 11px; color: var(--muted); }
ul.cond { list-style: none; margin: 6px 0 0; padding: 0; }
ul.cond li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
ul.cond.compact li { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 8px 0; font-size: 12.5px; }
ul.cond li:first-child { border-top: 0; }
ul.cond .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
ul.cond li.absent .dot, ul.cond li.held .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
ul.cond li.present .dot, ul.cond li.breached .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: pulse 1.8s ease-in-out infinite; }
ul.cond li.present .l, ul.cond li.breached .l { color: var(--strong); }
.crail { display: flex; gap: 3px; min-width: 250px; }
.crail span { flex: 1; font-size: 10px; letter-spacing: .02em; color: var(--dim); white-space: nowrap; }
.crail i { display: block; height: 4px; border-radius: 3px; background: var(--line-2); margin-bottom: 5px; transition: background .6s var(--ease); }
.crail .done i { background: var(--ok); } .crail .done { color: var(--text-2); }
.crail .cur i { background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); box-shadow: 0 0 10px var(--cyan-glow); } .crail .cur { color: var(--cyan); font-weight: 600; }
.tscroll { overflow-x: auto; }
table.cyc td { vertical-align: top; }
table.t td.num, table.t th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t td.num .muted { font-size: 11px; }
.cps { margin-top: 16px; padding: 16px 18px; border: 1px dashed var(--line-3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.015); }
.cps ul { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; }
.cps li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.cps li svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.cps li.ok { color: var(--text-2); } .cps li.ok svg { stroke: var(--ok); }
.cps li.bad { color: var(--strong); } .cps li.bad svg { stroke: var(--bad); }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { ul.cond li.present .dot, ul.cond li.breached .dot { animation: none; } }
html[dir=rtl] .crail { direction: rtl; }
table.cyc td.mono { white-space: nowrap; }
.sec-head > .btn, .sec-head > a.btn { flex: none; white-space: nowrap; }
dl.wsplit { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 12px; white-space: nowrap; }
dl.wsplit dt { color: var(--muted); }
dl.wsplit dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; color: var(--text); }
table.cyc td:last-child { min-width: 150px; }
/* v1.5 corridor packs */
.corr-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.corr-line .badge { font-family: var(--mono, monospace); letter-spacing: 0.04em; }