:root {
      --bg: #f6f7f9;
      --bg-2: #ffffff;
      --panel: #ffffff;
      --panel-2: #ffffff;
      --ink: #111827;
      --muted: #4b5563;
      --accent: #2563eb;
      --accent-2: #f59e0b;
      --line: #e5e7eb;
      --danger: #dc2626;
      --success: #059669;
      --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
      --frame-line: #c7d2fe;
      --frame-shadow: 0 12px 30px rgba(37, 99, 235, 0.12), 0 0 0 3px rgba(37, 99, 235, 0.035);
      --frame-shadow-strong: 0 14px 38px rgba(37, 99, 235, 0.14), 0 0 0 3px rgba(37, 99, 235, 0.04);
    }
    body.theme-dark {
      --bg: #0f172a;
      --bg-2: #111827;
      --panel: #111827;
      --panel-2: #111827;
      --ink: #e5e7eb;
      --muted: #9ca3af;
      --accent: #60a5fa;
      --accent-2: #fbbf24;
      --line: #334155;
      --danger: #f87171;
      --success: #34d399;
      --shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
      --frame-line: #3b82f6;
      --frame-shadow: 0 12px 30px rgba(59, 130, 246, 0.18), 0 0 0 3px rgba(59, 130, 246, 0.08);
      --frame-shadow-strong: 0 14px 42px rgba(59, 130, 246, 0.24), 0 0 0 3px rgba(59, 130, 246, 0.10);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    body::before {
      display: none;
    }
    body::after {
      display: none;
    }
    .wrap { width: min(1720px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 16px; position: relative; z-index: 1; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .hero h1 {
      margin: 0 0 8px;
      font-size: 38px;
      font-weight: 750;
      letter-spacing: 0;
      line-height: 1.1;
    }
    .brand-home {
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      width: fit-content;
    }
    .brand-home:hover {
      color: var(--accent);
    }
    .brand-title {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .brand-icon {
      width: 1em;
      height: 1em;
      flex: 0 0 auto;
    }
    .nav {
      display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
      padding: 12px 14px; margin: 18px 0 24px; background: var(--panel);
      border: 1px solid var(--frame-line); border-radius: 8px;
      box-shadow: var(--frame-shadow);
    }
    .nav a { text-decoration: none; color: var(--ink); font-weight: 700; }
    .nav-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .nav-tab {
      padding: 10px 16px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid transparent;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .nav-tab:hover {
      background: #f3f4f6;
      border-color: var(--line);
    }
    .nav-tab.active {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
      box-shadow: none;
    }
    .nav-user { margin-left: auto; color: var(--muted); }
    .account-panel {
      margin-left: auto;
      position: relative;
      min-width: 0;
      color: var(--muted);
    }
    .account-identity {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 5px 8px 5px 5px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .account-identity::-webkit-details-marker {
      display: none;
    }
    .account-menu[open] .account-identity,
    .account-identity:hover {
      background: #f8fafc;
      border-color: var(--frame-line);
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
    }
    .account-avatar {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      color: #ffffff;
      background: linear-gradient(135deg, #2563eb, #0f766e);
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
      font-size: 14px;
      font-weight: 850;
    }
    .account-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
      line-height: 1.1;
    }
    .account-copy strong {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      max-width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-copy span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .account-caret {
      color: #64748b;
      font-size: 18px;
      line-height: 1;
      transform: translateY(-1px);
      transition: transform 0.18s ease;
    }
    .account-menu[open] .account-caret {
      transform: rotate(180deg) translateY(1px);
    }
    .account-menu-list {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 20;
      min-width: 190px;
      padding: 6px;
      border-radius: 8px;
      border: 1px solid var(--frame-line);
      background: var(--panel);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    }
    .account-menu-list a {
      display: inline-flex;
      align-items: center;
      width: 100%;
      min-height: 36px;
      padding: 9px 10px;
      border-radius: 7px;
      color: var(--ink);
      text-decoration: none;
      line-height: 1.15;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 750;
    }
    .account-menu-list a:hover {
      background: #eff6ff;
      color: #1d4ed8;
    }
    .public-nav { justify-content: space-between; }
    .public-nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }
    .header-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .theme-switch {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border-radius: 999px;
      color: var(--ink);
      background: var(--panel);
      border: 1px solid var(--frame-line);
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
      text-decoration: none;
    }
    .theme-switch svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .theme-switch:hover {
      color: #1d4ed8;
      background: #eff6ff;
    }
    body.theme-dark .theme-switch:hover {
      color: #e0f2fe;
      background: #1e3a8a;
    }
    .language-switch {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: #f3f4f6;
      border: 1px solid var(--frame-line);
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.06);
    }
    body.theme-dark .nav-tab:hover,
    body.theme-dark .language-switch {
      background: #1f2937;
    }
    body.theme-dark .nav-tab.active,
    body.theme-dark .language-switch a.active {
      color: #0f172a;
      background: #93c5fd;
      border-color: #60a5fa;
    }
    body.theme-dark .eyebrow,
    body.theme-dark .chip-icon,
    body.theme-dark .feature-visual {
      color: #93c5fd;
      background: #172554;
      border-color: #1d4ed8;
    }
    .language-switch a {
      min-width: 38px;
      padding: 7px 10px;
      border-radius: 999px;
      color: var(--muted);
      text-align: center;
      text-decoration: none;
      font-size: 13px;
      font-weight: 900;
    }
    .language-switch a.active {
      color: #ffffff;
      background: var(--accent);
    }
    .field-with-action {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .field-with-action button {
      min-height: 46px;
      padding: 10px 14px;
      white-space: nowrap;
    }
    .public-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin: 28px 0 6px;
      color: var(--muted);
      line-height: 1.4;
    }
    .public-footer a {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      color: var(--muted);
      text-decoration: none;
      font-weight: 700;
      white-space: nowrap;
    }
    .public-footer a:hover { color: var(--accent); }
    .logout { color: var(--danger) !important; }
    .account-menu-list .logout:hover {
      background: #fff1f2;
      color: #b91c1c !important;
    }
    body.theme-dark .account-avatar {
      background: linear-gradient(135deg, #60a5fa, #2dd4bf);
      color: #0f172a;
      box-shadow: 0 8px 18px rgba(96, 165, 250, 0.16);
    }
    body.theme-dark .account-menu[open] .account-identity,
    body.theme-dark .account-identity:hover {
      background: #111827;
      border-color: #334155;
      box-shadow: 0 8px 18px rgba(96, 165, 250, 0.10);
    }
    body.theme-dark .account-menu-list {
      background: #111827;
      border-color: #334155;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
    }
    body.theme-dark .account-menu-list a {
      color: #e5e7eb;
    }
    body.theme-dark .account-menu-list a:hover {
      background: #172554;
      color: #bfdbfe;
    }
    body.theme-dark .account-menu-list .logout:hover {
      background: rgba(127, 29, 29, 0.28);
      color: #fecaca !important;
    }
    .public-hero {
      min-height: auto;
      display: grid;
      align-content: center;
      justify-items: center;
      text-align: center;
      gap: 18px;
      padding: clamp(26px, 4vw, 52px) 0 20px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 18px;
    }
    .eyebrow {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      color: #1d4ed8;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .public-hero h2 {
      max-width: 1280px;
      font-size: clamp(40px, 5.3vw, 76px);
      line-height: 1.05;
      margin: 0 0 16px;
      letter-spacing: 0;
      white-space: nowrap;
      color: var(--ink);
    }
    .public-hero .lead {
      max-width: 1180px;
      font-size: 20px;
      margin-left: auto;
      margin-right: auto;
      white-space: nowrap;
    }
    .lead {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.65;
      margin: 0 0 20px;
    }
    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .hero-actions .primary-cta {
      min-width: 230px;
      min-height: 64px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      position: relative;
      overflow: hidden;
      background: var(--accent);
      color: #ffffff;
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
      transform: translateY(0);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .hero-actions .primary-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-120%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
      transition: transform 0.45s ease;
    }
    .hero-actions .primary-cta:hover {
      transform: translateY(-3px);
      background: #3b82f6;
      filter: none;
      box-shadow: 0 18px 34px rgba(59, 130, 246, 0.24);
    }
    .hero-actions .primary-cta:hover::after {
      transform: translateX(120%);
    }
    .section-head {
      display: grid;
      gap: 8px;
      max-width: 840px;
      margin: 0 0 18px;
    }
    .section-head h2 {
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.1;
      white-space: nowrap;
    }
    .section-head .lead {
      max-width: 1180px;
      white-space: nowrap;
      color: #334155;
      font-weight: 500;
    }
    .feature-intro-grid,
    .content-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 18px 0;
    }
    .feature-intro-card {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .feature-intro-card h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
    }
    .feature-intro-card p {
      margin: 0;
      color: #3f4b5f;
      line-height: 1.65;
      max-width: 860px;
    }
    .product-preview {
      display: grid;
      grid-template-columns: minmax(0, 1134px) minmax(300px, 1fr);
      gap: 14px;
      align-items: stretch;
      justify-content: stretch;
      margin-bottom: 26px;
    }
    .preview-window {
      overflow: hidden;
      width: 100%;
      max-height: 500px;
      justify-self: stretch;
      border-radius: 8px;
      border: 1px solid var(--frame-line);
      background: #f9fafb;
      box-shadow: var(--frame-shadow-strong);
    }
    .preview-video {
      display: block;
      width: 149.4%;
      height: auto;
      max-width: none;
      max-height: 520px;
      aspect-ratio: 1700 / 780;
      object-fit: contain;
      transform: translateX(-16.7%);
      background: #f9fafb;
    }
    .preview-video-fallback {
      display: none;
      padding: 18px;
    }
    .preview-topbar {
      display: flex;
      gap: 8px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #f9fafb;
    }
    .preview-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #ff6b81;
    }
    .preview-dot:nth-child(2) { background: #ffb347; }
    .preview-dot:nth-child(3) { background: #29d3a0; }
    .preview-body {
      display: grid;
      gap: 16px;
      padding: 18px;
    }
    .preview-panel {
      display: grid;
      gap: 9px;
      padding: 16px;
      border-radius: 8px;
      background: #f9fafb;
      border: 1px solid var(--frame-line);
      box-shadow: var(--frame-shadow);
    }
    .preview-timer {
      font-size: clamp(38px, 5vw, 66px);
      font-weight: 850;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .preview-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .preview-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 12px;
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      border: 1px solid var(--frame-line);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
      font-weight: 700;
    }
    .chip-icon {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      color: var(--accent);
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }
    .chip-icon svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .preview-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .preview-action-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 10px 14px;
      border-radius: 8px;
      color: #374151;
      background: #f3f4f6;
      border: 1px solid var(--frame-line);
      font-weight: 800;
      font-size: 16px;
    }
    .preview-action-button.stop {
      background: #fee2e2;
      color: #991b1b;
      border-color: #fecaca;
    }
    .public-kpi {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, minmax(0, 1fr));
      gap: 10px;
      align-content: stretch;
      justify-self: stretch;
    }
    .public-kpi .card {
      min-height: 0;
      padding: 9px 11px;
      display: grid;
      align-content: start;
      gap: 4px;
      border-color: var(--frame-line);
      box-shadow: var(--frame-shadow);
    }
    .public-kpi .kpi-head {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .public-kpi p {
      white-space: normal;
      margin: 0;
      font-size: 11px;
      line-height: 1.25;
    }
    .public-kpi .metric {
      color: var(--accent);
      font-size: clamp(16px, 1.25vw, 24px);
      white-space: normal;
      line-height: 1.12;
    }
    .public-kpi .kpi-title {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
      min-width: 0;
    }
    .public-kpi .kpi-icon {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      flex: 0 0 auto;
      color: var(--accent);
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      font-size: 13px;
      font-weight: 900;
    }
    body.theme-dark .public-kpi .kpi-icon {
      color: #93c5fd;
      background: #172554;
      border-color: #3b82f6;
    }
    .log-demo {
      margin-bottom: 26px;
    }
    .log-demo .section-head {
      max-width: none;
    }
    .log-demo-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 14px;
    }
    .log-demo-cell {
      display: grid;
      grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(130px, 0.55fr) minmax(260px, 1.4fr);
      gap: 10px;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .log-demo-item {
      padding: 13px 14px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid var(--frame-line);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
    }
    .log-demo-item strong {
      display: block;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 26px;
    }
    .benefit-grid .card:first-child p {
      white-space: nowrap;
    }
    .blog-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 28px;
      align-items: start;
    }
    .blog-sidebar {
      position: sticky;
      top: 18px;
      display: grid;
      gap: 6px;
      max-height: calc(100vh - 36px);
      overflow: auto;
      padding: 4px 14px 4px 0;
      border-right: 1px solid var(--frame-line);
    }
    .blog-sidebar a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 34px;
      padding: 6px 8px;
      border-radius: 8px;
      color: #374151;
      text-decoration: none;
      font-weight: 600;
    }
    .blog-sidebar a:hover,
    .blog-sidebar a.active {
      color: #2563eb;
      background: #eff6ff;
    }
    .blog-main {
      min-width: 0;
    }
    .blog-section-title {
      margin: 0 0 22px;
      font-size: 28px;
      line-height: 1.1;
    }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 320px);
      gap: 18px;
      align-items: start;
    }
    .blog-card {
      display: grid;
      overflow: hidden;
      padding: 0;
      width: 320px;
      min-height: 0;
      align-content: start;
    }
    .blog-card-media {
      display: grid;
      place-items: center;
      height: 150px;
      overflow: hidden;
      background: linear-gradient(135deg, #2563eb, #38bdf8);
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.15;
      text-align: center;
      padding: 14px;
    }
    .blog-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .blog-card-body {
      display: grid;
      gap: 8px;
      padding: 12px 14px 14px;
    }
    .blog-card h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.28;
    }
    .blog-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
    }
    .blog-card-author {
      color: #3b82f6;
    }
    .blog-card-summary {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .blog-media-panel {
      display: grid;
      gap: 10px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      border: 0;
      background: transparent;
    }
    .blog-media-head {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto auto;
      align-items: end;
      gap: 14px;
    }
    .blog-media-head h3 {
      margin: 0 0 4px;
      font-size: 18px;
      line-height: 1.25;
    }
    .blog-media-head p {
      margin: 0;
    }
    .blog-media-upload {
      display: flex;
      align-items: end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .blog-media-file {
      min-width: min(260px, 100%);
      font-size: 14px;
    }
    .blog-media-file input {
      padding: 9px 10px;
      background: var(--panel);
    }
    .blog-media-status {
      min-height: 18px;
      font-size: 14px;
    }
    .blog-media-workspace {
      display: grid;
      grid-template-columns: minmax(240px, 0.35fr) minmax(360px, 0.65fr);
      gap: 14px;
      align-items: stretch;
      height: 392px;
      min-height: 392px;
    }
    .blog-media-list {
      display: grid;
      align-content: start;
      gap: 8px;
      height: 392px;
      max-height: 392px;
      overflow: auto;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .blog-media-card {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      width: 100%;
      min-width: 0;
      min-height: 66px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      text-align: left;
      box-shadow: none;
    }
    .blog-media-card:hover,
    .blog-media-card.is-selected {
      transform: none;
      border-color: var(--accent);
      background: #eff6ff;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
    }
    .blog-media-thumb {
      display: block;
      width: 58px;
      height: 50px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: #e5e7eb;
      overflow: hidden;
      box-shadow: none;
    }
    .blog-media-thumb:hover {
      transform: none;
      box-shadow: none;
      background: #e5e7eb;
    }
    .blog-media-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .blog-media-info {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
    }
    .blog-media-preview-panel {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 10px;
      min-width: 0;
      min-height: 0;
      height: 392px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .blog-media-toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      align-self: end;
      padding: 8px;
      border-radius: 8px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      box-shadow: 0 8px 18px rgba(245, 158, 11, 0.12);
    }
    .blog-media-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid transparent;
      color: #ffffff;
      background: #2563eb;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    }
    .blog-media-tool:hover {
      transform: translateY(-1px);
      background: #3b82f6;
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }
    .blog-media-tool svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .blog-media-tool.cover {
      background: #0f766e;
      box-shadow: 0 10px 22px rgba(15, 118, 110, 0.20);
    }
    .blog-media-tool.cover:hover {
      background: #0d9488;
    }
    .blog-media-tool.copy {
      color: #111827;
      background: #fbbf24;
      box-shadow: 0 10px 22px rgba(245, 158, 11, 0.20);
    }
    .blog-media-tool.copy:hover {
      background: #f59e0b;
    }
    .blog-media-tool.delete {
      background: #ef4444;
      box-shadow: 0 10px 22px rgba(220, 38, 38, 0.22);
    }
    .blog-media-tool.delete:hover {
      background: #dc2626;
    }
    .blog-media-tool.close {
      color: #334155;
      background: #e2e8f0;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
      font-size: 28px;
      line-height: 1;
      font-weight: 700;
    }
    .blog-media-tool.close:hover {
      color: #0f172a;
      background: #cbd5e1;
    }
    .blog-media-preview {
      display: grid;
      place-items: center;
      min-height: 0;
      height: 324px;
      overflow: hidden;
      border-radius: 8px;
      background: #eef2ff;
      border: 1px solid var(--line);
    }
    .blog-media-preview img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }
    .blog-media-preview img:not([src]) {
      display: none;
    }
    .blog-media-preview-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 24px;
      color: var(--muted);
      font-size: 13px;
    }
    .blog-media-preview-meta strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-size: 14px;
    }
    .blog-media-empty {
      margin: 0;
      padding: 12px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .blog-edit-meta-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.7fr) minmax(112px, 0.18fr) minmax(136px, 0.22fr);
      gap: 12px;
      align-items: start;
      margin-top: 16px;
    }
    .blog-cover-field {
      grid-column: span 1;
    }
    .blog-summary-field {
      grid-column: span 3;
    }
    .blog-summary-field textarea {
      min-height: 78px;
    }
    .blog-compact-field select {
      min-height: 44px;
      padding: 9px 34px 9px 12px;
    }
    .blog-editor-panel {
      display: grid;
      gap: 10px;
      margin-top: 4px;
    }
    .blog-editor-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .blog-editor-head h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
    }
    .blog-editor-tabs {
      display: inline-flex;
      gap: 6px;
      padding: 4px;
      border-radius: 8px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
    }
    .blog-editor-tab {
      min-height: 34px;
      padding: 7px 12px;
      font-size: 13px;
      box-shadow: none;
    }
    .blog-editor-tab.is-active {
      color: #ffffff;
      background: var(--accent);
      border-color: var(--accent);
    }
    .blog-markdown-toolbar {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }
    .blog-md-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border-radius: 8px;
      color: #1d4ed8;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      box-shadow: none;
    }
    .blog-md-tool:hover {
      color: #ffffff;
      background: #2563eb;
      border-color: #2563eb;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
    }
    .blog-md-tool svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .blog-markdown-preview {
      min-height: 560px;
      padding: 18px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .blog-markdown-preview[hidden] {
      display: none;
    }
    .blog-image-delete-dialog {
      width: min(560px, 100%);
    }
    .blog-image-delete-usage {
      display: grid;
      gap: 6px;
      margin: 12px 0 0;
      padding-left: 20px;
      color: var(--muted);
    }
    .feature-list-page {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .feature-row {
      display: grid;
      grid-template-columns: 64px minmax(190px, 0.34fr) minmax(180px, 0.46fr) minmax(300px, 0.8fr);
      gap: 18px;
      align-items: center;
      padding: 18px;
      border-radius: 8px;
      background: var(--panel);
      border: 1px solid var(--frame-line);
      box-shadow: var(--frame-shadow);
    }
    .expanded-features .feature-row {
      grid-template-columns: 64px minmax(260px, 1.1fr) minmax(190px, 0.65fr) minmax(300px, 0.9fr);
      align-items: stretch;
    }
    .feature-visual {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--accent);
      background: #eff6ff;
      box-shadow: none;
    }
    .feature-visual svg {
      width: 30px;
      height: 30px;
      stroke: currentColor;
      stroke-width: 2.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feature-row h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      white-space: normal;
    }
    .feature-row p {
      margin: 0;
      color: #3f4b5f;
      line-height: 1.5;
      max-width: 620px;
      white-space: normal;
    }
    .feature-points {
      display: grid;
      gap: 8px;
      align-content: center;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }
    .feature-points li {
      position: relative;
      padding-left: 18px;
    }
    .feature-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.55em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
    }
    .feature-mock {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 8px;
      background: #f9fafb;
      border: 1px solid var(--frame-line);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
      min-width: 0;
    }
    .mock-title {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
    }
    .mock-timer {
      color: var(--accent);
      font-size: 28px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .mock-line {
      height: 9px;
      border-radius: 999px;
      background: #d1d5db;
    }
    .mock-line.short { width: 58%; }
    .mock-line.medium { width: 76%; }
    .mock-chip-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .mock-chip {
      padding: 6px 8px;
      border-radius: 8px;
      color: #374151;
      background: #ffffff;
      border: 1px solid var(--frame-line);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .mock-row {
      display: grid;
      grid-template-columns: 0.7fr 0.7fr 0.55fr 1fr;
      gap: 6px;
      align-items: center;
    }
    .mock-cell {
      min-height: 28px;
      padding: 7px 8px;
      border-radius: 8px;
      color: #374151;
      background: #ffffff;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mock-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mock-input {
      height: 34px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid var(--frame-line);
    }
    .mock-button {
      width: fit-content;
      padding: 7px 10px;
      border-radius: 8px;
      color: #ffffff;
      background: var(--accent);
      font-size: 12px;
      font-weight: 900;
    }
    .blog-card a {
      color: var(--ink);
      text-decoration: none;
    }
    .blog-card a:hover { color: var(--accent); }
    body.theme-dark .blog-sidebar a {
      color: #d1d5db;
    }
    body.theme-dark .blog-sidebar a:hover,
    body.theme-dark .blog-sidebar a.active {
      color: #93c5fd;
      background: #172554;
    }
    body.theme-dark .blog-media-panel {
      background: #0f172a;
      border-color: var(--frame-line);
    }
    body.theme-dark .blog-media-card,
    body.theme-dark .blog-media-empty,
    body.theme-dark .blog-media-list,
    body.theme-dark .blog-media-preview-panel {
      background: #111827;
      border-color: var(--frame-line);
    }
    body.theme-dark .blog-media-card:hover,
    body.theme-dark .blog-media-card.is-selected {
      background: #172554;
      border-color: #60a5fa;
    }
    body.theme-dark .blog-media-thumb {
      background: #1f2937;
    }
    body.theme-dark .blog-media-preview {
      background: #0f172a;
      border-color: var(--frame-line);
    }
    body.theme-dark .blog-media-toolbar {
      background: #1e293b;
      border-color: #475569;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark .blog-media-tool.close {
      color: #e5e7eb;
      background: #334155;
    }
    body.theme-dark .blog-media-tool.close:hover {
      background: #475569;
    }
    body.theme-dark .blog-editor-tabs,
    body.theme-dark .blog-markdown-toolbar,
    body.theme-dark .blog-markdown-preview {
      background: #111827;
      border-color: var(--frame-line);
    }
    body.theme-dark .blog-md-tool {
      color: #dbeafe;
      background: #172554;
      border-color: #1d4ed8;
    }
    body.theme-dark .blog-md-tool:hover {
      color: #0f172a;
      background: #93c5fd;
      border-color: #60a5fa;
    }
    body.theme-dark .contact-methods > div {
      background: #0f172a;
      border-color: var(--frame-line);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .contact-methods strong {
      color: #f8fafc;
    }
    body.theme-dark .contact-methods p {
      color: #dbeafe;
    }
    body.theme-dark .section-head .lead,
    body.theme-dark .feature-intro-card p,
    body.theme-dark .feature-row p {
      color: #cbd5e1;
    }
    body.theme-dark .blog-toc {
      border-right-color: #38bdf8;
      background: rgba(15, 23, 42, 0.62);
    }
    body.theme-dark .blog-toc-title {
      color: #e0f2fe;
      border-bottom-color: #38bdf8;
    }
    body.theme-dark .blog-toc a {
      color: #dbeafe;
    }
    body.theme-dark .blog-toc a.toc-level-2 {
      color: #60a5fa;
    }
    body.theme-dark .blog-toc a.toc-level-3 {
      color: #cbd5e1;
      border-left-color: #38bdf8;
    }
    body.theme-dark .blog-toc a:hover {
      color: #f8fafc;
      background: #1e3a8a;
    }
    .article {
      max-width: 920px;
      margin: 0 auto;
      width: 100%;
    }
    .trust-page {
      max-width: 980px;
    }
    .trust-page h3 {
      margin-top: 22px;
    }
    .contact-methods {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin: 18px 0;
    }
    .contact-methods > div {
      position: relative;
      padding: 16px 18px 16px 20px;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(37, 99, 235, 0.10);
      min-width: 0;
      overflow: hidden;
    }
    .contact-methods > div::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--accent);
    }
    .contact-methods strong {
      display: block;
      margin-bottom: 6px;
      color: #0f172a;
      font-size: 15px;
      font-weight: 850;
    }
    .contact-methods p {
      margin: 0;
      color: #1f2937;
      font-size: 16px;
      line-height: 1.62;
    }
    .contact-methods a {
      font-size: 17px;
      font-weight: 850;
    }
    .contact-form {
      display: grid;
      gap: 14px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .form-grid.two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .contact-form button {
      justify-self: start;
      min-width: 150px;
    }
    .article > .muted {
      color: #516070;
      font-weight: 500;
    }
    .article .lead {
      color: #24364b;
      line-height: 1.72;
      font-size: 18px;
      font-weight: 500;
    }
    .article p, .article li {
      color: #172033;
      line-height: 1.72;
      font-size: 18px;
      font-weight: 450;
    }
    .article strong {
      color: #020617;
      font-weight: 850;
    }
    .article a {
      color: #1d4ed8;
      font-weight: 700;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 3px;
    }
    .article a:hover {
      color: #0f766e;
    }
    .article h2 {
      margin-top: 28px;
      margin-bottom: 12px;
      font-size: 30px;
      line-height: 1.22;
      font-weight: 800;
      color: #020617;
    }
    .article h2,
    .article h3 {
      scroll-margin-top: 18px;
      color: #020617;
    }
    .article h3 {
      margin-top: 22px;
      margin-bottom: 10px;
      font-size: 23px;
      line-height: 1.28;
      font-weight: 760;
    }
    .card.article h2,
    .card .article h2,
    .blog-markdown-preview.article h2 {
      margin-top: 28px;
      margin-bottom: 12px;
      font-size: 30px;
      line-height: 1.22;
      font-weight: 800;
    }
    .card.article h3,
    .card .article h3,
    .blog-markdown-preview.article h3 {
      margin-top: 22px;
      margin-bottom: 10px;
      font-size: 23px;
      line-height: 1.28;
      font-weight: 760;
    }
    .article blockquote {
      margin: 18px 0;
      padding: 14px 16px;
      color: #172033;
      background: #f8fbff;
      border-left: 4px solid #2563eb;
      border-radius: 8px;
    }
    .article blockquote p {
      margin: 0;
      color: inherit;
      font-weight: 550;
    }
    .article ul {
      display: grid;
      gap: 10px;
      padding-left: 22px;
    }
    .article img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 18px 0;
      border-radius: 8px;
      border: 1px solid var(--frame-line);
    }
    .blog-detail-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 28px;
      align-items: start;
    }
    .blog-toc {
      position: sticky;
      top: 18px;
      max-height: calc(100vh - 36px);
      overflow: auto;
      padding: 14px 14px 14px 12px;
      border-right: 2px solid #bfdbfe;
      background: #f8fbff;
      border-radius: 8px 0 0 8px;
    }
    .blog-toc-title {
      display: inline-block;
      margin: 0 0 16px;
      padding-bottom: 6px;
      border-bottom: 2px solid #2563eb;
      color: #172554;
      font-size: 15px;
      font-weight: 850;
    }
    .blog-toc nav {
      display: grid;
      gap: 8px;
    }
    .blog-toc a {
      display: block;
      color: #334155;
      text-decoration: none;
      line-height: 1.45;
      font-size: 14px;
      padding: 6px 8px;
      border-radius: 8px;
    }
    .blog-toc a:hover {
      color: #2563eb;
      background: #eff6ff;
    }
    .blog-toc a.toc-level-2 {
      font-weight: 800;
      color: #1d4ed8;
    }
    .blog-toc a.toc-level-3 {
      margin-left: 12px;
      padding-left: 12px;
      color: #475569;
      border-left: 2px solid #c7d2fe;
    }
    body.theme-dark .article > .muted {
      color: #cbd5e1;
    }
    body.theme-dark .article .lead,
    body.theme-dark .article p,
    body.theme-dark .article li {
      color: #dbe4ef;
    }
    body.theme-dark .article h2,
    body.theme-dark .article h3,
    body.theme-dark .article strong {
      color: #f8fafc;
    }
    body.theme-dark .article blockquote {
      color: #e5eef9;
      background: #172033;
      border-left-color: #60a5fa;
    }
    body.theme-dark .article a {
      color: #93c5fd;
    }
    body.theme-dark .article a:hover {
      color: #67e8f9;
    }
    .timer-banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 18px;
    }
    .timer-banner-label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
    }
    .timer-banner-time {
      font-size: 34px;
      font-weight: 900;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      margin-bottom: 4px;
    }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
    .card {
      background: var(--panel);
      border: 1px solid var(--frame-line); border-radius: 8px;
      padding: 20px; box-shadow: var(--frame-shadow);
    }
    .card h2, .card h3 {
      margin-top: 0;
      font-size: 24px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: 0;
    }
    .notice {
      margin-bottom: 18px; padding: 14px 16px; border-radius: 8px;
      background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
    }
    .notice.transient-notice {
      animation: noticeFadeOut 5s ease forwards;
    }
    .notice-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, 0.52);
      backdrop-filter: blur(4px);
    }
    .notice-modal-backdrop.is-closing {
      opacity: 0;
      transition: opacity 0.16s ease;
    }
    .notice-modal {
      width: min(520px, 100%);
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 26px;
      border-radius: 8px;
      border: 1px solid var(--frame-line);
      background: var(--panel);
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
      text-align: center;
      outline: none;
    }
    .notice-modal-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #1d4ed8;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }
    .notice-modal-icon svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .notice-modal h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.22;
    }
    .notice-modal p {
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.65;
    }
    .notice-modal-close {
      min-width: 132px;
      margin-top: 4px;
    }
    @keyframes noticeFadeOut {
      0%, 82% { opacity: 1; max-height: 90px; margin-bottom: 18px; padding-top: 14px; padding-bottom: 14px; }
      100% { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
    }
    .login-shell {
      display: grid;
      grid-template-columns: minmax(320px, 520px);
      justify-content: center;
      padding-top: 8px;
    }
    .login-card {
      padding: 26px;
      border-color: var(--frame-line);
    }
    .login-mark {
      display: grid;
      justify-items: center;
      gap: 10px;
      margin-bottom: 18px;
      text-align: center;
    }
    .login-mascot {
      width: 92px;
      height: 92px;
      filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.12));
    }
    .login-card h2 {
      margin-bottom: 4px;
    }
    .login-card .muted {
      margin-top: 14px;
      text-align: center;
    }
    .auth-links {
      margin-top: 16px;
      text-align: center;
    }
    .turnstile-box {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    form { display: grid; gap: 12px; }
    label { display: grid; gap: 6px; font-weight: 700; }
    .field-hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 600;
    }
    input, textarea, select {
      width: 100%; padding: 12px 14px; border-radius: 8px;
      border: 1px solid #d1d5db; background: #ffffff;
      color: var(--ink); font: inherit;
    }
    input::placeholder, textarea::placeholder { color: #9ca3af; }
    input:focus, textarea:focus, select:focus {
      outline: 2px solid #bfdbfe;
      border-color: var(--accent);
    }
    textarea { min-height: 120px; resize: vertical; }
    button, .button {
      display: inline-block; padding: 12px 16px; border-radius: 8px; border: 1px solid transparent;
      background: var(--accent); color: #ffffff; font-weight: 700; cursor: pointer;
      text-decoration: none;
      font-size: 16px;
      letter-spacing: 0;
      line-height: 1.25;
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
    }
    button:hover, .button:hover {
      transform: translateY(-1px);
      background: #3b82f6;
      filter: none;
      box-shadow: 0 12px 24px rgba(59, 130, 246, 0.20);
    }
    button:active, .button:active {
      transform: translateY(0);
      filter: brightness(0.96);
      box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
    }
    button:disabled, .button[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.55;
      transform: none;
      filter: grayscale(0.15);
      box-shadow: none;
    }
    .button.secondary, button.secondary { background: #ffffff; color: #374151; border-color: #d1d5db; box-shadow: none; }
    .button.warn, button.warn { background: #f59e0b; color: #111827; }
    button.resume { background: var(--success); color: #ffffff; }
    .button.secondary:hover, button.secondary:hover { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
    .button.warn:hover, button.warn:hover { background: #fbbf24; color: #111827; }
    button.resume:hover { background: #10b981; color: #ffffff; }
    .timer-banner button.secondary,
    .timer-banner button.warn,
    .timer-banner button.resume,
    .card .inline-actions button.secondary,
    .card .inline-actions button.warn,
    .card .inline-actions button.resume {
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    }
    .timer-banner button.secondary:hover,
    .timer-banner button.warn:hover,
    .timer-banner button.resume:hover,
    .card .inline-actions button.secondary:hover,
    .card .inline-actions button.warn:hover,
    .card .inline-actions button.resume:hover {
      transform: translateY(-1px);
      filter: none;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
    }
    .button.danger, button.danger { background: var(--danger); color: #ffffff; }
    .button.danger:hover, button.danger:hover { background: #ef4444; color: #ffffff; }
    body.theme-dark .preview-topbar,
    body.theme-dark .preview-panel,
    body.theme-dark .feature-mock,
    body.theme-dark .total-summary,
    body.theme-dark .confirm-summary,
    body.theme-dark .table-scroll thead th,
    body.theme-dark .admin-table-wrap thead th {
      background: #1f2937;
    }
    body.theme-dark .preview-video {
      background: #f9fafb;
    }
    body.theme-dark .preview-chip,
    body.theme-dark .log-demo-item,
    body.theme-dark .mock-chip,
    body.theme-dark .mock-cell,
    body.theme-dark .mock-input,
    body.theme-dark input,
    body.theme-dark textarea,
    body.theme-dark select,
    body.theme-dark .confirm-dialog {
      background: #111827;
      color: var(--ink);
      border-color: var(--frame-line);
    }
    body.theme-dark input::placeholder,
    body.theme-dark textarea::placeholder {
      color: #64748b;
    }
    body.theme-dark .button.secondary,
    body.theme-dark button.secondary {
      background: #1f2937;
      color: var(--ink);
      border-color: var(--frame-line);
    }
    body.theme-dark .button.secondary:hover,
    body.theme-dark button.secondary:hover {
      background: #172554;
      color: #dbeafe;
      border-color: #60a5fa;
    }
    body.theme-dark .button.warn,
    body.theme-dark button.warn {
      background: #f59e0b;
      color: #111827;
    }
    body.theme-dark .notice {
      background: #172554;
      color: #dbeafe;
      border-color: #3b82f6;
    }
    body.theme-dark .notice-modal-icon {
      color: #dbeafe;
      background: #172554;
      border-color: #3b82f6;
    }
    body.theme-dark .pill {
      background: #064e3b;
      color: #a7f3d0;
    }
    body.theme-dark .pill.locked { background: #7f1d1d; color: #fecaca; }
    body.theme-dark .pill.pending_email { background: #78350f; color: #fde68a; }
    .button.primary-cta, button.primary-cta {
      min-height: 58px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0;
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
    }
    .inline-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .filter-grid { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 18px; align-items: end; }
    .logs-filter-card { padding: 16px; }
    .logs-filter-card h2 { font-size: 20px; margin-bottom: 12px; }
    .logs-filter-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
      gap: 14px;
      align-items: stretch;
    }
    .logs-filter-form {
      display: grid;
      gap: 10px;
    }
    .logs-filter-form .filter-grid {
      grid-template-columns: minmax(90px, 0.7fr) minmax(190px, 1fr) minmax(190px, 1fr);
      gap: 10px;
    }
    .logs-filter-form label { font-size: 13px; }
    .logs-filter-form input { padding: 9px 10px; min-height: 40px; }
    .logs-filter-form .inline-actions { gap: 8px; }
    .logs-filter-form button,
    .logs-filter-form .button { padding: 9px 12px; font-size: 14px; }
    .date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    table { width: 100%; border-collapse: collapse; font-size: 15px; }
    th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
    th { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
    .scroll-card {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    .table-scroll {
      overflow: auto;
      min-height: 0;
      padding-right: 4px;
      scrollbar-color: #cbd5e1 #f3f4f6;
      scrollbar-width: thin;
    }
    .table-scroll thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f9fafb;
      box-shadow: 0 1px 0 var(--line);
    }
    .recent-log-card { max-height: min(330px, calc(100vh - 500px)); min-height: 230px; }
    .logs-table-card { max-height: min(620px, calc(100vh - 430px)); min-height: 360px; }
    .total-summary {
      display: grid;
      gap: 6px;
      padding: 16px;
      border-radius: 8px;
      background: #f9fafb;
      border: 1px solid var(--frame-line);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
      margin-top: 16px;
    }
    .logs-filter-shell .total-summary {
      margin-top: 0;
      align-content: center;
    }
    .logs-filter-shell .total-summary .metric {
      font-size: 30px;
    }
    .pill {
      display: inline-block; padding: 4px 8px; border-radius: 999px;
      background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700;
    }
    .pill.locked { background: #fee2e2; color: #991b1b; }
    .pill.pending_email { background: #fef3c7; color: #92400e; }
    .table-link {
      color: var(--accent);
      font-weight: 800;
      text-decoration: none;
    }
    .table-link:hover { text-decoration: underline; }
    .confirm-modal[hidden] { display: none; }
    .confirm-modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(10px);
    }
    .confirm-dialog {
      width: min(440px, 100%);
      background: #ffffff;
      border: 1px solid var(--frame-line);
      border-radius: 8px;
      box-shadow: 0 24px 80px rgba(37, 99, 235, 0.18), 0 0 0 3px rgba(37, 99, 235, 0.04);
      padding: 22px;
    }
    .confirm-dialog h3 {
      margin: 0 0 8px;
      font-size: 22px;
      letter-spacing: 0;
    }
    .confirm-dialog p { margin: 0 0 16px; color: var(--muted); }
    .confirm-modal .blog-media-dialog {
      width: min(1240px, calc(100vw - 56px));
      max-height: calc(100vh - 56px);
      overflow: auto;
      padding: 18px;
    }
    .blog-media-dialog .blog-media-panel {
      min-width: 0;
    }
    .blog-media-dialog .blog-media-head {
      grid-template-columns: minmax(280px, 1fr) minmax(280px, auto);
      align-items: start;
    }
    .blog-media-dialog .blog-media-toolbar {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
    .blog-media-dialog .blog-media-workspace {
      grid-template-columns: minmax(280px, 0.36fr) minmax(420px, 0.64fr);
      width: 100%;
      min-width: 0;
      height: min(460px, calc(100vh - 300px));
      min-height: 340px;
    }
    .blog-media-dialog .blog-media-list,
    .blog-media-dialog .blog-media-preview-panel {
      height: 100%;
      min-height: 0;
    }
    .blog-media-dialog .blog-media-preview {
      height: calc(100% - 34px);
      min-height: 260px;
    }
    .confirm-summary {
      display: grid;
      gap: 8px;
      margin: 16px 0;
      padding: 14px;
      border-radius: 8px;
      background: #f9fafb;
      border: 1px solid var(--frame-line);
    }
    .confirm-summary strong { color: var(--ink); }
    .license-delete-dialog {
      width: min(760px, 100%);
    }
    .license-delete-dialog .confirm-summary span {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }
    .metric {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }
    .timer-live {
      font-size: 44px;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      margin: 8px 0 6px;
    }
    .muted { color: var(--muted); }
    .split { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
    .api-license-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .admin-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
    .admin-main { display: grid; gap: 18px; }
    .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
    .admin-page-layout { display: grid; gap: 18px; }
    .admin-create-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(190px, 1fr));
      gap: 14px;
      align-items: start;
    }
    .admin-create-col {
      display: grid;
      gap: 12px;
    }
    .admin-create-submit {
      width: min(360px, 100%);
      justify-self: center;
    }
    .admin-edit-layout { display: grid; gap: 18px; align-items: start; }
    .admin-edit-profile { max-width: 100%; }
    .admin-edit-profile-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(190px, 1fr));
      gap: 14px;
      align-items: start;
      margin-top: 16px;
    }
    .admin-edit-profile-col {
      display: grid;
      gap: 12px;
    }
    .admin-edit-profile .inline-actions {
      align-items: center;
    }
    .admin-edit-save {
      width: min(360px, 100%);
      justify-self: center;
    }
    .license-tools { display: grid; gap: 8px; margin-bottom: 12px; }
    .license-quota-summary {
      display: grid;
      gap: 4px;
      margin-bottom: 6px;
    }
    .license-quota-summary p {
      margin: 0;
      line-height: 1.35;
    }
    .license-form-grid {
      display: grid;
      grid-template-columns: minmax(320px, 0.45fr) minmax(160px, 0.16fr) minmax(260px, 0.25fr);
      gap: 12px;
      align-items: end;
    }
    .license-action-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 120px));
      gap: 10px;
      align-items: stretch;
      justify-content: start;
    }
    .license-action-row form { display: block; }
    .license-action-row button {
      width: 100%;
      min-height: 36px;
      padding: 7px 10px;
      font-size: 13px;
    }
    .compact-table { font-size: 14px; }
    .compact-table th,
    .compact-table td { padding: 10px 8px; }
    .admin-user-list {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      max-height: min(680px, calc(100vh - 260px));
      min-height: 360px;
      overflow: hidden;
    }
    .admin-table-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0 16px;
    }
    .admin-search {
      max-width: 420px;
    }
    .admin-table-wrap {
      width: 100%;
      overflow: auto;
      min-height: 0;
      padding-right: 4px;
      scrollbar-color: #cbd5e1 #f3f4f6;
      scrollbar-width: thin;
    }
    .admin-table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f9fafb;
      box-shadow: 0 1px 0 var(--line);
    }
    .admin-table-wrap table { table-layout: fixed; min-width: 1080px; }
    .admin-table-wrap th:nth-child(1) { width: 13%; }
    .admin-table-wrap th:nth-child(2) { width: 18%; }
    .admin-table-wrap th:nth-child(3) { width: 22%; }
    .admin-table-wrap th:nth-child(4) { width: 9%; }
    .admin-table-wrap th:nth-child(5) { width: 12%; }
    .admin-table-wrap th:nth-child(6) { width: 26%; }
    .admin-table-wrap td { word-break: normal; overflow-wrap: anywhere; }
    .blog-table-wrap {
      max-height: min(760px, calc(100vh - 220px));
      min-height: 420px;
    }
    .blog-table-wrap table { min-width: 980px; }
    .blog-table-wrap th:nth-child(1) { width: 44%; }
    .blog-table-wrap th:nth-child(2) { width: 17%; }
    .blog-table-wrap th:nth-child(3) { width: 9%; }
    .blog-table-wrap th:nth-child(4) { width: 11%; }
    .blog-table-wrap th:nth-child(5) { width: 12%; }
    .blog-table-wrap th:nth-child(6) { width: 7%; }
    .blog-table-wrap th:last-child,
    .blog-table-wrap td:last-child { text-align: right; }
    .blog-row-actions {
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 6px;
    }
    .blog-title-link {
      font-size: 14px;
      line-height: 1.35;
    }
    .blog-filter-form {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      flex-wrap: wrap;
    }
    .blog-filter-form label {
      margin: 0;
      min-width: 0;
    }
    .blog-manager-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }
    .blog-manager-head h2 {
      margin: 0;
      white-space: nowrap;
    }
    .blog-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .blog-filter-select {
      min-width: 260px;
      width: 260px;
      min-height: 48px;
      height: auto;
      padding-top: 13px;
      padding-bottom: 13px;
      padding-right: 42px;
      flex: 0 0 auto;
      line-height: 1.4;
      font-weight: 700;
    }
    .blog-toolbar .button,
    .blog-toolbar button {
      min-height: 44px;
      white-space: nowrap;
    }
    .blog-toolbar-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .blog-toolbar-icon svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .blog-ai-draft-cta {
      min-width: 176px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      color: #ffffff;
      background: #6d5dfc;
      box-shadow: 0 10px 22px rgba(109, 93, 252, 0.24);
    }
    .blog-ai-draft-cta svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .blog-ai-draft-cta:hover {
      background: #5b4ee6;
    }
    .blog-toolbar-divider {
      width: 1px;
      height: 32px;
      background: var(--line);
      margin: 0 2px;
    }
    .blog-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background: #f9fafb;
      color: #374151;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .blog-ai-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      flex-wrap: wrap;
    }
    .blog-ai-model {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      max-width: 180px;
      padding: 4px 8px;
      border-radius: 999px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      font-size: 12px;
      font-weight: 750;
    }
    .blog-table-wrap thead th {
      color: #111827;
      font-weight: 850;
      letter-spacing: 0.02em;
      background: #eef4ff;
    }
    body.theme-dark .blog-table-wrap thead th {
      color: #f8fafc;
      background: #1e293b;
      box-shadow: 0 1px 0 #334155;
    }
    body.theme-dark .blog-ai-model {
      color: #cbd5e1;
      background: #0f172a;
      border-color: #334155;
    }
    .blog-status-running { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .blog-status-done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
    .blog-status-failed { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
    .button.is-disabled {
      opacity: 0.55;
      pointer-events: none;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    .blog-row-actions form { margin: 0; }
    .blog-icon-button {
      width: 34px;
      height: 34px;
      min-width: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .blog-icon-button svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .admin-user-table-wrap {
      overflow: auto;
      min-height: 0;
      max-height: 100%;
      padding-right: 4px;
    }
    .admin-user-table-wrap table {
      min-width: 0;
      table-layout: fixed;
    }
    .admin-user-table-wrap th:nth-child(1) { width: 11%; }
    .admin-user-table-wrap th:nth-child(2) { width: 18%; }
    .admin-user-table-wrap th:nth-child(3) { width: 24%; }
    .admin-user-table-wrap th:nth-child(4) { width: 8%; }
    .admin-user-table-wrap th:nth-child(5) { width: 10%; }
    .admin-user-table-wrap th:nth-child(6) { width: 29%; }
    .admin-user-table-wrap td {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .admin-user-table-wrap .action-row {
      grid-template-columns: minmax(82px, 0.8fr) minmax(116px, 1fr) minmax(58px, auto) minmax(58px, auto);
      gap: 8px;
    }
    .admin-user-table-wrap .action-row button {
      min-width: 58px;
      padding: 8px 10px;
      font-size: 14px;
    }
    .license-table-wrap {
      overflow: visible;
      padding-right: 0;
    }
    .license-table-wrap table {
      min-width: 0;
      table-layout: fixed;
    }
    .license-table-wrap th:nth-child(1) { width: 30%; }
    .license-table-wrap th:nth-child(2) { width: 24%; }
    .license-table-wrap th:nth-child(3) { width: 16%; }
    .license-table-wrap th:nth-child(4) { width: 16%; }
    .license-table-wrap th:nth-child(5) { width: 14%; }
    .license-table-wrap td {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .license-table-wrap td:first-child {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: normal;
      overflow-wrap: normal;
    }
    .license-table-wrap .inline-actions {
      flex-wrap: nowrap;
      gap: 18px;
    }
    .license-table-wrap button,
    .license-download-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 10px;
      font-size: 13px;
      border-radius: 10px;
    }
    .action-stack { display: grid; gap: 0; min-width: 0; width: 100%; }
    .action-row {
      display: grid;
      grid-template-columns: minmax(96px, 1fr) minmax(150px, 1.35fr) minmax(74px, auto) minmax(74px, auto);
      gap: 8px;
      align-items: center;
    }
    .action-row select {
      min-width: 0;
      padding: 10px 34px 10px 12px;
    }
    .action-row button {
      min-width: 74px;
      padding: 10px 14px;
    }
    @media (max-width: 800px) {
      .public-hero { grid-template-columns: 1fr; }
      .product-preview,
      .log-demo-cell,
      .benefit-grid,
      .feature-intro-grid,
      .content-grid,
      .contact-methods,
      .form-grid.two,
      .log-demo-grid { grid-template-columns: 1fr; }
      .preview-window,
      .public-kpi { justify-self: stretch; width: 100%; }
      .public-kpi {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        grid-template-rows: none;
      }
      .preview-row { grid-template-columns: 1fr; }
      .public-hero h2 { white-space: normal; }
      .public-hero .lead { white-space: normal; }
      .section-head h2 { white-space: normal; }
      .section-head .lead { white-space: normal; }
      .benefit-grid .card:first-child p { white-space: normal; }
      .blog-layout { grid-template-columns: 1fr; }
      .blog-sidebar {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--frame-line);
        padding: 0 0 14px;
      }
      .blog-detail-layout { grid-template-columns: 1fr; }
      .blog-toc {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--frame-line);
        padding: 0 0 14px;
      }
      .blog-grid { grid-template-columns: minmax(0, 1fr); }
      .blog-card { width: 100%; }
      .blog-edit-meta-grid,
      .blog-media-workspace {
        grid-template-columns: 1fr;
      }
      .blog-media-head {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .confirm-modal .blog-media-dialog {
        width: min(760px, calc(100vw - 28px));
        padding: 14px;
      }
      .blog-media-dialog .blog-media-head,
      .blog-media-dialog .blog-media-workspace {
        grid-template-columns: 1fr;
      }
      .blog-media-toolbar {
        justify-content: flex-start;
      }
      .blog-cover-field,
      .blog-summary-field {
        grid-column: auto;
      }
      .blog-media-workspace,
      .blog-media-preview-panel {
        height: auto;
        min-height: 0;
      }
      .blog-media-list {
        height: auto;
        max-height: 260px;
      }
      .blog-media-preview {
        height: 260px;
      }
      .feature-row,
      .expanded-features .feature-row { grid-template-columns: 1fr; }
      .feature-row h2,
      .feature-row p { white-space: normal; }
      .mock-row,
      .mock-form { grid-template-columns: 1fr; }
      .split { grid-template-columns: 1fr; }
      .filter-grid { grid-template-columns: 1fr; }
      .logs-filter-shell,
      .logs-filter-form .filter-grid { grid-template-columns: 1fr; }
      .admin-edit-layout { grid-template-columns: 1fr; }
      .admin-create-grid { grid-template-columns: 1fr; }
      .admin-edit-profile-grid,
      .license-form-grid { grid-template-columns: 1fr; }
      .hero { align-items: flex-start; }
      .nav-user { width: 100%; margin-left: 0; }
      .account-panel {
        width: fit-content;
        margin-left: 0;
      }
      .account-copy strong { max-width: min(260px, 72vw); }
      .account-menu-list {
        left: 0;
        right: auto;
      }
      .timer-banner { align-items: stretch; }
      .field-with-action { grid-template-columns: 1fr; }
    }
    @media (max-width: 1220px) {
      .admin-shell,
      .admin-grid { grid-template-columns: 1fr; }
    }