/* ════════════════════════════════════════════════════════════════ AURORA GLASS — design tokens Dark is the default; [data-theme="light"] overrides the same vars, so every existing page inherits the new palette automatically. ════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ---- Brand (raw) ---- */ --brand-coral: #FF6B5C; --brand-coral-strong: #D24A38; /* AA: white text on this ≥4.5:1 */ --brand-sky: #3B9EFF; --brand-sky-strong: #1668D6; /* AA: text on white ≥4.5:1 */ /* ---- Surfaces ---- */ --color-bg-primary: #FAFAFC; --color-bg-secondary: #FFFFFF; --color-bg-tertiary: #F1F3F8; --color-bg-sunken: #EEF1F7; --color-bg-inverse: #1F2433; --color-surface-overlay: rgba(20, 24, 38, 0.45); /* ---- Text ---- */ --color-text-primary: #1F2433; --color-text-secondary: #5A6275; --color-text-tertiary: #8A91A6; --color-text-inverse: #FFFFFF; --color-text-link: var(--brand-sky-strong); /* ---- Borders ---- */ --color-border-primary: #E2E6F0; --color-border-secondary: #EDEFF6; --color-border-strong: #CBD2E2; --color-border-focus: var(--brand-sky-strong); /* ---- Accent / actions ---- */ --color-accent-primary: var(--brand-coral); --color-accent-primary-hover: #FF8175; --color-accent-primary-active: #F25445; --color-accent-strong: var(--brand-coral-strong); --color-on-accent: #2A1714; /* dark ink on coral (~5.5:1) */ --color-accent-soft: #FFEDEA; --color-accent-soft-border: #FFD7D1; --color-accent-secondary: var(--brand-sky); --color-accent-secondary-strong: var(--brand-sky-strong); --color-accent-secondary-soft: #E7F1FF; --color-on-accent-secondary: #08203B; /* ---- Status ---- */ --color-status-success: #1E8E54; --color-status-success-soft: #E3F6EC; --color-status-warning: #B26A00; --color-status-warning-soft: #FFF1D6; --color-status-error: #D2362E; --color-status-error-soft: #FCE6E5; --color-status-info: var(--brand-sky-strong); --color-status-info-soft: #E7F1FF; /* ---- Domain: troop colors (light, text-safe) ---- */ --troop-archer: #1E78C8; --troop-footman: #1E8E54; --troop-cavalry: #B26A00; --troop-archer-soft: #E4F0FB; --troop-footman-soft: #E3F6EC; --troop-cavalry-soft: #FFF1D6; /* ---- Spacing (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Typography ---- */ --font-family-body: "Nunito Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-display: "Nunito", "Nunito Sans", -apple-system, "Segoe UI", sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3rem; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-semibold: 700; --font-weight-bold: 800; --line-height-tight: 1.2; --line-height-normal: 1.55; --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ---- Layout ---- */ --max-width-content: 72ch; --max-width-wide: 1100px; --max-width-page: 1320px; --size-touch-target: 2.75rem; --sidebar-width: 264px; --header-height: 64px; --bottombar-height: 64px; /* Consolidated radius scale: everything is 16px, large containers 24px, pills stay round. */ --border-radius-sm: 16px; --border-radius-md: 16px; --border-radius-lg: 16px; --border-radius-xl: 24px; --border-radius-full: 999px; /* ---- Shadows (soft, layered — no glass/blur) ---- */ --shadow-sm: 0 1px 2px rgba(28, 33, 51, 0.06), 0 1px 3px rgba(28, 33, 51, 0.05); --shadow-md: 0 2px 6px rgba(28, 33, 51, 0.07), 0 6px 16px -6px rgba(28, 33, 51, 0.10); --shadow-lg: 0 8px 24px -8px rgba(28, 33, 51, 0.14), 0 16px 48px -16px rgba(28, 33, 51, 0.16); --shadow-focus: 0 0 0 3px rgba(22, 104, 214, 0.35); /* ---- Motion ---- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ════════ LEGACY ALIASES — old names → new tokens (all 57 pages inherit) ════════ */ --bg: var(--color-bg-primary); --bg2: var(--color-bg-secondary); --bg3: var(--color-bg-tertiary); --bg4: var(--color-bg-sunken); --border: var(--color-border-primary); --border2: var(--color-border-strong); --text: var(--color-text-primary); --text2: var(--color-text-secondary); --text3: var(--color-text-tertiary); --accent: var(--color-accent-primary); --accent-2: var(--color-accent-secondary); --accent-deep: var(--color-accent-strong); --accent-grad: linear-gradient(135deg, #FF6B5C 0%, #3B9EFF 100%); --accent-soft: var(--color-accent-soft); --glow: var(--shadow-focus); --gold: var(--color-accent-primary); --archer: var(--troop-archer); --footman: var(--troop-footman); --cavalry: var(--troop-cavalry); --red: var(--color-status-error); --teal: var(--color-accent-secondary-strong); --purple: #6A4DE0; --purple-soft: #EFEBFC; --surface-inset: var(--color-bg-tertiary); --ok-text: var(--color-status-success); --ok-bg: var(--color-status-success-soft); --ok-border: #BFE6CE; --bad-text: var(--color-status-error); --bad-bg: var(--color-status-error-soft); --bad-border: #F4C7C4; --warn-bg: var(--color-status-warning-soft); --warn-border: #ECD49B; /* Glass → solid card surfaces + soft shadow (blur removed) */ --glass-bg: var(--color-bg-secondary); --glass-bg-2: var(--color-bg-tertiary); --glass-border: var(--color-border-primary); --glass-blur: 0px; --shadow: var(--shadow-md); /* Animated aurora mesh → neutralized */ --mesh-1: transparent; --mesh-2: transparent; --mesh-3: transparent; --mesh-base: var(--color-bg-primary); --radius: var(--border-radius-lg); --radius-sm: var(--border-radius-sm); --radius-lg: var(--border-radius-xl); --font-body: var(--font-family-body); --font-display: var(--font-family-display); --font-mono: var(--font-family-mono); } /* DARK — opt-in via toggle (night play). Warm-cool dark, not pure black. */ [data-theme="dark"] { color-scheme: dark; --color-bg-primary: #12151D; --color-bg-secondary: #1A1F2B; --color-bg-tertiary: #232938; --color-bg-sunken: #0E1118; --color-bg-inverse: #EDEFF5; --color-surface-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #ECEEF5; --color-text-secondary: #AAB2C5; --color-text-tertiary: #7A8198; --color-text-inverse: #1F2433; --color-text-link: #6FB6FF; --color-border-primary: #2C3344; --color-border-secondary: #232938; --color-border-strong: #3A4358; --color-border-focus: #6FB6FF; --color-accent-primary: #FF7A6B; --color-accent-primary-hover: #FF8E80; --color-accent-primary-active: #F2685A; --color-accent-strong: #FF7A6B; --color-on-accent: #2A1714; --color-accent-soft: rgba(255, 122, 107, 0.16); --color-accent-soft-border: rgba(255, 122, 107, 0.34); --color-accent-secondary: #5BAAFF; --color-accent-secondary-strong: #6FB6FF; --color-accent-secondary-soft: rgba(91, 170, 255, 0.16); --color-on-accent-secondary: #08203B; --color-status-success: #46C281; --color-status-success-soft: rgba(70, 194, 129, 0.16); --color-status-warning: #E0A53A; --color-status-warning-soft: rgba(224, 165, 58, 0.16); --color-status-error: #FF7A72; --color-status-error-soft: rgba(255, 122, 114, 0.16); --color-status-info: #6FB6FF; --color-status-info-soft: rgba(111, 182, 255, 0.16); --troop-archer: #5BAAFF; --troop-footman: #46C281; --troop-cavalry: #E0A53A; --troop-archer-soft: rgba(91, 170, 255, 0.16); --troop-footman-soft: rgba(70, 194, 129, 0.16); --troop-cavalry-soft: rgba(224, 165, 58, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 24px -10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 36px -10px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(111, 182, 255, 0.45); /* Legacy aliases needing explicit dark values */ --accent-grad: linear-gradient(135deg, #FF7A6B 0%, #5BAAFF 100%); --glow: var(--shadow-focus); --shadow: var(--shadow-md); --ok-border: rgba(70, 194, 129, 0.4); --bad-border: rgba(255, 122, 114, 0.4); --warn-border: rgba(224, 165, 58, 0.4); --purple: #9B86FF; --purple-soft: rgba(155, 134, 255, 0.16); --mesh-base: var(--color-bg-primary); } /* ── Spec Planner canvas (SVG nodes/links) — theme-adaptive ── */ :root { --sp-grid: #E6E9F2; --sp-link: #C2CCDE; --sp-link-active: #3B9EFF; --sp-link-dim: #EDEFF6; --sp-sel-ring: #1F2433; --sp-hub-fill: #FFF1EF; --sp-locked-fill: #F1F3F8; --sp-locked-stroke: #CBD2E2; --sp-locked-text: #9097AB; --sp-avail-fill: #FFFFFF; --sp-avail-stroke: #3B9EFF; --sp-avail-text: #1668D6; --sp-partial-fill: #E7F1FF; --sp-partial-stroke: #3B9EFF; --sp-partial-text: #1668D6; --sp-done-fill: #1668D6; --sp-done-stroke: #0F4FA8; --sp-done-text: #FFFFFF; --sp-dot-on: #1668D6; --sp-dot-on-stroke: #0F4FA8; --sp-dot-off: #E2E6F0; --sp-dot-off-stroke: #CBD2E2; --sp-hubdot-on: #E0A53A; --sp-hubdot-on-stroke: #B26A00; --sp-hubdot-off: #EEE7D6; --sp-hubdot-off-stroke:#D9C9A0; } [data-theme="dark"] { --sp-grid: #1A2230; --sp-link: #1A4060; --sp-link-active: #0090C0; --sp-link-dim: #141E28; --sp-sel-ring: #FFFFFF; --sp-hub-fill: #1A3040; --sp-locked-fill: #131C28; --sp-locked-stroke: #2A3848; --sp-locked-text: #6A7890; --sp-avail-fill: #152D4A; --sp-avail-stroke: #3A7AB4; --sp-avail-text: #5AB4FF; --sp-partial-fill: #0D4A80; --sp-partial-stroke: #3A9AD0; --sp-partial-text: #80D0FF; --sp-done-fill: #005590; --sp-done-stroke: #00C8FF; --sp-done-text: #D6F4FF; --sp-dot-on: #00C8FF; --sp-dot-on-stroke: #00E8FF; --sp-dot-off: #1A2A3A; --sp-dot-off-stroke: #2A3848; --sp-hubdot-on: #D4A843; --sp-hubdot-on-stroke: #F0C060; --sp-hubdot-off: #1E2A18; --sp-hubdot-off-stroke:#2E3A28; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--color-bg-primary); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Calm static page background (animated aurora mesh removed in the friendly overhaul). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--color-bg-primary); } a { color: var(--color-text-link); text-decoration: none; transition: color .15s; } a:hover { color: var(--color-accent-strong); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); margin: 0 0 0.5em 0; letter-spacing: -0.01em; } /* Mono numerics helper */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Reusable glass surface */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); } /* Refined scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--border-radius-lg); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* ════════════════════════════════════════════════════════════════ App shell — glass header + glass sidebar ════════════════════════════════════════════════════════════════ */ .roc-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; /* the sidebar + main scroll internally, so no body scrollbar runs past the header */ } .roc-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); padding: 0 var(--space-5); /* Left inset = sidebar margin + sidebar padding, so the brand's hover pill starts on the same line as the nav-link pills below it. The brand then carries the same 12px inner padding as a nav-link, so the ◈ also lines up with the menu icon rail. */ padding-left: calc(var(--space-4) + var(--space-3)); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); box-shadow: var(--shadow-sm); } .roc-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-md); letter-spacing: .01em; color: var(--color-text-primary); text-decoration: none; padding: 5px 10px 5px var(--space-3); border-radius: var(--border-radius-md); transition: background-color .15s; } .roc-brand:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-brand-mark { width: 36px; height: 36px; border-radius: var(--border-radius-md); display: grid; place-items: center; background: var(--color-accent-primary); color: var(--color-on-accent); font-size: 17px; box-shadow: var(--shadow-sm); } .roc-brand-name { color: var(--color-text-primary); } .roc-header-spacer { flex: 1; } .roc-header-actions { display: flex; align-items: center; gap: var(--space-3); } .roc-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; gap: 3px; } .roc-user-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-user-role { font-size: 11px; font-weight: 700; line-height: 1; color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); padding: 3px 9px; border-radius: var(--border-radius-full); text-transform: uppercase; letter-spacing: .06em; } .roc-icon-btn { width: 44px; height: 44px; border-radius: var(--border-radius-md); display: grid; place-items: center; cursor: pointer; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-icon-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .roc-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-icon-btn svg { width: 20px; height: 20px; } /* ── Notification bell + dropdown ── */ .roc-bell { position: relative; display: inline-flex; } .roc-bell-btn { position: relative; } .roc-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; background: var(--color-accent-primary-active); border: 2px solid var(--color-bg-primary); border-radius: var(--border-radius-full); } .roc-bell-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; } .roc-bell-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 340px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .roc-bell-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); font-weight: 800; color: var(--color-text-primary); } .roc-bell-mark { background: none; border: none; cursor: pointer; color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); } .roc-bell-list { max-height: 360px; overflow-y: auto; } .roc-bell-empty { padding: var(--space-5); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); } .roc-bell-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-bell-item:hover { background: var(--color-bg-tertiary); } .roc-bell-item.is-unread { background: var(--color-accent-secondary-soft); } .roc-bell-item.is-unread:hover { background: var(--color-accent-secondary-soft); } .roc-bell-item-title { font-weight: 700; color: var(--color-text-primary); font-size: var(--font-size-sm); } .roc-bell-item-body { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-bell-item-time { color: var(--color-text-tertiary); font-size: 11px; } .roc-bell-all { display: block; text-align: center; padding: var(--space-3); color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); text-decoration: none; } .roc-bell-all:hover { background: var(--color-bg-tertiary); } /* ── User menu (avatar + dropdown) ── */ .roc-usermenu { position: relative; display: inline-flex; } .roc-usermenu-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px 10px 4px 4px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-full); cursor: pointer; color: var(--color-text-primary); transition: background .15s, border-color .15s, box-shadow .15s; } .roc-usermenu-trigger:hover { background: var(--color-bg-tertiary); } .roc-usermenu-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-primary); color: var(--color-on-accent); font-weight: 800; font-size: var(--font-size-base); line-height: 1; } .roc-avatar-lg { width: 44px; height: 44px; font-size: var(--font-size-md); } .roc-usermenu-name { font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text-primary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roc-usermenu-caret { width: 16px; height: 16px; color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-usermenu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 250px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); } .roc-usermenu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-secondary); margin-bottom: var(--space-2); } .roc-usermenu-id { display: flex; flex-direction: column; min-width: 0; } .roc-usermenu-id .roc-usermenu-name { max-width: 150px; } .roc-usermenu-role { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-usermenu-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); width: 100%; box-sizing: border-box; background: none; border: none; text-align: left; cursor: pointer; padding: 10px var(--space-3); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: 600; font-family: inherit; line-height: 1.3; text-decoration: none; min-height: 44px; appearance: none; -webkit-appearance: none; } .roc-usermenu-item:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .roc-usermenu-item svg { width: 18px; height: 18px; color: var(--color-text-secondary); flex: 0 0 auto; } .roc-usermenu-danger { color: var(--color-status-error); } .roc-usermenu-danger svg { color: var(--color-status-error); } .roc-usermenu form { margin: 0; width: 100%; display: block; } @media (max-width: 560px) { .roc-usermenu-name, .roc-usermenu-caret { display: none; } .roc-usermenu-trigger { padding: 4px; } } .roc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 16px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ════════════════════════════════════════════════════════════════ Button system (Task 5) — global, AA-safe, ≥44px targets. .btn-primary coral fill + dark ink .btn-secondary outline .btn-ghost transparent .btn-danger red fill + white Add .btn-sm for a compact variant. ════════════════════════════════════════════════════════════════ */ .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--border-radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 700; line-height: 1.1; cursor: pointer; text-decoration: none; -webkit-appearance: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, filter .15s; } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; } .btn-primary { background: var(--color-accent-primary); color: var(--color-on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); text-decoration: none; } .btn-primary:active { background: var(--color-accent-primary-active); } .btn-secondary { background: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary); } .btn-secondary:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-text-primary); } .btn-ghost:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-danger { background: var(--color-status-error); color: #fff; box-shadow: var(--shadow-sm); } .btn-danger:hover { filter: brightness(.95); color: #fff; text-decoration: none; } .btn-sm { min-height: 36px; padding: 7px 14px; font-size: var(--font-size-sm); } /* ════════════════════════════════════════════════════════════════ Cards & grouped sections (Task 6) — Apple-Health-style building blocks .roc-card soft content card (padded) .roc-section muted label + .roc-group (rounded list of .roc-row) ════════════════════════════════════════════════════════════════ */ .roc-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); } .roc-card--flush { padding: 0; overflow: hidden; } .roc-card--pad-sm { padding: var(--space-4); } .roc-card--accent { background: var(--color-accent-soft); border-color: var(--color-accent-soft-border); } .roc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .roc-card-head--bordered { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0; letter-spacing: -0.01em; } .roc-card-sub { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-section { margin-bottom: var(--space-6); } .roc-section-title { font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); margin: 0 0 var(--space-3) var(--space-2); } .roc-group { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .roc-row { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-row:last-child { border-bottom: none; } .roc-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .roc-row-label { font-weight: 700; color: var(--color-text-primary); } .roc-row-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-row-value { color: var(--color-text-secondary); font-weight: 600; text-align: right; white-space: nowrap; } a.roc-row, .roc-row--link { cursor: pointer; text-decoration: none; color: inherit; transition: background-color .15s; } a.roc-row:hover, .roc-row--link:hover { background: var(--color-bg-tertiary); text-decoration: none; } a.roc-row:focus-visible, .roc-row--link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-row-chevron { color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-row-chevron svg { width: 18px; height: 18px; display: block; } /* ════════════════════════════════════════════════════════════════ Page header (Task 7) — title + one-line purpose + optional action. Used at the top of every tool/list page via . ════════════════════════════════════════════════════════════════ */ .roc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .roc-page-head-text { min-width: 0; } .roc-page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0; } /* moves focus to this

after each navigation so screen readers announce the new page. The heading is tabindex="-1" (never in the tab order), so it only ever receives that programmatic focus — a visible ring serves no keyboard-navigation purpose. Suppress it in every case (F5/Ctrl+R refresh registers keyboard modality, so :focus-visible would otherwise match). */ .roc-page-title:focus { outline: none; box-shadow: none; } .roc-page-desc { margin: 6px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-md); max-width: 70ch; } .roc-page-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } @media (max-width: 600px) { .roc-page-head { align-items: flex-start; } .roc-page-head-actions { width: 100%; } } /* ════════════════════════════════════════════════════════════════ Form fields (Task 8) Native controls use .roc-field / .roc-label / .roc-input / .roc-help. (.roc-input base lives in the Login block; here we extend it to select/textarea, add states, and lightly tune MudBlazor inputs.) ════════════════════════════════════════════════════════════════ */ .roc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .roc-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-label .roc-req { color: var(--color-status-error); margin-left: 2px; } .roc-help { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; } .roc-field-error { font-size: var(--font-size-sm); color: var(--color-status-error); font-weight: 600; margin: 0; } /* Security-log event badge (admin audit page). */ .roc-audit-badge { display: inline-block; padding: 2px 8px; border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; } .roc-audit-badge.is-ok { background: var(--color-status-success-soft); color: var(--color-text-primary); } .roc-audit-badge.is-fail { background: var(--color-status-error-soft, var(--color-bg-tertiary)); color: var(--color-status-error); } select.roc-input { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } textarea.roc-input { min-height: 96px; padding: 11px 14px; resize: vertical; line-height: 1.5; } .roc-input:disabled { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); cursor: not-allowed; } .roc-input[aria-invalid="true"], .roc-input.is-invalid { border-color: var(--color-status-error); } .roc-input[aria-invalid="true"]:focus, .roc-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-status-error-soft); } /* MudBlazor inputs — friendlier sizing + readable labels/helper (low-risk tweaks) */ .mud-input-control .mud-input-root, .mud-input-control input, .mud-input-control .mud-select-input { font-size: var(--font-size-base); } .mud-input-label { font-weight: 600; } .mud-input-helper-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* ════════════════════════════════════════════════════════════════ Responsive data list (Task 9) — table on desktop, cards on phone. Custom tables: use .roc-table (wrap in .roc-table-wrap for framing). Give each so it stacks readably on mobile. MudTable: set Breakpoint + DataLabel on MudTd; styling below makes the stacked rows look like cards. ════════════════════════════════════════════════════════════════ */ .roc-table-wrap { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .roc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); } .roc-table thead th { text-align: left; font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border-primary); white-space: nowrap; } .roc-table tbody td { padding: 13px var(--space-4); border-bottom: 1px solid var(--color-border-secondary); color: var(--color-text-primary); vertical-align: middle; } .roc-table tbody tr:last-child td { border-bottom: none; } .roc-table tbody tr:hover { background: var(--color-bg-tertiary); } .roc-table .roc-td-num { text-align: right; font-variant-numeric: tabular-nums; } .roc-table .roc-td-actions { text-align: right; white-space: nowrap; } /* MudTable — roomier + tokenized headers (desktop) */ .mud-table-root { font-size: var(--font-size-base); } .mud-table-root .mud-table-head .mud-table-cell { font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); } .mud-table-root .mud-table-body .mud-table-cell { padding-top: 13px; padding-bottom: 13px; } /* Phone: collapse custom tables into stacked cards via data-label */ @media (max-width: 700px) { .roc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .roc-table, .roc-table tbody, .roc-table tr, .roc-table td { display: block; width: 100%; } .roc-table tbody tr { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); padding: 4px var(--space-3); } .roc-table tbody tr:hover { background: var(--color-bg-secondary); } .roc-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--color-border-secondary); text-align: right; } .roc-table tbody tr td:last-child { border-bottom: none; } .roc-table tbody td::before { content: attr(data-label); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-align: left; margin-right: var(--space-3); } .roc-table tbody td:not([data-label])::before, .roc-table tbody td[data-label=""]::before { content: none; } .roc-table .roc-td-num, .roc-table .roc-td-actions { text-align: right; } /* MudTable stacked rows → card look */ .mud-table-root.mud-table-smalldevice .mud-table-body .mud-table-row { border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); background: var(--color-bg-secondary); } } /* ════════════════════════════════════════════════════════════════ Dialogs (Task 10) — light, rounded, roomy. MudBlazor provides the focus-trap, Esc-to-close, and backdrop; we restyle the surface + copy. ════════════════════════════════════════════════════════════════ */ .mud-dialog { border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-primary); } .mud-dialog-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); } .mud-dialog-content { font-size: var(--font-size-base); color: var(--color-text-primary); } .roc-dialog-message { line-height: var(--line-height-relaxed); } .mud-dialog-actions { gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); } /* ════════════════════════════════════════════════════════════════ Empty states (Task 11) — friendly "nothing here yet" via : soft icon + one-line explanation + a clear next action. ════════════════════════════════════════════════════════════════ */ .roc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); max-width: 440px; margin: 0 auto; } .roc-empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--border-radius-full); background: var(--color-accent-soft); color: var(--color-accent-strong); margin-bottom: var(--space-1); } .roc-error-icon { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .roc-empty-icon svg { width: 30px; height: 30px; } .roc-empty-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0; } .roc-empty-desc { color: var(--color-text-secondary); font-size: var(--font-size-base); margin: 0; max-width: 42ch; line-height: var(--line-height-relaxed); } .roc-empty-action { margin-top: var(--space-2); } /* ════════════════════════════════════════════════════════════════ Feedback (Task 12) — toasts, tooltips, inline tips. Snackbar/tooltip severity colors come from the theme; here we tokenize shape/shadow/typography. gives inline guidance (info/tip/success/warn). ════════════════════════════════════════════════════════════════ */ .mud-snackbar .mud-snackbar-surface { border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 600; } .mud-snackbar .mud-snackbar-content-message { font-family: var(--font-body); } /* Calmer progress bar */ .mud-progress-linear { height: 8px !important; border-radius: var(--border-radius-full); overflow: hidden; background: var(--color-bg-tertiary); } .mud-progress-linear .mud-progress-linear-bar { border-radius: var(--border-radius-full); } .mud-tooltip { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--border-radius-sm); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; padding: 6px 10px; box-shadow: var(--shadow-md); } .roc-tip { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); background: var(--color-accent-secondary-soft); color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .roc-tip strong { font-weight: 800; } .roc-tip-icon { flex: 0 0 auto; color: var(--color-accent-secondary-strong); margin-top: 1px; } .roc-tip-icon svg { width: 18px; height: 18px; display: block; } .roc-tip-body { min-width: 0; } .roc-tip-body :last-child { margin-bottom: 0; } .roc-tip--tip { background: var(--color-accent-soft); } .roc-tip--tip .roc-tip-icon { color: var(--color-accent-strong); } .roc-tip--success { background: var(--color-status-success-soft); } .roc-tip--success .roc-tip-icon { color: var(--color-status-success); } .roc-tip--warning { background: var(--color-status-warning-soft); } .roc-tip--warning .roc-tip-icon { color: var(--color-status-warning); } /* Dashboard account card (GroupCard child element — styled globally) */ .home-account { max-width: 560px; } /* Header crowding relief on small screens (full mobile nav lands in Task 4) */ @media (max-width: 480px) { .roc-header { padding: 0 var(--space-4); gap: var(--space-3); } .roc-user-name { display: none; } } .roc-layout { display: flex; flex: 1; min-height: 0; } .roc-sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); margin: var(--space-4) 0 var(--space-4) var(--space-4); padding: var(--space-3); border-radius: var(--border-radius-lg); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); box-shadow: var(--shadow-sm); align-self: flex-start; position: sticky; top: calc(var(--header-height) + var(--space-3)); max-height: calc(100vh - var(--header-height) - var(--space-6)); overflow-y: auto; } .roc-main { flex: 1; padding: var(--space-5); overflow: auto; min-width: 0; } /* Nav */ .roc-nav { display: flex; flex-direction: column; gap: var(--space-4); } .roc-nav-section { display: flex; flex-direction: column; gap: 2px; } .roc-nav-heading { padding: var(--space-2) var(--space-3) 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-tertiary); } .roc-nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--border-radius-md); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 700; transition: background .15s, color .15s; } .roc-nav-link svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .8; } .roc-nav-link:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .roc-nav-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-nav-link.active { color: var(--color-text-primary); background: var(--color-accent-soft); } .roc-nav-link.active::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 8px; bottom: 8px; width: 3px; border-radius: 0 16px 16px 0; background: var(--color-accent-primary); } .roc-nav-link.active svg { opacity: 1; color: var(--color-accent-primary); } /* Disabled "coming soon" nav items */ .roc-nav-link-soon { cursor: default; color: var(--color-text-tertiary); } .roc-nav-link-soon:hover { background: transparent; color: var(--color-text-tertiary); } .roc-nav-link-soon svg { opacity: .55; } .roc-soon { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-full); padding: 2px 8px; } /* ════════════════════════════════════════════════════════════════ Mobile bottom navigation + "More" sheet (Task 4) Desktop: hidden. Phone (<768px): sidebar hides, bottom bar shows. ════════════════════════════════════════════════════════════════ */ .roc-bottombar { display: none; } .roc-bottom-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bottombar-height); padding: 6px 2px; border: none; background: none; cursor: pointer; color: var(--color-text-secondary); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-decoration: none; transition: color .15s; } .roc-bottom-link svg { width: 24px; height: 24px; } .roc-bottom-link:hover { color: var(--color-text-primary); text-decoration: none; } .roc-bottom-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--border-radius-sm); } .roc-bottom-link.active { color: var(--color-accent-strong); } .roc-bottom-link.active svg { color: var(--color-accent-primary); } .roc-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--color-surface-overlay); animation: roc-fade-in .15s var(--easing-out); } .roc-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 80vh; overflow-y: auto; background: var(--color-bg-secondary); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; border-top: 1px solid var(--color-border-primary); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); animation: roc-slide-up .22s var(--easing-out); } .roc-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--color-border-strong); margin: 4px auto var(--space-3); } .roc-sheet-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-md); margin-bottom: var(--space-2); } @keyframes roc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes roc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (max-width: 767.98px) { .roc-sidebar { display: none; } .roc-main { padding: var(--space-4); padding-bottom: calc(var(--bottombar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px)); } .roc-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-primary); box-shadow: 0 -2px 12px -6px rgba(28, 33, 51, .18); } } /* Safety: never show the mobile sheet/bar on desktop, even if state lingers. */ @media (min-width: 768px) { .roc-sheet, .roc-sheet-backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .roc-sheet, .roc-sheet-backdrop { animation: none; } } /* Login page */ .roc-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-primary); padding: var(--space-5); } .roc-login-card { width: 100%; max-width: 400px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-6) var(--space-7); } .roc-login-brand { display: flex; justify-content: center; margin-bottom: var(--space-4); } .roc-login-brand .roc-brand-mark { width: 52px; height: 52px; font-size: 24px; border-radius: var(--border-radius-lg); } .roc-login-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-xl); letter-spacing: -0.01em; text-align: center; color: var(--color-text-primary); margin: 0 0 6px; } .roc-login-sub { text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: var(--space-6); } .roc-system-ref { text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0 0 var(--space-2); } .roc-system-ref code { font-family: var(--font-mono, monospace); color: var(--color-text-secondary); word-break: break-all; } /* ---- First-visit onboarding ---- */ .roc-onboard-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(20, 14, 12, .45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: roc-onboard-fade .2s ease; } @keyframes roc-onboard-fade { from { opacity: 0; } to { opacity: 1; } } .roc-onboard-card { position: relative; width: 100%; max-width: 420px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-7) var(--space-6) var(--space-6); text-align: center; animation: roc-onboard-pop .22s ease; } @keyframes roc-onboard-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .roc-onboard-skip { position: absolute; top: 10px; right: 10px; background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: var(--font-size-sm); font-weight: 700; padding: 8px 12px; border-radius: var(--border-radius-md); min-height: 44px; } .roc-onboard-skip:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .roc-onboard-skip:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-onboard-art { width: 64px; height: 64px; margin: 0 auto var(--space-4); display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); } .roc-onboard-art svg { width: 32px; height: 32px; } .roc-onboard-title { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text-primary); margin: 0 0 var(--space-2); } .roc-onboard-body { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 0 0 var(--space-5); } .roc-onboard-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: var(--space-5); } .roc-onboard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transition: background .15s, transform .15s; } .roc-onboard-dot.is-active { background: var(--color-accent-primary); transform: scale(1.25); } .roc-onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .roc-onboard-actions .btn-primary { min-width: 132px; text-align: center; } /* "Coming soon" dashboard tile */ .home-tile--soon { cursor: default; opacity: .72; } .home-tile--soon .home-tile-icon { opacity: .85; } .roc-input-group { margin-bottom: var(--space-4); } .roc-input-label { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 700; margin-bottom: 6px; } .roc-input { width: 100%; min-height: 46px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 11px 14px; border-radius: var(--border-radius-md); font-size: var(--font-size-base); outline: none; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .roc-input::placeholder { color: var(--color-text-tertiary); } .roc-input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .roc-submit { width: 100%; min-height: 48px; margin-top: var(--space-2); background: var(--color-accent-primary); border: none; color: var(--color-on-accent); border-radius: var(--border-radius-md); font-family: var(--font-body); font-size: var(--font-size-md); font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .15s, box-shadow .15s; } .roc-submit:hover { background: var(--color-accent-primary-hover); } .roc-submit:active { background: var(--color-accent-primary-active); } .roc-submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* button-styled anchor (e.g. "Go to sign in" after a successful reset) */ .roc-submit-link { display: block; text-align: center; text-decoration: none; line-height: 48px; } .roc-login-link { display: block; text-align: center; margin-top: var(--space-4); color: var(--color-accent-secondary-strong); font-size: var(--font-size-sm); font-weight: 700; text-decoration: none; } .roc-login-link:hover { text-decoration: underline; } .roc-error { color: var(--color-status-error); font-size: var(--font-size-sm); font-weight: 600; text-align: center; margin-bottom: var(--space-4); padding: 10px 12px; background: var(--color-status-error-soft); border: 1px solid var(--color-status-error); border-radius: var(--border-radius-md); } /* Error UI */ #blazor-error-ui { background: var(--bg2); border-top: 1px solid var(--red); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: var(--text); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ────────────────────────────────────────────────────────────────── Royal Tech (and, later, Normal Tech) — class names ported verbatim from the old HTML tool so the port stays readable side-by-side. ────────────────────────────────────────────────────────────────── */ .rtp-wrap { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height) - 150px); gap: var(--space-3); } .rtp-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); } .rtp-kpi { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: 999px; padding: 5px 14px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .rtp-kpi strong { color: var(--color-accent-strong); font-weight: 800; margin-left: 4px; } .rtp-legend { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .rtp-search { flex: 1; min-width: 180px; max-width: 320px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--border-radius-md); font-size: var(--font-size-base); font-family: inherit; outline: none; } .rtp-search::placeholder { color: var(--color-text-tertiary); } .rtp-search:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .rtp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 14px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } .rtp-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .rtp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .rtp-btn.active { color: var(--color-text-primary); border-color: var(--color-accent-primary); background: var(--color-accent-soft); } .rtp-btn.rtp-btn-todo.active { background: var(--color-accent-soft); } .rtp-btn-danger { color: var(--color-status-error); border-color: var(--color-status-error); } .rtp-btn-danger:hover { background: var(--color-status-error-soft); color: var(--color-status-error); } .rtp-btn-save { color: var(--color-accent-strong); border-color: var(--color-accent-primary); } /* Royal/Normal segmented switch (Tech page header) */ .tech-switch { display: inline-flex; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-full); padding: 3px; gap: 2px; } .tech-switch-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border-radius: var(--border-radius-full); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-decoration: none; transition: background .15s, color .15s; } .tech-switch-tab:hover { color: var(--color-text-primary); text-decoration: none; } .tech-switch-tab.active { background: var(--color-accent-primary); color: var(--color-on-accent); } .tech-switch-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .rtp-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .rtp-dd-wrap { position: relative; } .rtp-dd-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 10px; border-radius: var(--border-radius-lg); font-size: 12px; cursor: pointer; font-family: inherit; min-width: 140px; text-align: left; } .rtp-dd-btn:hover { background: var(--bg4); color: var(--text); } .rtp-dd-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-height: 320px; overflow-y: auto; box-shadow: 0 6px 22px rgba(0,0,0,0.4); } .rtp-dd-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; padding: 3px 4px; border-radius: var(--border-radius-lg); } .rtp-dd-row:hover { background: var(--bg3); } .rtp-dd-row input[type=checkbox] { margin: 0; accent-color: var(--color-accent-strong); } .rtp-dd-clear { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--red); cursor: pointer; text-align: center; } /* Troop / buff / context badges */ .rtp-badge { display: inline-block; padding: 1px 6px; border-radius: var(--border-radius-lg); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; vertical-align: middle; } .bd-all { color: var(--text2); border-color: var(--border); } .bd-footman { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .bd-archer { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .bd-cavalry { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .bd-calamity { color: var(--color-status-error); border-color: rgba(255, 132, 132, 0.4); } .bd-judicator { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .bd-destroyer { color: var(--color-status-warning); border-color: rgba(255, 158, 100, 0.4); } .bd-evilbuster { color: var(--color-accent-secondary-strong); border-color: rgba(118, 200, 255, 0.4); } .bd-terminator { color: var(--color-status-error); border-color: rgba(255, 110, 110, 0.4); } .bd-punisher { color: var(--purple); border-color: rgba(199, 138, 240, 0.4); } .bt-might, .bt-damageout { color: var(--color-status-error); border-color: rgba(248, 81, 73, 0.4); } .bt-resist, .bt-damagered { color: var(--color-status-success); border-color: rgba(86, 211, 100, 0.4); } .bt-hp { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .bt-tactmight { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .bt-tactresist { color: var(--color-accent-secondary-strong); border-color: rgba(88, 166, 255, 0.4); } .bt-combatspeed { color: var(--color-text-secondary); border-color: rgba(139, 148, 158, 0.4); } .bt-cap, .bt-research, .bt-costred, .bt-training, .bt-heal { color: var(--text2); border-color: var(--border); } .ctx-field { color: var(--color-status-success); border-color: rgba(86, 211, 100, 0.4); } .ctx-siege, .ctx-siegeatk, .ctx-siegedef { color: var(--color-status-warning); border-color: rgba(255, 158, 100, 0.4); } /* Stat bar */ .rtp-statbar { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; } .rtp-statbar-hdr { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .rtp-statbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rtp-statcard { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 10px; } .rtp-statcard-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .rtp-statcard-title.foot { color: var(--footman); } .rtp-statcard-title.arch { color: var(--archer); } .rtp-statcard-title.cav { color: var(--cavalry); } .rtp-statcard-title.gen { color: var(--color-accent-strong); } .rtp-statrow { display: flex; justify-content: space-between; font-size: 11px; padding: 1px 0; color: var(--text2); } .rtp-statrow .v { color: var(--text); font-weight: 600; } .rtp-statrow.zero .v { color: var(--text3); font-weight: 400; } /* Books / sections / techs */ .rtp-books { display: flex; flex-direction: column; gap: 10px; } .rtp-book { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; } .rtp-book-hdr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-inset); cursor: pointer; border-bottom: 1px solid var(--border); } .rtp-book-hdr:hover { background: var(--bg4); } .rtp-book-name { color: var(--color-accent-strong); font-weight: 700; font-size: 14px; flex: 1; } .rtp-book-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text2); } .rtp-book-meta .chev { color: var(--text3); transition: transform 0.2s; } .rtp-book.rtp-book-collapsed .rtp-book-body { display: none; } .rtp-book.rtp-book-collapsed .chev { transform: rotate(-90deg); } .rtp-book-body { padding: 6px 10px 10px 10px; } .rtp-section { margin-top: 6px; } .rtp-section-name { font-size: 10px; color: var(--color-accent-secondary-strong); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 2px 4px 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .rtp-tech { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--border-radius-lg); min-height: 28px; } .rtp-tech:hover { border-color: var(--border); background: var(--color-bg-tertiary); } .rtp-tech-cb { accent-color: var(--color-accent-strong); margin: 0; cursor: pointer; } .rtp-tech-name { font-size: 12px; color: var(--text); flex: 0 0 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } .rtp-tech-desc { flex: 1; font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rtp-tech-troops { display: flex; gap: 3px; } .rtp-tech-slider { flex: 0 0 140px; accent-color: var(--color-accent-secondary); height: 3px; } .rtp-tech-lv { font-size: 11px; color: var(--text2); flex: 0 0 auto; min-width: 52px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .rtp-tech-cost { font-size: 11px; color: var(--text3); width: 90px; text-align: right; } .rtp-tech.rtp-tech-maxed .rtp-tech-name, .rtp-tech.rtp-tech-maxed .rtp-tech-lv { color: var(--color-status-success); } .rtp-tech.rtp-tech-done { opacity: 0.45; } .rtp-tech.rtp-tech-done .rtp-tech-name, .rtp-tech.rtp-tech-done .rtp-tech-desc { text-decoration: line-through; color: var(--text3); } .rtp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: 56px 24px; text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: 600; } .rtp-loading::before { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--color-border-strong); border-top-color: var(--color-accent-primary); animation: roc-spin .8s linear infinite; } @keyframes roc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rtp-loading::before { animation-duration: 2.4s; } } /* ────────────────────────────────────────────────────────────────── Normal Tech — grid of node cards + per-node modal ────────────────────────────────────────────────────────────────── */ .ntp-rows { display: flex; flex-direction: column; gap: 14px; } .ntp-row { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; } .ntp-row-name { color: var(--color-accent-strong); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; } .ntp-row-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .ntp-node { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; cursor: pointer; transition: border-color 0.12s, transform 0.12s; display: flex; flex-direction: column; gap: 6px; min-height: 100px; } .ntp-node:hover { border-color: var(--border2); transform: translateY(-1px); } .ntp-node.ntp-done { border-color: rgba(63, 185, 80, 0.35); } .ntp-node.ntp-done .ntp-node-name { color: var(--footman); } .ntp-node.ntp-partial { border-color: rgba(227, 179, 65, 0.4); } .ntp-node.ntp-hidden { display: none; } .ntp-node-hdr { display: flex; align-items: center; gap: 6px; } .ntp-node-status { font-size: 12px; } .ntp-node-name { font-size: 13px; font-weight: 700; color: var(--text); } .ntp-node-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ntp-season { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; } .ntp-node-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text2); } .ntp-medal { padding: 1px 6px; font-size: 10px; font-weight: 700; border-radius: var(--border-radius-lg); border: 1px solid transparent; } .ntp-medal-wb { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .ntp-medal-cm { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .ntp-medal-res { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .ntp-medal-mix { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .ntp-progress-bar { height: 4px; background: var(--bg); border-radius: var(--border-radius-lg); overflow: hidden; margin-top: auto; } .ntp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cavalry)); transition: width 0.2s; } .ntp-progress-text { font-size: 10px; color: var(--text3); } /* Modal */ .ntp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; } .ntp-modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(760px, 92vw); max-height: 85vh; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--border-radius-lg); box-shadow: 0 18px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; z-index: 1001; } .ntp-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-inset); border-radius: 16px 16px 0 0; } .ntp-modal-title { color: var(--color-accent-strong); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; } .ntp-modal-close { background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; padding: 4px 8px; } .ntp-modal-close:hover { color: var(--red); } .ntp-modal-body { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } .ntp-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--border); } .ntp-mtech { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--bg3); } .ntp-mtech.rtp-tech-maxed { border-color: rgba(63, 185, 80, 0.4); } .ntp-mtech-row1 { display: flex; justify-content: space-between; gap: 10px; } .ntp-mtech-name { font-size: 12px; font-weight: 700; color: var(--text); } .ntp-mtech-desc { font-size: 11px; color: var(--text3); flex: 1; text-align: right; } .ntp-mtech-row2 { display: flex; align-items: center; gap: 8px; } .ntp-mtech-row2 .rtp-tech-slider { flex: 1; } .ntp-mtech-lv { font-size: 11px; color: var(--text2); width: 44px; text-align: right; } .ntp-mtech-qq { padding: 2px 8px; font-size: 11px; } .ntp-mtech-row3 { display: flex; flex-direction: column; gap: 2px; font-size: 11px; } .ntp-next-cost { font-weight: 700; color: var(--color-accent-secondary-strong); } .ntp-max-cost { color: var(--text3); } /* ────────────────────────────────────────────────────────────────── Hero Combos ────────────────────────────────────────────────────────────────── */ .hc-wrap { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 97px); } .hc-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .hc-sel { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-family: inherit; outline: none; min-width: 140px; min-height: 40px; } .hc-sel:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .hc-count { font-size: 11px; color: var(--text2); margin-left: auto; } .hc-banner { color: var(--color-accent-strong); font-style: italic; margin-left: 6px; } .hc-selbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); min-height: 42px; } .hc-sellabel { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; } .hc-selhint { font-size: 12px; color: var(--text2); } .hc-chip { background: var(--bg3); border: 1px solid var(--gold); color: var(--text); font-size: 12px; font-family: inherit; padding: 3px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .hc-chip:hover { background: var(--color-accent-soft); } .hc-chip-x { color: var(--text3); font-size: 10px; } .hc-clear { margin-left: auto; } /* Results */ .hc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hc-result-col { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .hc-result-hdr { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .hc-result-hdr.hc-22 { color: var(--color-status-warning); } .hc-result-hdr.hc-28 { color: var(--color-accent-secondary-strong); } .hc-combo { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--bg3); } .hc-combo-hdr { display: flex; justify-content: space-between; font-size: 10px; } .hc-rank { font-weight: 700; } .hc-combo-body { font-size: 12px; color: var(--text); } .hc-member-sel { color: var(--color-accent-strong); font-weight: 700; } .hc-skin { color: var(--text3); font-size: 11px; } .hc-sep { color: var(--text3); } .hc-more { text-align: center; color: var(--text3); font-size: 11px; padding: 6px 0; } .hc-empty { grid-column: 1 / -1; } .hc-cat-cavalry { color: var(--color-accent-secondary-strong); border-color: var(--color-accent-secondary-strong); } .hc-cat-archer { color: var(--color-status-success); border-color: var(--color-status-success); } .hc-cat-footmen { color: var(--color-status-warning); border-color: var(--color-status-warning); } .hc-cat-mixed { color: var(--purple); border-color: var(--purple); } .hc-cat-poisontiler { color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .hc-cat-other { color: var(--text2); border-color: var(--border); } /* Hero grid */ .hc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .hcard { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.12s, transform 0.12s; position: relative; min-height: 108px; } .hcard:hover { border-color: var(--border2); transform: translateY(-1px); } .hcard-selected { border-color: var(--color-accent-strong); box-shadow: 0 0 0 1px var(--gold); } .hcard-hdr { display: flex; justify-content: space-between; align-items: baseline; } .hcard-name { font-size: 13px; font-weight: 700; color: var(--text); } .hcard-season { font-size: 10px; color: var(--text3); } .hcard-badges { display: flex; gap: 4px; flex-wrap: wrap; } .hcard-troop-foot { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .hcard-troop-arch { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .hcard-troop-cav { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .hcard-type-imperial { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .hcard-type-season { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .hcard-type-exclusive { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .hcard-excels { color: var(--text2); border-color: var(--border); } .hcard-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text2); } .hcard-sel-indicator { position: absolute; top: 6px; right: 8px; color: var(--color-accent-strong); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } /* ─── Spec Planner ───────────────────────────────────────────────── */ .sp-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--header-height) - 178px); min-height: 480px; overflow: hidden; overflow-anchor: none; } .sp-toolbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); flex: 0 0 auto; } .sp-tabs { display: flex; gap: var(--space-2); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .sp-tabs::-webkit-scrollbar { display: none; } .sp-tab { --sp-tab-accent: var(--color-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 18px; min-width: 116px; min-height: 44px; flex: 0 0 auto; background: var(--color-bg-tertiary); border: 2px solid transparent; border-radius: var(--border-radius-md); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sp-tab:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .sp-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sp-tab-active { background: color-mix(in srgb, var(--sp-tab-accent) 14%, var(--color-bg-secondary)); border-color: var(--sp-tab-accent); color: var(--color-text-primary); } .sp-tab-icon { font-size: 18px; line-height: 1; } .sp-tab-label { font-size: var(--font-size-sm); letter-spacing: 0.01em; line-height: 1.2; } .sp-tab-pts { font-size: 11px; color: var(--color-text-tertiary); font-weight: 600; } .sp-tab-active .sp-tab-pts { color: var(--color-text-secondary); } .sp-actions { display: flex; gap: var(--space-2); align-items: center; flex: 0 0 auto; } .sp-zoom { display: inline-flex; gap: 4px; } .sp-zoom-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-size: var(--font-size-md); font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; } .sp-zoom-btn:hover { background: var(--color-bg-tertiary); } .sp-zoom-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sp-body { display: flex; flex: 1 1 auto; gap: 8px; min-height: 0; } .sp-canvas-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .sp-canvas-scroll { height: 100%; overflow: auto; overflow-anchor: none; background: var(--surface-inset); } .sp-svg { display: block; } .sp-side { flex: 0 0 360px; display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; } .sp-side-section { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; } .sp-side-detail { flex: 0 0 auto; max-height: 50%; overflow: auto; } .sp-side-summary { flex: 1 1 auto; overflow: auto; } .sp-side-hdr { flex: 0 0 auto; padding: var(--space-3) var(--space-4); background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border-primary); color: var(--color-text-tertiary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* Spec Planner — stack canvas + side panel on small screens */ @media (max-width: 860px) { .sp-wrap { height: auto; min-height: 0; overflow: visible; } .sp-body { flex-direction: column; } .sp-canvas-wrap { height: 60vh; flex: 0 0 auto; } .sp-side { flex: 1 1 auto; width: 100%; } .sp-side-detail { max-height: none; } } /* Detail panel */ .sp-side-detail > div:not(.sp-side-hdr), .sp-side-detail > pre, .sp-side-detail > ul { padding-left: 12px; padding-right: 12px; } .sp-side-detail .sp-empty { padding: 14px 12px; color: var(--text3); } .sp-side-detail .sp-tip { padding: 0 12px 12px; color: var(--text3); font-size: 11px; line-height: 1.5; } .sp-name { margin-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 16px; font-weight: 600; } .sp-lvl-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .sp-lvl { color: var(--color-accent-secondary-strong); font-weight: 600; font-size: 13px; } .sp-lvl-btns { display: inline-flex; gap: 4px; } .sp-lvl-btn { min-width: 36px; height: 36px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); cursor: pointer; font-weight: 700; font-size: 14px; } .sp-lvl-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sp-lvl-plus:not(:disabled):hover { border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .sp-lvl-minus:not(:disabled):hover { border-color: var(--color-status-error); color: var(--color-status-error); } .sp-status { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); letter-spacing: 0.04em; } .sp-status-locked { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .sp-status-avail { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); } .sp-status-partial { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); } .sp-status-done { background: var(--color-status-success-soft); color: var(--color-status-success); } .sp-status-hub { background: var(--color-accent-soft); color: var(--color-accent-strong); } .sp-desc { margin: 8px 0 6px; padding: 8px 10px; background: var(--color-bg-tertiary); border: 1px solid var(--border); border-radius: var(--border-radius-lg); color: var(--text2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; font-family: inherit; } .sp-pre-label { margin-top: 6px; color: var(--text3); font-size: 11px; } .sp-pre-list { list-style: none; padding: 0; margin: 4px 0 8px; } .sp-pre-list li { padding: 2px 0; font-size: 12px; } .sp-pre-done { color: var(--text2); } .sp-pre-todo { color: var(--text3); } .sp-cost-line { margin-top: 6px; font-size: 12px; color: var(--color-accent-strong); } .sp-cost-note { color: var(--text3); } /* Summary panel */ .sp-side-summary > * { padding-left: 12px; padding-right: 12px; } .sp-side-summary > .sp-side-hdr, .sp-side-summary .sp-section-hdr.sp-section-inner { padding-left: 12px; padding-right: 12px; } .sp-side-summary .sp-empty { padding: 14px 12px; color: var(--text3); } .sp-section-hdr { margin-top: 10px; color: var(--text2); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sp-tree-pts { list-style: none; padding-left: 0; margin: 6px 0; } .sp-tree-pts li { padding: 4px 8px; margin: 4px 0; background: rgba(255,255,255,0.03); font-size: 12px; color: var(--text2); } .sp-tree-pts-total { color: var(--color-accent-strong) !important; font-weight: 600; border-left: 3px solid var(--gold) !important; } .sp-stats, .sp-abilities { list-style: none; padding-left: 0; margin: 6px 0; } .sp-stats li { padding: 3px 0; border-bottom: 1px dotted var(--border); font-size: 12px; color: var(--text2); } .sp-stats li:last-child { border-bottom: none; } .sp-abilities li { padding: 4px 8px; margin: 4px 0; background: rgba(255,255,255,0.03); font-size: 12px; color: var(--text2); } /* SVG node interactions */ .sp-node { cursor: default; } .sp-clickable { cursor: pointer; } .sp-clickable:hover circle:nth-of-type(1) { filter: brightness(1.3); } /* ─── Eden Calculator ────────────────────────────────────────────── */ .ec-wrap { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-4); } .ec-toolbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); flex-wrap: wrap; } /* Scrollable chip-row of tabs */ .ec-tabs { display: flex; gap: var(--space-2); flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .ec-tabs::-webkit-scrollbar { display: none; } .ec-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 10px 16px; background: var(--color-bg-tertiary); border: 1px solid transparent; border-radius: var(--border-radius-full); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ec-tab:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .ec-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .ec-tab-active { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: var(--color-on-accent); } .ec-tab-active:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); } .ec-tab-icon { font-size: 15px; line-height: 1; } .ec-tab-label { letter-spacing: 0.01em; } /* "Later" tabs (Loyalty/Fortress): de-emphasised until selected */ .ec-tab-later:not(.ec-tab-active) { background: transparent; color: var(--color-text-tertiary); } .ec-tab-later:not(.ec-tab-active) .ec-tab-icon { opacity: 0.6; } .ec-tab-later:not(.ec-tab-active):hover { background: var(--color-bg-tertiary); color: var(--color-text-secondary); } /* Tab group labels ("Set up" / "Results") in the Eden tab bar */ .ec-tabgroup { display: inline-flex; align-items: center; flex: 0 0 auto; align-self: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); white-space: nowrap; } .ec-tabgroup:not(:first-child) { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--color-border-secondary); } /* Guided-flow hero on the Dashboard (start-here guide / plain-language summary) */ .ec-hero { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--border-radius-lg); } .ec-hero-start { background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); } .ec-hero-summary { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); } .ec-hero-emoji { font-size: 28px; line-height: 1.2; flex: 0 0 auto; } .ec-hero-text { min-width: 0; } .ec-hero-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin-bottom: 2px; } .ec-hero-sub { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.5; max-width: 68ch; } .ec-hero-summary .ec-hero-sub { margin-bottom: 0; } .ec-hero-sub b { color: var(--color-text-primary); } .ec-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Tile cards read as tappable (they open the assign dialog) */ .ec-tile-card { transition: border-color .15s, box-shadow .15s, transform .15s; } .ec-tile-card:hover { border-color: var(--color-accent-soft-border); box-shadow: var(--shadow-md); transform: translateY(-2px); } .ec-tile-card-count { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ec-tile-card-edit { color: var(--color-accent-secondary-strong); font-weight: 700; white-space: nowrap; } /* Workshop slots read as tappable too */ .ec-ws-slot:not([disabled]) { transition: border-color .15s, box-shadow .15s, transform .15s; } .ec-ws-slot:not([disabled]):hover { border-color: var(--color-accent-soft-border); box-shadow: var(--shadow-md); transform: translateY(-2px); } .ec-ws-slot-hint { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--color-accent-secondary-strong); } /* Password field with a show/hide eye toggle */ .roc-pw { position: relative; display: block; } .roc-pw .roc-input { width: 100%; padding-right: 44px; } .roc-pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-tertiary); border-radius: var(--border-radius-md); transition: background .15s, color .15s; } .roc-pw-toggle:hover { color: var(--color-text-secondary); background: var(--color-bg-tertiary); } .roc-pw-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-pw-toggle svg { width: 18px; height: 18px; } /* Login form uses two SVGs toggled by a class (JS-driven); the Blazor field swaps its own. */ .roc-pw-toggle .pw-eye-off { display: none; } .roc-pw-toggle.is-showing .pw-eye { display: none; } .roc-pw-toggle.is-showing .pw-eye-off { display: block; } /* Inline info marker (hover/focus for a plain-language explanation) */ .roc-infotip { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; vertical-align: middle; border-radius: 50%; background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: 10px; font-weight: 800; font-style: italic; font-family: var(--font-display); line-height: 1; cursor: help; user-select: none; transition: background .15s, color .15s; } .roc-infotip:hover, .roc-infotip:focus-visible { background: var(--color-accent-soft); color: var(--color-accent-strong); outline: none; } /* Progressive-disclosure block (native
) for advanced/optional content. No own margin — spacing comes from the parent's gap so rhythm stays uniform. */ .roc-collapsible { margin-top: 0; } .roc-collapsible-summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; list-style: none; padding: 9px 14px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: background .15s, color .15s; } .roc-collapsible-summary::-webkit-details-marker { display: none; } .roc-collapsible-summary::marker { content: ""; } .roc-collapsible-summary:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-collapsible-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-collapsible-chevron { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .15s; } .roc-collapsible[open] > .roc-collapsible-summary .roc-collapsible-chevron { transform: rotate(90deg); } .roc-collapsible-body { padding-top: var(--space-4); } /* Plain-language "here's the result" line at the top of a tab */ .ec-takeaway { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: 1.5; } .ec-takeaway b { color: var(--color-text-primary); font-weight: 800; } .ec-takeaway .pos { color: var(--color-status-success); font-weight: 800; } .ec-takeaway .neg { color: var(--color-status-error); font-weight: 800; } @media (prefers-reduced-motion: reduce) { .roc-collapsible-chevron { transition: none; } } .ec-toolbar-right { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; flex-wrap: wrap; } .ec-date-field { display: inline-flex; align-items: center; gap: var(--space-2); } .ec-date-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); } .ec-date { background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); padding: 9px 12px; font-size: var(--font-size-sm); font-family: var(--font-body); color-scheme: light; } [data-theme="dark"] .ec-date { color-scheme: dark; } .ec-date:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .ec-phase { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 600; } .ec-save-state { font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); } .ec-save-pending { color: var(--color-status-warning); background: var(--color-status-warning-soft); } .ec-save-ok { color: var(--color-status-success); background: var(--color-status-success-soft); } /* Panel content */ .ec-panel-content { /* One consistent vertical rhythm for every block in a tab. Children must NOT add their own vertical margins — that stacks on top of this gap and makes the spacing uneven. */ display: flex; flex-direction: column; gap: var(--space-4); } .ec-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; } .ec-section-hdr { color: var(--color-accent-strong); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .ec-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .ec-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .ec-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .ec-form-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .ec-label { color: var(--text2); font-size: 12px; min-width: 130px; } .ec-hint { color: var(--text3); font-size: 11px; } .ec-input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 8px; font-size: 12px; flex: 1 1 auto; min-width: 0; } .ec-input-sm { max-width: 120px; } .ec-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 8px; font-size: 12px; flex: 1 1 auto; min-width: 0; } .ec-select:disabled { opacity: 0.4; cursor: not-allowed; } .ec-check-row { cursor: pointer; padding: 4px 0; user-select: none; } /* KPI strip */ .ec-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .ec-kpi-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 10px; text-align: center; } .ec-kpi-card-bold { border-color: var(--color-accent-strong); } .ec-kpi-val { color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 700; } .ec-kpi-label { color: var(--text3); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .ec-banner { padding: 8px 12px; background: var(--color-status-info-soft); border: 1px solid var(--color-accent-secondary-strong); border-radius: var(--border-radius-lg); color: var(--color-accent-secondary-strong); font-size: 12px; } .ec-banner-warn { background: rgba(212,168,67,0.12); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .ec-result-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; } .ec-result-key { color: var(--text2); } .ec-result-val { color: var(--text); font-weight: 600; } .ec-result-pos { color: var(--color-status-success) !important; } .ec-result-neg { color: var(--color-status-error) !important; } .ec-result-block { padding: 4px; } /* Camp / fortress / workshop cards */ .ec-camp-card, .ec-fort-card, .ec-ws-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; } .ec-camp-name, .ec-fort-title, .ec-ws-card-title { color: var(--text); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .ec-camp-cost, .ec-ws-card-info { color: var(--text3); font-size: 10px; } .ec-fort-totals { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text); font-size: 12px; } /* Spec slot tiles */ .ec-spec-row { display: flex; gap: 8px; flex-wrap: wrap; } .ec-spec-node { width: 60px; height: 60px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--border-radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: border-color 0.12s, background 0.12s; } .ec-spec-node:hover { border-color: var(--color-accent-secondary-strong); } .ec-spec-node-lit { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-spec-node-lv { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .ec-spec-node-sub { font-size: 10px; color: var(--text3); } .ec-spec-node-lit .ec-spec-node-sub { color: var(--color-accent-secondary-strong); } /* Tile cards */ .ec-tile-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--text); font: inherit; } .ec-tile-card:hover { border-color: var(--color-accent-strong); } .ec-tile-card-resource { font-size: 14px; font-weight: 700; } .ec-tile-card-name { color: var(--text2); font-size: 11px; } .ec-tile-card-rate { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-accent-secondary-strong); } .ec-tile-card-unit { font-size: 11px; color: var(--text3); } .ec-tile-card-count { color: var(--text3); font-size: 11px; } /* Workshop slot grid */ .ec-slots-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; } .ec-ws-slot { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--border-radius-lg); padding: 14px 10px; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text2); cursor: pointer; font: inherit; } .ec-ws-slot:hover:not(:disabled) { border-color: var(--color-accent-secondary-strong); } .ec-ws-slot:disabled { cursor: default; } .ec-ws-slot-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-ws-slot-locked { opacity: 0.4; } .ec-ws-slot-title { font-size: 11px; color: var(--text3); } .ec-ws-slot-icon { font-size: 22px; } .ec-ws-slot-label { font-size: 12px; font-weight: 700; color: var(--color-accent-secondary-strong); } .ec-ws-slot-empty { font-size: 11px; color: var(--text3); } .ec-ws-slot-lock { font-size: 16px; } .ec-slot-grid-modal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; } .ec-slot-pick { background: var(--color-bg-tertiary); border: 1.5px solid var(--color-border-strong); border-radius: var(--border-radius-lg); padding: 12px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; } .ec-slot-pick:hover { border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-slot-pick-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } /* Period toggle */ .ec-toolbar-inner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 0; } .ec-vt-tabs { display: flex; gap: 4px; } .ec-vt-btn { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 12px; color: var(--text2); font-size: 12px; cursor: pointer; } .ec-vt-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } /* Badges */ .ec-badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .ec-badge { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 2px 8px; font-size: 11px; color: var(--text2); } .ec-badge-max { background: rgba(212,168,67,0.18); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .ec-detail { font-size: 11px; color: var(--text3); margin: 2px 0; } /* Table */ .ec-table-wrap { overflow-x: auto; } .ec-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text); } .ec-table th, .ec-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; } .ec-table th { color: var(--text3); font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } /* Progress bar */ .ec-progress { background: var(--color-bg-tertiary); border-radius: var(--border-radius-lg); height: 6px; margin-top: 6px; overflow: hidden; } .ec-progress-bar { background: var(--color-accent-secondary); height: 100%; border-radius: var(--border-radius-lg); } /* Flow cards (dashboard) */ .ec-flow-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px; } .ec-flow-title { color: var(--color-accent-strong); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .ec-flow-row { font-size: 11px; color: var(--text2); padding: 2px 0; } /* Tile dialog */ .ec-tile-modal-body { padding: 8px 12px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .ec-tile-modal-totals { display: flex; justify-content: space-between; padding: 8px 4px 0; border-top: 1px solid var(--border); margin-top: 6px; font-size: 12px; color: var(--text2); } /* ── Virtue planner ───────────────────────────────────────────────────── */ .vp-outer { display: flex; flex-direction: column; height: calc(100vh - 64px); overflow: hidden; } .vp-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; gap: 8px; } .vp-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .vp-troop-sel, .vp-path-sel { display: flex; align-items: center; gap: 5px; } .vp-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .vp-troop-btn, .vp-path-btn { min-height: 44px; padding: 7px 14px; font-size: var(--font-size-sm); font-weight: 700; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); border-radius: var(--border-radius-md); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .vp-troop-btn:hover, .vp-path-btn:hover { color: var(--color-text-primary); background: var(--color-bg-sunken); } .vp-troop-btn:focus-visible, .vp-path-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .vp-troop-active, .vp-path-active { background: var(--color-accent-primary); color: var(--color-on-accent); border-color: var(--color-accent-primary); } .vp-troop-active:hover, .vp-path-active:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); } .vp-path-clear { color: var(--color-status-error); } .vp-totals { display: flex; align-items: center; gap: 6px; font-size: 12px; } .vp-total-label { color: var(--text2); } .vp-total-val { color: var(--color-accent-strong); font-weight: 700; } .vp-save-state { margin-left: 12px; font-size: 11px; padding: 2px 8px; border-radius: var(--border-radius-lg); } .vp-save-pending { background: var(--warn-bg); color: var(--color-accent-strong); } .vp-save-ok { background: var(--ok-bg); color: var(--ok-text); } .vp-body { display: flex; flex: 1; overflow: hidden; background: transparent; } .vp-columns { flex: 1; overflow-x: auto; overflow-y: auto; display: flex; gap: 8px; padding: 10px; align-items: flex-start; } .vp-col { display: flex; flex-direction: column; gap: 6px; flex: 0 0 220px; width: 220px; min-width: 220px; max-width: 220px; } .vp-col-hdr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .vp-col-title { color: var(--color-accent-strong); font-weight: 700; font-size: 13px; } .vp-col-cost { color: var(--text2); font-size: 11px; } .vp-col-prog { font-size: 11px; padding: 1px 7px; border-radius: var(--border-radius-lg); background: var(--bg3); color: var(--text2); border: 1px solid var(--border); } .vp-prog-partial { color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .vp-prog-done { color: var(--ok-text); border-color: var(--ok-border); background: var(--ok-bg); } .vp-tree-card { position: relative; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); cursor: pointer; transition: background .1s, border-color .1s; } .vp-tree-step { position: absolute; top: 5px; right: 5px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--gold); color: #000; font-weight: 700; font-size: 11px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .vp-tree-card:hover { background: var(--bg3); border-color: var(--color-accent-strong); } .vp-tree-partial { border-color: var(--color-accent-strong); background: var(--warn-bg); } .vp-tree-done { border-color: var(--ok-border); background: var(--ok-bg); } .vp-tree-selected { outline: 2px solid var(--gold); outline-offset: -2px; } .vp-tree-name { font-weight: 700; font-size: 12px; padding-right: 28px; } .vp-tree-cost { color: var(--text2); font-size: 11px; margin-bottom: 4px; } .vp-tree-bar-wrap { height: 4px; background: var(--bg3); border-radius: var(--border-radius-lg); overflow: hidden; margin-bottom: 3px; } .vp-tree-bar { height: 100%; background: var(--gold); transition: width .15s; } .vp-tree-prog { font-size: 10px; color: var(--text2); } .vp-legion { padding: 6px 8px; background: var(--surface-inset); border: 1px dashed var(--border2); border-radius: var(--border-radius-lg); margin-top: 4px; } .vp-legion-done { border-color: var(--ok-border); background: var(--ok-bg); } .vp-legion-title { font-size: 10px; font-weight: 700; color: var(--color-accent-strong); text-transform: uppercase; letter-spacing: .05em; } .vp-legion-name { font-size: 12px; font-weight: 600; } .vp-legion-desc { font-size: 10px; color: var(--text2); line-height: 1.3; } /* Detail panel */ .vp-detail { width: 320px; min-width: 320px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg2); border-left: 1px solid var(--border); } .vp-detail-top { flex: 1; overflow-y: auto; padding: 10px; } .vp-detail-empty { padding: 20px 10px; text-align: center; color: var(--text2); font-style: italic; } .vp-detail-empty-sm { padding: 6px 0; color: var(--text2); font-style: italic; font-size: 11px; } .vp-detail-title { font-size: 14px; font-weight: 700; color: var(--color-accent-strong); } .vp-detail-cost { font-size: 11px; color: var(--text2); margin-bottom: 8px; } .vp-detail-section { font-size: 10px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border); } .vp-detail-nodes, .vp-detail-milestones { display: flex; flex-direction: column; gap: 3px; } .vp-detail-node, .vp-detail-ms { display: flex; align-items: flex-start; gap: 6px; padding: 5px 6px; border-radius: var(--border-radius-lg); cursor: pointer; border: 1px solid transparent; background: var(--surface-inset); } .vp-detail-node:hover, .vp-detail-ms:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); } .vp-detail-node-checked, .vp-detail-ms-done { background: var(--ok-bg); border-color: var(--ok-border); } .vp-detail-node-passive { border-left: 2px solid var(--gold); } .vp-detail-node-check { width: 14px; height: 14px; min-width: 14px; border-radius: var(--border-radius-lg); border: 1.5px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ok-text); background: var(--color-bg-tertiary); margin-top: 1px; } .vp-detail-node-checked .vp-detail-node-check, .vp-detail-ms-done .vp-detail-node-check { background: var(--color-status-success); border-color: var(--color-status-success); color: #fff; } .vp-detail-node-info { display: flex; flex-direction: column; gap: 1px; flex: 1; } .vp-detail-node-name { font-size: 11px; font-weight: 600; } .vp-detail-node-effect { font-size: 10px; color: var(--text2); line-height: 1.3; } .vp-detail-ms-pct { width: 32px; min-width: 32px; padding: 1px 0; background: var(--bg3); border-radius: var(--border-radius-lg); text-align: center; font-size: 10px; font-weight: 700; color: var(--color-accent-strong); } .vp-detail-ms-effect { flex: 1; font-size: 10px; line-height: 1.3; } .vp-detail-ms-check { font-size: 12px; color: var(--ok-text); min-width: 14px; text-align: center; } .vp-detail-actions { display: flex; gap: 6px; margin-top: 10px; } .vp-btn-all, .vp-btn-clear { flex: 1; min-height: 40px; padding: 6px 10px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); cursor: pointer; } .vp-btn-all { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); } .vp-btn-clear { background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-text); } .vp-btn-all:hover { background: var(--color-status-success-soft); border-color: var(--color-status-success); } .vp-btn-clear:hover { background: var(--color-status-error-soft); border-color: var(--color-status-error); } .vp-detail-summary { border-top: 1px solid var(--border); padding: 10px; max-height: 40%; overflow-y: auto; background: var(--color-bg-tertiary); } .vp-sum-rows { display: flex; flex-direction: column; } .vp-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; border-bottom: 1px solid var(--color-border-secondary); font-size: 11px; } .vp-sum-name { color: var(--text2); } .vp-sum-val { font-weight: 700; font-variant-numeric: tabular-nums; } .vp-sum-pos { color: var(--ok-text); } .vp-sum-neg { color: var(--bad-text); } @media (max-width: 900px) { .vp-detail { width: 100%; min-width: unset; border-left: none; border-top: 1px solid var(--border); } .vp-body { flex-direction: column; } } /* ── Hero Roster ──────────────────────────────────────────────────────── */ .hr-wrap { display: flex; flex-direction: column; gap: var(--space-4); } .hr-section { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); } .hr-section-hdr { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-secondary); } .hr-save-state { font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); text-transform: none; letter-spacing: 0; } .hr-save-pending { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .hr-save-ok { background: var(--color-status-success-soft); color: var(--color-status-success); } .hr-legion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .hr-legion { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 6px; } .hr-legion-hdr { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .hr-legion-title { color: var(--color-accent-strong); font-weight: 700; } .hr-clear-btn { background: transparent; border: 1px solid var(--border2); color: var(--bad-text); font-size: 10px; padding: 2px 8px; border-radius: var(--border-radius-lg); cursor: pointer; } .hr-clear-btn:hover { background: var(--bad-bg); border-color: var(--bad-border); } .hr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .hr-slot { min-height: 78px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; color: var(--text2); transition: background .1s, border-color .1s; } .hr-slot:hover { background: var(--color-bg-tertiary); border-color: var(--color-accent-strong); } .hr-slot-empty { align-items: center; justify-content: center; border-style: dashed; } .hr-slot-plus { font-size: 22px; color: var(--text2); font-weight: 700; line-height: 1; } .hr-slot-empty-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .hr-slot-filled { background: var(--ok-bg); border-color: var(--ok-border); color: var(--color-text-primary); } .hr-slot-filled:hover { background: var(--color-status-success-soft); border-color: var(--color-status-success); } .hr-slot-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hr-slot-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; } .hr-slot-season { background: var(--color-accent-soft); color: var(--color-accent-strong); border: 1px solid var(--color-accent-soft-border); } .hr-ctrls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .hr-count { margin-left: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .hr-count b { color: var(--color-accent-strong); } .hr-card { position: relative; transition: opacity .1s; } .hr-card.hr-owned { border-color: var(--ok-border); box-shadow: 0 0 0 1px rgba(108, 208, 125, .12) inset; } .hr-card.hr-assigned { opacity: .55; cursor: not-allowed; } .hr-card-tag { margin-top: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 3px 4px; border-radius: var(--border-radius-lg); } .hr-card-tag-owned { color: var(--ok-text); background: var(--color-status-success-soft); border: 1px solid var(--ok-border); } .hr-card-tag-assigned { color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); } /* Picker dialog */ .hr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; max-height: 60vh; overflow-y: auto; } .hr-pick-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; } .hr-pick-card:hover { border-color: var(--color-accent-strong); background: var(--bg2); } .hr-pick-name { font-weight: 700; font-size: 13px; } .hr-pick-meta { display: flex; flex-wrap: wrap; gap: 3px; } .hr-empty-pick { padding: 16px; text-align: center; color: var(--text2); font-style: italic; } /* ── Dragon Master ────────────────────────────────────────────────────── */ .dm-wrap { padding: 14px; display: flex; flex-direction: column; gap: 14px; } .dm-subtabs { display: flex; align-items: center; gap: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px 16px 0 0; padding: 0 4px; flex-wrap: wrap; } .dm-stab { background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; min-height: 44px; padding: 12px 18px; font-size: var(--font-size-base); font-weight: 700; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; } .dm-stab:hover { color: var(--color-text-primary); } .dm-stab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .dm-stab-active { color: var(--color-accent-strong); border-bottom-color: var(--color-accent-primary); } .dm-save-state { margin-left: auto; font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); margin-right: 10px; } .dm-save-pending { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .dm-save-ok { background: var(--color-status-success-soft); color: var(--color-status-success); } .dm-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 0 0 16px 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .dm-h1 { font-size: 18px; font-weight: 700; color: var(--color-accent-strong); margin-bottom: 4px; } .dm-h2 { font-size: 14px; font-weight: 700; color: var(--color-accent-strong); margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding-bottom: 5px; } .dm-p { font-size: 12px; color: var(--text2); line-height: 1.5; } /* Cost cards */ .dm-cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .dm-cost-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; } .dm-cost-blue { border-left: 4px solid var(--color-accent-secondary); background: var(--color-accent-secondary-soft); } .dm-cost-purple { border-left: 4px solid var(--purple); background: var(--purple-soft); } .dm-cost-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; } .dm-cost-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 3px 0; } .dm-cost-row span { color: var(--text2); } .dm-cost-row b { color: var(--color-text-primary); font-weight: 600; } .dm-cost-row-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-size: 13px; } .dm-cost-row-total b { color: var(--color-accent-strong); } .dm-cost-vs b { color: var(--ok-text); } .dm-warn { background: var(--color-status-warning-soft); border: 1px solid var(--warn-border); border-left: 4px solid var(--color-status-warning); color: var(--color-text-primary); padding: 10px 14px; border-radius: var(--border-radius-lg); font-size: 12px; line-height: 1.5; } .dm-tip { background: var(--color-status-success-soft); border: 1px solid var(--ok-border); border-left: 4px solid var(--ok-text); color: var(--color-text-primary); padding: 10px 14px; border-radius: var(--border-radius-lg); font-size: 12px; line-height: 1.5; } /* Tracker grid */ .dm-tracker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; } .dm-piece { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, background .12s; } .dm-piece-ready { border-color: var(--ok-text); background: var(--color-status-success-soft); } .dm-piece-gold { border-color: var(--color-accent-strong); background: var(--color-accent-soft); opacity: .85; } .dm-piece-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .dm-piece-icon { font-size: 22px; } .dm-piece-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); flex: 1; } .dm-piece-tag { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: var(--border-radius-lg); text-transform: uppercase; letter-spacing: .04em; } .dm-piece-tag-ready { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .dm-piece-tag-gold { background: var(--color-accent-soft); color: var(--color-accent-strong); border: 1px solid var(--color-accent-soft-border); } .dm-piece-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .dm-piece-lbl { color: var(--text2); width: 60px; flex-shrink: 0; } .dm-piece-inp { width: 64px; background: var(--bg); border: 1px solid var(--border); color: var(--color-text-primary); border-radius: var(--border-radius-lg); padding: 4px 6px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; } .dm-piece-inp:focus { border-color: var(--color-accent-strong); outline: none; } .dm-piece-target { color: var(--text2); font-size: 11px; } .dm-piece-prog-wrap { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; margin-top: 4px; } .dm-piece-prog-bar { height: 100%; background: linear-gradient(90deg, #58a6ff 0%, #a371f7 50%, var(--ok-text) 100%); transition: width .15s; } .dm-piece-prog-text { font-size: 11px; color: var(--text2); text-align: center; } .dm-piece-need { color: var(--color-status-warning); } .dm-piece-actions { margin-top: 4px; } .dm-piece-btn { width: 100%; min-height: 40px; padding: 8px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text2); transition: background .1s, border-color .1s; } .dm-piece-btn:disabled { opacity: .5; cursor: not-allowed; } .dm-piece-btn-gold:not(:disabled) { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .dm-piece-btn-gold:not(:disabled):hover { background: var(--gold); color: #000; } .dm-piece-btn-undo { color: var(--bad-text); border-color: var(--bad-border); } .dm-piece-btn-undo:hover { background: var(--bad-bg); } /* Totals row */ .dm-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; } .dm-total-card { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-total-val { font-size: 18px; font-weight: 700; color: var(--color-accent-strong); font-variant-numeric: tabular-nums; } .dm-total-lbl { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; } /* Sequence diagrams */ .dm-seq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-seq-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 12px; min-width: 80px; } .dm-seq-num { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .dm-seq-num-1 { color: var(--color-status-error); } .dm-seq-num-2 { color: var(--color-status-warning); } .dm-seq-num-3 { color: var(--color-accent-strong); } .dm-seq-num-4 { color: var(--color-status-success); } .dm-seq-num-5 { color: var(--color-accent-secondary-strong); } .dm-seq-num-6 { color: var(--purple); } .dm-seq-icon { font-size: 24px; } .dm-seq-label { font-size: 11px; color: var(--text2); font-weight: 600; } .dm-seq-arrow { font-size: 18px; color: var(--text2); font-weight: 700; } /* Fusion flow */ /* Blue and Purple routes as two clearly-separated cards */ .dm-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); } .dm-route { border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); padding: var(--space-4); } .dm-route-b { border-left: 4px solid var(--color-accent-secondary); background: var(--color-accent-secondary-soft); } .dm-route-p { border-left: 4px solid var(--purple); background: var(--purple-soft); } .dm-route-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-2); } .dm-route-blue { color: var(--color-accent-secondary-strong); } .dm-route-purple { color: var(--purple); } .dm-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-flow-node { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--border-radius-lg); padding: 8px 14px; min-width: 80px; border: 1px solid; } .dm-flow-blue { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary); color: var(--color-accent-secondary-strong); } .dm-flow-purple { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); } .dm-flow-orange { background: var(--color-status-warning-soft); border-color: var(--color-status-warning); color: var(--color-status-warning); } .dm-flow-gold { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .dm-flow-qty { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .dm-flow-tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .dm-flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text2); font-size: 18px; font-weight: 700; } .dm-flow-cost { font-size: 10px; color: var(--text2); font-weight: 600; } /* Decomp table */ .dm-table-wrap { overflow-x: auto; } .dm-table { width: 100%; border-collapse: collapse; font-size: 12px; } .dm-table th, .dm-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); } .dm-table th { background: var(--bg3); color: var(--color-accent-strong); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .dm-table td { font-variant-numeric: tabular-nums; } .dm-gain { color: var(--ok-text); font-weight: 700; } /* ── Tile War ─────────────────────────────────────────────────────────── */ .tw-wrap { background: #0b0e1a; /* intentional dark tactical console (both themes) */ color: #e8eaf0; padding: 16px 18px; margin: -22px; /* bleed to the edges of .roc-main padding */ min-height: calc(100vh - 60px); display: flex; flex-direction: column; gap: 10px; } .tw-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; } .tw-tab { background: var(--color-bg-tertiary); border: 1px solid transparent; border-radius: var(--border-radius-md); color: var(--color-text-secondary); min-height: 40px; padding: 8px 18px; font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .tw-tab:hover { color: var(--color-text-primary); background: var(--color-bg-sunken); } .tw-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .tw-tab-active { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border-primary); box-shadow: var(--shadow-sm); } .tw-tab-bad.tw-tab-active { border-top: 3px solid var(--bad-text); } .tw-tab-good.tw-tab-active { border-top: 3px solid var(--archer); } .tw-tab-play.tw-tab-active { border-top: 3px solid var(--cavalry); } .tw-topbar { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; } .tw-mode-title { flex: 1 1 auto; font-size: var(--font-size-base); font-weight: 800; color: var(--color-text-primary); letter-spacing: .01em; } .tw-spd-row { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .tw-spd-lbl { margin-right: 4px; font-weight: 700; } .tw-spd-btn { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); border-radius: var(--border-radius-sm); min-height: 44px; padding: 5px 14px; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; } .tw-spd-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .tw-spd-on { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); border-color: var(--color-accent-secondary-strong); } .tw-ctrl { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); border-radius: var(--border-radius-md); min-height: 40px; padding: 7px 16px; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; transition: background .15s; } .tw-ctrl:hover { background: var(--color-bg-tertiary); } .tw-time { font-size: var(--font-size-md); font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; min-width: 64px; } .tw-winner { margin-left: auto; padding: 6px 14px; border-radius: var(--border-radius-full); font-weight: 800; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .05em; } .tw-winner-blue { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); border: 1px solid var(--color-accent-secondary-strong); } .tw-winner-red { background: var(--color-status-error-soft); color: var(--color-status-error); border: 1px solid var(--color-status-error); } .tw-instructions { background: var(--color-accent-secondary-soft); border: 1px solid var(--color-accent-secondary-soft); border-left: 3px solid var(--color-accent-secondary-strong); color: var(--color-text-primary); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .tw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; } .tw-leg { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .tw-leg-sw { width: 13px; height: 13px; border-radius: var(--border-radius-lg); flex-shrink: 0; border: 1px solid transparent; } .tw-leg-cb { background: #4a90d9; border-color: #88ccff; } .tw-leg-cr { background: #d94a4a; border-color: #ff9999; } .tw-leg-blue { background: #185fa5; } .tw-leg-red { background: #a32d2d; } .tw-leg-blue-p { background: #185fa5; border: 2px dashed #6ab4ff; } .tw-leg-red-p { background: #a32d2d; border: 2px dashed #ff8888; } .tw-leg-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff9966; border: 1.5px solid #fff; } .tw-leg-dot-ret { opacity: .4; border-color: rgba(255,255,255,.4); } .tw-body { display: flex; gap: 12px; align-items: flex-start; } .tw-grid-scroll { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; } .tw-grid-host { /* Sized inline by JS module via canvas + tile rows */ } /* Tile colors painted by JS via class assignment */ .tw-tile { /* Base sized inline by JS; styled here */ cursor: default; } .tw-tile.tw-blue { background: #185fa5; color: #b5d4f4; border-color: #2a7fcc; } .tw-tile.tw-red { background: #a32d2d; color: #f7c1c1; border-color: #cc4444; } .tw-tile.tw-blue-p { background: #185fa5; color: #b5d4f4; border: 2px dashed #6ab4ff; } .tw-tile.tw-red-p { background: #a32d2d; color: #f7c1c1; border: 2px dashed #ff8888; } .tw-tile.tw-cb { background: #4a90d9; color: #fff; border: 2px solid #88ccff; } .tw-tile.tw-cr { background: #d94a4a; color: #fff; border: 2px solid #ff9999; } .tw-castle-burning { background: #d94a4a; color: #fff; border: 2px solid #ff9999; animation: tw-burn .7s ease-in-out infinite; } @keyframes tw-burn { 0%, 100% { box-shadow: 0 0 4px 2px rgba(220,60,60,.5); } 50% { box-shadow: 0 0 14px 6px rgba(255,80,80,.95); } } /* Click affordance in play mode */ .tw-wrap[data-mode="play"] .tw-tile { cursor: crosshair; } .tw-tile:hover { filter: brightness(1.15); } /* Side panel (legions + log) */ .tw-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; } .tw-side-section { background: #22252e; border: 1px solid #2e3140; border-radius: var(--border-radius-lg); padding: 10px 12px; } .tw-side-hdr { font-size: 11px; font-weight: 700; color: var(--color-accent-strong); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #2e3140; } .tw-leg-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--border-radius-lg); font-size: 11px; margin-bottom: 3px; background: #1a1d24; border: 1px solid #2a2e38; } .tw-leg-row-blue { border-left: 3px solid #4a90d9; } .tw-leg-row-red { border-left: 3px solid #d94a4a; } .tw-leg-id { font-weight: 700; color: #e8eaf0; width: 38px; flex-shrink: 0; } .tw-leg-status { flex: 1; color: #9aa0b4; font-size: 10.5px; } .tw-leg-status-idle { color: #6a7080; } .tw-leg-status-out { color: #ffb070; } .tw-leg-status-ret { color: #9aa0b4; } .tw-leg-status-capturing { color: #f7a0a0; font-weight: 700; } .tw-leg-eta { color: var(--color-accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 10.5px; } .tw-log { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; } .tw-log-entry { font-size: 10.5px; line-height: 1.4; padding: 4px 6px; border-radius: var(--border-radius-lg); background: #1a1d24; } .tw-log-neutral { color: #9aa0b4; } .tw-log-good { color: #a0f7c0; } .tw-log-warn { color: #f7c1a0; } .tw-log-bad { color: #f7a0a0; } .tw-log-defeat { color: #ff6060; font-weight: 700; } .tw-log-win { color: #60ff90; font-weight: 700; } .tw-verdict { background: #22252e; border: 1px solid #2e3140; border-left: 3px solid #4a90d9; border-radius: var(--border-radius-lg); padding: 10px 14px; transition: border-color .4s; } .tw-verdict-defeat { border-left-color: #ff3333; background: #2e1a1a; } .tw-verdict-t { font-size: 11px; color: #9aa0b4; margin-bottom: 4px; } .tw-verdict-msg { font-size: 13px; line-height: 1.55; } .tw-vm-neutral { color: #9aa0b4; } .tw-vm-good { color: #a0f7c0; } .tw-vm-warn { color: #f7c1a0; } .tw-vm-bad { color: #f7a0a0; } .tw-vm-defeat { color: #ff6060; font-weight: 700; font-size: 14px; } .tw-vm-win { color: #60ff90; font-weight: 700; font-size: 14px; } @media (max-width: 1100px) { .tw-body { flex-direction: column; } .tw-side { flex: 0 0 auto; width: 100%; } } /* ════════════════════════════════════════════════════════════════ AURORA GLASS — feature-page rollout layer Upgrades the top-level panels of every feature namespace to the glass treatment + Aurora radii. Declared last so it wins over the original (lower-specificity, earlier) rules. Nested cards keep their solid surfaces for readability over the glass. ════════════════════════════════════════════════════════════════ */ /* Top-level panels / toolbars / sections → frosted glass */ .rtp-toolbar, .rtp-filterbar, .rtp-statbar, .rtp-book, .ntp-row, .hc-ctrls, .hc-selbar, .hc-result-col, .sp-toolbar, .sp-canvas-wrap, .sp-side-section, .ec-toolbar, .ec-section, .vp-header, .hr-section, .dm-section, .dm-subtabs { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); } /* Dragon Master keeps its tab-strip + body visually joined */ .dm-subtabs { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; box-shadow: none; } .dm-section { border-radius: 0 0 var(--radius) var(--radius); } /* Virtue header spans full width — square it, keep the glass */ .vp-header { border-radius: 0; box-shadow: none; } /* Modals & dialogs → glass + soft depth, with a blurred backdrop */ .ntp-modal-box { background: var(--glass-bg); -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .ntp-modal-backdrop, .mud-overlay-dialog { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mud-dialog { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; } /* Rounder, friendlier controls across the feature pages */ .rtp-btn, .rtp-dd-btn, .rtp-search, .hc-sel, .ec-input, .ec-select, .ec-vt-btn, .ec-date, .vp-troop-btn, .vp-path-btn, .vp-col-prog, .dm-piece-btn, .dm-piece-inp { border-radius: var(--radius-sm); } /* Accent glow on focus for the main search/inputs (gold == accent now) */ .rtp-search:focus, .hc-sel:focus, .ec-input:focus, .ec-select:focus, .dm-piece-inp:focus { box-shadow: 0 0 0 3px var(--accent-soft); } /* Lift cards a touch more on hover, with an Aurora edge */ .ntp-node:hover, .hcard:hover, .hr-pick-card:hover, .dm-piece:hover, .ec-tile-card:hover, .vp-tree-card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--glass-border); } @media (prefers-reduced-motion: reduce) { .ntp-node, .hcard, .hr-pick-card, .dm-piece, .ec-tile-card, .vp-tree-card { transition: none; } }