/* Volya — web application shell v4 (rebrand + collapsible sidebar). Structure/navigation is UNCHANGED from the approved layout — this pass only renames the brand and adds a collapsible sidebar (eJOY-style: icons stay, only labels hide, content area reflows automatically). */ .wt-app { --page-bg: #f6f6fd; --card-bg: #ffffff; --card-border: #e9e8f7; --card-shadow: var(--wt-shadow-sm); --ink: #1c1a3a; --ink-muted: #656a92; --ink-faint: #9a9dc2; --divider: #eeedf9; --control-bg: #ffffff; --control-border: #dcdaf2; } html, body { margin: 0; padding: 0; height: 100%; } [hidden] { display: none !important; } body { background: var(--page-bg); color: var(--ink); font-family: var(--wt-font); font-size: var(--wt-fs); line-height: 1.55; -webkit-font-smoothing: antialiased; } .wt-app { /* "auto" (not a fixed px) so the track always matches .wt-sidebar's own (transitioning) width below — the 1fr content column reflows on every animation frame with no extra JS, which is what keeps the collapse glitch-free. */ display: grid; grid-template-columns: auto 1fr; min-height: 100vh; background: var(--page-bg); } /* ---------- Sidebar (deep indigo) ---------- */ .wt-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; width: 272px; display: flex; flex-direction: column; background: linear-gradient(190deg, var(--wt-navy) 0%, var(--wt-navy-2) 100%); color: var(--wt-navy-text); overflow: hidden; transition: width var(--wt-motion) var(--wt-ease); } /* Collapsed: ~76px, icons only. Two triggers map to the same state — the html-level marker (set synchronously before paint, see the inline anti-flash script in ) and the .wt-app class shell.js toggles after it takes over on load. Plain compound selectors (not :where()) so the higher specificity unambiguously wins over the base .wt-sidebar rule above regardless of source order. */ .wt-app.is-collapsed .wt-sidebar, html.voria-collapsed-init .wt-sidebar { width: 76px; } .wt-app.is-collapsed .wt-wordmark, html.voria-collapsed-init .wt-wordmark, .wt-app.is-collapsed .wt-sidebar-foot, html.voria-collapsed-init .wt-sidebar-foot, .wt-app.is-collapsed .wt-nav-group-label, html.voria-collapsed-init .wt-nav-group-label, .wt-app.is-collapsed .wt-nav-item span, html.voria-collapsed-init .wt-nav-item span { display: none; } .wt-app.is-collapsed .wt-sidebar-head, html.voria-collapsed-init .wt-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; } .wt-app.is-collapsed .wt-nav-item, html.voria-collapsed-init .wt-nav-item { justify-content: center; padding: 11px 0; } /* ---------- Header: hamburger + wordmark, one compact row ------------- */ .wt-sidebar-head { display: flex; align-items: center; gap: var(--wt-space-3); padding: var(--wt-space-5) var(--wt-space-4); transition: padding var(--wt-motion) var(--wt-ease), justify-content var(--wt-motion) var(--wt-ease); } .wt-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; background: transparent; border: none; border-radius: var(--wt-radius-sm); color: #fff; cursor: pointer; transition: background var(--wt-motion-fast) var(--wt-ease); } .wt-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.1); } .wt-sidebar-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .wt-sidebar-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } /* Typographic wordmark — "Capital Mark": tracked-out small caps anchored by one oversized, gradient-filled "V" (dropped-cap technique). No icon, no logotype — the anchor letter + tracking IS the signature detail. */ .wt-wordmark { font-size: 24px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #f4f3ff; text-decoration: none; line-height: 1; white-space: nowrap; } .wt-wordmark .wt-wordmark-cap { font-weight: 800; font-size: 1.4em; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--wt-primary), var(--wt-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 0.01em; } .wt-nav { display: flex; flex-direction: column; gap: var(--wt-space-5); padding: var(--wt-space-2) var(--wt-space-3); overflow-y: auto; flex: 1; } .wt-nav-group { display: flex; flex-direction: column; gap: 3px; } .wt-nav-group-label { padding: var(--wt-space-2) var(--wt-space-3) 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wt-navy-text-muted); opacity: 0.8; } .wt-nav-item { position: relative; display: flex; align-items: center; gap: var(--wt-space-3); width: 100%; padding: 11px var(--wt-space-3); background: transparent; border: none; border-radius: var(--wt-radius); color: var(--wt-navy-text-muted); font-family: inherit; font-size: var(--wt-fs); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background var(--wt-motion-fast) var(--wt-ease), color var(--wt-motion-fast) var(--wt-ease), transform var(--wt-motion-fast) var(--wt-ease); } .wt-nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; transform: translateX(2px); } .wt-nav-item.is-active { background: var(--wt-gradient); color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4); } .wt-nav-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: inherit; } .wt-nav-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .wt-sidebar-foot { padding: var(--wt-space-4); border-top: 1px solid rgba(255, 255, 255, 0.09); color: var(--wt-navy-text-muted); font-size: var(--wt-fs-sm); } .wt-sidebar-foot a { color: var(--wt-navy-text-muted); text-decoration: none; } .wt-sidebar-foot a:hover { color: #fff; } /* ---------- Main / Top bar ---------- */ .wt-main { min-width: 0; display: flex; flex-direction: column; } .wt-topbar { display: flex; align-items: center; gap: var(--wt-space-4); padding: var(--wt-space-4) var(--wt-space-6); background: var(--wt-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky; top: 0; z-index: 20; } .wt-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; flex: none; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--wt-radius-sm); cursor: pointer; color: #fff; } .wt-menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .wt-topbar-search { flex: 1; min-width: 0; max-width: 540px; position: relative; } .wt-topbar-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--wt-navy-text-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .wt-topbar-search input { width: 100%; box-sizing: border-box; padding: 13px var(--wt-space-4) 13px 44px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; color: #fff; font-family: inherit; font-size: var(--wt-fs-lg); } .wt-topbar-search input:focus { outline: none; border-color: var(--wt-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25); } .wt-topbar-search input::placeholder { color: var(--wt-navy-text-muted); } .wt-topbar-spacer { flex: 1; } .wt-topbar-lang { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--wt-navy-text-muted); font-size: var(--wt-fs-sm); font-weight: 600; } .wt-topbar-badge { flex: none; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); } .wt-topbar-badge.is-pro { background: var(--wt-gradient-warm); border-color: transparent; } .wt-topbar-avatar { position: relative; flex: none; } .wt-avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--wt-gradient-warm); color: #fff; border: none; font-weight: 700; font-size: var(--wt-fs); cursor: pointer; } .wt-avatar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .wt-avatar-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--wt-radius); box-shadow: var(--wt-shadow); padding: var(--wt-space-2); z-index: 30; } .wt-avatar-menu-email { display: block; padding: var(--wt-space-2) var(--wt-space-3); color: var(--ink-muted); font-size: var(--wt-fs-sm); border-bottom: 1px solid var(--divider); margin-bottom: var(--wt-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wt-avatar-menu-item { display: block; width: 100%; box-sizing: border-box; padding: 9px var(--wt-space-3); background: transparent; border: none; border-radius: var(--wt-radius-sm); color: var(--ink); font-family: inherit; font-size: var(--wt-fs-sm); text-align: left; text-decoration: none; cursor: pointer; } .wt-avatar-menu-item:hover { background: var(--page-bg); } /* ---------- Content ---------- */ .wt-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--wt-space-6) var(--wt-space-6) 80px; box-sizing: border-box; } .wt-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wt-primary); margin: 0 0 6px; } .wt-page-head { margin-bottom: var(--wt-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-5); flex-wrap: wrap; } .wt-page-head-text h1 { margin: 0; font-size: var(--wt-fs-3xl); font-weight: 800; letter-spacing: -0.02em; } .wt-page-head-text p { margin: 8px 0 0; color: var(--ink-muted); font-size: var(--wt-fs-lg); max-width: 60ch; } .wt-page-head-illustration { flex: none; opacity: 0.95; } .wt-page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wt-space-4); flex-wrap: wrap; } /* ---------- Cards ---------- */ .wt-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--wt-radius-lg); box-shadow: var(--card-shadow); padding: var(--wt-space-5); margin-bottom: var(--wt-space-4); transition: box-shadow var(--wt-motion) var(--wt-ease), transform var(--wt-motion) var(--wt-ease); } .wt-card-head { margin-bottom: var(--wt-space-4); } .wt-card-head:has(> div) { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wt-space-3); } .wt-card-head h2 { margin: 0; font-size: var(--wt-fs-lg); font-weight: 700; } .wt-card-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--wt-fs-sm); } .wt-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-5); padding: 14px 0; border-bottom: 1px solid var(--divider); } .wt-setting-row:first-child { padding-top: 0; } .wt-setting-row:last-child { padding-bottom: 0; border-bottom: none; } .wt-setting-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wt-setting-label { font-weight: 600; } .wt-setting-desc { font-size: var(--wt-fs-sm); color: var(--ink-muted); } /* ---------- Buttons ---------- */ .wt-btn { appearance: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--wt-fs); font-weight: 650; padding: 12px var(--wt-space-5); border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--wt-space-2); transition: background var(--wt-motion-fast) var(--wt-ease), border-color var(--wt-motion-fast) var(--wt-ease), color var(--wt-motion-fast) var(--wt-ease), box-shadow var(--wt-motion-fast) var(--wt-ease), transform var(--wt-motion-fast) var(--wt-ease); } .wt-btn:focus-visible { outline: 2px solid var(--wt-primary); outline-offset: 2px; } .wt-btn-ghost { background: var(--card-bg); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--wt-radius); } .wt-btn-ghost:hover { border-color: var(--wt-primary); color: var(--wt-primary); } .wt-btn-sm { padding: 7px var(--wt-space-3); font-size: var(--wt-fs-sm); border-radius: var(--wt-radius-sm); } .wt-btn-lg { padding: 15px var(--wt-space-6); font-size: var(--wt-fs-lg); } .wt-btn-accent { background: var(--wt-gradient); color: #fff; box-shadow: var(--wt-shadow-glow); } .wt-btn-accent:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79, 70, 229, 0.38); } .wt-btn-danger { background: var(--card-bg); color: var(--wt-danger); border: 1px solid rgba(224, 84, 107, 0.35); border-radius: var(--wt-radius); } .wt-btn-danger:hover { background: var(--wt-danger-ghost); border-color: var(--wt-danger); } .wt-btn:disabled { opacity: 0.5; cursor: default; transform: none !important; box-shadow: none !important; } .wt-btn:disabled:hover { background: inherit; border-color: var(--control-border); color: var(--ink-muted); } .wt-btn-block { width: 100%; } /* ---------- Pills / badges ---------- */ .wt-pill { display: inline-flex; align-items: center; padding: 4px var(--wt-space-3); background: var(--wt-primary-ghost); color: var(--wt-primary); border: 1px solid rgba(79, 70, 229, 0.22); border-radius: 999px; font-size: var(--wt-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .wt-pill.is-muted { background: var(--page-bg); color: var(--ink-muted); border-color: var(--card-border); } .wt-pill.is-ok { background: var(--wt-success-ghost); color: var(--wt-success); border-color: rgba(34, 197, 94, 0.25); } .wt-pill.is-locked { background: var(--wt-amber-ghost); color: #b45309; border-color: rgba(180, 83, 9, 0.2); } /* ---------- Icon chips (shared: stat cards, activity, collections, empty states) --- */ .wt-icon-chip { width: 42px; height: 42px; border-radius: var(--wt-radius); display: inline-flex; align-items: center; justify-content: center; flex: none; } .wt-icon-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .wt-icon-chip.sm { width: 34px; height: 34px; border-radius: var(--wt-radius-sm); } .wt-icon-chip.sm svg { width: 17px; height: 17px; } .wt-icon-chip.lg { width: 56px; height: 56px; border-radius: var(--wt-radius-lg); } .wt-icon-chip.lg svg { width: 26px; height: 26px; } .wt-icon-chip.c-indigo { background: var(--wt-primary-ghost); color: var(--wt-primary); } .wt-icon-chip.c-purple { background: var(--wt-purple-ghost); color: var(--wt-purple); } .wt-icon-chip.c-cyan { background: var(--wt-cyan-ghost); color: #0891b2; } .wt-icon-chip.c-green { background: var(--wt-success-ghost); color: var(--wt-success); } .wt-icon-chip.c-amber { background: var(--wt-amber-ghost); color: #b45309; } /* ========================================================================== Illustrations — small, abstract, decorative (never stock photos) ========================================================================== */ .wt-illustration { display: block; } .wt-illustration .fill-primary { fill: var(--wt-primary); } .wt-illustration .fill-purple { fill: var(--wt-purple); } .wt-illustration .fill-cyan { fill: var(--wt-cyan); } .wt-illustration .fill-white { fill: #fff; } .wt-illustration .stroke-white { stroke: #fff; } /* ========================================================================== Dashboard ========================================================================== */ .wt-hero { background: var(--wt-gradient-warm); border-radius: var(--wt-radius-xl); padding: var(--wt-space-6) var(--wt-space-7); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-6); flex-wrap: wrap; margin-bottom: var(--wt-space-4); box-shadow: 0 20px 44px rgba(79, 70, 229, 0.3); position: relative; overflow: hidden; } .wt-hero::before { content: ''; position: absolute; right: -80px; top: -100px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .wt-hero::after { content: ''; position: absolute; left: 30%; bottom: -120px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); } .wt-hero-text { position: relative; z-index: 1; max-width: 56ch; } .wt-hero-eyebrow { display: block; font-size: var(--wt-fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 8px; } .wt-hero h1 { margin: 0 0 10px; font-size: var(--wt-fs-3xl); font-weight: 800; letter-spacing: -0.02em; } .wt-hero p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--wt-fs-lg); } .wt-hero-cta { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: var(--wt-space-4); } .wt-hero-cta .wt-btn-accent { background: #fff; color: var(--wt-primary); box-shadow: 0 10px 24px rgba(30, 27, 75, 0.28); } .wt-hero-cta .wt-btn-accent:hover { transform: translateY(-1px); } .wt-hero-illustration { position: relative; z-index: 1; flex: none; } .wt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--wt-space-3); margin-bottom: var(--wt-space-4); } .wt-stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--wt-radius-lg); box-shadow: var(--card-shadow); padding: var(--wt-space-4) var(--wt-space-5); display: flex; flex-direction: column; gap: 8px; transition: transform var(--wt-motion) var(--wt-ease), box-shadow var(--wt-motion) var(--wt-ease); } .wt-stat-card:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow); } .wt-stat-card-label { font-size: var(--wt-fs-sm); color: var(--ink-muted); font-weight: 600; margin-top: 2px; } .wt-stat-card-value { font-size: 27px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .wt-stat-card-hint { font-size: var(--wt-fs-sm); color: var(--ink-faint); } .wt-dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--wt-space-4); align-items: start; } .wt-progress-card { background: var(--wt-gradient-soft); border: 1px solid rgba(79, 70, 229, 0.14); } .wt-progress-bar { height: 11px; border-radius: 999px; background: rgba(79, 70, 229, 0.12); overflow: hidden; margin-top: var(--wt-space-2); } .wt-progress-fill { height: 100%; border-radius: 999px; background: var(--wt-gradient); transition: width 0.4s var(--wt-ease); } .wt-progress-label { display: flex; justify-content: space-between; font-size: var(--wt-fs-sm); color: var(--ink-muted); font-weight: 600; } .wt-activity-list { display: flex; flex-direction: column; } .wt-activity-row { display: flex; align-items: center; gap: var(--wt-space-3); padding: var(--wt-space-3) 0; border-bottom: 1px solid var(--divider); } .wt-activity-row:last-child { border-bottom: none; padding-bottom: 0; } .wt-activity-body { min-width: 0; flex: 1; } .wt-activity-title { font-weight: 600; font-size: var(--wt-fs); } .wt-activity-meta { font-size: var(--wt-fs-sm); color: var(--ink-faint); } .wt-quick-actions { display: flex; flex-wrap: wrap; gap: var(--wt-space-3); } .wt-quick-action { flex: 1 1 160px; display: flex; align-items: center; gap: var(--wt-space-3); padding: var(--wt-space-3) var(--wt-space-4); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--wt-radius-lg); text-decoration: none; color: var(--ink); font-weight: 600; transition: transform var(--wt-motion) var(--wt-ease), box-shadow var(--wt-motion) var(--wt-ease), border-color var(--wt-motion) var(--wt-ease); } .wt-quick-action:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); border-color: rgba(79, 70, 229, 0.25); } /* ========================================================================== Dashboard: real account stats (review activity, per-day charts, workspace progress) — replaces the old hardcoded demo content. Visual language mirrors the extension's Settings > Statistics page (src/options/ options.css, .wt-st-* classes) using this site's own variable names. ========================================================================== */ .wt-dash-activity { display: flex; flex-direction: column; } .wt-dash-activity-row { display: flex; align-items: center; justify-content: space-between; padding: var(--wt-space-2) 0; border-bottom: 1px solid var(--divider); } .wt-dash-activity-row:last-child { border-bottom: none; padding-bottom: 0; } .wt-dash-activity-label { font-size: var(--wt-fs-sm); color: var(--ink-muted); } .wt-dash-activity-value { font-weight: 700; font-variant-numeric: tabular-nums; } .wt-dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wt-space-4); margin-top: var(--wt-space-4); } @media (max-width: 720px) { .wt-dash-charts { grid-template-columns: 1fr; } } .wt-dash-chart { display: flex; flex-direction: column; gap: var(--wt-space-2); } .wt-dash-chart-scale { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--wt-fs-sm); color: var(--ink-faint); } .wt-dash-chart-total { color: var(--ink-muted); font-weight: 600; } .wt-dash-plot { display: flex; align-items: flex-end; gap: 2px; height: 110px; } .wt-dash-bar-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; } .wt-dash-bar { width: 100%; background: var(--wt-primary); border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity var(--wt-motion-fast) var(--wt-ease); } .wt-dash-bar.is-zero { background: var(--control-border); border-radius: 2px; } .wt-dash-bar-col:hover .wt-dash-bar { opacity: 0.75; } .wt-dash-axis { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ink-faint); } .wt-dash-chart-empty { margin: 0; padding: var(--wt-space-5) var(--wt-space-3); text-align: center; color: var(--ink-faint); font-size: var(--wt-fs-sm); } .wt-dash-ws-list { display: flex; flex-direction: column; gap: var(--wt-space-3); } .wt-dash-ws-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--wt-space-3); border-bottom: 1px solid var(--divider); } .wt-dash-ws-row:last-child { border-bottom: none; padding-bottom: 0; } .wt-dash-ws-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wt-space-2); } .wt-dash-ws-name { font-weight: 700; } .wt-dash-ws-last { font-size: 11px; color: var(--ink-faint); white-space: nowrap; } .wt-dash-ws-meta { font-size: var(--wt-fs-sm); color: var(--ink-muted); } /* ========================================================================== Billing ========================================================================== */ .wt-billing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-4); flex-wrap: wrap; } .wt-billing-plan-name { font-size: 25px; font-weight: 800; margin: 4px 0 0; } .wt-billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wt-space-4); margin: var(--wt-space-4) 0; } .wt-billing-stat-label { font-size: var(--wt-fs-sm); color: var(--ink-muted); } .wt-billing-stat-value { font-weight: 700; font-size: var(--wt-fs-lg); margin-top: 2px; } .wt-billing-actions { display: flex; gap: var(--wt-space-2); flex-wrap: wrap; margin-top: var(--wt-space-4); padding-top: var(--wt-space-4); border-top: 1px solid var(--divider); } .wt-billing-cycle-toggle { display: flex; gap: var(--wt-space-2); margin-top: var(--wt-space-4); } .wt-billing-cycle-toggle .wt-btn.is-selected { background: var(--wt-primary); color: #fff; border-color: var(--wt-primary); } #billing-free > .wt-card > #upgrade-btn { margin-top: var(--wt-space-3); } .wt-billing-card-pro { border: 1px solid transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--wt-gradient-warm) border-box; box-shadow: var(--wt-shadow); } .wt-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wt-space-3); } .wt-feature-list li { display: flex; align-items: center; gap: var(--wt-space-3); font-size: var(--wt-fs); } .wt-feature-list.is-locked li { color: var(--ink-faint); } .wt-invoice-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-3); padding: var(--wt-space-3) 0; border-bottom: 1px solid var(--divider); font-size: var(--wt-fs-sm); } .wt-invoice-row:last-child { border-bottom: none; } /* ---------- Empty states ---------- */ .wt-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wt-space-3); padding: 48px var(--wt-space-4) 40px; } .wt-empty-state h2 { margin: var(--wt-space-2) 0 0; font-size: var(--wt-fs-lg); font-weight: 700; } .wt-empty-state p { margin: 0; max-width: 46ch; color: var(--ink-muted); } /* ---------- Profile ---------- */ .wt-profile-head { display: flex; align-items: center; gap: var(--wt-space-4); margin-bottom: var(--wt-space-2); } .wt-profile-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--wt-gradient-warm); color: #fff; font-size: 27px; font-weight: 700; box-shadow: var(--wt-shadow-glow); } .wt-profile-name { margin: 0; font-size: 21px; font-weight: 800; } .wt-profile-email { margin: 2px 0 0; color: var(--ink-muted); } .wt-info-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-4); padding: 12px 0; border-bottom: 1px solid var(--divider); } .wt-info-row:last-child { border-bottom: none; padding-bottom: 0; } .wt-info-row:first-child { padding-top: 0; } .wt-info-label { color: var(--ink-muted); font-size: var(--wt-fs-sm); } .wt-info-value { font-weight: 600; } /* ========================================================================== Word Library ========================================================================== */ .wt-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 999px; margin-bottom: var(--wt-space-4); } .wt-tab-btn { appearance: none; border: none; background: transparent; cursor: pointer; padding: 10px var(--wt-space-4); border-radius: 999px; font-family: inherit; font-size: var(--wt-fs); font-weight: 650; color: var(--ink-muted); transition: background var(--wt-motion-fast) var(--wt-ease), color var(--wt-motion-fast) var(--wt-ease); } .wt-tab-btn:hover { color: var(--ink); } .wt-tab-btn.is-active { background: var(--wt-gradient); color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3); } .wt-tab-panel { display: none; } .wt-tab-panel.is-active { display: block; } .wt-collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wt-space-3); } .wt-collection-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--wt-radius-lg); padding: var(--wt-space-4); display: flex; flex-direction: column; gap: var(--wt-space-2); transition: transform var(--wt-motion) var(--wt-ease), box-shadow var(--wt-motion) var(--wt-ease); } .wt-collection-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); } .wt-collection-card h3 { margin: 4px 0 0; font-size: var(--wt-fs-lg); } .wt-collection-card p { margin: 0; color: var(--ink-muted); font-size: var(--wt-fs-sm); flex: 1; } .wt-collection-card .wt-pill { align-self: flex-start; margin-top: 4px; } /* ---------- Real vocabulary list (Word Library / Workspaces) ----------- */ .wt-vocab-toolbar { display: flex; align-items: center; gap: var(--wt-space-3); margin-bottom: var(--wt-space-3); flex-wrap: wrap; } .wt-vocab-search { position: relative; flex: 1; min-width: 200px; } .wt-vocab-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .wt-vocab-search input { width: 100%; height: 38px; box-sizing: border-box; padding: 0 var(--wt-space-3) 0 34px; background: var(--page-bg); border: 1px solid var(--control-border); border-radius: var(--wt-radius); color: var(--ink); font-family: inherit; font-size: var(--wt-fs); } .wt-vocab-search input:focus { outline: none; border-color: var(--wt-primary); box-shadow: 0 0 0 3px var(--wt-primary-ghost); } /* .wt-select had no styling at all before this — every