:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    --brand-cyan: #00c8ff;
    --brand-cyan-text: #007aa3;
    --brand-navy: #102f43;
    --brand-navy-deep: #0a2332;
    --text: #1d2b34;
    --text-muted: #52636e;
    --page: #e9edef;
    --surface: #ffffff;
    --surface-soft: #f3f7f9;
    --surface-accent: #e9f8fd;
    --border: #d6dee3;
    --border-strong: #b9c7cf;
    --success: #245b43;
    --warning: #7c5c05;
    --danger: #8d281f;
    --sidebar-width: 248px;
    --header-height: 56px;
    --shadow-subtle: 0 2px 7px rgba(16, 47, 67, 0.07);
    --shadow-overlay: 0 12px 32px rgba(10, 35, 50, 0.2);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-size: 14px; line-height: 1.4; }
button, input { font: inherit; }
a { color: var(--brand-cyan-text); }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 6px; left: 6px; z-index: 1000; transform: translateY(-150%); background: var(--brand-navy); color: #fff; padding: 8px 12px; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 4px; color: var(--brand-cyan-text); font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }

.button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 3px; background: #fff; padding: 7px 12px; color: var(--brand-navy); font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { border-color: #7f9bab; background: var(--surface-soft); }
.button--primary { border-color: var(--brand-navy); background: var(--brand-navy); color: #fff; }
.button--primary:hover { background: #18435d; color: #fff; }
.button--wide { width: 100%; min-height: 40px; }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 3px; background: #fff; color: var(--brand-navy); padding: 0; cursor: pointer; }
.icon-button:hover { border-color: var(--brand-cyan-text); background: var(--surface-accent); }
.icon-button svg { width: 17px; height: 17px; }

.notice { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 3px; padding: 9px 10px; font-size: 13px; }
.notice svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.notice--danger { border-color: #ce918a; border-left-color: var(--danger); background: #fff4f4; color: #742626; }
.notice--info { border-color: #9fc5d5; border-left-color: var(--brand-cyan-text); background: var(--surface-accent); color: #21495f; }

/* Authentication */
.auth-page, .error-page { background: linear-gradient(135deg, #e5ebee 0%, #f3f7f9 70%); }
.auth-shell, .error-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(430px, 100%); border: 1px solid var(--border-strong); border-top: 3px solid var(--brand-cyan); border-radius: 5px; background: #fff; box-shadow: var(--shadow-overlay); }
.auth-brand { min-height: 58px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding: 12px 20px; }
.auth-brand img { width: 148px; height: auto; display: block; }
.auth-brand span { border-left: 1px solid var(--border); padding-left: 14px; color: var(--brand-navy); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-card__body { padding: 24px; }
.auth-card h1 { margin: 0; color: var(--brand-navy-deep); font-size: 22px; line-height: 1.15; }
.auth-intro { margin: 6px 0 20px; color: var(--text-muted); }
.auth-card .notice { margin-bottom: 16px; }
.auth-form { display: grid; gap: 14px; }
.field { display: grid; gap: 4px; color: var(--brand-navy); font-size: 12px; font-weight: 700; }
.field > span { text-transform: uppercase; letter-spacing: 0.03em; }
.field input { width: 100%; min-height: 38px; border: 1px solid var(--border-strong); border-radius: 3px; padding: 7px 9px; color: var(--text); font-size: 14px; font-weight: 400; }
.field input:focus { border-color: var(--brand-cyan-text); outline: 2px solid rgba(0, 200, 255, 0.35); outline-offset: 0; }
.auth-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--border); background: var(--surface-soft); padding: 8px 20px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Application shell */
.shell { min-height: 100vh; display: grid; grid-template-rows: var(--header-height) minmax(0, 1fr); }
.app-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto; align-items: center; border-bottom: 3px solid var(--brand-cyan); background: #fff; box-shadow: var(--shadow-subtle); }
.app-header__brand { height: 100%; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--border); padding: 0 12px; }
.app-header__menu { display: none; }
.brand-link { min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-link img { width: 134px; height: auto; display: block; }
.brand-link span { border-left: 1px solid var(--border); padding-left: 12px; color: var(--brand-navy); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.app-header__context { min-width: 0; padding: 0 18px; }
.app-header__context span, .app-header__context strong { display: block; }
.app-header__context span { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.app-header__context strong { overflow: hidden; color: var(--brand-navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.app-header__account { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.environment-badge { border: 1px solid #9fc5d5; border-radius: 999px; background: var(--surface-accent); padding: 3px 7px; color: #24617d; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.environment-badge--staging { border-color: #d2b779; background: #fff9ed; color: #76501a; }
.account-menu { position: relative; }
.account-menu summary { min-height: 42px; display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-navy); color: #fff; font-size: 12px; font-weight: 700; }
.account-copy { min-width: 100px; display: grid; }
.account-copy strong { color: var(--brand-navy); font-size: 12px; }
.account-copy small { color: var(--text-muted); font-size: 10px; }
.account-menu summary > svg { width: 13px; height: 13px; }
.account-menu__panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 80; width: 230px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; box-shadow: var(--shadow-overlay); }
.account-menu__identity { display: grid; gap: 2px; border-bottom: 1px solid var(--border); padding: 10px 12px; }
.account-menu__identity strong { color: var(--brand-navy); }
.account-menu__identity span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; }
.account-menu form { margin: 0; }
.account-menu form button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: #fff; padding: 9px 12px; color: var(--danger); text-align: left; cursor: pointer; }
.account-menu form button:hover { background: var(--surface-soft); }

.app-frame { min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.app-sidebar { position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--border-strong); background: #fff; overflow: hidden; }
.sidebar-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; border-bottom: 1px solid var(--border); padding: 8px; }
.sidebar-search { min-width: 0; height: 32px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-soft); padding: 0 7px; color: var(--text-muted); }
.sidebar-search:focus-within { border-color: var(--brand-cyan-text); outline: 2px solid rgba(0, 200, 255, 0.28); }
.sidebar-search svg { flex: 0 0 14px; width: 14px; height: 14px; }
.sidebar-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.tool-tree { overflow: auto; padding: 6px 5px 12px; }
.tree-item { position: relative; width: 100%; min-height: 30px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 2px; background: transparent; padding: 4px 8px; color: #355064; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.tree-item:hover { background: var(--surface-soft); color: var(--brand-navy); }
.tree-item.is-selected { background: var(--surface-accent); color: var(--brand-navy); font-weight: 700; }
.tree-item.is-selected::before { position: absolute; inset: 3px auto 3px 0; width: 3px; background: var(--brand-cyan); content: ''; }
.tree-item--category { margin-top: 4px; color: var(--brand-navy); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tree-item--category.has-active-child { color: var(--brand-cyan-text); }
.tree-item--tool { padding-left: 29px; }
.tree-item.is-locked { color: #70808a; }
.tree-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.tree-chevron { flex: 0 0 12px; width: 12px; height: 12px; transition: transform 0.15s ease; }
.tree-item--category[aria-expanded="true"] .tree-chevron { transform: rotate(90deg); }
.tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-lock { width: 12px; height: 12px; margin-left: auto; }
.tree-empty { margin: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
.sidebar-status { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border-top: 1px solid var(--border); background: var(--surface-soft); padding: 8px 10px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sidebar-status small { grid-column: 1 / -1; overflow: hidden; font-size: 9px; font-weight: 400; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.nav-backdrop { display: none; }

.workspace { min-width: 0; min-height: calc(100vh - var(--header-height)); background: var(--surface-soft); }
.workspace-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-strong); background: #fff; padding: 8px 18px; }
.workspace-bar h1 { margin: 2px 0 0; color: var(--brand-navy-deep); font-size: 18px; line-height: 1.15; }
.breadcrumb { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 10px; }
.breadcrumb a { color: var(--brand-cyan-text); text-decoration: none; }
.breadcrumb svg { width: 10px; height: 10px; }
.route-chip { border: 1px solid var(--border); border-radius: 3px; background: var(--surface-soft); padding: 3px 7px; color: var(--text-muted); font: 11px Consolas, monospace; }
.workspace-content { width: min(1240px, 100%); padding: 18px; }
.app-page--designer { height: 100vh; min-height: 0; overflow: hidden; }
.app-page--designer .shell { height: 100%; min-height: 0; overflow: hidden; }
.app-page--designer .app-frame { min-height: 0; overflow: hidden; }
.workspace--designer { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.workspace-content.workspace-content--designer { min-width: 0; width: 100%; max-width: none; min-height: 0; height: 100%; padding: 0; overflow: hidden; }
.designer-frame { min-width: 0; width: 100%; min-height: 0; height: 100%; display: block; border: 0; background: #fff; }
.workspace-intro { margin-bottom: 12px; border-left: 4px solid var(--brand-cyan); background: #fff; padding: 12px 14px; }
.workspace-intro h2 { margin: 0; color: var(--brand-navy); font-size: 17px; }
.workspace-intro p:last-child { margin: 4px 0 0; color: var(--text-muted); }

.explorer-list { border: 1px solid var(--border-strong); background: #fff; }
.explorer-list__head, .explorer-row { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr) minmax(100px, 0.5fr); align-items: center; }
.explorer-list__head { min-height: 30px; border-bottom: 1px solid var(--border-strong); background: #edf3f6; color: #3d5665; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.explorer-list__head span, .explorer-row > span { min-width: 0; padding: 6px 9px; border-right: 1px solid var(--border); }
.explorer-list__head span:last-child, .explorer-row > span:last-child { border-right: 0; }
.explorer-row { min-height: 48px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 12px; text-decoration: none; }
.explorer-row:last-child { border-bottom: 0; }
.explorer-row:hover { background: var(--surface-accent); }
.explorer-name { display: flex; align-items: center; gap: 9px; }
.explorer-name > svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--brand-cyan-text); }
.explorer-name > span { min-width: 0; display: grid; }
.explorer-name strong { color: var(--brand-navy); }
.explorer-name small { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; min-height: 20px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.status--pending { border-color: #c7a65e; color: var(--warning); }
.status--ok { border-color: #8ebba8; color: var(--success); }
.status--locked { border-color: var(--border-strong); color: var(--text-muted); }

.placeholder-panel { max-width: 720px; border: 1px solid var(--border-strong); border-top: 4px solid var(--brand-cyan); border-radius: 4px; background: #fff; padding: 22px; box-shadow: var(--shadow-subtle); }
.placeholder-panel__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid #9fc5d5; border-radius: 4px; background: var(--surface-accent); color: var(--brand-cyan-text); }
.placeholder-panel__icon svg { width: 26px; height: 26px; }
.placeholder-panel h2 { margin: 0; color: var(--brand-navy-deep); font-size: 22px; }
.placeholder-panel > p:not(.eyebrow) { margin: 6px 0 16px; color: var(--text-muted); }
.placeholder-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.placeholder-details div { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px; }
.placeholder-details dt { color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.placeholder-details dd { margin: 3px 0 0; color: var(--brand-navy); font-size: 12px; overflow-wrap: anywhere; }
.placeholder-details code { font: 11px Consolas, monospace; }

.error-card { width: min(520px, 100%); border: 1px solid var(--border-strong); border-top: 4px solid var(--brand-cyan); border-radius: 4px; background: #fff; padding: 26px; box-shadow: var(--shadow-overlay); }
.error-card img { width: 170px; height: auto; margin-bottom: 24px; }
.error-card h1 { margin: 0; color: var(--brand-navy); font-size: 24px; }
.error-card > p:not(.eyebrow) { margin: 8px 0 20px; color: var(--text-muted); }
.noscript-message { position: fixed; inset: auto 12px 12px; z-index: 100; border: 1px solid #c7a65e; background: #fff9ed; padding: 8px; color: var(--warning); }

.shell.sidebar-collapsed { --sidebar-width: 54px; }
.shell.sidebar-collapsed .sidebar-toolbar { grid-template-columns: 1fr; }
.shell.sidebar-collapsed .sidebar-search, .shell.sidebar-collapsed .tree-label, .shell.sidebar-collapsed .tree-category, .shell.sidebar-collapsed .sidebar-status, .shell.sidebar-collapsed .brand-link span { display: none; }
.shell.sidebar-collapsed .brand-link img { width: 32px; object-fit: cover; object-position: left; }
.shell.sidebar-collapsed .app-header__brand { justify-content: center; padding: 0; }
.shell.sidebar-collapsed .sidebar-collapse { margin: auto; }
.shell.sidebar-collapsed .tree-item--home { justify-content: center; padding: 4px; }

@media (max-width: 1023px) {
    :root { --sidebar-width: 230px; }
    .app-header { grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) auto; }
    .app-header__menu { display: inline-grid; }
    .brand-link span { display: none; }
    .app-frame { grid-template-columns: 1fr; }
    .app-sidebar { position: fixed; top: var(--header-height); bottom: 0; left: 0; z-index: 70; width: min(290px, 86vw); height: auto; transform: translateX(-102%); box-shadow: var(--shadow-overlay); transition: transform 0.18s ease; }
    .shell.nav-open .app-sidebar { transform: translateX(0); }
    .nav-backdrop { position: fixed; inset: var(--header-height) 0 0; z-index: 60; border: 0; background: rgba(10, 35, 50, 0.48); }
    .shell.nav-open .nav-backdrop { display: block; }
    .sidebar-collapse { display: none; }
    .shell.sidebar-collapsed { --sidebar-width: 230px; }
    .shell.sidebar-collapsed .sidebar-search, .shell.sidebar-collapsed .tree-label, .shell.sidebar-collapsed .tree-category, .shell.sidebar-collapsed .sidebar-status { display: initial; }
    .shell.sidebar-collapsed .tree-category { display: block; }
    .shell.sidebar-collapsed .sidebar-status { display: grid; }
    .shell.sidebar-collapsed .app-header__brand { justify-content: flex-start; padding: 0 12px; }
    .shell.sidebar-collapsed .brand-link img { width: 134px; object-fit: contain; }
    .workspace--designer { height: calc(100vh - var(--header-height)); }
}

@media (max-width: 759px) {
    .app-header { grid-template-columns: minmax(0, 1fr) auto; }
    .app-header__context { display: none; }
    .brand-link img { width: 118px; }
    .account-copy, .account-menu summary > svg, .environment-badge { display: none; }
    .workspace-bar { min-height: 54px; padding: 8px 12px; }
    .workspace-bar h1 { font-size: 16px; }
    .route-chip { display: none; }
    .workspace-content { padding: 10px; }
    .explorer-list { overflow-x: auto; }
    .explorer-list__head, .explorer-row { min-width: 720px; }
    .placeholder-panel { padding: 16px; }
    .placeholder-details { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
    .tree-item { min-height: 44px; }
    .icon-button { width: 40px; height: 40px; }
}