/* ===================== DESIGN TOKENS ===================== */
  :root{
    --amber:#FFC93C;
    --amber-soft:#FFE49A;
    --violet:#6C4BFF;
    --violet-soft:#A08BFF;
    --ink:#0B0D12;
    --success:#34D399;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  html[data-theme="dark"]{
    --bg:#0B0D12; --surface:#14171F; --card:#1A1E28; --card-alt:#20242F;
    --border:#262B38; --text:#F5F6F7; --muted:#8B93A7;
  }
  html[data-theme="light"]{
    --bg:#F6F6F3; --surface:#FFFFFF; --card:#FFFFFF; --card-alt:#F1F1EE;
    --border:#E7E7E2; --text:#12141A; --muted:#666E7D;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:var(--font-body);
    background:var(--stage-bg, #05060A);
    color:var(--text);
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:32px 12px;
    transition:background .25s ease;
  }
  html[data-theme="light"] body{ --stage-bg:#EDEDE8; }
  html[data-theme="dark"] body{ --stage-bg:#05060A; }

  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  input{ font-family:inherit; }

  /* ===================== TOP BAR ===================== */
  .topbar{ display:flex; align-items:center; gap:10px; }
  .topbar span{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
  .btn-restart{
    display:flex; align-items:center; gap:6px; font-size:11px; padding:6px 12px;
    border-radius:999px; background:var(--card); color:var(--text); border:1px solid var(--border);
    transition:transform .15s;
  }
  .btn-restart:active{ transform:scale(.95); }

  /* ===================== PHONE FRAME ===================== */
  .phone{
    position:relative; width:380px; height:800px; border-radius:44px; padding:12px;
    background:#000; box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  html[data-theme="light"] .phone{ background:#1a1a1a; }
  .notch{
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    width:110px; height:20px; border-radius:999px; background:#000; z-index:20;
  }
  .viewport{
    width:100%; height:100%; border-radius:34px; overflow:hidden; position:relative;
    background:var(--bg);
  }

  .footer-tag{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }

  /* ===================== SCREENS ===================== */
  .screen{ display:none; height:100%; width:100%; flex-direction:column; }
  .screen.active{ display:flex; }
  /* Wraps each screen's content so desktop can center a narrower column
     without touching the screen's own full-height/width sizing. */
  .screen-inner{ height:100%; width:100%; display:flex; flex-direction:column; }

  /* ===================== CHOICE SCREEN ===================== */
  #screen-choice .screen-inner{ padding:24px; justify-content:space-between; }
  .choice-top{ display:flex; justify-content:flex-end; }
  .choice-mid{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px; }
  .eyebrow-pill{
    display:flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
    background:var(--card-alt); border:1px solid var(--border);
  }
  .eyebrow-pill span{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
  .logo-hero{ font-family:var(--font-display); font-size:44px; font-weight:700; line-height:1.05; }
  .logo-hero .accent{ color:var(--amber); }
  .choice-mid p{ font-size:14px; color:var(--muted); max-width:260px; }
  .choice-bottom{ display:flex; flex-direction:column; gap:12px; padding-bottom:6px; }

  /* ===================== LOGIN ===================== */
  .text-link-center{
    display:block; width:100%; text-align:center; font-size:12px; color:var(--muted); padding:4px;
  }
  .text-link-center strong{ color:var(--amber); font-weight:600; }

  .text-link{
    font-size:12px; font-weight:500; color:var(--amber); display:inline-block; margin:-4px 0 8px;
  }

  .login-type-switch{
    display:flex; gap:4px; margin-bottom:20px; border-radius:14px; background:var(--card-alt); padding:4px;
  }
  .login-type-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px; border-radius:11px; font-size:13px; font-weight:600; color:var(--muted);
    transition:background .15s, color .15s;
  }
  .login-type-btn.active{ background:var(--amber); color:var(--ink); }
  /* a aba Empresa usa violeta quando ativa, pra bater com a cor desse modo no resto do app */
  #login-type-company.active{ background:var(--violet); color:#fff; }

  /* ===================== SHARED COMPONENTS ===================== */
  .theme-toggle{
    width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    background:var(--card-alt); border:1px solid var(--border); transition:transform .15s;
  }
  .theme-toggle:active{ transform:scale(.9); }

  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    border-radius:14px; padding:13px 20px; font-weight:600; font-size:14px;
    transition:transform .15s;
  }
  .btn:active{ transform:scale(.97); }
  .btn.full{ width:100%; }
  .btn.amber{ background:var(--amber); color:var(--ink); }
  .btn.violet{ background:var(--violet); color:#fff; }
  .btn.ghost{ background:var(--card); color:var(--text); border:1px solid var(--border); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .btn:disabled:active{ transform:none; }

  .chip{
    display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500;
    padding:5px 10px; border-radius:999px; white-space:nowrap; font-family:var(--font-body);
  }
  .chip.surface{ background:var(--card-alt); color:var(--text); border:1px solid var(--border); }
  .chip.outline{ background:transparent; color:var(--muted); border:1px solid var(--border); }
  .chip.outline.on-dark{ color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.35); }
  .chip.amber{ background:var(--amber); color:var(--ink); }
  .chip.violet{ background:var(--violet); color:#fff; }
  .chip.success{ background:rgba(52,211,153,.15); color:var(--success); border:1px solid rgba(52,211,153,.35); }

  .section-label{
    font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); margin-bottom:8px;
  }

  .icon{ display:inline-flex; }
  .icon svg{ display:block; }

  /* ===================== ONBOARDING ===================== */
  #screen-onboarding{ }
  .ob-header{ padding:20px 20px 12px; }
  .ob-header-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .icon-btn{
    width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    background:var(--card-alt);
  }
  .ob-step-count{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
  .progress-track{ display:flex; gap:6px; margin-bottom:20px; }
  .progress-seg{ height:4px; flex:1; border-radius:999px; overflow:hidden; background:var(--card-alt); }
  .progress-seg-fill{ height:100%; width:0%; border-radius:999px; transition:width .3s; }
  .ob-title{ font-family:var(--font-display); font-size:24px; font-weight:600; }
  .ob-body{ flex:1; overflow-y:auto; padding:0 20px; }
  .ob-footer{ padding:20px; }

  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:6px; }
  .field-box{
    display:flex; align-items:center; gap:8px; border-radius:14px; padding:13px 14px;
    background:var(--card-alt); border:1px solid var(--border);
  }
  .field-box span{ font-size:14px; color:var(--muted); }
  .field-box input{
    all:unset; width:100%; font-size:14px; color:var(--text); font-family:inherit;
  }
  .field-box input::placeholder{ color:var(--muted); }
  .field-box.invalid{ border-color:#EF4444 !important; background:rgba(239,68,68,.06); }
  .field-error{
    display:none; font-size:11px; color:#EF4444; margin-top:6px; font-weight:500;
  }

  .upload-box{
    border-radius:16px; background:var(--card-alt); border:2px dashed var(--border);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    text-align:center; padding:24px; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .upload-box.filled{ border-style:solid; border-color:var(--success); background:rgba(52,211,153,.08); }
  .upload-box.invalid{ border-color:#EF4444; background:rgba(239,68,68,.06); }
  .upload-circle{ width:112px; height:112px; border-radius:999px; }
  .upload-square{ width:96px; height:96px; border-radius:16px; }
  .upload-box p{ font-size:12px; color:var(--muted); max-width:200px; }

  .video-box{
    width:100%; aspect-ratio:9/13; border-radius:20px; background:var(--card-alt); border:2px dashed var(--border);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin-bottom:12px;
    cursor:pointer; transition:border-color .15s, background .15s;
  }
  .video-box.filled{ border-style:solid; border-color:var(--success); background:rgba(52,211,153,.08); }
  .video-box.invalid{ border-color:#EF4444; background:rgba(239,68,68,.06); }
  .video-box.institutional{ aspect-ratio:16/9; }
  .play-fab{ width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
  .play-fab.amber{ background:var(--amber); color:var(--ink); }
  .play-fab.violet{ background:var(--violet); color:#fff; }

  .moderation-note{
    display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--muted);
    margin-bottom:8px; line-height:1.4;
  }

  .cert-row{
    display:flex; align-items:center; gap:10px; border-radius:14px; padding:12px 14px;
    background:var(--card-alt); border:1px solid var(--border); margin-bottom:8px; font-size:14px;
  }
  .add-link{ font-size:12px; font-weight:500; color:var(--amber); }
  .skills-wrap{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }

  /* ===================== APP SHELL ===================== */
  #screen-app{ position:relative; }
  .app-header{
    display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
    border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
  }
  .app-logo{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:14px; font-weight:700; }
  .app-logo .accent{ color:var(--amber); }
  .header-actions{ display:flex; align-items:center; gap:8px; }
  .mode-pill{
    display:flex; align-items:center; gap:5px; font-size:10px; font-weight:500; padding:6px 10px;
    border-radius:999px; background:var(--card-alt); color:var(--muted);
  }
  .app-body{ flex:1; min-height:0; position:relative; }

  /* App shell: mobile/tablet = single column (sidebar hidden); desktop overrides below */
  .app-shell{ display:block; height:100%; min-height:0; }
  .desktop-sidebar{ display:none; }

  .tab-panel{ display:none; height:100%; }
  .tab-panel.active{ display:block; }

  /* ===================== FEED ===================== */
  .feed-scroll{ height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; }
  .feed-scroll::-webkit-scrollbar{ display:none; }
  .feed-card{ position:relative; height:100%; width:100%; scroll-snap-align:start; }
  /* Mobile/tablet: video fills the whole card, chips & rail overlay on top of it (TikTok mobile).
     Desktop overrides this into a bounded card + a side rail (TikTok desktop) — see media query. */
  .feed-video-wrap{ position:absolute; inset:0; }
  .feed-card-bg{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .feed-play-circle{
    width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .duration-chip{
    position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px;
    padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  }
  .rec-dot{ position:relative; width:6px; height:6px; }
  .rec-dot::before, .rec-dot::after{
    content:''; position:absolute; inset:0; border-radius:999px; background:#ef4444;
  }
  .rec-dot::before{ animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite; opacity:.75; }
  @keyframes ping{ 75%,100%{ transform:scale(2.2); opacity:0; } }
  .duration-chip span{ font-family:var(--font-mono); font-size:11px; color:#fff; }

  .ai-verified-chip{ position:absolute; top:44px; left:12px; }

  .match-badge{
    position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px;
    padding:6px 10px; border-radius:999px; background:var(--amber); color:var(--ink);
  }
  .match-badge span{ font-family:var(--font-mono); font-size:11px; font-weight:600; }

  .rail{ position:absolute; right:12px; bottom:112px; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .rail-avatar{
    width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color:#fff;
  }
  .rail-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .15s; color:#fff; }
  .rail-btn:active{ transform:scale(.9); }
  .rail-btn .circle{ width:40px; height:40px; border-radius:999px; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
  .rail-btn span{ font-size:9px; color:rgba(255,255,255,.9); }

  .feed-overlay{
    position:absolute; left:0; right:0; bottom:0; padding:16px; padding-right:64px;
    background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.35) 60%, transparent);
  }
  .feed-overlay .sub{ font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.7); margin-bottom:4px; }
  .feed-overlay h3{ font-family:var(--font-display); font-size:18px; font-weight:600; color:#fff; margin-bottom:6px; line-height:1.2; }
  .feed-overlay .meta{ display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.7); margin-bottom:10px; }
  .feed-overlay .meta span{ font-size:11px; }
  .feed-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }

  /* ===================== CHALLENGES ===================== */
  #challenges-container{ height:100%; overflow-y:auto; padding:16px 16px 24px; }
  .challenges-heading h2{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:4px; }
  .challenges-heading p{ font-size:12px; color:var(--muted); margin-bottom:16px; }
  .btn-publish{
    width:100%; margin-bottom:16px; border-radius:14px; padding:12px; display:flex; align-items:center;
    justify-content:center; gap:8px; font-weight:600; font-size:14px; background:var(--violet); color:#fff;
  }
  .challenge-card{
    border-radius:18px; padding:16px; background:var(--card); border:1px solid var(--border);
    margin-bottom:12px; cursor:pointer; transition:transform .15s;
  }
  .challenge-card:active{ transform:scale(.98); }
  .challenge-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .challenge-company{ display:flex; align-items:center; gap:8px; }
  .avatar-sq{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; background:var(--violet); }
  .challenge-company span{ font-size:12px; font-weight:500; }
  .challenge-card h3{ font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:10px; line-height:1.35; }
  .challenge-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .challenge-foot{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
  .challenge-foot .left{ display:flex; align-items:center; gap:6px; }
  .challenge-foot span{ font-size:11px; }

  .community-teaser{
    margin-top:4px; border-radius:18px; padding:20px; text-align:center;
    border:1.5px dashed var(--border); background:var(--card-alt);
  }
  .community-teaser .emoji{ font-size:26px; margin-bottom:8px; }
  .community-teaser h4{ font-family:var(--font-display); font-size:14px; font-weight:600; margin-bottom:4px; }
  .community-teaser p{ font-size:11px; color:var(--muted); margin-bottom:10px; line-height:1.4; }

  /* ===================== MODAL ===================== */
  .modal-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.55); display:none; align-items:flex-end;
    z-index:40;
  }
  .modal-backdrop.active{ display:flex; }
  .modal-sheet{
    width:100%; max-height:85%; overflow-y:auto; border-radius:24px 24px 0 0; padding:20px;
    background:var(--surface); animation:slideUp .25s ease;
  }
  @keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
  .modal-handle{ width:40px; height:4px; border-radius:999px; background:var(--border); margin:0 auto 16px; }
  .modal-sheet h2{ font-family:var(--font-display); font-size:18px; font-weight:600; margin:10px 0 4px; }
  .modal-sheet p{ font-size:12px; color:var(--muted); margin-bottom:16px; }
  .modal-success{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 0; text-align:center; }
  .success-circle{ width:56px; height:56px; border-radius:999px; background:var(--success); display:flex; align-items:center; justify-content:center; color:#fff; }

  /* ===================== CHAT ===================== */
  #chat-container{ height:100%; display:flex; flex-direction:column; }
  .chat-list{ height:100%; overflow-y:auto; }
  .chat-search{ margin:16px; display:flex; align-items:center; gap:8px; border-radius:14px; padding:10px 14px; background:var(--card-alt); border:1px solid var(--border); }
  .chat-search span{ font-size:12px; color:var(--muted); }
  .conv-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
  .avatar-round{ width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; background:var(--violet); flex-shrink:0; }
  .conv-info{ flex:1; min-width:0; }
  .conv-info-top{ display:flex; align-items:center; justify-content:space-between; }
  .conv-info-top strong{ font-size:14px; font-weight:600; }
  .conv-info-top span{ font-family:var(--font-mono); font-size:10px; color:var(--muted); }
  .conv-info p{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .unread-badge{ width:20px; height:20px; border-radius:999px; background:var(--amber); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }

  .chat-thread{ display:none; height:100%; flex-direction:column; }
  .chat-thread.active{ display:flex; }
  .thread-header{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
  .thread-header-info strong{ display:block; font-size:14px; font-weight:600; }
  .thread-header-info span{ font-size:10px; color:var(--muted); }
  .contact-card{
    margin:12px 16px 0; border-radius:14px; padding:12px 14px; font-size:12px;
    background:var(--card-alt); border:1px solid var(--border);
  }
  .contact-card.locked{ border-style:dashed; }
  .contact-card .row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; color:var(--text); }
  .contact-card .row:last-of-type{ margin-bottom:0; }
  .contact-card .locked-note{ color:var(--muted); font-size:11px; margin-top:6px; display:flex; align-items:center; gap:6px; }

  .thread-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
  .bubble{ max-width:75%; padding:10px 14px; border-radius:18px; font-size:14px; }
  .bubble.them{ align-self:flex-start; border-bottom-left-radius:4px; background:var(--card-alt); color:var(--text); }
  .bubble.me{ align-self:flex-end; border-bottom-right-radius:4px; background:var(--amber); color:var(--ink); }
  .thread-input{ display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid var(--border); }
  .thread-input input{ flex:1; font-size:14px; border-radius:999px; padding:10px 16px; background:var(--card-alt); border:none; outline:none; color:var(--text); }
  .send-btn{ width:36px; height:36px; border-radius:999px; background:var(--amber); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  /* ===================== PROFILE ===================== */
  #profile-container{ height:100%; overflow-y:auto; }
  .profile-hero{ position:relative; height:224px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; }
  .profile-hero.company{ height:160px; align-items:center; }
  .profile-hero .play-fab{ position:absolute; top:50%; transform:translateY(-50%); }
  .profile-hero-tag{ position:absolute; top:12px; right:12px; }
  .profile-body{ padding:0 20px 32px; margin-top:-24px; position:relative; }
  .avatar-big{ width:80px; height:80px; border-radius:999px; border:4px solid var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; background:var(--violet); }
  .avatar-big.company{ width:64px; height:64px; border-radius:20px; background:var(--card); color:var(--text); font-size:20px; }
  .profile-name{ display:flex; align-items:center; gap:6px; margin-top:12px; }
  .profile-name h2{ font-family:var(--font-display); font-size:20px; font-weight:700; }
  .profile-sub{ font-size:14px; color:var(--muted); margin-bottom:16px; }
  .stat-row{ display:flex; gap:12px; padding:16px 0; margin:0 0 16px; border-radius:18px; background:var(--card); border:1px solid var(--border); }
  .stat-block{ flex:1; text-align:center; }
  .stat-block .val{ font-family:var(--font-display); font-size:17px; font-weight:700; }
  .stat-block .lab{ font-size:10px; color:var(--muted); }
  .upsell-card{
    width:100%; border-radius:18px; padding:16px; display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; text-align:left;
  }
  .upsell-card .title{ font-family:var(--font-display); font-size:14px; font-weight:700; }
  .upsell-card .desc{ font-size:11px; margin-top:2px; }

  .history-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .history-icon{ width:32px; height:32px; border-radius:10px; background:var(--card-alt); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
  .history-row strong{ display:block; font-size:14px; font-weight:600; }
  .history-row span{ font-size:12px; color:var(--muted); }

  .portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
  .portfolio-item{ aspect-ratio:1; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; }

  .social-row{ display:flex; gap:8px; margin-bottom:24px; }
  .social-circle{ width:36px; height:36px; border-radius:999px; background:var(--card-alt); display:flex; align-items:center; justify-content:center; }

  .job-row{ display:flex; align-items:center; justify-content:space-between; border-radius:14px; padding:12px 14px; background:var(--card); border:1px solid var(--border); margin-bottom:8px; }
  .job-row span{ font-size:14px; }

  .corp-info-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; }
  .corp-info-row .lab{ color:var(--muted); }
  .corp-info-row .val{ font-weight:500; }

  /* ===================== PRICING / SETTINGS (shared fullscreen overlay) ===================== */
  .overlay-screen{ position:absolute; inset:0; background:var(--bg); display:none; overflow-y:auto; padding:20px 20px 32px; z-index:32; }
  .overlay-screen.active{ display:block; }
  .pricing-heading h2{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:4px; }
  .pricing-heading p{ font-size:12px; color:var(--muted); margin-bottom:20px; }
  .price-card{ border-radius:18px; padding:20px; background:var(--card); border:1px solid var(--border); margin-bottom:12px; }
  .price-card.featured{ border:2px solid var(--amber); }
  .price-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .price-top .name{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:16px; font-weight:700; }
  .price-top .amount{ font-family:var(--font-mono); font-size:14px; font-weight:600; }
  .feature-row{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
  .feature-row span{ font-size:12px; color:var(--muted); }

  /* ===================== SETTINGS: PREFERENCES & GUIDELINES ===================== */
  .chip-toggle-group{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-toggle{
    padding:9px 14px; border-radius:999px; font-size:12px; font-weight:500;
    background:var(--card-alt); border:1px solid var(--border); color:var(--muted);
    transition:background .15s, color .15s, border-color .15s;
  }

  .save-confirm{
    display:none; align-items:center; gap:6px; font-size:12px; color:var(--success);
    font-weight:600; margin-bottom:20px;
  }
  .save-confirm.show{ display:flex; animation:fadeInUp .25s ease; }
  @keyframes fadeInUp{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }

  .guideline-block{ margin-bottom:22px; }
  .guideline-block h4{ font-family:var(--font-display); font-size:14px; font-weight:600; margin-bottom:8px; }
  .guideline-block p{ font-size:12px; color:var(--muted); line-height:1.5; }

  .penalty-steps{ list-style:none; counter-reset:step; }
  .penalty-steps li{
    counter-increment:step; display:flex; gap:10px; margin-bottom:10px; align-items:flex-start;
    font-size:12px; color:var(--muted); line-height:1.4;
  }
  .penalty-steps li::before{
    content:counter(step); flex-shrink:0; width:20px; height:20px; border-radius:999px;
    background:var(--card-alt); border:1px solid var(--border); display:flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; color:var(--text); margin-top:1px;
  }
  .penalty-steps li:last-child::before{ background:#EF4444; border-color:#EF4444; color:#fff; }

  .privacy-compare{ display:flex; gap:10px; }
  .privacy-col{ flex:1; border-radius:14px; padding:12px; background:var(--card); border:1px solid var(--border); }
  .privacy-col h5{ font-size:11px; font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
  .privacy-col ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
  .privacy-col li{ font-size:11px; color:var(--muted); display:flex; gap:6px; align-items:center; }

  /* ===================== BOTTOM NAV (mobile & tablet) ===================== */
  .bottom-nav{ display:flex; align-items:center; justify-content:space-around; padding:10px 0; border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; }
  .nav-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 12px; transition:transform .15s; color:var(--muted); }
  .nav-btn:active{ transform:scale(.9); }
  .nav-btn span{ font-size:9px; font-weight:500; }
  .nav-btn.active{ color:var(--text); }
  .nav-btn.active .icon{ color:var(--amber); }

  /* ===================== DESKTOP SIDEBAR (TikTok-style, hidden below 1100px) ===================== */
  .sidebar-logo{
    display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700;
    font-size:16px; padding:8px 14px 26px; color:var(--text);
  }
  .sidebar-logo .accent{ color:var(--amber); }
  .sidebar-item{
    display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border-radius:12px;
    font-size:14px; font-weight:500; color:var(--muted); text-align:left; transition:background .15s, color .15s;
  }
  .sidebar-item:hover{ background:var(--card-alt); color:var(--text); }
  .sidebar-item.active{ background:var(--card-alt); color:var(--text); }
  .sidebar-item.active .icon{ color:var(--amber); }
  .sidebar-spacer{ flex:1; }

  /* =====================================================================
     RESPONSIVE BREAKPOINTS
     Mobile  (<768px)              → full-bleed edge-to-edge app, no chrome
     Tablet  (768px – 1099px)      → today's centered phone-card look
     Desktop (>=1100px)            → TikTok-desktop: sidebar + bounded video
     ===================================================================== */

  /* ---------- MOBILE: full-bleed, no phone bezel, minimal floating chrome ---------- */
  @media (max-width: 767px){
    body{ padding:0; gap:0; height:100dvh; overflow:hidden; }
    .topbar{ position:fixed; top:calc(10px + env(safe-area-inset-top)); right:10px; z-index:60; }
    .topbar span{ display:none; }
    .phone{ width:100vw; height:100dvh; max-width:none; border-radius:0; padding:0; box-shadow:none; }
    .notch{ display:none; }
    .viewport{ border-radius:0; }
    .footer-tag{ display:none; }
    .mode-pill span:last-child{ display:none; }
  }

  /* ---------- DESKTOP: drop the phone bezel, use the whole viewport, TikTok layout ---------- */
  @media (min-width: 1100px){
    body{ padding:0; gap:0; height:100dvh; overflow:hidden; }
    .topbar{ position:fixed; top:16px; left:16px; z-index:60; }
    .footer-tag{ position:fixed; bottom:14px; right:18px; z-index:5; }

    .phone{ width:100vw; height:100dvh; max-width:none; border-radius:0; padding:0; box-shadow:none; background:transparent; }
    .notch{ display:none; }
    .viewport{ border-radius:0; }

    /* Center a narrower column for choice/onboarding, like a web app rather than a phone mockup */
    .screen-inner{ max-width:460px; margin:0 auto; }

    /* Sidebar takes over navigation + theme/mode/settings controls */
    .app-header{ display:none; }
    .bottom-nav{ display:none; }
    .app-shell{ display:flex; flex-direction:row; height:100%; }
    .desktop-sidebar{
      display:flex; flex-direction:column; width:240px; flex-shrink:0; gap:2px;
      padding:20px 12px; border-right:1px solid var(--border); background:var(--surface);
      height:100%; overflow-y:auto;
    }
    .app-body{ flex:1; min-width:0; }

    /* Non-feed tabs read better as a centered column instead of full-bleed */
    #challenges-container, #chat-container, #profile-container,
    #pricing-container, #settings-container{ max-width:620px; margin:0 auto; }

    /* Feed: TikTok desktop — bounded portrait video + action rail beside it (not overlaid) */
    .feed-card{ display:flex; align-items:center; justify-content:center; gap:32px; }
    .feed-video-wrap{
      position:relative; inset:auto; width:400px; max-width:56vw; height:88%;
      border-radius:20px; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.4); flex-shrink:0;
    }
    .rail{ position:static; flex-direction:column; gap:24px; }
    .rail-btn{ color:var(--text); }
    .rail-btn .circle{ background:var(--card); border:1px solid var(--border); backdrop-filter:none; }
    .rail-btn span{ color:var(--muted); }

    /* Bottom sheet stays a centered dialog on wide screens instead of full-bleed */
    .modal-sheet{ max-width:480px; margin:0 auto; }
  }