:root{
    --ink:#0B1512;
    --ink-2:#12201B;
    --paper:#F2EEE2;
    --muted:rgba(242,238,226,0.6);
    --line:rgba(242,238,226,0.13);
    --gold:#C7A25C;
    --emerald:#3FAE85;
    --radius:12px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Buttons/links (.btn-primary, .btn-ghost, .pay-btn, ...) all set an
     explicit `display`, which — by normal CSS cascade rules — outranks the
     browser's built-in `[hidden]{display:none}` rule the moment any of
     those classes also apply. Net effect: every el.hidden = true toggle in
     JS on a styled button silently did nothing, element stayed visible
     (this is how the admin-only "Painel de administração" link was
     showing for non-admin accounts). !important restores `hidden` as the
     authority regardless of what other display rules exist. */
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  body{background:var(--ink); color:var(--paper); font-family:'Inter',sans-serif; line-height:1.55;}
  h1,h2,h3{font-family:'Fraunces',serif; letter-spacing:-0.01em; font-weight:500;}
  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media (max-width:640px){.wrap{padding:0 20px;}}
  a{color:inherit; text-decoration:none;}
  .u-full{width:100%;}
  .u-mt-20{margin-top:20px;}

  nav{position:sticky; top:0; z-index:50; background:rgba(11,21,18,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  nav .row{display:flex; align-items:center; justify-content:space-between; height:74px;}
  .logo{font-family:'Fraunces',serif; font-size:1.2rem; display:flex; align-items:center; gap:10px;}
  .logo-mark{height:30px; width:auto; object-fit:contain; display:block; flex-shrink:0;}
  .nav-links{display:flex; gap:32px; font-size:0.88rem; color:var(--muted);}
  .nav-links a:hover{color:var(--paper);}
  .nav-right{display:flex; align-items:center; gap:16px;}
  .btn-primary{background:var(--gold); color:var(--ink); padding:10px 20px; border-radius:8px; font-weight:600; font-size:0.86rem; border:none; cursor:pointer; font-family:'Inter',sans-serif; display:inline-block;}
  @media (max-width:900px){.nav-links{display:none;}}

  .hero{padding:96px 0 70px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  @media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:0.74rem; color:var(--emerald); text-transform:uppercase; border:1px solid rgba(63,174,133,0.35); padding:6px 12px; border-radius:100px; margin-bottom:24px;}
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem); line-height:1.08; margin-bottom:22px;}
  .hero h1 em{font-style:italic; color:var(--gold);}
  .hero p.lead{font-size:1.08rem; color:var(--muted); max-width:480px; margin-bottom:32px;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
  .btn-ghost{background:transparent; border:1px solid var(--line); color:var(--paper); padding:14px 24px; border-radius:8px; font-weight:600; font-size:0.9rem; cursor:pointer; font-family:'Inter',sans-serif; display:inline-block;}
  .btn-primary.lg{padding:14px 26px; font-size:0.9rem;}
  .trust-row{display:flex; gap:28px; flex-wrap:wrap; font-size:0.8rem; color:var(--muted);}
  .trust-row b{color:var(--paper); font-family:'Fraunces',serif; font-weight:500; display:block; font-size:1.3rem;}

  /* Device mock (hero) */
  .device{background:var(--ink-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .device-bar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); gap:12px;}
  .device-dots{display:flex; gap:6px; flex-shrink:0;}
  .device-dots span{width:8px; height:8px; border-radius:50%; background:var(--line);}
  .device-status{font-size:0.72rem; color:var(--emerald);}
  .device-body{padding:22px;}

  /* ---- Progress/statistics rows -----------------------------------------
     FIX: previously `.db-row` used display:flex + justify-content:space-between,
     which positions the middle column based on each row's own label width.
     Since "Automations connected" is longer than "Website live", the bar for
     that row started further right — bars were never on a shared column.
     Fix: a CSS Grid with fixed track widths for columns 2 and 3, so every
     bar and every percentage sits at an identical x-position on every row,
     regardless of label length. Column 1 is flexible (1fr) and truncates
     with an ellipsis on very narrow screens instead of pushing column 2. */
  .db-row{display:grid; grid-template-columns:1fr 120px 40px; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
  .db-row:last-child{border-bottom:none;}
  .db-label{font-size:0.85rem; display:flex; align-items:center; gap:10px; min-width:0;}
  .db-label-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .db-icon{width:28px; height:28px; border-radius:6px; background:rgba(199,162,92,0.14); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
  .db-bar{width:100%; height:6px; background:var(--line); border-radius:100px; overflow:hidden;}
  .db-bar i{display:block; height:100%; background:var(--emerald); border-radius:100px;}
  .db-pct{font-size:0.76rem; color:var(--muted); text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
  .fill-100{width:100%;}
  .fill-72{width:72%;}
  .fill-38{width:38%;}
  @media (max-width:420px){
    .db-row{grid-template-columns:1fr 80px 34px; gap:10px;}
  }

  .section{padding:84px 0; border-bottom:1px solid var(--line);}
  .section-head{max-width:620px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px;}
  .section-head p{color:var(--muted); font-size:1rem;}

  .build-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  @media (max-width:900px){.build-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.build-grid{grid-template-columns:1fr;}}
  .build-card{background:var(--ink); padding:22px;}
  .build-card .mono{font-size:0.68rem; color:var(--emerald); display:block; margin-bottom:10px;}
  .build-card h3{font-size:1rem; margin-bottom:8px; font-family:'Inter',sans-serif; font-weight:600;}
  .build-card p{font-size:0.85rem; color:var(--muted);}

  /* Preview panels: lightweight CSS-animated previews (no video files —
     see chat summary for why). Loop automatically, pause under
     prefers-reduced-motion via the global rule at the bottom of this file. */
  .preview-window{background:var(--ink-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:16px;}
  .preview-chrome{display:flex; gap:5px; padding:8px 10px; border-bottom:1px solid var(--line);}
  .preview-chrome span{width:6px; height:6px; border-radius:50%; background:var(--line);}
  .preview-stage{height:100px; position:relative; padding:14px; overflow:hidden;}

  @keyframes previewCycle{0%{opacity:0; transform:translateY(6px);} 15%,75%{opacity:1; transform:translateY(0);} 100%{opacity:0; transform:translateY(6px);}}

  .p-site .bar{height:9px; border-radius:3px; background:var(--line); margin-bottom:8px; opacity:0; animation:previewCycle 3.2s ease-in-out infinite;}
  .p-site .bar:nth-child(1){width:60%; background:var(--gold); animation-delay:0s;}
  .p-site .bar:nth-child(2){width:100%; animation-delay:.25s;}
  .p-site .bar:nth-child(3){width:82%; animation-delay:.5s;}
  .p-site .bar:nth-child(4){width:45%; background:var(--emerald); animation-delay:.75s;}

  .p-store{display:flex; gap:8px; align-items:flex-end; height:100%;}
  .p-store .tile{flex:1; border-radius:6px; background:var(--line); opacity:0; animation:previewCycle 3.2s ease-in-out infinite;}
  .p-store .tile:nth-child(1){height:70%; animation-delay:0s;}
  .p-store .tile:nth-child(2){height:100%; background:var(--gold); animation-delay:.3s;}
  .p-store .tile:nth-child(3){height:55%; background:var(--emerald); animation-delay:.6s;}

  .p-funnel .tier{height:8px; border-radius:3px; background:var(--line); margin:0 auto 12px;}
  .p-funnel .tier.t1{width:92%;}
  .p-funnel .tier.t2{width:64%;}
  .p-funnel .tier.t3{width:36%; background:var(--gold);}
  .p-funnel .dot{position:absolute; left:50%; top:14px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--emerald); animation:funnelDrop 3s ease-in-out infinite;}
  @keyframes funnelDrop{0%,100%{top:14px; opacity:0;} 8%{opacity:1;} 45%{top:48px;} 82%{top:78px; opacity:1;} 95%{opacity:0;}}

  .p-automation{display:flex; align-items:center; justify-content:space-between; height:100%;}
  .p-automation .node{width:14px; height:14px; border-radius:4px; background:var(--ink-2); border:1px solid var(--line); z-index:1; flex-shrink:0;}
  .p-automation .conn{flex:1; height:1px; background:var(--line); position:relative; overflow:hidden;}
  .p-automation .conn::after{content:''; position:absolute; top:-2px; left:-20%; width:20%; height:5px; background:var(--emerald); border-radius:100px; filter:blur(1px); animation:travel 2.4s linear infinite;}
  .p-automation .conn:nth-child(4)::after{animation-delay:1.2s;}
  @keyframes travel{0%{left:-20%;} 100%{left:100%;}}

  .p-brand{display:flex; gap:10px; align-items:center; height:100%; justify-content:center;}
  .p-brand .swatch{width:26px; height:26px; border-radius:50%; opacity:.35; transform:scale(.85); animation:swatchPulse 3.2s ease-in-out infinite;}
  .p-brand .swatch:nth-child(1){background:var(--gold); animation-delay:0s;}
  .p-brand .swatch:nth-child(2){background:var(--emerald); animation-delay:.3s;}
  .p-brand .swatch:nth-child(3){background:var(--paper); animation-delay:.6s;}
  .p-brand .swatch:nth-child(4){background:var(--line); animation-delay:.9s;}
  @keyframes swatchPulse{0%,100%{opacity:.35; transform:scale(.85);} 40%{opacity:1; transform:scale(1);}}

  .p-agent{display:flex; align-items:center; justify-content:center; height:100%;}
  .p-agent .bubble{background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:flex; gap:5px;}
  .p-agent .dot{width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:typing 1.2s ease-in-out infinite;}
  .p-agent .dot:nth-child(2){animation-delay:.15s;}
  .p-agent .dot:nth-child(3){animation-delay:.3s;}
  @keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

  .p-content .line{height:8px; border-radius:3px; background:var(--line); margin-bottom:9px; width:0; animation:writeLine 3s ease-in-out infinite;}
  .p-content .line:nth-child(1){animation-delay:0s; background:var(--gold); --w:65%;}
  .p-content .line:nth-child(2){animation-delay:.4s; --w:95%;}
  .p-content .line:nth-child(3){animation-delay:.8s; --w:75%;}
  @keyframes writeLine{0%{width:0;} 35%{width:var(--w,90%);} 80%{width:var(--w,90%);} 100%{width:0;}}

  .p-ops .row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .p-ops .row:last-child{margin-bottom:0;}
  .p-ops .box{width:14px; height:14px; border-radius:4px; border:1px solid var(--line); flex-shrink:0; position:relative;}
  .p-ops .box::after{content:''; position:absolute; inset:0; background:var(--emerald); border-radius:3px; opacity:0; animation:checkFill 3.6s ease-in-out infinite;}
  .p-ops .row:nth-child(2) .box::after{animation-delay:.5s;}
  .p-ops .row:nth-child(3) .box::after{animation-delay:1s;}
  .p-ops .row .text{height:7px; border-radius:3px; background:var(--line); flex:1;}
  @keyframes checkFill{0%,20%{opacity:0;} 35%,80%{opacity:1;} 95%{opacity:0;}}

  .curric-toggle{margin-top:24px; background:transparent; border:1px solid var(--line); color:var(--paper); padding:11px 20px; border-radius:8px; font-size:0.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
  .curric-toggle:hover{border-color:var(--gold); color:var(--gold);}
  .curric-list{display:flex; flex-direction:column;}
  .curric-list.is-collapsed{display:none;}
  .curric-item{display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line);}
  .curric-item:first-child{border-top:1px solid var(--line);}
  .curric-num{font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:0.85rem;}
  .curric-body h3{font-size:1.05rem; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:4px;}
  .curric-body span{font-size:0.83rem; color:var(--muted);}
  .curric-meta{font-size:0.75rem; color:var(--muted); text-align:right; white-space:nowrap;}

  .res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:860px){.res-grid{grid-template-columns:1fr;}}
  .res-card{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--ink-2);}
  .res-num{font-family:'Fraunces',serif; font-size:1.9rem; color:var(--gold); margin-bottom:10px;}
  .res-card h3{font-size:1rem; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:8px;}
  .res-card p{font-size:0.85rem; color:var(--muted);}

  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:900px){.price-grid{grid-template-columns:1fr;}}
  .price-card{border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:var(--ink-2); display:flex; flex-direction:column; position:relative;}
  .price-card.featured{border-color:var(--gold);}
  .badge{position:absolute; top:-12px; right:24px; background:var(--gold); color:var(--ink); font-size:0.68rem; font-weight:700; padding:5px 11px; border-radius:100px;}
  .price-card h3{font-size:0.95rem; color:var(--muted); font-family:'Inter',sans-serif; font-weight:600; margin-bottom:8px;}
  .price-amt{font-family:'Fraunces',serif; font-size:2.1rem; margin:8px 0 4px;}
  .price-amt span{font-size:0.85rem; color:var(--muted); font-family:'Inter',sans-serif;}
  .price-list{margin:22px 0; display:flex; flex-direction:column; gap:11px; flex-grow:1;}
  .price-list div{font-size:0.86rem; display:flex; gap:9px;}
  .price-list div::before{content:'—'; color:var(--emerald); flex-shrink:0;}
  .price-card button{width:100%;}

  .trust-strip{display:flex; flex-wrap:wrap; gap:14px;}
  .trust-chip{border:1px solid var(--line); padding:10px 16px; border-radius:100px; font-size:0.82rem; color:var(--muted); background:var(--ink-2);}

  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:860px){.testi-grid{grid-template-columns:1fr;}}
  .testi-card{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--ink-2);}
  .testi-card p{margin-bottom:18px; font-family:'Fraunces',serif; font-weight:400; font-size:1.05rem; line-height:1.5;}
  .testi-who{font-size:0.78rem; color:var(--muted); display:flex; justify-content:space-between;}

  .faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
  .faq-item summary{cursor:pointer; font-weight:600; font-size:0.98rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; color:var(--gold); font-size:1.2rem;}
  .faq-item[open] summary::after{content:'–';}
  .faq-item p{margin-top:12px; color:var(--muted); font-size:0.88rem; max-width:600px;}
  .see-all-faq{display:inline-block; margin-top:20px; font-size:0.88rem; color:var(--gold); font-weight:600;}

  .cta-final{padding:96px 0; text-align:center;}
  .cta-final h2{font-size:clamp(1.9rem,3.6vw,2.5rem); margin-bottom:18px;}
  .cta-final p{color:var(--muted); max-width:460px; margin:0 auto 32px;}

  footer{padding:40px 0; font-size:0.8rem; color:var(--muted);}
  .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px;}
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
  .foot-col h4{font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--paper); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.04em;}
  .foot-col a{display:block; margin-bottom:9px; color:var(--muted);}
  .foot-col a:hover{color:var(--paper);}
  .foot-logo{margin-bottom:12px;}
  .foot-tagline{color:var(--muted); font-size:0.85rem; max-width:280px;}
  .foot-bottom{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* Auth / checkout / dashboard modals */
  .modal-overlay{position:fixed; inset:0; background:rgba(6,10,8,0.72); display:none; align-items:center; justify-content:center; padding:24px; z-index:100;}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto; position:relative;}
  .modal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted); font-size:1.4rem; cursor:pointer; line-height:1; padding:4px;}
  .modal-close:hover{color:var(--paper);}
  .modal-box h3{font-size:1.3rem; margin-bottom:6px;}
  .modal-sub{color:var(--muted); font-size:0.86rem; margin-bottom:20px;}
  .plan-badge{display:inline-block; background:rgba(199,162,92,0.14); color:var(--gold); font-size:0.78rem; padding:5px 12px; border-radius:100px; margin-bottom:20px; font-family:'IBM Plex Mono',monospace;}
  .auth-tabs{display:flex; gap:6px; background:var(--ink); border:1px solid var(--line); border-radius:9px; padding:4px; margin-bottom:22px;}
  .auth-tab{flex:1; text-align:center; padding:9px; border-radius:6px; font-size:0.86rem; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;}
  .auth-tab.active{background:var(--gold); color:var(--ink);}
  .auth-panel{display:none;}
  .auth-panel.active{display:block;}
  .form-group{margin-bottom:16px;}
  .form-label{display:block; font-size:0.8rem; color:var(--muted); margin-bottom:6px;}
  .form-input{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--paper); padding:11px 13px; border-radius:8px; font-size:0.92rem; font-family:'Inter',sans-serif;}
  .form-input:focus{outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--gold);}
  .form-error{font-size:0.78rem; color:#E88; margin-top:18px; text-align:center; min-height:16px;}
  .underline-link{text-decoration:underline; color:var(--gold);}
  .form-check{display:flex; align-items:flex-start; gap:10px; font-size:0.8rem; color:var(--muted); margin-bottom:18px; cursor:pointer;}
  .form-check input{margin-top:3px; flex-shrink:0; accent-color:var(--gold);}
  .form-check a{color:var(--paper);}
  .form-note{font-size:0.74rem; color:var(--muted); margin-top:18px; text-align:center;}
  .checkout-summary{display:flex; justify-content:space-between; align-items:center; background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:22px;}
  .checkout-summary b{font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500;}
  .pay-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; border-radius:8px; font-weight:600; font-size:0.92rem; margin-bottom:12px; border:1px solid var(--line); background:var(--ink); color:var(--paper); cursor:pointer; font-family:'Inter',sans-serif;}
  .pay-btn:hover{border-color:var(--gold);}
  .pay-btn:disabled{opacity:0.6; cursor:not-allowed;}
  .pay-btn.lg{background:var(--gold); color:var(--ink); border:none; padding:16px; font-size:0.96rem;}
  .pay-btn.lg:hover{filter:brightness(1.06);}
  .payment-note{font-size:0.78rem; color:var(--emerald); text-align:center; min-height:16px; margin-bottom:8px;}
  .checkout-trust{font-size:0.76rem; color:var(--muted); text-align:center; margin-top:4px;}
  .dash-tabs{display:flex; gap:6px; background:var(--ink); border:1px solid var(--line); border-radius:9px; padding:4px; margin-bottom:20px; width:fit-content;}
  .dash-tab{padding:8px 16px; border-radius:6px; font-size:0.84rem; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;}
  .dash-tab.active{background:var(--gold); color:var(--ink);}
  .dash-tab-panel{display:none;}
  .dash-tab-panel.active{display:block;}
  .dash-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.9rem;}
  .dash-row:last-of-type{border-bottom:none;}
  .dash-row span:first-child{color:var(--muted);}
  .dash-progress{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
  .dash-progress-head{display:flex; justify-content:space-between; font-size:0.86rem; margin-bottom:10px;}
  .dash-progress-head span:first-child{color:var(--muted);}
  .dash-progress-head span:last-child{font-family:'IBM Plex Mono',monospace; color:var(--gold);}
  .dash-progress-sub{font-size:0.78rem; color:var(--muted); margin-top:8px;}
  .fill-0{width:0;}
  .dash-cancel-link{display:block; width:100%; text-align:center; margin-top:22px; background:none; border:none; color:var(--muted); font-size:0.74rem; text-decoration:underline; cursor:pointer; font-family:'Inter',sans-serif;}
  .dash-cancel-link:hover{color:#E88;}
  .dash-feedback{margin-top:20px; padding-top:20px; border-top:1px solid var(--line);}
  .dash-feedback textarea{width:100%; min-height:90px; background:var(--ink); border:1px solid var(--line); color:var(--paper); padding:10px 12px; border-radius:8px; font-family:'Inter',sans-serif; font-size:0.86rem; resize:vertical; margin-top:10px;}
  .dash-feedback textarea:focus{outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--gold);}
  .feedback-status{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; padding:2px 9px; border-radius:100px; border:1px solid var(--line); color:var(--muted);}
  .feedback-status.pending{color:var(--gold); border-color:var(--gold);}
  .feedback-status.approved{color:var(--emerald); border-color:var(--emerald);}
  .feedback-status.rejected{color:#E88; border-color:#E88;}
  .nav-user-btn{background:transparent; border:1px solid var(--line); color:var(--paper); padding:9px 16px; border-radius:8px; font-weight:600; font-size:0.84rem; cursor:pointer; font-family:'Inter',sans-serif;}
  .nav-user-btn:hover{border-color:var(--gold); color:var(--gold);}

  /* Shared full-page states — used by admin.html and course.html while
     checking auth/role/subscription before showing real content. */
  .state-loading, .state-denied{max-width:480px; margin:120px auto; text-align:center;}

  /* Floating support-chat widget (chat.js) — shared across every page that
     mounts it (index.html, course.html). Lives here, not in a page-specific
     stylesheet, because index.html only loads this file. */
  .chat-widget-toggle{position:fixed; bottom:24px; right:24px; width:54px; height:54px; border-radius:50%; background:var(--gold); color:var(--ink); border:none; font-size:1.3rem; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.35); z-index:90; transition:transform .15s ease;}
  .chat-widget-toggle:hover{transform:scale(1.06);}
  .chat-widget-box{position:fixed; bottom:90px; right:24px; width:328px; max-height:460px; background:var(--ink-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,0.45); display:none; flex-direction:column; z-index:90; overflow:hidden;}
  .chat-widget-box.open{display:flex;}
  .chat-widget-head{padding:16px 18px; border-bottom:1px solid var(--line); font-weight:600; font-size:0.92rem; display:flex; justify-content:space-between; align-items:center; background:var(--ink);}
  .chat-widget-close{background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.3rem; line-height:1; padding:2px 4px;}
  .chat-widget-close:hover{color:var(--paper);}
  .chat-widget-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:200px;}
  .chat-widget-log > p{color:var(--muted); font-size:0.82rem; text-align:center; margin:auto; max-width:220px;}
  .chat-widget-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--ink);}
  .chat-widget-input-row textarea{flex:1; background:var(--ink-2); border:1px solid var(--line); color:var(--paper); padding:9px 11px; border-radius:8px; font-family:'Inter',sans-serif; font-size:0.84rem; resize:none; min-height:40px;}
  .chat-widget-input-row textarea:focus{outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--gold);}
  .chat-widget-send{background:var(--gold); color:var(--ink); border:none; border-radius:8px; padding:0 16px; font-weight:600; cursor:pointer; font-size:0.82rem; font-family:'Inter',sans-serif;}
  .chat-widget-send:hover{filter:brightness(1.08);}
  .chat-widget-send:disabled{opacity:0.6; cursor:not-allowed;}

  /* Message bubbles inside the widget. Named .chat-msg (not .chat-bubble) to
     stay distinct from admin.css's unrelated .chat-bubble, used by the
     admin panel's own conversation view. */
  .chat-msg{display:flex; flex-direction:column; gap:4px; max-width:82%;}
  .chat-msg.from-user{align-self:flex-end; align-items:flex-end;}
  .chat-msg.from-admin{align-self:flex-start; align-items:flex-start;}
  .chat-msg-bubble{padding:9px 13px; font-size:0.84rem; line-height:1.45; word-break:break-word;}
  .chat-msg.from-user .chat-msg-bubble{background:var(--gold); color:var(--ink); border-radius:14px 14px 4px 14px;}
  .chat-msg.from-admin .chat-msg-bubble{background:var(--ink); border:1px solid var(--line); color:var(--paper); border-radius:14px 14px 14px 4px;}
  .chat-msg-meta{font-size:0.68rem; color:var(--muted); padding:0 3px;}

  :focus-visible{outline:2px solid var(--emerald); outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}