:root {
  color: #172033;
  background: #f3f5f8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --navy-950: #0e192a;
  --navy-900: #14243b;
  --navy-800: #1d3553;
  --gold-500: #d6a63f;
  --gold-300: #eed28e;
  --teal-600: #23787b;
  --teal-100: #dff1ef;
  --surface: #ffffff;
  --canvas: #f3f5f8;
  --line: #e4e8ee;
  --muted: #6b7688;
  --shadow: 0 16px 44px rgba(23, 32, 51, 0.08);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-height: 100vh; margin: 0; background: var(--canvas); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Authentication */
.auth-view { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 430px) 1fr; background: #f7f6f1; }
.auth-panel { min-height: calc(100vh - 48px); margin: 24px 0 24px 42px; padding: 40px 29px 32px; display: flex; flex-direction: column; color: #f8fafc; background: var(--navy-950); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 26px 80px rgba(14,25,42,.24); overflow-y: auto; }
.auth-brand-card { display: flex; align-items: center; gap: 13px; margin: 0 auto 42px; padding: 12px 15px; border: 1px solid rgba(214,166,63,.28); border-radius: 14px; background: rgba(255,255,255,.035); }
.auth-brand-card strong, .sidebar-brand strong { display: block; letter-spacing: .13em; font-size: 15px; }
.auth-brand-card small, .sidebar-brand small { display: block; margin-top: 3px; color: #96a4b9; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.brand-emblem { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; color: var(--navy-950); background: linear-gradient(145deg, #f0d78f, #c7952f); border-radius: 16px 16px 16px 5px; box-shadow: inset 0 1px rgba(255,255,255,.6), 0 12px 30px rgba(214,166,63,.18); font-family: Georgia, serif; font-size: 28px; font-weight: 800; }
.brand-emblem.small { width: 40px; height: 40px; border-radius: 12px 12px 12px 4px; font-size: 21px; }
.auth-content { width: 100%; margin: auto 0; animation: panel-in .24s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.auth-kicker, .section-kicker { margin: 0 0 7px; color: var(--gold-300); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-content h1 { margin: 0; color: #fff; font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.auth-intro { margin: 10px 0 27px; color: #96a4b9; font-size: 13px; line-height: 1.6; }
.field-label { display: block; margin: 14px 0 6px; color: #d8deea; font-size: 11px; font-weight: 650; }
.field-label.light { color: #48566b; }
.field-control { height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; color: #7b8798; background: #fbfcfe; border: 1px solid transparent; border-radius: 8px; transition: border-color .16s ease, box-shadow .16s ease; }
.field-control:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(214,166,63,.14); }
.field-control svg { width: 17px; height: 17px; }
.field-control input { min-width: 0; flex: 1; padding: 0; color: #172033; background: transparent; border: 0; outline: 0; font-size: 13px; }
.field-control input::placeholder { color: #a6afbc; }
.field-icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: #7b8798; background: transparent; border: 0; border-radius: 7px; }
.field-icon-button:hover { color: var(--navy-900); background: #edf0f4; }
.auth-form-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 14px 0 18px; }
.check-control { display: flex; align-items: center; gap: 7px; color: #aeb8c8; font-size: 11px; cursor: pointer; }
.check-control input { width: 15px; height: 15px; accent-color: var(--gold-500); }
.link-button, .auth-back { padding: 0; color: #d7be7b; background: transparent; border: 0; font-size: 11px; }
.link-button:hover, .auth-back:hover { color: #ffe6a3; }
.auth-back { margin-bottom: 26px; }
.form-error { min-height: 17px; margin: -8px 0 5px; color: #fca5a5; font-size: 11px; }
.primary-button, .secondary-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 16px; border-radius: 8px; font-size: 12px; font-weight: 760; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.primary-button { color: #fff; background: #168ec3; border: 1px solid #168ec3; box-shadow: 0 10px 24px rgba(22,142,195,.2); }
.primary-button:hover { background: #087daF; transform: translateY(-1px); box-shadow: 0 13px 28px rgba(22,142,195,.28); }
.primary-button svg { width: 17px; height: 17px; }
.secondary-button { margin-top: 12px; color: var(--navy-950); background: #f8fafc; border: 1px solid #f8fafc; }
.secondary-button:hover { background: #e9edf3; transform: translateY(-1px); }
.secondary-button svg { width: 17px; height: 17px; }
.template-note { display: flex; align-items: flex-start; gap: 7px; margin: 22px 0 0; color: #718096; font-size: 9px; line-height: 1.45; }
.template-note svg { width: 13px; height: 13px; flex: 0 0 auto; }
.auth-feedback { min-height: 20px; color: #9ae6b4; font-size: 11px; line-height: 1.5; }
.profile-photo-editor { display: flex; align-items: center; gap: 15px; margin: 4px 0 19px; }
.profile-avatar, .mini-avatar, .hero-avatar { display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--teal-600), var(--navy-800)); font-weight: 800; text-transform: uppercase; }
.profile-avatar { width: 62px; height: 62px; border: 2px solid rgba(238,210,142,.44); border-radius: 18px; }
.profile-avatar img, .mini-avatar img, .hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.photo-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; color: #dce3ed; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.photo-button:hover { background: rgba(255,255,255,.07); }
.photo-button svg { width: 15px; height: 15px; }
.photo-button input, .avatar-upload-button input { display: none; }
.profile-photo-editor.light .photo-button { color: #425168; border-color: #dce2ea; }
.auth-stage { position: relative; min-width: 0; display: flex; align-items: flex-end; padding: 72px 7vw; overflow: hidden; background: radial-gradient(circle at 72% 20%, rgba(35,120,123,.16), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.48), transparent 55%), #f7f6f1; }
.auth-stage::before { position: absolute; inset: 0; content: ""; opacity: .34; background-image: linear-gradient(rgba(20,36,59,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(20,36,59,.10) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom right, transparent, #000 34%, #000); }
.auth-stage::after { position: absolute; top: 8%; right: 8%; width: min(32vw, 430px); aspect-ratio: 1; content: "T"; display: grid; place-items: center; color: rgba(20,36,59,.055); border: 1px solid rgba(20,36,59,.08); border-radius: 50%; font-family: Georgia, serif; font-size: min(24vw, 330px); font-weight: 800; }
.auth-stage-copy { position: relative; z-index: 1; max-width: 700px; }
.stage-line { width: 68px; height: 4px; display: block; margin-bottom: 23px; background: var(--gold-500); border-radius: 99px; }
.auth-stage-copy p { margin: 0 0 9px; color: var(--teal-600); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.auth-stage-copy h2 { max-width: 670px; margin: 0; color: var(--navy-900); font-size: clamp(34px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -.045em; }
.stage-meta { display: flex; gap: 8px; margin-top: 27px; }
.stage-meta span { padding: 7px 10px; color: #5f6a79; border: 1px solid rgba(20,36,59,.13); border-radius: 99px; background: rgba(255,255,255,.45); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Workspace shell */
.workspace-view { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 244px; display: flex; flex-direction: column; padding: 24px 15px 18px; color: #fff; background: linear-gradient(175deg, var(--navy-950), #152a44 76%, #183a51); box-shadow: 10px 0 34px rgba(14,25,42,.09); }
.sidebar-brand { min-height: 65px; display: flex; align-items: center; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand-logo { display: block; width: 100%; max-width: 174px; height: auto; padding: 8px 10px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.35); border-radius: 10px; filter: drop-shadow(0 8px 16px rgba(4,11,21,.18)); }
.sidebar-nav { display: grid; gap: 7px; margin-top: 25px; }
.nav-item { min-height: 46px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 0 12px; color: #9ba9bc; background: transparent; border: 1px solid transparent; border-radius: 11px; text-align: left; font-size: 12px; font-weight: 650; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-item.is-active { color: #fff; background: linear-gradient(90deg, rgba(214,166,63,.22), rgba(214,166,63,.07)); border-color: rgba(238,210,142,.17); }
.nav-item.is-active::before { position: absolute; width: 3px; height: 23px; margin-left: -13px; content: ""; background: var(--gold-500); border-radius: 99px; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item b { min-width: 21px; padding: 3px 5px; text-align: center; color: #f4d889; background: rgba(214,166,63,.13); border-radius: 99px; font-size: 9px; }
.sidebar-profile { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; margin-top: auto; padding: 13px 3px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-user { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px; color: #fff; background: transparent; border: 0; border-radius: 9px; text-align: left; }
.sidebar-user:hover { background: rgba(255,255,255,.06); }
.sidebar-user > span { min-width: 0; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { max-width: 125px; font-size: 10px; }
.sidebar-user small { max-width: 125px; margin-top: 2px; color: #8797ac; font-size: 8px; }
.mini-avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; font-size: 10px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #58667a; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.icon-button:hover { color: var(--navy-900); background: #f6f8fa; }
.icon-button svg { width: 17px; height: 17px; }
.sidebar-logout { color: #abb7c6; background: transparent; border-color: transparent; }
.sidebar-logout:hover { color: #fff; background: rgba(255,255,255,.07); }
.app-shell { min-width: 0; grid-column: 2; }
.topbar { position: sticky; top: 0; z-index: 40; height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; padding: 0 32px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions, .topbar-date { display: flex; align-items: center; }
.topbar-left { gap: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: #9aa3b1; font-size: 10px; }
.breadcrumb b { color: #d4dae2; }
.breadcrumb strong { color: #405068; font-weight: 700; }
.topbar-date { gap: 7px; color: #405068; }
.topbar-date svg { width: 16px; height: 16px; color: var(--teal-600); }
.topbar-date span { font-size: 12px; font-weight: 800; }
.topbar-date small { padding-left: 7px; color: #8892a0; border-left: 1px solid #dfe3e8; font-size: 9px; }
.topbar-actions { justify-content: flex-end; gap: 9px; }
.topbar-actions .icon-button { position: relative; }
.topbar-actions .icon-button i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; background: var(--gold-500); border-radius: 50%; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 4px; color: #334155; background: #f6f8fa; border: 1px solid #e8ebef; border-radius: 11px; font-size: 10px; font-weight: 700; }
.mobile-menu-button { display: none; }
.workspace-main { width: min(1400px, 100%); margin: 0 auto; padding: 28px 32px 112px; }
.page-section { animation: panel-in .24s ease; }

/* Workspace body */
.welcome-card { min-height: 150px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 34px; overflow: hidden; color: #fff; background: linear-gradient(118deg, var(--navy-900), #1b4b62 72%, #23787b); border-radius: 18px; box-shadow: 0 18px 42px rgba(20,36,59,.13); }
.welcome-card::after { position: absolute; right: -45px; top: -100px; width: 320px; height: 320px; content: ""; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 105px rgba(255,255,255,.018); }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy h1 { margin: 0; font-size: clamp(24px,3vw,38px); letter-spacing: -.035em; }
.welcome-copy h1 strong { color: #f3d98f; }
.welcome-copy > p:last-child { margin: 10px 0 0; color: #b7c7d5; font-size: 12px; }
.welcome-profile { position: relative; z-index: 1; margin-right: 28px; }
.welcome-brand { position: relative; z-index: 1; width: clamp(170px,18vw,235px); margin-right: 18px; padding: 12px 15px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.5); border-radius: 14px 14px 14px 5px; box-shadow: 0 12px 28px rgba(4,11,21,.2); }
.welcome-brand img { display: block; width: 100%; height: auto; }
.hero-avatar { width: 94px; height: 94px; border: 3px solid rgba(255,255,255,.82); border-radius: 28px 28px 28px 8px; box-shadow: 0 12px 28px rgba(4,11,21,.22); font-size: 23px; }
.avatar-upload-button { position: absolute; right: -7px; bottom: -6px; width: 33px; height: 33px; display: grid; place-items: center; color: var(--navy-950); background: var(--gold-300); border: 3px solid #1d5668; border-radius: 10px; cursor: pointer; }
.avatar-upload-button svg { width: 14px; height: 14px; }
.information-grid { display: grid; grid-template-columns: .86fr 1.08fr 1.2fr; gap: 16px; margin-top: 17px; }
.info-card, .shortcuts-card, .tasks-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.info-card { min-height: 178px; padding: 20px; }
.date-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 14px; overflow: hidden; }
.date-card::after { position: absolute; right: -25px; bottom: -30px; width: 115px; height: 115px; content: ""; background: rgba(35,120,123,.06); border-radius: 50%; }
.card-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--teal-600); background: var(--teal-100); border-radius: 12px; }
.card-icon svg { width: 20px; height: 20px; }
.info-card-heading span, .card-head span { display: block; color: #687589; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
.info-card-heading strong { display: block; margin-top: 4px; color: var(--navy-900); font-size: 39px; line-height: 1; }
.date-details { grid-column: 1 / -1; display: grid; gap: 3px; margin-top: 6px; }
.date-details b { color: var(--navy-800); font-size: 13px; text-transform: capitalize; }
.date-details span { color: #5e6c7f; font-size: 11px; text-transform: capitalize; }
.date-details small { margin-top: 4px; color: #9aa4b2; font-size: 9px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head small { display: block; margin-top: 4px; color: #9aa4b2; font-size: 9px; }
.refresh-button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; color: #79869a; background: #f7f9fb; border: 1px solid #edf0f3; border-radius: 8px; }
.refresh-button:hover { color: var(--teal-600); border-color: #cde3e2; }
.refresh-button.is-loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.weather-value { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; margin-top: 17px; }
.weather-value > svg { width: 34px; height: 34px; color: #3b9cba; }
.weather-value strong { color: var(--navy-900); font-size: 32px; letter-spacing: -.04em; }
.weather-value span { color: #506076; font-size: 11px; line-height: 1.35; }
.weather-meta { display: flex; gap: 14px; margin-top: 13px; padding-top: 11px; color: #8b96a5; border-top: 1px solid #edf0f3; font-size: 9px; }
.weather-meta b { color: #4b596c; }
.market-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 18px; }
.market-list div { padding: 10px; background: #f7f9fb; border: 1px solid #edf0f3; border-radius: 9px; }
.market-list span, .market-list strong { display: block; }
.market-list span { color: #8b96a5; font-size: 8px; font-weight: 750; }
.market-list strong { margin-top: 5px; color: var(--navy-900); font-size: 13px; }
.market-card > p { margin: 10px 0 0; color: #a0a9b5; font-size: 8px; }
.market-card > p a { color: #758498; text-underline-offset: 2px; }
.shortcuts-card, .tasks-card { margin-top: 17px; padding: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.section-heading .section-kicker, .page-title-row .section-kicker { color: var(--teal-600); }
.section-heading h2, .modal-card h2 { margin: 0; color: var(--navy-900); font-size: 18px; letter-spacing: -.025em; }
.text-button { display: flex; align-items: center; gap: 6px; padding: 7px 9px; color: var(--teal-600); background: transparent; border: 0; border-radius: 8px; font-size: 10px; font-weight: 750; }
.text-button:hover { background: var(--teal-100); }
.text-button svg { width: 14px; height: 14px; }
.web-search { height: 46px; display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 0 7px 0 14px; background: #f8fafc; border: 1px solid #dde3ea; border-radius: 23px; box-shadow: inset 0 1px 2px rgba(15,23,42,.03); }
.web-search > svg { width: 17px; height: 17px; color: #6d798a; }
.web-search input { min-width: 0; flex: 1; padding: 0; color: #25334a; background: transparent; border: 0; outline: 0; font-size: 11px; }
.web-search button { width: 33px; height: 33px; display: grid; place-items: center; padding: 0; color: var(--teal-600); background: #e6f1f1; border: 0; border-radius: 50%; }
.web-search button:hover { color: #fff; background: var(--teal-600); }
.web-search button svg { width: 15px; height: 15px; }
.shortcut-list { display: grid; grid-template-columns: repeat(8,minmax(70px,1fr)); gap: 12px; margin-top: 18px; }
.shortcut-wrap { min-width: 0; position: relative; }
.shortcut-item { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px; color: #46546a; background: transparent; border: 0; border-radius: 10px; text-decoration: none; font-size: 9px; font-weight: 650; }
.shortcut-item:hover { color: var(--teal-600); background: #f7f9fb; }
.shortcut-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--shortcut-color,#23787b); background: color-mix(in srgb, var(--shortcut-color,#23787b) 9%, #fff); border: 1px solid color-mix(in srgb, var(--shortcut-color,#23787b) 24%, #e8edf1); border-radius: 12px; box-shadow: 0 5px 12px rgba(15,23,42,.05); font-size: 15px; font-weight: 850; }
.shortcut-item span:last-child { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-delete { position: absolute; top: -3px; right: 6px; width: 18px; height: 18px; display: none; place-items: center; padding: 0; color: #9b2c2c; background: #fff; border: 1px solid #f2d3d3; border-radius: 50%; }
.shortcut-wrap:hover .shortcut-delete { display: grid; }
.shortcut-delete svg { width: 9px; height: 9px; }
.quick-task-form { display: flex; gap: 9px; margin-top: 16px; }
.quick-task-form input { min-width: 0; flex: 1; height: 43px; padding: 0 13px; color: #27364c; background: #f8fafc; border: 1px solid #e0e5eb; border-radius: 9px; outline: none; font-size: 11px; }
.quick-task-form input:focus { border-color: #79aaa9; box-shadow: 0 0 0 3px rgba(35,120,123,.1); }
.quick-task-form button { min-width: 82px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; background: var(--teal-600); border: 0; border-radius: 9px; font-size: 10px; font-weight: 750; }
.quick-task-form button:hover { background: #1c6568; }
.quick-task-form svg { width: 15px; height: 15px; }
.dashboard-task-list, .full-task-list { display: grid; gap: 7px; margin-top: 13px; }
.task-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 43px; padding: 7px 9px; background: #fbfcfd; border: 1px solid #edf0f3; border-radius: 9px; }
.task-check { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: transparent; background: #fff; border: 1px solid #cfd6df; border-radius: 7px; }
.task-check svg { width: 13px; height: 13px; }
.task-item.is-done .task-check { color: #fff; background: var(--teal-600); border-color: var(--teal-600); }
.task-item.is-done .task-copy strong { color: #8d97a4; text-decoration: line-through; }
.task-copy { min-width: 0; }
.task-copy strong { display: block; overflow: hidden; color: #334155; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-copy small { display: block; margin-top: 3px; color: #9ba4b1; font-size: 8px; }
.task-delete { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #a3acb8; background: transparent; border: 0; border-radius: 7px; }
.task-delete:hover { color: #a52c2c; background: #fff0f0; }
.task-delete svg { width: 14px; height: 14px; }
.empty-state { padding: 22px 15px; color: #8c97a7; border: 1px dashed #dce2e9; border-radius: 10px; text-align: center; font-size: 10px; }
.empty-state svg { width: 24px; height: 24px; display: block; margin: 0 auto 7px; color: #a9b3c0; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 7px 0 22px; }
.page-title-row h1 { margin: 0; color: var(--navy-900); font-size: 30px; letter-spacing: -.035em; }
.page-title-row > div > p:last-child { margin: 7px 0 0; color: #788496; font-size: 11px; }
.task-summary { padding: 8px 11px; color: var(--teal-600); background: var(--teal-100); border-radius: 99px; font-size: 9px; font-weight: 750; }
.full-task-card { margin-top: 0; min-height: 430px; }
.quick-task-form.large input { height: 49px; }
.quick-task-form.large button { min-width: 125px; }
.task-filters { display: flex; gap: 5px; margin-top: 19px; padding-bottom: 14px; border-bottom: 1px solid #edf0f3; }
.task-filters button { padding: 7px 11px; color: #778396; background: #f5f7f9; border: 0; border-radius: 8px; font-size: 9px; font-weight: 700; }
.task-filters button.is-active { color: #fff; background: var(--navy-800); }
.full-task-list .task-item { min-height: 51px; }

/* Reports */
.report-count { padding: 8px 11px; color: #fff; background: var(--navy-800); border-radius: 99px; font-size: 9px; font-weight: 750; }
.carbon-report-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.carbon-report-header { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 28px; background: linear-gradient(125deg,#f8fafc,#edf5f5); border-bottom: 1px solid #e1e7eb; }
.carbon-report-header h2 { margin: 0; color: #0b3d6e; font-size: clamp(23px,3vw,34px); letter-spacing: -.035em; }
.carbon-report-header > div > p:last-child { margin: 8px 0 0; color: #748195; font-size: 10px; }
.carbon-report-header img { width: min(185px,28vw); height: auto; flex: 0 0 auto; }
.carbon-filter { display: grid; grid-template-columns: minmax(160px,210px) minmax(160px,210px) auto auto minmax(180px,1fr); align-items: end; gap: 10px; padding: 18px 28px; background: #fbfcfd; border-bottom: 1px solid #e7ebef; }
.carbon-filter label span { display: block; margin: 0 0 6px; color: #5e6c80; font-size: 9px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.carbon-filter input { width: 100%; height: 42px; padding: 0 11px; color: #263750; background: #fff; border: 1px solid #dbe2e8; border-radius: 9px; outline: 0; font-size: 11px; }
.carbon-filter input:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(35,120,123,.11); }
.carbon-filter-button, .carbon-reset-button { height: 42px; border-radius: 9px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.carbon-filter-button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; color: #fff; background: var(--navy-800); border: 1px solid var(--navy-800); }
.carbon-filter-button:hover { background: #294969; }
.carbon-filter-button svg { width: 15px; height: 15px; }
.carbon-reset-button { padding: 0 13px; color: var(--teal-600); background: #fff; border: 1px solid #cfd9df; }
.carbon-reset-button:hover { background: var(--teal-100); }
.carbon-filter > p { align-self: center; justify-self: end; margin: 0; color: #8994a3; font-size: 9px; text-align: right; }
.carbon-chart-status { min-height: 17px; margin: 16px 28px 0; color: #7b8796; font-size: 9px; }
.carbon-chart-scroller { padding: 0 22px; overflow-x: auto; overscroll-behavior-inline: contain; }
.carbon-chart { min-width: 720px; }
.carbon-chart svg { width: 100%; height: auto; display: block; overflow: visible; color: #0e4477; }
.carbon-chart text { stroke: none; font-family: Inter,ui-sans-serif,system-ui,sans-serif; }
.carbon-chart .chart-grid { stroke: #d8e0e6; stroke-width: 1; }
.carbon-chart .chart-axis-label { fill: #64748b; font-size: 12px; font-weight: 650; }
.carbon-chart .chart-x-label { fill: #52647a; font-size: 10px; font-weight: 650; }
.carbon-chart .chart-area { fill: rgba(35,120,123,.09); stroke: none; }
.carbon-chart .chart-line { fill: none; stroke: #0d467a; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.carbon-chart .chart-average { stroke: #d6a63f; stroke-width: 1.5; stroke-dasharray: 7 6; }
.carbon-chart .chart-average-label { fill: #9a6d15; font-size: 10px; font-weight: 800; }
.carbon-chart .chart-point { fill: #fff; stroke: #0d467a; stroke-width: 2.2; }
.carbon-chart .chart-point.is-min { fill: #fff1f1; stroke: #c43b3b; }
.carbon-chart .chart-point.is-max { fill: #eef8f7; stroke: #23787b; }
.carbon-chart-empty { min-height: 300px; display: grid; place-items: center; color: #8491a2; border: 1px dashed #d9e0e6; border-radius: 12px; font-size: 11px; }
.carbon-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 7px 28px 24px; }
.carbon-stat { min-height: 96px; display: grid; align-content: center; justify-items: center; padding: 14px; background: #f7f9fb; border: 1px solid #e4e9ee; border-radius: 13px; text-align: center; }
.carbon-stat span { color: #788598; font-size: 9px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.carbon-stat strong { margin-top: 5px; color: var(--navy-900); font-size: 25px; letter-spacing: -.035em; }
.carbon-stat small { margin-top: 3px; color: #98a2af; font-size: 9px; }
.carbon-stat.average { background: linear-gradient(135deg,#14243b,#1d4660); border-color: #1d4660; box-shadow: 0 12px 24px rgba(20,36,59,.13); }
.carbon-stat.average span, .carbon-stat.average small { color: #bac9d5; }
.carbon-stat.average strong { color: #f2d486; }
.carbon-report-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 28px; color: #8290a1; background: #f8fafb; border-top: 1px solid #e5eaee; font-size: 9px; }
.carbon-report-footer a { color: #0d5f91; font-weight: 750; text-underline-offset: 2px; }

/* Floating quick tools */
.quick-dock { position: fixed; z-index: 70; left: calc(50% + 122px); bottom: 18px; width: min(660px, calc(100vw - 300px)); min-height: 58px; display: grid; grid-template-columns: 35px auto minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px; color: #e7edf5; background: radial-gradient(circle at 20% 0, rgba(255,255,255,.17), transparent 28%), linear-gradient(145deg, rgba(39,53,73,.98), rgba(13,22,36,.98)); border: 1px solid rgba(255,255,255,.23); border-radius: 17px; box-shadow: 0 21px 55px rgba(15,23,42,.3), inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(18px); user-select: none; }
.dock-grip { width: 4px; height: 25px; justify-self: center; border-left: 2px dotted rgba(255,255,255,.25); border-right: 2px dotted rgba(255,255,255,.25); cursor: grab; touch-action: none; }
.dock-brand { width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy-950); background: linear-gradient(135deg,#f3d46e,#d6a325); border-radius: 11px; }
.dock-brand svg { width: 17px; height: 17px; fill: currentColor; }
.dock-tools { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.dock-tools::-webkit-scrollbar { display: none; }
.dock-tools button, .dock-tools a, .dock-add, .dock-window-actions button { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #bac5d3; background: transparent; border: 0; border-radius: 9px; text-decoration: none; }
.dock-tools button:hover, .dock-tools a:hover, .dock-add:hover, .dock-window-actions button:hover { color: #fff; background: rgba(255,255,255,.10); }
.dock-tools svg, .dock-add svg { width: 16px; height: 16px; }
.dock-add { color: #f0d588; border-left: 1px solid rgba(255,255,255,.15); border-radius: 0 9px 9px 0; }
.dock-window-actions { display: grid; gap: 3px; padding-left: 7px; border-left: 1px solid rgba(255,255,255,.15); }
.dock-window-actions button { width: 22px; height: 20px; color: #b7c2d0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 6px; }
.dock-window-actions svg { width: 11px; height: 11px; }
.quick-dock.is-minimized { width: 150px; grid-template-columns: 28px auto 1fr; }
.quick-dock.is-minimized .dock-tools, .quick-dock.is-minimized .dock-add { display: none; }
.quick-dock.is-minimized .dock-window-actions { grid-column: 3; grid-row: 1; grid-auto-flow: column; grid-template-columns: 22px 22px; justify-self: end; }
.dock-restore { position: fixed; z-index: 70; right: 18px; bottom: 18px; width: 46px; height: 46px; display: grid; place-items: center; color: var(--navy-950); background: linear-gradient(135deg,#f3d46e,#d6a325); border: 2px solid #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(15,23,42,.25); }
.dock-restore svg { width: 20px; height: 20px; fill: currentColor; }

/* Dialogs and toast */
.modal-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; padding: 0; background: rgba(14,25,42,.52); border: 0; backdrop-filter: blur(4px); }
.modal-card { position: relative; z-index: 1; width: min(430px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 23px; background: #fff; border: 1px solid #e3e7ed; border-radius: 16px; box-shadow: 0 28px 90px rgba(15,23,42,.3); animation: panel-in .2s ease; }
.modal-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal-card .section-kicker { color: var(--teal-600); }
.modal-input { width: 100%; height: 45px; padding: 0 12px; color: #27364c; background: #f8fafc; border: 1px solid #dfe4ea; border-radius: 8px; outline: 0; font-size: 11px; }
.modal-input:focus { border-color: #79aaa9; box-shadow: 0 0 0 3px rgba(35,120,123,.1); }
.modal-card .primary-button { margin-top: 19px; }
.calculator-form { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 8px; }
.calculator-form .primary-button, .calculator-form output { grid-column: 1 / -1; }
.calculator-form output { min-height: 54px; display: grid; place-items: center; margin-top: 2px; color: var(--navy-900); background: #edf5f4; border-radius: 10px; font-size: 24px; font-weight: 800; }
.toast { position: fixed; z-index: 120; right: 22px; bottom: 22px; max-width: 340px; padding: 12px 15px; color: #fff; background: var(--navy-900); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; box-shadow: 0 15px 38px rgba(15,23,42,.24); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; font-size: 10px; line-height: 1.45; }
.toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .shortcut-list { grid-template-columns: repeat(6,minmax(70px,1fr)); }
  .information-grid { grid-template-columns: repeat(2,1fr); }
  .market-card { grid-column: 1 / -1; }
  .carbon-filter { grid-template-columns: repeat(2,minmax(160px,1fr)) auto auto; }
  .carbon-filter > p { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

@media (max-width: 840px) {
  .auth-view { grid-template-columns: 1fr; padding: 20px; background: linear-gradient(145deg,#f7f6f1,#edf3f3); }
  .auth-panel { width: min(430px,100%); min-height: calc(100vh - 40px); margin: 0 auto; }
  .auth-stage { display: none; }
  .workspace-view { grid-template-columns: 1fr; }
  .app-sidebar { z-index: 90; transform: translateX(-102%); transition: transform .2s ease; }
  .app-sidebar.is-open { transform: none; }
  .app-shell { grid-column: 1; }
  .mobile-menu-button { display: grid; }
  .quick-dock { left: 50%; width: min(630px,calc(100vw - 28px)); transform: translateX(-50%); }
}

@media (max-width: 660px) {
  .topbar { grid-template-columns: 1fr auto; height: 62px; padding: 0 14px; }
  .topbar-date { display: none; }
  .topbar-user span { display: none; }
  .workspace-main { padding: 16px 14px 106px; }
  .welcome-card { min-height: 170px; padding: 23px; }
  .welcome-profile { margin-right: 2px; }
  .welcome-brand { width: 170px; margin-right: 0; padding: 10px 12px; }
  .hero-avatar { width: 72px; height: 72px; border-radius: 21px 21px 21px 7px; }
  .welcome-copy h1 { font-size: 24px; }
  .information-grid { grid-template-columns: 1fr; }
  .market-card { grid-column: auto; }
  .shortcut-list { grid-template-columns: repeat(4,minmax(58px,1fr)); }
  .shortcuts-card, .tasks-card { padding: 17px; }
  .quick-task-form button span { display: none; }
  .quick-task-form button { min-width: 44px; }
  .quick-task-form.large button { min-width: 52px; }
  .section-heading { align-items: flex-end; }
  .quick-dock { grid-template-columns: 24px auto minmax(0,1fr) auto; gap: 4px; }
  .dock-add { display: none; }
  .dock-tools button, .dock-tools a { width: 32px; }
  .dock-grip { display: none; }
  .page-title-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .carbon-report-header { align-items: flex-start; padding: 21px; }
  .carbon-report-header img { width: 130px; }
  .carbon-filter { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px 20px; }
  .carbon-filter-button, .carbon-reset-button { width: 100%; }
  .carbon-chart-status { margin-inline: 20px; }
  .carbon-chart-scroller { padding-inline: 14px; }
  .carbon-summary { padding: 7px 20px 20px; }
}

@media (max-width: 430px) {
  .auth-view { padding: 0; }
  .auth-panel { min-height: 100vh; margin: 0; padding: 28px 22px; border: 0; border-radius: 0; }
  .auth-brand-card { margin-bottom: 30px; }
  .welcome-card { align-items: flex-start; }
  .welcome-profile { position: absolute; right: 20px; top: 20px; opacity: .36; }
  .welcome-brand { position: absolute; right: 18px; top: auto; bottom: 18px; width: 110px; margin: 0; padding: 7px 8px; opacity: .58; }
  .welcome-copy { max-width: 90%; }
  .market-list { gap: 5px; }
  .market-list div { padding: 8px 6px; }
  .shortcut-list { grid-template-columns: repeat(3,1fr); }
  .quick-dock { bottom: 10px; width: calc(100vw - 16px); }
  .dock-tools button:nth-child(5), .dock-tools a:nth-child(5) { display: none; }
  .carbon-report-header { min-height: 145px; }
  .carbon-report-header img { width: 105px; opacity: .78; }
  .carbon-filter { grid-template-columns: 1fr; }
  .carbon-filter > p { grid-column: auto; }
  .carbon-summary { grid-template-columns: 1fr; }
  .carbon-stat.average { order: -1; }
  .carbon-report-footer { align-items: flex-start; flex-direction: column; }
}

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