@font-face {
    font-family: 'Maplestory';
    src: url('/fonts/Maplestory OTF Light.otf') format('opentype');
    font-weight: 300;
  }
  @font-face {
    font-family: 'Maplestory';
    src: url('/fonts/Maplestory OTF Bold.otf') format('opentype');
    font-weight: 700;
  }

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

  :root {
    --sidebar-width: 240px;
    --accent: #3b82f6;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --card-bg: #ffffff;
  }

  body {
    font-family: 'Maplestory', sans-serif;
    font-weight: 300;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
  }

  /* 사이드바 */
  aside {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding: 2rem 1.5rem;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
  }

  .sidebar-title span { color: var(--accent); }

  .sidebar-divider {
    height: 1px;
    background: linear-gradient(to right, var(--accent), transparent);
    margin: -0.5rem 0;
  }

  .social-links {
    display: flex;
    gap: 0.4rem;
  }

  .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: var(--muted);
    transition: color .15s, background .15s;
  }

  .social-links a:hover {
    color: var(--accent);
    background: #eff6ff;
  }

  .social-links svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  nav { display: flex; flex-direction: column; gap: 0.25rem; }

  nav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
  }

  nav a:hover, nav a.active {
    background: #eff6ff;
    color: var(--accent);
  }

  .nav-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem 0.6rem;
  }

  .sidebar-footer {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--muted);
  }

  /* 메인 콘텐츠 */
  main {
    margin-left: var(--sidebar-width);
    padding: 3rem 4rem;
    max-width: 860px;
    width: 100%;
  }

  section {
    margin-bottom: 4rem;
    scroll-margin-top: 2rem;
  }

  .section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  /* About */
  .about-placeholder {
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 2rem;
    color: var(--muted);
    text-align: center;
    font-size: 0.9rem;
    line-height: 2;
  }

  /* Skills */
  .skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .skill-badge {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .skill-badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
  }

  /* Projects */
  .project-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .project-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
  .project-card p  { font-size: 0.85rem; color: var(--muted); }

  .status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
    white-space: nowrap;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
  }

  /* GitHub */
  .repo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
  }

  .repo-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .repo-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(59,130,246,.08);
  }

  .repo-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
  }

  .repo-desc {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
    flex: 1;
  }

  .repo-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.3rem;
  }

  .repo-lang {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--muted);
  }

  .lang-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .repo-stars {
    font-size: 0.78rem;
    color: var(--muted);
  }

  .repo-updated {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: auto;
  }

  /* README 모달 */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--card-bg);
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .modal-actions { display: flex; align-items: center; gap: 0.75rem; }

  .modal-github-link {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
  }

  .modal-github-link:hover { text-decoration: underline; }

  .modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 0.25rem;
    display: flex;
    border-radius: 6px;
    transition: background .15s;
  }

  .modal-close:hover { background: var(--bg); color: var(--text); }

  .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    line-height: 1.8;
    font-size: 0.9rem;
    color: var(--text);
  }

  /* 마크다운 스타일 */
  .modal-body h1, .modal-body h2, .modal-body h3 {
    margin: 1.2em 0 0.5em;
    font-weight: 700;
  }
  .modal-body h1 { font-size: 1.4rem; }
  .modal-body h2 { font-size: 1.15rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
  .modal-body h3 { font-size: 1rem; }
  .modal-body p  { margin: 0.6em 0; }
  .modal-body code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.85em;
    font-family: monospace;
  }
  .modal-body pre {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.8em 0;
  }
  .modal-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.85rem;
  }
  .modal-body ul, .modal-body ol { padding-left: 1.5em; margin: 0.5em 0; }
  .modal-body a { color: var(--accent); }
  .modal-body img { max-width: 100%; border-radius: 6px; }

  /* Blog */
  .post-list { display: flex; flex-direction: column; gap: 0.6rem; }

  .post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color .2s, box-shadow .2s;
  }

  .post-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(59,130,246,.08);
  }

  .post-category {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .post-title {
    flex: 1;
    font-size: 0.92rem;
    color: var(--text);
  }

  .post-date {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .loading { text-align: center; color: var(--muted); padding: 2rem; font-size: 0.9rem; }

  .expand-bar {
    text-align: center;
    padding: 0.65rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    grid-column: 1 / -1;
  }

  .expand-bar:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #eff6ff;
  }

  /* 반응형 */
  @media (max-width: 768px) {
    aside { display: none; }
    main  { margin-left: 0; padding: 2rem 1.2rem; }
  }

  /* ── Scan ───────────────────────────── */
  .scan-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem; }
  .scan-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .scan-form input {
    flex: 1 1 18rem; min-width: 0; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.9rem;
    color: var(--text); background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 8px;
  }
  .scan-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .scan-form button {
    padding: 0.6rem 1.2rem; font: inherit; font-size: 0.9rem; color: #fff; background: var(--accent);
    border: 0; border-radius: 8px; cursor: pointer;
  }
  .scan-form button:disabled { opacity: 0.55; cursor: default; }
  .sample-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
  .sample-row[hidden] { display: none; }
  .sample-row button {
    padding: 0.45rem 0.9rem; font: inherit; font-size: 0.85rem; color: var(--muted);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  }
  .sample-row button:hover { color: var(--text); border-color: var(--accent); }
  .sample-run {
    padding: 0.4rem 0.9rem; font: inherit; font-size: 0.85rem; color: #fff; background: var(--accent);
    border: 0; border-radius: 8px; cursor: pointer;
  }
  .sample-why {
    margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: 8px;
    background: var(--bg); border-left: 3px solid var(--accent);
    font-size: 0.85rem; line-height: 1.8; color: var(--text);
  }
  .scan-result { margin-top: 1rem; font-size: 0.88rem; }
  .scan-note {
    padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; line-height: 1.6;
  }
  .scan-target { color: var(--muted); margin-bottom: 0.6rem; word-break: break-all; }
  .scan-table { width: 100%; border-collapse: collapse; }
  .scan-table td {
    padding: 0.5rem 0.6rem; border-top: 1px solid var(--border); vertical-align: top;
    word-break: break-all;
  }
  .scan-table td.where { color: var(--muted); white-space: nowrap; }
  .scan-table td.code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .scan-row { cursor: pointer; }
  .scan-row:hover td { background: var(--bg); }
  .scan-row td.code::after { content: " \25be"; color: var(--muted); }
  .scan-row.open td.code::after { content: " \25b4"; }
  .scan-detail td { background: var(--bg); padding: 0.85rem 0.9rem; }
  .scan-why { font-size: 0.85rem; line-height: 1.8; word-break: normal; }
  .scan-why + .scan-why { margin-top: 0.7rem; }
  .scan-why b {
    display: block; color: var(--muted); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .sev {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  }
  .sev.sev-high   { background: #fee2e2; color: #b91c1c; }
  .sev.sev-medium { background: #ffedd5; color: #c2410c; }
  .sev.sev-low    { background: #e0f2fe; color: #0369a1; }
  .sev.sev-info   { background: #f1f5f9; color: #475569; }

  /* ── 엔진 로그 ───────────────────────── */
  .engine {
    margin-top: 1.25rem;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #cbd5e1;
  }

  .engine-head, .engine-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .engine-head { border-bottom: 1px solid #1e293b; padding-bottom: 0.7rem; }
  .engine-foot { border-top: 1px solid #1e293b; padding-top: 0.7rem; margin-top: 0.7rem; }

  .engine-dots { display: flex; gap: 0.4rem; }
  .engine-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
  .engine-dots i:nth-child(1) { background: #7f1d1d; }
  .engine-dots i:nth-child(2) { background: #78350f; }
  .engine-dots i:nth-child(3) { background: #14532d; }

  .engine-lines {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.7rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .engine-lines p {
    border-left: 2px solid #1e293b;
    padding: 0.15rem 0 0.15rem 0.7rem;
    word-break: break-all;
  }

  .engine-lines p.head { border-left-color: #22c55e; color: #4ade80; font-weight: 700; }
  .engine-lines p.tag::before { content: "[INFO] "; color: #818cf8; }
  .engine-lines p.bad { border-left-color: #ef4444; color: #fca5a5; }
  .engine-lines p.bad::before { content: "[FAIL] "; color: #ef4444; }

  .engine-lines p.note { border-left-color: #f59e0b; color: #fcd34d; }
  .engine-lines p.note::before { content: "[NOTE] "; color: #f59e0b; }

  .engine-lines p.lv::before { content: "[" attr(data-label) "] "; font-weight: 700; }
  .engine-lines p.sev-high   { border-left-color: #ef4444; }
  .engine-lines p.sev-high::before   { color: #f87171; }
  .engine-lines p.sev-medium { border-left-color: #f97316; }
  .engine-lines p.sev-medium::before { color: #fb923c; }
  .engine-lines p.sev-low    { border-left-color: #38bdf8; }
  .engine-lines p.sev-low::before    { color: #7dd3fc; }
  .engine-lines p.sev-info   { border-left-color: #64748b; }
  .engine-lines p.sev-info::before   { color: #94a3b8; }

  .engine-status { font-weight: 700; color: #facc15; }
  .engine-status.done { color: #4ade80; }
  .engine-status.bad  { color: #ef4444; }

  .cursor { display: inline-block; width: 0.5rem; height: 0.9em; background: #4ade80; vertical-align: -0.1em; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

  /* ===== Tools: SuNiffing 시뮬레이션 데모 ===== */
  .suniff-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.2rem; }
  .suniff-desc b { color: var(--text); }
  .suniff-desc .warn { color: #c2410c; }

  .suniff { font-family: system-ui, -apple-system, sans-serif; }
  .suniff [hidden] { display: none !important; }

  .suniff .sniff-stage { display:grid; grid-template-columns:300px 1fr; gap:1.5rem; align-items:stretch; }
  @media (max-width:960px){ .suniff .sniff-stage{ grid-template-columns:1fr; justify-items:center; } }

  /* 폰 */
  .suniff .phone { width:300px; min-height:600px; background:#0b0b0d; border-radius:40px; padding:12px; box-shadow:0 20px 50px rgba(0,0,0,.35); position:relative; display:flex; flex-direction:column; }
  .suniff .phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0b0b0d; border-radius:0 0 14px 14px; z-index:5; }
  .suniff .screen { width:100%; flex:1; min-height:0; background:#1e1e1e; border-radius:30px; overflow:hidden; display:flex; flex-direction:column; color:#e0e0e0; font-size:13px; position:relative; }
  .suniff .statusbar { height:34px; background:#2b6cd4; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:11px; color:#fff; flex-shrink:0; }
  .suniff .topbar { display:flex; gap:8px; padding:10px; }
  .suniff .devfield { flex:1; background:#252525; border:1px solid #555; border-radius:6px; padding:8px 10px; }
  .suniff .startbtn { border-radius:6px; padding:8px 12px; font-weight:600; cursor:pointer; border:1px solid #34613c; background:#2c5233; color:#dfe7e0; user-select:none; }
  .suniff .startbtn.on { background:#5e2b2b; border-color:#743636; color:#f0dede; }
  .suniff .seg { display:flex; margin:0 10px 8px; background:#202020; border:1px solid #303030; border-radius:8px; }
  .suniff .seg div { flex:1; text-align:center; padding:7px; color:#9a9a9a; font-weight:600; border-radius:6px; }
  .suniff .seg .on { background:#3779c2; color:#fff; }
  .suniff .list { flex:1; overflow-y:auto; padding:0 10px; }
  .suniff .hint { color:#6a6a6a; text-align:center; padding:40px 20px; font-size:12px; line-height:1.7; }
  .suniff .ap { border-bottom:1px solid #2a2a2a; padding:9px 6px 9px 4px; cursor:pointer; position:relative; opacity:0; transform:translateY(6px); animation:snfade .35s forwards; }
  .suniff .ap.sel { background:#31517d; }
  .suniff .ap.att::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#8f3a3a; }
  .suniff .ap.gone { opacity:.28; }
  .suniff .ap .r1 { display:flex; justify-content:space-between; align-items:baseline; }
  .suniff .ap .r2 { display:flex; justify-content:space-between; align-items:baseline; margin-top:2px; }
  .suniff .ap .ss{ font-weight:700; color:#fff; font-size:14px; }
  .suniff .ap .mac{ color:#8a8a8a; font-size:10px; }
  .suniff .ap .sec{ font-size:8.5px; font-weight:700; }
  .suniff .ap .pwr{ font-weight:700; font-size:12px; }
  .suniff .ap .ch{ color:#8a8a8a; font-size:10px; }
  .suniff .red{ color:#e05656; } .suniff .amber{ color:#f9a825; } .suniff .green{ color:#4caf72; }
  .suniff .b-strong{ color:#5fb3ff; } .suniff .b-mid{ color:#4a86c7; } .suniff .b-weak{ color:#6c7a88; }
  @keyframes snfade{ to{ opacity:1; transform:none; } }
  .suniff .chchip { margin:8px 10px 12px; align-self:flex-start; color:#87CEFA; font-weight:700; background:#1b1b1b; border:1px solid #2c2c2c; border-radius:8px; padding:5px 12px; font-size:12px; }
  .suniff .banner { margin:0 10px 6px; background:#241618; border:1px solid #4f2a2d; border-radius:10px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; }
  .suniff .banner .dot{ color:#c96a6a; } .suniff .banner b{ color:#fff; }
  .suniff .banner .stop { background:#8f3a3a; color:#f0dede; border-radius:6px; padding:5px 10px; font-weight:600; cursor:pointer; }
  .suniff .overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:4; }
  .suniff .card2 { background:#2a2a2a; border:1px solid #454545; border-radius:12px; padding:16px; width:230px; }
  .suniff .card2 h4 { font-size:14px; color:#fff; margin-bottom:12px; }
  .suniff .band { display:block; width:100%; text-align:left; background:#333; border:1px solid #444; color:#e0e0e0; border-radius:8px; padding:9px 12px; margin-bottom:8px; cursor:pointer; font-size:12px; }
  .suniff .band b{ color:#fff; } .suniff .band small{ color:#9a9a9a; }
  .suniff .fld { margin-bottom:11px; }
  .suniff .fld label{ display:block; font-size:11px; color:#aaa; margin-bottom:5px; }
  .suniff .fld select, .suniff .fld input { width:100%; background:#252525; color:#e0e0e0; border:1px solid #555; border-radius:6px; padding:7px 8px; font-size:12px; }
  .suniff .btnrow { display:flex; gap:8px; margin-top:4px; }
  .suniff .btnrow button { flex:1; border-radius:8px; padding:9px; font-weight:600; font-size:12px; cursor:pointer; border:none; }
  .suniff .btnrow .cancel { background:#2d2d2d; color:#cfcfcf; border:1px solid #555; }
  .suniff .btnrow .ok { background:#3779c2; color:#fff; }
  .suniff .menu { background:#2a2a2a; border:1px solid #454545; border-radius:10px; padding:6px; width:190px; }
  .suniff .mitem { padding:9px 12px; font-size:12px; color:#e0e0e0; border-radius:6px; cursor:pointer; }
  .suniff .mitem:hover { background:#3779c2; color:#fff; } .suniff .mitem.danger { color:#e6a5a5; }
  .suniff .msep { height:1px; background:#3a3a3a; margin:5px 6px; }
  .suniff .toast { position:absolute; bottom:56px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; font-size:11px; padding:8px 14px; border-radius:20px; z-index:6; }

  /* 오른쪽 */
  .suniff .rightcol { width:100%; display:flex; flex-direction:column; gap:1rem; }
  .suniff .laptop { width:100%; }
  .suniff .lid { background:#0b0b0d; border:10px solid #17171a; border-radius:14px 14px 0 0; aspect-ratio:16/10; position:relative; overflow:hidden; }
  .suniff .base { height:14px; background:linear-gradient(#cfd3d9,#9aa0a8); border-radius:0 0 16px 16px; position:relative; }
  .suniff .base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:5px; background:#7d838b; border-radius:0 0 7px 7px; }
  .suniff .ytframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .suniff .spinner { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; opacity:0; pointer-events:none; transition:opacity .25s; }
  .suniff .spin { width:34px; height:34px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:snspin 1s linear infinite; }
  @keyframes snspin { to{ transform:rotate(360deg); } }
  .suniff .lid.buffering .spinner { opacity:1; }
  .suniff .steps { background:#0f172a; border:1px solid #1e293b; border-radius:14px; padding:1rem 1.2rem; color:#94a3b8; font-size:.82rem; line-height:1.95; }
  .suniff .steps li { list-style:none; opacity:.4; transition:opacity .3s; }
  .suniff .steps li.done { opacity:1; color:#cbd5e1; }
  .suniff .steps li.done::before { content:"✓ "; color:#4ade80; }
  .suniff .why { border:1px solid #1e293b; background:#0f172a; border-radius:12px; padding:.9rem 1.1rem; min-height:96px; }
  .suniff .why.ok  { border-left:4px solid #4caf72; }
  .suniff .why.warn{ border-left:4px solid #f9a825; }
  .suniff .why.bad { border-left:4px solid #e05656; }
  .suniff .why h5 { font-size:.92rem; color:#e2e8f0; margin-bottom:.4rem; }
  .suniff .why.ok h5{ color:#7fd1a0; } .suniff .why.warn h5{ color:#f4c95d; } .suniff .why.bad h5{ color:#ef8a8a; }
  .suniff .why p  { font-size:.82rem; color:#94a3b8; line-height:1.65; }
  .suniff .legend { font-size:.75rem; color:#64748b; line-height:1.8; margin-top:1.25rem; }
  .suniff .legend b{ color:#475569; }
  .suniff .legend .red{ color:#e05656; } .suniff .legend .amber{ color:#d99a10; } .suniff .legend .green{ color:#3f9e68; }