@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
:root{
  --fg:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#fff;
  --accent:#333;
  --nav-h:56px;
  --btn-bg:#f9fafb;
  --btn-bg-hover:#f3f4f6;
  --chip-bg:#fff;
  --chip-bg-hover:#f3f4f6;
  --surface:#f6f7f9;
  --brand:#111;
  --danger:#b91c1c;
  --danger-hover:#991b1b;
  --danger-bg:#fee2e2;
  --danger-border:#fecaca;
  --danger-muted:#991b1b;
  --success:#16a34a;
  --link-accent:#2563eb;
  --primary-on:#fff;
  --focus-border:#9ca3af;
  --focus-ring:rgba(17,17,17,0.1);
  --date-accent:#4f46e5;
  --date-accent-subtle:rgba(129,140,248,0.15);
  --funnel-bar-start:#222;
  --funnel-bar-end:#666;
  --avatar-bg:#000;
  --avatar-fg:#fff;
  --status-offline:#ef4444;
  --status-online:#22c55e;
  --overlay:rgba(0,0,0,0.5);
  --shadow:rgba(0,0,0,0.12);
  --shadow-strong:rgba(0,0,0,0.35);
  --code-copy-bg:rgba(15,23,42,0.04);
  --project-page-bg:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 100% 0%, rgba(17,17,17,0.08) 0%, rgba(17,17,17,0) 28%),
    linear-gradient(180deg, #fbfbfc 0%, #f3f4f6 100%);
  --project-glass-bg:rgba(255,255,255,0.72);
  --project-glass-bg-strong:rgba(255,255,255,0.84);
  --project-glass-border:rgba(17,17,17,0.08);
  --project-glass-shadow:rgba(17,17,17,0.10);
  --project-glass-shadow-strong:rgba(17,17,17,0.16);
  --project-glow:rgba(255,255,255,0.55);
  --scrollbar-track:transparent;
  --scrollbar-thumb:#d1d5db;
  --scrollbar-thumb-hover:#9ca3af;
  --plan-free-bg:#e5e7eb;
  --plan-free-fg:#374151;
  --plan-startup-bg:#fef3c7;
  --plan-startup-fg:#92400e;
  --plan-business-bg:#dbeafe;
  --plan-business-fg:#1e40af;
}
:root[data-theme="dark"]{
  --bg:#000000;
  --fg:#ebebeb;
  --muted:#999999;
  --border:#252525;
  --accent:#cccccc;
  --btn-bg:#1a1a1a;
  --btn-bg-hover:#252525;
  --chip-bg:#111111;
  --chip-bg-hover:#1a1a1a;
  --surface:#0a0a0a;
  --brand:#ebebeb;
  --danger:#999999;
  --danger-hover:#cccccc;
  --danger-bg:rgba(255,255,255,0.06);
  --danger-border:#333333;
  --danger-muted:#999999;
  --success:#999999;
  --link-accent:#cccccc;
  --primary-on:#000000;
  --focus-border:#737373;
  --focus-ring:rgba(255,255,255,0.12);
  --date-accent:#737373;
  --date-accent-subtle:rgba(115,115,115,0.25);
  --funnel-bar-start:#333333;
  --funnel-bar-end:#555555;
  --avatar-bg:#111111;
  --avatar-fg:#ebebeb;
  --status-offline:#666666;
  --status-online:#e0e0e0;
  --overlay:rgba(0,0,0,0.5);
  --shadow:rgba(0,0,0,0.4);
  --shadow-strong:rgba(0,0,0,0.5);
  --code-copy-bg:rgba(0,0,0,0.3);
  --project-page-bg:linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
  --project-glass-bg:rgba(255,255,255,0.035);
  --project-glass-bg-strong:rgba(255,255,255,0.05);
  --project-glass-border:rgba(255,255,255,0.09);
  --project-glass-shadow:rgba(0,0,0,0.22);
  --project-glass-shadow-strong:rgba(0,0,0,0.34);
  --project-glow:transparent;
  --scrollbar-track:transparent;
  --scrollbar-thumb:#4a4a4a;
  --scrollbar-thumb-hover:#6a6a6a;
  --plan-free-bg:#252525;
  --plan-free-fg:#ebebeb;
  --plan-startup-bg:#333333;
  --plan-startup-fg:#d4d4d4;
  --plan-business-bg:#1a1a1a;
  --plan-business-fg:#cccccc;
}
html{
  min-height: 100%;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5;padding-top:calc(var(--nav-h) + 24px)}
body *{font-family:'Montserrat'}
.container{max-width:1200px;margin:0 auto;padding:16px}
h1,h2{margin:0}
p{font-size:14px}
.form{display:flex;flex-direction:column;gap:12px;max-width:420px}
.form input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg);color:var(--fg)}
button{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--btn-bg);cursor:pointer;color:var(--fg)}
button:hover{background:var(--btn-bg-hover)}
.error{color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);padding:10px;border-radius:8px;margin:10px 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:inherit}
.list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.list-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top;     font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    text-align: left;}
.code{background:var(--surface);color:var(--fg);border-radius:8px;overflow:auto;font-size:13px;padding:20px;border:1px solid var(--border);}
.code.inline{display:inline-block;padding:6px}
.code-block{position:relative;margin-top:8px;}
.code-block .code{padding:20px;}
.code-copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10;
  padding:6px 8px;
  font-size:12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:var(--code-copy-bg);
  border:1px solid var(--border);
  border-radius:6px;
}
.code-copy-btn svg{
  width:14px;
  height:14px;
}
.code-copy-btn.copied{
  color:var(--success);
  border-color:var(--success);
}
.code-copy-btn.copied::after{
  content:'Скопировано';
  margin-left:6px;
  font-size:11px;
}
.hljs{
  background:transparent !important;
  color:var(--fg);
}
.hljs-tag,
.hljs-name,
.hljs-title{
  color:var(--danger);
}
.hljs-attr{
  color:var(--link-accent);
}
.hljs-string{
  color:var(--success);
}
pre{margin:0}
code{font-family:ui-monospace,Menlo,Consolas,monospace}

/* Utilities */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-12{margin-bottom:12px}
.ml-auto{margin-left:auto}
.border{border:1px solid var(--border)}
.border-dashed{border:1px dashed var(--border)}
.rounded-8{border-radius:8px}
.rounded-10{border-radius:10px}
.p-10{padding:10px}
.p-12{padding:12px}
.p-20{padding:20px}
.px-10{padding-left:10px;padding-right:10px}
.py-8{padding-top:8px;padding-bottom:8px}
.minw-180{min-width:180px}
.minw-200{min-width:200px}
.minw-220{min-width:220px}
.w-140{width:140px}
.w-160{width:160px}
.w-180{width:180px}
.w-200{width:200px}
.flex-1{flex:1}
.hide{display:none !important}
a{color:var(--fg);text-decoration:none;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--muted)}
.link{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--muted)}
.link:hover{color:var(--fg);text-decoration-color:var(--accent)}

/* Inputs and buttons */
.input{padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg);color:var(--fg)}
.select{padding:8px 30px 8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg);color:var(--fg);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.select:focus{outline:none;border-color:var(--focus-border)}
.select::-ms-expand{display:none}
.loader{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--fg);border-right-color:var(--border);border-bottom-color:var(--border);border-left-color:var(--border);border-radius:9999px;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.group.loading{position:relative}
.group.loading .loader{margin-left:6px}
.btn{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--btn-bg);cursor:pointer;color:var(--fg);font-size: 13px;font-weight: 500;}
.btn:hover{background:var(--btn-bg-hover)}
.btn-primary{background:var(--brand);color:var(--primary-on);border-color:var(--brand)}
.btn-primary:hover{background:var(--fg);color:var(--primary-on);border-color:var(--fg)}
:root[data-theme="dark"] .btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
:root[data-theme="dark"] .btn-primary:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-danger{background:var(--danger);color:var(--primary-on);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}

.filters-container{border: 1px dashed var(--border);position:relative}

/* Filters loader */
.filters-loader{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  overflow:hidden;
  background:transparent;
}
.filters-loader-bar{
  height:100%;
  width:0%;
  background:var(--accent);
  animation:filters-loader-progress 1.5s ease-in-out infinite;
}
@keyframes filters-loader-progress{
  0%{width:0%;transform:translateX(0)}
  50%{width:70%;transform:translateX(0)}
  100%{width:100%;transform:translateX(100%)}
}

/* Filters empty state */
.filters-empty-state{padding:32px;text-align:center}
.filters-empty-state h3{margin:0 0 12px 0;font-size:16px;font-weight:600}
.filters-empty-state p{margin:0 0 20px 0;margin-left:auto;margin-right:auto;line-height:1.6}
.filters-empty-state .btn{padding:8px 16px}

/* Filters documentation modal */
.filters-docs-modal .modal-dialog{max-width:700px}
.filters-docs-content{padding:24px;max-height:70vh;overflow-y:auto}
.filters-docs-section{display:flex;flex-direction:column;gap:24px}
.filters-docs-section h3{margin:0 0 12px 0;font-size:18px;font-weight:600}
.filters-docs-section p{margin:0;line-height:1.6}
.filters-docs-types{display:flex;flex-direction:column;gap:16px}
.filters-docs-card{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg)}
.filters-docs-card-title{font-weight:600;font-size:14px;margin-bottom:8px}
.filters-docs-card p{margin:0 0 8px 0}
.filters-docs-examples{background:var(--bg);padding:12px;border-radius:6px;border:1px solid var(--border)}
.filters-docs-examples > div:first-child{margin-bottom:4px}
.filters-docs-examples code{color:var(--accent)}
.filters-docs-options{display:flex;flex-direction:column;gap:12px}
.filters-docs-option{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg)}
.filters-docs-option-title{font-weight:600;font-size:14px;margin-bottom:4px}
.filters-docs-option p{margin:0}

/* Forms pages (new/edit project) */
.card-form{max-width:640px;margin-top:16px;}
.field-label{font-weight:500;font-size:14px;}
.checkbox-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg);padding:12px;}
.checkbox-row input{margin-top:2px;}

/* Custom checkboxes */
input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--chip-bg);
  cursor:pointer;
  position:relative;
  margin:0;
  flex-shrink:0;
  transition:background-color 0.2s ease,border-color 0.2s ease;
}
input[type="checkbox"]:hover{
  border-color:var(--muted);
}
input[type="checkbox"]:checked{
  background:var(--brand);
  border-color:var(--brand);
}
input[type="checkbox"]:checked::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:5px;
  height:9px;
  border:solid var(--primary-on);
  border-width:0 2px 2px 0;
  transform:translate(-50%,-60%) rotate(45deg);
}
:root[data-theme="dark"] input[type="checkbox"]:checked{
  background:var(--primary-on);
  border-color:var(--primary-on);
}
:root[data-theme="dark"] input[type="checkbox"]:checked::after{
  border-color:#fff;
}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:8px;}
.danger-card{border-color:var(--danger);margin-top:24px;max-width:640px;}
.danger-title{margin:0 0 8px 0;color:var(--danger);font-size:16px;font-weight:600;}
.section-title{margin:0 0 12px 0;font-size:16px;font-weight:600;}
.form-block{margin-bottom:16px;}

/* Dashboard projects */
.projects-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin-top:20px;
}
.project-card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
}
.project-card__header{display:flex;gap:12px;align-items:center;}
.project-card__titles{display:flex;flex-direction:column;gap:4px;}
.project-card__name{font-weight:600;font-size:15px;}
.project-card__name a{text-decoration:none;color:inherit;}
.project-card__body{display:flex;flex-direction:column;gap:8px;padding: 16px 0 8px 0;}
.sessions-progress-bar{
  width:100%;
  height:6px;
  background:var(--border);
  border-radius:3px;
  overflow:hidden;
}
.sessions-progress-bar__fill{
  height:100%;
  border-radius:3px;
  transition:width 0.3s ease,background-color 0.3s ease;
}
.project-card__footer{display:flex;gap:8px;justify-content:flex-end;}
.project-card .proj-avatar{width:42px;height:42px;border-radius:10px;}
.project-card.create{border-style:dashed;cursor:pointer;transition:background .15s ease,border-color .15s ease;justify-content: center;}
.project-card.create:hover{background:var(--chip-bg-hover);border-color:var(--muted);}
.project-card.create .create-header{flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px;}
.project-card.create .create-plus{
  font-size:32px;
  line-height: 32px;
}
.project-card.create .create-name{
  text-align:center;
  width:100%;
}
.empty-state{
  text-align:center;
  padding:32px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--chip-bg);
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.empty-state .emoji{font-size:40px;}
.empty-state .title-sm{font-weight:600;font-size:16px;}

.sessions-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.sessions-table{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:12px;}
.sessions-head{display:grid;grid-template-columns:2fr 2fr 1.5fr 0.6fr;background:var(--surface);padding:10px 14px;font-size:12px;font-weight:600;color:var(--muted);}
.sessions-row{display:grid;grid-template-columns:2fr 2fr 1.5fr 0.6fr;padding:12px 14px;border-top:1px solid var(--border);align-items:center;gap:8px;}
.sessions-row:hover{background:var(--chip-bg);}
.sessions-row .row-primary{font-weight:600; font-size: 13px;}
.sessions-row .row-secondary{margin-top:4px;}
.sessions-row .btn-ghost{padding:6px 10px;}

.btn-ghost{
  background:none;
  border:1px solid var(--border);
  color:var(--fg);
}
.btn-ghost:hover{
  background:var(--chip-bg-hover);
}

/* Date range picker */
.date-range{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.date-range-display{min-width:220px;text-align:left;cursor:pointer}
.date-range-popup{
  position:absolute;
  top:100%;
  right:0;
  margin-top:6px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--chip-bg);
  box-shadow:0 10px 30px var(--shadow);
  z-index:1600;
  min-width:420px;
}
.date-range-inner{display:flex;gap:16px}
.date-range-presets{
  display:flex;
  flex-direction:column;
  min-width:160px;
  border-right:1px solid var(--border);
  padding-right:10px;
}
.date-range-calendars{flex:1;display:flex;flex-direction:column;gap:8px}
.date-cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}
.date-cal-title{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500}
.date-cal-sep{color:var(--muted)}
.date-nav{
  border-radius:9999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.date-nav:hover{background:var(--btn-bg-hover)}
.date-cal-grids{
  display:flex;
  gap:12px;
}
.date-cal{
  font-size:12px;
  min-width:160px;
}
.date-cal-weekhead{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  margin-bottom:4px;
  color:var(--muted);
}
.date-cal-weekhead span{text-align:center}
.date-cal-weeks{display:flex;flex-direction:column;gap:2px}
.date-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-cell{
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  padding:4px 0;
  text-align:center;
  cursor:pointer;
  color: var(--fg);
}
.date-cell.empty{cursor:default}
.date-cell:hover{background:var(--chip-bg-hover);}
.date-cell.in-range{background:var(--date-accent-subtle);}
.date-cell.start,
.date-cell.end{
  background:var(--date-accent);
  color:var(--primary-on);
}
.date-cal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}
.range-chip{
  display:block;
  width:100%;
  text-align:left;
  border-radius:9999px;
  padding:6px 10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  font-size:12px;
  cursor:pointer;
  margin-bottom:4px;
}
.range-chip:hover{
  background:var(--chip-bg-hover);
}

/* Native controls default theming (outside of .form/.input/.select) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select{
  background:var(--chip-bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
}
input::placeholder,
textarea::placeholder{color:var(--muted)}

/* Dropdown for project switcher */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px var(--shadow);padding:6px;z-index:1500;min-width:220px;max-height:320px;overflow:auto}
ul.dropdown-menu{list-style:none;margin:0}
.dropdown-menu *{font-size: 14px; }
.dropdown-item{display:block;padding:8px 10px;border-radius:6px;color:var(--fg);text-decoration:none;white-space:nowrap}
.dropdown-item:hover{background:var(--surface)}
.dropdown-item.active{background:var(--surface);font-weight:500}
.dropdown-menu button.dropdown-item{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit}
.theme-toggle-item:hover{background:var(--surface)}
.theme-switch{position:relative;width:40px;height:20px;background:var(--border);border-radius:10px;transition:background 0.2s;flex-shrink:0}
.theme-switch-slider{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--bg);border-radius:50%;transition:transform 0.2s;box-shadow:0 1px 3px var(--shadow)}
#themeToggle:checked + .theme-switch{background:var(--brand)}
#themeToggle:checked + .theme-switch .theme-switch-slider{transform:translateX(20px)}
.cursor-pointer{cursor:pointer}
.with-caret{display:inline-flex;align-items:center;gap:2px}
.with-caret .caret{width: 24px; height: 24px;font-size:28px;color:var(--muted);transition:transform .15s ease}
.with-caret.open .caret{transform:rotate(180deg);margin-bottom: -10px}
/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:2000;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg);margin:0;color:var(--fg)}
.nav-brand{color:var(--brand);font-weight:600;text-decoration:none}
.nav-menu{display:flex;align-items:center;gap:8px;margin-left:24px;}
.nav-menu-item{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;border-radius:8px;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:all 0.2s ease;padding:6px 10px;position:relative;}
.nav-menu-item:hover{background:var(--chip-bg-hover);color:var(--fg);}
.nav-menu-item svg{width:20px;height:20px;}
.nav-menu-item .tooltip{left:50% !important;top:calc(100% + 6px) !important;bottom:auto !important;right:auto !important;transform:translateX(-50%) translateY(-4px);}
.nav-menu-item:hover .tooltip{transform:translateX(-50%) translateY(0) !important;}
.nav-menu-item .tooltip::after{content:'';position:absolute;bottom:100%;top:auto;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--border);border-top:none;}
.nav-menu-item .tooltip::before{content:'';position:absolute;bottom:100%;top:auto;left:50%;transform:translateX(-50%) translateY(1px);border:5px solid transparent;border-bottom-color:var(--chip-bg);border-top:none;}

.nav-brand svg{height: 20px;vertical-align: top;margin-top: 4px;}
.beta-label{display:inline-block;padding:3px 8px 2px 8px;background:var(--brand);color:var(--primary-on);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;border-radius:20px;line-height:1.4;vertical-align:middle;margin-left:0;margin-top:3px;}
:root[data-theme="dark"] .beta-label{color:var(--bg);}
.nav-link{color:var(--muted);text-decoration:none}
.nav-link:hover{color:var(--fg)}
.date-range{position:relative;}
.date-range .date-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:16px;
  opacity:0.6;
}
.date-range .date-range-display{
  padding-left:32px;
}

/* Tabs */
.tabs{border-top:1px solid var(--project-glass-border)}
.tab-btn{
  border-radius:14px;
  border:none;
  padding:11px 16px;
  cursor:pointer;
  color:var(--muted);
  background:unset;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.tab-btn.active{
  background:var(--project-glass-bg);
  border:1px solid var(--project-glass-border);
  color:var(--fg);
  box-shadow:0 12px 28px var(--project-glass-shadow);
}
.tab-btn:hover{
  background:unset;
  color:var(--fg);
  box-shadow:0 10px 22px var(--project-glass-shadow);
}

/* Cards and panels */
.card{border:1px solid var(--border);border-radius:10px;padding:20px;background:transparent;color:var(--fg)}
.panel{border:1px dashed var(--border);border-radius:10px;padding:12px;background:transparent;color:var(--fg)}
.spark{width:140px;height:36px}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:2}
.chart-wrap{position:relative}
.chart{width:100%;height:100%;max-height:60px}
/* Legacy SVG chart styles (kept for compatibility) */
.chart svg .grid{display:none}
.chart svg .line{fill:none;stroke:var(--accent);stroke-width:2}
.chart svg .area{fill:var(--accent);opacity:.15}
.chart svg .avg{stroke:var(--focus-border);stroke-dasharray:4 3;stroke-width:1}
.chart svg .dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.chart-tooltip{position:absolute;padding:6px 8px;background:var(--chip-bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px var(--shadow);font-size:12px;white-space:nowrap;pointer-events:none;transform:translate(-50%, -120%);z-index:1000}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.preset{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:9999px;font-size:12px;background:var(--chip-bg);color:var(--muted);text-decoration:none;cursor:pointer}
.preset:hover{background:var(--chip-bg-hover);color:var(--fg)}
[data-has-menu]{position:relative}
.preset{position:relative;padding-right:26px}
.preset .dots{display:inline;position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.preset-menu{position:absolute;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px var(--shadow);padding:6px;z-index:1000;min-width:160px}
.preset-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 8px;cursor:pointer}
.preset-menu button:hover{background:var(--btn-bg-hover)}
[hidden]{display:none !important}

/* Project page visual refresh */
body.project-page{
  background:var(--project-page-bg);
  padding-top:calc(var(--nav-h) + 44px);
}
body.project-page::before,
body.project-page::after{
  content:'';
  position:fixed;
  inset:auto;
  width:360px;
  height:360px;
  border-radius:999px;
  pointer-events:none;
  filter:blur(72px);
  z-index:0;
}
body.project-page::before{
  top:72px;
  left:-120px;
  background:var(--project-glow);
}
body.project-page::after{
  top:120px;
  right:-140px;
  background:var(--project-glow);
  opacity:.8;
}
:root[data-theme="dark"] body.project-page::before,
:root[data-theme="dark"] body.project-page::after{
  display:none;
}
.project-page .project-page-container{
  position:relative;
  z-index:1;
  max-width:1280px;
  padding:24px 20px 64px;
}
.project-page .nav{
  top:12px;
  left:12px;
  right:12px;
  width:auto;
  border-radius:22px;
  border:1px solid var(--project-glass-border);
  background:var(--project-glass-bg);
  box-shadow:0 20px 48px var(--project-glass-shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.project-page .dropdown-menu,
.project-page .widget-menu-dropdown{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.project-page .nav-menu-item{
  background:unset;
  border:none;
  font-size:13px;
}
.project-page .nav-menu-item:hover{
  border:none;
  box-shadow:none;
}
.project-page #userMenuBtn{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.project-page #userMenuBtn:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--project-glass-border);
  box-shadow:none;
}
.project-page .proj-head{
  position:relative;
  overflow:hidden;
  padding:28px 28px 18px;
  border-radius:24px;
  border:1px solid var(--project-glass-border);
  /* background:unset; */
  box-shadow:0 28px 72px var(--project-glass-shadow-strong);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.project-page .proj-head::before{
  content:'';
  position:absolute;
  inset:0;
  /* background:
    linear-gradient(135deg, var(--project-glow) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%); */
  pointer-events:none;
}
.project-page .proj-head > *{
  position:relative;
  z-index:1;
}
.project-page .proj-avatar{
  width:64px;
  height:64px;
  border:1px solid var(--project-glass-border);
  box-shadow:0 14px 34px var(--project-glass-shadow);
}
.project-page .proj-status-dot{
  box-shadow:0 0 0 5px var(--project-glass-bg-strong);
}
.project-page .project-title{
  font-size:28px;
  line-height:1.1;
  letter-spacing:-0.03em;
}
.project-page .project-site{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:0;
  border-radius:999px;
  background:unset;
  border:none;
}
.project-page .sessions-limit-info{
  padding:0;
  border-radius:18px;
  background:unset;
  border:none;
  box-shadow:none;
}
.project-page .tabs{
  margin-top:22px;
  padding-top:18px;
  gap:4px !important;
  border-top:1px solid var(--project-glass-border);
}
.project-page .tab-btn{
  border-radius:14px;
  padding:11px 16px;
  border:none;
  background:unset;
  color:var(--muted);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.project-page .tab-btn:hover{
  background:unset;
  border-color:var(--project-glass-border);
  color:var(--fg);
  box-shadow:0 10px 22px var(--project-glass-shadow);
}
.project-page .tab-btn.active{
  background:var(--project-glass-bg);
  border:1px solid var(--project-glass-border);
  border-color:var(--project-glass-border);
  color:var(--fg);
  box-shadow:0 12px 28px var(--project-glass-shadow);
}
.project-page section[id^="tab-"]{
  margin-top:18px;
}
.project-page section[id^="tab-"] .card,
.project-page .filters-container,
.project-page .sessions-table,
.project-page .dashboard-canvas,
.project-page .widget,
.project-page .empty-state,
.project-page .code,
.project-page .modal-dialog,
.project-page .modal-content,
.project-page .widget-panel,
.project-page .widget-edit-panel,
.project-page .session-panel{
  border-color:var(--project-glass-border);
  background:var(--project-glass-bg);
  box-shadow:0 22px 50px var(--project-glass-shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.project-page section[id^="tab-"] .card,
.project-page .filters-container,
.project-page .sessions-table,
.project-page .empty-state,
.project-page .dashboard-canvas{
  border-radius:22px;
}
.project-page section[id^="tab-"] .card:hover,
.project-page .widget:hover{
  box-shadow:0 28px 60px var(--project-glass-shadow-strong);
}
.project-page .widget{
  border-radius:18px;
  box-shadow:0 18px 38px var(--project-glass-shadow);
}
.project-page .sessions-head,
.project-page .filters-empty-state,
.project-page .widget-list-item,
.project-page .top-clicks-item,
.project-page .pie-legend-row.active,
.project-page .pie-legend-row:hover{
  background:rgba(255,255,255,0.05);
}
:root:not([data-theme="dark"]) .project-page .filters-empty-state{
  background:rgba(17,17,17,0.04);
}
.project-page .dropdown-menu,
.project-page .widget-menu-dropdown{
  border-color:var(--project-glass-border);
  background:var(--project-glass-bg-strong);
  box-shadow:0 18px 40px var(--project-glass-shadow-strong);
}
.project-page .btn:not(.btn-primary):not(.btn-danger){
  background:var(--project-glass-bg-strong);
  border-color:var(--project-glass-border);
  color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.project-page .btn:not(.btn-primary):not(.btn-danger):hover{
  background:var(--project-glass-bg);
  border-color:var(--border);
}
.project-page .tab-btn{
  color:var(--fg);
}
.project-page .tab-btn:not(.active){
  color:var(--muted);
}
:root:not([data-theme="dark"]) .project-page .tab-btn,
:root:not([data-theme="dark"]) .project-page .nav-menu-item{
  background:unset;
  border:none;
}
:root:not([data-theme="dark"]) .project-page #userMenuBtn{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(17,17,17,0.08);
}
:root:not([data-theme="dark"]) .project-page .tab-btn:hover,
:root:not([data-theme="dark"]) .project-page .nav-menu-item:hover,
:root:not([data-theme="dark"]) .project-page #userMenuBtn:hover{
  background:#fff;
}

/* Funnel */
.funnel{border:1px solid var(--border);border-radius:12px;padding:20px;}
.funnel-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.funnel-title{font-weight:600;font-size:15px;}
.funnel-sub{color:var(--muted);}
.funnel-modern{display:flex;flex-direction:column;gap:8px;}
.funnel-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:10px;}
.funnel-num{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);background:var(--surface);}
.funnel-label .row-primary{font-weight:600;font-size:13px;}
.funnel-label .row-secondary{margin-top:4px;}
.funnel-bar-wrap{height:22px;overflow:hidden;display:flex;align-items:center;}
.funnel-bar{height:100%;background:linear-gradient(90deg,var(--funnel-bar-start),var(--funnel-bar-end));border-radius:12px;margin: 0 auto;}
.funnel-stats{display:flex;flex-direction:row;align-items:flex-end;gap:12px;justify-content: flex-end;}
.funnel-pct{font-weight:700;font-size:14px;}
.funnel-count{color:var(--muted);white-space:nowrap;}
.funnel-arrow{text-align:center;color:var(--muted);font-size:14px;}

.dashboard-canvas .widget .funnel{
  width: 100%;
  border: none;
  margin-top: 12px !important;
}

/* Modal session viewer */
.modal{position:fixed;inset:0;z-index:3000;display:block}
.modal.hide{display:none !important}
.modal-backdrop{position:absolute;inset:0;background:var(--overlay)}
.modal-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90vw;max-width:1100px;max-height:96vh;background:var(--bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px var(--shadow-strong)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:4px 24px;border-bottom:1px solid var(--border);background:transparent;color:var(--fg)}
.modal-title{font-weight:600}
.modal-body{flex:1;position:relative;overflow-y:auto;padding:20px}
#sessionModalContent .session-content{max-width:100%}
/* Session timeline */
.session-timeline{
  position: relative;
  padding-left: 20px;
}
.timeline-item{
  position: relative;
  padding-bottom: 12px;
  padding-left: 16px;
}
.timeline-item:not(:last-child)::before{
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -12px;
  width: 1px;
  background: var(--border);
}
.timeline-marker{
  position: absolute;
  left: -15px;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  z-index: 1;
}
.timeline-marker svg{
  width: 8px;
  height: 8px;
}
.timeline-item[data-type="page"] .timeline-marker{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.timeline-item[data-type="click"] .timeline-marker{
  background: var(--chip-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.timeline-content{
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.timeline-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.timeline-time{
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}
.timeline-type-badge{
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 500;
}
.timeline-item[data-type="page"] .timeline-type-badge{
  background: var(--accent);
  color: var(--bg);
}
.timeline-page-event{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-page-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.timeline-page-url{
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  word-break: break-all;
  line-height: 1.3;
}
.timeline-page-url svg{
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.timeline-click-event{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-element-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-element-tag{
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.timeline-element-tag code{
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.element-id{
  color: var(--accent);
  font-size: 11px;
}
.element-class{
  color: var(--muted);
  font-size: 11px;
}
.timeline-selector{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.timeline-selector .label{
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.selector-code{
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--fg);
  word-break: break-all;
  flex: 1;
  line-height: 1.4;
}
.timeline-element-text{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.timeline-element-text .label{
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.text-content{
  color: var(--fg);
  line-height: 1.4;
}
.timeline-page-context{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 10px;
}
/* Session panel */
.session-panel-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: transparent;
  pointer-events: none;
  transition: background 0.3s ease;
}
.session-panel-overlay.active{
  background: var(--overlay);
  pointer-events: auto;
}
.session-panel-overlay.hide{
  display: none;
}
.session-panel{
  position: fixed;
  top: 0;
  right: -900px;
  width: 900px;
  max-width: 95vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px var(--shadow);
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  z-index: 3001;
}
.session-panel.active{
  right: 0;
}
.session-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.session-panel-title{
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.session-panel-close{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.session-panel-close:hover{
  opacity: 1;
}
.session-panel-body{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
}

/* Pie chart widget styles */
.pie-chart-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100%;
  margin-top: 8px;
}
.pie-legend-panel {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pie-legend-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: 100%;
}
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-gutter: stable;
}
.pie-chart-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pie-chart-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.pie-chart {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 720px) {
  .pie-chart-container {
    grid-template-columns: 1fr;
  }
  .pie-legend-content {
    justify-content: flex-start;
  }
  .pie-chart-canvas-wrap {
    max-width: 220px;
  }
}

/* User menu avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;border:1px solid var(--border);background:var(--chip-bg);color:var(--fg);font-weight:600;font-size:12px;text-transform:uppercase}
.proj-avatar{width:56px;height:56px;border-radius:50%;border:1px solid var(--border);background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat;margin-right: 4px;}
.proj-avatar span{color:var(--avatar-fg);font-weight:700}
.proj-avatar.sm{width:28px;height:28px;border-radius:6px}
.proj-avatar.sm span{font-size:12px}
.proj-head{background:var(--surface);padding:24px 24px 0 24px;border-radius:16px; display: block;}
:root[data-theme="dark"] .proj-head{border: solid 1px var(--border)}
.project-title{line-height:32px;font-size:24px}
.project-site{font-size:13px;line-height:13px}

/* Project status dot */
.proj-avatar-wrap{position:relative;display:inline-block}
.proj-status-dot{
  position: absolute;
    top: 0px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 2px solid var(--surface);
  background:var(--status-offline);
}
.proj-status-dot.status-online{
  background:var(--status-online);
}
.project_item_url{font-size: 13px;}

.filters-empty-state{background: var(--surface); border-radius: 12px;}

/* Tooltip */
.has-tooltip{position:relative}
.tooltip{position:absolute;left:0;bottom:calc(100% + 6px);background:var(--chip-bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:12px;white-space:nowrap;box-shadow:0 8px 24px var(--shadow);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease, transform .12s ease;z-index:1600}
.has-tooltip:hover .tooltip{opacity:1;pointer-events:auto;transform:translateY(0)}
.tooltip::after{content:'';position:absolute;top:100%;left:12px;border:6px solid transparent;border-top-color:var(--border)}
.tooltip::before{content:'';position:absolute;top:100%;left:12px;border:5px solid transparent;border-top-color:var(--chip-bg);transform:translateY(-1px)}

/* Dark theme explicit overrides for controls */
:root[data-theme="dark"] .form input,
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background:var(--surface);
  color:var(--fg);
  border-color:var(--border);
}

/* Plan badge */
.plan-badge{
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.plan-badge.plan-free{
  background:var(--plan-free-bg);
  color:var(--plan-free-fg);
}
.plan-badge.plan-startup{
  background:var(--plan-startup-bg);
  color:var(--plan-startup-fg);
}
.plan-badge.plan-business{
  background:var(--plan-business-bg);
  color:var(--plan-business-fg);
}

/* Admin plan selector */
.plan-form{display:inline-block;margin:0;}
.plan-select{
  padding:4px 8px;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--fg);
  cursor:pointer;
  min-width:120px;
}
.plan-select:hover{border-color:var(--muted);}
.plan-select:focus{outline:none;border-color:var(--brand);}

/* Plan selection modal */
.modal-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90vw;max-width:800px;max-height:90vh;background:var(--bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px var(--shadow-strong);overflow-y:auto;}
.modal-close{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{color:var(--fg);}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px;padding:20px;}
.plan-card{border:1px solid var(--border);border-radius:12px;padding:20px;background:var(--chip-bg);display:flex;flex-direction:column;}
.plan-card-active{border-color:var(--brand);border-width:2px;}
.plan-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.plan-card-header h3{margin:0;font-size:20px;font-weight:600;}
.plan-card-body{flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.plan-feature{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.plan-feature:last-child{border-bottom:none;}
.plan-feature strong{font-weight:500;font-size:13px;color:var(--fg);}
.plan-feature span{font-size:13px;color:var(--muted);}
.plan-card-footer{margin-top:auto;}
.plan-pay-btn{width:100%;}

.filters-additional{
  background: var(--surface);
  padding: 20px;
  border-radius: 0 0 8px 8px;
  margin: 20px -20px -20px -20px;
  height: fit-content;
}

.filters-additional label{
  margin-right: 20px;
  display: inline-flex;
  gap: 8px;
  vertical-align: top;
}

/* New Project Page Styles */
.new-project-header{
  margin-bottom: 32px;
  padding: 32px 0;
  text-align: center;
}

.new-project-header__content{
  max-width: 600px;
  margin: 0 auto;
}

.new-project-header__icon{
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.new-project-header__title{
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.new-project-header__subtitle{
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.new-project-error{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 12px;
  color: var(--danger-muted);
  margin-bottom: 32px;
  max-width: 720px;
}

.new-project-form{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.new-project-form__section{
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 0.2s ease;
}

.new-project-form__section:hover{
  border-color: var(--muted);
}

.new-project-form__section-header{
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.new-project-form__section-title{
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.new-project-form__section-description{
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.new-project-form__fields{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.new-project-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.new-project-field__label{
  display: flex;
  align-items: center;
  gap: 6px;
}

.new-project-field__label-text{
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}

.new-project-field__required{
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
}

.new-project-field__optional{
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

.new-project-field__input{
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  transition: all 0.2s ease;
  font-family: inherit;
}

.new-project-field__input:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-project-field__input::placeholder{
  color: var(--muted);
  opacity: 0.6;
}

.new-project-field__hint{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.new-project-toggle{
  padding: 20px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.new-project-toggle:hover{
  border-color: var(--muted);
  background: var(--chip-bg);
}

.new-project-toggle__label{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  margin: 0;
}

.new-project-toggle__input-wrapper{
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.new-project-toggle__input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.new-project-toggle__switch{
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.new-project-toggle__switch::after{
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--primary-on);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px var(--shadow);
}

.new-project-toggle__input:checked + .new-project-toggle__switch{
  background: var(--brand);
}

:root[data-theme="dark"] .new-project-toggle__input:checked + .new-project-toggle__switch{
  background: var(--primary-on);
}

.new-project-toggle__input:checked + .new-project-toggle__switch::after{
  transform: translateX(20px);
}

:root[data-theme="dark"] .new-project-toggle__switch::after{
  background: var(--bg);
}

.new-project-toggle__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.new-project-toggle__title{
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

.new-project-toggle__description{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.new-project-form__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  flex-wrap: wrap;
}

.new-project-form__submit{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  min-width: 160px;
  justify-content: center;
}

.new-project-form__submit svg{
  transition: transform 0.2s ease;
}

.new-project-form__submit:hover svg{
  transform: translateX(2px);
}

.new-project-form__cancel{
  padding: 14px 24px;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px){
  .new-project-header{
    padding: 24px 0;
    margin-bottom: 24px;
  }

  .new-project-header__title{
    font-size: 24px;
  }

  .new-project-header__subtitle{
    font-size: 14px;
  }

  .new-project-form__section{
    padding: 24px 20px;
  }

  .new-project-form__actions{
    flex-direction: column;
  }

  .new-project-form__submit,
  .new-project-form__cancel{
    width: 100%;
  }
}

/* Dashboards */
.dashboard-container{
  min-height: 400px;
}
.dashboard-empty{
  padding: 80px 20px;
  text-align: center;
}
.dashboard-content{
  position: relative;
}
.dashboard-canvas{
  position: relative;
  min-height: 600px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dashboard-header{
  background: var(--surface);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.widgets-container{
  position: relative;
  width: 100%;
  flex: 1;
  padding: 20px;
  min-height: 400px;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 8px 8px;
  background-position: 0 0;
  background-origin: content-box;
}
.dashboard-canvas-resize-handle{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background: transparent;
  z-index: 10;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.dashboard-canvas-resize-handle:hover{
  background: var(--accent);
  opacity: 0.3;
}
.dashboard-canvas-resize-handle::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  pointer-events: none;
}
.dashboard-canvas-resize-handle:hover::after{
  background: var(--accent);
}
.widget{
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: move;
  background: var(--bg);
}
:root[data-theme="dark"] .widget{
  background: var(--surface);
}
.widget-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--btn-bg);
}
.widget-title{
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.widget-actions{
  display: flex;
  gap: 8px;
}
.widget-action-btn{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.widget-action-btn:hover{
  background: var(--btn-bg-hover);
  color: var(--fg);
}
.widget-content{
  flex: 1;
  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}
.widget-value{
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.widget-content .small{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.widget-content .chart-wrap{
  width: 100%;
  margin-top: 10px;
}
.widget-loading,
.widget-error{
  color: var(--muted);
  font-size: 14px;
}
.widget-resize-handle{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--border) 40%, var(--border) 45%, transparent 45%, transparent 55%, var(--border) 55%, var(--border) 60%, transparent 60%);
}
.widget-resize-handle:hover{
  background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--accent) 40%, var(--accent) 45%, transparent 45%, transparent 55%, var(--accent) 55%, var(--accent) 60%, transparent 60%);
}
.widget-panel-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: transparent;
  pointer-events: none;
  transition: background 0.3s ease;
}
.widget-panel-overlay.active{
  background: var(--overlay);
  pointer-events: auto;
}
.widget-panel{
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px var(--shadow);
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  z-index: 3001;
}
.widget-panel.active{
  right: 0;
}
.widget-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.widget-panel-header h3{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.widget-panel-close{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.widget-panel-close:hover{
  opacity: 1;
}
.widget-panel-body{
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.widget-types-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.widget-type-card{
  display: block;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.widget-type-card:hover{
  background: var(--chip-bg-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}
.widget-type-card-title{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
}
.widget-type-card-desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.widget-edit-panel-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: transparent;
  pointer-events: none;
  transition: background 0.3s ease;
}
.widget-edit-panel-overlay.active{
  background: var(--overlay);
  pointer-events: auto;
}
.widget-edit-panel{
  position: fixed;
  top: 0;
  right: -800px;
  width: 800px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px var(--shadow);
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  z-index: 3001;
}
.widget-edit-panel.active{
  right: 0;
}
.widget-edit-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.widget-edit-panel-header h3{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.widget-edit-panel-close{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.widget-edit-panel-close:hover{
  opacity: 1;
}
.widget-edit-panel-body{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
}
.widget-edit-panel-footer{
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* ========== Dashboard & widget common (no inline styles) ========== */
.widget-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.widget-menu-wrapper{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.widget-menu-btn{
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.widget-menu-dropdown{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
  z-index: 1000;
  min-width: 160px;
  padding: 4px;
}
.widget-menu-item{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--fg);
  font-size: 13px;
  border-radius: 4px;
}
.widget-error-centered{
  text-align: center;
  padding: 20px;
}
.widget-metric-value{
  font-size: 22px;
  font-weight: 700;
}
.widget-chart-wrap{
  height: 60px;
}
.funnel-modern{margin:0;}
.funnel-count-inline{display:flex;align-items:center;gap:12px;}
.funnel-count-part{display:inline-flex;align-items:center;gap:4px;}
.funnel-icon{opacity:0.6;}
.pie-legend-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
  text-align:left;
}
.pie-legend-row:hover{
  background:var(--surface);
  border-color:var(--border);
  transform:translateX(2px);
}
.pie-legend-row.active{
  background:var(--surface);
  border-color:var(--border);
  transform:translateX(2px);
}
.pie-legend-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.pie-legend-swatch{
  width:8px;
  height:8px;
  border-radius:999px;
  flex-shrink:0;
}
.pie-legend-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.pie-legend-label{
  color:var(--fg);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  font-size:12px;
}
.pie-legend-meta{
  color:var(--muted);
  font-size:10px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pie-legend-value{
  color:var(--fg);
  font-weight:700;
  flex-shrink:0;
  font-size:12px;
}
.pie-legend::-webkit-scrollbar{
  width:8px;
}
.pie-legend::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
.pie-legend::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.pie-legend::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
  border:2px solid transparent;
  background-clip:padding-box;
}
.widget-list{display:flex;flex-direction:column;gap:8px;padding:8px 10px 8px 0;font-size:13px;width:100%;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-gutter:stable;}
.widget-list-item{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0;border-radius:6px;background:var(--surface);}
.widget-list-item.top-pages-item{background:transparent;}
.widget-list-item-main{flex:1;min-width:0;margin-right:12px;}
.widget-list-item-title{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;}
.widget-list-item-url{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.widget-list-item-count{font-weight:600;white-space:nowrap;flex-shrink:0;}
.top-clicks-list{display:flex;flex-direction:column;gap:8px;padding:8px 10px 8px 0;font-size:13px;width:100%;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-gutter:stable;}
.widget-list::-webkit-scrollbar,
.top-clicks-list::-webkit-scrollbar{
  width:8px;
}
.widget-list::-webkit-scrollbar-track,
.top-clicks-list::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
.widget-list::-webkit-scrollbar-thumb,
.top-clicks-list::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.widget-list::-webkit-scrollbar-thumb:hover,
.top-clicks-list::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
  border:2px solid transparent;
  background-clip:padding-box;
}
.top-clicks-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-radius:6px;}
.top-clicks-item-main{flex:1;min-width:0;}
.top-clicks-item-row{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.top-clicks-item-num{flex-shrink:0;font-weight:600;color:var(--muted);}
.top-clicks-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--fg);font-weight:500;}
.top-clicks-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-clicks-item-selector{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:calc(1ch + 6px);}
.top-clicks-item-count{font-weight:600;white-space:nowrap;flex-shrink:0;}
.dashboard-header-flex{flex:1;}
.dashboard-dropdown-btn{background:none;border:0;cursor:pointer;color:inherit;font-size:14px;font-weight:500;padding:0;display:inline-flex;align-items:center;gap:4px;}
.dashboard-dropdown-items-li{list-style:none;padding:0;margin:0;}
.dashboard-toolbar-btn{padding:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.create-dashboard-btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;}
.dashboard-edit-presets-list{display:flex;flex-wrap:wrap;gap:8px;min-height:32px;margin-bottom:16px;}
.dashboard-edit-filters-additional{margin-top:20px;display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--border);}
.dashboard-edit-seq-label,.dashboard-edit-nest-label{display:flex;align-items:center;gap:8px;}
.dashboard-edit-input-wrap{width:100%;box-sizing:border-box;}
.input.dashboard-edit-input-wrap,.select.dashboard-edit-input-wrap{width:100%;}
.dashboard-edit-label{display:block;margin-bottom:8px;font-weight:600;}
.dashboard-edit-mb{margin-bottom:24px;}
.preset-btn{padding:4px 8px;border:1px solid var(--border);border-radius:27px;background:var(--chip-bg);color:var(--fg);cursor:pointer;font-size:12px;white-space:nowrap;}
.group-inline{border-radius:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.input-wrap-flex{flex:1;}
.input-val{min-width:260px;width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;}
.filters-container{border:1px dashed var(--border);border-radius:8px;padding:20px;}
.filters-empty-state{display:none;}
.add-filter-btn{margin-top:20px;}
.funnel-bar-dyn{height:100%;border-radius:12px;margin:0 auto;}

/* =========================================================
   App Shell Refresh
   ========================================================= */
body.app-page{
  background:var(--project-page-bg);
  padding-top:calc(var(--nav-h) + 44px);
}
body.app-page::before,
body.app-page::after{
  content:'';
  position:fixed;
  width:360px;
  height:360px;
  border-radius:999px;
  pointer-events:none;
  filter:blur(72px);
  z-index:0;
  background:var(--project-glow);
}
body.app-page::before{
  top:72px;
  left:-120px;
}
body.app-page::after{
  top:120px;
  right:-140px;
  opacity:.8;
}
:root[data-theme="dark"] body.app-page::before,
:root[data-theme="dark"] body.app-page::after{
  display:none;
}
.app-page .container{
  position:relative;
  z-index:1;
  max-width:1280px;
  padding:24px 20px 64px;
}
.app-page .nav{
  top:12px;
  left:12px;
  right:12px;
  width:auto;
  border-radius:22px;
  border:1px solid var(--project-glass-border);
  background:var(--project-glass-bg);
  box-shadow:0 20px 48px var(--project-glass-shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.app-page .dropdown-menu,
.app-page .widget-menu-dropdown{
  border-color:var(--project-glass-border);
  background:var(--project-glass-bg-strong);
  box-shadow:0 18px 40px var(--project-glass-shadow-strong);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.app-page .nav-menu-item{
  background:unset;
  border:none;
  font-size:13px;
}
.app-page .nav-menu-item:hover{
  background:unset;
  border:none;
  box-shadow:none;
}
.app-page #userMenuBtn,
.nav-user-btn{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid transparent;
  background:unset;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.app-page #userMenuBtn:hover,
.nav-user-btn:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--project-glass-border);
  box-shadow:none;
}
.nav-dropdown{
  min-width:180px;
  list-style:none;
  padding:0;
  margin:0;
}
.nav-dropdown-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  margin:0;
}
.nav-signout-form{
  margin:0;
}
.nav-signout-btn{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:8px 12px;
  cursor:pointer;
  color:var(--fg);
}
.app-page .card,
.app-page .empty-state,
.app-page .list-item,
.app-page .modal-content,
.app-page .sessions-table,
.app-page .code,
.app-page .date-range-popup,
.app-page .project-card,
.app-page .filters-container{
  border-color:var(--project-glass-border);
  background:var(--project-glass-bg);
  box-shadow:0 22px 50px var(--project-glass-shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.app-page .project-card.create:hover,
.app-page .card:hover{
  border-color:var(--project-glass-border);
}
.app-page .card,
.app-page .project-card,
.app-page .empty-state{
  border-radius:22px;
}
.app-page .sessions-head{
  background:rgba(255,255,255,0.05);
}
.app-page .sessions-row:hover,
.app-page .list-item:hover{
  background:rgba(255,255,255,0.04);
}
.app-page .btn:not(.btn-primary):not(.btn-danger),
.app-page .btn-ghost{
  background:var(--project-glass-bg-strong);
  border-color:var(--project-glass-border);
  color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.app-page .btn:not(.btn-primary):not(.btn-danger):hover,
.app-page .btn-ghost:hover{
  background:var(--project-glass-bg);
  border-color:var(--border);
}
.page-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.dashboard-page .container > .page-stack{
  gap:40px;
}
.dashboard-page section.page-stack{
  gap:0;
}
.page-shell{
  width:100%;
}
.page-shell--narrow{
  width:100%;
  max-width:760px;
  margin:0 auto;
}
.page-shell--centered{
  max-width:680px;
  margin:0 auto;
}
.page-hero{
  position:relative;
  overflow:hidden;
  padding:28px 28px 22px;
  border-radius:24px;
  border:1px solid var(--project-glass-border);
  background:unset;
  box-shadow:0 28px 72px var(--project-glass-shadow-strong);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, var(--project-glow) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.page-hero > *{
  position:relative;
  z-index:1;
}
.page-hero__eyebrow{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-hero__title{
  margin:0;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-0.03em;
}
.page-hero__subtitle{
  max-width:720px;
  margin:10px 0 0;
  font-size:14px;
  color:var(--muted);
}
.page-hero__meta{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.page-hero__actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.page-grid{
  display:grid;
  gap:20px;
}
.page-grid--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.profile-page .profile-overview-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start;
}
.profile-page .profile-overview-grid > :only-child{
  grid-column:1 / -1;
}
.profile-page .profile-settings-grid{
  align-items:start;
}
.profile-page .profile-settings-card{
  min-width:0;
}
.profile-page .profile-settings-card--wide{
  grid-column:1 / -1;
}
.section-card{
  padding:24px;
}
.section-card--lg{
  padding:28px;
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:20px;
}
.section-header--tight{
  margin-bottom:16px;
}
.dashboard-page .section-header.section-header--tight{
  margin-bottom:0;
}
.section-header__content{
  min-width:0;
}
.section-header__title{
  margin:0;
  font-size:20px;
  font-weight:600;
}
.section-header__subtitle{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.stat-card{
  padding:20px;
}
.stat-card__label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.stat-card__value{
  margin-top:8px;
  font-size:28px;
  line-height:1;
  font-weight:700;
}
.stat-card__meta{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
}
.alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid var(--project-glass-border);
  background:var(--project-glass-bg);
}
.alert--error{
  color:var(--danger-muted);
  background:var(--danger-bg);
  border-color:var(--danger-border);
}
.alert--success{
  color:var(--success);
  background:rgba(22,163,74,0.08);
  border-color:rgba(22,163,74,0.22);
}
.alert--warning{
  color:#b45309;
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.24);
}
.detail-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.detail-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.detail-row__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.detail-row__label{
  font-weight:600;
  font-size:14px;
}
.progress-track{
  height:8px;
  background:rgba(255,255,255,0.08);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:999px;
  transition:width .3s ease, background-color .3s ease;
}
.form-shell{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field--full{
  grid-column:1 / -1;
}
.field-label{
  display:block;
  font-size:14px;
  font-weight:600;
}
.field-help{
  font-size:13px;
  color:var(--muted);
}
.app-page input[type="text"],
.app-page input[type="email"],
.app-page input[type="url"],
.app-page input[type="password"],
.app-page input[type="number"],
.app-page textarea,
.app-page select,
.field-input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--project-glass-border);
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  color:var(--fg);
}
.app-page input:focus,
.app-page textarea:focus,
.app-page select:focus,
.field-input:focus{
  outline:none;
  border-color:var(--focus-border);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.toggle-card{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 18px;
  border:1px solid var(--project-glass-border);
  border-radius:16px;
  background:rgba(255,255,255,0.04);
}
.toggle-card input{
  margin-top:2px;
}
.toggle-card__content{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.toggle-card__title{
  font-size:15px;
  font-weight:600;
}
.toggle-card__text{
  font-size:13px;
  color:var(--muted);
}
.inline-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.panel-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--project-glass-border);
}
.panel-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border-radius:14px;
  color:var(--muted);
  border:none;
  background:unset;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.panel-tab:hover{
  color:var(--fg);
  box-shadow:0 10px 22px var(--project-glass-shadow);
}
.panel-tab.is-active{
  color:var(--fg);
  background:var(--project-glass-bg);
  border:1px solid var(--project-glass-border);
  box-shadow:0 12px 28px var(--project-glass-shadow);
}
.session-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.session-summary__item{
  padding:18px 20px;
  border-radius:18px;
  border:1px solid var(--project-glass-border);
  background:rgba(255,255,255,0.04);
}
.session-summary__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.session-summary__value{
  margin-top:8px;
  font-size:14px;
  font-weight:600;
  word-break:break-word;
}
.auth-shell,
.result-shell{
  max-width:560px;
  margin:0 auto;
}
.auth-card,
.result-card{
  padding:32px;
  text-align:center;
}
.auth-card form{
  text-align:left;
}
.auth-footer{
  margin-top:24px;
  text-align:center;
}
.result-card__icon{
  font-size:44px;
  line-height:1;
  margin-bottom:16px;
}
.result-card__title{
  margin:0 0 12px;
  font-size:26px;
  font-weight:700;
}
.result-card__text{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.result-card .inline-actions{
  justify-content:center;
  margin-top:24px;
}
.btn-sm{
  padding:6px 12px;
  font-size:12px;
}
.dashboard-limit-box{
  margin-top:16px;
  max-width:460px;
  text-align:left;
}
.dashboard-limit-box__title{
  margin-bottom:4px;
  font-weight:600;
}
.dashboard-create-card--locked{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}
.dashboard-create-card__hint{
  padding:8px;
  margin-top:8px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.dashboard-card-limits{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.auth-submit-btn{
  width:100%;
  margin-top:8px;
  padding:12px 20px;
}
.auth-link{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
.auth-agreement{
  margin:0;
}
.auth-agreement input{
  margin-top:2px;
}
.auth-agreement__text{
  font-size:14px;
  line-height:1.5;
}
.toggle-input{
  width:18px;
  height:18px;
  cursor:pointer;
}
.theme-toggle-input{
  display:none;
}
.new-project-error__icon{
  flex-shrink:0;
}
.rrplayer-shell{
  overflow:hidden;
  border:1px solid var(--project-glass-border);
  border-radius:16px;
}
.session-content__title{
  margin:0 0 16px;
}
.session-content__subtitle{
  margin:24px 0 12px;
}
.session-content__meta{
  margin-bottom:12px;
}
.session-content__meta--last{
  margin-bottom:20px;
}
.timeline-inline-icon{
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}
.page-note{
  font-size:13px;
  color:var(--muted);
}
.docs-inline-section{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.docs-inline-label{
  font-size:12px;
  color:#999;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:10px;
  padding:0 20px;
}
.app-page .new-project-form__section{
  background:var(--project-glass-bg);
  border-color:var(--project-glass-border);
  box-shadow:0 22px 50px var(--project-glass-shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.app-page .new-project-form__section-header{
  border-bottom-color:var(--project-glass-border);
}
.app-page .new-project-field__input{
  background:rgba(255,255,255,0.05);
  border-color:var(--project-glass-border);
}
.app-page .new-project-toggle{
  background:rgba(255,255,255,0.04);
  border-color:var(--project-glass-border);
}
.app-page .new-project-toggle:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--project-glass-border);
}
@media (max-width: 900px){
  .page-grid--two,
  .form-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 768px){
  body.app-page{
    padding-top:calc(var(--nav-h) + 28px);
  }
  .app-page .container{
    padding:18px 14px 40px;
  }
  .page-hero,
  .section-card,
  .section-card--lg,
  .auth-card,
  .result-card{
    padding:22px;
  }
  .page-hero__title{
    font-size:26px;
  }
}