:root{
  --color-bg:#fdf8ff;
  --color-surface:#ffffff;
  --color-surface-muted:#f1e6ff;
  --color-border:#dacaf2;
  --color-text:#1c122a;
  --color-text-muted:#6f5c85;
  --color-primary:#e6469d;
  --color-primary-dark:#d73f8f;
  --color-secondary:#6f4bff;
  --color-tertiary:#00a8b5;
  --gradient-brand:linear-gradient(90deg,var(--color-primary),var(--color-secondary) 55%,var(--color-tertiary));
  --shadow-soft:0 24px 50px rgba(28,18,42,.08);
  --radius-card:24px;
  --radius-control:14px;
  --font-sans:"Roboto","Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font:16px/1.6 var(--font-sans);
  font-size-adjust:.55;
  -webkit-font-smoothing:antialiased;
}

h1{
  font-size:clamp(2.2rem,4vw,3.75rem);
  line-height:1.1;
  margin:0 0 .75rem;
}

section h1,
article h1{
  font-size:clamp(2.2rem,4vw,3.75rem);
}

body.legal-page{
  background:var(--color-surface);
}

.legal{
  max-width:900px;
  margin:0 auto;
  padding:5rem 1.5rem 4rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--color-surface-muted);
  color:var(--color-text);
  border:1px solid var(--color-border);
}

.legal-hero{
  background:var(--gradient-brand);
  color:#fff;
  padding:clamp(1.75rem,4vw,3.2rem);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  margin-bottom:2.75rem;
  position:relative;
  overflow:hidden;
}
.legal-hero::after{
  content:"";
  position:absolute;
  inset:auto -40% -80% 45%;
  width:60%;
  height:220%;
  background:radial-gradient(circle at top,rgba(255,255,255,.4),transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.legal-hero > *{
  position:relative;
  z-index:1;
}
.legal-hero h1{
  color:#fff;
  margin:.8rem 0 1rem;
}
.legal-hero p{
  color:rgba(255,255,255,.92);
  margin:0 0 1rem;
}
.legal-hero .chip{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
.legal-hero__meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.5rem 0 1.25rem;
}
.legal-hero__meta-item{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  border-radius:calc(var(--radius-card) / 1.6);
  padding:1rem 1.2rem;
  min-width:160px;
}
.legal-hero__meta-item span{
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(255,255,255,.8);
  margin-bottom:.35rem;
}
.legal-hero__meta-item strong{
  font-size:1.12rem;
}
.legal-link-pills{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.pill-link{
  text-decoration:none;
  font-weight:600;
  border-radius:999px;
  padding:.55rem 1.1rem;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  background:rgba(255,255,255,.15);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.pill-link:hover,
.pill-link:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.legal-highlights{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  margin-bottom:3rem;
}
.legal-highlight{
  background:var(--color-surface);
  border-radius:var(--radius-card);
  border:1px solid var(--color-border);
  padding:1.5rem;
  box-shadow:var(--shadow-soft);
}
.icon-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--color-surface-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  margin-bottom:.6rem;
}
.legal-highlight h3{
  margin:.35rem 0 .6rem;
  font-size:1.1rem;
}
.legal-highlight p{
  margin:0 0 1rem;
  color:var(--color-text-muted);
}
.legal-highlight a{
  font-weight:600;
  color:var(--color-primary);
  text-decoration:none;
}

.legal-article h1{
  margin:0 0 1.5rem;
  font-size:clamp(2rem,3vw,2.6rem);
}

.legal-article h2{
  margin:2.5rem 0 1rem;
  font-size:1.65rem;
}

.legal-article h3{
  margin:1.75rem 0 .75rem;
  font-size:1.25rem;
}

.legal-article p,
.legal-article ul,
.legal-article ol,
.legal-article address{
  color:var(--color-text-muted);
  margin:.75rem 0;
  line-height:1.7;
}

.legal-article ul,
.legal-article ol{
  padding-left:1.2rem;
}

.legal-article li + li{
  margin-top:.4rem;
}

.legal-article address{
  font-style:normal;
  border-left:3px solid var(--color-border);
  padding-left:1rem;
}

.legal-meta{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
  color:var(--color-text-muted);
  margin:0 0 .75rem;
}

.legal-intro{
  color:var(--color-text-muted);
  margin-bottom:1.5rem;
}

.table-wrapper{
  margin:1.5rem 0;
  overflow-x:auto;
}

.legal-article table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface);
  box-shadow:var(--shadow-soft);
  border-radius:16px;
  overflow:hidden;
}

.legal-article th,
.legal-article td{
  text-align:left;
  padding:1rem;
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);
}

.legal-article th{
  background:var(--color-surface-muted);
  font-weight:600;
}

.legal-article tbody tr:last-child td{
  border-bottom:0;
}a{color:var(--color-primary);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  background:var(--color-primary);
  color:#fff;
  padding:.875rem 1.25rem;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(230,70,157,.25);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover,
.btn:focus-visible{
  background:var(--color-primary-dark);
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(230,70,157,.28);
}
.btn:active{transform:translateY(0);box-shadow:0 10px 24px rgba(230,70,157,.22)}
.btn.btn-secondary{
  background:transparent;
  color:var(--color-primary);
  border-color:rgba(230,70,157,.6);
  box-shadow:none;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible{
  background:rgba(230,70,157,.1);
  color:var(--color-primary-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(230,70,157,.18);
}

.nav{
  position:sticky;
  top:0;
  background:rgba(253,248,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
  z-index:10;
  min-height:86px;
}
.nav-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:.9rem 1.2rem;
  margin:0 auto;
  width:100%;
  max-width:1200px;
}
.admin-header .nav-inner{
  max-width:1400px;
}
.admin-header__actions{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.admin-header__actions .btn{
  padding:.8rem 1.3rem;
  height:42px;
}
.menu{display:flex;gap:1rem;align-items:center}
.menu.menu--static{
  display:flex!important;
  position:static;
  width:auto;
  padding:0;
  box-shadow:none;
  border:0;
  background:transparent;
  flex-wrap:wrap;
  justify-content:center;
  row-gap:.4rem;
  column-gap:.6rem;
}
.menu.menu--static .btn{margin-left:0}
.menu a{color:var(--color-text);font-weight:500}
.menu .btn{margin-left:.6rem}
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--color-text);
  font-size:1.5rem;
  cursor:pointer;
}
.brand img{
  display:block;
  height:auto;
  width:auto;
  max-height:77px;
  max-width:289px;
}

.hero{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2.5rem;
  align-items:center;
  padding:5rem 1.2rem 3.5rem;
  max-width:1200px;
  margin:auto;
}
.hero h1{
  font-size:clamp(2.2rem,4vw,3.75rem);
  margin:0 0 .75rem;
  line-height:1.1;
}
.grad{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  color:var(--color-text-muted);
  margin:.5rem 0 1.4rem;
  max-width:480px;
}
.cta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.cta input{
  flex:1 1 220px;
  padding:.9rem 1rem;
  border-radius:var(--radius-control);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cta input::placeholder{color:rgba(28,18,42,.5)}
.cta input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(230,70,157,.15);
}
.sub{
  font-size:.9rem;
  color:var(--color-text-muted);
  margin-top:1rem;
}

.mock-phone{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.phone-frame{
  position:relative;
  width:min(480px,90vw);
  padding:18px 18px 26px;
  border-radius:38px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
.phone-notch{
  width:42%;
  height:14px;
  border-radius:0 0 14px 14px;
  background:rgba(28,18,42,.08);
  margin-bottom:12px;
}
.carousel-window{
  width:100%;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-surface-muted);
  aspect-ratio:446 / 526;
}
.carousel-track{
  display:flex;
  transition:transform .6s ease;
}
.carousel-slide{
  width:100%;
  flex-shrink:0;
  display:block;
  height:100%;
}
.carousel-slide.is-active{opacity:1}
.carousel-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.carousel-control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:rgba(253,248,255,.95);
  color:var(--color-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  padding:0;
}
.carousel-control span{font-size:1.75rem;line-height:1}
.carousel-control:hover,
.carousel-control:focus-visible{
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 14px 32px rgba(230,70,157,.25);
  transform:translateY(-50%) scale(1.03);
}
.carousel-control:active{transform:translateY(-50%) scale(.97)}
.carousel-control:focus-visible{outline:2px solid rgba(111,75,255,.4);outline-offset:2px}
.carousel-control.prev{left:16px}
.carousel-control.next{right:16px}
.carousel-dots{
  display:flex;
  gap:.45rem;
  margin-top:1rem;
}
.carousel-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:0;
  background:rgba(28,18,42,.2);
  cursor:pointer;
  transition:background .2s ease,width .2s ease;
}
.carousel-dot.is-active{
  background:var(--color-primary);
  width:28px;
}
.carousel-dot:focus-visible{
  outline:2px solid rgba(111,75,255,.4);
  outline-offset:2px;
}

body.modal-open{overflow:hidden}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(28,18,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:20;
  backdrop-filter:blur(6px);
}
.modal-backdrop[hidden]{
  display:none !important;
}
.modal{
  position:relative;
  width:min(460px,100%);
  background:var(--color-surface);
  border-radius:24px;
  border:1px solid var(--color-border);
  box-shadow:0 32px 65px rgba(28,18,42,.22);
  padding:2.2rem 2.4rem 2.5rem;
}
.modal-header h2{
  margin:0;
  font-size:1.9rem;
  color:var(--color-text);
}
.modal-header p{
  margin:.6rem 0 1.6rem;
  color:var(--color-text-muted);
}
.modal-close{
  position:absolute;
  top:18px;
  right:18px;
  border:0;
  background:rgba(241,230,255,.7);
  color:var(--color-text);
  font-size:1.4rem;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
.modal-close:hover,
.modal-close:focus-visible{
  background:var(--color-primary);
  color:#fff;
  transform:scale(1.05);
}
.modal-close:focus-visible{outline:2px solid rgba(111,75,255,.4);outline-offset:2px}
.modal-form{
  display:grid;
  gap:1rem;
}
.modal-form .field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.modal-form .field span{
  font-size:.95rem;
  font-weight:500;
  color:var(--color-text);
}
.modal-form input{
  padding:.85rem 1rem;
  border-radius:var(--radius-control);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.modal-form input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(230,70,157,.15);
}
.modal-submit{
  width:100%;
  justify-content:center;
  margin-top:.4rem;
}
.modal-footnote{
  margin:0;
  font-size:.85rem;
  color:var(--color-text-muted);
  text-align:center;
}
.form-status{
  margin:.2rem 0 0;
  font-size:.95rem;
  color:var(--color-text);
}
.form-status.is-success{color:#0f8b55;}
.form-status.is-error{color:#b42318;}

section{
  padding:3rem 1.2rem;
  max-width:1100px;
  margin:auto;
}
h2{
  font-size:2rem;
  margin:0 0 1.2rem;
  color:var(--color-text);
}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
}
.grid article{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:1.3rem;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.grid article:hover,
.grid article:focus-within{
  transform:translateY(-4px);
  box-shadow:0 26px 52px rgba(28,18,42,.12);
}
.grid h3{margin:0 0 .5rem;font-size:1.2rem}
.grid p{margin:0;color:var(--color-text-muted)}

.steps{
  display:grid;
  gap:.8rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:1.4rem 1.5rem;
  box-shadow:var(--shadow-soft);
  counter-reset:step;
}
.steps li{
  list-style:none;
  position:relative;
  padding-left:2.4rem;
  color:var(--color-text-muted);
}
.steps li strong{color:var(--color-text);font-weight:600}
.steps li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.35rem;
  width:1.6rem;
  height:1.6rem;
  border-radius:999px;
  background:var(--gradient-brand);
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(111,75,255,.25);
}

.bullets{
  display:grid;
  gap:.45rem;
  margin:0;
  padding-left:1.1rem;
  color:var(--color-text-muted);
}
.bullets li{margin:.2rem 0}

.download .stores{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}
.store{
  border:1px solid var(--color-border);
  padding:.85rem 1.1rem;
  border-radius:var(--radius-control);
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:600;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.store:hover,
.store:focus-visible{
  border-color:var(--color-primary);
  box-shadow:0 14px 32px rgba(28,18,42,.08);
  transform:translateY(-2px);
}

.footer{
  padding:2.5rem 1.2rem 2rem;
  border-top:1px solid var(--color-border);
  text-align:center;
  background:var(--color-surface);
}
.footer .cta{justify-content:center}
.footer-links{
  display:flex;
  gap:1.2rem;
  justify-content:center;
  margin:1.4rem 0;
  flex-wrap:wrap;
}
.footer-links a{color:var(--color-text-muted);font-weight:500}
.tiny{
  color:var(--color-text-muted);
  font-size:.88rem;
}

@media (max-width: 930px){
  .hero{grid-template-columns:1fr;gap:2rem;text-align:center}
  .hero .cta{justify-content:center}
  .hero p{margin-left:auto;margin-right:auto}
  .mock-phone{order:-1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 820px){
  .nav-inner{
    align-items:center;
    gap:.8rem;
  }
  .legal-hero{
    padding:2rem 1.4rem;
  }
  .legal-hero__meta{
    flex-direction:column;
  }
  .legal{
    padding:4.5rem 1.2rem 3rem;
  }
  .menu{
    display:none;
    position:absolute;
    right:1.2rem;
    top:calc(100% + .75rem);
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    width:min(280px,calc(100vw - 2.4rem));
    padding:1rem;
    border-radius:16px;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    box-shadow:var(--shadow-soft);
    z-index:12;
  }
  .menu.is-open{
    display:flex;
  }
  .menu a{
    padding:.35rem .2rem;
  }
  .menu .btn{
    margin:0;
    width:100%;
  }
  .nav-toggle{
    display:block;
  }
}

@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .legal{padding:3.5rem 1rem 2.5rem}
  .legal-article table{font-size:.9rem}
}

/* Admin console */
.admin-page{
  background:var(--color-bg);
}

.admin-main{
  background:linear-gradient(135deg,#f9fbff,#f5f3ff);
  border:1px solid var(--color-border);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(15,23,42,.08);
  padding:2rem;
  min-height:100vh;
  width:100%;
}

.admin-shell{
  max-width:none;
  width:100%;
  margin:0;
  padding:2rem 1rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.admin-hero{
  background:var(--gradient-brand);
  color:#fff;
  padding:clamp(1.75rem,4vw,3.1rem);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  display:grid;
  gap:1rem;
}
.admin-hero h1{
  margin:0;
  color:#fff;
}
.admin-hero p{
  margin:0;
  color:rgba(255,255,255,.9);
}
.admin-hero__meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.admin-hero__stat{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:16px;
  padding:1rem 1.2rem;
  min-width:170px;
}
.admin-hero__stat span{
  display:block;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  margin-bottom:.3rem;
}
.admin-hero__stat strong{
  color:#fff;
  font-size:1.12rem;
}
.admin-footnote{
  margin:.1rem 0 0;
  color:rgba(255,255,255,.86);
  font-size:.92rem;
}
.admin-shell .admin-footnote{
  color:var(--color-text-muted);
}

.admin-shell--wide{
  max-width:none;
  width:100%;
  padding:1.5rem 0 0;
}

.admin-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:1.5rem;
  align-items:start;
  padding:2rem 1.5rem 3rem;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  min-height:calc(100vh - 90px);
}

.admin-sidebar{
  position:sticky;
  top:100px;
  align-self:start;
  background:#0b1220;
  border:1px solid #111827;
  border-radius:16px;
  padding:1.2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  color:#e5e7eb;
}
.admin-sidebar__section + .admin-sidebar__section{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px dashed rgba(255,255,255,.08);
}
.admin-nav{
  display:grid;
  gap:.35rem;
  margin:0;
}
.admin-nav__link{
  padding:.6rem .75rem;
  border-radius:12px;
  color:#e5e7eb;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.admin-nav__link:hover,
.admin-nav__link:focus-visible{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateX(2px);
}
.admin-nav__link.is-active{
  border-color:#38bdf8;
  background:rgba(56,189,248,.16);
  color:#e0f2fe;
  font-weight:700;
}

.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}
.admin-topbar__left{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.admin-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--gradient-brand);
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.admin-topbar h1{
  margin:0;
}
.pill.badge{
  background:#0ea5e9;
  border-color:#0ea5e9;
  color:#fff;
  font-weight:700;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.2rem;
}

.admin-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.admin-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.admin-card__subtext{
  margin:0;
  color:var(--color-text-muted);
}
.admin-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.eyebrow{
  margin:0;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.admin-form{
  display:grid;
  gap:1rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.field span{
  font-weight:600;
  color:var(--color-text);
}
.field input,
.field textarea,
.field select{
  padding:.85rem 1rem;
  border-radius:var(--radius-control);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field select{
  height:48px;
}
.field textarea{
  min-height:120px;
  resize:vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(230,70,157,.15);
}
.admin-form__actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.admin-status{
  margin:0;
  padding:.75rem 1rem;
  border-radius:12px;
  background:var(--color-surface-muted);
  color:var(--color-text);
  border:1px solid var(--color-border);
}
.admin-status[data-state="success"]{
  border-color:#2f9e44;
  color:#0f8b55;
}
.admin-status[data-state="error"]{
  border-color:#e54848;
  color:#b42318;
}
.admin-status[data-state="info"]{
  border-color:var(--color-secondary);
  color:var(--color-secondary);
}

.pill-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:var(--color-surface-muted);
  border:1px solid var(--color-border);
  font-weight:600;
  font-size:.92rem;
  color:var(--color-text);
}
.pill.is-soft{
  background:rgba(241,230,255,.6);
}
.pill--action{
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pill--action:hover,
.pill--action:focus-visible{
  transform:translateY(-1px);
  border-color:var(--color-primary);
  box-shadow:0 12px 26px rgba(28,18,42,.12);
}
[data-admin-health][data-state="success"]{
  background:rgba(15,139,85,.12);
  border-color:#2f9e44;
  color:#0f8b55;
}
[data-admin-health][data-state="error"]{
  background:rgba(229,72,72,.12);
  border-color:#e54848;
  color:#b42318;
}
[data-admin-health][data-state="info"]{
  background:rgba(111,75,255,.14);
  border-color:var(--color-secondary);
  color:var(--color-secondary);
}

.admin-table-wrap{
  border:1px solid var(--color-border);
  border-radius:16px;
  overflow:hidden;
  background:var(--color-surface);
}
.admin-table{
  width:100%;
  border-collapse:collapse;
}
.admin-table th,
.admin-table td{
  text-align:left;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);
}
.admin-table th{
  background:var(--color-surface-muted);
  font-size:.9rem;
  font-weight:700;
}

/* Blog */
.blog-page{
  max-width:1100px;
  margin:0 auto;
  padding:3rem 1.2rem 4rem;
}
.blog-hero{
  display:flex;
  gap:2rem;
  justify-content:space-between;
  align-items:flex-start;
  padding:2rem;
  border-radius:var(--radius-card);
  background:var(--color-surface);
  box-shadow:var(--shadow-soft);
}
.blog-hero__badge{
  min-width:220px;
  padding:1rem;
  border-radius:var(--radius-card);
  background:var(--color-surface-muted);
  border:1px solid var(--color-border);
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;
  margin:2rem 0;
}
.blog-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
}
.blog-card__media{
  width:100%;
  padding-top:52%;
  background-size:cover;
  background-position:center;
}
.blog-card__content{
  padding:1.2rem 1.4rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.blog-card__summary{
  color:var(--color-text-muted);
  margin:0;
}
.blog-hero-preview{
  margin-top:.8rem;
  border:1px dashed var(--color-border);
  border-radius:12px;
  padding:.6rem;
  background:var(--color-surface-muted);
}
.blog-hero-preview img{
  width:100%;
  max-height:260px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.blog-card__meta{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  color:var(--color-text-muted);
  font-size:.95rem;
}
.blog-card__actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.4rem;
}
.blog-empty,
.blog-error{
  text-align:center;
  padding:1.4rem;
  border:1px dashed var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-surface);
}
.blog-detail{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:rgba(0,0,0,.4);
  padding:2rem 1rem;
  overflow:auto;
  z-index:20;
}
.blog-detail__card{
  max-width:820px;
  width:100%;
  background:var(--color-surface);
  border-radius:var(--radius-card);
  padding:1.6rem;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--color-border);
}
.blog-detail__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.blog-detail__hero{
  width:100%;
  border-radius:14px;
  margin:1rem 0;
}
.blog-detail__body{
  color:var(--color-text);
  line-height:1.7;
  padding:2rem 2rem 2.6rem;
  margin-top:1rem;
  border-top:1px solid var(--color-border);
}
.blog-detail__body p{
  margin:0 0 1rem;
}
.blog-detail__body img{
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* Contact */
.contact-page{
  max-width:1000px;
  margin:0 auto;
  padding:3rem 1.2rem 4rem;
}
.contact-hero{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:1.8rem 2rem;
  display:grid;
  gap:1.2rem;
}
.contact-hero h1{
  margin:0;
}
.contact-hero p{
  margin:0;
  color:var(--color-text-muted);
}
.contact-grid{
  display:grid;
  gap:1.4rem;
  grid-template-columns:1.1fr .9fr;
  align-items:start;
}
.contact-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:1.6rem 1.7rem;
}
.support-form{
  display:grid;
  gap:1rem;
}
.support-form .btn{
  justify-content:center;
}
.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.9rem;
}
.contact-list li{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}
.contact-list strong{
  color:var(--color-text);
}
.contact-list span{
  color:var(--color-text-muted);
}
.contact-note{
  margin:1rem 0 0;
  color:var(--color-text-muted);
  font-size:.95rem;
}

@media (max-width: 820px){
  .blog-hero{
    flex-direction:column;
  }
}
.admin-table tbody tr:nth-child(even) td{
  background:rgba(241,230,255,.35);
}
.admin-note-row{
  color:var(--color-text-muted);
  font-style:italic;
}

.admin-empty{
  padding:1.1rem;
  text-align:center;
  color:var(--color-text-muted);
}

.admin-card__footer{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}

.admin-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.8rem;
}
.admin-list li{
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:.9rem 1rem;
  background:var(--color-surface-muted);
}
.admin-list strong{
  display:block;
  margin-bottom:.25rem;
  color:var(--color-text);
}
.admin-list span{
  color:var(--color-text-muted);
}
.admin-list code{
  background:rgba(28,18,42,.08);
  padding:.1rem .35rem;
  border-radius:6px;
  font-family:monospace;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.75rem;
}
.photo-grid img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--color-border);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

@media (max-width: 720px){
  .admin-card__header{
    flex-direction:column;
  }
  .admin-layout{
    grid-template-columns:1fr;
    padding:2.5rem 1rem;
  }
  .admin-sidebar{
    position:static;
    top:auto;
  }
}

@media (max-width: 560px){
  .admin-shell{
    padding:3rem 1rem 2.5rem;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-hero{
    padding:1.5rem;
  }
}







