/* Core UI styles for USlides — Dark theme with orange accents */
:root{
  /* Dark palette (мягкий черный + панели + полупрозрачные границы) */
  --u-bg: #121212;            /* Background: почти черный */
  --u-bg-alt: #151515;        /* Background: альтернативный */
  --u-paper: #1C1C1C;         /* Panels / cards: чуть светлее фона */
  --u-soft: rgba(255,255,255,.04);   /* Мягкие поверхности */
  --u-soft-2: rgba(255,255,255,.06); /* Границы: полупрозрачный светлый */

  /* Текст */
  --u-ink: #E6E6E6;           /* Primary text: не белый */
  --u-muted: #B8B8B8;         /* Secondary text (основной вторичный текст, описания) */
  --u-muted-dim: #888888;     /* Muted / helper (метаинформация, очень вторичное) */
  --u-line: rgba(255,255,255,.06);  /* Borders */

  /* Accent: оранжевый (только для активных состояний) */
  --u-accent: #DB714F;
  --u-accent-hover: #E88659;

  /* Shadows для темного UI */
  --u-shadow-1: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --u-shadow-2: 0 1px 0 rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.45);

  --u-focus: 0 0 0 .25rem rgba(219,113,79,.2);

  /* Typography + radius */
  --u-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --u-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --u-r-lg: 22px;
  --u-r-md: 14px;
  --u-r-sm: 10px;
}

/* ================================
   Reset & Base Styles
================================ */

*{ box-sizing: border-box; }
html, body { height: 100%; min-height: 100%; }

html{ 
  background: var(--u-bg);
}

body{
  margin: 0;
  font-family: var(--u-font-sans);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(219,113,79,.08), transparent 60%),
    var(--u-bg);
  color: var(--u-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .8; }

/* ================================
   Typography & Utils
================================ */

.u-mono{ font-family: var(--u-font-mono); }

.u-kicker{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-muted);
}

.text-muted{
  color: var(--u-muted) !important;
}

.u-title{
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.u-hr{ 
  height: 1px; 
  background: var(--u-line); 
  opacity: .8; 
}

/* ================================
   Layout & Containers
================================ */

.u-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.u-topbar{
  background: rgba(28,28,28,.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--u-line);
  box-shadow: var(--u-shadow-1);
}

.u-topbar__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.u-topbar__avatar-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: transform .2s ease;
}

.u-topbar__avatar-link:hover .u-avatar{
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px rgba(219,113,79,.25);
  transform: translateY(-1px);
}

.u-topbar .text-muted{
  color: var(--u-muted) !important;
}

.u-topbar__inner{
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.u-panel{
  background: var(--u-paper);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-lg);
  box-shadow: var(--u-shadow-1);
}

.u-panel__body{ padding: 18px; }

.u-panel--build{
  max-width: 520px;
}

.u-panel--pipeline{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.u-avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--u-soft-2);
  border: 1px solid var(--u-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--u-accent);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.u-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u-avatar img + i{
  display: none;
}

/* ================================
   Surfaces & Cards
================================ */

.u-surface,
.u-dropzone,
.u-stepper,
.u-loader,
.u-alert,
.u-preview,
.u-preview-empty,
.u-preview-card,
.u-slide,
.u-tpl,
.u-preview-frame,
.u-build-preview,
.u-footer,
.u-navlink,
.u-pill,
.u-metric{
  background: var(--u-paper);
  border-color: var(--u-line);
}

/* ================================
   Forms & Inputs
================================ */

.form-control, .form-select{
  background: var(--u-paper);
  border: 1px solid var(--u-line);
  border-radius: 12px;
  color: var(--u-ink);
  padding: .6rem .8rem;
}

.form-control::placeholder{ 
  color: rgba(230,230,230,.45);
}

.form-control:focus, .form-select:focus{
  background: var(--u-paper);
  border-color: rgba(219,113,79,.6);
  box-shadow: var(--u-focus);
  outline: none;
  color: var(--u-ink);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-control:-internal-autofill-selected {
  background-color: var(--u-paper) !important;
  color: var(--u-ink) !important;
  box-shadow: inset 0 0 0px 1000px var(--u-paper) !important;
  -webkit-text-fill-color: var(--u-ink) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.input-group .btn,
#toggle-password {
  border: 1px solid var(--u-line);
  border-radius: 12px;
  color: var(--u-ink);
  background: transparent;
}

.input-group .btn:focus-visible,
#toggle-password:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(219,113,79,.25);
}

.u-select{ position: relative; }

.u-select .form-select{
  padding-right: 2.4rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}

.u-select:after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--u-muted-dim);
  border-bottom: 2px solid var(--u-muted-dim);
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
  opacity:.7;
}

.u-dropzone{
  border: 1px dashed var(--u-line);
  border-radius: var(--u-r-md);
  padding: 14px;
}

.u-stepper{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--u-r-md);
  border: 1px solid var(--u-line);
}

.u-stepper__value{
  min-width: 48px;
  text-align: center;
  font-weight: 700;
}

/* ================================
   Pipeline & Stepper
================================ */

.u-pipeline{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 10px;
  padding-top: 18px;
}

.u-pipeline:before{
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: 37px;
  height: 2px;
  background: transparent;
  border-radius: 999px;
  z-index: 1;
}

.u-pipeline__step{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.u-pipeline__dot{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid var(--u-line);
  background: var(--u-paper);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--u-muted-dim);
  z-index: 2;
}

.u-pipeline__label{
  font-size: .9rem;
  font-weight: 600;
  color: var(--u-muted);
}

/* Active/done dots: orange underline only */
.u-pipeline__step--done{
  color: var(--u-ink);
}

.u-pipeline__step--done .u-pipeline__dot{
  border-color: var(--u-accent);
  background: rgba(219,113,79,.12);
  box-shadow: 0 0 0 4px rgba(219,113,79,.08);
  color: var(--u-accent);
}

.u-pipeline__step--active{
  color: var(--u-ink);
}

.u-pipeline__step--active .u-pipeline__dot{
  border-color: var(--u-accent);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(219,113,79,.08);
  color: var(--u-accent);
}

/* ================================
   Buttons
================================ */

.btn{
  border-radius: 12px;
  padding: .6rem .9rem;
  border: 1px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
  font-weight: 500;
}

.btn-u-primary{
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: #fff;
}

.btn-u-primary:hover{
  background: var(--u-accent-hover);
  border-color: var(--u-accent-hover);
}

.btn-u-secondary{
  background: var(--u-paper);
  border-color: var(--u-line);
  color: var(--u-ink);
}

.btn-u-secondary:hover{ 
  background: rgba(255,255,255,.08);
  border-color: var(--u-line);
}

.btn-u-ghost{
  background: transparent;
  border-color: var(--u-line);
  color: var(--u-ink);
}

.btn-u-ghost:hover{ 
  background: rgba(255,255,255,.05);
  border-color: var(--u-line);
}

/* ================================
   Loaders & Alerts
================================ */

.u-loader{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--u-r-md);
  border: 1px dashed var(--u-line);
  background: var(--u-paper);
  margin-bottom: 12px;
}

.u-loader__spinner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--u-soft-2);
  border-top-color: var(--u-accent);
  animation: u-spin 1s linear infinite;
}

.u-loader__icon{
  display: none;
  font-size: 22px;
  color: var(--u-accent);
}

.u-loader--build.is-done .u-loader__spinner{
  display: none;
  animation: none;
}

.u-loader--build.is-done .u-loader__icon{
  display: block;
}

.u-loader--build{
  border-radius: var(--u-r-lg);
  border-color: var(--u-line);
  padding: 16px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.u-build-status-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.u-build-hint{
  color: var(--u-muted);
}

@keyframes u-spin{
  to { transform: rotate(360deg); }
}

.u-alert{
  border-radius: var(--u-r-md);
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  padding: 12px 14px;
}

.u-alert--warn{ 
  box-shadow: inset 0 0 0 1px rgba(219,113,79,.25);
}

.u-alert--ok{ 
  box-shadow: inset 0 0 0 1px var(--u-line);
}

/* ================================
   Accent Bar (微 accent, не фон)
================================ */

.u-accentbar{
  background: rgba(219,113,79,.08);
  border: 1px solid rgba(219,113,79,.25);
  border-radius: var(--u-r-lg);
  color: var(--u-ink);
  padding: 14px 16px;
}

.u-accentbar .u-kicker{ 
  color: var(--u-accent);
}

/* ================================
   Slides & Templates
================================ */

.u-slide{
  display: grid;
  grid-template-columns: 36px 1fr 240px 200px;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--u-r-md);
  border: 1px solid var(--u-line);
  background: var(--u-paper);
}

.u-slide + .u-slide{ margin-top: 10px; }

.u-slide__icon{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  display: grid;
  place-items: center;
  color: var(--u-muted);
  font-size: 14px;
}

.u-handle{
  width: 32px; height: 32px;
  border-radius: 12px;
  border: 1px solid var(--u-line);
  background: radial-gradient(var(--u-muted-dim) 1px, transparent 1px) 0 0/6px 6px;
  opacity: .5;
  cursor: grab;
}

.u-slide__title{ font-weight: 650; line-height: 1.1; }
.u-slide__meta{ font-size: .88rem; color: var(--u-muted); }
.u-slide__type{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.u-slide__actions{ display:flex; gap: 8px; justify-content:flex-end; }

/* Templates */
.u-tpl{
  border-radius: var(--u-r-lg);
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  padding: 14px;
  height: 100%;
  cursor: pointer;
  transition: background .15s ease, transform .10s ease, box-shadow .15s ease;
}

.u-tpl:hover{ background: rgba(255,255,255,.08); }
.u-tpl:active{ transform: translateY(1px); }

.u-tpl__thumb{
  height: 94px;
  border-radius: 18px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}

.u-tpl__thumb:after{
  content:"";
  position:absolute; inset: 14px 14px auto auto;
  width: 18px; height: 18px;
  border-top: 2px solid var(--u-muted-dim);
  border-right: 2px solid var(--u-muted-dim);
  opacity:.4;
}

.u-tpl__thumb--preview{ height: 140px; }
.u-tpl__thumb--image:after{ display: none; }

.u-tpl__thumb--preview,
.u-tpl__thumb--image{
  aspect-ratio: 16 / 9;
  height: auto;
}

.u-tpl__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u-tpl__name{ margin-top: 10px; font-weight: 700; }
.u-tpl__desc{ color: var(--u-muted); font-size: .9rem; }

.u-tpl__check{
  width: 28px; height: 28px;
  border-radius: 12px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  display: grid; place-items: center;
  font-weight: 800;
  color: var(--u-accent);
}

.u-tpl__toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
}

.u-tpl--selected{
  background: rgba(219,113,79,.12);
  box-shadow: inset 0 0 0 2px rgba(219,113,79,.4), var(--u-shadow-1);
}

.u-scroll-row{
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 6px 8px;
  margin-left: 0;
  margin-right: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.u-scroll-row > [class*="col-"]{
  padding-left: 0;
  padding-right: 0;
}

.u-scroll-row > *{
  flex: 0 0 auto;
  width: clamp(220px, 70vw, 320px);
  scroll-snap-align: start;
}

@media (min-width: 992px){
  .u-scroll-row > *{
    width: clamp(220px, 22vw, 280px);
  }
}

.u-scroll-row::-webkit-scrollbar{
  height: 8px;
}

.u-scroll-row::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.u-scroll-row::-webkit-scrollbar-track{
  background: transparent;
}

/* ================================
   Preview & Content
================================ */

.u-preview{
  border-radius: var(--u-r-lg);
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  overflow: hidden;
  --u-preview-short-side: clamp(96px, 16vw, 150px);
}

.u-preview__top{
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--u-line);
  display:flex; align-items:center; justify-content:space-between;
}

.u-preview__scroll{
  max-height: none;
  overflow: visible;
  padding: 14px;
}

.u-preview--content .u-preview__scroll{
  max-height: none;
}

.u-preview-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.u-preview-empty{
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed var(--u-line);
  background: rgba(255,255,255,.03);
  color: var(--u-muted);
  font-size: .95rem;
  text-align: center;
}

.u-preview-card{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
}

.u-preview-card--image-slide{
  grid-template-columns: 1fr;
  gap: 12px;
}

.u-preview-card--tesis{
  grid-template-columns: 1fr;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.u-preview-card__text--top{
  margin-bottom: 8px;
}

.u-preview-card__text--bottom{
  margin-top: 8px;
  gap: 4px;
}

.u-preview-card__media--horizontal{
  width: 100%;
  align-items: center;
  justify-content: center;
}

.u-preview-card__media--vertical{
  align-items: flex-end;
  justify-content: flex-end;
}

.u-preview-card__img--horizontal{
  width: min(100%, calc(var(--u-preview-short-side) * 16 / 6));
  height: auto;
  aspect-ratio: 16 / 6;
}

.u-preview-card__img--vertical{
  width: min(100%, var(--u-preview-short-side));
  height: auto;
  aspect-ratio: 9 / 16;
  flex-shrink: 0;
}

.u-preview-card__tesis-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
  padding: 0;
  border-top: none;
}

.u-preview-card__tesis-col{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

.u-preview-card__tesis{
  font-size: .9rem;
  line-height: 1.3;
  color: var(--u-ink);
}

.u-preview-card__text{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.u-preview-card__title{
  font-weight: 650;
  font-size: 1rem;
}

.u-preview-card__line{
  color: var(--u-ink);
  font-size: .92rem;
  line-height: 1.35;
}

.u-preview-card__comment{
  color: var(--u-muted);
  font-size: .86rem;
  font-style: italic;
}

.u-preview-card__media{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.u-preview-card__media--empty{
  opacity: 0.4;
}

.u-preview-card__img{
  width: 100%;
  height: 140px;
  border-radius: 16px;
  border: 1px dashed var(--u-line);
  background: rgba(219,113,79,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--u-muted-dim);
  font-size: .85rem;
  text-align: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.u-preview-card__img--ready{
  border-style: solid;
  background-color: rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
}

.u-preview-card__spinner{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.u-preview-card__refresh{
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  color: var(--u-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}

.u-preview-card__refresh:hover{
  background: rgba(255,255,255,.08);
}

.u-preview-card__img-text{
  padding: 0 10px;
}

@media (max-width: 900px){
  .u-preview-card{
    grid-template-columns: 1fr;
  }
  
  .u-preview-card__tesis-list{
    grid-template-columns: 1fr;
  }
}

.u-slide-thumb{
  border-radius: 16px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
  padding: 12px;
  margin-bottom: 12px;
}

.u-slide-thumb__h{
  height: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  width: 62%;
  margin-bottom: 10px;
}

.u-slide-thumb__l{
  height: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  width: 92%;
  margin-bottom: 8px;
}

.u-slide-thumb__l.w2{ width: 78%; }

.u-slide-thumb__img{
  height: 84px;
  border-radius: 14px;
  border: 1px solid var(--u-line);
  background: rgba(219,113,79,.1);
  margin-top: 10px;
}

/* ================================
   Public Pages & Footer
================================ */

body.u-public{
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(219,113,79,.08), transparent 60%),
    var(--u-bg);
  color: var(--u-ink);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.u-topbar--public{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(28,28,28,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--u-line);
  box-shadow: var(--u-shadow-1);
}

.u-brandmark{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--u-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .05em;
  border: 1px solid rgba(219,113,79,.4);
}

.u-logo{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(219,113,79,.4);
  background: rgba(219,113,79,.12);
}

.u-navlink{
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
  font-size: .92rem;
  transition: all .2s ease;
}

.u-navlink:hover{ 
  background: rgba(255,255,255,.08);
  border-color: rgba(219,113,79,.3);
}

.u-footer{
  margin-top: auto;
  padding: 28px 0 36px;
  border-top: 1px solid var(--u-line);
  background: rgba(18,18,18,.4);
}

.u-footer__links a{
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
  font-size: .85rem;
  transition: all .2s ease;
}

.u-footer__links a:hover{ 
  background: rgba(255,255,255,.08);
}

.u-public .u-panel__body p{ color: var(--u-muted); }

/* ================================
   Hero & Content
================================ */

.u-hero{ 
  padding: 40px 0 22px; 
}

.u-hero__title{
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  letter-spacing: -.02em;
  margin: 12px 0 12px;
  color: var(--u-ink);
}

.u-hero__lead{
  color: var(--u-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.u-hero-banner-full{
  width: 100%;
  padding: 0;
}

.u-hero-banner-inner{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.u-hero-banner{
  width: 100%;
}

.u-hero-features{
  margin-top: 32px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.u-hero-feature{
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-md);
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
}

.u-hero-feature__title{
  font-weight: 600;
  color: var(--u-ink);
  margin-bottom: 4px;
}

.u-hero-feature__desc{
  margin: 0;
  color: var(--u-muted);
  font-size: .9rem;
  line-height: 1.4;
}

.u-hero__stack{ 
  display: grid; 
  gap: 16px; 
}

/* ================================
   Hero Slider
================================ */

.u-hero-slider{ 
  position: relative; 
}

.u-hero-slider__slides{
  position: relative;
  min-height: 320px;
}

.u-hero-slider__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}

.u-hero-slider__slide.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.u-hero-slider__frame{
  min-height: 320px;
  border-radius: var(--u-r-lg);
  border: 1px solid var(--u-line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  background: rgba(28,28,28,.5);
  box-shadow: var(--u-shadow-2);
}

.u-hero-slider__frame::after{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: var(--u-r-md);
  border: 1px dashed rgba(255,255,255,.08);
  pointer-events: none;
}

.u-hero-slider__cap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.u-hero-slider__tag{
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--u-accent);
}

.u-hero-slider__meta{
  font-size: .78rem;
  color: var(--u-muted);
}

.u-hero-slider__title{
  font-size: 1.2rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.u-hero-slider__subtitle{
  color: var(--u-muted);
  font-size: .92rem;
  position: relative;
  z-index: 1;
}

.u-hero-slider__lines{
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.u-hero-slider__lines span{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.u-hero-slider__lines span.short{ 
  width: 70%; 
}

.u-hero-slider__image{
  margin-top: auto;
  height: 120px;
  border-radius: var(--u-r-md);
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.03);
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: var(--u-muted-dim);
  position: relative;
  z-index: 1;
}

.u-hero-slider__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.u-hero-slider__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--u-soft-2);
  transition: transform .4s ease, background .4s ease;
}

.u-hero-slider__dot.is-active{
  background: var(--u-accent);
  transform: scale(1.2);
}

/* ================================
   Pills & Metrics
================================ */

.u-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--u-muted);
}

.u-metric{
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--u-r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--u-line);
}

.u-metric__value{ 
  font-size: 1.2rem; 
  font-weight: 700;
  color: var(--u-ink);
}

.u-metric__label{ 
  font-size: .82rem; 
  color: var(--u-muted); 
}

/* ================================
   Sections & Features
================================ */

.u-section{ 
  padding: 28px 0; 
}

.u-section--build{
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.u-section__title{ 
  font-size: 1.4rem; 
  margin: 0 0 8px; 
  letter-spacing: -.01em; 
}

.u-feature{ 
  height: 100%; 
}

.u-feature__title{ 
  font-weight: 700; 
  margin: 8px 0 6px; 
}

.u-feature__text{ 
  color: var(--u-muted); 
  margin: 0; 
}

/* ================================
   Account
================================ */

.u-account{
  position: relative;
}

.u-account__shell{
  position: relative;
  padding: 20px;
  border-radius: calc(var(--u-r-lg) + 6px);
  background: linear-gradient(145deg, rgba(219,113,79,.12), rgba(255,255,255,.02));
  border: 1px solid var(--u-line);
  box-shadow: var(--u-shadow-1);
  overflow: hidden;
}

.u-account__shell::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(240px 140px at 10% 0%, rgba(219,113,79,.22), transparent 60%),
    radial-gradient(220px 140px at 100% 10%, rgba(255,255,255,.06), transparent 65%);
  opacity: .7;
  pointer-events: none;
}

.u-account__shell > *{
  position: relative;
  z-index: 1;
}

.u-account__profile .u-panel__body,
.u-account__usage .u-panel__body{
  padding: 24px;
}

.u-account__profile .u-panel__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.u-avatar--xl{
  width: 96px;
  height: 96px;
  font-size: 2.2rem;
}

.u-account__name{
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

.u-account__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.u-usage-bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

.u-usage-bar span{
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(219,113,79,.4), var(--u-accent));
  box-shadow: 0 0 12px rgba(219,113,79,.35);
  border-radius: inherit;
  transition: width .4s ease;
}

.u-account__limit-note{
  margin-top: 12px;
  font-size: .85rem;
}

@media (max-width: 991px){
  .u-account__shell{
    padding: 16px;
  }
}

@media (max-width: 575px){
  .u-account__profile .u-panel__body,
  .u-account__usage .u-panel__body{
    padding: 18px;
  }

  .u-avatar--xl{
    width: 76px;
    height: 76px;
    font-size: 1.8rem;
  }

  .u-account__name{
    font-size: 1.35rem;
  }
}

.u-price__tagline,
.u-pricing-note{
  color: var(--u-ink);
}

#pricing .text-muted{
  color: rgba(230,230,230,.78);
}

.u-steps{ 
  display: grid; 
  gap: 12px; 
}

.u-pricing{ 
  display: grid; 
  gap: 16px; 
}

.u-price{ 
  height: 100%; 
}

.u-price--alt{
  border-color: rgba(219,113,79,.4);
  background: rgba(219,113,79,.06);
}

/* ================================
   Other Components
================================ */

.u-highlight{
  border-radius: var(--u-r-lg);
  border: 1px solid rgba(219,113,79,.3);
  background: rgba(219,113,79,.08);
  padding: 12px 14px;
}

.u-preview-frame{
  border-radius: var(--u-r-lg);
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  padding: 14px;
}

.u-build-preview{
  min-height: 60vh;
  border-radius: var(--u-r-lg);
  border: 1px dashed var(--u-line);
  background: rgba(255,255,255,.02);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.u-build-preview--error{
  border-color: rgba(219,113,79,.4);
  background: rgba(219,113,79,.08);
}

.u-page-spacer{ 
  height: 18px; 
}

/* ================================
   Responsive Design
================================ */

@media (max-width: 992px){
  .u-slide{
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "h t"
      ". s"
      ". a";
  }
  .u-slide > :nth-child(1){ grid-area: h; }
  .u-slide > :nth-child(2){ grid-area: t; }
  .u-slide > :nth-child(3){ grid-area: s; }
  .u-slide > :nth-child(4){ grid-area: a; }
  .u-slide__actions{ justify-content:flex-start; }
}

@media (max-width: 991px){
  .u-navlink{ font-size: .86rem; }
}

@media (max-width: 767px){
  .u-topbar--public .u-nav{
    width: 100%;
    justify-content: center;
  }
  .u-pipeline{
    grid-template-columns: repeat(4, minmax(60px, 1fr));
    gap: 10px;
  }
  .u-pipeline__step{
    gap: 6px;
  }
  .u-pipeline__dot{
    width: 30px;
    height: 30px;
  }
  .u-pipeline__label{
    font-size: .7rem;
  }
  .u-pipeline:before{
    left: 16px;
    right: 16px;
    top: 30px;
  }
  .u-hero-slider__slides{ min-height: 260px; }
  .u-hero-slider__frame{ min-height: 260px; }
  .u-hero-slider__image{ height: 96px; }
}

/* ================================
   Landing polish (public)
================================ */

html { scroll-behavior: smooth; }

.u-landing-hero{
  padding: 56px 0 34px;
  min-height: calc(100vh - 78px); /* sticky header height approx */
  display: flex;
  align-items: center;
  position: relative;
}

.u-landing-hero__inner{
  display: grid;
  place-items: center;
  position: relative;
}

.u-landing-hero__center{
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 0;
}

.u-landing-hero__title{
  font-size: clamp(3rem, 7vw, 5.2rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.0;
}

.u-landing-hero__subtitle{
  margin: 0;
  color: var(--u-muted);
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  line-height: 1.5;
}

.u-landing-hero__anchors{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.u-landing-anchor{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.03);
  font-size: .92rem;
  color: var(--u-muted);
  transition: all .2s ease;
}

.u-landing-anchor:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(219,113,79,.3);
  color: var(--u-ink);
  opacity: 1;
}

.u-landing-section{
  padding: 56px 0;
}

.u-landing-section__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 18px;
}

.u-landing-section__title{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -.01em;
}

.u-landing-section__lead{
  margin: 0;
  color: var(--u-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.u-landing-section__grid{
  max-width: 980px;
  margin: 0 auto;
}

.u-landing-section__backtotop{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.u-landing-hero__scroll-hint{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.u-scroll-arrow{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.04);
  color: var(--u-muted);
  transition: all .3s ease;
  animation: scroll-bounce 2s infinite;
  pointer-events: auto;
}

.u-scroll-arrow:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(219,113,79,.4);
  color: var(--u-accent);
  animation: none;
}

.u-scroll-arrow--hidden{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.u-scroll-arrow svg{
  width: 20px;
  height: 20px;
}

@keyframes scroll-bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* ================================
   Side Menu
================================ */

.u-menu-toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--u-line);
  background: var(--u-paper);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: all .3s ease;
  padding: 0;
  display: flex;
  position: relative;
  z-index: 2;
}

.u-menu-toggle:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--u-accent);
}

.u-menu-toggle span{
  width: 20px;
  height: 2px;
  background: var(--u-ink);
  border-radius: 2px;
  transition: all .3s ease;
}

.u-menu-toggle.u-menu-toggle--hidden{
  opacity: 0;
  pointer-events: none;
}

.u-menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform: rotate(45deg) translateY(8px);
}

.u-menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}

.u-menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform: rotate(-45deg) translateY(-8px);
}

/* Side Menu Overlay */
.u-menu-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 997;
  opacity: 0;
  transition: opacity .3s ease;
}

.u-menu-overlay.is-open{
  display: block;
  opacity: 1;
}

/* Main Menu */
.u-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  background: var(--u-paper);
  border-left: 1px solid var(--u-line);
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
}

.u-menu.is-open{
  transform: translateX(0);
}

.u-menu__header{
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--u-line);
}

.u-menu__header a{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.u-menu__header .u-logo{
  width: 32px;
  height: 32px;
}

.u-menu__header .u-title{
  font-size: 1rem;
  margin: 0;
}

.u-menu__close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  color: var(--u-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
  font-size: 1.2rem;
  padding: 0;
}

.u-menu__close:hover{
  background: rgba(255,255,255,.1);
  color: var(--u-accent);
}

.u-menu__divider{
  height: 1px;
  background: var(--u-line);
  margin: 12px 0;
}

.u-menu__user-section{
  padding: 16px 20px;
}

.u-menu__user-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  color: inherit;
}

.u-menu__user-link:hover{
  border-color: rgba(219,113,79,.6);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
  text-decoration: none;
}

.u-menu__user-link .u-avatar{
  width: 48px;
  height: 48px;
}

.u-menu__user-details{
  min-width: 0;
}

.u-user-name{
  word-break: break-word;
  color: var(--u-ink);
}

.u-menu__section{
  padding: 12px 0;
}

.u-menu__label{
  padding: 8px 20px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-muted-dim);
  margin-bottom: 4px;
}

.u-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.u-menu__link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--u-ink);
  text-decoration: none;
  transition: all .2s ease;
  border-left: 3px solid transparent;
  font-weight: 500;
}

.u-menu__link:hover{
  background: rgba(255,255,255,.05);
  border-left-color: var(--u-accent);
  padding-left: 18px;
}

.u-menu__link:active{
  background: rgba(255,255,255,.08);
}

.u-menu__link--active{
  color: var(--u-accent);
  border-left-color: var(--u-accent);
  background: rgba(219,113,79,.1);
}

.u-menu__link--active:hover{
  padding-left: 20px;
}

.u-menu__link--danger{
  color: rgba(219,113,79,.8);
}

.u-menu__link--danger:hover{
  color: var(--u-accent);
  background: rgba(219,113,79,.1);
}

.u-menu__collapse{
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--u-line);
  background: rgba(255,255,255,.05);
  color: var(--u-ink);
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  margin-left: auto;
  padding: 0;
  font-size: 0.9rem;
}

.u-menu__collapse:hover{
  background: rgba(255,255,255,.1);
  color: var(--u-accent);
}

/* Desktop: Menu visible as sidebar (1200px+) */
@media (min-width: 1200px){
  .u-menu-toggle{
    display: flex;
  }

  .u-menu{
    position: fixed;
    right: 0;
    top: 0;
    width: 360px;
    height: 100vh;
    border-left: 1px solid var(--u-line);
    border-right: none;
    box-shadow: -8px 0 32px rgba(0,0,0,.35);
    transform: translateX(100%);
    z-index: 998;
    transition: transform .3s ease;
  }

  .u-page{
    margin-left: 0;
  }
}

/* Tablet & Mobile (< 1200px) */
@media (max-width: 1199px){
  .u-menu__close{
    display: flex;
  }

  .u-menu__collapse{
    display: none !important;
  }

  .u-menu{
    width: 360px;
  }

  .u-page{
    margin-left: 0;
  }
}

/* Mobile optimization */
@media (max-width: 767px){
  .u-menu-toggle{
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
  }

  .u-menu{
    width: 280px;
  }

  .u-menu__header{
    padding: 16px;
  }

  .u-menu__close{
    width: 36px;
    height: 36px;
  }
}