.obf-body, .tool-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--page); }
.obf-header, .sandbox-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 0 18px; flex-shrink: 0; background: var(--surface); border-bottom: 2px solid var(--ink); }
.obf-header-left, .obf-header-center, .obf-header-right { display: flex; align-items: center; gap: 11px; }
.obf-header-center { justify-content: center; flex: 1; }
.obf-logo, .tool-logo { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 700; }
.obf-logo-sub, .obf-toggle-label, .logo-subtext { color: var(--muted); font: 700 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.obf-status { display: flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 9px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; font: 700 9px var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.obf-status-dot { width: 7px; height: 7px; background: var(--quiet); border: 1px solid var(--surface); border-radius: 50%; }
.obf-status.ready .obf-status-dot, .status-ready #statusDot { background: var(--success); }
.status-active #statusDot { background: var(--accent); box-shadow: 0 0 0 3px var(--surface-3); }
.obf-toggle-group { display: flex; align-items: center; gap: 7px; }
.obf-switch { position: relative; width: 34px; height: 19px; cursor: pointer; }
.obf-switch input { position: absolute; opacity: 0; }
.obf-switch-track { position: absolute; inset: 0; background: var(--quiet); border: 1px solid var(--line-strong); border-radius: 99px; }
.obf-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #ffffff; border-radius: 50%; transition: transform .15s; }
.obf-switch input:checked + .obf-switch-track { background: var(--success); border-color: var(--success); }
.obf-switch input:checked + .obf-switch-track::after { transform: translateX(15px); }
.obf-main { display: flex; flex: 1; min-height: 0; gap: 1px; background: var(--ink); }
.obf-pane { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; background: var(--surface); }
.obf-pane-header, .pane-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line-strong); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.obf-editor, .editor-container { flex: 1; min-height: 0; }
.obf-loading-overlay, .obf-unauth, .unauth-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; background: var(--page); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; }
.obf-loading-overlay { position: absolute; opacity: 0; pointer-events: none; background-color: var(--surface); }
.obf-pane.is-obfuscating .obf-loading-overlay { opacity: 1; pointer-events: auto; }
.obf-unauth h1, .unauth-overlay h1 { padding: 8px 14px; color: #ffffff; background: var(--accent); font-size: 23px; font-weight: 700; box-shadow: 4px 4px 0 #075368; }
.obf-spinner { width: 26px; height: 26px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .65s linear infinite; }
.obf-loading-text, .obf-unauth p, .unauth-overlay p { color: var(--muted); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.obf-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: var(--surface-3); }
.obf-progress-bar { width: 35%; height: 100%; background: var(--accent); transform: translateX(-110%); }
.obf-pane.is-obfuscating .obf-progress-bar { animation: tool-progress 1.1s ease-in-out infinite; }
@keyframes tool-progress { to { transform: translateX(320%); } }
.tracker-main { display: flex; flex: 1; gap: 12px; min-height: 0; padding: 12px; overflow: hidden; background: var(--page); }
.tracker-sidebar, .tracker-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.tracker-sidebar { flex: 0 0 340px; }
.tracker-content { flex: 1; }
.tracker-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.tracker-pane:hover { border-color: var(--accent); }
.sidebar-top { flex: 0 0 260px; }
.sidebar-bottom, .content-bottom { flex: 1; }
.content-top { flex: 1.2; }
.tracker-textarea { flex: 1; width: 100%; min-height: 0; padding: 12px; resize: none; color: var(--ink); background: var(--surface); border: 0; outline: 0; font: 11px/1.6 var(--mono); }
.tree-container { position: relative; flex: 1; overflow: hidden; background-color: var(--surface); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; }
.tree-svg-canvas { width: 100%; height: 100%; min-width: 500px; min-height: 400px; touch-action: none; }
.demo-console { flex: 1; min-height: 0 !important; max-height: none !important; padding: 10px; overflow-y: auto; color: #e4f4ed; background: #17231f !important; border-top: 0; font: 11px/1.5 var(--mono); }
.content-tabs { display: flex; gap: 10px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.content-tab { padding: 9px 2px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; font: 700 9px var(--mono); text-transform: uppercase; }
.content-tab:hover, .content-tab.active { color: var(--accent); }
.content-tab.active { border-bottom-color: var(--accent); }
.metadata-view { display: none; flex: 1; padding: 12px; overflow-y: auto; color: var(--ink); background: var(--surface); font: 11px/1.5 var(--mono); }
.metadata-key { margin-bottom: 4px; color: var(--accent); font-weight: 700; }
.metadata-value { padding: 7px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; }

@media (max-width: 900px) {
    .obf-header, .sandbox-header { min-height: 56px; padding: 0 11px; }
    .obf-header-center { display: none; }
    .tracker-main { padding: 8px; gap: 0; }
    .tracker-sidebar, .tracker-content { display: contents; }
    .tracker-pane { display: none; }
    .tracker-pane.active-mobile { display: flex; }
    .obf-main, .sandbox-main { flex-direction: column; overflow: auto; }
    .obf-pane, .sandbox-pane { min-height: 260px; }
}