:root {
	--r-btn: 6px; --r-in: 6px; --r-card: 8px; --r-dlg: 10px; --r-pill: 6px;
	--bg: #121212; --panel: #1a1a1b; --panel-2: #222224; --menu: #222224; --input: #161617; --seg: #0f0f10; --code: #161617;
	--text: #f1efe9; --text-2: #c9c6be; --muted: #8f8c85;
	--line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12); --line-3: rgba(255, 255, 255, .2);
	--hover: rgba(255, 255, 255, .045); --hover-strong: rgba(143, 108, 245, .16); --ph: rgba(255, 255, 255, .06); --thumb: rgba(255, 255, 255, .16);
	--primary: #8f6cf5; --primary-hover: #a084f7; --on-primary: #ffffff;
	--accent: #8f6cf5; --accent-soft: rgba(143, 108, 245, .15); --accent-text: #cdbcff; --ring: #4ac578;
	--purple-soft: rgba(74, 197, 120, .13); --purple-text: #95f0b9; --purple-line: rgba(74, 197, 120, .3);
	--ok: #95f0b9; --ok-soft: rgba(74, 197, 120, .13); --warn: #e9c46a; --warn-soft: rgba(233, 196, 106, .12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .12);
	--k-brand: #a993f7; --k-process: #4ac578; --k-knowledge: #60a5fa; --k-agents: #e9c46a;
	--tip-bg: #08090c; --tip-text: #f1efe9; --tip-line: rgba(255, 255, 255, .1); --backdrop: rgba(0, 0, 0, .55); --signin-bg: #121212;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 28px 70px rgba(0, 0, 0, .6);
}

.shell { display: flex; flex-direction: column; height: 100%; }
.shell > .main { flex: 1; height: auto; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; border: 1.5px solid var(--text); color: var(--accent); background: var(--panel); }
.logo-mark .ico { width: 20px; height: 20px; stroke-width: 2; }
.logo-name { display: grid; font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: -.01em; }
.logo-name small { font: 500 10.5px var(--mono); color: var(--muted); letter-spacing: .04em; }
.logo-lg .logo-mark { width: 42px; height: 42px; }

.top { flex: none; border-bottom: 1px solid var(--line-2); background: var(--panel); }
.top-in { display: flex; align-items: center; gap: 20px; height: 64px; max-width: 1340px; margin: 0 auto; padding: 0 40px; }
.switcher { position: relative; flex: none; }
.switcher-btn { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 8px; border-radius: var(--r-btn); border: 1px solid var(--line-2); min-width: 220px; transition: border-color .18s, background-color .18s; }
.switcher-btn:hover { border-color: var(--line-3); }
.switcher-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-text); }
.switcher-ico .ico { width: 16px; height: 16px; }
.switcher-txt { display: grid; flex: 1; text-align: left; line-height: 1.2; }
.switcher-txt small { font: 500 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.switcher-menu { width: 300px; }
.dd-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin-bottom: 6px; border-radius: var(--r-in); border: 1px solid var(--line-2); color: var(--muted); }
.dd-search input { flex: 1; min-width: 0; border: 0; background: none; height: 100%; color: var(--text); }
.dd-list { max-height: 340px; overflow-y: auto; display: grid; gap: 2px; }
.dd-group + .dd-group { border-top: 1px solid var(--line); padding-top: 2px; margin-top: 2px; }
.dd-sub { padding-left: 34px; color: var(--text-2); }
.dd-none { padding: 12px; color: var(--muted); }

.top-nav { position: relative; display: flex; align-self: stretch; gap: 2px; }
.top-nav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted); font-weight: 600; transition: color .2s; }
.top-nav a:hover, .top-nav a.is-on { color: var(--text); }
.top-nav a.is-on .ico { color: var(--accent); }
.top-nav .count { margin-left: 2px; }
.top-nav .nav-marker { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--accent); transition: transform .28s var(--ease), width .28s var(--ease), opacity .2s; }
.top-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.profile { position: relative; margin-left: 6px; }
.profile-chip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border-radius: 20px; border: 1px solid var(--line-2); font-weight: 600; transition: border-color .15s; }
.profile-chip:hover { border-color: var(--line-3); }
.profile .dd-menu { left: auto; right: 0; min-width: 230px; top: calc(100% + 6px); bottom: auto; transform-origin: top right; }
.menu-btn { display: none; margin-left: auto; }

.sheet { position: fixed; inset: 0; z-index: 70; background: var(--backdrop); opacity: 0; pointer-events: none; transition: opacity .22s; }
.sheet.is-open { opacity: 1; pointer-events: auto; }
.sheet-in { position: absolute; top: 0; left: 0; right: 0; max-height: 90dvh; overflow-y: auto; padding: 12px 16px 20px; background: var(--panel); border-radius: 0 0 14px 14px; transform: translateY(-20px); transition: transform .26s var(--ease); }
.sheet.is-open .sheet-in { transform: none; }
.sheet .side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.sheet-nav { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sheet-nav a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border-radius: var(--r-btn); font-weight: 600; }
.sheet-nav a.is-on { background: var(--hover-strong); }
.sheet .side-label { padding: 14px 4px 6px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sheet .tree-row { display: flex; align-items: center; border-radius: var(--r-btn); }
.sheet .tree-row.is-on, .sheet .tree-kid.is-on { background: var(--hover-strong); }
.sheet .tree-fold { display: none; }
.sheet .tree-link { display: flex; align-items: center; gap: 9px; flex: 1; height: 40px; padding: 0 10px; font-weight: 600; }
.sheet .tree-link .ico { width: 17px; height: 17px; color: var(--muted); }
.sheet .tree-kid { font-weight: 500; padding-left: 34px; }
.sheet .ours { display: none; }
.sheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

.page-head h1 { font-size: 34px; letter-spacing: -.025em; }
.sec-head h2 { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sec-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.table-head { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }


.swatches { grid-template-columns: 1fr; gap: 0; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--panel); }
.swatch { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; border: 0; border-radius: 0; background: none; }
.swatch + .swatch { border-top: 1px solid var(--line); }
.swatch-chip { height: 64px; border: 0; border-right: 1px solid var(--line); }
.swatch:first-child .swatch-chip { border-top-left-radius: calc(var(--r-card) - 1px); }
.swatch:last-child .swatch-chip { border-bottom-left-radius: calc(var(--r-card) - 1px); }
.swatch-meta { padding: 10px 16px; }
.swatch-meta b { flex-basis: auto; min-width: 110px; }
.role-badge { margin-left: 0; }
.swatch-use { padding: 10px 16px; font-size: 13px; }
.pairs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 1080px) {
	.top-nav a span { display: none; }
	.top-nav a { padding: 0 10px; }
}
@media (max-width: 900px) {
	.top-in { padding: 0 12px; gap: 10px; }
	.top-nav, .top-right { display: none; }
	.menu-btn { display: inline-grid; }
	.logo-name { display: none; }
	.switcher { flex: 1; min-width: 0; }
	.switcher-btn { min-width: 0; width: 100%; }
	.switcher-menu { width: min(300px, calc(100vw - 24px)); }
}
@media (max-width: 640px) {
	.page-head h1 { font-size: 26px; }
	.swatch { grid-template-columns: 64px minmax(0, 1fr); }
	.swatch-use { display: none; }
	.swatches { grid-template-columns: 1fr; gap: 0; }
	.swatch-chip { height: 72px; }
}

.badge-btn { position: relative; }
.badge-btn b { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); }
.subtabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.seg-sub button .ico { width: 16px; height: 16px; }
.brand-panel { overflow: hidden; }
@media (max-width: 640px) {
	.subtabs { flex-wrap: wrap; }
	.seg-sub { max-width: 100%; overflow-x: auto; }
	.seg-sub button span { display: none; }
}