/* A living fantasy theme on top of the shared application layout. */
:root {
  --bg: #151127;
  --sidebar: #100e1e;
  --surface: #211d36;
  --surface-raised: #2b2445;
  --input: #171327;
  --text: #f8f3ff;
  --muted: #b9b0cc;
  --gold: #ffd17d;
  --gold-soft: #ffe3a2;
  --border: #493c63;
  --danger: #ff9fa9;
  --green: #80e6c5;
  --radius: 16px;
  --arcane: #bda0ff;
}
body { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; background-image: radial-gradient(ellipse at 90% 0%, #6d3dc125, transparent 44%), radial-gradient(ellipse at 10% 80%, #29527216, transparent 50%); }
h1 { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(29px, 3.3vw, 43px); letter-spacing: -1.4px; }
h2, h3, h4 { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
.eyebrow { font-size: 10px; color: var(--gold); letter-spacing: 1.4px; }
.app-sidebar { background: linear-gradient(180deg, #16112a, #100e1e 65%); border-color: #372b4f; }
.brand { font-family: 'Trebuchet MS', sans-serif; font-size: 19px; font-weight: 800; }
.brand strong { font-weight: 800; color: #d0b2ff; }
.brand small { font-size: 6.6px; color: #b2a6c5; letter-spacing: 1px; }
.brand-mark { width: 40px; height: 45px; color: #ffd17d; filter: drop-shadow(0 0 8px #ffc96845); transform: rotate(-10deg); }
.nav-caption { color: #a598bb; font-size: 8px; letter-spacing: 1.2px; }
.nav-link { border-radius: 10px; font-weight: 600; color: #c1b5d5; }
.nav-link:hover { background: #302440; color: #fff2e0; }
.nav-link.active { border-color: #76529e; color: #e1ceff; background: linear-gradient(100deg, #48305e, #2c2140); box-shadow: inset 3px 0 #bda0ff, 0 0 20px #af80ff0b; }
.sidebar-footer { color: #ada1bf; }
.dice-corner { margin: auto 7px 24px; padding: 22px 12px 12px; background: radial-gradient(ellipse at center top, #64489740, transparent 75%); border: 1px solid #48335f; border-radius: 14px; text-align: center; }
.dice-corner .nav-caption { margin: 0; display: block; font-size: 7px; }
.pocket-die { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 8px; position: relative; overflow: visible; width: 100%; background: none; border: none; color: #d5bdff; }
.pocket-die:disabled { opacity: 1; }
.dice-shape { display: grid; place-items: center; position: relative; width: 70px; height: 76px; transition: transform .2s; filter: drop-shadow(0 0 11px #a469ff45); }
.dice-shape svg { width: 70px; height: 76px; stroke-width: .7; }
.dice-shape strong { position: absolute; font: 800 22px 'Trebuchet MS', sans-serif; text-shadow: 0 2px 8px #170d30; }
.pocket-die:hover .dice-shape { transform: rotate(-12deg) scale(1.08); }
.dice-action { font-size: 12px; font-weight: 700; }
.dice-corner p { font-size: 9px; min-height: 29px; color: #bcb0d0; margin: 10px 0 0; }
.rolling .dice-shape { animation: dice-tumble .65s cubic-bezier(.25,.8,.3,1); }
.critical .dice-shape { color: #ffda74; filter: drop-shadow(0 0 15px #ffcb5880); }
.magic-burst { position: absolute; right: 18%; top: 30%; font-size: 24px; color: var(--gold); pointer-events: none; animation: sparkle-pop .6s ease-out forwards; }
.container { padding-top: 25px; }
.breadcrumb { color: #a89abc; margin-bottom: 18px; }
.breadcrumb span:last-child { color: #dfccee; }
.page-heading { min-height: 224px; padding: 30px 32px; border: 1px solid #78529c; border-radius: 20px; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, #22163bef 0%, #22163be0 36%, #25143982 62%, #1d153724 100%), url('../assets/rpg-adventure.png') right 22% / cover; box-shadow: 0 15px 45px #07051130; align-items: flex-end; }
.page-heading::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ffd791; position: absolute; right: 16%; top: 32%; box-shadow: 65px 65px 0 -1px #baffed, -75px 40px 0 -1px #ffdea0, -10px 92px 0 -1px #d3acff; animation: wandering-spark 6s ease-in-out infinite; pointer-events: none; z-index: -1; }
.page-heading > div:first-child { max-width: 66%; }
.page-heading h1 { font-size: clamp(28px, 3vw, 40px); color: #fff5e7; text-shadow: 0 3px 20px #0f061e; }
.page-heading .muted { color: #e5d6ee; max-width: 420px; font-size: 12px; line-height: 1.8; }
.page-heading .eyebrow { display: inline-block; padding: 4px 9px; border-radius: 5px; background: #12092190; border: 1px solid #d1a57848; font-size: 8px; }
.page-heading > .btn { flex-shrink: 0; background: #1e123ee8; color: #f1d9ff; border-color: #a67fb0; box-shadow: 0 4px 0 #150c26; }
.page-heading > .btn:hover { background: #4b2c69; }
.btn { border-radius: 10px; background: linear-gradient(180deg, #ffdf99, #ffc468); border-color: #ffe0a1; box-shadow: 0 3px 0 #9e642a; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.btn:hover { background: linear-gradient(180deg, #ffebb9, #ffd487); transform: translateY(-2px); box-shadow: 0 5px 0 #9e642a, 0 0 18px #ffcb4820; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9e642a; }
.btn-secondary { background: #362948; color: #edddff; border-color: #705789; box-shadow: 0 3px 0 #1a112a; }
.btn-secondary:hover { background: #4a345e; border-color: #b88dde; box-shadow: 0 5px 0 #1a112a; }
.btn-ghost { background: transparent; border-color: transparent; color: #c6b3d7; box-shadow: none; }
.btn-ghost:hover { background: #443051; border-color: transparent; box-shadow: none; color: #fff0ff; }
.btn-danger { background: #4a23383d; border-color: #88506b; color: #ffa9b9; box-shadow: none; }
.btn-danger:hover { background: #693448; border-color: #cc7a90; box-shadow: none; }
.btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }
.card { background: linear-gradient(140deg, #282039, #211d36); border-color: #514063; box-shadow: 0 4px 14px #08061325; }
input, select, textarea { background: #171327; border-color: #534264; border-radius: 8px; }
input::placeholder, textarea::placeholder { color: #a599b6; }
input:focus, select:focus, textarea:focus { border-color: #c496ff; box-shadow: 0 0 0 3px #b787ff1c; }
label { color: #d9cde5; }
.card-header h3, .attribute-head h3 { font-size: 16px; color: #f5e8ff; }
.card-header .muted { font-size: 10px; color: #b6a3c9; }
.character-library { background: #201a31; border-color: #594168; border-radius: 16px; padding: 16px; }
.library-heading h2 { font-size: 16px; font-weight: 800; color: #f3daff; }
.library-heading h2::before { content: '✦'; color: var(--gold); margin-right: 7px; }
.library-caption { color: #b5a4c5; border-color: #463653; }
[data-theme=warrior] { --class-color: #ffb775; --class-background: #503426; }
[data-theme=arcane] { --class-color: #ceafff; --class-background: #453068; }
[data-theme=forest] { --class-color: #86e8c2; --class-background: #24493f; }
[data-theme=divine] { --class-color: #ffe595; --class-background: #4c4123; }
.ficha-item { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 11px; align-items: center; border-radius: 12px; background: #191428; border: 1px solid #463553; padding: 14px 11px; transition: transform .18s, background .18s, border-color .18s; }
.ficha-item:hover { transform: translateX(3px); background: #30203f; border-color: var(--class-color); }
.ficha-item.active { background: linear-gradient(110deg, #3d2d45, #251b35); border-color: var(--class-color); box-shadow: inset 3px 0 var(--class-color), 0 0 20px #d296ff0b; }
.sheet-avatar { width: 40px; height: 45px; display: grid; place-items: center; color: var(--class-color); background: var(--class-background); border: 1px solid var(--class-color); border-radius: 12px 12px 16px 16px; transform: rotate(-4deg); }
.sheet-avatar svg { width: 24px; height: 24px; stroke-width: 1.4; }
.sheet-copy { min-width: 0; }
.ficha-item strong { font-size: 12px; }
.ficha-item .character-class { color: var(--class-color); font-size: 10px; }
.ficha-item small { font-size: 9px; color: #bcaccb; margin-top: 6px; }
.character-overview { position: relative; overflow: hidden; background: linear-gradient(115deg, #3f2346, #26203e 65%, #32224c); border: 1px solid #86548b; padding: 23px; }
.character-overview::after { content: '✦'; position: absolute; font-size: 135px; line-height: 1; color: var(--class-color); opacity: .05; right: 7%; top: 10px; transform: rotate(15deg); pointer-events: none; }
.character-overview h2 { font: 800 23px/1.3 'Trebuchet MS', sans-serif; }
.character-overview .eyebrow { color: var(--class-color); font-size: 8px; }
.character-overview .muted { color: #d6c4e6; }
.character-emblem { background: var(--class-background); color: var(--class-color); border-color: var(--class-color); border-radius: 16px 16px 24px 24px; box-shadow: 0 0 22px #a05dfa18; transform: rotate(-5deg); }
.character-emblem svg { width: 34px; height: 34px; stroke-width: 1.1; animation: emblem-float 5s ease-in-out infinite; }
.level-token { position: relative; z-index: 1; border-color: #71536f; }
.level-token span { color: #ffdc9c; }
.level-token strong { font: 800 31px 'Trebuchet MS', sans-serif; color: #fff0c4; }
.summary-grid { border-color: #71506f; background: #201931; }
.summary-item { position: relative; overflow: hidden; padding: 16px 20px; }
.summary-item + .summary-item { border-color: #493653; }
.summary-item span { font-size: 10px; color: #d6c4e4; display: flex; align-items: center; gap: 6px; }
.summary-item i { font-size: 15px; font-style: normal; }
.summary-item strong { display: inline-block; font: 800 27px 'Trebuchet MS', sans-serif; margin-top: 2px; }
.stat-life { background: linear-gradient(130deg, #ce486116, transparent); }
.stat-life i, .stat-life strong { color: #ff9baa; }
.stat-armor { background: linear-gradient(130deg, #5dcbbb13, transparent); }
.stat-armor i, .stat-armor strong { color: #90e9d9; }
.stat-speed { background: linear-gradient(130deg, #e5b64714, transparent); }
.stat-speed i, .stat-speed strong { color: #ffe49c; }
.editor-tabs { border-bottom: 0; background: #100c2080; border: 1px solid #463153; border-radius: 12px; gap: 4px; padding: 5px; }
.editor-tabs button { flex: 1; padding: 11px 9px; color: #c2acd3; border-radius: 8px; border: 1px solid transparent; font-weight: 700; font-size: 11px; transition: background .15s, color .15s; }
.editor-tabs button:hover { color: #fff; background: #3b294b; }
.editor-tabs button[aria-selected=true] { color: #f7e2ff; background: linear-gradient(180deg, #694477, #4f2c65); border: 1px solid #a574bf; box-shadow: 0 2px 8px #0002; }
.points-pill { color: #aef0d7; background: #223e35; border-color: #4e8269; padding: 6px 10px; }
.point-meter { appearance: none; display: block; width: 100%; height: 5px; border: 0; border-radius: 4px; overflow: hidden; margin: -4px 0 17px; background: #151022; }
.point-meter::-webkit-progress-bar { background: #151022; }
.point-meter::-webkit-progress-value { background: linear-gradient(90deg, #8864d5, #9ae6c5); border-radius: 4px; transition: width .25s; }
.point-meter::-moz-progress-bar { background: #9ae6c5; }
.attr { --attribute-color: #d2b5ff; background: #1c172d; border-color: #574368; border-radius: 11px; padding: 15px 10px 11px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.attr:hover { transform: translateY(-3px); border-color: var(--attribute-color); box-shadow: 0 7px 16px #07051350; }
.attr[data-attribute=forca] { --attribute-color: #ffb68a; }
.attr[data-attribute=destreza] { --attribute-color: #8fe3cf; }
.attr[data-attribute=constituicao] { --attribute-color: #ff9eb8; }
.attr[data-attribute=sabedoria] { --attribute-color: #9dcbff; }
.attr[data-attribute=carisma] { --attribute-color: #ffe09e; }
.attribute-symbol { display: inline-block; margin-right: 5px; color: var(--attribute-color); font-size: 16px; vertical-align: middle; }
.attr-title strong { color: #ecddf7; }
.attr-title small { color: #baa6ca; }
.stat-total { font: 800 28px 'Trebuchet MS', sans-serif; color: var(--attribute-color); }
.attr-controls .btn { background: #3d2b4f; color: #edd3ff; border-color: #73518d; border-radius: 7px; box-shadow: 0 2px 0 #120c21; }
.attr-controls .btn:hover { background: #66417c; border-color: var(--attribute-color); color: #fff; }
.editor-footer { background: #2a1b3df5; border-color: #8e64a4; border-radius: 12px; box-shadow: 0 8px 30px #05020a70; }
.editor-footer .save-hint { color: #d8c0e9; font-size: 10px; }
.editor-footer .btn-danger { background: transparent; }
.field-hint { color: #b29bc6; }
.empty-state { background: #20192e; border-color: #624770; color: #c5b2d8; }
.skill, .readonly-card { background: #1b162d; border-color: #514064; border-radius: 12px; }
.skill strong, .readonly-card > strong { color: #ebcdff; }
.skill > div { color: #c7b7d6; }
.skill small { color: #b29bc5; }
.section-index { border-color: #9568af; background: #422952; color: #ebc2ff; transform: rotate(-5deg); border-radius: 8px; }
.campaign-intro .card p { color: #c5b2d5; }
.card-accent { border-top-color: #d0a4ff; }
.section-heading h2 { font: 800 24px 'Trebuchet MS', sans-serif; color: #f3dcff; }
.mesa-item-card { position: relative; overflow: hidden; padding-top: 110px; border-radius: 16px; border-color: #8f62a6; background: #261d39; transition: transform .18s, box-shadow .18s; }
.mesa-item-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 100px; background: linear-gradient(0deg, #261d39, #261d3900 80%), url('../assets/rpg-adventure.png') right 24% / cover; }
.mesa-item-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #09031250; }
.mesa-item-card .campaign-symbol { position: absolute; right: 20px; top: 76px; z-index: 1; width: 42px; height: 42px; margin: 0; border-color: #d5a6ed; background: #3f2857; color: #e0b4ff; transform: rotate(8deg); border-radius: 10px; }
.mesa-item-card strong { font: 800 21px 'Trebuchet MS', sans-serif; }
.mesa-item-card .campaign-meta { color: #cbb7d9; }
.mesa-item-card .campaign-footer { border-color: #5b406b; }
.role-badge { border-color: #97704c; background: #503522; color: #ffe3a2; }
.notice { background: #21342f; border-color: #527865; }
.notice p { color: #c5eddb; }
.combatente-card { background: #251c36; border-color: #674878; }
.combatente-ativo { border-color: #ffd27d; border-left-width: 3px; background: linear-gradient(130deg, #4b3037, #2a1e36); box-shadow: 0 0 22px #ffad4510; }
.turn-tag { color: #ffe7b1; background: #895321; border: 1px solid #d39246; border-radius: 6px; font-size: 9px; font-weight: 700; animation: turn-glow 3s ease-in-out infinite; }
.combat-ficha .ficha-heading strong { color: #e8c8ff; }
.combat-ficha .ficha-heading span { color: #c2aed0; }
.combat-ficha .ficha-stats span { background: #32233f; border-color: #6f4e7e; color: #e4ccee; }
.mobile-dice { display: none; }
.mobile-dice .btn svg { width: 15px; height: 15px; }
.mobile-dice .rolling svg { animation: dice-tumble .35s ease-out; }
.auth-page { background: #151127; }
.auth-story { background: linear-gradient(180deg, #160d2990, #140b23c0), url('../assets/rpg-adventure.png') 66% center / cover; border-color: #563765; }
.auth-story-content h1 { font-family: 'Trebuchet MS', sans-serif; font-weight: 800; font-size: clamp(42px, 4.4vw, 65px); }
.auth-story-content h1 em { font-weight: 800; color: #ffd484; }
.auth-story-content > p { color: #eee0f5; text-shadow: 0 2px 10px #05000c; }
.auth-story-content .eyebrow { font-size: 10px; color: #ffd791; }
.auth-dice { display: none; }
.auth-features span { color: #f0d5ff; }
.auth-caption { color: #d2b6e2; font-size: 9px; text-shadow: 0 2px 10px #090210; }
.auth-card h2 { font: 800 31px 'Trebuchet MS', sans-serif; }
.auth-card .eyebrow { color: #cfacff; }
.text-button { color: #dcb3ff; }
.auth-rule { background: #543765; }
.auth-note { color: #b9a2cb; }
@keyframes dice-tumble { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(-45deg) scale(.8); } 60% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes sparkle-pop { from { opacity: 1; transform: translateY(0) rotate(0) scale(.5); } to { opacity: 0; transform: translateY(-55px) rotate(100deg) scale(1.8); } }
@keyframes wandering-spark { 0%,100% { opacity: .4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-12px); } }
@keyframes emblem-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes turn-glow { 0%,100% { box-shadow: 0 0 0 #ffc75d00; } 50% { box-shadow: 0 0 13px #ffc75d35; } }
@media (max-width:1200px) { .page-heading { padding: 26px; min-height: 220px; } .page-heading > div:first-child { max-width: 62%; } .page-heading h1 { font-size: 33px; } .ficha-item { grid-template-columns: 33px minmax(0,1fr); gap: 8px; padding: 13px 9px; } .sheet-avatar { width: 33px; height: 39px; } .sheet-avatar svg { width: 21px; } }
@media (max-width:1000px) { .dice-corner { margin-left: 0; margin-right: 0; padding-left: 7px; padding-right: 7px; } .page-heading { align-items: flex-start; flex-direction: column; justify-content: center; gap: 18px; } .page-heading > div:first-child { max-width: 80%; } .page-heading h1 { font-size: 33px; } .ficha-item { grid-template-columns: 40px minmax(0,1fr); gap: 11px; } .sheet-avatar { width: 40px; height: 44px; } }
@media (max-width:800px) { .dice-corner { display: none; } .app-sidebar { border-bottom-color: #573965; background: #171023; } .nav-link { border-radius: 0; } .nav-link.active { background: transparent; box-shadow: none; border-bottom-color: #d1a1ff; } .page-heading { min-height: 260px; } .mobile-dice { display: flex; gap: 10px; align-items: center; font-size: 9px; color: #e1c9f5; } .mobile-dice .btn { padding: 6px 11px; min-height: 34px; font-size: 10px; } }
@media (max-width:580px) {
  .brand { font-size: 19px; }
  .page-heading { min-height: 292px; padding: 23px; border-radius: 16px; background-position: 65% 20%; gap: 14px; }
  .page-heading > div:first-child { max-width: 100%; }
  .page-heading h1 { font-size: 31px; letter-spacing: -1px; max-width: 290px; }
  .page-heading .muted { font-size: 11px; max-width: 275px; }
  .page-heading > .btn { min-height: 37px; font-size: 11px; padding: 8px 12px; }
  .page-heading .eyebrow { font-size: 7px; padding: 4px 7px; }
  .character-library { padding: 14px; }
  .ficha-item { grid-template-columns: 28px minmax(0,1fr); padding: 12px 9px; gap: 7px; }
  .sheet-avatar { width: 28px; height: 34px; border-radius: 8px 8px 12px 12px; }
  .sheet-avatar svg { width: 19px; height: 19px; }
  .ficha-item strong { font-size: 11px; }
  .ficha-item .character-class { font-size: 9px; }
  .ficha-item small { font-size: 8px; }
  .character-overview { padding: 19px 14px; }
  .character-overview h2 { font-size: 19px; }
  .character-emblem { border-radius: 12px 12px 18px 18px; }
  .character-emblem svg { width: 26px; height: 28px; }
  .summary-item { padding: 14px 11px; }
  .summary-item span { min-height: auto; font-size: 9px; }
  .summary-item strong { font-size: 24px; }
  .summary-item i { font-size: 12px; }
  .editor-tabs { gap: 2px; }
  .editor-tabs button { font-size: 10px; padding: 10px 5px; }
  .card { padding: 18px; }
  .card-header { flex-wrap: wrap; }
  .card-header h3, .attribute-head h3 { font-size: 14px; }
  .attribute-head { flex-wrap: wrap; }
  .points-pill { font-size: 9px; }
  body[data-page=catalogo] .editor-tabs { gap: 4px; }
  body[data-page=catalogo] .editor-tabs button { text-align: center; }
  .auth-story { background-position: 75% 30%; padding-top: 24px; padding-bottom: 26px; }
  .auth-story-content h1 { font-size: 41px; }
  .auth-story-content > p { font-size: 12px; }
  .auth-card h2 { font-size: 29px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }