:root {
  --shell-bg-1: #fff2f7;
  --shell-bg-2: #ffdbe7;
  --shell-bg-3: #ffc7d8;
  --shell-panel: rgba(255,255,255,.78);
  --shell-panel-strong: rgba(255,255,255,.92);
  --shell-line: rgba(214, 67, 118, .18);
  --shell-text: #5a1b33;
  --shell-muted: #92586f;
  --shell-primary: #ff5b8d;
  --shell-primary-2: #ff7398;
  --shell-glow-1: #ff3f86;
  --shell-glow-2: #ff85ad;
  --shell-shadow: 0 18px 45px rgba(218, 76, 123, .16);
  --shell-radius: 26px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255,107,152,.22), transparent 26%),
    linear-gradient(135deg, var(--shell-bg-1), var(--shell-bg-2) 55%, var(--shell-bg-3));
  color: var(--shell-text);
  min-height: 100vh;
}

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

.shell-overlay { display:none; }

.shell-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 290px minmax(0,1fr);
}

.shell-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  border-right: 1px solid var(--shell-line);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shell-sidebar-top { display:flex; align-items:center; justify-content:space-between; }
.shell-logo { font-weight: 900; color: var(--shell-primary); letter-spacing: .2px; }
.shell-close { display:none; border:0; background:transparent; font-size:28px; color:var(--shell-text); cursor:pointer; }

.shell-user-card,
.shell-nav,
.shell-content-card,
.shell-hero,
.shell-step,
.shell-info,
.shell-ad-banner,
.shell-flow,
.shell-faq,
.shell-faq-item,
.shell-video-card,
.shell-legal-card {
  background: var(--shell-panel);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--shell-shadow);
  border-radius: var(--shell-radius);
}

.shell-user-card { padding: 16px; display:grid; gap:12px; }
.shell-user-card.is-logged { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,235,242,.94)); }
.shell-user-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--shell-muted); }
.shell-user-name { display:block; margin-top:4px; font-size:18px; }
.shell-user-hint,.shell-footer-note,.shell-header p,.shell-hero p,.shell-step p,.shell-info p,.shell-muted,.shell-list li,.shell-flow-caption,.shell-page-footer p,.shell-legal-card li,.shell-legal-card p { color: var(--shell-muted); }

.shell-logout,.shell-login-inline,.shell-cta,.shell-secondary,.shell-nav-link,.shell-ad-button {
  border-radius: 16px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.shell-logout,.shell-login-inline,.shell-cta,.shell-secondary,.shell-ad-button {
  display:inline-flex; align-items:center; justify-content:center; min-height: 46px; padding: 0 16px; font-weight: 800;
}

.shell-logout,.shell-login-inline { background: rgba(255,255,255,.86); border: 1px solid var(--shell-line); color: var(--shell-text); }

.shell-nav { padding: 10px; display:grid; gap:8px; }
.shell-nav-link { padding: 13px 14px; font-weight: 800; color: var(--shell-text); }
.shell-nav-link:hover,.shell-logout:hover,.shell-login-inline:hover,.shell-cta:hover,.shell-secondary:hover,.shell-ad-button:hover { transform: translateY(-1px); }
.shell-nav-link.is-active { background: linear-gradient(135deg, var(--shell-primary), var(--shell-primary-2)); color:#fff; box-shadow: 0 14px 28px rgba(255, 91, 141, .22); }

.shell-nav-group { display:grid; gap:8px; }
.shell-nav-toggle,
.shell-subnav-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--shell-text);
  font: inherit;
  text-align: left;
  border-radius: 16px;
}
.shell-nav-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 13px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.shell-nav-toggle:hover,
.shell-subnav-link:hover {
  transform: translateY(-1px);
}
.shell-nav-toggle.is-active {
  background: linear-gradient(135deg, var(--shell-primary), var(--shell-primary-2));
  color:#fff;
  box-shadow: 0 14px 28px rgba(255, 91, 141, .22);
}
.shell-nav-caret {
  font-size: 18px;
  line-height: 1;
  transition: transform .18s ease;
}
.shell-nav-group.is-open .shell-nav-caret {
  transform: rotate(180deg);
}
.shell-subnav {
  display: none;
  gap: 8px;
  padding: 0 6px 4px 18px;
}
.shell-nav-group.is-open .shell-subnav {
  display: grid;
}
.shell-subnav-link {
  display:block;
  padding: 11px 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.48);
  font-weight: 700;
}
.shell-subnav-link.is-active {
  background: rgba(255, 91, 141, .12);
  color: var(--shell-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 91, 141, .16);
}

.shell-sidebar-footer { margin-top:auto; }
.shell-footer-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:13px; color: var(--shell-muted); }
.shell-footer-links a:hover { color: var(--shell-text); }

.shell-main { grid-column: 2; min-width: 0; padding: 24px; }
.shell-header { display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.shell-header h1,.shell-hero h2,.shell-step h3,.shell-info h3,.shell-ad-banner h3,.shell-faq h3,.shell-flow h3,.shell-video-card h3,.shell-legal-card h3 { margin:0; }
.shell-burger { display:none; width:48px; height:48px; border:1px solid var(--shell-line); background: rgba(255,255,255,.85); border-radius: 16px; cursor:pointer; flex-shrink:0; }
.shell-burger span { display:block; width:18px; height:2px; background: var(--shell-text); margin:4px auto; border-radius:99px; }

.shell-content-grid { display:grid; gap:18px; }
.shell-hero,.shell-content-card,.shell-step,.shell-info,.shell-ad-banner,.shell-flow,.shell-faq,.shell-video-card,.shell-legal-card { padding: 22px; }
.shell-hero { display:grid; gap:14px; }
.shell-badge { display:inline-flex; width:max-content; padding: 7px 13px; border-radius:999px; background: rgba(255, 91, 141, .12); color: var(--shell-primary); font-weight: 800; }
.shell-actions { display:flex; gap:12px; flex-wrap:wrap; }
.shell-cta, .shell-ad-button { background: linear-gradient(135deg, var(--shell-primary), var(--shell-primary-2)); color:#fff; box-shadow: 0 14px 28px rgba(255, 91, 141, .22); }
.shell-secondary { background: rgba(255,255,255,.9); border:1px solid var(--shell-line); }

.shell-cards-2,.shell-cards-3 { display:grid; gap:16px; }
.shell-cards-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.shell-cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.shell-list { margin: 0; padding-left: 20px; display:grid; gap:8px; }

.shell-ad-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display:grid; gap:12px;
  background: linear-gradient(135deg, rgba(255,91,141,.14), rgba(255,255,255,.94));
  border: 1px solid rgba(255, 91, 141, .22);
}
.shell-ad-banner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--shell-radius) + 2px);
  background:
    conic-gradient(from 0deg,
      transparent 0deg 240deg,
      rgba(255,63,134,.95) 265deg,
      rgba(255,133,173,.95) 295deg,
      rgba(255,255,255,.98) 318deg,
      rgba(255,63,134,.95) 336deg,
      transparent 360deg);
  animation: shellNeonSpin 4.5s linear infinite;
  z-index: -2;
  filter: blur(.2px);
}
.shell-ad-banner::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--shell-radius) - 2px);
  background: linear-gradient(135deg, rgba(255,239,245,.96), rgba(255,248,251,.92));
  z-index: -1;
}
.shell-ad-banner:hover::before { animation-duration: 2.8s; }
.shell-ad-banner {
  box-shadow:
    0 0 0 1px rgba(255,91,141,.16),
    0 0 18px rgba(255,91,141,.18),
    0 18px 45px rgba(218, 76, 123, .16);
}
.shell-ad-tag { display:inline-flex; width:max-content; padding:6px 12px; border-radius:999px; background: rgba(255,255,255,.9); color: var(--shell-primary); font-weight:900; }

.shell-flow-grid {
  display:grid;
  gap:12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items:stretch;
}
.shell-flow-step {
  position:relative;
  padding:18px;
  border-radius:20px;
  background: rgba(255,255,255,.86);
  border: 1px dashed rgba(214,67,118,.25);
  min-height: 132px;
}
.shell-flow-step::after {
  content: '→';
  position:absolute;
  right:-12px;
  top:50%;
  transform:translateY(-50%);
  color: var(--shell-primary);
  font-size: 26px;
  font-weight: 900;
}
.shell-flow-step:last-child::after { display:none; }
.shell-flow-icon { font-size: 26px; margin-bottom: 10px; }
.shell-flow-caption { font-size: 14px; margin-top: 8px; }

.shell-faq-list { display:grid; gap:12px; }
.shell-faq-item { padding:16px 18px; }
.shell-faq-item h4 { margin:0 0 8px; font-size:18px; }

.shell-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:8px; border-radius:999px;
  background: rgba(255,91,141,.12); color: var(--shell-primary); font-size: 12px; font-weight: 900;
  cursor: help;
}

.shell-page-footer { margin-top: 10px; padding: 8px 2px 24px; }
.shell-page-footer-links { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-weight: 700; }
.shell-page-footer-links a { color: var(--shell-text); }
.shell-page-footer-links a:hover { color: var(--shell-primary); }

.shell-video-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.shell-video-card { display:grid; gap:14px; }
.shell-video-chip {
  display:inline-flex; align-items:center; gap:8px; width:max-content;
  padding:7px 12px; border-radius:999px; background: rgba(255,91,141,.12); color: var(--shell-primary); font-weight:800;
}
.shell-video-card p { margin: 0; color: var(--shell-muted); }
.shell-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,91,141,.18);
}
.shell-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.shell-legal-grid { display:grid; gap:16px; }
.shell-legal-card ul { margin: 0; padding-left: 20px; display:grid; gap:8px; }
.shell-legal-note { font-size: 14px; color: var(--shell-muted); }

@keyframes shellNeonSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1040px) {
  .shell-cards-3,
  .shell-video-grid,
  .shell-flow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 880px) {
  .shell-app { grid-template-columns: 1fr; }
  .shell-main { grid-column: 1; }
  .shell-sidebar {
    position: fixed; left: 0; top:0; z-index: 40; width: min(86vw, 320px); transform: translateX(-110%); transition: transform .22s ease;
  }
  .shell-app.sidebar-open .shell-sidebar { transform: translateX(0); }
  .shell-overlay { position: fixed; inset:0; background: rgba(34, 15, 24, .26); z-index: 30; display:none; }
  .shell-app.sidebar-open .shell-overlay { display:block; }
  .shell-burger, .shell-close { display:block; }
  .shell-main { padding: 18px; }
}

@media (max-width: 720px) {
  .shell-cards-2, .shell-cards-3, .shell-flow-grid, .shell-video-grid { grid-template-columns: 1fr; }
  .shell-flow-step::after { display:none; }
  .shell-hero,.shell-content-card,.shell-step,.shell-info,.shell-ad-banner,.shell-flow,.shell-faq,.shell-video-card,.shell-legal-card { padding: 18px; }
}

.shell-tutorial-card {
  display: grid;
  gap: 16px;
}
.shell-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.shell-anchor-target {
  scroll-margin-top: 24px;
}