:root{
  --bg:#081a31;
  --bg-2:#0b2342;
  --bg-3:#102b4f;

  --panel:#0e2442;
  --panel-2:#132d52;
  --panel-3:#173862;

  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  --text:#f6f8fb;
  --text-soft:#d9e2ee;
  --muted:rgba(230,238,248,.72);
  --soft:rgba(220,230,242,.45);

  --accent-blue:#19b7c4;
  --accent-blue-2:#27c4d0;
  --accent-orange:#f79b1a;
  --accent-orange-2:#ffaf3a;
  --accent-purple:#8f6bff;

  --success:#8fe3b1;
  --danger:#ffb2b8;
  --warning:#ffd58a;

  --shadow:0 24px 60px rgba(0,0,0,.28);
  --shadow-soft:0 12px 28px rgba(0,0,0,.18);

  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
}

html.theme-light,
body.theme-light,
.app-body.theme-light,
.login-body.theme-light{
  --bg:#eef4fb;
  --bg-2:#f5f9fd;
  --bg-3:#dde8f4;

  --panel:#ffffff;
  --panel-2:#f8fbff;
  --panel-3:#edf4fb;

  --line:rgba(10,35,66,.08);
  --line-strong:rgba(10,35,66,.16);

  --text:#102132;
  --text-soft:#2f4660;
  --muted:rgba(34,54,76,.72);
  --soft:rgba(46,67,90,.52);

  --accent-blue:#10a7b8;
  --accent-blue-2:#1cb9c6;
  --accent-orange:#f59a1a;
  --accent-orange-2:#ffb240;
  --accent-purple:#8565f2;

  --success:#2b9d63;
  --danger:#d95a69;
  --warning:#c28712;

  --shadow:0 20px 50px rgba(16,33,50,.10);
  --shadow-soft:0 10px 24px rgba(16,33,50,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

html{
  background:
    radial-gradient(circle at top right, rgba(143,107,255,.08), transparent 24%),
    radial-gradient(circle at 20% 10%, rgba(25,183,196,.08), transparent 28%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 38%, #071628 100%);
}

html.theme-light{
  background:
    radial-gradient(circle at top right, rgba(133,101,242,.10), transparent 26%),
    radial-gradient(circle at 18% 12%, rgba(16,167,184,.10), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, var(--bg) 42%, #e9f1f8 100%);
}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  line-height:1.45;
  min-height:100vh;
  background:
    radial-gradient(circle at top right, rgba(143,107,255,.06), transparent 18%),
    radial-gradient(circle at bottom left, rgba(247,155,26,.05), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}

body.theme-light,
.app-body.theme-light,
.login-body.theme-light{
  background:
    radial-gradient(circle at top right, rgba(133,101,242,.08), transparent 20%),
    radial-gradient(circle at bottom left, rgba(245,154,26,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
}

a{
  text-decoration:none;
  color:inherit;
}

button,input,textarea,select{
  font:inherit;
}

::selection{
  background:rgba(25,183,196,.28);
  color:#ffffff;
}

html.theme-light ::selection,
body.theme-light ::selection,
.app-body.theme-light ::selection,
.login-body.theme-light ::selection{
  background:rgba(16,167,184,.22);
  color:#102132;
}

/* =========================
   APP SHELL
   ========================= */

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:270px 1fr;
}

.sidebar,
.app-sidebar{
  position:relative;
  border-right:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(25,183,196,.05), rgba(143,107,255,.03) 70%, transparent);
  backdrop-filter:blur(14px);
}

html.theme-light .sidebar,
html.theme-light .app-sidebar,
body.theme-light .sidebar,
body.theme-light .app-sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)),
    linear-gradient(180deg, rgba(16,167,184,.05), rgba(133,101,242,.04) 70%, transparent);
}

.sidebar::after,
.app-sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(25,183,196,.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(143,107,255,.05), transparent 24%);
}

.nav,
.app-nav{
  position:relative;
  z-index:1;
  padding:16px 14px 18px;
}

.nav-item,
.app-nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  margin-bottom:8px;
  border-radius:16px;
  color:var(--muted);
  transition:all .2s ease;
  border:1px solid transparent;
}

.app-nav-icon{
  flex-shrink:0;
  width:20px;
  text-align:center;
  opacity:.92;
}

.app-nav-label{
  flex:1 1 auto;
  min-width:0;
  padding-right:10px;
  font-weight:600;
  white-space:nowrap;
}

.app-nav-badge{
  margin-left:8px;
  flex:0 0 auto;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #ff5c74, #f43f5e);
  color:#ffffff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 12px 24px rgba(244,63,94,.28);
}

.app-nav-badge.is-complete{
  background:linear-gradient(135deg, #34d399, #16a34a);
  box-shadow:0 12px 24px rgba(22,163,74,.24);
}

.nav-item:hover,
.app-nav-link:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.06);
  color:var(--text);
}

html.theme-light .nav-item,
html.theme-light .app-nav-link,
body.theme-light .nav-item,
body.theme-light .app-nav-link{
  color:#1c3550;
}

html.theme-light .nav-item:hover,
html.theme-light .app-nav-link:hover,
body.theme-light .nav-item:hover,
body.theme-light .app-nav-link:hover{
  background:#edf3f9;
  border-color:#d5e0eb;
  color:#102132;
}

.nav-item.active,
.app-nav-link.is-active{
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,246,251,.92));
  color:#0e2240;
  font-weight:700;
  box-shadow:var(--shadow-soft);
  transform:translateX(2px);
}

html.theme-light .nav-item.active,
html.theme-light .app-nav-link.is-active,
body.theme-light .nav-item.active,
body.theme-light .app-nav-link.is-active{
  background:linear-gradient(135deg, #102132, #173657);
  color:#ffffff;
}

/* =========================
   BRANDING
   ========================= */

.login-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(5,17,33,.22);
  overflow:visible;
}

html.theme-light .login-brand,
body.theme-light .login-brand{
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
    rgba(255,255,255,.8);
}

.login-logo{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,.2))
    drop-shadow(0 0 22px rgba(25,183,196,.08));
}

.app-brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  padding:24px 20px 16px;
  border-bottom:1px solid var(--line);
}

.app-brand-copy{
  flex:1;
  min-width:0;
}

.app-brand-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.app-sidebar-theme{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 14px 4px;
  padding:13px 15px;
  border-radius:16px;
  color:var(--muted);
  border:1px solid transparent;
  transition:all .2s ease;
}

.app-sidebar-theme:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.06);
  color:var(--text);
}

.app-logo{
  width:58px;
  height:58px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    0 0 16px rgba(25,183,196,.08);
}

.app-brand-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--text);
}

.app-brand-subtitle{
  margin-top:3px;
  font-size:13px;
  color:var(--muted);
}

.app-sidebar-theme-copy{
  display:flex;
  align-items:center;
  min-width:0;
}

.app-sidebar-theme-copy strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:inherit;
}

.app-theme-emoji{
  display:inline-block;
  transform:rotate(180deg);
  transform-origin:center;
}

.app-sidebar-theme .app-theme-toggle-sidebar{
  width:auto;
  flex-shrink:0;
  justify-content:flex-end;
  padding:0;
  border-radius:999px;
  background:transparent;
  border:none;
  box-shadow:none;
}

html.theme-light .app-sidebar-theme,
body.theme-light .app-sidebar-theme{
  color:#1c3550;
}

html.theme-light .app-sidebar-theme:hover,
body.theme-light .app-sidebar-theme:hover{
  background:#edf3f9;
  border-color:#d5e0eb;
  color:#102132;
}

html.theme-light .app-sidebar-theme .app-theme-toggle-sidebar,
body.theme-light .app-sidebar-theme .app-theme-toggle-sidebar{
  background:transparent;
}

/* =========================
   MAIN
   ========================= */

.main,
.app-main{
  padding:0;
}

.page-header,
.app-header{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin:0;
  padding:18px 26px 14px;
  background:
    linear-gradient(180deg, rgba(8,26,49,.94), rgba(8,26,49,.78));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.app-header-copy{
  display:grid;
  gap:4px;
}

.app-header-label{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}

.page-header h2,
.app-title{
  margin:6px 0 10px;
  font-size:40px;
  line-height:1.04;
  letter-spacing:-0.03em;
  color:var(--text);
}

.page-header p,
.app-subtitle{
  margin:0;
  max-width:920px;
  color:var(--muted);
}

.app-subtitle.app-subtitle-compact{
  font-size:14px;
  line-height:1.35;
}

.app-page-context{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.app-inline-icon{
  flex-shrink:0;
}

.actions,
.app-header-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

html.theme-light .page-header,
html.theme-light .app-header,
body.theme-light .page-header,
body.theme-light .app-header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.90));
}

.app-header-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.app-burger{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-shrink:0;
}

html.theme-light .app-burger,
body.theme-light .app-burger{
  background:#eef3f8;
  border-color:#cfd9e5;
}

.app-burger span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--text);
}

.app-sidebar-backdrop{
  display:none;
}

/* =========================
   BUTTONS
   ========================= */

.btn,
.app-button{
  border:none;
  border-radius:18px;
  padding:13px 18px;
  cursor:pointer;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:hover,
.app-button:hover{
  transform:translateY(-1px);
}

.btn-primary,
.app-button{
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  color:#052235;
  font-weight:700;
  box-shadow:0 16px 36px rgba(25,183,196,.24);
}

.btn-primary:hover,
.app-button:hover{
  box-shadow:0 18px 40px rgba(25,183,196,.3);
}

html.theme-light .btn-primary,
html.theme-light .app-button,
body.theme-light .btn-primary,
body.theme-light .app-button{
  color:#ffffff;
  box-shadow:0 14px 28px rgba(16,167,184,.18);
}

.btn-secondary,
.app-button.secondary{
  background:rgba(255,255,255,.035);
  color:var(--text);
  border:1px solid var(--line-strong);
  box-shadow:none;
}

.btn-secondary:hover,
.app-button.secondary:hover{
  background:rgba(255,255,255,.06);
  box-shadow:none;
}

html.theme-light .btn-secondary,
html.theme-light .app-button.secondary,
body.theme-light .btn-secondary,
body.theme-light .app-button.secondary{
  background:#f3f7fb;
  color:#102132;
  border-color:#b9cadb;
}

html.theme-light .btn-secondary:hover,
html.theme-light .app-button.secondary:hover,
body.theme-light .btn-secondary:hover,
body.theme-light .app-button.secondary:hover{
  background:#e6eef7;
  border-color:#9fb6cc;
}

.full{
  width:100%;
}

.app-button.small{
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
}

/* =========================
   TOP PROJECT TOOLBAR
   ========================= */

.app-project-header{
  margin:0 26px;
  border-bottom:1px solid var(--line);
}

.app-project-header-inner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0 14px;
}

.app-project-tabsbar{
  position:sticky;
  top:0;
  z-index:80;
  margin:0 26px 18px;
  padding:18px 18px 18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    rgba(8,26,49,.56);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
}

html.theme-light .app-project-tabsbar,
body.theme-light .app-project-tabsbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)),
    rgba(255,255,255,.82);
}

.app-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  transition:all .2s ease;
  flex-shrink:0;
}

html.theme-light .app-theme-toggle,
body.theme-light .app-theme-toggle{
  background:#eef3f8;
  border-color:#cfd9e5;
}

.app-theme-toggle-track{
  position:relative;
  display:block;
  width:42px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

html.theme-light .app-theme-toggle-track,
body.theme-light .app-theme-toggle-track{
  background:#dce8f3;
}

.app-theme-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  transition:transform .2s ease;
}

.app-theme-toggle.is-light .app-theme-toggle-thumb{
  transform:translateX(20px);
}

.app-project-tabsbar .app-tabs{
  width:100%;
}

.app-theme-toggle-sidebar{
  display:inline-flex;
}

/* =========================
   PANELS / CARDS
   ========================= */

.app-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(25,183,196,.02));
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:20px;
  box-shadow:var(--shadow);
}

html.theme-light .app-card,
body.theme-light .app-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(16,167,184,.02));
}

.app-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,107,255,.06), transparent 70%);
  pointer-events:none;
}

.app-card h2{
  position:relative;
  z-index:1;
  margin:0 0 6px;
  font-size:22px;
  color:var(--text);
}

.app-card-header{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

.app-card-note{
  color:var(--soft);
  font-size:13px;
}

/* =========================
   APP GRID
   ========================= */

.app-grid{
  display:grid;
  gap:16px;
  margin:0 26px 16px;
}

.app-grid-single{
  grid-template-columns:1fr;
}

/* =========================
   DASHBOARD
   ========================= */

.app-dashboard-header-copy{
  display:grid;
  gap:6px;
}

.app-dashboard-kicker{
  display:inline-flex;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-soft);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-dashboard-title{
  margin:0;
  font-size:34px;
  line-height:1.02;
  letter-spacing:-0.04em;
}

.app-dashboard-filters{
  margin:18px 26px 16px;
}

.app-dashboard-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    rgba(8,26,49,.44);
  box-shadow:var(--shadow-soft);
}

.app-dashboard-filter-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.app-dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0 26px 16px;
}

.app-kpi-card{
  display:grid;
  gap:8px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(8,26,49,.38);
  box-shadow:var(--shadow-soft);
}

.app-kpi-card strong{
  font-size:30px;
  line-height:1;
  letter-spacing:-0.03em;
}

.app-kpi-card span{
  color:var(--muted);
  font-size:14px;
}

.app-kpi-label{
  color:var(--soft);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

.app-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0 26px 20px;
}

.app-insight-list{
  display:grid;
  gap:12px;
}

.app-insight-item{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.app-insight-item strong{
  font-size:18px;
  color:var(--text);
}

.app-insight-item span{
  color:var(--muted);
}

.app-bar-list{
  display:grid;
  gap:14px;
}

.app-bar-row{
  display:grid;
  gap:8px;
}

.app-bar-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--text-soft);
}

.app-bar-track{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}

.app-bar-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
}

.app-segment-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.app-segment-card{
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.app-segment-card span{
  color:var(--muted);
}

.app-segment-card strong{
  font-size:22px;
}

.app-stat-pairs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.app-stat-pairs > div{
  display:grid;
  gap:6px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.app-stat-pairs span{
  color:var(--muted);
}

.app-stat-pairs strong{
  font-size:22px;
  color:var(--text);
}

/* =========================
   APP META / FORMS / TABLES
   ========================= */

.app-meta-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  position:relative;
  z-index:1;
}

.app-meta-grid > div{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

html.theme-light .app-meta-grid > div,
body.theme-light .app-meta-grid > div{
  background:rgba(16,33,50,.02);
}

.app-meta-grid span{
  display:block;
  margin-bottom:6px;
  color:var(--soft);
  font-size:13px;
}

.app-meta-grid strong{
  color:var(--text);
  font-size:15px;
}

.app-token-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);
  gap:16px;
  padding:18px;
  margin:2px 0 18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(45,212,191,.18), transparent 42%),
    linear-gradient(135deg, rgba(20,37,58,.92), rgba(10,24,43,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.app-token-hero-copy{
  display:grid;
  gap:8px;
  align-content:start;
}

.app-token-kicker{
  display:inline-flex;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--soft);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-token-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.app-token-kicker-status{
  background:rgba(45,212,191,.16);
  color:#d8fffb;
}

.app-token-hero-copy strong{
  font-size:32px;
  line-height:1.05;
  color:var(--text);
}

.app-token-hero-copy p{
  margin:0;
  max-width:52ch;
  color:var(--soft);
}

.app-token-hero-subline{
  display:grid;
  gap:6px;
}

.app-token-hero-subline strong{
  display:block;
  font-size:44px;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--text);
}

.app-token-hero-subline p{
  margin:0;
  max-width:40ch;
}

.app-token-hero-meta{
  display:grid;
  gap:12px;
}

.app-token-hero-meta > div{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}

.app-token-hero-meta span{
  display:block;
  margin-bottom:6px;
  color:var(--soft);
  font-size:13px;
}

.app-token-hero-meta strong{
  color:var(--text);
  font-size:18px;
}

.app-token-hero-active{
  background:
    radial-gradient(circle at top left, rgba(45,212,191,.22), transparent 42%),
    linear-gradient(135deg, rgba(18,53,65,.94), rgba(10,28,43,.82));
}

.app-token-hero-pending_confirmation,
.app-token-hero-awaiting_input{
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.2), transparent 42%),
    linear-gradient(135deg, rgba(49,39,15,.9), rgba(24,26,37,.82));
}

.app-token-hero-invalid{
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.2), transparent 42%),
    linear-gradient(135deg, rgba(59,24,24,.92), rgba(30,20,30,.8));
}

html.theme-light .app-token-hero,
body.theme-light .app-token-hero{
  border-color:rgba(18,39,61,.08);
  background:
    radial-gradient(circle at top left, rgba(45,212,191,.14), transparent 42%),
    linear-gradient(135deg, rgba(247,251,255,.95), rgba(236,244,251,.92));
}

html.theme-light .app-token-kicker,
body.theme-light .app-token-kicker{
  background:rgba(14,165,168,.1);
  color:#21535b;
}

html.theme-light .app-token-kicker-status,
body.theme-light .app-token-kicker-status{
  background:rgba(17,111,74,.12);
  color:#116f4a;
}

html.theme-light .app-token-hero-meta > div,
body.theme-light .app-token-hero-meta > div{
  background:rgba(255,255,255,.72);
  border-color:rgba(18,39,61,.08);
}

.app-form{
  position:relative;
  z-index:1;
}

.app-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.app-field{
  display:grid;
  gap:8px;
}

.app-field span{
  color:var(--soft);
  font-size:14px;
}

.app-field input,
.app-field textarea,
.app-field select{
  width:100%;
  background:rgba(5,17,33,.34);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
  outline:none;
}

html.theme-light .app-field input,
html.theme-light .app-field textarea,
html.theme-light .app-field select,
body.theme-light .app-field input,
body.theme-light .app-field textarea,
body.theme-light .app-field select{
  background:rgba(255,255,255,.94);
}

.app-field textarea{
  resize:vertical;
  min-height:110px;
}

.app-field input:focus,
.app-field textarea:focus,
.app-field select:focus{
  border-color:rgba(25,183,196,.34);
  box-shadow:0 0 0 4px rgba(25,183,196,.10);
}

.app-field input:disabled,
.app-field textarea:disabled,
.app-field select:disabled{
  opacity:.7;
  cursor:not-allowed;
}

.app-field-full{
  grid-column:1 / -1;
}

.app-deploy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.app-deploy-card{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

html.theme-light .app-deploy-card,
body.theme-light .app-deploy-card{
  background:rgba(16,33,50,.02);
}

.app-deploy-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.app-deploy-card-head h3{
  margin:0 0 6px;
  font-size:18px;
}

.app-deploy-card-head p{
  margin:0;
  color:var(--soft);
}

.app-deploy-codebox{
  display:grid;
  gap:10px;
}

.app-deploy-code{
  width:100%;
  min-height:132px;
  resize:vertical;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(5,17,33,.52);
  color:var(--text);
  font:500 13px/1.55 "Consolas","SFMono-Regular","Menlo","Monaco",monospace;
}

html.theme-light .app-deploy-code,
body.theme-light .app-deploy-code{
  background:rgba(255,255,255,.96);
  border-color:rgba(18,39,61,.08);
}

.app-copy-button{
  justify-self:start;
}

.app-copy-button.is-success{
  background:rgba(17,111,74,.18);
  border-color:rgba(17,111,74,.28);
  color:#d8ffea;
}

html.theme-light .app-copy-button.is-success,
body.theme-light .app-copy-button.is-success{
  color:#116f4a;
}

.app-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  color:var(--text-soft);
}

.app-checkbox.is-disabled{
  opacity:.55;
}

.app-checkbox-primary{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border-color:var(--line-strong);
}

html.theme-light .app-checkbox,
body.theme-light .app-checkbox{
  background:rgba(16,33,50,.02);
}

html.theme-light .app-checkbox-primary,
body.theme-light .app-checkbox-primary{
  background:rgba(16,33,50,.05);
}

.app-checkbox input{
  width:18px;
  height:18px;
  accent-color:var(--accent-blue);
}

.app-setting-stack{
  display:grid;
  gap:10px;
}

.app-setting-panel{
  display:grid;
  gap:10px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.app-setting-panel.is-disabled{
  opacity:.55;
}

.app-setting-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--soft);
}

.app-segmented-control{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.app-segment-option{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.app-segment-option input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.app-segment-option span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text-soft);
  font-weight:700;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.app-segment-option input:checked + span{
  background:rgba(14,165,168,.18);
  border-color:rgba(14,165,168,.44);
  color:var(--text);
  transform:translateY(-1px);
}

html.theme-light .app-setting-panel,
body.theme-light .app-setting-panel{
  background:rgba(16,33,50,.03);
}

html.theme-light .app-segment-option span,
body.theme-light .app-segment-option span{
  background:rgba(16,33,50,.02);
}

html.theme-light .app-segment-option input:checked + span,
body.theme-light .app-segment-option input:checked + span{
  background:rgba(14,165,168,.12);
}

.app-form-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.app-suggestion-input{
  margin-bottom:10px;
}

.app-locked-note{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,213,138,.08);
  border:1px solid rgba(255,213,138,.18);
  color:var(--warning);
  font-size:13px;
}

.app-settings-group{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}

.app-settings-subgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.app-settings-hint{
  margin:0;
  color:var(--soft);
  font-size:13px;
  line-height:1.5;
}

.app-alert{
  margin:0 26px 16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
}

html.theme-light .app-alert,
body.theme-light .app-alert{
  background:rgba(255,255,255,.92);
}

.app-alert.success{
  border-color:rgba(143,227,177,.24);
  background:rgba(143,227,177,.10);
  color:var(--success);
}

.app-alert.error{
  border-color:rgba(255,120,120,.24);
  background:rgba(255,120,120,.10);
  color:var(--danger);
}

.app-empty-state{
  padding:18px;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  color:var(--muted);
  background:rgba(255,255,255,.02);
}

html.theme-light .app-empty-state,
body.theme-light .app-empty-state{
  background:rgba(255,255,255,.88);
}

.app-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.015);
  position:relative;
  z-index:1;
}

html.theme-light .app-table-wrap,
body.theme-light .app-table-wrap{
  background:rgba(255,255,255,.92);
}

.app-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}

.app-table thead th{
  text-align:left;
  padding:14px 16px;
  background:rgba(255,255,255,.045);
  color:var(--soft);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

html.theme-light .app-table thead th,
body.theme-light .app-table thead th{
  background:rgba(16,33,50,.04);
}

.app-table tbody td{
  padding:14px 16px;
  border-top:1px solid var(--line);
  color:var(--text-soft);
  vertical-align:middle;
}

.app-table-primary{
  display:grid;
  gap:3px;
}

.app-table-primary strong{
  color:var(--text);
  font-size:15px;
}

.app-table-primary span{
  font-size:12px;
  color:var(--muted);
}

.app-table-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--text);
  font-size:13px;
  font-weight:600;
}

.app-table-domain{
  color:var(--text);
}

.app-table code{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:10px;
  font-size:12px;
}

html.theme-light .app-table code,
body.theme-light .app-table code{
  background:rgba(16,33,50,.04);
}

html.theme-light .app-table-pill,
body.theme-light .app-table-pill{
  background:rgba(16,33,50,.04);
  border-color:rgba(16,33,50,.08);
}

.app-status-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
}

.app-status-badge.status-active{
  background:rgba(143,227,177,.10);
  border-color:rgba(143,227,177,.18);
  color:var(--success);
}

.app-status-badge.status-inactive{
  background:rgba(255,178,184,.10);
  border-color:rgba(255,178,184,.18);
  color:var(--danger);
}

.app-status-badge.status-draft{
  background:rgba(255,213,138,.10);
  border-color:rgba(255,213,138,.18);
  color:var(--warning);
}

.app-status-badge.status-unknown{
  background:rgba(255,255,255,.06);
  border-color:var(--line);
  color:var(--text-soft);
}

html.theme-light .app-status-badge.status-unknown,
body.theme-light .app-status-badge.status-unknown{
  background:rgba(16,33,50,.05);
}

/* =========================
   LOGIN
   ========================= */

.login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 12% 14%, rgba(25,183,196,.16), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(247,155,26,.10), transparent 18%),
    radial-gradient(circle at bottom right, rgba(143,107,255,.10), transparent 20%),
    linear-gradient(180deg, #091b32, var(--bg));
}

.login-body.theme-light{
  background:
    radial-gradient(circle at 12% 14%, rgba(16,167,184,.16), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(245,154,26,.10), transparent 18%),
    radial-gradient(circle at bottom right, rgba(133,101,242,.10), transparent 22%),
    linear-gradient(180deg, #f9fcff, #edf4fb);
}

.login-wrap{
  width:100%;
  max-width:430px;
}

.login-card{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(25,183,196,.05), rgba(247,155,26,.03));
  border:1px solid var(--line);
  border-radius:30px;
  padding:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
}

html.theme-light .login-card,
body.theme-light .login-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.94)),
    linear-gradient(180deg, rgba(16,167,184,.05), rgba(245,154,26,.03));
}

.login-card h1{
  margin:0;
  font-size:34px;
  letter-spacing:-0.03em;
  line-height:1.02;
}

.login-card p{
  margin:0;
  color:var(--muted);
}

.login-form{
  display:grid;
  gap:14px;
}

.login-form label{
  display:grid;
  gap:7px;
}

.login-form span{
  color:var(--soft);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.login-form input{
  background:rgba(5,17,33,.38);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:16px;
  min-height:54px;
  padding:14px 16px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

html.theme-light .login-form input,
body.theme-light .login-form input{
  background:rgba(255,255,255,.98);
}

.login-form input:focus{
  border-color:rgba(25,183,196,.34);
  box-shadow:0 0 0 4px rgba(25,183,196,.10);
  transform:translateY(-1px);
}

.alert{
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,120,120,.24);
  background:rgba(255,120,120,.10);
  color:var(--danger);
}

.login-brand{
  display:flex;
  justify-content:center;
  margin-bottom:2px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}

.login-logo{
  max-width:150px;
  width:100%;
  filter:none;
}

.login-eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html.theme-light .login-eyebrow,
body.theme-light .login-eyebrow{
  background:#f3f7fb;
  color:#24415d;
}

.login-submit{
  min-height:54px;
  margin-top:4px;
  font-size:15px;
}

.login-card-success{
  justify-items:center;
  text-align:center;
  padding-top:30px;
  padding-bottom:30px;
}

.login-success{
  display:grid;
  justify-items:center;
  gap:12px;
}

.login-success-ring{
  position:relative;
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18) 0, rgba(255,255,255,.04) 58%, transparent 60%),
    linear-gradient(135deg, rgba(25,183,196,.28), rgba(143,227,177,.34));
  border:1px solid rgba(143,227,177,.34);
  box-shadow:0 18px 40px rgba(25,183,196,.22);
  animation:loginPulse .9s ease-out both;
}

.login-success-check{
  position:relative;
  width:28px;
  height:16px;
  border-left:4px solid #ffffff;
  border-bottom:4px solid #ffffff;
  transform:rotate(-45deg) translate(2px, -1px);
}

.login-card-success .login-eyebrow{
  background:rgba(143,227,177,.10);
  border-color:rgba(143,227,177,.22);
  color:var(--success);
}

.login-card-success h1{
  font-size:30px;
}

@keyframes loginPulse{
  0%{
    opacity:0;
    transform:scale(.84);
    box-shadow:0 0 0 rgba(25,183,196,0);
  }
  70%{
    opacity:1;
    transform:scale(1.03);
    box-shadow:0 24px 54px rgba(25,183,196,.26);
  }
  100%{
    transform:scale(1);
  }
}

/* =========================
   PROJECT TABS
   ========================= */

.app-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
}

.app-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(255,255,255,.02);
  color:var(--text-soft);
  font-weight:600;
  letter-spacing:.01em;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.app-tab-icon{
  flex-shrink:0;
}

.app-tab:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(255,255,255,.03);
  border-color:var(--line-strong);
  color:var(--text);
  transform:translateY(-1px);
}

.app-tab.is-active{
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  color:#052235;
  font-weight:700;
  border-color:transparent;
  box-shadow:
    0 14px 30px rgba(25,183,196,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.app-tab.is-active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:rgba(5,34,53,.22);
}

html.theme-light .app-tab,
body.theme-light .app-tab{
  background:#f3f7fb;
  border-color:#ccd8e6;
  color:#19324a;
}

html.theme-light .app-tab:hover,
body.theme-light .app-tab:hover{
  background:#e8f0f8;
  border-color:#b7c9dc;
  color:#102132;
}

html.theme-light .app-tab.is-active,
body.theme-light .app-tab.is-active{
  background:linear-gradient(135deg, #102132, #1d4467);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(16,33,50,.16);
}

html.theme-light .app-tab.is-active::after,
body.theme-light .app-tab.is-active::after{
  background:rgba(255,255,255,.28);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1180px){
  .app-shell{
    grid-template-columns:1fr;
  }

  .app-token-hero{
    grid-template-columns:1fr;
  }

  .app-dashboard-filter-grid,
  .app-dashboard-kpis,
  .app-dashboard-grid{
    grid-template-columns:1fr;
  }

  .app-segment-grid,
  .app-stat-pairs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .app-sidebar{
    position:fixed;
    top:0;
    left:0;
    z-index:130;
    width:min(300px, calc(100vw - 28px));
    height:100vh;
    border-right:1px solid var(--line);
    border-bottom:none;
    box-shadow:var(--shadow);
    transform:translateX(calc(-100% - 24px));
    transition:transform .24s ease;
    overflow-y:auto;
  }

  .app-sidebar.is-open{
    transform:translateX(0);
  }

  .app-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:120;
    background:rgba(7,20,36,.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
  }

  .app-sidebar-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .app-form-grid,
  .app-meta-grid{
    grid-template-columns:1fr;
  }

  .app-card-header{
    align-items:flex-start;
  }

  .app-burger{
    display:flex;
  }

  .app-project-header,
  .app-project-tabsbar{
    margin-left:18px;
    margin-right:18px;
  }

  .app-project-header-inner{
    padding-top:14px;
    padding-bottom:12px;
  }

  .app-nav{
    padding:12px;
  }

  .app-nav-link{
    margin-bottom:2px;
    padding:11px 12px;
    border-radius:14px;
    font-size:15px;
    font-weight:600;
  }
}

@media (max-width: 760px){
  .app-deploy-grid{
    grid-template-columns:1fr;
  }

  .app-deploy-card-head{
    flex-direction:column;
  }

  .app-settings-subgrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .login-body{
    padding:16px;
    align-items:center;
  }

  .login-wrap{
    max-width:100%;
  }

  .login-card{
    gap:16px;
    padding:20px;
    border-radius:24px;
  }

  .login-card h1{
    font-size:28px;
  }

  .login-logo{
    max-width:128px;
  }

  .app-main{
    padding:0;
  }

  .app-title{
    font-size:30px;
  }

  .app-brand{
    padding:20px 18px 14px;
  }

  .app-logo{
    width:50px;
    height:50px;
  }

  .app-brand-title{
    font-size:21px;
  }

  .app-card,
  .login-card{
    padding:16px;
    border-radius:22px;
  }

  .app-dashboard-title{
    font-size:28px;
  }

  .app-dashboard-filters,
  .app-dashboard-kpis,
  .app-dashboard-grid{
    margin-left:18px;
    margin-right:18px;
  }

  .app-dashboard-filter-grid{
    padding:14px;
  }

  .app-dashboard-filter-actions{
    align-items:stretch;
  }

  .app-dashboard-filter-actions .app-button{
    width:100%;
  }

  .app-kpi-card strong{
    font-size:26px;
  }

  .app-segment-grid,
  .app-stat-pairs{
    grid-template-columns:1fr;
  }

  .app-project-tabsbar{
    top:0;
    border-radius:18px;
    padding:14px;
  }

  .app-theme-switch{
    width:100%;
    justify-content:space-between;
  }

  .app-theme-option{
    flex:1;
  }

  .app-tabs{
    gap:6px;
    width:100%;
    flex-wrap:wrap;
  }

  .app-tab{
    min-height:40px;
    padding:9px 11px;
    border-radius:13px;
    font-size:13px;
    white-space:nowrap;
  }

  .app-header-copy{
    gap:2px;
  }

  .app-header-label{
    font-size:15px;
  }

  .app-subtitle.app-subtitle-compact{
    font-size:12px;
  }

  .app-grid,
  .app-alert{
    margin-left:18px;
    margin-right:18px;
  }

  .app-project-tabsbar{
    margin-bottom:14px;
  }

  .app-button.secondary{
    min-height:44px;
    padding:10px 14px;
  }
}

.app-assistant-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
  padding-bottom:6px;
}

.app-assistant-steps::-webkit-scrollbar{
  height:8px;
}

.app-assistant-steps::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.26);
  border-radius:999px;
}

.app-assistant-filter-grid{
  grid-template-columns:minmax(280px,1fr) minmax(280px,1fr) auto;
}

.app-assistant-step{
  min-width:0;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.26);
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.app-assistant-step strong{
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}

.app-assistant-step > span:last-child{
  min-width:0;
  white-space:normal;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.app-assistant-step.is-done{
  border-color:rgba(52,211,153,.36);
  background:linear-gradient(135deg, rgba(16,185,129,.16), rgba(52,211,153,.10));
}

.app-assistant-step:hover{
  transform:translateY(-1px);
  text-decoration:none;
  border-color:rgba(34,211,238,.42);
}

.app-assistant-step.is-active{
  border-color:rgba(34,211,238,.55);
  background:linear-gradient(135deg, rgba(14,165,168,.22), rgba(34,211,238,.12));
  box-shadow:0 16px 40px rgba(5,20,35,.18);
}

.app-assistant-step-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  font-size:20px;
}

.app-assistant-progress-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.app-assistant-progress-head strong{
  display:block;
  font-size:18px;
}

.app-assistant-progress-head span{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.app-assistant-progress-track{
  margin-top:16px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.16);
}

.app-assistant-progress-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent-blue), #34d399);
  box-shadow:0 10px 24px rgba(25,183,196,.24);
}

.app-assistant-steps-inline{
  margin-top:18px;
}

.app-field-hint{
  display:block;
  margin-top:8px;
  color:var(--soft);
  font-size:12px;
  line-height:1.45;
}

html.theme-light .app-assistant-step{
  background:#f8fbff;
  border-color:#d7e3ef;
}

html.theme-light .app-assistant-step.is-active{
  background:linear-gradient(135deg, rgba(14,165,168,.16), rgba(34,211,238,.12));
}

html.theme-light .app-assistant-step.is-done{
  border-color:rgba(22,163,74,.24);
  background:linear-gradient(135deg, rgba(22,163,74,.12), rgba(52,211,153,.10));
}

@media (max-width: 1180px){
  .app-assistant-filter-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px){
  .app-assistant-progress-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .app-assistant-steps{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  }

  .app-assistant-step{
    gap:10px;
    padding:14px 14px;
    align-items:flex-start;
  }

  .app-assistant-filter-grid{
    grid-template-columns:1fr;
  }
}