/* Temas do Lábia. O tema ativo vem de <html data-theme="..."> */

.brand img{width:30px;height:30px;border-radius:8px;display:block}
.dial{display:none}

/* ============ HOTEL LÁBIA: hotel boutique de luxo com senso de humor ============ */
[data-theme="hotel"]{
  --bg:#0A1A15; --surface:#0F241D; --surface-2:#163028; --line:#294638;
  --text:#F2EADB; --muted:#B4AF9D; --faint:#7D8877;
  --rose:#C9A35C; --rose-ink:#0A1A15; --amber:#F07FA2; --cold:#8DB2C4; --ok:#A6CF95;
  --mid:#B9A7C6; --soft:#E7A2B6; --soft-2:#F6D3DD; --dim-1:#22392F; --dim-2:#24363C; --card-hi:#12302A; --danger:#F07FA2; --danger-ink:#F8C9D6;
  --brass:linear-gradient(180deg,#E3C384 0%,#C9A35C 45%,#A88340 100%);
}
[data-theme^="hotel"]{
  --font:"Hanken Grotesk",system-ui,sans-serif; --display:"Bodoni Moda",Didot,Georgia,serif;
  --gold:color-mix(in srgb,var(--rose) 42%,transparent); --gold-soft:color-mix(in srgb,var(--rose) 20%,transparent);
  --r-sheet:20px; --r-block:6px; --r-field:6px;
}
[data-theme^="hotel"] body{font-family:var(--font);letter-spacing:.005em}

/* tipografia */
[data-theme^="hotel"] h1{font-family:var(--display);font-weight:500;font-size:37px;line-height:1.04;letter-spacing:-.015em;font-variation-settings:"opsz" 96;margin-top:14px}
[data-theme^="hotel"] h2{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.005em;font-variation-settings:"opsz" 28}
[data-theme^="hotel"] h3{font-family:var(--display);font-weight:600}
[data-theme^="hotel"] .lede{color:var(--muted);font-size:15.5px}
[data-theme^="hotel"] .brand{font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;letter-spacing:0;font-variation-settings:"opsz" 28}
[data-theme^="hotel"] .brand img{border-radius:7px}
[data-theme^="hotel"] .who b,[data-theme^="hotel"] .heat-num,[data-theme^="hotel"] .w-big b,[data-theme^="hotel"] .score-n b,[data-theme^="hotel"] .w-grid b,[data-theme^="hotel"] .cal b{
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-variation-settings:"opsz" 96}
[data-theme^="hotel"] .w-big b{font-size:96px}
[data-theme^="hotel"] .w-kicker{font-family:var(--display);font-style:italic;font-size:18px;color:var(--rose)}
[data-theme^="hotel"] .score-n:nth-child(2) b{color:var(--text)}
[data-theme^="hotel"] .score-n:nth-child(3) b,[data-theme^="hotel"] .w-conv b{color:var(--rose)}
[data-theme^="hotel"] .w-big:not(.w-conv) b{color:var(--text)}

/* papelaria: fios dourados duplos */
[data-theme^="hotel"] .heat,[data-theme^="hotel"] .tone-box,[data-theme^="hotel"] .own,[data-theme^="hotel"] .audio-card,[data-theme^="hotel"] .datecard,
[data-theme^="hotel"] .score,[data-theme^="hotel"] .raiox,[data-theme^="hotel"] .empty,[data-theme^="hotel"] .chat{
  background:var(--surface);border:1px solid var(--gold);outline:1px solid var(--gold-soft);outline-offset:-6px}
[data-theme^="hotel"] .heat{padding:22px 20px}
[data-theme^="hotel"] .reply{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--rose);border-radius:4px}
[data-theme^="hotel"] .reply .tone{font-family:var(--display);font-style:italic;font-weight:500;font-size:15px;color:var(--rose)}
[data-theme^="hotel"] .reply .txt{font-size:18px}
[data-theme^="hotel"] .drop{background:transparent;border:1px solid var(--gold);border-radius:6px}
[data-theme^="hotel"] .radar-item{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--rose);border-radius:4px}
[data-theme^="hotel"] .radar-item.r-pos{border-left-color:var(--amber)}
[data-theme^="hotel"] .radar-item.r-sumiu{border-left-color:var(--faint)}
[data-theme^="hotel"] .tip{border-left:0;padding:0;font-family:var(--display);font-style:italic;font-size:18px;color:var(--text)}
[data-theme^="hotel"] .tip::before{content:"“";color:var(--rose);margin-right:2px}
[data-theme^="hotel"] .tip::after{content:"”";color:var(--rose)}
[data-theme^="hotel"] .alert{border-radius:4px;background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
[data-theme^="hotel"] .alert b{font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;color:var(--amber)}
[data-theme^="hotel"] hr{border-top-color:var(--gold-soft)}

/* botões e controles */
[data-theme^="hotel"] .btn{border-radius:999px;font-weight:600;letter-spacing:.01em}
[data-theme^="hotel"] .btn-main{background:var(--brass);color:var(--rose-ink);box-shadow:inset 0 1px 0 #ffffff55,0 8px 20px -12px #000}
[data-theme^="hotel"] .btn-soft{background:transparent;border:1px solid var(--gold)}
[data-theme^="hotel"] .btn-line{border-color:var(--line)}
[data-theme^="hotel"] .chip{border-color:var(--line)}
[data-theme^="hotel"] .chip.on{background:transparent;color:var(--rose);border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose)}
[data-theme^="hotel"] .chip.fact{background:transparent;border-color:var(--gold-soft)}
[data-theme^="hotel"] .seg{border-color:var(--gold);background:transparent}
[data-theme^="hotel"] .seg button.on{background:var(--rose);color:var(--rose-ink)}
[data-theme^="hotel"] textarea,[data-theme^="hotel"] input,[data-theme^="hotel"] select{background:color-mix(in srgb,var(--bg) 70%,#000)}
[data-theme^="hotel"] .switch.on span{background:var(--rose)}
[data-theme^="hotel"] input[type=range]{height:4px}
[data-theme^="hotel"] input[type=range]::-webkit-slider-thumb{width:22px;height:22px;background:var(--brass);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--rose)}
[data-theme^="hotel"] .dial-b{font-family:var(--display)}
[data-theme^="hotel"] .pill{background:transparent;border:1px solid var(--line)}
[data-theme^="hotel"] .cal{background:transparent;border:1px solid var(--rose);color:var(--rose);border-radius:4px}
[data-theme^="hotel"] .datebig{background:var(--surface);border:1px solid var(--line);border-radius:4px}
[data-theme^="hotel"] .av{font-family:var(--display);font-weight:600;color:var(--bg)}
[data-theme^="hotel"] .bub.eu{background:var(--brass);color:var(--rose-ink)}
[data-theme^="hotel"] .bub.ela{background:var(--surface-2)}
[data-theme^="hotel"] .tabs{background:color-mix(in srgb,var(--bg) 94%,transparent);border-top:1px solid var(--gold-soft)}
[data-theme^="hotel"] .tabs button.on svg{stroke:var(--rose)}
[data-theme^="hotel"] .tabs span{letter-spacing:.02em}
[data-theme^="hotel"] #sheet{border-top:1px solid var(--gold)}
[data-theme^="hotel"] .theme-opt{border-radius:6px}

/* mostrador de elevador no lugar da barra de temperatura */
[data-theme^="hotel"] .heat-num,[data-theme^="hotel"] .heat-bar,[data-theme^="hotel"] .heat-scale{display:none}
[data-theme^="hotel"] .dial{display:block;text-align:center}
.dial svg{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}
.dial-read{margin-top:-6px}
.dial-read b{display:block;font-size:60px;line-height:.95;font-weight:500;font-family:var(--display)}
.dial-read span{font-family:var(--display);font-style:italic;color:var(--rose);font-size:18px}
.dial .needle{transform-origin:150px 150px;transition:transform 1.4s cubic-bezier(.2,.9,.2,1)}
[data-theme^="hotel"] .heat p{text-align:left}
@keyframes needle{from{transform:rotate(0deg)}}
.dial .needle{transform-origin:150px 150px;transform-box:view-box;animation:needle 1.5s cubic-bezier(.2,.9,.2,1) both}
.dial-read{margin-top:8px}