/* =========================================================
   COMPARTILHAR PROJETOS — DESIGN SYSTEM
   Paleta: Azul royal + Dourado sobre base neutra clara
   Tipografia: Sora (display) / Inter (texto) / JetBrains Mono (dados)
   ========================================================= */

:root{
  --navy-950:#02141b;
  --navy-900:#062a38;
  --navy-800:#0a3d52;
  --navy-700:#0f4f68;
  --blue-700:#0e7490;   
  --blue-600:#0891b2;
  --blue-500:#06b6d4;
  --blue-400:#22d3ee;
  --blue-100:#d9f5fb;
  --blue-50:#effbfe;

  --gold-700:#8f2f1a;   
  --gold-600:#d94f33;
  --gold-500:#f26b4f;
  --gold-400:#f78d76;
  --gold-300:#fbb3a2;
  --gold-200:#fdd9cf;
  --gold-100:#feeeea;

  --blue-vibrant-1:#22d3ee;
  --blue-vibrant-2:#0891b2;
  --gold-vibrant-1:#ff8f70;
  --gold-vibrant-2:#f26b4f;

  --bg:#edf7fa;
  --surface:#ffffff;
  --surface-alt:#edf7fa;
  --surface-warm:#f6fbfc;
  --ink-900:#0a1224;
  --ink-700:#2c3a58;
  --ink-600:#48557a;
  --ink-500:#68748f;   
  --ink-400:#8892ab;
  --ink-300:#b3bcd1;
  --border:#d0e6ee;
  --border-soft:#e2f0f5;
  --border-gold:rgba(242,107,79,.35);

  --success:#0e8f60;
  --success-bg:#e3f7ee;
  --danger:#cf3527;
  --danger-bg:#fbe9e7;
  --warning:#96700b;   
  --warning-bg:#fbf2d8;

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(8,23,54,.07);
  --shadow-md:0 12px 30px rgba(8,23,54,.13);
  --shadow-lg:0 24px 60px rgba(4,11,26,.20);
  --shadow-gold:0 12px 28px rgba(179,131,13,.30);

  --header-h:72px;
  --container-max:1180px;
  --container-max-wide:1360px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 680px at 6% -10%, rgba(8,145,178,.16), transparent 55%),
    radial-gradient(950px 560px at 102% -4%, rgba(242,107,79,.24), transparent 52%),
    radial-gradient(1100px 620px at 90% 60%, rgba(8,145,178,.09), transparent 55%),
    radial-gradient(680px 420px at 8% 55%, rgba(242,107,79,.08), transparent 60%),
    radial-gradient(1300px 760px at 45% 118%, rgba(13,36,86,.12), transparent 60%),
    linear-gradient(180deg, #f3f6fd 0%, #edf7fa 40%, #eaeef9 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
  overflow-x:hidden; 
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:radial-gradient(rgba(8,23,54,.055) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(1400px 900px at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(1400px 900px at 50% 0%, #000 0%, transparent 75%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(900px 500px at 50% 8%, rgba(242,107,79,.06), transparent 60%);
  mix-blend-mode:overlay;
}
#app, .site-header, .site-footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit;max-width:100%}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

::selection{background:var(--blue-600);color:#fff}
html{color-scheme:light}
html{scrollbar-color:var(--ink-300) var(--surface-alt)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--surface-alt)}
::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:var(--radius-pill);border:3px solid var(--surface-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--blue-400)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--blue-600)}
input::placeholder,textarea::placeholder{color:var(--ink-400)}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 clamp(12px, 4vw, 24px)}

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-primary{background:linear-gradient(135deg,var(--blue-vibrant-1),var(--blue-vibrant-2));color:#fff;box-shadow:0 10px 26px rgba(10,47,184,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(10,47,184,.40)}
.btn-primary:active{transform:translateY(0);box-shadow:0 6px 16px rgba(10,47,184,.30)}
.btn-gold{background:linear-gradient(135deg,var(--gold-vibrant-1),var(--gold-vibrant-2));color:var(--navy-950);box-shadow:0 10px 24px rgba(200,147,10,.34)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(200,147,10,.42)}
.btn-gold:active{transform:translateY(0);box-shadow:0 6px 14px rgba(200,147,10,.30)}
.btn-ghost{background:transparent;color:var(--blue-700);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--blue-500);background:var(--blue-50)}
.btn-outline-gold{background:transparent;color:var(--gold-700);border:1.5px solid var(--gold-400)}
.btn-outline-gold:hover{background:var(--gold-100)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:#fbdbd8}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}
.btn-icon{width:38px;height:38px;border-radius:50%;background:var(--surface-alt);display:inline-flex;align-items:center;justify-content:center;flex:none}
@media (max-width:960px){
  .btn-icon{width:44px;height:44px} 
}
.link{color:var(--blue-600);font-weight:600}
.link:hover{text-decoration:underline}

/* =================== HEADER =================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.86));
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft);
  height:var(--header-h);
  box-shadow:0 1px 0 rgba(4,60,80,.02);
}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:flex;flex:none}
.brand-name{
  font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--navy-900);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-name em{font-style:normal;color:var(--gold-700)}

.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{font-weight:600;font-size:14.5px;color:var(--ink-600);position:relative;padding:6px 0}
.main-nav a:hover{color:var(--blue-700)}
.main-nav a.active{color:var(--blue-700)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold-500);border-radius:2px}

.header-actions{display:flex;align-items:center;gap:14px;flex:none}
.header-guest-actions{display:flex;gap:10px}
.header-user-actions{display:flex;align-items:center;gap:12px;position:relative}
.sub-pill{font-family:var(--font-mono);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.sub-pill.active{background:var(--success-bg);color:var(--success)}
.sub-pill.expired{background:var(--danger-bg);color:var(--danger)}
.sub-pill.free{background:var(--surface-alt);color:var(--ink-600)}

.avatar-btn{width:40px;height:40px;border-radius:50%;flex:none}
.avatar-circle{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-vibrant-1),var(--navy-800));color:#fff;font-weight:700;font-size:15px;
  border:2px solid var(--gold-vibrant-1);
}
.user-menu{
  position:absolute;top:52px;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;padding:8px;
  display:none;flex-direction:column;gap:2px;z-index:80;
  max-width:calc(100vw - 32px);
}
.user-menu.open{display:flex}
.user-menu a,.user-menu button{padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;text-align:left;color:var(--ink-700);width:100%}
.user-menu a:hover,.user-menu button:hover{background:var(--blue-50);color:var(--blue-700)}
.user-menu button{color:var(--danger)}
.user-menu button:hover{background:var(--danger-bg)}

.hamburger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;flex:none;margin-right:-5px}
.hamburger span{width:20px;height:2px;background:var(--navy-900);border-radius:2px;transition:.2s}
.mobile-nav{display:none;flex-direction:column;background:var(--surface);border-top:1px solid var(--border-soft);padding:10px 24px 18px;gap:2px}
.mobile-nav.open{display:flex}
.mobile-nav a,.mobile-nav button{padding:12px 4px;font-weight:600;font-size:15px;border-bottom:1px solid var(--border-soft);text-align:left;color:var(--ink-700);width:100%}
.mobile-nav .btn-fill{background:var(--blue-600);color:#fff;border-radius:var(--radius-pill);text-align:center;margin-top:10px;border:none}
.mobile-nav #logoutBtnMobile{color:var(--danger)}

body.is-guest .auth-only{display:none !important}
body:not(.is-guest) .guest-only{display:none !important}
body:not(.is-admin) .admin-only{display:none !important}

@media (max-width:1080px){
  .main-nav{gap:18px}
}

@media (max-width:960px){
  .main-nav{display:none}
  .header-guest-actions{display:none}
  .header-user-actions .sub-pill{display:none}
  .hamburger{display:flex}
}
@media (min-width:961px){ .mobile-nav{display:none !important} }

@media (max-width:400px){
  .brand-name{font-size:16.5px}
  .header-actions{gap:8px}
}
@media (max-width:359px){
  .brand-name{font-size:15px;max-width:130px}
  .header-actions{gap:6px}
  .avatar-btn,.avatar-circle{width:36px;height:36px}
}

/* =================== HERO =================== */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1150px 500px at 90% -14%, rgba(242,107,79,.26), transparent 60%),
    radial-gradient(950px 480px at -8% 105%, rgba(6,182,212,.32), transparent 55%),
    radial-gradient(700px 380px at 50% 40%, rgba(6,182,212,.10), transparent 65%),
    linear-gradient(165deg,var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-700) 100%);
  color:#fff;padding:88px 0 110px;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 44px;mix-blend-mode:overlay;
}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  color:var(--gold-300);background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.35);
  padding:7px 14px;border-radius:var(--radius-pill);letter-spacing:.04em;margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-vibrant-1)}
.hero h1{font-size:clamp(30px,4.6vw,52px);color:#fff;margin-bottom:20px}
.hero h1 .accent{color:var(--gold-vibrant-1)}
.hero p.lead{font-size:17.5px;color:#c6d1ef;max-width:520px;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;gap:2px}
.hero-stats strong{font-family:var(--font-mono);font-size:22px;color:var(--gold-vibrant-1)}
.hero-stats span{font-size:12.5px;color:#a9b7dd}

.hero-visual{position:relative;height:420px}
.fan-card{
  position:absolute;width:260px;background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(0,0,0,.35);padding:18px;color:var(--ink-900);border:1px solid rgba(255,255,255,.5);
}
.fan-card .fc-cat{font-family:var(--font-mono);font-size:10.5px;color:var(--blue-600);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.fan-card h5{font-size:15.5px;margin:8px 0 6px}
.fan-card p{font-size:12.5px;color:var(--ink-600);margin-bottom:10px}
.fan-card .fc-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-400)}
.fan-card .fc-badge{background:var(--gold-100);color:var(--gold-700);padding:3px 9px;border-radius:var(--radius-pill);font-weight:700;font-size:10px}
.fan-1{top:10px;left:10px;transform:rotate(-9deg);z-index:1}
.fan-2{top:60px;left:120px;transform:rotate(4deg);z-index:2}
.fan-3{top:150px;left:20px;transform:rotate(-3deg);z-index:3}
.fan-4{top:190px;left:140px;transform:rotate(10deg);z-index:1}

@media (max-width:960px){
  .hero{padding:64px 0 80px}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{height:340px;order:-1}
  .fan-card{width:220px}
}
@media (max-width:480px){
  .hero{padding:52px 0 60px}
  .hero-visual{height:260px}
  .fan-card{width:78vw;max-width:230px;padding:14px}
  .fan-1{top:0;left:2vw}
  .fan-2{top:44px;left:18vw}
  .fan-3{top:120px;left:6vw}
  .fan-4{display:none} 
  .hero-stats{gap:22px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
}
@media (max-height:440px) and (orientation:landscape){
  .hero{padding:32px 0}
  .hero-inner{grid-template-columns:1fr 1fr;align-items:center}
  .hero-visual{display:none}
  .hero-cta .btn{width:auto}
}

/* =================== SECTIONS =================== */
.section{padding:80px 0}
.section-tight{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(23px,3vw,34px);color:var(--navy-900)}
.section-head p{color:var(--ink-600);max-width:520px;margin-top:8px}
.section-alt{background:linear-gradient(180deg,var(--blue-50) 0%, var(--surface-warm) 55%, var(--surface) 100%)}
.tag-label{font-family:var(--font-mono);font-size:12px;color:var(--gold-700);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;display:block}

@media (max-width:640px){
  .section{padding:52px 0}
  .section-tight{padding:40px 0}
  .section-head{margin-bottom:28px}
}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px}
.step-num{font-family:var(--font-mono);font-size:13px;color:var(--gold-700);font-weight:700;margin-bottom:14px}
.step-card h3{font-size:18px;margin-bottom:10px;color:var(--navy-900)}
.step-card p{color:var(--ink-600);font-size:14.5px}
@media (max-width:800px){.steps-grid{grid-template-columns:1fr}}

/* =================== PROJECT CARDS / GRID =================== */
.filters-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.search-input{
  flex:1;min-width:220px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-pill);
  padding:12px 18px;font-size:14.5px;
}
.search-input:focus{border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-100)}
.select-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:12px 18px;font-size:14px;font-weight:600;color:var(--ink-700)}
.select-input:focus{border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-100)}

@media (max-width:560px){
  .filters-bar{flex-direction:column;align-items:stretch}
  .search-input,.select-input{width:100%;min-width:0}
}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.project-grid{grid-template-columns:1fr}}

@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.project-card{
  background:linear-gradient(180deg,#ffffff 0%, #fdfcf9 100%);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation:cardIn .35s ease both;
}
.project-card:hover,.project-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 38px rgba(4,60,80,.16), 0 0 0 1px var(--border-gold);border-color:var(--gold-400)}
.pc-thumb{height:170px;background:linear-gradient(135deg,var(--blue-100),var(--gold-100));display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-cat{position:absolute;top:12px;left:12px;background:rgba(10,27,61,.75);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:var(--radius-pill);font-family:var(--font-mono);letter-spacing:.04em}
.pc-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-body h3{font-size:17px;color:var(--navy-900)}
.pc-body p{font-size:13.5px;color:var(--ink-600);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-500);margin-top:6px;padding-top:12px;border-top:1px solid var(--border-soft)}
.pc-meta .author{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-600)}
.pc-mini-avatar{width:22px;height:22px;border-radius:50%;background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none}

.empty-state{
  text-align:center;padding:70px 20px;color:var(--ink-500);background:var(--surface);
  border:1.5px dashed var(--border);border-radius:var(--radius-lg);
}
.empty-state h3{color:var(--navy-900);margin-bottom:8px;font-size:19px}
@media (max-width:480px){.empty-state{padding:48px 16px}}

/* =================== PROJECT DETAIL =================== */
.project-detail{padding:50px 0 90px}
.breadcrumb{font-size:13px;color:var(--ink-400);margin-bottom:24px;overflow-x:auto;white-space:nowrap}
.breadcrumb a{color:var(--blue-600);font-weight:600}
.pd-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.pd-gallery{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface-alt);height:380px;display:flex;align-items:center;justify-content:center}
.pd-gallery img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:2px;scroll-snap-type:x proximity}
.pd-thumbs img{width:70px;height:70px;object-fit:cover;border-radius:10px;border:2px solid transparent;cursor:pointer;flex:none;scroll-snap-align:start}
.pd-thumbs img.active{border-color:var(--gold-500)}
.pd-cat-badge{display:inline-block;background:var(--blue-100);color:var(--blue-700);font-family:var(--font-mono);font-size:11px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:14px;letter-spacing:.04em}
.pd-title{font-size:clamp(23px,3.5vw,34px);color:var(--navy-900);margin-bottom:16px}
.pd-desc{color:var(--ink-700);font-size:15.5px;line-height:1.7;margin-bottom:26px;white-space:pre-line;overflow-wrap:break-word}

.pd-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px}
.pd-side h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-400);margin-bottom:16px;font-family:var(--font-mono)}
.pd-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:14px}
.pd-row:last-of-type{border-bottom:none}
.pd-row span:first-child{color:var(--ink-500)}
.pd-row span:last-child{font-weight:600;color:var(--ink-900);text-align:right; word-break: break-word;}
.pd-side .btn{margin-top:18px}

@media (max-width:900px){
  .pd-grid{grid-template-columns:1fr;gap:30px}
  .pd-gallery{height:300px}
}
@media (max-width:480px){
  .project-detail{padding:32px 0 60px}
  .pd-gallery{height:230px}
  .pd-side{padding:20px}
}

/* =================== AUTH FORMS =================== */
.auth-shell{min-height:calc(100vh - var(--header-h) - 260px);display:flex;align-items:center;justify-content:center;padding:60px 20px;
  background:radial-gradient(700px 320px at 50% -10%, var(--blue-50), transparent);}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:42px;width:100%;max-width:440px}
.auth-card h2{font-size:24px;margin-bottom:6px;color:var(--navy-900)}
.auth-card .sub{color:var(--ink-600);font-size:14px;margin-bottom:28px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14.5px;background:var(--surface);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-100)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger)}
.field.has-error input:focus,.field.has-error textarea:focus,.field.has-error select:focus{box-shadow:0 0 0 4px var(--danger-bg)}
.field-hint{font-size:12px;color:var(--ink-400);margin-top:6px}
.field-error{font-size:12.5px;color:var(--danger);margin-top:6px;display:none;font-weight:600}
.field.has-error .field-error{display:block}
.form-foot{text-align:center;margin-top:20px;font-size:14px;color:var(--ink-600)}
.divider-or{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--ink-400);font-size:12.5px}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--border)}

@media (max-width:480px){
  .auth-shell{padding:36px 14px}
  .auth-card{padding:28px 22px}
}

/* =================== DASHBOARD =================== */
.dash-shell{display:grid;grid-template-columns:250px 1fr;gap:0;min-height:calc(100vh - var(--header-h))}
.dash-sidebar{
  background:linear-gradient(180deg,var(--navy-950), var(--navy-900) 70%);color:#dfe6f6;padding:28px 18px;
  position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
  border-right:1px solid rgba(242,107,79,.12);
}
.dash-sidebar .side-title{font-family:var(--font-mono);font-size:11px;color:var(--gold-300);letter-spacing:.06em;text-transform:uppercase;padding:0 12px 12px}
.side-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-weight:600;font-size:14px;color:#c3cdea;margin-bottom:2px}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.active{background:linear-gradient(135deg,var(--blue-vibrant-1),var(--blue-vibrant-2));color:#fff;box-shadow:0 6px 16px rgba(10,47,184,.30)}

.dash-main{padding:clamp(20px,3.5vw,38px) clamp(14px,4vw,40px);background:var(--bg);min-width:0; width:100%;}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;gap:20px;flex-wrap:wrap}
.dash-head h1{font-size:26px;color:var(--navy-900)}
.dash-head p{color:var(--ink-600);margin-top:6px;font-size:14.5px}

@media (max-width:1100px){
  .dash-shell{grid-template-columns:210px 1fr}
}

/* === CORREÇÃO DEFINITIVA DO MOBILE (FLEXBOX / ANTI-OVERLAP) === */
@media (max-width:900px){
  .dash-shell {
    display: flex !important; /* Destrói o grid no celular e empilha nativamente */
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .dash-sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important; 
    min-height: 70px !important;
    display: flex !important; 
    flex-direction: row !important; 
    overflow-x: auto !important; 
    gap: 8px !important; 
    padding: 16px !important;
    -webkit-overflow-scrolling: touch !important; 
    scroll-snap-type: x proximity !important;
    white-space: nowrap !important; 
    border-right: none !important;
    background: var(--navy-950) !important;
    width: 100% !important; 
    margin: 0 !important;
    flex: none !important; /* Garante que o menu pare de crescer */
  }
  
  .dash-sidebar::-webkit-scrollbar { display: none; }
  .dash-sidebar { -ms-overflow-style: none; scrollbar-width: none; }
  .dash-sidebar .side-title { display: none !important; }
  
  .side-link {
    display: inline-flex !important; 
    justify-content: center !important; 
    flex: none !important; 
    white-space: nowrap !important; 
    min-height: 40px !important; 
    scroll-snap-align: start !important; 
    margin: 0 !important; 
    background: rgba(255,255,255,0.08) !important; 
    border-radius: 20px !important; 
    padding: 8px 18px !important;
    box-shadow: none !important;
  }
  .side-link.active { 
    background: var(--gold-500) !important; 
    color: var(--navy-950) !important; 
  }
  
  .dash-main {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 24px 16px 80px 16px !important;
    margin: 0 !important;
    flex: 1 !important; /* O conteúdo preenche o resto do espaço para baixo */
  }
}

@media (max-width:480px){
  .dash-head h1{font-size:22px}
}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:34px}

.stat-card{
  background:linear-gradient(165deg,#ffffff, #f7f9fe); border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px;transition:box-shadow .18s ease, border-color .18s ease;
  word-break: break-word; overflow-wrap: break-word; min-width:0;
}
.stat-card:hover{box-shadow:var(--shadow-sm);border-color:var(--blue-100)}
.stat-card .stat-label{font-size:12.5px;color:var(--ink-500);font-weight:600;margin-bottom:8px}
.stat-card .stat-value{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--navy-900)}
.stat-card.gold{background:linear-gradient(165deg,#fffdf7, var(--gold-100))}
.stat-card.gold .stat-value{color:var(--gold-700)}

.panel{
  background:linear-gradient(180deg,#ffffff, #fdfdfc);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;transition:box-shadow .18s ease;
  word-break: break-word; overflow-wrap: break-word; min-width:0;
}
.panel:hover{box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.panel-head h3{font-size:17px;color:var(--navy-900)}
@media (max-width:480px){.panel{padding:18px}}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--radius-pill);font-family:var(--font-mono)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-neutral{background:var(--surface-alt);color:var(--ink-600)}
.badge-gold{background:var(--gold-100);color:var(--gold-700)}
.badge-blue{background:var(--blue-100);color:var(--blue-700)}

table.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:13px 12px;border-bottom:1px solid var(--border-soft);color:var(--ink-700)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:nth-child(even){background:var(--surface-alt)}
.data-table tbody tr:hover{background:var(--blue-50)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;width:100%;min-width:0;}

.table-wrap::before,
.table-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:18px;pointer-events:none;
  opacity:0;transition:opacity .18s ease;z-index:2;
}
.table-wrap::before{left:0;background:linear-gradient(90deg, rgba(255,255,255,.9), transparent)}
.table-wrap::after{right:0;background:linear-gradient(270deg, rgba(255,255,255,.9), transparent)}
.table-wrap.is-scrollable-left::before{opacity:1}
.table-wrap.is-scrollable-right::after{opacity:1}

.data-table--sticky-first td:first-child,
.data-table--sticky-first th:first-child{
  position:sticky;left:0;background:#fff;z-index:1;
}
.data-table--sticky-first tbody tr:nth-child(even) td:first-child{background:var(--surface-alt)}

@media (max-width:640px){
  .data-table{font-size:13px}
  .data-table th,.data-table td{padding:10px 8px}
}

/* =================== PLANS =================== */
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:800px;margin:0 auto}
.plan-card{background:linear-gradient(180deg,#ffffff, #fbfbfa);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px;position:relative;display:flex;flex-direction:column}
.plan-card.featured{background:linear-gradient(165deg,#ffffff, var(--gold-100) 130%);border-color:var(--gold-500);box-shadow:var(--shadow-gold)}
.plan-card.featured::before{
  content:"MAIS ESCOLHIDO";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-vibrant-1),var(--gold-vibrant-2));color:var(--navy-950);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:6px 16px;border-radius:var(--radius-pill);letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(200,147,10,.35);
}
.plan-name{font-family:var(--font-mono);font-size:13px;color:var(--blue-600);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.plan-price{font-size:40px;font-family:var(--font-display);font-weight:800;color:var(--navy-900);margin-bottom:4px}
.plan-price span{font-size:15px;font-weight:600;color:var(--ink-400)}
.plan-duration{color:var(--ink-600);font-size:14px;margin-bottom:22px}
.plan-features{margin-bottom:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan-features li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-700)}
.plan-features li::before{content:"✓";color:var(--success);font-weight:700}
@media (max-width:700px){.plans-grid{grid-template-columns:1fr}}
@media (max-width:480px){.plan-card{padding:26px 22px}}

/* =================== COMMUNITY =================== */
.community-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:30px;align-items:start}
.composer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:22px}
.composer textarea{width:100%;border:none;resize:vertical;min-height:60px;font-size:14.5px}
.composer textarea:focus{outline:none}
.composer-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;border-top:1px solid var(--border-soft);padding-top:12px;gap:10px;flex-wrap:wrap}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-bottom:18px}
.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.post-author{display:flex;align-items:center;gap:10px}
.post-author strong{font-size:14.5px;color:var(--navy-900)}
.post-author span{font-size:12px;color:var(--ink-400)}
.post-body{font-size:14.5px;color:var(--ink-700);margin-bottom:14px;white-space:pre-line;overflow-wrap:break-word}
.post-actions{display:flex;gap:16px;font-size:13px;color:var(--ink-500);font-weight:600;border-top:1px solid var(--border-soft);padding-top:12px;flex-wrap:wrap}
.post-actions button{color:var(--ink-500)}
.post-actions button:hover{color:var(--blue-600)}
.comment-list{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.comment{display:flex;gap:10px}
.comment-body{background:var(--surface-alt);border-radius:12px;padding:10px 14px;flex:1;min-width:0}
.comment-body strong{font-size:13px;color:var(--navy-900)}
.comment-body p{font-size:13.5px;color:var(--ink-700);margin-top:2px;overflow-wrap:break-word}
.comment-reply-form{display:flex;gap:8px;margin-top:8px}
.comment-reply-form input{flex:1;border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 14px;font-size:13px;min-width:0}
.reply-list{margin-left:36px;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:18px}
.side-card h4{font-size:14px;color:var(--navy-900);margin-bottom:12px}
.side-card p{font-size:13px;color:var(--ink-600)}
@media (max-width:880px){.community-layout{grid-template-columns:1fr}}
@media (max-width:480px){
  .reply-list{margin-left:18px}
  .post-card,.composer{padding:16px}
}

/* =================== REFERRALS =================== */
.ref-link-box{
  display:flex;gap:10px;align-items:center;background:var(--navy-950);color:var(--gold-300);
  padding:16px 20px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:13.5px;flex-wrap:wrap;
}
.ref-link-box code{flex:1;min-width:180px;word-break:break-all;color:#e8eefc}

/* =================== MODALS =================== */
.modal-overlay{position:fixed;inset:0;background:rgba(6,14,32,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);max-width:520px;width:100%;padding:32px;max-height:88vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:16px}
.modal-box h2{font-size:21px;color:var(--navy-900);margin-bottom:6px}
.modal-box .sub{color:var(--ink-600);font-size:13.5px;margin-bottom:22px}
@media (max-width:480px){.modal-box{padding:24px 20px}}
@media (max-height:480px) and (orientation:landscape){
  .modal-overlay{align-items:flex-start;padding:12px 20px}
  .modal-box{max-height:94vh;padding:22px}
}

/* =================== CONFIRM DIALOG =================== */
.confirm-overlay{
  position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,11,26,.62);backdrop-filter:blur(3px);
}
.confirm-overlay.open{display:flex;animation:overlayIn .18s ease}
.confirm-box{
  background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:380px;
  padding:30px 28px 26px;text-align:center;box-shadow:var(--shadow-lg);
  border:1px solid var(--border);animation:confirmIn .2s ease;
}
.confirm-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--danger-bg),#fbd8d4);color:var(--danger);font-family:var(--font-display);
  font-weight:800;font-size:24px;border:1px solid rgba(207,53,39,.25);
}
.confirm-box.is-neutral .confirm-icon{
  background:linear-gradient(135deg,var(--gold-100),var(--gold-200));color:var(--gold-700);border-color:var(--border-gold);
}
.confirm-box h3{font-size:18px;color:var(--navy-900);margin-bottom:8px}
.confirm-box p{font-size:14px;color:var(--ink-600);line-height:1.55;margin-bottom:24px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes confirmIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:400px){
  .confirm-box{padding:24px 18px 20px}
  .confirm-actions{grid-template-columns:1fr;gap:8px}
}
@media (max-height:480px) and (orientation:landscape){
  .confirm-overlay{align-items:flex-start;padding-top:20px}
  .confirm-box{padding:20px 24px}
}

/* =================== TOAST =================== */
.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:600;max-width:calc(100vw - 32px)}
.toast{
  display:flex;align-items:flex-start;gap:12px;
  background:linear-gradient(165deg,var(--navy-900),var(--navy-950));color:#fff;padding:14px 18px;border-radius:14px;
  font-size:13.5px;font-weight:500;line-height:1.45;
  box-shadow:0 16px 34px rgba(4,11,26,.35);min-width:260px;max-width:340px;
  border:1px solid rgba(242,107,79,.18);border-left:3px solid var(--gold-500);
  animation:toastIn .28s cubic-bezier(.2,.8,.3,1.2);
}
.toast .toast-icon{
  flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-family:var(--font-display);margin-top:1px;
  background:rgba(242,107,79,.16);color:var(--gold-300);
}
.toast .toast-text{flex:1;padding-top:1px}
.toast.error{border-left-color:var(--danger)}
.toast.error .toast-icon{background:rgba(207,53,39,.16);color:#ff9186}
.toast.success{border-left-color:var(--success)}
.toast.success .toast-icon{background:rgba(14,143,96,.18);color:#5fe0ab}
.toast.leaving{animation:toastOut .22s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(6px) scale(.97)}}
@media (max-width:480px){
  .toast-stack{
    left:16px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    align-items:stretch;
  }
  .toast{max-width:none;min-width:0}
}

/* =================== FOOTER =================== */
.site-footer{
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(242,107,79,.10), transparent 55%),
    linear-gradient(180deg,var(--navy-950), var(--navy-900));
  color:#a9b4d4;padding:60px 0 0;margin-top:60px;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{margin-top:12px;font-size:13.5px;line-height:1.6;max-width:260px}
.footer-col h4{color:#fff;font-size:13px;margin-bottom:14px;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.footer-col a{display:block;font-size:14px;padding:6px 0;color:#a9b4d4}
.footer-col a:hover{color:var(--gold-400)}
.footer-bottom{padding:20px 0 calc(26px + env(safe-area-inset-bottom, 0px));font-size:12.5px;color:#7482a8}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .site-footer{padding:44px 0 0;margin-top:40px}
}

/* =================== UTIL =================== */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.flex{display:flex}.items-center{align-items:center}.gap-1{gap:8px}.gap-2{gap:16px}
.text-center{text-align:center}
.muted{color:var(--ink-500)}
.upload-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.upload-preview img{width:70px;height:70px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.upload-preview .rm{position:relative}
.upload-preview .rm button{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;width:18px;height:18px;border-radius:50%;font-size:11px;line-height:1}
.cta-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(255,210,87,.30), transparent 60%),
    radial-gradient(600px 280px at 10% 100%, rgba(47,91,255,.22), transparent 60%),
    linear-gradient(135deg,var(--navy-950),var(--navy-800));
  color:#fff;border-radius:var(--radius-lg);padding:52px 40px;text-align:center;margin:0 24px;
}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:#c6d1ef;margin-bottom:26px}
@media (max-width:640px){
  .cta-band{padding:38px 24px;margin:0 16px;border-radius:var(--radius-md)}
}
@media (max-width:400px){
  .cta-band{margin:0 12px}
}

/* =========================================================
   DESKTOP GRANDE / ULTRAWIDE
   ========================================================= */
@media (min-width:1440px){
  .container{max-width:var(--container-max-wide);padding:0 32px}
  .hero{padding:104px 0 128px}
  .hero-inner{gap:72px}
  .project-grid{grid-template-columns:repeat(4,1fr);gap:28px}
  .stat-grid{gap:22px}
  .dash-shell{grid-template-columns:270px 1fr}
  .dash-main{padding:44px 52px;max-width:1400px;margin:0 auto}
  .footer-grid{grid-template-columns:1.8fr 1fr 1fr 1fr;gap:44px}
}

@media (min-width:1800px){
  :root{ --container-max-wide:1520px; }
  .project-grid{grid-template-columns:repeat(5,1fr)}
  .hero-visual{height:480px}
  .fan-card{width:290px}
  .fan-2{top:80px;left:150px}
  .fan-3{top:210px;left:30px}
  .fan-4{top:260px;left:180px}
}

@media (min-width:2200px){
  :root{ --container-max-wide:1680px; }
  .project-grid{grid-template-columns:repeat(6,1fr)}
  .dash-main{max-width:1600px}
}

/* =========================================
   CARDS DE PLANOS
   ========================================= */
.plan-card.card-teste { background: linear-gradient(165deg, #ffffff, #f8fafc 130%); border-color: #64748b; box-shadow: 0 12px 28px rgba(71, 85, 105, 0.16); }
.card-teste .plan-name { color: #334155; }
.btn-teste { background: linear-gradient(135deg, #94a3b8, #475569); color: #ffffff; box-shadow: 0 10px 24px rgba(71, 85, 105, 0.28); transition: transform .15s ease, box-shadow .15s ease; }
.btn-teste:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(71, 85, 105, 0.38); }
.btn-teste:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(71, 85, 105, 0.22); }

.plan-card.card-4dias { background: linear-gradient(165deg, #ffffff, #f0fdfa 130%); border-color: #0d9488; box-shadow: 0 12px 28px rgba(13, 148, 136, 0.16); }
.card-4dias .plan-name { color: #0f766e; }
.btn-4dias { background: linear-gradient(135deg, #2dd4bf, #0d9488); color: #ffffff; box-shadow: 0 10px 24px rgba(13, 148, 136, 0.28); transition: transform .15s ease, box-shadow .15s ease; }
.btn-4dias:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(13, 148, 136, 0.38); }
.btn-4dias:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(13, 148, 136, 0.22); }

.plan-card.card-mensal { background: linear-gradient(165deg, #ffffff, #f5f4ff 130%); border-color: #4338ca; box-shadow: 0 12px 28px rgba(67, 56, 202, 0.16); }
.card-mensal .plan-name { color: #3730a3; }
.btn-mensal { background: linear-gradient(135deg, #818cf8, #4338ca); color: #ffffff; box-shadow: 0 10px 24px rgba(67, 56, 202, 0.28); transition: transform .15s ease, box-shadow .15s ease; }
.btn-mensal:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(67, 56, 202, 0.38); }
.btn-mensal:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(67, 56, 202, 0.22); }

.btn-ghost-hero{color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost-hero:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}

/* =========================================================
   BANNER DE CONSENTIMENTO DE COOKIES (LGPD)
   ========================================================= */
#cookieConsentBanner{
  position:fixed;left:24px;bottom:24px;z-index:9999;
  max-width:400px;width:calc(100% - 48px);
  transition:opacity .28s ease, transform .28s ease;
}
#cookieConsentBanner.cookie-consent-hidden{
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
}
.cookie-consent-card{
  display:flex;align-items:flex-start;gap:14px;
  background:linear-gradient(165deg,var(--navy-900),var(--navy-950));
  border:1px solid rgba(242,107,79,.22);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 56px rgba(4,11,26,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  padding:22px;
  animation:cookieCardIn .35s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes cookieCardIn{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.cookie-consent-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-vibrant-1),var(--gold-vibrant-2));
  color:var(--navy-950);
  box-shadow:0 8px 18px rgba(200,147,10,.32);
}
.cookie-consent-body{flex:1;min-width:0}
.cookie-consent-title{
  font-family:var(--font-display);font-size:15.5px;font-weight:700;
  color:#fff;margin-bottom:8px;letter-spacing:-.01em;
}
.cookie-consent-text{
  margin:0 0 18px;font-size:13.5px;line-height:1.65;color:#b7c1e0;
}
.cookie-consent-text a{color:var(--gold-300);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-consent-text a:hover{color:var(--gold-vibrant-1)}
.cookie-consent-actions{display:flex;flex-direction:column;gap:8px}
.cookie-consent-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--radius-pill);width:100%;
  padding:11px 18px;font-size:13.5px;font-weight:700;font-family:var(--font-body);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.cookie-consent-btn-primary{
  background:linear-gradient(135deg,var(--gold-vibrant-1),var(--gold-vibrant-2));
  color:var(--navy-950);
  box-shadow:0 10px 22px rgba(200,147,10,.30);
  order:-1;
}
.cookie-consent-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(200,147,10,.38)}
.cookie-consent-btn-ghost{
  background:transparent;color:#c3cdea;border:1.5px solid rgba(255,255,255,.16);
}
.cookie-consent-btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);color:#fff}

@media (max-width:600px){
  #cookieConsentBanner{
    left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:auto;max-width:none;
  }
  .cookie-consent-card{padding:18px}
}

/* =========================================================
   MODO ESCURO (NIGHT MODE) - "MIDNIGHT PREMIUM"
   ========================================================= */
[data-theme="dark"]{  
  color-scheme: dark;  
  --bg: #061218;  
  --surface: #0e1f29;  
  --surface-alt: #142b37;  
  --surface-warm: #0e1f29;  
  --ink-900: #f8fafc;  
  --ink-700: #cbd5e1;  
  --ink-600: #94a3b8;  
  --ink-500: #64748b;  
  --ink-400: #475569;  
  --ink-300: #334155;  
  --border: rgba(255,255,255,.08);  
  --border-soft: rgba(255,255,255,.04);  
  --border-gold: rgba(242,107,79,.15);  
  --success-bg: rgba(14,143,96,.12);  
  --danger-bg: rgba(207,53,39,.12);  
  --warning-bg: rgba(150,112,11,.12);  
  --warning: #e0b73a;  
  --blue-50: rgba(6,182,212,.10);  
  --blue-100: rgba(8,145,178,.16);  
  --blue-600: #67e8f9;  
  --blue-700: #a5f3fc;  
  --gold-100: rgba(242,107,79,.12);  
  --gold-700: #f78d76;
}

/* Fundo e texturas do body */
[data-theme="dark"] body {  
  background-image:    
    radial-gradient(1200px 680px at 6% -10%, rgba(8,145,178,.06), transparent 55%),    
    radial-gradient(950px 560px at 102% -4%, rgba(242,107,79,.06), transparent 52%),    
    linear-gradient(180deg,#061218 0%,#07090e 100%);
}
[data-theme="dark"] body::before {  
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
}
[data-theme="dark"] body::after {
  display: none;
}

/* Scrollbar */
[data-theme="dark"] {
  scrollbar-color: #334155 var(--surface-alt);
}

/* Títulos e textos (escopo controlado) */
[data-theme="dark"] .brand-name,
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .step-card h3,
[data-theme="dark"] .pc-body h3,
[data-theme="dark"] .pd-title,
[data-theme="dark"] .auth-card h2,
[data-theme="dark"] .dash-head h1,
[data-theme="dark"] .panel-head h3,
[data-theme="dark"] .modal-box h2,
[data-theme="dark"] .confirm-box h3,
[data-theme="dark"] .side-card h4,
[data-theme="dark"] .post-author strong,
[data-theme="dark"] .comment-body strong,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .plan-price,
[data-theme="dark"] .pd-row span:last-child {  
  color: var(--ink-900);
}

[data-theme="dark"] .pc-body p,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .plan-features li,
[data-theme="dark"] .auth-card .sub,
[data-theme="dark"] .modal-box .sub,
[data-theme="dark"] .confirm-box p {  
  color: var(--ink-700);
}

/* Cards, painéis, formulários */
[data-theme="dark"] .project-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .step-card {  
  background: linear-gradient(180deg,#0e1f29,#0e1420);  
  box-shadow: 0 8px 24px rgba(0,0,0,.25);  
  border-color: var(--border);
}

/* Estes vencem os gradientes claros dos planos */
[data-theme="dark"] .plan-card.featured,
[data-theme="dark"] .plan-card.card-teste,
[data-theme="dark"] .plan-card.card-4dias,
[data-theme="dark"] .plan-card.card-mensal {  
  background: linear-gradient(165deg,#0e1f29,#0e1420);
}

[data-theme="dark"] .stat-card.gold {  
  background: linear-gradient(165deg,#142b37,#0e1f29);
}

[data-theme="dark"] .section-alt {  
  background: linear-gradient(180deg,#0e1420,#061218);
}

[data-theme="dark"] .site-header {  
  background: rgba(11,15,23,.85);  
  border-bottom-color: rgba(255,255,255,.06);
}

/* Títulos e textos que usam var(--navy-900) como cor de texto (inclusive
   em style="" inline nas páginas institucionais) ficavam quase invisíveis
   no modo escuro, pois --navy-900 é um azul bem escuro pensado pro tema
   claro. Aqui sobrescrevemos só a COR nesses casos, sem tocar na variável
   --navy-900 em si (ela também é usada como FUNDO em vários componentes
   escuros, como .toast, .dash-sidebar e o footer). */
[data-theme="dark"] h1[style*="navy-900"],
[data-theme="dark"] h2[style*="navy-900"],
[data-theme="dark"] h3[style*="navy-900"],
[data-theme="dark"] strong[style*="navy-900"],
[data-theme="dark"] .faq-item h3,
[data-theme="dark"] .legal-doc strong,
[data-theme="dark"] .warning-card strong,
[data-theme="dark"] .admin-head h1 {
  color: var(--ink-900) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .user-menu {  
  background-color: #0e1f29;  
  color: var(--ink-900);  
  border-color: rgba(255,255,255,.1);
}

/* Tabelas */
[data-theme="dark"] .data-table--sticky-first td:first-child,
[data-theme="dark"] .data-table--sticky-first th:first-child {  
  background-color: #0e1f29;
}

[data-theme="dark"] .table-wrap::before {
  background: linear-gradient(90deg,rgba(19,27,43,.95),transparent);
}
[data-theme="dark"] .table-wrap::after {
  background: linear-gradient(270deg,rgba(19,27,43,.95),transparent);
}

[data-theme="dark"] .empty-state {
  background-color: rgba(255,255,255,.02);
}

/* =========================================================
   AJUSTES ESPECÍFICOS DO PAINEL ADMIN NO MODO ESCURO
   ========================================================= */
[data-theme="dark"] .admin-head h1 {
  color: var(--ink-900);
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .select-input {
  background-color: #0e1f29;
  color: var(--ink-900);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   CORREÇÕES DE RESPONSIVIDADE E TEXTOS LONGOS
   ========================================================= */
/* Impede que palavras ou links gigantes quebrem o layout no celular */
.pd-title, 
.pd-desc,
.pc-body h3,
.pd-row span:last-child,
.post-body,
.comment-body p,
.stat-card .stat-value {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Mantém as quebras de linha naturais (parágrafos) na descrição do projeto */
.pd-desc {
  white-space: pre-wrap !important;
}

/* Melhora o comportamento de textos longos dentro dos inputs e textareas do formulário */
.field input {
  text-overflow: ellipsis;
}
.field textarea {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* =========================================================
   CORREÇÃO RESPONSIVA DA PÁGINA DE DETALHES DO PROJETO
   ========================================================= */
@media (max-width: 900px) {
  /* Garante margens seguras na página de detalhes para o conteúdo não colar na borda */
  .project-detail.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Força a grelha principal a empilhar e respeitar a largura da tela do telemóvel */
  .pd-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  /* Faz a coluna da esquerda (imagem e descrição) ocupar 100% sem transbordar */
  .pd-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Ajusta o título para ter margem resguardada */
  .project-detail .pd-title {
    font-size: 24px !important;
    word-break: break-word !important;
  }
}

/* =========================================================
   MENU MÓVEL (TELA CHEIA, BRANCO, BOTÕES COLORIDOS, SEM SCROLL)
   ========================================================= */

/* 🔥 Remove a "prisão" do desfoque no APK quando o menu abre 🔥 */
body.menu-open .site-header,
body.menu-open header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#mobileNav {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important; /* Estica até ao limite inferior sem usar calc() */
  background-color: #ffffff !important;
  z-index: 9999999 !important;
  overflow-y: auto !important; /* Permite scroll só se a tela for minúscula... */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
  padding: 10px 24px 30px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important;
}

/* ... mas esconde a barra feia no Android! */
#mobileNav::-webkit-scrollbar {
  display: none !important;
}

#mobileNav.open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s !important;
}

/* Estilo de todos os links (Negrito e linha separadora clara) */
#mobileNav a, #mobileNav button {
  color: #02141b !important;
  border-bottom: 1px solid #effbfe !important;
  padding: 14px 0 !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: block !important;
  margin: 0 !important;
}

#mobileNav a:hover { color: #2563eb !important; }

/* Botão Sair - Vermelho */
#mobileNav #logoutBtnMobile { color: #dc2626 !important; } 

/* Botão Entrar - Azul Royal (Pílula) */
#mobileNav a[href*="login"] {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  text-align: center !important;
  margin-top: 24px !important; /* Espaço fixo após o último link, sem depender de flex auto-margin */
  padding: 14px 20px !important;
}

/* Botão Cadastrar - Dourado (Pílula) */
#mobileNav a[href*="register"] {
  background: #facc15 !important;
  color: #02141b !important;
  border: none !important;
  border-radius: 999px !important;
  text-align: center !important;
  margin-top: 10px !important;
  padding: 14px 20px !important;
}

/* =========================================================
   INTELIGÊNCIA DO MENU (Visitante vs Usuário Logado)
   ========================================================= */
/* Visitante: Esconde "Sair", "Meu Painel", etc. */
body.is-guest #mobileNav #logoutBtnMobile,
body.is-guest #mobileNav a[href*="painel"],
body.is-guest #mobileNav a[href*="perfil"],
body.is-guest #mobileNav a[href*="indicacoes"] {
  display: none !important;
}

/* Usuário Logado: Esconde "Entrar" e "Cadastrar" */
body:not(.is-guest) #mobileNav a[href*="login"],
body:not(.is-guest) #mobileNav a[href*="register"] {
  display: none !important;
}

/* =========================================================
   CORREÇÃO GLOBAL: TEXTO NUMA LINHA E LONGE DOS BOTÕES
   ========================================================= */
@media (max-width: 960px) {
  .site-header .header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    justify-content: space-between !important;
  }
  .site-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .site-header .brand-name {
    display: inline-block !important;
    white-space: nowrap !important; /* Mantém tudo numa linha */
    font-size: clamp(12.5px, 3.8vw, 16px) !important; 
    max-width: none !important; 
  }
  
  /* O SEGREDO: Esconde o botão "Voltar ao site" no telemóvel para libertar espaço! */
  .header-actions > a.btn {
    display: none !important;
  }
  
  .header-actions {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    gap: 4px !important;
  }
}


/* =========================================================
   WIDGET DE SUPORTE EM TEMPO REAL
   ========================================================= */
.support-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}
.support-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
  cursor: pointer;
  border: none;
  transition: transform 0.2s;
  position: relative;
}
.support-fab:hover { transform: scale(1.05); }
.support-fab .badge-unread {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red-600);
  color: white;
  font-size: 11px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-main);
}
.support-window {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 340px;
  height: 480px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}
@media (max-width: 400px) {
  .support-window {
    position: fixed;
    bottom: 0; right: 0; width: 100vw; height: 100vh;
    border-radius: 0;
  }
}
.support-window.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.support-header {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600, var(--gold-500)));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.support-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.support-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  letter-spacing: .02em;
}
.support-header h4 { margin: 0; font-size: 15px; color: #fff; line-height: 1.3; }
.support-header p { margin: 2px 0 0; font-size: 11.5px; opacity: 0.92; display: flex; align-items: center; gap: 5px; }
.support-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.support-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.support-icon-btn {
  background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.support-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.support-close {
  background: none; border: none; color: rgba(255,255,255,.85); font-size: 22px; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .15s ease;
}
.support-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.support-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-warm, var(--surface));
}
.chat-msg {
  position: relative;
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  animation: chatMsgIn .18s ease both;
}
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.admin, .chat-msg.admin-received {
  background: var(--surface-alt, #fff);
  border: 1px solid var(--border);
  color: var(--ink-900);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-msg.user, .chat-msg.user-sent {
  background: var(--gold-500);
  color: #1a1204;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg-time, .support-msg-time {
  font-size: 10px;
  opacity: 0.65;
  text-align: right;
  clear: both;
}
/* Linha com o texto da mensagem e o horário/check lado a lado, com
   espaço mínimo garantido entre eles mesmo quando o texto é curto
   (evita o "opa16:43✓✓" grudado que o float:right causava). */
.support-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.support-msg-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.support-msg-row .support-msg-time {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 0;
  white-space: nowrap;
}
/* Check de mensagem lida (✓✓ estilo WhatsApp) */
.chat-msg-ticks {
  color: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.chat-msg-ticks.is-read { color: #4f9eff; opacity: 1; }
.chat-msg.user .chat-msg-ticks.is-read,
.chat-msg.user-sent .chat-msg-ticks.is-read,
.admin-sent .chat-msg-ticks.is-read { color: #2563eb; }

/* Imagem anexada dentro de uma bolha de mensagem */
.chat-msg-image {
  display: block;
  max-width: 100%;
  width: 220px;
  border-radius: 10px;
  margin-bottom: 4px;
  cursor: zoom-in;
}

/* Botão de anexar foto, ao lado do campo de texto */
.support-attach-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-600);
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.support-attach-btn:hover { background: var(--gold-100); color: var(--gold-700, var(--gold-500)); }

/* Prévia das fotos selecionadas antes de enviar */
.support-attach-preview {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
  flex-wrap: wrap;
  background: var(--surface);
}
.support-attach-thumb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.support-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-attach-thumb button {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.support-restart {
  padding: 18px 16px;
  text-align: center;
  background: var(--surface-warm, var(--surface));
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.support-restart p { margin: 0; font-size: 13px; color: var(--ink-600); }

/* Tela de boas-vindas com FAQ, exibida ao abrir o balão de suporte,
   antes de iniciar uma conversa de fato. */
.support-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--surface-warm, var(--surface));
}
.support-welcome-hero {
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600, var(--gold-500)));
  color: #1a1204;
}
.support-welcome-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}
.support-welcome-hero h3 { margin: 0; font-size: 19px; }

.support-start-chat-btn {
  margin: 14px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt, #fff);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, transform .12s ease;
}
.support-start-chat-btn:hover { border-color: var(--gold-500); transform: translateY(-1px); }
.support-start-chat-btn strong { display: block; font-size: 14px; }
.support-start-chat-btn small { display: block; font-size: 12px; color: var(--ink-600); margin-top: 2px; }
.support-start-chat-btn svg { flex-shrink: 0; color: var(--gold-500); }

.support-faq-head {
  padding: 4px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.support-faq-list { padding: 0 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.support-faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt, #fff);
  overflow: hidden;
}
.support-faq-q {
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.support-faq-plus {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-500);
  transition: transform .15s ease;
}
.support-faq-item.is-open .support-faq-plus { transform: rotate(45deg); }
.support-faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-600);
  transition: max-height .2s ease, padding .2s ease;
}
.support-faq-item.is-open .support-faq-a { max-height: 220px; padding: 0 14px 14px; }

.support-footer {
  padding: 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.support-footer input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-warm, var(--surface));
  color: var(--ink-900);
  outline: none;
  font-size: 14px;
}
.support-footer input:focus { border-color: var(--gold-500); }
.support-footer button {
  background: var(--gold-500);
  color: #1a1204;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .12s ease;
}
.support-footer button:hover { transform: scale(1.06); }

/* Botão de anexar foto */
.support-attach-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500);
  background: var(--surface-alt, transparent);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.support-attach-btn:hover { background: var(--gold-100); color: var(--gold-700, var(--gold-500)); }




/* =========================================================
   PAINEL DE SUPORTE (ADMIN)
   ========================================================= */
.admin-chat-layout {
  display: flex;
  height: 600px;
  max-height: 75vh;
  border-radius: var(--admin-radius);
}
.admin-chat-list {
  width: 320px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.admin-chat-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-chat-item:hover { background: var(--surface-alt); }
.admin-chat-item.active { background: rgba(212, 175, 55, 0.1); border-left: 3px solid var(--gold-500); padding-left: 13px; }
.admin-chat-item .aci-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-100); color: var(--gold-700, var(--gold-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.admin-chat-item .aci-content { min-width: 0; flex: 1; }
.admin-chat-item.unread .aci-header strong { color: var(--ink-900); font-weight: 700; }
.admin-chat-item.unread::after { 
  content: ""; display: inline-block; width: 9px; height: 9px; 
  background: var(--danger); border-radius: 50%; 
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  box-shadow: 0 0 0 2px var(--surface);
}
.aci-header { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: 14px; gap: 8px; }
.aci-lastmsg { font-size: 12.5px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }

.admin-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-warm, var(--surface));
}
.admin-chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-600); font-size: 15px; text-align: center; padding: 20px;
}
.admin-chat-active {
  flex: 1; display: none; flex-direction: column;
}
.admin-chat-header {
  padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); 
  display: flex; justify-content: space-between; align-items: center;
}
.admin-chat-body {
  flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}
.admin-sent { 
  background: var(--gold-500); color: #1a1204; align-self: flex-end; 
  border-radius: 16px 16px 0 16px; max-width: 78%; padding: 11px 15px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  animation: chatMsgIn .18s ease both;
}
.user-received { 
  background: var(--surface-alt, #fff); border: 1px solid var(--border); color: var(--ink-900); 
  align-self: flex-start; border-radius: 16px 16px 16px 0; max-width: 78%; padding: 11px 15px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  animation: chatMsgIn .18s ease both;
}
.admin-chat-footer {
  padding: 16px 24px; background: var(--surface); border-top: 1px solid var(--border); display: flex; gap: 12px;
}
.admin-chat-footer input { 
  flex: 1; padding: 13px 20px; border-radius: 30px; border: 1px solid var(--border); 
  background: var(--surface-warm, var(--surface)); color: var(--ink-900); outline: none; font-size: 14.5px;
}
.admin-chat-footer input:focus { border-color: var(--gold-500); }

@media (max-width: 768px) {
  .admin-chat-layout { flex-direction: column; height: 80vh; }
  .admin-chat-list { width: 100%; height: 30%; border-right: none; border-bottom: 1px solid var(--border); }
  .admin-chat-area { height: 70%; }
}