/* Konumla Cloud — Material 3 design tokens and components */
:root {
  color-scheme: light;
  --md-sys-color-primary: #5146d8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e7e3ff;
  --md-sys-color-on-primary-container: #1d175f;
  --md-sys-color-secondary: #5d5b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e5e1f5;
  --md-sys-color-on-secondary-container: #1b1a2d;
  --md-sys-color-tertiary: #795369;
  --md-sys-color-tertiary-container: #ffd8ec;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-background: #f8f7fc;
  --md-sys-color-on-background: #1b1b24;
  --md-sys-color-surface: #f8f7fc;
  --md-sys-color-surface-dim: #dedde5;
  --md-sys-color-surface-bright: #f8f7fc;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f1f8;
  --md-sys-color-surface-container: #eeedf4;
  --md-sys-color-surface-container-high: #e8e7ef;
  --md-sys-color-surface-container-highest: #e3e1e9;
  --md-sys-color-on-surface: #1b1b24;
  --md-sys-color-on-surface-variant: #484650;
  --md-sys-color-outline: #797782;
  --md-sys-color-outline-variant: #c8c5d1;
  --md-sys-color-inverse-surface: #303038;
  --md-sys-color-inverse-on-surface: #f2f0f8;
  --md-sys-color-inverse-primary: #c5c0ff;
  --md-sys-color-shadow: #171521;
  --md-sys-color-scrim: #000000;
  --md-sys-color-success: #216c45;
  --md-sys-color-success-container: #c9f2d7;
  --md-sys-color-warning: #805d09;
  --md-sys-color-warning-container: #ffedc2;
  --font: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 24px;
  --shape-2xl: 28px;
  --shape-full: 999px;
  --elevation-1: 0 1px 2px rgb(22 20 37 / 8%), 0 1px 3px 1px rgb(22 20 37 / 5%);
  --elevation-2: 0 2px 6px rgb(22 20 37 / 10%), 0 4px 10px rgb(22 20 37 / 7%);
  --motion-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-emphasized: cubic-bezier(.2, 0, 0, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--md-sys-color-on-background); background: var(--md-sys-color-background); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
.material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Material 3 buttons, text fields, and focus states */
.filled-button, .tonal-button, .outlined-button, .text-button, .icon-button {
  border: 0; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none;
  transition: background-color 180ms var(--motion-standard), color 180ms var(--motion-standard), box-shadow 180ms var(--motion-standard), transform 180ms var(--motion-standard);
}
.filled-button, .tonal-button, .outlined-button {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; border-radius: var(--shape-full); font-size: 14px; font-weight: 600; letter-spacing: .1px; white-space: nowrap;
}
.filled-button { color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); box-shadow: var(--elevation-1); }
.filled-button:hover { background: #4439c5; box-shadow: var(--elevation-2); }
.filled-button:active, .tonal-button:active, .outlined-button:active { transform: scale(.98); }
.tonal-button { color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); }
.tonal-button:hover { background: #dcd7ff; }
.outlined-button { color: var(--md-sys-color-primary); background: transparent; border: 1px solid var(--md-sys-color-outline-variant); }
.outlined-button:hover { background: rgb(81 70 216 / 7%); border-color: var(--md-sys-color-primary); }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: var(--md-sys-color-primary); background: transparent; border-radius: var(--shape-full); font-weight: 600; }
.text-button:hover { background: rgb(81 70 216 / 8%); }
.icon-button { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; padding: 0; color: var(--md-sys-color-on-surface-variant); background: transparent; border-radius: var(--shape-full); }
.icon-button:hover { color: var(--md-sys-color-on-surface); background: rgb(72 70 80 / 8%); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgb(81 70 216 / 30%); outline-offset: 2px; }

/* Sign in / create account */
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(510px, 1.1fr); background: var(--md-sys-color-surface-container-lowest); }
.auth-showcase { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 38px clamp(32px, 5vw, 76px) 28px; color: #f8f6ff; background: radial-gradient(ellipse at 78% 88%, rgb(148 131 255 / 27%), transparent 43%), radial-gradient(ellipse at 4% 2%, rgb(158 146 255 / 28%), transparent 36%), linear-gradient(148deg, #29236d 0%, #3c338f 47%, #5146d8 100%); }
.auth-showcase::before, .auth-showcase::after { position: absolute; z-index: 0; content: ''; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; pointer-events: none; }
.auth-showcase::before { width: 620px; height: 620px; right: -340px; top: 12%; }
.auth-showcase::after { width: 430px; height: 430px; right: -240px; top: 23%; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--md-sys-color-on-surface); font-size: 17px; font-weight: 500; letter-spacing: -.5px; }
.brand strong { color: var(--md-sys-color-primary); font-weight: 700; }
.brand-symbol { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; color: #fff; background: linear-gradient(145deg, #8e80ff, #5548dc); border-radius: 13px; box-shadow: 0 5px 14px rgb(42 34 130 / 24%); }
.brand-symbol .material-symbols-rounded { font-size: 21px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.brand-light { position: relative; z-index: 1; color: #fff; }
.brand-light strong { color: #cfcaff; }
.showcase-copy { position: relative; z-index: 1; max-width: 550px; margin: clamp(56px, 9vh, 104px) auto 0; }
.showcase-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; color: #e5e1ff; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 11%); border-radius: var(--shape-full); font-size: 12px; font-weight: 600; letter-spacing: .15px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #a8f0bc; box-shadow: 0 0 0 4px rgb(168 240 188 / 13%); }
.showcase-copy h1 { margin: 25px 0 15px; font-size: clamp(46px, 5.5vw, 68px); line-height: .99; font-weight: 600; letter-spacing: -3.8px; }
.showcase-copy h1 em { color: #c4bcff; font-style: normal; }
.showcase-copy p { max-width: 405px; margin: 0; color: #d4d0f3; font-size: 16px; line-height: 1.65; }
.showcase-window { position: relative; z-index: 1; width: min(500px, 100%); margin: auto auto 16px; padding: 10px; background: rgb(255 255 255 / 14%); border: 1px solid rgb(255 255 255 / 22%); border-radius: 18px; box-shadow: 0 30px 80px rgb(18 15 70 / 30%); backdrop-filter: blur(10px); transform: perspective(1200px) rotateX(2deg) rotateY(-3deg); }
.window-bar { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 7px 8px; color: #d4d1f0; }
.window-bar > span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 42%); }
.window-bar small { margin-left: 8px; font: 10px var(--font-mono); opacity: .7; }
.window-content { display: grid; min-height: 188px; grid-template-columns: 37px 1fr; gap: 10px; padding: 13px; background: #fbfaff; border-radius: 11px; color: #29263b; }
.window-side { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 4px 0; border-right: 1px solid #eeecf4; }
.window-side i { width: 15px; height: 15px; border-radius: 5px; background: #e8e5ff; }
.window-side i:first-child { background: #665add; }
.window-work { min-width: 0; }
.window-title { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.window-title span { padding: 4px 7px; border: 1px solid #e8e6ee; border-radius: 5px; color: #787483; font-size: 8px; }
.window-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.window-metrics div { padding: 8px 10px; border: 1px solid #eceaf1; border-radius: 8px; }
.window-metrics small, .window-metrics b { display: block; }
.window-metrics small { color: #868291; font-size: 8px; }
.window-metrics b { margin-top: 3px; font-size: 14px; }
.window-chart { height: 43px; display: flex; align-items: end; gap: 7px; padding: 0 9px 5px; border-bottom: 1px solid #efedf4; }
.window-chart i { width: 7%; border-radius: 4px 4px 1px 1px; background: linear-gradient(#b1a9ff, #665add); }
.window-chart i:nth-child(1) { height: 45%; }.window-chart i:nth-child(2) { height: 63%; }.window-chart i:nth-child(3) { height: 47%; }.window-chart i:nth-child(4) { height: 74%; }.window-chart i:nth-child(5) { height: 55%; }.window-chart i:nth-child(6) { height: 84%; }.window-chart i:nth-child(7) { height: 67%; }.window-chart i:nth-child(8) { height: 92%; }.window-chart i:nth-child(9) { height: 69%; }.window-chart i:nth-child(10) { height: 78%; }.window-chart i:nth-child(11) { height: 100%; }.window-chart i:nth-child(12) { height: 86%; }
.window-app { display: flex; align-items: center; gap: 7px; padding: 9px 2px 0; font-size: 9px; }
.window-app-icon { width: 22px; height: 22px; border-radius: 7px; background: #e9e5ff; }
.window-app b, .window-app small { display: block; }.window-app small { margin-top: 2px; color: #7e7b87; font-size: 8px; }.window-app > .material-symbols-rounded { margin-left: auto; color: #5b50d3; font-size: 15px; }
.showcase-note { position: relative; z-index: 1; color: #c7c3ea; font-size: 11px; text-align: center; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 48px 40px 26px; }
.auth-mobile-brand { display: none; }
.auth-card { width: min(420px, 100%); }
.overline { display: block; margin-bottom: 12px; color: var(--md-sys-color-primary); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; }
.auth-card h2 { margin: 0; color: var(--md-sys-color-on-surface); font-size: 32px; font-weight: 600; letter-spacing: -1.05px; }
.auth-intro { margin: 8px 0 18px; color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.oidc-form { margin: 0; display: grid; gap: 0; }
.auth-oidc-button { width: 100%; min-height: 49px; justify-content: flex-start; gap: 11px; padding: 0 15px; color: #363440; background: #fff; border-radius: 16px; font-size: 12px; }
.auth-oidc-button > .material-symbols-rounded:first-child { color: var(--md-sys-color-primary); font-size: 21px; }
.auth-oidc-button .oidc-arrow { margin-left: auto; color: #777481; font-size: 18px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0 15px; color: #93909c; font-size: 10px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ''; background: #e9e7ee; }
.terms-consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 4px; color: #6e6b78; font-size: 10px; line-height: 1.55; }
.terms-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: var(--md-sys-color-primary); cursor: pointer; }
.terms-consent label { flex: 1; cursor: pointer; }
.terms-consent a { color: var(--md-sys-color-primary); font-weight: 650; text-decoration: none; }
.terms-consent a:hover { text-decoration: underline; }
.terms-error { margin: 0 0 14px; padding: 10px 12px; color: #8c201d; background: var(--md-sys-color-error-container); border-radius: 12px; font-size: 11px; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label { color: var(--md-sys-color-on-surface-variant); font-size: 12px; font-weight: 600; }
.input-wrap { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 14px; color: #777582; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 15px; transition: border-color .18s, box-shadow .18s; }
.input-wrap:focus-within { border: 2px solid var(--md-sys-color-primary); padding-left: 13px; box-shadow: 0 0 0 3px rgb(81 70 216 / 7%); }
.input-wrap > .material-symbols-rounded { flex: 0 0 20px; font-size: 19px; }
.input-wrap input { width: 100%; min-width: 0; height: 50px; padding: 0; color: var(--md-sys-color-on-surface); background: transparent; border: 0; outline: none; font-size: 14px; }
.input-wrap input::placeholder { color: #9b99a4; }
.password-toggle { display: grid; width: 30px; height: 34px; flex: 0 0 30px; place-items: center; color: #777582; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.password-toggle:hover { background: var(--md-sys-color-surface-container-high); }
.password-toggle .material-symbols-rounded { font-size: 19px; }
.field-error { min-height: 0; color: var(--md-sys-color-error); font-size: 11px; }
.auth-error { margin: 4px 0 14px; padding: 11px 13px; color: #8c201d; background: var(--md-sys-color-error-container); border-radius: 12px; font-size: 12px; }
.auth-submit { width: 100%; height: 50px; justify-content: space-between; margin-top: 5px; padding: 0 19px 0 22px; border-radius: 16px; }
.auth-switch { margin: 22px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; text-align: center; }
.auth-switch .text-button { padding: 5px 6px; font-size: 13px; }
.auth-terms { margin: 30px 0 0; color: #85828f; font-size: 11px; text-align: center; }
.auth-terms a { color: var(--md-sys-color-primary); text-decoration: none; }
.auth-footer { margin: auto 0 0; padding-top: 38px; color: #888592; font-size: 11px; }

/* Kullanım koşulları */
.legal-page { min-height: 100vh; background: var(--md-sys-color-background); }
.legal-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(18px, 5vw, 64px); background: rgb(248 247 252 / 92%); border-bottom: 1px solid #e9e7ef; }
.legal-topbar .tonal-button { min-height: 37px; font-size: 11px; }
.legal-content { width: min(900px, 100%); margin: 0 auto; padding: 50px 24px 64px; }
.legal-heading { padding: 0 4px 22px; }
.legal-heading .eyebrow { margin-bottom: 10px; }
.legal-heading h1 { margin: 0; color: #24222e; font-size: clamp(28px, 5vw, 42px); font-weight: 600; line-height: 1.13; letter-spacing: -1.4px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; color: #85828f; font-size: 10px; }
.legal-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; background: #eeedf4; border-radius: var(--shape-full); }
.legal-meta .material-symbols-rounded { font-size: 15px; }
.legal-callout { display: flex; align-items: flex-start; gap: 11px; padding: 15px 17px; margin: 0 0 16px; color: #5349bd; background: #eae7ff; border-radius: 17px; }
.legal-callout > .material-symbols-rounded { flex: 0 0 20px; margin-top: 1px; }
.legal-callout p { margin: 0; color: #5e5a72; font-size: 11px; line-height: 1.65; }
.legal-article { padding: clamp(20px, 4vw, 38px); background: #fff; border: 1px solid #e9e7ef; border-radius: 25px; box-shadow: 0 2px 7px rgb(30 28 42 / 3%); }
.legal-article section + section { padding-top: 21px; margin-top: 21px; border-top: 1px solid #f0eef4; }
.legal-article h2 { margin: 0 0 9px; color: #302e39; font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.legal-article p, .legal-article li { color: #686572; font-size: 11px; line-height: 1.8; }
.legal-article p { margin: 0 0 9px; }
.legal-article p:last-child { margin-bottom: 0; }
.legal-article ul, .legal-article ol { display: grid; gap: 6px; padding-left: 21px; margin: 8px 0 10px; }
.legal-article strong { color: #44414e; font-weight: 650; }
.legal-article a { color: var(--md-sys-color-primary); text-decoration: none; }
.legal-article a:hover { text-decoration: underline; }
.legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 5px 0; color: #85828f; font-size: 10px; }
.legal-footer a { color: var(--md-sys-color-primary); text-decoration: none; }

/* App shell and Material 3 navigation drawer */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 14px; overflow-y: auto; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-low); border-right: 1px solid #e9e7ef; }
.sidebar-brand { margin: 0 8px 28px; }
.workspace-switcher { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 8px 9px; margin-bottom: 30px; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-lowest); border: 1px solid #e7e4ed; border-radius: 16px; text-align: left; cursor: pointer; box-shadow: 0 1px 1px rgb(30 28 42 / 3%); }
.workspace-switcher:hover { background: #fff; border-color: #d8d4e3; }
.workspace-avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: #fff; background: linear-gradient(135deg, #796de7, #4f43c7); border-radius: 11px; font-size: 14px; font-weight: 700; }
.workspace-label, .account-label { min-width: 0; flex: 1; }
.workspace-label b, .workspace-label small, .account-label b, .account-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-label b { font-size: 12px; font-weight: 600; }.workspace-label small { margin-top: 1px; color: #85828f; font-size: 10px; }
.workspace-switcher > .material-symbols-rounded { color: #777482; font-size: 20px; }
.nav-label { padding: 0 12px; color: #8b8895; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.nav-label-lower { margin-top: 28px; }
.primary-nav { display: grid; gap: 4px; margin-top: 9px; }
.nav-item { position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 13px; color: #5f5c69; background: transparent; border: 0; border-radius: var(--shape-full); cursor: pointer; text-align: left; font-size: 13px; font-weight: 500; transition: background .16s var(--motion-standard), color .16s var(--motion-standard); }
.nav-item > .material-symbols-rounded { width: 20px; color: #706d7a; font-size: 20px; }
.nav-item:hover { color: var(--md-sys-color-on-surface); background: rgb(82 77 105 / 7%); }
.nav-item.active { color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); font-weight: 650; }
.nav-item.active > .material-symbols-rounded { color: var(--md-sys-color-primary); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.nav-count { min-width: 23px; height: 21px; display: grid; place-items: center; margin-left: auto; padding: 0 6px; color: #686573; background: #e7e5ec; border-radius: var(--shape-full); font-size: 10px; font-weight: 650; }
.nav-item.active .nav-count { color: var(--md-sys-color-on-primary-container); background: rgb(81 70 216 / 10%); }
.sidebar-spacer { flex: 1; min-height: 28px; }
.sidebar-help { display: flex; align-items: center; gap: 10px; padding: 12px 10px; color: #575461; text-decoration: none; background: #eae8f1; border-radius: 15px; }
.sidebar-help .help-icon { width: 33px; height: 33px; display: grid; flex: 0 0 33px; place-items: center; color: var(--md-sys-color-primary); background: #fff; border-radius: 11px; font-size: 19px; }
.sidebar-help b, .sidebar-help small { display: block; }.sidebar-help b { font-size: 10px; font-weight: 650; }.sidebar-help small { margin-top: 2px; color: #817e8a; font-size: 9px; }.sidebar-help .help-arrow { margin-left: auto; color: #87838f; font-size: 16px; }
.sidebar-legal-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 10px 2px; color: #777481; text-decoration: none; font-size: 10px; }.sidebar-legal-link:hover { color: var(--md-sys-color-primary); }.sidebar-legal-link .material-symbols-rounded { font-size: 16px; }
.account-menu { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 3px 2px; margin-top: 13px; border-top: 1px solid #e2e0e8; }
.account-avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: #4a3979; background: #e7dcff; border-radius: 50%; font-size: 12px; font-weight: 700; }
.account-label b { color: #34323d; font-size: 11px; font-weight: 600; }.account-label small { margin-top: 2px; color: #888591; font-size: 9px; }
.account-menu-button { width: 34px; height: 34px; flex-basis: 34px; }
.account-popover { position: absolute; right: 0; bottom: 51px; z-index: 40; width: 190px; padding: 6px; background: #fff; border: 1px solid #e8e5ee; border-radius: 15px; box-shadow: var(--elevation-2); }
.account-popover button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #494651; background: transparent; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font-size: 12px; }
.account-popover button:hover { background: var(--md-sys-color-surface-container-low); }.account-popover .material-symbols-rounded { font-size: 18px; }
.main-column { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 clamp(22px, 4vw, 54px); background: rgb(248 247 252 / 90%); border-bottom: 1px solid #ebe9f0; backdrop-filter: blur(18px); }
.breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 8px; color: #85828f; font-size: 12px; }.breadcrumbs .material-symbols-rounded { font-size: 17px; }.breadcrumbs b { overflow: hidden; color: #393742; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mobile-menu { display: none; }
.page-content { width: min(1440px, 100%); min-height: calc(100vh - 66px); margin: 0 auto; padding: 35px clamp(22px, 4vw, 54px) 54px; outline: 0; }

/* Shared page headings and content surfaces */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading-copy { min-width: 0; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--md-sys-color-primary); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.page-title { margin: 0; color: var(--md-sys-color-on-surface); font-size: clamp(25px, 3vw, 31px); font-weight: 600; line-height: 1.2; letter-spacing: -.9px; }
.page-subtitle { max-width: 660px; margin: 8px 0 0; color: #716e7b; font-size: 13px; line-height: 1.6; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0 14px; }
.section-header h2, .section-title { margin: 0; color: #2f2d38; font-size: 15px; font-weight: 650; letter-spacing: -.25px; }
.section-header p { margin: 4px 0 0; color: #85828f; font-size: 11px; }
.surface-card { background: var(--md-sys-color-surface-container-lowest); border: 1px solid #eae8ef; border-radius: var(--shape-xl); box-shadow: 0 1px 2px rgb(30 28 42 / 3%); }

/* Overview */
.welcome-banner { position: relative; min-height: 216px; display: flex; align-items: center; overflow: hidden; padding: 30px clamp(24px, 4vw, 42px); color: white; background: radial-gradient(ellipse at 88% 20%, rgb(193 183 255 / 48%), transparent 35%), linear-gradient(112deg, #322a8a 0%, #5146d8 53%, #6c60e9 100%); border-radius: 28px; box-shadow: 0 14px 32px rgb(61 51 150 / 15%); }
.welcome-banner::before, .welcome-banner::after { position: absolute; content: ''; border: 1px solid rgb(255 255 255 / 13%); border-radius: 50%; pointer-events: none; }
.welcome-banner::before { width: 390px; height: 390px; right: 9%; top: -200px; }.welcome-banner::after { width: 290px; height: 290px; right: 15%; top: -142px; }
.welcome-copy { position: relative; z-index: 1; max-width: 560px; }
.welcome-copy .eyebrow { color: #d9d4ff; }.welcome-copy h1 { max-width: 570px; margin: 0; font-size: clamp(25px, 3.1vw, 37px); font-weight: 550; line-height: 1.16; letter-spacing: -1.1px; }.welcome-copy p { max-width: 465px; margin: 11px 0 20px; color: #e2dfff; font-size: 13px; line-height: 1.6; }
.welcome-copy .filled-button { min-height: 39px; color: #3d32ab; background: #fff; box-shadow: none; }.welcome-copy .filled-button:hover { background: #f2efff; }
.welcome-art { position: absolute; right: clamp(28px, 7vw, 108px); bottom: -37px; width: 205px; height: 205px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; background: rgb(255 255 255 / 7%); box-shadow: 0 0 0 17px rgb(255 255 255 / 4%), 0 0 0 36px rgb(255 255 255 / 3%); }
.welcome-art .material-symbols-rounded { color: #dedaff; font-size: 82px; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' -25, 'opsz' 48; filter: drop-shadow(0 9px 16px rgb(22 17 92 / 32%)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 17px; }
.stat-card { min-height: 125px; padding: 17px 18px; background: var(--md-sys-color-surface-container-lowest); border: 1px solid #eae8ef; border-radius: 21px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #777481; font-size: 11px; font-weight: 500; }
.stat-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); border-radius: 12px; }.stat-icon.mint { color: #216c45; background: #d9f3e0; }.stat-icon.peach { color: #855548; background: #fbe7db; }.stat-icon.blue { color: #315f91; background: #deebff; }.stat-icon .material-symbols-rounded { font-size: 19px; }
.stat-value { margin-top: 9px; color: #24222e; font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: -.9px; }
.stat-caption { margin-top: 8px; color: #92909b; font-size: 10px; }
.overview-lower { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr); gap: 16px; margin-top: 28px; }
.recent-panel { min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 650; }.panel-heading p { margin: 4px 0 0; color: #888592; font-size: 11px; }
.recent-list { overflow: hidden; background: #fff; border: 1px solid #eae8ef; border-radius: 21px; }
.recent-row { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0eef4; cursor: pointer; transition: background .16s; }.recent-row:last-child { border-bottom: 0; }.recent-row:hover { background: #faf9fd; }
.app-icon { width: 42px; height: 42px; display: grid; flex: 0 0 42px; place-items: center; color: #574bc9; background: #ebe8ff; border-radius: 15px; }.app-icon .material-symbols-rounded { font-size: 21px; }.app-icon.peach { color: #9a6048; background: #fceade; }.app-icon.mint { color: #35704e; background: #ddf3e3; }.app-icon.blue { color: #3a6799; background: #e1ecff; }.app-icon.neutral { color: #66636f; background: #eeedf2; }
.recent-info { min-width: 0; flex: 1; }.recent-info b, .recent-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recent-info b { color: #373540; font-size: 12px; font-weight: 600; }.recent-info small { margin-top: 4px; color: #888591; font-size: 10px; }
.recent-row > .material-symbols-rounded { color: #a3a0ab; font-size: 19px; }
.quick-panel { padding: 18px; background: #eeecfb; border-radius: 22px; }.quick-panel > .material-symbols-rounded { width: 39px; height: 39px; display: grid; place-items: center; color: var(--md-sys-color-primary); background: #fff; border-radius: 14px; font-size: 21px; }.quick-panel h3 { margin: 15px 0 6px; font-size: 15px; font-weight: 650; }.quick-panel p { margin: 0; color: #777381; font-size: 11px; line-height: 1.6; }.quick-steps { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }.quick-steps li { display: flex; align-items: center; gap: 9px; color: #565361; font-size: 10px; }.quick-steps span { width: 22px; height: 22px; display: grid; flex: 0 0 22px; place-items: center; color: #5146d8; background: #fff; border-radius: 50%; font-size: 10px; font-weight: 700; }

/* Applications list and filter chips */
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0 16px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-chip { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; color: #66636f; background: transparent; border: 1px solid #d8d6df; border-radius: var(--shape-full); cursor: pointer; font-size: 11px; font-weight: 550; transition: background .15s, border .15s, color .15s; }
.filter-chip:hover { background: #f0eef7; }.filter-chip.active { color: #251f6c; background: #e7e3ff; border-color: transparent; }.filter-chip b { font-size: 10px; font-weight: 600; }
.search-box { min-width: 210px; height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #777481; background: #fff; border: 1px solid #dedce5; border-radius: var(--shape-full); }.search-box:focus-within { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px rgb(81 70 216 / 7%); }.search-box .material-symbols-rounded { font-size: 19px; }.search-box input { width: 100%; min-width: 0; color: #35333e; background: transparent; border: 0; outline: 0; font-size: 11px; }.search-box input::placeholder { color: #9996a1; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.app-card { min-width: 0; display: flex; flex-direction: column; padding: 18px; background: #fff; border: 1px solid #e8e6ee; border-radius: 22px; transition: transform .18s var(--motion-standard), box-shadow .18s var(--motion-standard), border-color .18s; }.app-card:hover { transform: translateY(-2px); border-color: #d8d4e5; box-shadow: 0 9px 24px rgb(36 31 66 / 7%); }
.app-card-top { display: flex; align-items: flex-start; gap: 12px; }.app-card-top .app-icon { width: 45px; height: 45px; flex-basis: 45px; }.app-card-heading { min-width: 0; flex: 1; padding-top: 3px; }.app-card-heading h3 { overflow: hidden; margin: 0; color: #34323d; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.app-card-heading p { overflow: hidden; margin: 4px 0 0; color: #8d8a96; font-family: var(--font-mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { min-height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: #73707d; background: #eeedf2; border-radius: var(--shape-full); font-size: 9px; font-weight: 650; white-space: nowrap; }.status-chip::before { width: 5px; height: 5px; content: ''; border-radius: 50%; background: #9794a0; }.status-chip.live { color: #286141; background: #e0f4e6; }.status-chip.live::before { background: #3b9a61; }.status-chip.draft { color: #76590e; background: #fff0c9; }.status-chip.draft::before { background: #c58b19; }
.app-card-description { min-height: 36px; margin: 17px 0 15px; color: #777481; font-size: 11px; line-height: 1.55; }
.app-card-meta { display: flex; align-items: center; gap: 14px; padding: 11px 0; color: #898692; border-top: 1px solid #f0eef4; border-bottom: 1px solid #f0eef4; font-size: 9px; }.app-card-meta span { display: inline-flex; align-items: center; gap: 5px; }.app-card-meta .material-symbols-rounded { font-size: 15px; }
.app-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; }.app-card-footer small { color: #8d8a96; font-size: 9px; }.app-card-actions { display: flex; gap: 2px; }.app-card-actions .icon-button { width: 33px; height: 33px; flex-basis: 33px; }.app-card-actions .material-symbols-rounded { font-size: 18px; }
.empty-state { display: grid; min-height: 265px; place-items: center; padding: 30px; background: #fff; border: 1px dashed #d5d2df; border-radius: 24px; text-align: center; }.empty-state-icon { width: 55px; height: 55px; display: grid; place-items: center; color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); border-radius: 19px; }.empty-state-icon .material-symbols-rounded { font-size: 27px; }.empty-state h3 { margin: 14px 0 5px; font-size: 15px; }.empty-state p { max-width: 360px; margin: 0 0 15px; color: #85828f; font-size: 11px; line-height: 1.6; }

/* Template gallery / create project */
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.template-card { position: relative; min-height: 181px; padding: 18px; color: #45424e; background: #fff; border: 1px solid #e6e4ed; border-radius: 22px; cursor: pointer; text-align: left; transition: border-color .16s, box-shadow .16s, transform .16s; }.template-card:hover { transform: translateY(-2px); border-color: #bbb4ef; box-shadow: 0 7px 20px rgb(49 40 111 / 8%); }.template-card.selected { border: 2px solid var(--md-sys-color-primary); padding: 17px; box-shadow: 0 0 0 3px rgb(81 70 216 / 8%); }.template-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 14px; color: #5146d8; background: #ece9ff; border-radius: 15px; }.template-icon .material-symbols-rounded { font-size: 22px; }.template-icon.peach { color: #965f48; background: #fce9df; }.template-icon.mint { color: #34734e; background: #dcf4e3; }.template-icon.blue { color: #3a6492; background: #dfebff; }.template-icon.neutral { color: #64616d; background: #eeedf2; }.template-card h3 { margin: 0 0 6px; color: #35333e; font-size: 12px; font-weight: 650; }.template-card p { margin: 0; color: #85828f; font-size: 10px; line-height: 1.55; }.template-category { display: inline-block; margin-top: 13px; color: #777381; font-size: 9px; }.template-check { position: absolute; top: 13px; right: 13px; color: var(--md-sys-color-primary); opacity: 0; }.template-card.selected .template-check { opacity: 1; }
.create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 18px; }.create-main { min-width: 0; }.create-side { position: sticky; top: 86px; padding: 19px; }.create-side h3 { margin: 0 0 9px; font-size: 14px; }.create-side p { color: #7f7c89; font-size: 11px; line-height: 1.6; }.create-side .template-icon { margin: 0 0 12px; }.create-side ul { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }.create-side li { display: flex; align-items: center; gap: 8px; color: #64616d; font-size: 10px; }.create-side li .material-symbols-rounded { color: #3f8858; font-size: 17px; }
.form-card { padding: 21px; margin-bottom: 16px; }.form-card h2 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }.form-card > p { margin: 0 0 17px; color: #85828f; font-size: 10px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-field { display: grid; gap: 7px; }.form-field.full { grid-column: 1 / -1; }.form-field label { color: #55525f; font-size: 10px; font-weight: 650; }.form-field input, .form-field textarea { width: 100%; min-height: 43px; padding: 0 13px; color: #393742; background: #fff; border: 1px solid #dcd9e4; border-radius: 13px; outline: none; font-size: 11px; }.form-field textarea { min-height: 110px; padding: 12px; font-family: var(--font-mono); font-size: 10px; resize: vertical; }.form-field input:focus, .form-field textarea:focus { border: 2px solid var(--md-sys-color-primary); padding-left: 12px; box-shadow: 0 0 0 3px rgb(81 70 216 / 6%); }.form-field textarea:focus { padding: 11px; }.form-help { color: #8e8b97; font-size: 9px; }

/* Application details */
.back-button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px 7px 3px; margin-bottom: 15px; color: #716e7b; background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 550; }.back-button:hover { color: var(--md-sys-color-primary); }.back-button .material-symbols-rounded { font-size: 18px; }
.app-detail-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }.app-detail-heading .app-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 17px; }.app-detail-title { min-width: 0; }.app-detail-title h1 { overflow: hidden; margin: 0; color: #292732; font-size: 24px; font-weight: 600; letter-spacing: -.7px; text-overflow: ellipsis; white-space: nowrap; }.app-detail-title p { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; color: #8a8793; font-family: var(--font-mono); font-size: 10px; }.detail-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 23px; }.detail-actions { display: flex; align-items: center; gap: 8px; }.detail-actions .filled-button, .detail-actions .tonal-button, .detail-actions .outlined-button { min-height: 38px; padding: 0 16px; font-size: 11px; }.detail-actions .material-symbols-rounded { font-size: 18px; }
.detail-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 0 3px; margin: 0 0 18px; border-bottom: 1px solid #e4e2e9; }.detail-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; color: #74717e; background: transparent; border: 0; border-radius: 9px 9px 0 0; cursor: pointer; white-space: nowrap; font-size: 11px; font-weight: 550; }.detail-tab:hover { color: #393642; background: #f1eff7; }.detail-tab.active { color: var(--md-sys-color-primary); font-weight: 650; }.detail-tab.active::after { position: absolute; right: 9px; bottom: -1px; left: 9px; height: 3px; content: ''; background: var(--md-sys-color-primary); border-radius: 3px 3px 0 0; }.detail-tab .material-symbols-rounded { font-size: 17px; }
.detail-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 15px; }.detail-primary { display: grid; gap: 15px; }.detail-card { padding: 19px; }.detail-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }.detail-card-header h2 { margin: 0; font-size: 13px; font-weight: 650; }.detail-card-header p { margin: 4px 0 0; color: #898692; font-size: 10px; }.deploy-status { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #f4f2fb; border-radius: 16px; }.deploy-status-icon { width: 35px; height: 35px; display: grid; flex: 0 0 35px; place-items: center; color: #5146d8; background: #e3dfff; border-radius: 12px; }.deploy-status-icon .material-symbols-rounded { font-size: 19px; }.deploy-status h3 { margin: 1px 0 4px; font-size: 11px; font-weight: 650; }.deploy-status p { margin: 0; color: #85828f; font-size: 10px; line-height: 1.5; }.deploy-status .status-chip { margin-left: auto; }
.url-row { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: #f8f7fb; border: 1px solid #eae8ef; border-radius: 13px; }.url-row .material-symbols-rounded { color: #777481; font-size: 17px; }.url-row a { min-width: 0; flex: 1; overflow: hidden; color: #5146c8; font-family: var(--font-mono); font-size: 10px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.url-row a:hover { text-decoration: underline; }.url-row button { width: 31px; height: 31px; flex-basis: 31px; }.url-row button .material-symbols-rounded { font-size: 17px; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.detail-stat { padding: 12px; background: #f7f6fa; border-radius: 14px; }.detail-stat span { display: block; color: #85828f; font-size: 9px; }.detail-stat b { display: block; margin-top: 5px; color: #34323d; font-size: 18px; font-weight: 600; }
.side-info-list { display: grid; gap: 0; }.side-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #efedf3; font-size: 10px; }.side-info-row:last-child { border-bottom: 0; }.side-info-row span { color: #888591; }.side-info-row b { overflow: hidden; color: #4a4753; font-weight: 550; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.side-info-row code { color: #5146c8; font-family: var(--font-mono); font-size: 9px; }
.empty-panel { display: grid; min-height: 220px; place-items: center; padding: 28px; color: #807d89; background: #fff; border: 1px dashed #d9d6e1; border-radius: 20px; text-align: center; }.empty-panel h3 { margin: 10px 0 5px; color: #373540; font-size: 13px; }.empty-panel p { max-width: 400px; margin: 0; font-size: 10px; line-height: 1.6; }.empty-panel .material-symbols-rounded { color: #7166dc; font-size: 31px; }
.file-list { overflow: hidden; background: #fff; border: 1px solid #e9e7ee; border-radius: 19px; }.file-row { min-height: 57px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #f0eef4; }.file-row:last-child { border-bottom: 0; }.file-row:hover { background: #fbfaff; }.file-type-icon { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; color: #6a5dd3; background: #eeecff; border-radius: 10px; }.file-type-icon .material-symbols-rounded { font-size: 17px; }.file-row-name { min-width: 0; flex: 1; }.file-row-name b, .file-row-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-row-name b { color: #46434f; font-family: var(--font-mono); font-size: 10px; font-weight: 500; }.file-row-name small { margin-top: 3px; color: #96939e; font-size: 9px; }.file-row > small { color: #8e8b97; font-size: 9px; }.file-row-actions { display: flex; gap: 2px; }.file-row-actions .icon-button { width: 32px; height: 32px; flex-basis: 32px; }.file-row-actions .material-symbols-rounded { font-size: 17px; }
.deployment-list { overflow: hidden; background: #fff; border: 1px solid #e9e7ee; border-radius: 19px; }.deployment-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0eef4; }.deployment-row:last-child { border-bottom: 0; }.deployment-check { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; color: #267347; background: #e0f4e6; border-radius: 50%; }.deployment-check .material-symbols-rounded { font-size: 18px; }.deployment-info { min-width: 0; flex: 1; }.deployment-info b, .deployment-info small { display: block; }.deployment-info b { color: #3c3945; font-size: 11px; }.deployment-info small { margin-top: 3px; color: #8b8894; font-size: 9px; }.deployment-row > small { color: #85828f; font-size: 9px; }
.danger-card { border-color: #f0d9d7; }.danger-card h2 { color: #9b332c; }.danger-card p { color: #89818a; font-size: 10px; line-height: 1.55; }.danger-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; color: #a1312a; background: #fff3f1; border: 1px solid #f1d4d1; border-radius: var(--shape-full); cursor: pointer; font-size: 10px; font-weight: 600; }.danger-button:hover { background: #ffe5e1; }

/* Guide, account page, dialogs, and snackbar */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.guide-card { padding: 19px; }.guide-step { width: 32px; height: 32px; display: grid; place-items: center; color: var(--md-sys-color-primary); background: #e9e5ff; border-radius: 11px; font-size: 11px; font-weight: 700; }.guide-card h3 { margin: 15px 0 6px; font-size: 13px; }.guide-card p { margin: 0; color: #85828f; font-size: 10px; line-height: 1.6; }.guide-callout { display: flex; align-items: flex-start; gap: 12px; padding: 17px; margin-top: 17px; color: #5146c8; background: #eeecff; border-radius: 17px; }.guide-callout p { margin: 0; color: #656175; font-size: 10px; line-height: 1.6; }.guide-callout b { color: #363078; }
.account-card { max-width: 700px; padding: 22px; }.account-profile { display: flex; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid #efedf3; }.account-profile .account-avatar { width: 54px; height: 54px; flex-basis: 54px; font-size: 18px; }.account-profile h2 { margin: 0; font-size: 15px; }.account-profile p { margin: 4px 0 0; color: #85828f; font-size: 11px; }.account-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid #f0eef4; font-size: 11px; }.account-detail-row:last-child { border: 0; }.account-detail-row span { color: #888591; }.account-detail-row b { color: #494651; font-weight: 550; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgb(27 25 38 / 42%); backdrop-filter: blur(4px); animation: fade-in .18s ease-out; }.modal-card { width: min(740px, 100%); max-height: min(90vh, 920px); display: flex; flex-direction: column; overflow: hidden; background: #fbfaff; border: 1px solid rgb(255 255 255 / 65%); border-radius: 28px; box-shadow: 0 24px 70px rgb(20 18 38 / 24%); animation: modal-in .22s var(--motion-emphasized); }.modal-card.small { width: min(460px, 100%); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 16px; }.modal-header h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.4px; }.modal-header p { margin: 5px 0 0; color: #85828f; font-size: 10px; line-height: 1.5; }.modal-body { overflow-y: auto; padding: 0 24px 22px; }.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 24px 21px; border-top: 1px solid #eceaf1; }.modal-footer .filled-button, .modal-footer .tonal-button, .modal-footer .outlined-button { min-height: 38px; font-size: 11px; }.modal-close { width: 34px; height: 34px; flex-basis: 34px; margin: -4px -6px 0 0; }.modal-message { padding: 14px; color: #65616f; background: #f0eef7; border-radius: 14px; font-size: 11px; line-height: 1.6; }.modal-message.error { color: #8c302a; background: #ffebe8; }.modal-message.success { color: #276744; background: #e1f4e6; }
.editor-wrap { display: grid; gap: 6px; }.editor-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; color: #85828f; font-size: 9px; }.editor-wrap textarea { min-height: min(50vh, 460px); padding: 14px; color: #e8e5fa; background: #242235; border: 1px solid #39364c; border-radius: 15px; outline: none; font: 11px/1.65 var(--font-mono); tab-size: 2; resize: vertical; }.editor-wrap textarea:focus { border-color: #958bff; box-shadow: 0 0 0 3px rgb(81 70 216 / 14%); }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: grid; gap: 9px; pointer-events: none; }.toast { min-width: 250px; max-width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 11px; padding: 13px 17px; color: #f8f6ff; background: #31303a; border-radius: 16px; box-shadow: 0 8px 24px rgb(16 15 26 / 22%); font-size: 11px; animation: toast-in .2s var(--motion-standard); pointer-events: auto; }.toast .material-symbols-rounded { color: #d1caff; font-size: 19px; }.toast.error .material-symbols-rounded { color: #ffb4ab; }.toast.success .material-symbols-rounded { color: #9ce0ad; }
.sidebar-scrim { display: none; }
.loading-state { display: grid; min-height: 280px; place-items: center; color: #85828f; font-size: 11px; }.loading-spinner { width: 24px; height: 24px; margin: 0 auto 10px; border: 2px solid #dedbe9; border-top-color: var(--md-sys-color-primary); border-radius: 50%; animation: spin .7s linear infinite; }
.inline-spinner { width: 17px; height: 17px; margin: 0; border-width: 2px; }
.settings-section, .settings-danger { max-width: 760px; }
.settings-field-secondary { margin-top: 14px; }
.settings-form-actions { display: flex; justify-content: flex-end; margin-top: 17px; }
.settings-danger { margin-top: 15px; }
.modal-field-spaced { margin-top: 15px; }
.modal-delete-hint { display: block; margin-top: 12px; }
.modal-field-compact { margin-top: 10px; }
.code-inline { padding: 2px 5px; color: #5146c8; background: #eeecff; border-radius: 5px; font-family: var(--font-mono); font-size: 10px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 244px minmax(0, 1fr); }.sidebar { padding-right: 13px; padding-left: 13px; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-art { right: 6%; opacity: .75; }.overview-lower { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); }
}
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: minmax(310px, .8fr) minmax(450px, 1.2fr); }.auth-showcase { padding-right: 30px; padding-left: 30px; }.showcase-window { transform: none; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }.sidebar { position: fixed; left: 0; width: 274px; transform: translateX(-102%); transition: transform .24s var(--motion-emphasized); box-shadow: 8px 0 28px rgb(26 23 44 / 8%); }.sidebar.open { transform: translateX(0); }.sidebar-scrim { position: fixed; inset: 0; z-index: 25; display: block; background: rgb(29 27 41 / 35%); opacity: 0; pointer-events: none; transition: opacity .2s; }.sidebar-scrim.open { opacity: 1; pointer-events: auto; }.mobile-menu { display: inline-grid; }.page-content { padding-top: 28px; }.overview-lower { grid-template-columns: minmax(0, 1fr); }.quick-panel { display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; }.quick-panel > .material-symbols-rounded { grid-row: span 2; }.quick-panel h3 { margin: 1px 0 4px; }.quick-panel p { grid-column: 2; }.quick-steps { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .auth-screen { display: flex; flex-direction: column; }.auth-showcase { display: none; }.auth-main { flex: 1; justify-content: flex-start; padding: 30px 24px 20px; }.auth-mobile-brand { width: min(420px, 100%); display: flex; align-items: center; gap: 10px; margin-bottom: 54px; color: #282633; font-size: 16px; letter-spacing: -.4px; }.auth-mobile-brand strong { color: var(--md-sys-color-primary); }.auth-card { margin: 0 auto; }.auth-footer { padding-top: 50px; }
  .topbar { min-height: 59px; padding: 0 16px; }.page-content { padding: 24px 16px 42px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }.heading-actions { width: 100%; }.heading-actions .filled-button { flex: 1; }.welcome-banner { min-height: 220px; padding: 25px 23px; border-radius: 23px; }.welcome-copy { max-width: 440px; }.welcome-copy h1 { max-width: 380px; font-size: 29px; }.welcome-copy p { max-width: 360px; font-size: 11px; }.welcome-art { right: -72px; bottom: -84px; opacity: .4; }.stats-grid { gap: 10px; }.stat-card { min-height: 112px; padding: 13px; border-radius: 18px; }.stat-top { align-items: flex-start; font-size: 9px; }.stat-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; }.stat-value { font-size: 23px; }.stat-caption { font-size: 9px; }
  .app-grid, .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.app-card { padding: 13px; border-radius: 18px; }.app-card-top { gap: 8px; }.app-card-top .app-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 12px; }.app-card-heading h3 { font-size: 11px; }.app-card-heading p { font-size: 8px; }.app-card-description { min-height: 48px; margin: 12px 0; font-size: 9px; }.app-card-meta { gap: 8px; flex-wrap: wrap; font-size: 8px; }.app-card-meta span { gap: 3px; }.app-card-meta .material-symbols-rounded { font-size: 13px; }.app-card-footer { padding-top: 10px; }.app-card-footer small { font-size: 8px; }.app-card-actions .icon-button { width: 29px; height: 29px; flex-basis: 29px; }
  .template-card { min-height: 170px; padding: 14px; border-radius: 18px; }.template-card.selected { padding: 13px; }.template-icon { width: 37px; height: 37px; margin-bottom: 11px; border-radius: 12px; }.template-card p { font-size: 9px; }.template-category { margin-top: 8px; }
  .toolbar-row { align-items: flex-start; flex-direction: column; }.search-box { width: 100%; }.filter-row { gap: 6px; }.filter-chip { min-height: 31px; padding: 0 10px; font-size: 10px; }
  .create-layout { grid-template-columns: minmax(0, 1fr); }.create-side { position: static; order: -1; }.create-side ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }.create-side li { align-items: flex-start; font-size: 9px; }.form-grid { grid-template-columns: 1fr; }.form-field.full { grid-column: auto; }
  .detail-head-row { align-items: flex-start; flex-direction: column; }.detail-actions { width: 100%; }.detail-actions > * { flex: 1; }.detail-overview-grid { grid-template-columns: minmax(0, 1fr); }.detail-stats { gap: 6px; }.detail-stat { padding: 10px; }.detail-stat b { font-size: 16px; }.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-backdrop { align-items: end; padding: 0; }.modal-card, .modal-card.small { width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; }.modal-header { padding: 19px 19px 14px; }.modal-body { padding: 0 19px 18px; }.modal-footer { padding: 12px 19px 20px; }.toast-region { right: 12px; bottom: 12px; left: 12px; }.toast { min-width: 0; max-width: 100%; }
}
@media (max-width: 430px) {
  .app-grid, .template-grid { grid-template-columns: minmax(0, 1fr); }.app-card { padding: 16px; }.app-card-description { min-height: 0; }.template-card { min-height: auto; }.template-card p { max-width: 280px; }.template-icon { margin-bottom: 8px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.welcome-copy h1 { max-width: 285px; font-size: 26px; }.welcome-copy p { max-width: 270px; }.welcome-art { right: -105px; }.recent-row { padding: 11px; }.quick-steps { grid-template-columns: 1fr; }.quick-panel { grid-template-columns: 40px minmax(0, 1fr); }.guide-grid { grid-template-columns: minmax(0, 1fr); }.detail-actions { flex-wrap: wrap; }.detail-actions > * { flex: auto; }.detail-actions .filled-button { flex: 1 1 100%; }
  .breadcrumbs > span:first-child { display: none; }.breadcrumbs .material-symbols-rounded { display: none; }.breadcrumbs b { font-size: 11px; }.page-title { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}