:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-soft: #f3f1ff;
  --ink: #1f2030;
  --muted: #8b8b9d;
  --line: #e9e9f1;
  --violet: #6c5ce7;
  --violet-dark: #5042c8;
  --violet-pale: #ece9ff;
  --orange: #ff8a5b;
  --green: #00b894;
  --blue: #4d96ff;
  --yellow: #ffc857;
  --pink: #ec6a9e;
  --shadow: 0 16px 42px rgba(51, 43, 96, .08);
  --radius: 24px;
  --sidebar: 238px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(108,92,231,.42);
  outline-offset: 2px;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 18px 22px; display: flex; flex-direction: column; background: rgba(255,255,255,.94); border-right: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 34px; font-size: 24px; font-weight: 800; letter-spacing: -.8px; }
.brand-mark { position: relative; width: 31px; height: 31px; display: grid; place-items: center; background: var(--violet); border-radius: 10px; transform: rotate(-8deg); box-shadow: 0 8px 18px rgba(108,92,231,.3); }
.brand-mark::before { content:""; width: 11px; height: 11px; border-radius: 50%; background: white; }
.brand-mark i { position:absolute; width: 23px; height: 9px; border: 2px solid var(--yellow); border-radius: 50%; transform: rotate(22deg); }
.side-nav { display: grid; gap: 7px; }
.nav-item { position: relative; width: 100%; height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 14px; color: #79798c; background: transparent; border: 0; border-radius: 14px; font-size: 14px; font-weight: 650; text-align: left; transition: .2s ease; }
.nav-item:hover { color: var(--violet); background: #f7f5ff; }
.nav-item.active { color: var(--violet); background: var(--violet-pale); }
.nav-item.active::before { content:""; position:absolute; left:-18px; width:4px; height:24px; border-radius:0 8px 8px 0; background:var(--violet); }
.nav-item b { margin-left:auto; min-width: 24px; padding:3px 7px; color:var(--violet); background:white; border-radius:10px; font-size:11px; text-align:center; box-shadow:0 3px 10px rgba(75,63,150,.08); }
.sidebar-quest { margin-top:auto; padding:17px; border-radius:19px; background: linear-gradient(150deg,#292050,#17152c); color:white; overflow:hidden; position:relative; box-shadow:0 14px 30px rgba(41,32,80,.16); }
.sidebar-quest::after { content:""; position:absolute; right:-24px; top:-22px; width:82px; height:82px; background:#765ff3; border-radius:50%; filter:blur(8px); opacity:.45; }
.mini-icon { width:34px; height:34px; display:grid; place-items:center; color:#4c377e; background:var(--yellow); border-radius:11px; margin-bottom:12px; }
.mini-icon svg { width:17px; }
.sidebar-quest strong { display:block; font-size:13px; }
.sidebar-quest p { margin:5px 0 10px; color:#bfb9d7; font-size:11px; }
.mini-progress { height:5px; background:rgba(255,255,255,.14); border-radius:20px; overflow:hidden; }
.mini-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--yellow),#ff9f5b); border-radius:inherit; }
.sidebar-quest button { padding:10px 0 0; color:white; background:none; border:0; font-size:11px; font-weight:700; }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:18px 5px 0; margin-top:18px; border-top:1px solid var(--line); }
.avatar { flex:0 0 auto; width:35px; height:35px; display:grid; place-items:center; color:white; background:var(--violet); border-radius:12px; font-size:11px; font-weight:800; }
.sidebar-user span:nth-child(2) { min-width:0; display:grid; gap:2px; }
.sidebar-user strong { font-size:12px; }
.sidebar-user small { color:var(--muted); font-size:10px; }
.sidebar-user svg { margin-left:auto; color:var(--muted); width:18px; }
.workspace { grid-column:2; min-width:0; }
.topbar { position:sticky; z-index:15; top:0; height:79px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:22px; background:rgba(247,247,251,.88); border-bottom:1px solid rgba(233,233,241,.7); backdrop-filter:blur(20px); }
.search-box { width:min(390px,45vw); height:42px; display:flex; align-items:center; gap:10px; padding:0 14px; color:#aaaabc; background:white; border:1px solid transparent; border-radius:13px; box-shadow:0 6px 22px rgba(50,43,94,.04); transition:.2s; }
.search-box:focus-within { border-color:#cfc8ff; box-shadow:0 0 0 4px rgba(108,92,231,.08); }
.search-box svg { width:18px; }
.search-box input { width:100%; color:var(--ink); background:none; border:0; outline:0; font-size:13px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.icon-button { position:relative; width:42px; height:42px; display:grid; place-items:center; color:#77778a; background:white; border:1px solid var(--line); border-radius:13px; }
.notification i { position:absolute; right:8px; top:7px; width:7px; height:7px; background:var(--orange); border:2px solid white; border-radius:50%; }
.primary-button { height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; color:white; background:linear-gradient(135deg,#7869ee,var(--violet)); border:0; border-radius:13px; box-shadow:0 9px 20px rgba(108,92,231,.23); font-size:12px; font-weight:750; transition:.2s; }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 12px 25px rgba(108,92,231,.3); }
.primary-button svg { width:17px; }
.main-content { max-width:1540px; margin:0 auto; padding:34px 40px 70px; }
.loading-screen { min-height:65vh; display:grid; place-content:center; justify-items:center; gap:14px; color:var(--muted); font-size:13px; }
.loader { width:34px; height:34px; border:3px solid var(--violet-pale); border-top-color:var(--violet); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.eyebrow { margin:0 0 6px; color:var(--violet); font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }
.page-heading h1 { margin:0; font-size:28px; line-height:1.15; letter-spacing:-.8px; }
.page-heading h1 span { color:var(--violet); }
.page-heading p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); font-size:12px; }
.date-chip { display:flex; align-items:center; gap:8px; padding:10px 13px; color:#66667a; background:white; border:1px solid var(--line); border-radius:12px; font-size:11px; font-weight:650; }
.date-chip svg { width:15px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(310px,.8fr); gap:20px; }
.main-stack,.side-stack { display:grid; align-content:start; gap:20px; min-width:0; }
.hero-card { min-height:238px; position:relative; display:grid; grid-template-columns:1fr 260px; color:white; background:linear-gradient(130deg,#25204a 0%,#3a2c76 52%,#6f57e8 100%); border-radius:28px; overflow:hidden; box-shadow:0 24px 50px rgba(55,42,119,.19); }
.hero-copy { z-index:2; padding:31px 0 29px 33px; }
.hero-kicker { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; color:#fff3c5; background:rgba(255,200,87,.14); border:1px solid rgba(255,219,139,.17); border-radius:20px; font-size:10px; font-weight:700; }
.hero-copy h2 { max-width:410px; margin:18px 0 9px; font-size:27px; line-height:1.12; letter-spacing:-.7px; }
.hero-copy p { max-width:390px; margin:0; color:#c9c4dc; font-size:12px; line-height:1.55; }
.xp-row { max-width:380px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:22px; }
.level-pill { padding:6px 9px; color:#2d254d; background:var(--yellow); border-radius:9px; font-size:10px; font-weight:850; }
.xp-track { height:7px; background:rgba(255,255,255,.14); border-radius:10px; overflow:hidden; }
.xp-track i { display:block; height:100%; background:linear-gradient(90deg,#ffc857,#ff9c55); border-radius:inherit; }
.xp-row small { color:#c9c4dc; font-size:9px; }
.hero-art { position:absolute; right:-8px; bottom:-44px; width:295px; height:295px; object-fit:cover; border-radius:50%; mix-blend-mode:screen; filter:saturate(.88) contrast(1.03); opacity:.97; }
.hero-orbit { position:absolute; right:43px; top:30px; width:200px; height:200px; border:1px solid rgba(255,255,255,.11); border-radius:50%; }
.hero-orbit::after { content:""; position:absolute; top:13px; right:25px; width:8px; height:8px; background:var(--yellow); border-radius:50%; box-shadow:0 0 20px var(--yellow); }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card { position:relative; min-height:100px; padding:17px; background:white; border:1px solid rgba(233,233,241,.9); border-radius:18px; box-shadow:0 8px 26px rgba(46,40,83,.04); overflow:hidden; }
.stat-card::after { content:""; position:absolute; right:-16px; bottom:-20px; width:62px; height:62px; background:var(--tint,var(--violet-pale)); border-radius:50%; opacity:.65; }
.stat-head { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; }
.stat-icon { width:28px; height:28px; display:grid; place-items:center; color:var(--accent,var(--violet)); background:var(--tint,var(--violet-pale)); border-radius:9px; }
.stat-icon svg { width:14px; }
.stat-value { margin-top:10px; font-size:22px; font-weight:800; letter-spacing:-.5px; }
.stat-value small { color:var(--green); font-size:9px; letter-spacing:0; }
.card { background:white; border:1px solid rgba(233,233,241,.88); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad { padding:22px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:17px; }
.section-head h2 { margin:0; font-size:15px; letter-spacing:-.2px; }
.section-head p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.text-button { display:flex; align-items:center; gap:4px; color:var(--violet); background:none; border:0; font-size:10px; font-weight:750; }
.text-button svg { width:14px; }
.important-list { display:grid; gap:4px; }
.important-task { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:11px 9px; border-radius:14px; transition:.2s; }
.important-task:hover { background:#faf9ff; }
.task-check { width:23px; height:23px; display:grid; place-items:center; color:transparent; background:white; border:1.5px solid #dcdbe6; border-radius:8px; }
.task-check:hover { color:white; background:var(--violet); border-color:var(--violet); }
.task-check svg { width:13px; stroke-width:2.5; }
.task-main { min-width:0; }
.task-title { display:flex; align-items:center; gap:7px; margin:0 0 5px; font-size:12px; font-weight:700; }
.hot-dot { width:6px; height:6px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 4px rgba(255,138,91,.11); }
.task-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--muted); font-size:9px; }
.project-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; color:var(--project-color); background:color-mix(in srgb,var(--project-color) 10%,white); border-radius:7px; font-weight:700; }
.project-tag i { width:5px; height:5px; background:currentColor; border-radius:50%; }
.small-avatar { width:25px; height:25px; display:grid; place-items:center; color:white; border:2px solid white; border-radius:8px; font-size:8px; font-weight:800; box-shadow:0 3px 8px rgba(40,35,75,.12); }
.projects-inline { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.project-mini { position:relative; padding:15px; text-align:left; background:#fbfbfd; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.2s; }
.project-mini:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--project-color) 35%,white); box-shadow:0 10px 24px rgba(45,39,80,.07); }
.project-mini::after { content:""; position:absolute; right:-18px; top:-20px; width:65px; height:65px; background:var(--project-color); border-radius:50%; opacity:.09; }
.project-mini h3 { margin:10px 0 5px; font-size:11px; }
.project-mini p { margin:0; color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-icon { width:30px; height:30px; display:grid; place-items:center; color:var(--project-color); background:color-mix(in srgb,var(--project-color) 11%,white); border-radius:10px; }
.project-icon svg { width:15px; }
.mini-bar { height:5px; margin:12px 0 6px; background:#ececf2; border-radius:10px; overflow:hidden; }
.mini-bar i { display:block; height:100%; background:var(--project-color); border-radius:inherit; }
.project-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:8px; }
.finance-summary { position:relative; min-height:235px; color:white; background:linear-gradient(150deg,#24223a,#35324d); overflow:hidden; }
.finance-summary::after { content:""; position:absolute; right:-55px; bottom:-70px; width:190px; height:190px; background:#7065ce; border-radius:50%; opacity:.22; filter:blur(2px); }
.finance-summary .section-head h2 { color:white; }
.finance-summary .section-head p { color:#aaa5bd; }
.finance-total { margin:4px 0 18px; font-size:25px; font-weight:800; letter-spacing:-.6px; }
.finance-total small { margin-left:5px; color:#aaa5bd; font-size:9px; font-weight:500; }
.budget-track { height:8px; background:rgba(255,255,255,.11); border-radius:10px; overflow:hidden; }
.budget-track i { display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--yellow)); border-radius:inherit; }
.budget-legend { display:flex; justify-content:space-between; margin-top:8px; color:#aaa5bd; font-size:9px; }
.finance-numbers { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.finance-number { padding:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); border-radius:12px; }
.finance-number span { display:block; color:#aaa5bd; font-size:8px; }
.finance-number strong { display:block; margin-top:4px; font-size:11px; }
.quest-card { position:relative; padding:21px; overflow:hidden; }
.quest-card::after { content:"✦"; position:absolute; right:16px; top:10px; color:#ddd7ff; font-size:44px; transform:rotate(12deg); }
.quest-top { display:flex; align-items:center; gap:11px; }
.quest-top .mini-icon { margin:0; color:white; background:var(--violet); }
.quest-top strong { display:block; font-size:12px; }
.quest-top small { color:var(--muted); font-size:9px; }
.quest-row { display:flex; align-items:center; gap:10px; margin-top:16px; }
.quest-row .mini-progress { flex:1; height:7px; background:var(--violet-pale); }
.quest-row .mini-progress i { background:var(--violet); }
.quest-row b { color:var(--violet); font-size:10px; }
.activity-list { display:grid; gap:13px; }
.activity-item { display:flex; gap:10px; align-items:flex-start; }
.activity-copy { min-width:0; font-size:10px; line-height:1.4; }
.activity-copy strong { font-size:10px; }
.activity-copy small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.page-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.filter-group { display:flex; gap:7px; flex-wrap:wrap; }
.filter-chip { padding:9px 13px; color:#7d7d8e; background:white; border:1px solid var(--line); border-radius:11px; font-size:10px; font-weight:700; }
.filter-chip.active { color:white; background:var(--violet); border-color:var(--violet); box-shadow:0 6px 16px rgba(108,92,231,.2); }
.kanban { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:14px; align-items:start; }
.kanban-column { min-height:430px; padding:13px; background:#f0f0f6; border:1px solid #e7e7ef; border-radius:20px; }
.column-head { display:flex; align-items:center; justify-content:space-between; padding:3px 4px 14px; }
.column-title { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; }
.status-dot { width:8px; height:8px; background:var(--status-color); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,var(--status-color) 12%,white); }
.column-count { min-width:22px; padding:3px 6px; color:#838396; background:white; border-radius:8px; font-size:9px; text-align:center; }
.task-cards { display:grid; gap:9px; }
.task-card { padding:14px; background:white; border:1px solid transparent; border-radius:15px; box-shadow:0 5px 15px rgba(45,42,71,.04); transition:.2s; }
.task-card:hover { transform:translateY(-2px); border-color:#dedbef; box-shadow:0 10px 24px rgba(45,42,71,.08); }
.task-card.dragging { opacity:.5; }
.task-card-top { display:flex; justify-content:space-between; gap:8px; }
.priority-badge { padding:4px 7px; color:var(--priority-color); background:color-mix(in srgb,var(--priority-color) 10%,white); border-radius:7px; font-size:8px; font-weight:800; }
.star-button,.more-button { padding:0; color:#b8b8c4; background:none; border:0; }
.star-button.active { color:var(--orange); }
.task-card h3 { margin:12px 0 7px; font-size:11px; line-height:1.35; }
.task-card p { min-height:0; margin:0 0 12px; color:var(--muted); font-size:9px; line-height:1.45; }
.task-card-footer { display:flex; align-items:center; gap:7px; padding-top:10px; border-top:1px solid #f0eff4; color:var(--muted); font-size:8px; }
.task-card-footer .small-avatar { margin-left:auto; }
.move-actions { display:flex; gap:4px; margin-left:auto; }
.move-actions button { width:24px; height:24px; display:grid; place-items:center; color:var(--muted); background:#f5f4fa; border:0; border-radius:7px; }
.move-actions svg { width:12px; }
.move-actions .next svg { transform:rotate(0); }
.move-actions .prev svg { transform:rotate(180deg); }
.empty-column { padding:28px 12px; color:#aaaabb; border:1px dashed #d9d8e2; border-radius:14px; text-align:center; font-size:9px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(230px,1fr)); gap:15px; }
.project-card { position:relative; padding:20px; overflow:hidden; }
.project-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--project-color); }
.project-card-head { display:flex; align-items:center; justify-content:space-between; }
.project-card .project-icon { width:38px; height:38px; border-radius:12px; }
.theme-chip { display:inline-flex; align-items:center; margin-top:15px; padding:5px 9px; color:var(--theme-color,var(--violet)); background:color-mix(in srgb,var(--theme-color,var(--violet)) 11%,white); border-radius:9px; font-size:10px; font-weight:800; }
.project-card h3 { margin:18px 0 7px; font-size:14px; }
.project-card > p { height:32px; margin:0 0 17px; color:var(--muted); font-size:9px; line-height:1.5; }
.project-stats { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:var(--muted); font-size:9px; }
.project-budget { display:flex; justify-content:space-between; padding-top:14px; margin-top:15px; border-top:1px solid var(--line); font-size:9px; }
.project-budget strong { font-size:10px; }
.members-stack { display:flex; }
.members-stack .small-avatar { margin-left:-5px; }
.members-stack .small-avatar:first-child { margin-left:0; }
.finance-layout { display:grid; grid-template-columns:1.5fr .8fr; gap:18px; }
.finance-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.metric-card { padding:18px; }
.metric-card span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; }
.metric-card b { display:block; margin-top:10px; font-size:19px; }
.metric-card small { display:block; margin-top:5px; color:var(--green); font-size:8px; }
.category-bars { display:grid; gap:14px; }
.category-row { display:grid; grid-template-columns:90px 1fr 70px; align-items:center; gap:12px; font-size:9px; }
.category-track { height:8px; background:#f0eff5; border-radius:12px; overflow:hidden; }
.category-track i { display:block; height:100%; background:var(--bar-color); border-radius:inherit; }
.category-row strong { text-align:right; font-size:9px; }
.transaction-list { display:grid; gap:2px; }
.transaction { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:11px 5px; border-bottom:1px solid #f1f0f5; }
.transaction:last-child { border-bottom:0; }
.transaction-icon { width:33px; height:33px; display:grid; place-items:center; color:var(--transaction-color); background:color-mix(in srgb,var(--transaction-color) 11%,white); border-radius:10px; }
.transaction-icon svg { width:15px; }
.transaction-copy strong { display:block; font-size:10px; }
.transaction-copy span { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.transaction-amount { font-size:10px; font-weight:800; text-align:right; }
.transaction-amount.income { color:var(--green); }
.transaction-amount small { display:block; margin-top:3px; color:var(--muted); font-size:7px; font-weight:500; }
.game-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; }
.game-hero { min-height:320px; position:relative; padding:29px; color:white; background:radial-gradient(circle at 80% 32%,#705be0 0,#3a2c75 32%,#211d3f 72%); overflow:hidden; }
.game-hero-copy { position:relative; z-index:2; max-width:56%; }
.game-hero h2 { margin:15px 0 9px; font-size:26px; line-height:1.12; }
.game-hero p { margin:0; color:#c8c3db; font-size:10px; line-height:1.55; }
.game-mascot { position:absolute; right:-8px; bottom:-18px; width:46%; height:110%; object-fit:cover; object-position:center; border-radius:50%; mix-blend-mode:screen; }
.big-level { margin:24px 0 8px; display:flex; align-items:end; gap:9px; }
.big-level strong { font-size:40px; line-height:.9; }
.big-level span { color:var(--yellow); font-size:10px; font-weight:800; }
.game-xp { max-width:340px; }
.game-xp .xp-track { height:9px; }
.game-xp-row { display:flex; justify-content:space-between; margin-top:6px; color:#bcb6d2; font-size:8px; }
.quest-list { display:grid; gap:10px; }
.quest-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px; background:#faf9fd; border:1px solid #efedf6; border-radius:14px; }
.quest-item.completed { background:#f1fcf8; border-color:#cff1e5; }
.quest-symbol { width:35px; height:35px; display:grid; place-items:center; color:var(--violet); background:var(--violet-pale); border-radius:11px; font-size:16px; }
.quest-item strong { display:block; font-size:10px; }
.quest-item p { margin:4px 0 7px; color:var(--muted); font-size:8px; }
.quest-item .mini-progress { height:5px; background:#e8e5f5; }
.quest-reward { color:#7d6b21; background:#fff4cb; padding:5px 8px; border-radius:8px; font-size:8px; font-weight:800; }
.leaderboard { display:grid; gap:8px; }
.leader-row { display:grid; grid-template-columns:22px auto 1fr auto; align-items:center; gap:9px; padding:9px; border-radius:12px; }
.leader-row.current { background:var(--violet-pale); }
.leader-place { color:var(--muted); font-size:9px; font-weight:800; text-align:center; }
.leader-copy strong { display:block; font-size:10px; }
.leader-copy small { color:var(--muted); font-size:8px; }
.leader-xp { color:var(--violet); font-size:9px; font-weight:800; }
.badges { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.badge { padding:13px 7px; background:#faf9fd; border:1px solid #eeecf4; border-radius:13px; text-align:center; }
.badge.locked { filter:grayscale(1); opacity:.38; }
.badge-icon { display:block; font-size:22px; margin-bottom:7px; }
.badge strong { display:block; font-size:8px; line-height:1.25; }
.modal-backdrop { position:fixed; z-index:100; inset:0; padding:18px; display:grid; place-items:center; background:rgba(25,22,43,.46); backdrop-filter:blur(7px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,visibility 0s .2s; }
.modal-backdrop.open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s; }
.modal-card { position:relative; width:min(520px,100%); max-height:calc(100vh - 36px); padding:27px; background:white; border-radius:24px; box-shadow:0 30px 90px rgba(23,20,48,.28); overflow:auto; transform:translateY(15px) scale(.98); transition:.25s; }
.modal-backdrop.open .modal-card { transform:none; }
.modal-close { position:absolute; right:18px; top:18px; width:34px; height:34px; display:grid; place-items:center; color:var(--muted); background:#f5f4f8; border:0; border-radius:10px; }
.modal-close svg { width:16px; }
.modal-head h2 { margin:0; font-size:20px; letter-spacing:-.4px; }
.modal-head p { margin:7px 40px 22px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { color:#69697b; font-size:9px; font-weight:750; }
.field input,.field select,.field textarea { width:100%; padding:11px 12px; color:var(--ink); background:#fafafd; border:1px solid #e8e7ef; border-radius:11px; outline:0; font-size:11px; transition:.2s; }
.field textarea { min-height:78px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { background:white; border-color:#bdb5ff; box-shadow:0 0 0 4px rgba(108,92,231,.08); }
.check-field { display:flex; align-items:center; gap:8px; padding:10px 0; font-size:10px; }
.check-field input { accent-color:var(--violet); }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.secondary-button { height:40px; padding:0 15px; color:#707082; background:#f4f3f8; border:0; border-radius:11px; font-size:10px; font-weight:700; }
.toast { position:fixed; z-index:120; left:50%; bottom:25px; padding:11px 16px; color:white; background:#242237; border-radius:12px; box-shadow:0 12px 35px rgba(30,28,52,.26); font-size:10px; font-weight:700; opacity:0; transform:translate(-50%,15px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.bottom-nav,.mobile-only { display:none; }

@media (max-width:1100px) {
  :root { --sidebar:210px; }
  .main-content,.topbar { padding-left:24px; padding-right:24px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .side-stack { grid-template-columns:1fr 1fr; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .finance-layout,.game-layout { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  :root { --radius:20px; }
  body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .app-shell { display:block; }
  .sidebar { display:none; }
  .workspace { display:block; }
  .topbar { height:64px; padding:0 15px; gap:8px; background:rgba(247,247,251,.93); }
  .mobile-only { display:grid; }
  .search-box { flex:1; width:auto; height:39px; }
  .search-box input { font-size:11px; }
  .top-actions .icon-button,.top-actions .primary-button { display:none; }
  .main-content { padding:22px 15px 25px; }
  .page-heading { align-items:flex-start; margin-bottom:19px; }
  .page-heading h1 { font-size:23px; }
  .page-heading p:not(.eyebrow) { font-size:10px; }
  .date-chip { padding:8px 10px; font-size:9px; }
  .dashboard-grid { gap:14px; }
  .main-stack,.side-stack { gap:14px; }
  .hero-card { min-height:270px; grid-template-columns:1fr; }
  .hero-copy { padding:24px 22px; }
  .hero-copy h2 { max-width:70%; font-size:23px; }
  .hero-copy p { max-width:65%; font-size:10px; }
  .xp-row { max-width:65%; margin-top:18px; }
  .hero-art { right:-36px; bottom:-13px; width:220px; height:220px; }
  .hero-orbit { right:-8px; top:50px; width:174px; height:174px; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .stat-card { min-height:90px; padding:14px; }
  .projects-inline { grid-template-columns:1fr 1fr; }
  .side-stack { grid-template-columns:1fr; }
  .card-pad { padding:18px; }
  .bottom-nav { position:fixed; z-index:50; left:10px; right:10px; bottom:calc(9px + env(safe-area-inset-bottom)); height:62px; padding:5px 7px; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.95); border:1px solid rgba(224,223,232,.9); border-radius:19px; box-shadow:0 14px 40px rgba(40,35,76,.16); backdrop-filter:blur(20px); }
  .bottom-nav button { display:grid; place-content:center; justify-items:center; gap:2px; color:#9a9aac; background:none; border:0; font-size:8px; font-weight:700; }
  .bottom-nav button.active { color:var(--violet); }
  .bottom-nav svg { width:19px; height:19px; }
  .bottom-nav .bottom-create { width:45px; height:45px; place-self:center; color:white; background:linear-gradient(135deg,#8273f0,var(--violet)); border-radius:15px; box-shadow:0 8px 18px rgba(108,92,231,.3); transform:translateY(-10px); }
  .bottom-nav .bottom-create svg { width:22px; height:22px; }
  .kanban { display:flex; margin:0 -15px; padding:0 15px 12px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .kanban-column { flex:0 0 84vw; min-height:390px; scroll-snap-align:center; }
  .page-toolbar { align-items:flex-start; }
  .page-toolbar .primary-button { flex:0 0 auto; width:40px; padding:0; }
  .page-toolbar .primary-button span { display:none; }
  .project-grid { grid-template-columns:1fr; }
  .finance-metrics { grid-template-columns:1fr 1fr; }
  .finance-metrics .metric-card:last-child { grid-column:1/-1; }
  .category-row { grid-template-columns:76px 1fr 62px; }
  .game-hero { min-height:335px; padding:23px; }
  .game-hero-copy { max-width:68%; }
  .game-hero h2 { font-size:23px; }
  .game-mascot { right:-45px; width:62%; }
  .badges { grid-template-columns:repeat(2,1fr); }
  .modal-backdrop { align-items:end; padding:0; }
  .modal-card { width:100%; max-height:90vh; padding:24px 19px calc(24px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; transform:translateY(40px); }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}

@media (max-width:390px) {
  .hero-copy h2 { max-width:76%; font-size:21px; }
  .hero-copy p,.xp-row { max-width:68%; }
  .hero-art { right:-55px; width:215px; height:215px; }
  .projects-inline { grid-template-columns:1fr; }
}

body { font-size:16px; line-height:1.45; }
.sidebar { width:250px; padding-left:20px; padding-right:20px; }
:root { --sidebar:250px; }
.brand { font-size:27px; }
.nav-item { height:52px; font-size:15px; }
.nav-item b { font-size:12px; }
.sidebar-quest { padding:19px; }
.sidebar-quest strong { font-size:14px; }
.sidebar-quest p,.sidebar-quest button { font-size:12px; }
.sidebar-user strong { font-size:14px; }
.sidebar-user small { font-size:12px; }
.topbar { height:84px; }
.search-box { width:min(430px,46vw); height:46px; }
.search-box input { font-size:14px; }
.primary-button { height:46px; padding-inline:19px; font-size:14px; }
.main-content { padding-top:38px; }
.page-heading { margin-bottom:30px; }
.eyebrow { margin-bottom:8px; font-size:12px; }
.page-heading h1 { font-size:clamp(30px,2.5vw,38px); line-height:1.1; letter-spacing:-1.15px; }
.page-heading p:not(.eyebrow) { margin-top:9px; font-size:14px; }
.date-chip { padding:11px 14px; font-size:12px; }
.dashboard-grid { grid-template-columns:minmax(0,1.65fr) minmax(330px,.85fr); gap:22px; }
.main-stack,.side-stack { gap:22px; }
.hero-card { min-height:265px; grid-template-columns:1fr 285px; }
.hero-copy { padding:34px 0 32px 35px; }
.hero-kicker { padding:7px 11px; font-size:12px; }
.hero-copy h2 { max-width:470px; margin:19px 0 11px; font-size:clamp(29px,2.35vw,35px); line-height:1.13; }
.hero-copy p { max-width:460px; font-size:14px; line-height:1.6; }
.xp-row { max-width:430px; margin-top:23px; }
.level-pill { padding:7px 10px; font-size:12px; }
.xp-row small { font-size:11px; }
.hero-art { width:320px; height:320px; }
.hero-orbit { width:220px; height:220px; }
.stats-row { gap:14px; }
.stat-card { min-height:116px; padding:19px; }
.stat-head { font-size:12px; }
.stat-icon { width:32px; height:32px; }
.stat-icon svg { width:16px; }
.stat-value { margin-top:12px; font-size:27px; }
.stat-value small { font-size:11px; }
.card-pad { padding:25px; }
.section-head { margin-bottom:20px; }
.section-head h2 { font-size:19px; }
.section-head p { margin-top:5px; font-size:12px; line-height:1.45; }
.text-button { font-size:12px; }
.important-task { gap:13px; padding:13px 10px; }
.task-check { width:27px; height:27px; }
.task-title { margin-bottom:7px; font-size:14px; }
.task-meta { gap:9px; font-size:11px; }
.project-tag { padding:5px 8px; font-size:11px; }
.small-avatar { width:29px; height:29px; font-size:10px; }
.project-mini { padding:18px; }
.project-mini h3 { margin:12px 0 6px; font-size:14px; }
.project-mini p { font-size:11px; }
.project-foot { font-size:10px; }
.finance-summary { min-height:255px; }
.finance-total { font-size:29px; }
.finance-total small { font-size:11px; }
.budget-legend { font-size:11px; }
.finance-number span { font-size:10px; }
.finance-number strong { font-size:13px; }
.quest-top strong { font-size:14px; }
.quest-top small { font-size:11px; }
.quest-row b { font-size:12px; }
.activity-copy,.activity-copy strong { font-size:12px; }
.activity-copy small { font-size:10px; }
.filter-chip { padding:10px 15px; font-size:12px; }
.kanban-column { padding:15px; }
.column-title { font-size:13px; }
.column-count { font-size:11px; }
.task-card { padding:17px; }
.priority-badge { padding:5px 8px; font-size:10px; }
.task-card h3 { margin:14px 0 8px; font-size:14px; line-height:1.45; }
.task-card p { margin-bottom:14px; font-size:12px; line-height:1.55; }
.task-card-footer { gap:8px; padding-top:12px; font-size:10px; }
.empty-column { padding:30px 14px; font-size:12px; }
.project-card { padding:23px; }
.project-card h3 { font-size:17px; }
.theme-chip { font-size:11px; }
.project-card > p { height:auto; min-height:42px; font-size:12px; }
.project-stats,.project-budget { font-size:11px; }
.project-budget strong { font-size:12px; }
.metric-card { padding:21px; }
.metric-card span { font-size:12px; }
.metric-card b { font-size:23px; }
.metric-card small { font-size:10px; }
.category-row { grid-template-columns:105px 1fr 80px; font-size:12px; }
.category-row strong { font-size:11px; }
.transaction-copy strong { font-size:13px; }
.transaction-copy span { font-size:10px; }
.transaction-amount { font-size:12px; }
.transaction-amount small { font-size:9px; }
.game-hero { min-height:350px; }
.game-hero h2 { font-size:31px; }
.game-hero p { font-size:13px; }
.big-level span { font-size:12px; }
.game-xp-row { font-size:10px; }
.quest-item strong { font-size:13px; }
.quest-item p { font-size:11px; }
.quest-reward { font-size:10px; }
.leader-place,.leader-xp { font-size:11px; }
.leader-copy strong { font-size:13px; }
.leader-copy small { font-size:10px; }
.badge strong { font-size:11px; }
.modal-head h2 { font-size:24px; }
.modal-head p { font-size:13px; }
.field label { font-size:12px; }
.field input,.field select,.field textarea { padding:13px 14px; font-size:14px; }
.check-field,.secondary-button { font-size:13px; }
.toast { padding:13px 18px; font-size:12px; }

@media (max-width:1100px) {
  :root { --sidebar:220px; }
  .sidebar { width:220px; }
  .dashboard-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  :root { --sidebar:0px; }
  body { font-size:16px; }
  .topbar { height:68px; padding-inline:14px; }
  .icon-button { width:43px; height:43px; }
  .search-box { height:43px; }
  .search-box input { font-size:13px; }
  .main-content { padding:26px 15px 30px; }
  .page-heading { align-items:flex-start; margin-bottom:23px; }
  .page-heading h1 { font-size:28px; letter-spacing:-.8px; }
  .eyebrow { font-size:11px; }
  .page-heading p:not(.eyebrow) { font-size:13px; }
  .date-chip { padding:9px 11px; font-size:11px; }
  .dashboard-grid,.main-stack,.side-stack { gap:16px; }
  .hero-card { min-height:320px; grid-template-columns:1fr; }
  .hero-copy { padding:26px 22px; }
  .hero-kicker { font-size:11px; }
  .hero-copy h2 { max-width:72%; margin-top:18px; font-size:25px; line-height:1.16; }
  .hero-copy p { max-width:68%; font-size:12px; line-height:1.55; }
  .xp-row { max-width:68%; margin-top:20px; }
  .level-pill { font-size:11px; }
  .xp-row small { font-size:9px; }
  .hero-art { right:-34px; bottom:-3px; width:250px; height:250px; }
  .hero-orbit { right:-2px; top:67px; width:195px; height:195px; }
  .stats-row { gap:12px; }
  .stat-card { min-height:108px; padding:16px; }
  .stat-head { font-size:11px; }
  .stat-value { font-size:25px; }
  .stat-value small { font-size:10px; }
  .card-pad { padding:20px; }
  .section-head h2 { font-size:18px; }
  .section-head p { font-size:11px; }
  .important-task { padding:13px 6px; }
  .task-title { font-size:14px; line-height:1.35; }
  .task-meta { font-size:10px; }
  .project-mini { padding:16px; }
  .project-mini h3 { font-size:13px; }
  .project-mini p { font-size:10px; }
  .bottom-nav button { font-size:10px; }
  .kanban-column { flex-basis:88vw; padding:14px; }
  .column-title { font-size:13px; }
  .task-card { padding:16px; }
  .task-card h3 { font-size:15px; }
  .task-card p { font-size:12px; }
  .project-card h3 { font-size:18px; }
  .finance-metrics { gap:10px; }
  .metric-card { padding:17px; }
  .metric-card span { font-size:11px; }
  .metric-card b { font-size:20px; }
  .category-row { grid-template-columns:85px 1fr 70px; gap:9px; font-size:11px; }
  .game-hero { min-height:385px; padding:25px; }
  .game-hero h2 { font-size:27px; }
  .game-hero p { font-size:12px; }
  .quest-item { gap:10px; padding:13px 11px; }
  .quest-item strong { font-size:12px; }
  .quest-item p { font-size:10px; }
  .leader-copy strong { font-size:12px; }
  .leader-copy small { font-size:9px; }
  .modal-card { padding:27px 20px calc(27px + env(safe-area-inset-bottom)); }
}

@media (max-width:390px) {
  .page-heading h1 { font-size:26px; }
  .hero-card { min-height:330px; }
  .hero-copy h2 { max-width:78%; font-size:24px; }
  .hero-copy p,.xp-row { max-width:74%; }
  .hero-art { right:-49px; width:245px; height:245px; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Compact review workflow */
.review-panel { border:1px solid #e8e4f6; box-shadow:0 8px 24px rgba(54,45,100,.05); }
.review-count { display:inline-grid; min-width:22px; height:22px; margin-left:6px; place-items:center; color:#6456c8; background:#eeeaff; border-radius:8px; font-size:11px; vertical-align:2px; }
.review-list { display:grid; gap:7px; }
.review-task { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; background:#faf9fd; border:1px solid #efedf5; border-radius:12px; }
.review-task-copy { min-width:0; }
.review-task-copy strong { display:block; overflow:hidden; color:#2d2a47; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.review-task-copy span { display:block; margin-top:3px; overflow:hidden; color:#858198; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.review-actions { display:flex; gap:6px; }
.review-button { width:31px; height:31px; border:0; border-radius:10px; font-size:17px; font-weight:800; }
.review-button.reject { color:#d95864; background:#ffedf0; }
.review-button.approve { color:#087b5e; background:#e2f8f0; }
.review-state { display:inline-flex; margin-left:6px; padding:4px 6px; border-radius:7px; font-size:8px; font-weight:800; }
.review-state.pending { color:#6956c8; background:#eeeaff; }
.review-state.rejected { color:#c74c59; background:#ffedf0; }
.task-card.awaiting-review { border-color:#ded8f8; background:#fcfbff; }
.review-wait { color:#7668bd; font-size:9px; font-weight:800; }
.submit-review { color:white!important; background:#6956c8!important; }

/* Final density pass: the previous scale was too large on real Telegram screens. */
body { font-size:14px; }
.sidebar { width:230px; }
:root { --sidebar:230px; }
.brand { font-size:23px; }
.nav-item { height:46px; font-size:13px; }
.topbar { height:72px; }
.main-content { padding-top:28px; }
.page-heading { margin-bottom:22px; }
.page-heading h1 { font-size:clamp(25px,2.2vw,32px); }
.page-heading p:not(.eyebrow) { font-size:12px; }
.hero-copy h2 { font-size:clamp(24px,2vw,30px); }
.hero-copy p { font-size:12px; }
.card-pad { padding:19px; }
.section-head { margin-bottom:15px; }
.section-head h2 { font-size:16px; }
.section-head p { font-size:10px; }
.task-card { padding:14px; }
.task-card h3 { margin:10px 0 6px; font-size:13px; }
.task-card p { margin-bottom:10px; font-size:10px; }

@media (max-width:760px) {
  body { font-size:13px; }
  .topbar { height:60px; padding-inline:11px; }
  .icon-button,.search-box { height:38px; }
  .icon-button { width:38px; }
  .main-content { padding:18px 11px 24px; }
  .page-heading { margin-bottom:16px; }
  .page-heading h1 { font-size:22px; letter-spacing:-.5px; }
  .eyebrow { margin-bottom:5px; font-size:9px; }
  .page-heading p:not(.eyebrow) { margin-top:5px; font-size:10px; }
  .date-chip { padding:7px 9px; font-size:9px; }
  .dashboard-grid,.main-stack,.side-stack { gap:11px; }
  .hero-card { min-height:230px; }
  .hero-copy { padding:20px 17px; }
  .hero-kicker { padding:5px 8px; font-size:9px; }
  .hero-copy h2 { max-width:72%; margin:13px 0 8px; font-size:19px; }
  .hero-copy p { display:none; }
  .xp-row { max-width:66%; margin-top:15px; }
  .level-pill { padding:5px 7px; font-size:9px; }
  .hero-art { right:-28px; width:185px; height:185px; }
  .hero-orbit { width:150px; height:150px; }
  .stats-row { gap:8px; }
  .stat-card { min-height:86px; padding:12px; }
  .stat-head { font-size:9px; }
  .stat-icon { width:27px; height:27px; }
  .stat-value { margin-top:7px; font-size:20px; }
  .stat-value small { font-size:8px; }
  .card-pad { padding:14px; }
  .section-head { margin-bottom:11px; }
  .section-head h2 { font-size:15px; }
  .section-head p { font-size:9px; }
  .important-task { padding:9px 3px; }
  .task-check { width:24px; height:24px; }
  .task-title { margin-bottom:5px; font-size:12px; }
  .task-meta { font-size:8px; }
  .project-tag { padding:4px 6px; font-size:8px; }
  .kanban-column { flex-basis:84vw; padding:11px; }
  .task-card { padding:12px; }
  .task-card h3 { font-size:12px; }
  .task-card p { font-size:9px; }
  .review-task { gap:8px; padding:8px; }
  .review-task-copy strong { font-size:11px; }
  .review-task-copy span { font-size:8px; }
  .review-button { width:29px; height:29px; }
}