:root {
  --portal-bg: #f6f8fc;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f0f4fa;
  --portal-border: #dfe5ef;
  --portal-text: #172033;
  --portal-muted: #647087;
  --portal-primary: #4f6ef7;
  --portal-primary-strong: #3657e8;
  --portal-primary-soft: #eef1ff;
  --portal-success: #12a66a;
  --portal-warning: #d88a08;
  --portal-danger: #dc4c64;
  --portal-radius-sm: 10px;
  --portal-radius: 14px;
  --portal-radius-lg: 20px;
  --portal-shadow: 0 16px 40px rgba(29, 42, 68, .08);
  --portal-sidebar: 264px;
}

.dark {
  --portal-bg: #0b1120;
  --portal-surface: #111a2c;
  --portal-surface-soft: #172238;
  --portal-border: #26324a;
  --portal-text: #f4f7fc;
  --portal-muted: #98a5bc;
  --portal-primary: #7790ff;
  --portal-primary-strong: #91a5ff;
  --portal-primary-soft: rgba(91, 116, 245, .14);
  --portal-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }
[x-cloak] { display: none !important; }

body.portal-body {
  margin: 0;
  background: var(--portal-bg);
  color: var(--portal-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body.portal-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 0%, rgba(79, 110, 247, .09), transparent 30rem),
    radial-gradient(circle at 96% 20%, rgba(26, 188, 156, .06), transparent 24rem);
}

a, button, input, select, textarea { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(79, 110, 247, .28); outline-offset: 2px; }

.portal-public-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--portal-border) 76%, transparent);
  background: color-mix(in srgb, var(--portal-bg) 84%, transparent);
  backdrop-filter: blur(18px);
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--portal-text);
  font-weight: 760;
  letter-spacing: -.02em;
}

.portal-brand img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--portal-primary) 28%, var(--portal-border));
  border-radius: 12px;
  background: #0b1120;
  box-shadow: 0 8px 22px rgba(54,87,232,.18), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.portal-brand-sidebar img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(54,87,232,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.portal-wordmark { display:flex; align-items:baseline; gap:.28rem; white-space:nowrap; }
.portal-wordmark small { color:var(--portal-muted); font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.portal-wordmark b { color:var(--portal-text); font-size:1.05rem; font-weight:820; letter-spacing:-.025em; }
.dark .portal-brand img {
  border-color: color-mix(in srgb, var(--portal-primary) 42%, var(--portal-border));
  box-shadow: 0 10px 28px rgba(79,110,247,.2), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.portal-nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 38px;
  padding: .5rem .72rem;
  border-radius: 11px;
  color: var(--portal-muted);
  font-size: .9rem;
  font-weight: 600;
}
.portal-nav-link:hover { color: var(--portal-text); background: var(--portal-surface-soft); }
.portal-nav-link.is-active { color: var(--portal-primary-strong); background: var(--portal-primary-soft); }
.portal-nav-link i { width: 18px; height: 18px; }

.portal-app { min-height: 100vh; }
.portal-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--portal-sidebar);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid var(--portal-border);
  background: color-mix(in srgb, var(--portal-surface) 94%, transparent);
}
.portal-sidebar-nav { display: grid; gap: 4px; margin-top: 26px; }
.portal-sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }
.portal-app-main { min-width: 0; margin-left: var(--portal-sidebar); }
.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 28px;
  border-bottom: 1px solid var(--portal-border);
  background: color-mix(in srgb, var(--portal-bg) 88%, transparent);
  backdrop-filter: blur(18px);
  max-width: none;
  margin: 0;
}
.portal-content { width: min(100%, 1480px); margin: 0 auto; padding: 30px; }

.ui-page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ui-eyebrow { color: var(--portal-primary-strong); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ui-title { margin: .25rem 0 0; color: var(--portal-text); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 780; letter-spacing: -.035em; line-height: 1.12; }
.ui-subtitle { margin-top: .45rem; color: var(--portal-muted); font-size: .94rem; line-height: 1.55; }

.ui-card {
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
.ui-card-pad { padding: clamp(18px, 2.2vw, 26px); }
.ui-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--portal-border); }

.ui-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--portal-radius-sm);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.ui-btn-primary { background: var(--portal-primary); color: white; box-shadow: 0 8px 20px rgba(79,110,247,.2); }
.ui-btn-primary:hover { background: var(--portal-primary-strong); transform: translateY(-1px); }
.ui-btn-secondary { border-color: var(--portal-border); background: var(--portal-surface); color: var(--portal-text); }
.ui-btn-secondary:hover { background: var(--portal-surface-soft); }
.ui-btn-ghost { color: var(--portal-muted); }
.ui-btn-ghost:hover { color: var(--portal-text); background: var(--portal-surface-soft); }
.ui-btn-danger { border-color: color-mix(in srgb, var(--portal-danger) 35%, transparent); background: color-mix(in srgb, var(--portal-danger) 9%, transparent); color: var(--portal-danger); }
.ui-btn-icon { width: 36px; padding: 0; }

.ui-field, .ui-select, .ui-textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-sm);
  background: var(--portal-surface);
  color: var(--portal-text);
  padding: .68rem .8rem;
  font-size: .9rem;
}
.ui-field::placeholder, .ui-textarea::placeholder { color: var(--portal-muted); }
.ui-field:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(79,110,247,.12); outline: none; }
.ui-label { display: block; margin-bottom: .42rem; color: var(--portal-text); font-size: .82rem; font-weight: 700; }
.ui-help { margin-top: .35rem; color: var(--portal-muted); font-size: .76rem; }

.ui-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface); }
.ui-filterbar .ui-field { width: min(100%, 310px); }
.ui-filterbar .ui-select { width: auto; min-width: 120px; }

.ui-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.ui-kpi { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface); }
.ui-kpi-label { color: var(--portal-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ui-kpi-value { margin-top: .45rem; color: var(--portal-text); font-size: 1.55rem; font-weight: 780; letter-spacing: -.025em; }
.ui-kpi-meta { margin-top: .3rem; color: var(--portal-muted); font-size: .76rem; }
.ui-kpi-accent::after { content: ""; position: absolute; inset: auto -22px -28px auto; width: 82px; height: 82px; border-radius: 999px; background: var(--portal-primary-soft); }

.ui-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .58rem; border-radius: 999px; font-size: .72rem; font-weight: 750; }
.ui-badge-primary { color: var(--portal-primary-strong); background: var(--portal-primary-soft); }
.ui-badge-success { color: var(--portal-success); background: color-mix(in srgb, var(--portal-success) 11%, transparent); }
.ui-badge-muted { color: var(--portal-muted); background: var(--portal-surface-soft); }

.ui-table-wrap { overflow: auto; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface); }
.ui-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .86rem; }
.ui-table th { padding: 13px 16px; border-bottom: 1px solid var(--portal-border); background: var(--portal-surface-soft); color: var(--portal-muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.ui-table td { padding: 14px 16px; border-bottom: 1px solid var(--portal-border); color: var(--portal-text); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: color-mix(in srgb, var(--portal-primary-soft) 42%, transparent); }

.ui-alert { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); font-size: .88rem; }
.ui-alert-success { border-color: color-mix(in srgb, var(--portal-success) 30%, transparent); background: color-mix(in srgb, var(--portal-success) 8%, var(--portal-surface)); color: var(--portal-success); }
.ui-alert-danger { border-color: color-mix(in srgb, var(--portal-danger) 30%, transparent); background: color-mix(in srgb, var(--portal-danger) 8%, var(--portal-surface)); color: var(--portal-danger); }
.ui-alert-warning { border-color: color-mix(in srgb, var(--portal-warning) 30%, transparent); background: color-mix(in srgb, var(--portal-warning) 8%, var(--portal-surface)); color: var(--portal-warning); }

.ui-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(3, 8, 20, .68); backdrop-filter: blur(7px); }
.ui-modal { width: min(100%, 470px); max-height: calc(100vh - 36px); overflow: auto; border: 1px solid var(--portal-border); border-radius: 22px; background: var(--portal-surface); box-shadow: 0 30px 80px rgba(0,0,0,.28); }

.ui-empty { padding: 48px 20px; text-align: center; color: var(--portal-muted); }
.ui-empty-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 12px; border-radius: 14px; background: var(--portal-primary-soft); color: var(--portal-primary-strong); }

.portal-hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 124px) 0 72px; }
.portal-hero::after { content:""; position:absolute; z-index:-1; width:620px; height:620px; right:-180px; top:-220px; border-radius:50%; background:radial-gradient(circle,rgba(79,110,247,.2),transparent 66%); }
.portal-hero-title { max-width: 820px; font-size: clamp(2.7rem, 6.5vw, 5.5rem); font-weight: 820; letter-spacing: -.06em; line-height: .98; }
.portal-gradient-text { background: linear-gradient(115deg, var(--portal-primary-strong), #8a5cf6 55%, #15a98c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-section { padding: clamp(64px, 8vw, 104px) 0; }
.portal-section-muted { background: color-mix(in srgb, var(--portal-surface-soft) 72%, transparent); border-block: 1px solid var(--portal-border); }
.portal-section-title { max-width: 760px; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 790; letter-spacing: -.045em; line-height: 1.07; }
.portal-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.portal-feature { min-height: 210px; padding: 24px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface); }
.portal-feature-icon { display:grid; width:44px; height:44px; place-items:center; margin-bottom:24px; border-radius:13px; background:var(--portal-primary-soft); color:var(--portal-primary-strong); }
.portal-feature h3 { font-size: 1.05rem; font-weight: 760; }
.portal-feature p { margin-top: .55rem; color: var(--portal-muted); font-size: .9rem; line-height: 1.6; }

.portal-price-card { padding: clamp(24px,3vw,36px); border:1px solid var(--portal-border); border-radius:24px; background:var(--portal-surface); }
.portal-price-card.is-featured { border-color:color-mix(in srgb,var(--portal-primary) 55%,var(--portal-border)); box-shadow:var(--portal-shadow); }
.portal-faq details { border-bottom:1px solid var(--portal-border); }
.portal-faq summary { display:flex; justify-content:space-between; gap:18px; padding:20px 0; cursor:pointer; font-weight:720; list-style:none; }
.portal-faq details > div { padding:0 0 20px; color:var(--portal-muted); font-size:.92rem; line-height:1.7; }

.builder-shell .wrap { display:grid; width:100%; max-width:none; margin:0; grid-template-columns:360px minmax(0, 1fr); gap:18px; padding:0; }
.builder-shell .ui-page-heading { margin-bottom:14px; }
.builder-shell .ui-title { font-size:1.65rem; }
.builder-shell .ui-subtitle { margin-top:.3rem; }
.builder-shell .card { border:1px solid var(--portal-border); border-radius:var(--portal-radius-lg); background:var(--portal-surface); box-shadow:none; overflow:hidden; }
.builder-shell .card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 19px; border-bottom:1px solid var(--portal-border); background:var(--portal-surface-soft); }
.builder-shell .card-body { padding:18px; }
.builder-shell .h { font-weight:760; color:var(--portal-text); }
.builder-shell .small,.builder-shell .muted,.builder-shell .hint { color:var(--portal-muted); font-size:.8rem; }
.builder-shell .actions-list { max-height:430px; overflow:auto; display:grid; gap:8px; padding-right:5px; }
.builder-shell #savedAlgorithmsList { max-height:280px; gap:7px; }
.builder-shell #savedAlgorithmsList .action-item { min-height:44px; padding:5px 9px; gap:8px; }
.builder-shell #savedAlgorithmsList .saved-algorithm-actions { display:flex; height:24px; flex:0 0 auto; align-items:center; gap:5px; }
.builder-shell #savedAlgorithmsList .saved-algorithm-actions .btn {
  display:inline-flex;
  width:28px;
  height:24px;
  min-height:24px;
  padding:0;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  line-height:1;
}
.builder-shell .action-item { display:flex; align-items:center; justify-content:space-between; gap:9px; min-height:50px; padding:7px 9px; border:1px solid var(--portal-border); border-radius:13px; background:var(--portal-surface-soft); color:var(--portal-text); cursor:grab; }
.builder-shell .action-item:hover { border-color:var(--portal-primary); background:var(--portal-primary-soft); transform:translateY(-1px); }
.builder-shell .action-left { display:flex; min-width:0; align-items:center; gap:9px; }
.builder-shell .icon { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border:1px solid var(--portal-border); border-radius:9px; background:var(--portal-surface); }
.builder-shell .action-name { color:var(--portal-text); font-size:.79rem; font-weight:780; line-height:1.18; }
.builder-shell .action-meta { margin-top:2px; color:var(--portal-muted); font-size:.68rem; }
.builder-shell .action-item > .btn { width:28px; min-height:28px; justify-content:center; padding:0; border-radius:999px; }
.builder-shell .action-item > .pill { min-width:116px; min-height:28px; flex:0 0 116px; align-items:center; justify-content:center; padding:5px 12px; border:1px solid var(--portal-border); border-radius:999px; line-height:1; white-space:nowrap; }
.builder-shell .action,.builder-shell .step { border:1px solid var(--portal-border); border-radius:12px; background:var(--portal-surface); color:var(--portal-text); }
.builder-shell .action:hover { border-color:var(--portal-primary); background:var(--portal-primary-soft); }
.builder-shell .dropzone { min-height:260px; padding:12px; border:1px dashed color-mix(in srgb,var(--portal-primary) 55%,var(--portal-border)); border-radius:15px; background:color-mix(in srgb,var(--portal-primary-soft) 35%,transparent); }
.builder-shell .footer-actions,.builder-shell .left-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.builder-shell .footer-actions { justify-content:space-between; margin-top:16px; }
.builder-shell .btn { min-height:32px; padding:.35rem .78rem; border:1px solid var(--portal-border); border-radius:9px; background:var(--portal-surface); color:var(--portal-text); font-size:.76rem; font-weight:700; cursor:pointer; }
.builder-shell .btn:hover { background:var(--portal-surface-soft); }
.builder-shell .btn.primary { border-color:var(--portal-primary); background:var(--portal-primary); color:#fff; }
.builder-shell .btn.danger { color:var(--portal-danger); }
.builder-shell .codebox { margin-top:16px; overflow:hidden; border:1px solid var(--portal-border); border-radius:14px; background:#09101d; }
.builder-shell .codebar { display:flex; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid #26324a; }
.builder-shell pre { max-height:360px; overflow:auto; margin:0; padding:18px; color:#d9e2f2; font-size:.78rem; line-height:1.6; }
.builder-shell .pill,.builder-shell .kbd { display:inline-flex; padding:.2rem .45rem; border-radius:7px; background:var(--portal-surface-soft); color:var(--portal-muted); font-size:.74rem; }
.builder-shell .toast { position:fixed; right:22px; bottom:22px; z-index:120; opacity:0; pointer-events:none; padding:12px 16px; border-radius:11px; background:var(--portal-text); color:var(--portal-surface); }
.builder-shell .toast.show { opacity:1; }

@media (max-width: 1023px) {
  .portal-sidebar { transform: translateX(-100%); box-shadow: var(--portal-shadow); }
  .portal-sidebar.is-open { transform: translateX(0); }
  .portal-app-main { margin-left: 0; }
  .portal-content { padding: 22px 18px; }
  .ui-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .builder-shell .wrap { grid-template-columns:1fr; }
}

@media (max-width: 639px) {
  .portal-topbar { padding:10px 14px; }
  .portal-content { padding: 18px 14px 28px; }
  .ui-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ui-kpi { padding:13px; }
  .ui-kpi-value { font-size:1.25rem; }
  .ui-kpi-meta { font-size:.68rem; }
  .portal-feature-grid { grid-template-columns:1fr; }
  .ui-filterbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ui-filterbar > * { width:100% !important; min-width:0 !important; }
  .ui-filterbar > :first-child { grid-column:1/-1; }
  .portal-hero { padding-top:56px; }
  .portal-hero-title { font-size:clamp(2.45rem,13vw,3.6rem); }
  .portal-public-header .ui-btn { padding-inline:.72rem; }
  .key-row .key-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:9px; }
  .key-row .key-card-header { grid-column:1/-1; }
  .key-row .key-card-header > .flex { align-items:flex-start; }
  .key-row .key-card-actions { gap:4px; }
  .key-row .key-card-actions button { display:grid; width:30px; height:30px; place-items:center; padding:0; }
  .key-row .dragHandle { display:grid; width:24px; height:30px; place-items:center; padding:0; }
  .key-row .key-metric { min-width:0; padding:6px 3px; border:1px solid var(--portal-border); border-radius:9px; background:var(--portal-surface-soft); text-align:center; }
  .key-row .key-metric-label { color:var(--portal-muted); font-size:.58rem; font-weight:800; letter-spacing:.05em; }
  .key-row .key-period { display:none; }
  .key-row .key-metric > .font-semibold { margin-top:2px; font-size:.88rem; line-height:1.15; }
  .key-row .key-hour { margin-top:2px; font-size:.6rem; line-height:1.1; }
  .key-row .key-hour br { display:none; }
  .key-row .key-captcha { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 10px; padding-top:2px; }
  .key-row .key-captcha > :first-child { display:none; }
  .key-row .key-captcha > div { font-size:.65rem; line-height:1.25; white-space:nowrap; }
  #keysList { gap:12px; }
  #keysList .key-row {
    overflow:hidden;
    border-color:color-mix(in srgb,var(--portal-primary) 24%,var(--portal-border));
    background:var(--portal-surface);
    box-shadow:0 5px 14px rgba(29,42,68,.08);
  }
  #keysList .key-row::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    z-index:1;
    width:3px;
    border-radius:12px 0 0 12px;
    background:linear-gradient(180deg,var(--portal-primary),color-mix(in srgb,var(--portal-primary) 45%,#38bdf8));
    pointer-events:none;
  }
  .dark #keysList .key-row {
    border-color:color-mix(in srgb,var(--portal-primary) 36%,var(--portal-border));
    background:color-mix(in srgb,var(--portal-surface) 96%,var(--portal-primary) 4%);
    box-shadow:0 7px 18px rgba(0,0,0,.2);
  }
}

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