@property --bg { syntax: ''; inherits: true; initial-value: transparent; } @property --bg-elevated { syntax: ''; inherits: true; initial-value: transparent; } @property --surface { syntax: ''; inherits: true; initial-value: transparent; } @property --surface-strong { syntax: ''; inherits: true; initial-value: transparent; } @property --surface-hover { syntax: ''; inherits: true; initial-value: transparent; } @property --surface-soft { syntax: ''; inherits: true; initial-value: transparent; } @property --text { syntax: ''; inherits: true; initial-value: transparent; } @property --text-2 { syntax: ''; inherits: true; initial-value: transparent; } @property --text-3 { syntax: ''; inherits: true; initial-value: transparent; } @property --line { syntax: ''; inherits: true; initial-value: transparent; } @property --line-strong { syntax: ''; inherits: true; initial-value: transparent; } @property --glass { syntax: ''; inherits: true; initial-value: transparent; } @property --glass-strong { syntax: ''; inherits: true; initial-value: transparent; } @property --input { syntax: ''; inherits: true; initial-value: transparent; } @property --grid { syntax: ''; inherits: true; initial-value: transparent; } @property --accent-ink { syntax: ''; inherits: true; initial-value: transparent; } @property --danger { syntax: ''; inherits: true; initial-value: transparent; } @property --warning { syntax: ''; inherits: true; initial-value: transparent; } @property --success { syntax: ''; inherits: true; initial-value: transparent; } @property --blue { syntax: ''; inherits: true; initial-value: transparent; } @property --accent { syntax: ''; inherits: true; initial-value: #dc2626; } :root { --accent: #dc2626; --ease-soft: cubic-bezier(.2,.78,.24,1); --ease-enter: cubic-bezier(.16,1,.3,1); --ease-exit: cubic-bezier(.4,0,1,1); --ease-spring: linear(0,.004,.016,.035,.063,.098,.141,.19,.244,.301,.36,.419,.478,.534,.586,.633,.674,.708,.735,.753,.764,.768,.765,.758,.748,.737,.727,.718,.712,.71,.712,.718,.726,.736,.747,.757,.766,.773,.777,.779,.778,.776,.773,.77,.768,.767,.768,.77,.774,.779,.784,.79,.796,.801,.806,.81,.813,.815,.816,.816,.816,.815,.815,.816,.818,.821,.824,.828,.833,.837,.842,.847,.851,.854,.857,.859,.86,.86,.86,.86,.861,.862,.864,.867,.87,.874,.878,.882,.886,.889,.892,.894,.896,.897,.898,.898,.899,.9,.902,.904,.907,.91,.913,.916,.918,.92,.922,.923,.924,.924,.925,.926,.928,.93,.932,.934,.936,.938,.939,.94,.94,.941,.941,.942,.944,.946,.948,.951,.953,.955,.957,.958,.959,.96,.96,.961,.962,.963,.965,.968,.97,.972,.974,.975,.976,.976,.977,.978,.98,.982,.984,.986,.987,.988,.989,.989,.99,.991,.992,.994,.996,.997,.998,.999,1); --radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 34px; --rail-width: 82px; --content-max: 1600px; --command-height: 62px; --shadow-1: 0 10px 30px rgba(0,0,0,.12); --shadow-2: 0 18px 70px rgba(0,0,0,.18); --shadow-3: 0 36px 100px rgba(0,0,0,.28); color-scheme: dark; } html[data-theme="dark"] { --bg: #090a0d; --bg-elevated: #0d0f13; --surface: rgba(18,20,25,.82); --surface-strong: #15181e; --surface-hover: #1a1e25; --surface-soft: rgba(255,255,255,.035); --text: #f5f7fa; --text-2: #a5abb5; --text-3: #737b88; --line: rgba(255,255,255,.085); --line-strong: rgba(255,255,255,.14); --glass: rgba(14,16,20,.74); --glass-strong: rgba(16,18,23,.92); --input: rgba(255,255,255,.042); --grid: rgba(255,255,255,.028); --accent-ink: white; --danger: #f05252; --warning: #f5a524; --success: #35c98b; --blue: #5a92ff; color-scheme: dark; } html[data-theme="light"] { --bg: #f4f5f7; --bg-elevated: #fafbfc; --surface: rgba(255,255,255,.82); --surface-strong: #fff; --surface-hover: #f8f9fb; --surface-soft: rgba(14,19,27,.035); --text: #111319; --text-2: #59616d; --text-3: #858d98; --line: rgba(17,19,25,.095); --line-strong: rgba(17,19,25,.16); --glass: rgba(250,251,252,.78); --glass-strong: rgba(255,255,255,.94); --input: rgba(17,19,25,.038); --grid: rgba(17,19,25,.035); --accent-ink: white; --danger: #d63a3a; --warning: #b66b00; --success: #0b8f61; --blue: #2e65d6; color-scheme: light; } * { box-sizing: border-box; } html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } button { color: inherit; } img { max-width: 100%; } svg { width: 1em; height: 1em; display: block; } ::selection { background: color-mix(in srgb,var(--accent) 42%,transparent); color: var(--text); } html.theme-transitioning, html.theme-transitioning body, html.theme-transitioning .panel, html.theme-transitioning .command-bar, html.theme-transitioning .nav-rail, html.theme-transitioning .profile-menu, html.theme-transitioning .language-menu, html.theme-transitioning input, html.theme-transitioning button, html.theme-transitioning .interactive-card { transition: background-color .36s var(--ease-soft), border-color .36s var(--ease-soft), color .3s var(--ease-soft), box-shadow .36s var(--ease-soft) !important; } html.accent-transitioning { transition: --accent .48s var(--ease-soft); } .skip-link { position: fixed; left: 20px; top: -100px; z-index: 99999; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); transition: top .2s; } .skip-link:focus { top: 18px; } .hidden, [hidden] { display: none !important; } .muted { color: var(--text-2); } .subtle { color: var(--text-3); } .code, code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } /* Atmosphere: slow, restrained and non-interactive. */ .ambient-field, .noise-layer { position: fixed; inset: 0; pointer-events: none; z-index: -3; } .ambient-field { overflow: hidden; background: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px), radial-gradient(circle at 15% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34%), radial-gradient(circle at 92% 14%,color-mix(in srgb,var(--blue) 7%,transparent),transparent 34%), linear-gradient(180deg,var(--bg-elevated),var(--bg)); background-size: 42px 42px,42px 42px,auto,auto,auto; } .ambient-field i { position:absolute; width:36vw; height:36vw; border-radius:50%; filter: blur(90px); opacity:.12; background:var(--accent); animation: ambientDrift 24s ease-in-out infinite alternate; } .ambient-field i:nth-child(1){left:-20vw;top:25vh}.ambient-field i:nth-child(2){right:-23vw;top:5vh;animation-delay:-8s}.ambient-field i:nth-child(3){left:32vw;bottom:-28vw;animation-delay:-15s;opacity:.07} .noise-layer { z-index:-2; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; } @keyframes ambientDrift { to { transform: translate3d(4vw,-4vh,0) scale(1.08); } } /* Compact floating command rail. Labels reveal contextually rather than consuming permanent width. */ .nav-rail { position: fixed; z-index: 80; left: 18px; top: 18px; bottom: 18px; width: var(--rail-width); padding: 10px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb,var(--glass) 92%,transparent); box-shadow: var(--shadow-2), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(22px) saturate(120%); transition: none; overflow: hidden; } .nav-rail:hover, .nav-rail:focus-within { width: 232px; } .rail-brand { height: 54px; display:flex; align-items:center; gap:12px; padding:0 7px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; } .brand-core { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 22%,var(--surface-strong)),var(--surface-strong)); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); box-shadow:inset 0 1px rgba(255,255,255,.08); } .brand-core img { width:25px; height:25px; object-fit:contain; } .rail-brand > span:last-child { opacity:0; transform:none; transition:none; } .nav-rail:hover .rail-brand > span:last-child,.nav-rail:focus-within .rail-brand > span:last-child { opacity:1; transform:none; } .rail-links { position:relative; display:flex; flex-direction:column; gap:3px; margin-top:16px; min-height:0; } .nav-item { position:relative; z-index:1; height:48px; display:grid; grid-template-columns:46px 1fr; align-items:center; border-radius:14px; color:var(--text-2); white-space:nowrap; transition:none; outline:none; } .nav-item i { width:46px; display:grid; place-items:center; font-size:19px; transition:none; } .nav-item .nav-label { opacity:0; transform:none; transition:none; font-weight:580; } .nav-rail:hover .nav-item .nav-label,.nav-rail:focus-within .nav-item .nav-label { opacity:1; transform:none; } .nav-item:hover,.nav-item:focus-visible { color:var(--text); transform:none; background:var(--surface-soft); } .nav-item:hover i { transform:none; } .nav-item.active { color:var(--text); } .nav-item.active i { color:var(--accent); } .nav-item > b { display:none; } .rail-active-signal { position:absolute; z-index:0; left:0; right:0; top:0; height:48px; border-radius:14px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent) 5%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 80%,white 5%); pointer-events:none; } .rail-footer { position:absolute; left:17px; right:17px; bottom:16px; height:36px; display:flex; gap:10px; align-items:center; white-space:nowrap; font:600 10px/1 ui-monospace,monospace; letter-spacing:.08em; color:var(--text-3); } .rail-footer span:last-child { opacity:0; transition:none; } .nav-rail:hover .rail-footer span:last-child { opacity:1; } .live-dot,.status-dot { width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent);display:inline-block;flex:0 0 auto; } .mobile-dock { display:none; } .command-bar { position:fixed; z-index:70; top:18px; left:calc(var(--rail-width) + 36px); right:18px; height:var(--command-height); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 14px 0 20px; border:1px solid var(--line); border-radius:21px; background:color-mix(in srgb,var(--glass) 89%,transparent); backdrop-filter:blur(22px) saturate(120%); box-shadow:var(--shadow-1),inset 0 1px rgba(255,255,255,.035); } .public .command-bar { left:18px; } .command-title { min-width:0; display:flex; align-items:baseline; gap:12px; } .command-kicker,.eyebrow,.modal-eyebrow { font:650 10px/1.2 ui-monospace,"SFMono-Regular",monospace; letter-spacing:.13em; color:var(--text-3); text-transform:uppercase; } .command-title strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; } .command-actions { display:flex; align-items:center; gap:8px; } .secure-chip { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 11px; border:1px solid var(--line); border-radius:11px; color:var(--text-2); font:600 10px/1 ui-monospace,monospace; letter-spacing:.06em; } .theme-toggle-form { margin:0; } .theme-toggle { position:relative; width:62px; height:34px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); cursor:pointer; display:flex; align-items:center; padding:3px; overflow:hidden; transition:background .3s,border-color .3s,box-shadow .3s; } .theme-toggle:hover { border-color:var(--line-strong); box-shadow:0 7px 20px rgba(0,0,0,.1); } .theme-track { position:absolute; inset:3px; border-radius:8px; } .theme-track b { position:absolute; top:0; bottom:0; width:27px; border-radius:8px; background:var(--surface-strong); border:1px solid var(--line); box-shadow:0 3px 8px rgba(0,0,0,.14); transition:transform .42s var(--ease-enter),background-color .32s,border-color .32s; } html[data-theme="dark"] .theme-track b { transform:translateX(27px); } html[data-theme="light"] .theme-track b { transform:translateX(0); } .theme-icon-stack { position:relative; z-index:2; width:100%; height:100%; pointer-events:none; } .theme-icon-stack svg { position:absolute; width:15px; height:15px; top:6px; transition:transform .42s var(--ease-enter),opacity .24s,filter .3s; } .theme-sun { left:6px; } .theme-moon { right:6px; } html[data-theme="dark"] .theme-sun { transform:translateY(-20px) scale(.7); opacity:0; } html[data-theme="dark"] .theme-moon { transform:translateY(0) scale(1); opacity:1; } html[data-theme="light"] .theme-sun { transform:translateY(0) scale(1); opacity:1; } html[data-theme="light"] .theme-moon { transform:translateY(20px) scale(.7); opacity:0; } .theme-toggle.switching .theme-icon-stack { filter:blur(.3px); } .language-menu-wrap,.profile-menu-wrap { position:relative; } .language-button,.profile-button,.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--text-2); cursor:pointer; transition:transform .25s var(--ease-soft),background .25s,border-color .25s,color .25s,box-shadow .25s; } .language-button { width:40px; font:650 10px/1 ui-monospace,monospace; } .language-button:hover,.profile-button:hover,.icon-btn:hover { transform:translateY(-1px); color:var(--text); border-color:var(--line-strong); background:var(--surface-hover); box-shadow:0 9px 20px rgba(0,0,0,.08); } .avatar-orb { width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 30%,var(--surface-strong)),var(--surface-strong));color:var(--text);font-weight:700;font-size:11px; } .profile-menu,.language-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:218px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--glass-strong); backdrop-filter:blur(24px); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(-5px); transition:.2s var(--ease-soft); } .language-menu { min-width:170px; } .profile-menu.open,.language-menu.open { opacity:1; visibility:visible; transform:none; } .profile-summary { padding:9px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:5px; display:flex;flex-direction:column;gap:2px; } .profile-summary strong { font-size:13px; }.profile-summary span { color:var(--text-3);font-size:11px; } .profile-menu a,.profile-menu button,.language-menu button { width:100%;border:0;background:transparent;color:var(--text-2);min-height:38px;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 10px;cursor:pointer;text-align:left;transition:.18s; } .profile-menu a:hover,.profile-menu button:hover,.language-menu button:hover { background:var(--surface-soft);color:var(--text);transform:translateX(1px); } .profile-menu form { margin:0; }.language-menu button { justify-content:space-between;font-weight:700; }.language-menu button span { font-weight:500;color:var(--text-3); } .public-actions { display:flex;gap:8px; } .main { position:relative; width:min(calc(100% - var(--rail-width) - 72px),var(--content-max)); margin:0 24px 0 calc(var(--rail-width) + 54px); padding:108px 0 64px; min-height:100vh; } .public .main { width:min(calc(100% - 36px),1280px);margin:0 auto;padding-top:108px; } /* Core surfaces */ .panel,.interactive-card { position:relative; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-md); box-shadow:inset 0 1px rgba(255,255,255,.025); } .panel::before,.interactive-card::before { content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--spot-x,-999px) var(--spot-y,-999px),color-mix(in srgb,var(--accent) 8%,transparent),transparent 46%);opacity:.85; } .interactive-card { transition:transform .42s var(--ease-soft),border-color .3s,box-shadow .42s var(--ease-soft),background-color .3s; } .interactive-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 19%,var(--line)); box-shadow:0 22px 55px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.04); } .panel { padding:22px; } .page-head { display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin:20px 0 28px; } .page-head > div:first-child { min-width:0; } .page-head h1,.hero h1,.settings-hero h1 { margin:8px 0 0; font-size:clamp(30px,4.1vw,58px);line-height:1.01;letter-spacing:-.052em;font-weight:670;max-width:1000px; } .page-head p { margin:10px 0 0;max-width:800px; } .hero-head { min-height:170px;align-items:center; } .page-head-actions { display:flex;gap:8px;align-items:center;flex:0 0 auto; } .section-heading { margin:40px 0 16px;display:flex;justify-content:space-between;align-items:end; } .section-heading h2,.panel h2 { margin:6px 0 0;font-size:22px;letter-spacing:-.03em; } .panel-head { position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px; } .panel-head h2 { margin:4px 0 0; } .btn { --btn-y:0; position:relative; isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--text);font-weight:630;font-size:13px;cursor:pointer;overflow:hidden;transition:transform .34s var(--ease-soft),box-shadow .34s var(--ease-soft),border-color .25s,background .25s,color .25s; } .btn::before { content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(120px circle at var(--spot-x,50%) var(--spot-y,0),rgba(255,255,255,.17),transparent 55%);opacity:0;transition:opacity .25s; } .btn:hover { transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 12px 27px rgba(0,0,0,.13); } .btn:hover::before { opacity:1; }.btn:active { transform:translateY(0) scale(.985);box-shadow:0 5px 12px rgba(0,0,0,.1);transition-duration:.09s; }.btn:disabled { opacity:.45;cursor:not-allowed;transform:none;box-shadow:none; } .btn.primary { border-color:color-mix(in srgb,var(--accent) 58%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white 5%),color-mix(in srgb,var(--accent) 82%,black 10%));color:var(--accent-ink);box-shadow:0 9px 25px color-mix(in srgb,var(--accent) 19%,transparent),inset 0 1px rgba(255,255,255,.2); } .btn.primary:hover { border-color:color-mix(in srgb,var(--accent) 80%,white 12%);box-shadow:0 16px 34px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px rgba(255,255,255,.22); } .btn.ghost { background:var(--surface-soft); }.btn.danger { border-color:color-mix(in srgb,var(--danger) 38%,transparent);background:color-mix(in srgb,var(--danger) 11%,var(--surface));color:var(--danger); }.btn.small { min-height:34px;padding:0 10px;border-radius:10px;font-size:11px; }.btn.wide { width:100%; }.action-btn { min-height:46px;padding:0 18px; } .text-action { display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-weight:600;transition:.25s; }.text-action:hover { color:var(--text);transform:translateY(-1px); } .danger-icon { color:var(--danger); } input,select,textarea { width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--input);color:var(--text);padding:0 13px;outline:none;transition:border-color .25s,box-shadow .25s,background-color .25s; } textarea { height:auto;min-height:110px;padding:12px;resize:vertical; } input::placeholder,textarea::placeholder { color:var(--text-3); } input:focus,select:focus,textarea:focus { border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--surface-strong));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent); } label { display:flex;flex-direction:column;gap:7px;color:var(--text-2);font-size:12px;font-weight:580; } .stack { display:flex;flex-direction:column;gap:14px; }.inline-form { display:flex;gap:9px;align-items:center; }.inline-form input { flex:1; } .check-row { flex-direction:row;align-items:center; }.check-row input { width:auto;height:auto; } .metric-deck { display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;margin:0 0 18px; } .metric-card { min-height:160px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface) 85%,transparent));display:flex;flex-direction:column;justify-content:space-between; } .metric-card span { color:var(--text-2);font-size:12px; }.metric-card strong { font-size:44px;line-height:1;letter-spacing:-.055em; }.metric-card small { color:var(--text-3); }.metric-card.signal { background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); } .entitlement-chip { display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));font-weight:620;white-space:nowrap; } /* Tables */ .table-panel { padding:0;overflow:hidden;margin-bottom:16px; }.table-panel .panel-head { padding:21px 22px 0; }.table-scroll { position:relative;z-index:1;overflow:auto; } table { width:100%;border-collapse:collapse;min-width:680px; }th,td { padding:13px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:middle; }th { color:var(--text-3);font:650 10px/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;background:color-mix(in srgb,var(--surface-strong) 50%,transparent); }td { color:var(--text-2);font-size:12px; }tr:hover td { background:var(--surface-soft);color:var(--text); }.table-primary { font-weight:650;color:var(--text); }.table-actions { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }.mini-form { display:flex;gap:5px;align-items:center; }.mini-form input { width:74px;height:34px;padding:0 8px;border-radius:9px; } .badge,.risk-pill { display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 8px;border-radius:8px;border:1px solid var(--line);font:650 9px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase; }.badge.completed,.badge.active { color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,var(--line));background:color-mix(in srgb,var(--success) 7%,transparent); }.badge.queued,.badge.running { color:var(--warning);border-color:color-mix(in srgb,var(--warning) 28%,var(--line)); }.badge.failed,.badge.revoked { color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,var(--line)); } .empty { padding:28px;color:var(--text-3);text-align:center; }.empty-state { min-height:52vh;display:grid;place-items:center;text-align:center;align-content:center;gap:12px;padding:40px; }.empty-state.compact { min-height:300px; }.empty-icon { width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:25px;border:1px solid var(--line);background:var(--surface);color:var(--text-2); }.empty-state h1,.empty-state h2 { margin:4px 0;letter-spacing:-.04em; }.empty-state p { max-width:560px;margin:0; } .notice { margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft);color:var(--text-2); }.danger-notice { border-color:color-mix(in srgb,var(--danger) 30%,var(--line));color:var(--danger); }.privacy-note { display:flex;align-items:flex-start;gap:10px; }.privacy-note svg { flex:0 0 auto;margin-top:2px;color:var(--success); } /* Scan ingest */ .upload-workspace { padding:0;overflow:hidden; }.upload-workspace form { margin:0; }.dropzone { position:relative;margin:12px;min-height:380px;border:1px dashed color-mix(in srgb,var(--accent) 25%,var(--line-strong));border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;cursor:pointer;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 34%),linear-gradient(180deg,var(--surface-soft),transparent);transition:border-color .35s,background .35s,transform .42s var(--ease-soft),box-shadow .42s;outline:none; } .dropzone:hover,.dropzone:focus-visible,.dropzone.drag { border-color:color-mix(in srgb,var(--accent) 65%,var(--line));transform:translateY(-2px);box-shadow:inset 0 0 55px color-mix(in srgb,var(--accent) 5%,transparent); }.drop-orbit { position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:28px;margin-bottom:25px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }.drop-orbit::before,.drop-orbit span { content:"";position:absolute;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:50%; }.drop-orbit::before { inset:-14px; }.drop-orbit span { inset:-29px;opacity:.45; }.dropzone:hover .drop-orbit { animation:dropFloat 1.8s ease-in-out infinite alternate; }@keyframes dropFloat{to{transform:translateY(-5px)}} .drop-copy h2 { margin:0;font-size:24px;letter-spacing:-.035em; }.drop-copy p { margin:6px 0;color:var(--text-3); }.file-pill { margin-top:22px;display:inline-flex;max-width:100%;padding:8px 11px;border-radius:9px;background:var(--surface-strong);border:1px solid var(--line);font:600 10px/1.2 ui-monospace,monospace;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.upload-footer { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-strong) 50%,transparent); }.upload-policy { display:flex;gap:8px;flex-wrap:wrap; }.upload-policy span { display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-size:10px; }.upload-policy svg { color:var(--text-2); } .progress-box { margin:12px;padding:22px;border:1px solid var(--line);border-radius:19px;background:var(--surface-strong); }.progress-header,.progress-meta { display:flex;justify-content:space-between;gap:16px;align-items:center; }.progress-header strong { display:block;margin-top:5px; }.progress-number { text-align:right; }.progress-number strong { font-size:23px;letter-spacing:-.04em; }.progress-number span { display:block;color:var(--text-3);font:650 9px/1 ui-monospace,monospace;letter-spacing:.1em; }.progress-track { height:5px;margin:18px 0;background:var(--surface-soft);border-radius:999px;overflow:hidden; }.progress-track > span,.progress-fill { display:block;height:100%;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,white 5%),var(--accent));border-radius:inherit;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 32%,transparent);transition:width .16s linear; }.progress-meta { color:var(--text-3);font-size:11px; }.scan-console { margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#08090c;color:#bfc5cf; }.console-head { height:38px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);font:650 9px/1 ui-monospace,monospace;letter-spacing:.1em;color:#767e8b; }.console-live { display:flex;align-items:center;gap:6px; }.console-live i { width:6px;height:6px;border-radius:50%;background:#38d997; }.console-log { max-height:250px;overflow:auto;padding:8px 0;font:500 10px/1.6 ui-monospace,monospace; }.console-line { display:grid;grid-template-columns:78px 110px 1fr;gap:10px;padding:3px 12px; }.console-line span { color:#5e6673; }.console-line b { color:#9ea7b5;font-weight:600; }.console-line em { color:#c2c8d2;font-style:normal;overflow-wrap:anywhere; } /* Modal system */ .modal-open { overflow:hidden; }.modal-root { position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:20px; }.modal-backdrop { position:absolute;inset:0;background:rgba(3,5,8,.58);backdrop-filter:blur(12px) saturate(85%);animation:backdropIn .22s ease-out both; }.blur-backdrop { backdrop-filter:blur(18px) saturate(80%); }.glass-modal { position:relative;z-index:1;width:min(520px,calc(100vw - 32px));padding:26px;border:1px solid var(--line-strong);border-radius:26px;background:color-mix(in srgb,var(--glass-strong) 96%,transparent);box-shadow:var(--shadow-3),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(24px); }.glass-modal h2 { margin:8px 0 7px;font-size:28px;letter-spacing:-.045em; }.glass-modal > p { margin:0 0 22px; }.modal-icon { width:48px;height:48px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:20px;margin-bottom:18px; }.modal-field { margin:18px 0; }.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:22px; }.modal-close { position:absolute;top:14px;right:14px; }.alert { padding:11px 13px;border-radius:10px;margin:12px 0;border:1px solid var(--line); }.alert.danger { color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,var(--line)); }.alert.success { color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,var(--line)); }@keyframes backdropIn{from{opacity:0}to{opacity:1}} /* Dump workspace */ .dump-toolbar { display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px;padding:15px 17px; }.dump-toolbar > div { display:flex;align-items:center;gap:12px; }.dump-toolbar > div > svg { width:34px;height:34px;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent); }.dump-toolbar strong,.dump-toolbar span { display:block; }.dump-toolbar span { color:var(--text-3);font-size:10px;margin-top:2px; }.dump-search { position:relative;width:min(360px,42vw); }.dump-search > svg,.map-search-wrap > svg,.report-search > svg { position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;color:var(--text-3);font-size:15px; }.dump-search input,.map-search-wrap input,.report-search input { padding-left:36px; }.dump-list { display:flex;flex-direction:column;gap:10px; }.dump-card { display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 17px; }.dump-file-icon { width:58px;height:58px;border-radius:16px;display:grid;place-items:center;align-content:center;gap:2px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 9%,var(--surface-strong)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));color:var(--accent); }.dump-file-icon svg { font-size:20px; }.dump-file-icon span { font:700 8px/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--text-3); }.dump-card-main { min-width:0; }.dump-title-line { display:flex;align-items:baseline;gap:12px;justify-content:space-between; }.dump-title-line h3 { margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px; }.dump-title-line > span { color:var(--text-3);font:600 10px/1 ui-monospace,monospace;white-space:nowrap; }.dump-card-main > p { margin:3px 0 8px;color:var(--text-3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.dump-meta { display:flex;gap:14px;flex-wrap:wrap;color:var(--text-3);font-size:10px; }.dump-meta span { display:flex;align-items:center;gap:5px; }.dump-actions { display:flex;gap:6px; }.dump-actions form { margin:0; }.dump-upload-modal { width:min(560px,calc(100vw - 32px)); }.dump-file-picker { width:100%;min-height:76px;border:1px solid var(--line);border-radius:15px;background:var(--surface-soft);display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;text-align:left;padding:10px 12px;color:var(--text);cursor:pointer;transition:.3s var(--ease-soft); }.dump-file-picker:hover { transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--surface)); }.dump-picker-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--surface-strong);border:1px solid var(--line);color:var(--accent); }.dump-file-picker strong,.dump-file-picker small { display:block; }.dump-file-picker small { color:var(--text-3);margin-top:3px; }.dump-upload-progress { padding:12px 0 0; }.dump-upload-progress > div:first-child { display:flex;justify-content:space-between; }.dump-upload-progress small { color:var(--text-3); } /* Report */ .report-head h1 { max-width:900px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.report-signal-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:17px;overflow:hidden;margin-bottom:15px;background:var(--surface); }.report-signal-strip article { min-height:82px;padding:15px 18px;border-right:1px solid var(--line);display:flex;align-items:end;justify-content:space-between; }.report-signal-strip article:last-child { border-right:0; }.report-signal-strip span { color:var(--text-3);font-size:11px; }.report-signal-strip strong { font-size:28px;letter-spacing:-.04em; }.report-system { border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);overflow:hidden; }.report-tab-list { position:relative;display:flex;gap:2px;padding:8px;border-bottom:1px solid var(--line);overflow:auto;background:color-mix(in srgb,var(--surface-strong) 48%,transparent); }.report-tab { position:relative;z-index:1;height:40px;border:0;border-radius:10px;background:transparent;color:var(--text-2);display:inline-flex;align-items:center;gap:7px;padding:0 13px;white-space:nowrap;cursor:pointer;font-weight:600;transition:color .22s; }.report-tab b { min-width:21px;height:20px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);font-size:9px;color:var(--text-3); }.report-tab.active { color:var(--text); }.report-tab.active svg { color:var(--accent); }.tab-indicator { position:absolute;left:8px;top:8px;height:40px;border-radius:10px;background:var(--surface-strong);border:1px solid var(--line);box-shadow:0 5px 16px rgba(0,0,0,.08);pointer-events:none; }.report-tab-panel { padding:0; }.report-inner { padding:16px; }.report-search { position:relative;margin:15px 15px 0; }.risk-folds { display:flex;flex-direction:column;gap:9px; }.risk-fold { border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);overflow:hidden; }.risk-fold summary { list-style:none;min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;cursor:pointer;color:var(--text-2); }.risk-fold summary::-webkit-details-marker { display:none; }.risk-fold summary > span { display:flex;align-items:center;gap:10px; }.risk-fold summary > svg { transition:transform .3s var(--ease-soft); }.risk-fold[open] summary > svg { transform:rotate(180deg); }.risk-content { border-top:1px solid var(--line);padding:12px; }.risk-critical { color:#ff5964;border-color:rgba(255,89,100,.28);background:rgba(255,89,100,.06); }.risk-high { color:#ff7d68;border-color:rgba(255,125,104,.27);background:rgba(255,125,104,.055); }.risk-medium { color:#f0aa45;border-color:rgba(240,170,69,.26);background:rgba(240,170,69,.05); }.risk-low { color:#59b6ff;border-color:rgba(89,182,255,.25);background:rgba(89,182,255,.05); }.finding-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.finding { padding:17px; }.finding-top { display:flex;justify-content:space-between;gap:10px; }.finding-cat { margin-left:8px;color:var(--text-3);font-size:10px; }.score { font-size:18px;font-weight:700; }.score small { color:var(--text-3);font-size:9px; }.finding h3 { margin:15px 0 12px;font-size:15px; }.finding p { color:var(--text-2);font-size:11px; }.finding-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }.finding-grid div { padding:8px;border-radius:9px;background:var(--surface-soft);min-width:0; }.finding-grid span,.finding-grid strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.finding-grid span { color:var(--text-3);font-size:8px;text-transform:uppercase; }.finding-grid strong { margin-top:2px;font-size:9px; }.intelligence-grid-2 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } /* Main map workspace */ .map-report-panel { background:#090a0d; }.map-workspace { --map-panel: #101216; color:#eef1f5; min-height:720px; background:#0b0c0f; }.map-toolbar { min-height:62px;padding:9px 10px;display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:#101216; }.map-search-wrap { position:relative; }.map-search-wrap input { height:42px;background:#15181d;border-color:rgba(255,255,255,.08);color:#e9edf2; }.map-risk-filters,.map-view-switch { display:flex;gap:3px;padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#0d0f12; }.map-filter,.map-view-switch button { height:34px;border:0;border-radius:8px;background:transparent;color:#7f8794;padding:0 10px;cursor:pointer;font-size:10px;font-weight:650;transition:.22s; }.map-filter b { margin-left:4px; }.map-filter.active,.map-view-switch button.active { background:#1a1d22;color:#f2f4f7;box-shadow:inset 0 1px rgba(255,255,255,.05); }.map-view-switch button { display:flex;align-items:center;gap:5px; }.map-layout { min-height:658px;display:grid;grid-template-columns:280px minmax(420px,1fr) 300px; }.map-list-panel,.map-detail-panel { min-width:0;background:#101216; }.map-list-panel { border-right:1px solid rgba(255,255,255,.08); }.map-detail-panel { border-left:1px solid rgba(255,255,255,.08);padding:15px; }.map-list-head { height:48px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);color:#7f8794;font:650 9px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em; }.map-list-head small { padding:3px 6px;border-radius:6px;background:#191c21;color:#aab1bc; }.map-item-list { max-height:610px;overflow:auto;padding:7px; }.map-item { width:100%;min-height:60px;border:1px solid transparent;border-radius:11px;background:transparent;color:#a8afb9;display:grid;grid-template-columns:8px minmax(0,1fr) auto 14px;gap:9px;align-items:center;text-align:left;padding:8px 8px;cursor:pointer;transition:opacity .28s,transform .32s var(--ease-soft),background .22s,border-color .22s; }.map-item:hover { background:#15181d;color:#eef1f5;transform:translateX(2px); }.map-item.selected { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,#15181d),#15181d);border-color:color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.08));color:#fff; }.map-item.filtered-out { display:none; }.map-item-signal { width:5px;height:24px;border-radius:5px;background:#74808d; }.map-item-signal.high{background:#ff6d60}.map-item-signal.medium{background:#e2a640}.map-item-signal.low{background:#55aef1}.map-item-copy { min-width:0; }.map-item-copy strong,.map-item-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.map-item-copy strong { font-size:11px; }.map-item-copy small { margin-top:3px;color:#68717e;font-size:9px; }.map-item-risk { font:650 8px/1 ui-monospace,monospace;color:#6c7582; }.map-list-empty { padding:28px 14px;text-align:center;color:#656e7b;font-size:11px; }.map-stage-shell { position:relative;min-width:0;background:#08090c;overflow:hidden; }.workspace-map { position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#17191d,#07080a 70%); }.workspace-map-viewport { position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab; }.workspace-map-viewport.dragging { cursor:grabbing; }.workspace-map-world { position:absolute;left:0;top:0;will-change:left,top,width,height; }.workspace-map-world img { position:absolute;left:0;top:0;max-width:none;user-select:none;pointer-events:none;filter:saturate(.72) contrast(1.06) brightness(.82); }.workspace-marker-layer { position:absolute;left:0;top:0;pointer-events:none; }.workspace-marker { --marker-compensation:1; position:absolute;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border:0;background:transparent;padding:0;pointer-events:auto;cursor:pointer;transform:scale(var(--marker-compensation));transition:opacity .3s,filter .3s,transform .36s var(--ease-soft); }.workspace-marker .marker-core { position:absolute;inset:4px;border-radius:50%;display:grid;place-items:center;background:#eef1f5;border:2px solid rgba(5,7,10,.92);box-shadow:none; }.workspace-marker .marker-core i { width:4px;height:4px;border-radius:50%;background:var(--accent); }.workspace-marker .marker-halo { position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 72%,white 8%);opacity:.55;transform:scale(.75);transition:transform .35s var(--ease-soft),opacity .3s,box-shadow .3s; }.workspace-marker.marker-high .marker-core i { background:#ff5f57; }.workspace-marker.marker-high .marker-halo { border-color:#ff6a62; }.workspace-marker.marker-medium .marker-core i { background:#e7a941; }.workspace-marker.marker-medium .marker-halo { border-color:#e7a941; }.workspace-marker.marker-low .marker-core i { background:#57aef1; }.workspace-marker.marker-low .marker-halo { border-color:#57aef1; }.workspace-marker:hover { z-index:5;transform:scale(calc(var(--marker-compensation) * 1.18)); }.workspace-marker:hover .marker-halo { transform:scale(1.08);opacity:.95;box-shadow:none; }.workspace-marker.selected { z-index:7;transform:scale(calc(var(--marker-compensation) * 1.16)); }.workspace-marker.selected .marker-halo { transform:scale(1.3);opacity:1;box-shadow:none; }.workspace-marker.deemphasized { opacity:.22;filter:saturate(.25); }.workspace-marker.filtered-out { opacity:0;pointer-events:none;transform:scale(.35); }.map-stage-top { position:absolute;z-index:10;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;pointer-events:none; }.map-stage-top > * { pointer-events:auto; }.map-status { height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(10,12,15,.72);backdrop-filter:blur(10px);font:650 9px/1 ui-monospace,monospace;color:#a8b0bb;text-transform:uppercase;letter-spacing:.08em; }.map-status i { width:6px;height:6px;border-radius:50%;background:#39d79a; }.map-stage-top .icon-btn { background:rgba(10,12,15,.72);border-color:rgba(255,255,255,.09);color:#b5bdc8; }.map-zoom-control { position:absolute;z-index:10;right:12px;bottom:12px;display:flex;padding:3px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(10,12,15,.82);backdrop-filter:blur(10px); }.map-zoom-control button { height:31px;min-width:32px;border:0;background:transparent;color:#aab2bd;border-radius:8px;display:grid;place-items:center;cursor:pointer; }.map-zoom-control button:hover { background:#1b1e23;color:#fff; }.map-zoom-control #workspace-map-reset { min-width:54px;font:650 9px/1 ui-monospace,monospace; }.map-detail-empty { height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:17px;color:#7a838f;padding:22px; }.detail-orbit { width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 8%,#13161a),#101216);color:#aeb6c1;font-size:20px;box-shadow:0 0 0 11px rgba(255,255,255,.015),0 0 0 22px rgba(255,255,255,.008); }.map-detail-empty strong { color:#dce1e8;font-size:13px; }.map-detail-empty p { margin:5px 0 0;font-size:10px;line-height:1.6; }.map-detail-content { padding:4px; }.map-detail-kicker { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px; }.map-detail-content h3 { margin:0 0 10px;font-size:20px;letter-spacing:-.035em; }.map-detail-content > code { display:block;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#0b0d10;color:#adb5c0;font-size:9px;overflow-wrap:anywhere; }.map-detail-content dl { margin:17px 0;display:flex;flex-direction:column;gap:9px; }.map-detail-content dl div { padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.065); }.map-detail-content dt { color:#606a76;font:650 8px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em; }.map-detail-content dd { margin:5px 0 0;color:#c5cbd4;font-size:10px;overflow-wrap:anywhere; }.map-term-list { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px; }.map-term-list span { padding:5px 7px;border-radius:7px;background:#181b20;color:#8c95a1;font-size:8px; }.map-image-error::after { content:"Map image unavailable";position:absolute;inset:0;display:grid;place-items:center;color:#6f7782;font:650 10px/1 ui-monospace,monospace; }.map-workspace[data-view="list"] .map-stage-shell,.map-workspace[data-view="list"] .map-detail-panel { display:none; }.map-workspace[data-view="list"] .map-layout { grid-template-columns:1fr; }.map-workspace[data-view="list"] .map-item-list { max-height:640px; }.map-workspace[data-view="detail"] .map-list-panel,.map-workspace[data-view="detail"] .map-stage-shell { display:none; }.map-workspace[data-view="detail"] .map-layout { grid-template-columns:1fr; }.map-workspace[data-view="detail"] .map-detail-panel { min-height:560px;border-left:0;max-width:760px;width:100%;margin:auto; } /* License / billing */ .license-balance { min-height:210px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 46%,var(--surface-soft));display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:24px;padding:28px; }.license-orbit { width:78px;height:78px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface-strong));color:var(--accent);font-size:29px;box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 3%,transparent); }.license-balance > div:nth-child(2) > span { color:var(--text-3);font:650 10px/1 ui-monospace,monospace;letter-spacing:.1em; }.license-balance > div:nth-child(2) > strong { display:block;font-size:54px;letter-spacing:-.06em;line-height:1;margin:7px 0; }.license-balance p { margin:0;color:var(--text-2); }.license-balance dl { display:grid;grid-template-columns:repeat(2,100px);gap:8px;margin:0; }.license-balance dl div { padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft); }.license-balance dt { color:var(--text-3);font-size:9px; }.license-balance dd { margin:5px 0 0;font-size:18px;font-weight:700; }.license-activate { margin-top:14px;display:grid;grid-template-columns:1fr minmax(360px,1.3fr);align-items:center;gap:24px; }.license-key-form { display:flex;gap:8px; }.plan-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.plan-card { padding:20px; }.plan-top { display:flex;justify-content:space-between;align-items:center; }.plan-top > svg { color:var(--accent);font-size:20px; }.plan-card h3 { margin:22px 0 4px;font-size:20px;letter-spacing:-.035em; }.empty-license-store { grid-column:1/-1;display:flex;gap:15px;align-items:center; }.empty-license-store > svg { font-size:27px;color:var(--text-3); } /* Admin */ .admin-control-grid { display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:14px; }.admin-license-issuer,.admin-ip-control { min-height:330px; }.admin-control-grid .panel-head > svg { font-size:24px;color:var(--text-3); }.license-count-row { display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:8px;align-items:end; }.unlimited-button { height:68px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft);display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;color:var(--text-2);transition:.3s var(--ease-soft); }.unlimited-button > svg { font-size:22px; }.unlimited-button span,.unlimited-button strong,.unlimited-button small { display:block; }.unlimited-button small { color:var(--text-3);font-weight:500;margin-top:2px; }.unlimited-button:hover { transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line)); }.admin-license-issuer input#license-unlimited:checked + .unlimited-button { border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 6%,transparent); }.disabled-field { opacity:.45; }.admin-table-grid { display:grid;grid-template-columns:1.25fr .75fr;gap:14px; }.license-actions { min-width:310px; } /* Server cards */ .server-list-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.server-card { min-height:220px;display:flex;flex-direction:column; }.server-card-head { display:flex;justify-content:space-between;gap:12px; }.server-card h3 { margin:5px 0 0;font-size:18px; }.server-card-meta { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0; }.server-card-meta span { padding:9px;border-radius:10px;background:var(--surface-soft);color:var(--text-3);font-size:9px; }.server-card-meta strong { display:block;color:var(--text);margin-top:3px;font-size:11px; }.server-card > .btn { margin-top:auto; } /* Settings */ .settings-hero { position:relative;min-height:220px;display:flex;align-items:end;padding:24px 0; }.settings-hero h1 { max-width:760px; }.settings-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:14px; }.settings-card { min-height:320px; }.settings-card-top { display:flex;justify-content:space-between;gap:16px; }.accent-preview { width:58px;height:58px;border-radius:17px;background:var(--preview,var(--accent));box-shadow:0 10px 30px color-mix(in srgb,var(--preview,var(--accent)) 25%,transparent); }.custom-accent-row { display:grid;grid-template-columns:1fr 54px;align-items:center;gap:12px; }.custom-color-input { width:54px;height:44px;padding:4px; }.settings-save-row { display:flex;align-items:center;justify-content:space-between;margin-top:14px; }.theme-toggle-row { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px; }.theme-option { min-height:94px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);color:var(--text-2);display:flex;align-items:center;gap:12px;text-align:left;padding:14px;cursor:pointer;transition:.3s var(--ease-soft); }.theme-option:hover { transform:translateY(-2px);border-color:var(--line-strong); }.theme-option.selected { border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface)); }.theme-option-icon { font-size:24px; }.theme-option strong,.theme-option small { display:block; }.theme-option small { color:var(--text-3);margin-top:3px; }.preview-surface { margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,var(--surface-strong),var(--surface-soft)); }.preview-top,.preview-actions { display:flex;align-items:center;gap:8px; }.preview-chip { margin-left:auto;font:650 8px/1 ui-monospace,monospace;color:var(--text-3); }.preview-title { margin:40px 0 18px;font-size:22px;line-height:1.2;letter-spacing:-.04em; }.preview-bars { display:grid;gap:5px;margin-top:18px; }.preview-bars i { height:4px;border-radius:4px;background:var(--line); }.preview-bars i:nth-child(2){width:75%}.preview-bars i:nth-child(3){width:48%}.preview-dot { width:7px;height:7px;border-radius:50%;background:var(--accent); } /* Auth and public */ .auth-shell { min-height:calc(100vh - 145px);display:grid;place-items:center;padding:28px 0; }.auth-card { width:min(460px,100%);padding:28px;border:1px solid var(--line);border-radius:28px;background:var(--glass);backdrop-filter:blur(20px);box-shadow:var(--shadow-2),inset 0 1px rgba(255,255,255,.04); }.auth-brand { display:flex;align-items:center;gap:12px;margin-bottom:34px; }.auth-icon { width:44px;height:44px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface-strong); }.auth-brand span { font-weight:700; }.auth-card h1 { margin:0;font-size:36px;letter-spacing:-.05em; }.auth-card > p { margin:9px 0 23px; }.auth-links { display:flex;justify-content:space-between;margin-top:17px;color:var(--text-3);font-size:11px; }.auth-links a:hover { color:var(--text); }.home-shell { padding-top:16px; }.hero { min-height:660px;display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center; }.hero-content { padding:40px 0; }.hero h1 { max-width:900px;font-size:clamp(44px,6vw,82px); }.accent-arrow { color:var(--accent);display:inline-block; }.hero-copy { max-width:730px;color:var(--text-2);font-size:15px;margin:25px 0; }.hero-actions,.hero-foot { display:flex;gap:10px;flex-wrap:wrap; }.hero-foot { margin-top:30px;color:var(--text-3);font-size:10px;gap:18px; }.boundary-art { min-height:430px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,45%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 35%),linear-gradient(150deg,var(--surface),var(--surface-soft));padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:var(--shadow-2); }.boundary-heading,.boundary-footer { display:flex;justify-content:space-between;color:var(--text-3);font:650 9px/1 ui-monospace,monospace;letter-spacing:.1em; }.boundary-orbit { position:relative;width:270px;height:270px;margin:auto;display:grid;place-items:center; }.orbit-ring { position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:50%; }.orbit-ring.inner { inset:55px;border-style:dashed; }.boundary-core { width:74px;height:74px;border-radius:22px;display:grid;place-items:center;background:var(--surface-strong);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));box-shadow:0 0 45px color-mix(in srgb,var(--accent) 12%,transparent); }.orbit-node { position:absolute;font:650 9px/1 ui-monospace,monospace;color:var(--text-2); }.orbit-node.client{left:0;top:48%}.orbit-node.server{right:0;top:48%}.orbit-caption{position:absolute;bottom:25px;color:var(--text-3);font:650 8px/1 ui-monospace,monospace;letter-spacing:.1em}.feature-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.feature-card { min-height:190px; }.feature-card h3 { margin:26px 0 9px;font-size:18px; }.feature-card p { color:var(--text-2);font-size:12px; } /* Account / security */ .account-row { display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-top:1px solid var(--line); }.account-row span { color:var(--text-3); }.security-challenge,.security-trust,.server-own-row { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);margin-top:8px; }.security-challenge > div:first-child,.server-own-row > div { display:flex;flex-direction:column;gap:3px; }.security-challenge small,.security-trust small,.server-own-row small { color:var(--text-3);font-size:9px; }.challenge-code { font:700 15px/1 ui-monospace,monospace;letter-spacing:.08em; }.challenge-actions { display:flex;gap:6px; }.security-trust { display:block; }.server-own-list { display:flex;flex-direction:column;gap:7px; } /* Materials, crafting, inventory compatibility */ .material-tabs,.craft-tabs { display:flex;gap:4px;margin-bottom:12px; }.material-tab,.craft-tab,.item-filter { min-height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--text-2);padding:0 11px;cursor:pointer; }.material-tab.active,.craft-tab.active,.item-filter.active { color:var(--text);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }.material-panel,.craft-panel { display:none; }.material-panel.active,.craft-panel.active { display:block; }.material-add-grid { display:grid;grid-template-columns:1fr 180px auto;gap:8px;align-items:end; }.inventory-toolbar { display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px; }.item-filters { display:flex;gap:5px;flex-wrap:wrap; }.item-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px; }.item-card { min-height:240px;padding:12px;display:flex;flex-direction:column; }.item-image { height:112px;border-radius:12px;background:var(--surface-soft);display:grid;place-items:center;overflow:hidden;margin-bottom:11px; }.item-image img { width:100%;height:100%;object-fit:contain; }.item-image.image-error img { display:none; }.item-image-empty { color:var(--text-3);font-size:22px; }.item-label,.item-id,.item-weight { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.item-id { color:var(--text-3);font:600 9px/1.4 ui-monospace,monospace;margin-top:3px; }.item-weight { color:var(--text-2);font-size:10px;margin-top:5px; }.item-description { color:var(--text-3);font-size:9px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }.item-category { margin-top:auto;padding-top:9px;color:var(--text-3);font-size:9px; }.inventory-pagination { display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px; }.craft-breakdown-row { display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line); }.craft-breakdown-row small { display:block;color:var(--text-3); }.material-ok { color:var(--success); }.material-short { color:var(--danger); }.craft-availability { padding:10px;border-radius:10px;margin:8px 0; }.craft-availability.available { color:var(--success);background:color-mix(in srgb,var(--success) 6%,transparent); }.craft-availability.unavailable { color:var(--text-3);background:var(--surface-soft); } .offline-banner { position:fixed;z-index:500;left:50%;bottom:22px;transform:translateX(-50%);padding:10px 14px;border-radius:11px;background:#171a20;color:#f1f3f6;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-2);font-size:11px; } @media (max-width: 1320px) { .map-layout { grid-template-columns:235px minmax(380px,1fr) 260px; } .plan-grid { grid-template-columns:repeat(2,1fr); } .item-grid { grid-template-columns:repeat(4,1fr); } .server-list-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 1040px) { .nav-rail { width:70px; }.nav-rail:hover,.nav-rail:focus-within{width:215px}.rail-brand{padding:0 3px}.brand-core{width:44px;height:44px;flex-basis:44px}.nav-item{grid-template-columns:44px 1fr}.nav-item i{width:44px} :root { --rail-width:70px; } .main { width:calc(100% - var(--rail-width) - 65px);margin-left:calc(var(--rail-width) + 48px); } .command-bar { left:calc(var(--rail-width) + 34px); } .metric-deck { grid-template-columns:1fr 1fr; }.metric-card:first-child{grid-column:1/-1}.finding-list{grid-template-columns:1fr}.intelligence-grid-2{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.admin-control-grid,.admin-table-grid{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(3,1fr)} .map-layout { grid-template-columns:220px minmax(0,1fr); }.map-detail-panel { position:absolute;z-index:20;right:12px;top:75px;bottom:70px;width:280px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(16,18,22,.94);backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.4);transform:translateX(calc(100% + 30px));transition:transform .4s var(--ease-enter); }.map-workspace.has-selection .map-detail-panel { transform:translateX(0); }.map-detail-empty { display:none; } } @media (max-width: 820px) { :root { --command-height:56px; } .nav-rail { display:none; }.mobile-dock { position:fixed;z-index:90;left:12px;right:12px;bottom:12px;height:60px;padding:6px;display:flex;align-items:center;justify-content:space-around;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--glass-strong) 92%,transparent);backdrop-filter:blur(22px);box-shadow:var(--shadow-2); }.mobile-nav-item { width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--text-3);font-size:18px;transition:.25s; }.mobile-nav-item.active { color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }.mobile-nav-item:hover { transform:translateY(-2px);color:var(--text); } .command-bar,.public .command-bar { left:12px;right:12px;top:12px;height:56px;padding:0 10px 0 14px;border-radius:18px; }.command-kicker,.secure-chip { display:none; }.command-title strong { max-width:33vw; }.main,.public .main { width:calc(100% - 24px);margin:0 12px;padding:84px 0 94px; }.page-head,.hero-head { min-height:0;align-items:flex-start;flex-direction:column;margin-top:18px; }.page-head h1 { font-size:36px; }.page-head-actions { width:100%; }.page-head-actions .btn { flex:1; }.metric-deck{grid-template-columns:1fr}.metric-card:first-child{grid-column:auto}.feature-grid,.server-list-grid{grid-template-columns:1fr}.report-signal-strip{grid-template-columns:repeat(2,1fr)}.report-signal-strip article:nth-child(2){border-right:0}.report-signal-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}.upload-footer{flex-direction:column;align-items:stretch}.upload-footer .btn{width:100%}.dropzone{min-height:300px}.progress-header,.progress-meta{align-items:flex-start}.progress-meta{flex-direction:column}.console-line{grid-template-columns:65px 84px 1fr}.dump-toolbar{align-items:stretch;flex-direction:column}.dump-search{width:100%}.dump-card{grid-template-columns:48px minmax(0,1fr) auto;padding:13px}.dump-file-icon{width:48px;height:48px}.dump-meta span:nth-child(3){display:none}.license-balance{grid-template-columns:64px 1fr;padding:20px;gap:14px}.license-orbit{width:60px;height:60px}.license-balance dl{grid-column:1/-1;grid-template-columns:1fr 1fr}.license-activate{grid-template-columns:1fr}.license-key-form{flex-direction:column}.plan-grid{grid-template-columns:1fr}.license-count-row{grid-template-columns:1fr}.unlimited-button{height:58px}.settings-grid{grid-template-columns:1fr}.material-add-grid{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(2,1fr)}.inventory-toolbar{align-items:stretch;flex-direction:column}.hero{grid-template-columns:1fr;min-height:auto}.hero h1{font-size:49px}.boundary-art{min-height:360px}.home-shell .boundary-art{display:none} .map-toolbar{grid-template-columns:1fr auto}.map-risk-filters{grid-row:2;grid-column:1/-1;overflow:auto}.map-view-switch span{display:none}.map-layout{display:block;min-height:670px;position:relative}.map-stage-shell{height:520px}.map-list-panel{border-right:0;border-top:1px solid rgba(255,255,255,.08);height:150px}.map-list-head{height:38px}.map-item-list{height:112px;display:flex;overflow-x:auto;overflow-y:hidden}.map-item{min-width:220px;height:94px}.map-detail-panel{position:absolute;left:8px;right:8px;top:auto;bottom:8px;width:auto;height:260px;transform:translateY(calc(100% + 20px));border-radius:18px}.map-workspace.has-selection .map-detail-panel{transform:translateY(0)}.map-workspace[data-view="list"] .map-list-panel{height:670px}.map-workspace[data-view="list"] .map-item-list{height:615px;display:block}.map-workspace[data-view="list"] .map-item{min-width:0;height:auto}.map-workspace[data-view="detail"] .map-detail-panel{position:static;transform:none;height:670px;max-width:none;border:0;border-radius:0}.map-workspace[data-view="detail"] .map-detail-empty{display:flex}.map-workspace{min-height:735px} } @media (max-width: 520px) { .command-actions { gap:5px; }.language-button,.profile-button{width:34px;height:34px}.theme-toggle{width:57px}.theme-track b{width:24px}html[data-theme="dark"] .theme-track b{transform:translateX(27px)}.command-title strong{max-width:27vw;font-size:12px}.page-head h1{font-size:31px}.page-head p{font-size:12px}.metric-card{min-height:140px}.metric-card strong{font-size:38px}.report-tab{padding:0 10px}.report-tab svg{display:none}.report-signal-strip article{padding:12px}.finding-grid{grid-template-columns:1fr}.dump-card{grid-template-columns:42px minmax(0,1fr) auto;gap:10px}.dump-file-icon{width:42px;height:42px;border-radius:12px}.dump-title-line>span{display:none}.dump-meta{gap:8px}.dump-meta span:nth-child(2){display:none}.glass-modal{padding:22px 18px}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.modal-actions .btn{width:100%}.item-grid{grid-template-columns:1fr 1fr;gap:7px}.item-card{min-height:215px;padding:9px}.item-image{height:92px}.server-card-meta{grid-template-columns:1fr}.license-balance>div:nth-child(2)>strong{font-size:42px}.theme-toggle-row{grid-template-columns:1fr}.hero h1{font-size:40px}.hero-copy{font-size:13px}.map-toolbar{grid-template-columns:1fr auto}.map-filter{padding:0 8px}.map-stage-shell{height:450px}.map-layout{min-height:600px}.map-list-panel{height:150px}.map-detail-panel{height:245px}.map-workspace{min-height:665px} } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important; } .ambient-field i { animation:none !important; } .interactive-card:hover,.btn:hover,.nav-item:hover,.dump-file-picker:hover { transform:none; } } /* ========================================================================== v6.2.1 interaction + layout polish ========================================================================== */ :root { --ease-cinematic: cubic-bezier(.76,0,.24,1); } /* Theme changes have a deliberately slow-in / fast-middle / slow-out contour. */ html.theme-transitioning, html.theme-transitioning body, html.theme-transitioning .ambient-field, html.theme-transitioning .panel, html.theme-transitioning .command-bar, html.theme-transitioning .nav-rail, html.theme-transitioning .profile-menu, html.theme-transitioning .language-menu, html.theme-transitioning input, html.theme-transitioning select, html.theme-transitioning textarea, html.theme-transitioning button, html.theme-transitioning .interactive-card, html.theme-transitioning .theme-track, html.theme-transitioning .theme-track b { transition: background-color .68s var(--ease-cinematic), border-color .68s var(--ease-cinematic), color .62s var(--ease-cinematic), box-shadow .68s var(--ease-cinematic), background .68s var(--ease-cinematic) !important; } /* Rail: reveal text only after the shell has visibly started opening. */ .nav-rail { transition: width .68s var(--ease-cinematic), background-color .46s var(--ease-cinematic), border-color .46s var(--ease-cinematic); } .nav-rail:hover,.nav-rail:focus-within { width:242px; } .rail-brand > span:last-child, .nav-item .nav-label, .rail-footer span:last-child { opacity:0; transform:translateX(-11px); filter:blur(3px); transition:opacity .24s var(--ease-cinematic), transform .38s var(--ease-cinematic), filter .32s var(--ease-cinematic); } .nav-rail:hover .rail-brand > span:last-child, .nav-rail:focus-within .rail-brand > span:last-child, .nav-rail:hover .nav-item .nav-label, .nav-rail:focus-within .nav-item .nav-label, .nav-rail:hover .rail-footer span:last-child, .nav-rail:focus-within .rail-footer span:last-child { opacity:1; transform:translateX(0); filter:blur(0); transition-delay:.16s; } .rail-active-signal { left:0; right:auto; width:46px; transition:width .68s var(--ease-cinematic), background .46s var(--ease-cinematic), border-color .46s var(--ease-cinematic), box-shadow .46s var(--ease-cinematic); } .nav-rail:hover .rail-active-signal,.nav-rail:focus-within .rail-active-signal { width:100%; } /* Physical theme selector: track is visible in both themes, the knob glides horizontally. */ .theme-toggle { background:color-mix(in srgb,var(--surface-strong) 48%,var(--surface-soft)); transition:background .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic),transform .62s var(--ease-cinematic); } .theme-track { inset:3px; border:1px solid var(--line); background:color-mix(in srgb,var(--text) 5%,var(--surface-soft)); box-shadow:inset 0 1px 4px rgba(0,0,0,.13); transition:background .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic); } .theme-track b { top:2px; bottom:2px; left:2px; width:25px; border-radius:7px; background:#f5f6f8; border-color:rgba(0,0,0,.08); box-shadow:0 4px 12px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.9); transition:transform .68s var(--ease-cinematic),background-color .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic); } html[data-theme="dark"] .theme-track b { transform:translateX(27px); } html[data-theme="light"] .theme-track b { transform:translateX(0); } .theme-icon-stack svg { transition:transform .68s var(--ease-cinematic),opacity .44s var(--ease-cinematic),filter .5s var(--ease-cinematic); } html[data-theme="dark"] .theme-moon,html[data-theme="light"] .theme-sun { color:#13161b; } .theme-toggle.switching { transform:scale(.975); } /* Cinematic response for controls that stay on the current page. */ .cinematic-control:not(.workspace-marker) { --cinematic-lift:0px; transition:transform .62s var(--ease-cinematic),box-shadow .62s var(--ease-cinematic),border-color .54s var(--ease-cinematic),background-color .54s var(--ease-cinematic),color .54s var(--ease-cinematic),filter .62s var(--ease-cinematic) !important; } @media (hover:hover) and (pointer:fine) { .cinematic-control:not(.workspace-marker):not(:disabled):hover { transform:translateY(-2px); } } .cinematic-control:disabled { cursor:not-allowed; } /* Home: one centered statement, then the explanatory visual, then supporting cards. */ .home-shell { padding-top:34px; } .home-shell .hero { min-height:auto; display:flex; flex-direction:column; align-items:center; gap:42px; padding:70px 0 30px; text-align:center; } .home-shell .hero-content { width:min(1080px,100%); padding:0; display:flex; flex-direction:column; align-items:center; } .home-shell .hero h1 { max-width:1080px; margin-inline:auto; text-wrap:balance; } .home-shell .hero-copy { max-width:780px; margin:25px auto; } .home-shell .hero-actions,.home-shell .hero-foot { justify-content:center; } .home-shell .boundary-art { width:min(1040px,100%); min-height:390px; margin:0 auto; text-align:left; } .home-shell .feature-grid { margin-top:20px; } /* Account: identity information remains the first visual priority. */ .account-head { min-height:145px; align-items:center; } .account-head-signal { width:min(300px,32vw); height:86px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:1fr 1fr; align-items:center; gap:0 12px; padding:14px 16px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface-soft)); color:var(--text-3); } .account-head-signal > span { grid-row:1/-1;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 8%,transparent); } .account-head-signal > svg { grid-column:2;color:var(--text-2);font-size:20px; } .account-head-signal > b { grid-column:2;font:650 9px/1 ui-monospace,monospace;letter-spacing:.09em; } .account-head + .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:14px; } /* Settings: custom color only; preview gets a full-width row rather than leaving an empty grid cell. */ .settings-grid { grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); } .settings-preview-card { grid-column:1/-1; min-height:250px; } .custom-accent-only { margin-top:28px; } /* History rows are intentionally one large interactive hit target. */ .clickable-scan-row { cursor:pointer; transition:background-color .48s var(--ease-cinematic),transform .56s var(--ease-cinematic); outline:none; } .clickable-scan-row:hover,.clickable-scan-row:focus-visible { background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft)); } .clickable-scan-row:focus-visible { box-shadow:inset 3px 0 var(--accent); } /* Map controls + synchronized map type selector. */ .map-stage-top-left,.map-stage-actions { display:flex;align-items:center;gap:7px; } .map-type-switch { display:flex; gap:3px; padding:3px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(10,12,15,.76); backdrop-filter:blur(10px); } .map-type-switch button { height:28px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:#828b97; cursor:pointer; font:650 8px/1 ui-monospace,monospace; letter-spacing:.04em; transition:background .5s var(--ease-cinematic),color .5s var(--ease-cinematic),transform .54s var(--ease-cinematic),box-shadow .5s var(--ease-cinematic); } .map-type-switch button.active { color:#f3f5f7;background:#1d2025;box-shadow:inset 0 1px rgba(255,255,255,.06); } .map-type-switch button:hover { color:#fff; } .workspace-map-world img { transition:opacity .56s var(--ease-cinematic),filter .56s var(--ease-cinematic); } .workspace-marker .marker-core { box-shadow:none !important; } .workspace-marker:hover .marker-halo,.workspace-marker.selected .marker-halo { box-shadow:none !important; } /* Actual Fullscreen API, with a CSS fallback if a browser denies it. */ #map-workspace:fullscreen, #map-workspace.is-fullscreen, #map-workspace.pseudo-fullscreen { width:100vw; height:100vh; min-height:100vh; max-width:none; margin:0; border-radius:0; background:#0b0c0f; } #map-workspace:fullscreen .map-layout, #map-workspace.is-fullscreen .map-layout, #map-workspace.pseudo-fullscreen .map-layout { height:calc(100vh - 62px); min-height:0; } #map-workspace:fullscreen .map-stage-shell, #map-workspace.is-fullscreen .map-stage-shell, #map-workspace.pseudo-fullscreen .map-stage-shell { min-height:0; } #map-workspace.pseudo-fullscreen { position:fixed;z-index:9999;inset:0; } @media (max-width:1040px) { .nav-rail:hover,.nav-rail:focus-within{width:224px} .rail-active-signal{width:44px} } @media (max-width:820px) { .home-shell .hero { padding:42px 0 18px; gap:28px; } .home-shell .boundary-art { display:flex; min-height:320px; } .home-shell .boundary-orbit { width:230px;height:230px; } .account-head-signal { width:100%;max-width:360px; } .account-head + .feature-grid { grid-template-columns:1fr; } .settings-grid { grid-template-columns:1fr; } .settings-preview-card { grid-column:auto; } .map-stage-top { gap:8px;align-items:flex-start; } .map-stage-top-left { align-items:flex-start;flex-direction:column; } .map-type-switch { max-width:calc(100vw - 150px);overflow:auto; } } @media (max-width:520px) { .theme-track b { width:23px; } html[data-theme="dark"] .theme-track b { transform:translateX(25px); } .home-shell .hero h1 { font-size:39px; } .home-shell .boundary-art { min-height:285px;padding:14px; } .home-shell .boundary-orbit { width:205px;height:205px; } .map-status { display:none; } .map-type-switch button { padding:0 7px; } } @media (prefers-reduced-motion:reduce) { .nav-rail,.nav-item .nav-label,.rail-brand > span:last-child,.rail-footer span:last-child,.rail-active-signal,.theme-toggle,.theme-track,.theme-track b,.theme-icon-stack svg,.cinematic-control,.workspace-map-world img { transition-duration:.01ms !important; } } /* ===== v6.2.2 interaction/layout correction pass ===== */ :root{ --ease-cinematic:cubic-bezier(.76,0,.24,1); --rail-open:238px; } /* Theme/accent changes use one consistent visual timeline. */ html.theme-transitioning .ambient-field,html.accent-transitioning .ambient-field, html.theme-transitioning .panel,html.accent-transitioning .panel, html.theme-transitioning .interactive-card,html.accent-transitioning .interactive-card{ transition-property:background-color,border-color,color,box-shadow,fill,stroke !important; } /* Command rail: icon coordinates never move; only the shell and labels reveal. */ .nav-rail{width:76px;padding:10px;transition:width .62s var(--ease-cinematic),background-color .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} .nav-rail:hover,.nav-rail:focus-within{width:var(--rail-open)} .rail-brand{padding:0;gap:12px} .brand-core{width:54px;height:46px;flex:0 0 54px;border-radius:15px} .rail-brand>span:last-child,.nav-item .nav-label,.rail-footer span:last-child{opacity:0;filter:blur(5px);transform:translateX(-10px);pointer-events:none} .rail-brand>span:last-child{transition:opacity .38s .16s var(--ease-cinematic),transform .52s .12s var(--ease-cinematic),filter .46s .12s var(--ease-cinematic)} .nav-item .nav-label{transition:opacity .40s .17s var(--ease-cinematic),transform .56s .12s var(--ease-cinematic),filter .50s .12s var(--ease-cinematic);font-weight:600} .rail-footer span:last-child{transition:opacity .36s .18s var(--ease-cinematic),transform .50s .14s var(--ease-cinematic),filter .44s .14s var(--ease-cinematic)} .nav-rail:hover .rail-brand>span:last-child,.nav-rail:focus-within .rail-brand>span:last-child, .nav-rail:hover .nav-item .nav-label,.nav-rail:focus-within .nav-item .nav-label, .nav-rail:hover .rail-footer span:last-child,.nav-rail:focus-within .rail-footer span:last-child{opacity:1;filter:blur(0);transform:translateX(0);pointer-events:auto} .rail-links{margin-top:16px} .nav-item{height:48px;display:grid;grid-template-columns:54px minmax(0,1fr);padding:0;overflow:hidden;transform:none} .nav-item i,.nav-item>svg{width:54px;min-width:54px;height:48px;display:grid;place-items:center;justify-self:start;margin:0} .nav-item:hover,.nav-item:focus-visible{transform:none} .rail-active-signal{left:0;right:auto;width:54px;height:48px;border-radius:14px;transition:width .58s .04s var(--ease-cinematic),transform .46s var(--ease-cinematic),height .46s var(--ease-cinematic),background-color .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} .nav-rail:hover .rail-active-signal,.nav-rail:focus-within .rail-active-signal{width:calc(100% - 0px)} .rail-footer{left:20px;right:12px} /* Reversed physical theme selector: light knob sits on moon/right; dark on sun/left. */ .theme-toggle{transition:background-color .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} .theme-track b{transition:transform .62s var(--ease-cinematic),background-color .68s var(--ease-cinematic),border-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} html[data-theme="dark"] .theme-track b{transform:translateX(0)} html[data-theme="light"] .theme-track b{transform:translateX(27px)} .theme-icon-stack svg{transition:transform .58s var(--ease-cinematic),opacity .42s var(--ease-cinematic),filter .46s var(--ease-cinematic),color .68s var(--ease-cinematic)} /* Accent presets restored while keeping custom color. */ .accent-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:24px 0 12px} .accent-swatch{height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .5s var(--ease-cinematic),border-color .68s var(--ease-cinematic),background-color .68s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} .accent-swatch::before{content:"";width:18px;height:18px;border-radius:7px;background:var(--swatch);box-shadow:0 0 0 4px color-mix(in srgb,var(--swatch) 14%,transparent);transition:transform .5s var(--ease-cinematic),box-shadow .68s var(--ease-cinematic)} .accent-swatch:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--swatch) 45%,var(--line))} .accent-swatch.active{border-color:color-mix(in srgb,var(--swatch) 58%,var(--line));background:color-mix(in srgb,var(--swatch) 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--swatch) 15%,transparent)} .accent-swatch.active::before{transform:scale(1.12)} /* Map "fullscreen" is intentionally a large modal workspace, not browser fullscreen. */ .map-modal-backdrop{position:fixed;z-index:990;inset:0;background:rgba(2,4,7,.64);backdrop-filter:blur(16px) saturate(80%);opacity:0;transition:opacity .42s var(--ease-cinematic)} .map-modal-backdrop.open{opacity:1} #map-workspace.map-modal-open{position:fixed;z-index:1000;left:3vw;right:3vw;top:4vh;bottom:4vh;width:auto;height:auto;max-width:none;min-height:0;margin:0;border:1px solid var(--line-strong);border-radius:28px;background:var(--bg-elevated);box-shadow:0 45px 120px rgba(0,0,0,.48);overflow:hidden;animation:mapModalIn .58s var(--ease-cinematic) both} #map-workspace.map-modal-open .map-layout{height:calc(92vh - 62px);min-height:0} #map-workspace.map-modal-open .map-stage-shell{min-height:0} body.map-modal-active{overflow:hidden} @keyframes mapModalIn{from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}} /* Recipes: stronger hierarchy and cleaner ingredient scanning. */ #recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .recipe-card{padding:0;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,var(--surface)),var(--surface));} .recipe-header{padding:22px 22px 18px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%)} .recipe-header h2{margin:7px 0 3px;font-size:22px;letter-spacing:-.035em} .recipe-id{font:600 10px/1.4 ui-monospace,monospace;color:var(--text-3)} .recipe-status{flex:0 0 auto;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));font:650 9px/1 ui-monospace,monospace;color:var(--text-2)} .recipe-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)} .recipe-facts>div{min-width:0;padding:14px 16px;background:var(--surface-strong)} .recipe-facts span{display:block;color:var(--text-3);font-size:9px;margin-bottom:5px}.recipe-facts strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} .recipe-ingredients{padding:18px 20px 20px}.recipe-ingredient-list{margin-top:10px;display:grid;gap:7px} .recipe-ingredient{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)} .recipe-ingredient strong{font-size:12px}.recipe-ingredient small{display:block;margin-top:2px;color:var(--text-3);font:550 9px/1.3 ui-monospace,monospace}.recipe-ingredient-meta{white-space:nowrap;color:var(--text-2);font-size:10px} .recipe-source{padding:11px 20px;border-top:1px solid var(--line);color:var(--text-3);font:550 9px/1.4 ui-monospace,monospace;background:var(--surface-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Inventory: authoritative four-column desktop grid + strict square icons. */ .inventory-shell{padding:18px}.inventory-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch} .inventory-grid .item-card{min-width:0;min-height:290px;padding:12px;display:flex;flex-direction:column;border-radius:18px} .inventory-grid .item-image{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;background:var(--surface-soft);display:grid;place-items:center;overflow:hidden;margin-bottom:12px;flex:0 0 auto} .inventory-grid .item-image img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;object-position:center;max-width:100%;max-height:100%} .inventory-grid .item-image.image-error img{display:none}.inventory-grid .item-card-top{min-width:0;display:flex;flex-direction:column}.inventory-grid .item-label{font-size:13px}.inventory-grid .item-category{margin-top:auto} .inventory-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px} @media(max-width:1050px){.inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#recipe-grid{grid-template-columns:1fr}.accent-presets{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#map-workspace.map-modal-open{left:10px;right:10px;top:12px;bottom:12px;border-radius:22px}.accent-presets{grid-template-columns:repeat(3,1fr)}} @media(max-width:430px){.inventory-grid{grid-template-columns:1fr 1fr;gap:8px}.inventory-shell{padding:10px}.inventory-grid .item-card{min-height:230px;padding:9px}.recipe-facts{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){html[data-theme="dark"] .theme-track b{transform:translateX(0)}html[data-theme="light"] .theme-track b{transform:translateX(25px)}} /* Lucide replaces with SVG; keep the actual glyph centered in the fixed icon column. */ .nav-item>svg{grid-column:1;width:19px!important;height:19px!important;min-width:19px!important;justify-self:center;align-self:center;margin:0!important} html.theme-transitioning{transition:--bg .68s var(--ease-cinematic),--bg-elevated .68s var(--ease-cinematic),--surface .68s var(--ease-cinematic),--surface-strong .68s var(--ease-cinematic),--surface-hover .68s var(--ease-cinematic),--surface-soft .68s var(--ease-cinematic),--text .68s var(--ease-cinematic),--text-2 .68s var(--ease-cinematic),--text-3 .68s var(--ease-cinematic),--line .68s var(--ease-cinematic),--line-strong .68s var(--ease-cinematic),--glass .68s var(--ease-cinematic),--glass-strong .68s var(--ease-cinematic),--input .68s var(--ease-cinematic),--grid .68s var(--ease-cinematic),--accent-ink .68s var(--ease-cinematic),--danger .68s var(--ease-cinematic),--warning .68s var(--ease-cinematic),--success .68s var(--ease-cinematic),--blue .68s var(--ease-cinematic);} html.accent-transitioning{transition:--accent .76s var(--ease-cinematic)!important} /* ========================================================================== v6.2.3 unified motion system + fixed-coordinate command rail ========================================================================== */ :root{ --motion-micro:180ms; --motion-control:340ms; --motion-panel:480ms; --motion-rail:640ms; --motion-theme:720ms; --rail-closed:76px; --rail-open:244px; --rail-icon-column:54px; } /* Progressive enhancement for the multi-page app: modern browsers blend the old/new page snapshots while the persistent chrome keeps its identity. */ @view-transition{navigation:auto} .nav-rail{view-transition-name:ee-nav-rail} .command-bar{view-transition-name:ee-command-bar} ::view-transition-old(root){animation:eePageOut .22s var(--ease-exit) both} ::view-transition-new(root){animation:eePageIn .42s var(--ease-enter) both} ::view-transition-old(ee-nav-rail),::view-transition-new(ee-nav-rail), ::view-transition-old(ee-command-bar),::view-transition-new(ee-command-bar){animation-duration:.34s;animation-timing-function:var(--ease-soft)} @keyframes eePageOut{to{opacity:.25;filter:blur(4px);transform:translateY(-3px)}} @keyframes eePageIn{from{opacity:.2;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}} /* The rail itself owns the opening width. Hover/focus no longer directly changes geometry; JS adds .is-open so entrance/exit staging is deterministic. */ .nav-rail{ width:var(--rail-closed)!important; padding:10px!important; overflow:hidden; transition: width var(--motion-rail) var(--ease-cinematic), background-color var(--motion-theme) var(--ease-cinematic), border-color var(--motion-theme) var(--ease-cinematic), box-shadow var(--motion-theme) var(--ease-cinematic)!important; will-change:width; } .nav-rail:hover,.nav-rail:focus-within{width:var(--rail-closed)!important} .nav-rail.is-open{width:var(--rail-open)!important} .rail-brand{ width:100%;height:54px;padding:0!important;gap:0!important; display:grid!important;grid-template-columns:var(--rail-icon-column) minmax(0,1fr);align-items:center; } .brand-core{ grid-column:1;width:var(--rail-icon-column)!important;height:46px!important;min-width:var(--rail-icon-column); display:grid;place-items:center;margin:0!important; } .rail-brand-label{grid-column:2;padding-left:12px;min-width:0} .rail-links{position:relative;width:100%;margin-top:16px!important} .nav-item{ width:100%;height:48px;padding:0!important;margin:0; display:grid!important;grid-template-columns:var(--rail-icon-column) minmax(0,1fr)!important;align-items:center; overflow:hidden;transform:none!important; } .nav-icon{ grid-column:1;width:var(--rail-icon-column);height:48px;min-width:var(--rail-icon-column); display:grid;place-items:center;justify-self:start;position:relative;z-index:2; } .nav-icon>i,.nav-icon>svg{ width:19px!important;height:19px!important;min-width:19px!important;margin:0!important; display:block;transform-origin:center; transition:transform var(--motion-control) var(--ease-soft),color var(--motion-control) var(--ease-soft); } .nav-label{ grid-column:2;min-width:0;padding-left:12px;overflow:hidden;text-overflow:ellipsis; opacity:0;filter:blur(5px);transform:translateX(-12px);pointer-events:none; font-weight:600; transition:opacity .32s .10s var(--ease-enter),transform .46s .08s var(--ease-enter),filter .40s .08s var(--ease-enter)!important; } .rail-brand-label,.rail-footer-label{ opacity:0;filter:blur(5px);transform:translateX(-12px);pointer-events:none; transition:opacity .32s .10s var(--ease-enter),transform .46s .08s var(--ease-enter),filter .40s .08s var(--ease-enter)!important; } .nav-rail.is-open .nav-label,.nav-rail.is-open .rail-brand-label,.nav-rail.is-open .rail-footer-label{ opacity:1;filter:blur(0);transform:translateX(0);pointer-events:auto; } .nav-item:hover .nav-icon>svg,.nav-item:focus-visible .nav-icon>svg{transform:translateY(-1px) rotate(-2deg)} .rail-active-signal{ left:0!important;right:auto!important;top:0;width:var(--rail-icon-column);height:48px; border-radius:14px;pointer-events:none;will-change:transform,width; transition: width .56s .04s var(--ease-cinematic), background-color var(--motion-theme) var(--ease-cinematic), border-color var(--motion-theme) var(--ease-cinematic), box-shadow var(--motion-theme) var(--ease-cinematic)!important; } .nav-rail.is-open .rail-active-signal{width:100%} .rail-footer{left:20px!important;right:12px!important} .rail-footer-label{padding-left:0;min-width:0} /* Shared timing policy: state changes stay smooth without forcing expensive layout properties into every hover. */ :where(.btn,.icon-btn,.theme-toggle,.theme-option,.accent-swatch,.map-filter,.map-view-button,.report-tab,.item-filter,.interactive-card){ transition-timing-function:var(--ease-soft); } @media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root), ::view-transition-old(ee-nav-rail),::view-transition-new(ee-nav-rail), ::view-transition-old(ee-command-bar),::view-transition-new(ee-command-bar){animation-duration:.01ms!important} .nav-rail,.nav-label,.rail-brand-label,.rail-footer-label,.rail-active-signal{transition-duration:.01ms!important} } /* Keep legacy :hover reveal rules from racing the staged Motion sequence. */ .nav-rail.motion-driven:hover .nav-label, .nav-rail.motion-driven:focus-within .nav-label, .nav-rail.motion-driven:hover .rail-brand-label, .nav-rail.motion-driven:focus-within .rail-brand-label, .nav-rail.motion-driven:hover .rail-footer-label, .nav-rail.motion-driven:focus-within .rail-footer-label, .nav-rail.motion-driven.is-open .nav-label, .nav-rail.motion-driven.is-open .rail-brand-label, .nav-rail.motion-driven.is-open .rail-footer-label{ opacity:0;filter:blur(5px);transform:translateX(-12px);pointer-events:none;transition:none!important; } .nav-rail:not(.motion-driven).is-open .nav-label, .nav-rail:not(.motion-driven).is-open .rail-brand-label, .nav-rail:not(.motion-driven).is-open .rail-footer-label{ opacity:1;filter:blur(0);transform:translateX(0);pointer-events:auto; }