.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  color: #31442e;
  border-color: rgba(29,49,27,.15);
  background: rgba(255,255,255,.42);
  font-size: 12px;
}
.theme-icon {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset -4px -3px 0 0 currentColor;
}

.tabs button::before { display: none; content: none; }
.tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .035em;
}
.nav-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabs::before,
.obs-card::before,
.timer-top,
.eyebrow,
label,
.custom-time-form label {
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
}
.tabs::before { font-size: 13px; color: #485440; }
.obs-card::before { font-size: 13px; }
.timer-top { font-size: 13px; }
.eyebrow { font-size: 12px; line-height: 1.4; }
label, .custom-time-form label { font-size: 12px; letter-spacing: .055em; }

.platform {
  width: 52px;
  height: 52px;
  padding: 7px;
  overflow: hidden;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(29,49,27,.1);
  box-shadow: 0 8px 20px rgba(32,43,24,.1);
}
.platform img { width: 100%; height: 100%; object-fit: contain; display: block; }
.platform.twitch,.platform.streamlabs{padding:0}.platform.twitch img,.platform.streamlabs img{object-fit:cover;border-radius:inherit}
.platform.kick { background: #111 !important; }
.platform.se { background: rgba(255,255,255,.94) !important; }

.tabs::after {
  content: none;
  display: none;
}

#historyTab {
  background-image:
    linear-gradient(90deg, rgba(255,252,238,.96) 0%, rgba(255,252,238,.9) 58%, rgba(255,252,238,.5)),
    url('/egypt-garden.png');
  background-position: center, right center;
  background-size: cover, cover;
}

#connectionsTab {
  background-image:
    linear-gradient(110deg, rgba(255,252,238,.97), rgba(255,252,238,.88) 62%, rgba(255,252,238,.58)),
    url('/egypt-lake.png');
  background-position: center, center;
  background-size: cover, cover;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07100d;
  --panel: rgba(8, 18, 15, .86);
  --panel2: rgba(13, 27, 22, .92);
  --text: #f5f2df;
  --muted: #a8b0a1;
  --line: rgba(218, 240, 197, .15);
  --lime: #baff3d;
  --orange: #ffb44d;
  --water: #42d6cc;
}

html[data-theme="dark"] body { color: var(--text); background: #07100d; }
html[data-theme="dark"] body::before { filter: saturate(.86) brightness(.55) contrast(1.12); }
html[data-theme="dark"] body::after {
  background:
    radial-gradient(circle at 12% 18%, rgba(220,74,44,.24), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(245,174,57,.2), transparent 34%),
    radial-gradient(circle at 78% 82%, rgba(28,167,159,.22), transparent 36%),
    linear-gradient(180deg, rgba(4,10,8,.2), rgba(4,13,10,.66) 55%, rgba(2,8,6,.88));
}

html[data-theme="dark"] .topbar {
  color: #f4f1df;
  border-color: rgba(216,240,196,.14);
  background: rgba(7,16,13,.82);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
html[data-theme="dark"] .brand, html[data-theme="dark"] .header-link { color: #f4f1df; }
html[data-theme="dark"] .brand span strong { color: #baff3d; }
html[data-theme="dark"] .status { color: #b8c1b1; }
html[data-theme="dark"] .user-chip { color: #caff67; background: rgba(186,255,61,.1); border-color: rgba(186,255,61,.24); }
html[data-theme="dark"] .logout-btn, html[data-theme="dark"] .theme-toggle {
  color: #e9ecd9;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.13);
}
html[data-theme="dark"] .theme-icon { box-shadow: none; background: linear-gradient(90deg, transparent 50%, currentColor 50%); }

html[data-theme="dark"] .timer-card,
html[data-theme="dark"] .obs-card,
html[data-theme="dark"] .tab-panel,
html[data-theme="dark"] .tabs {
  color: #f4f1df;
  border-color: rgba(218,240,197,.14);
  box-shadow: 0 22px 64px rgba(0,0,0,.32);
}
html[data-theme="dark"] .timer-card {
  background:
    radial-gradient(circle at 87% 3%, rgba(224,91,43,.22), transparent 34%),
    linear-gradient(125deg, rgba(11,28,22,.93), rgba(23,39,27,.88) 58%, rgba(29,58,36,.84));
}
html[data-theme="dark"] .timer-card::before { background: radial-gradient(circle, rgba(255,105,49,.25), rgba(255,181,59,.08) 58%, transparent 70%); }
html[data-theme="dark"] .timer-top { color: #aeb8a9; }
html[data-theme="dark"] .timer { text-shadow: none; }
html[data-theme="dark"] .pill { color: #ffd27a; background: rgba(255,180,77,.08); border-color: rgba(255,180,77,.25); }
html[data-theme="dark"] .timer-actions { border-color: rgba(229,243,213,.12); background: rgba(1,8,5,.34); }
html[data-theme="dark"] .custom-time-form { border-top-color: rgba(229,243,213,.12); }
html[data-theme="dark"] .custom-time-form label { color: #aeb6a7; }

html[data-theme="dark"] .tabs { background: rgba(8,20,15,.88); }
html[data-theme="dark"] .tabs::before { color: #8f9b8b; }
html[data-theme="dark"] .tabs::before { color: #d8dfd1; }
html[data-theme="dark"] .obs-card::before,
html[data-theme="dark"] .timer-top,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] label,
html[data-theme="dark"] .custom-time-form label { color: #d6dfcf; }
html[data-theme="dark"] .tabs button { color: #b8c0b2; }
html[data-theme="dark"] .tabs button.active { color: #102107; background: linear-gradient(105deg,#c8fa5a,#8ed625); }
html[data-theme="dark"] .tabs::after { filter: brightness(.64) saturate(.84); }

html[data-theme="dark"] .tab-panel { background: rgba(8,20,15,.9); }
html[data-theme="dark"] .section-head { border-bottom-color: rgba(218,240,197,.12); }
html[data-theme="dark"] .section-head h2 { color: #f4f1df; }
html[data-theme="dark"] .eyebrow { color: #baff3d; }
html[data-theme="dark"] label { color: #aeb8a9; }
html[data-theme="dark"] .rule-form { border-color: rgba(218,240,197,.1); border-left-color: #a8eb32; background: rgba(1,8,5,.3); }
html[data-theme="dark"] input,
html[data-theme="dark"] select { color: #f2f1df; border-color: rgba(218,240,197,.14); background: rgba(1,8,5,.5); }
html[data-theme="dark"] button { color: #eef1df; border-color: rgba(218,240,197,.14); background: rgba(255,255,255,.055); }
html[data-theme="dark"] button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .primary { color: #102107; background: linear-gradient(105deg,#c8fa5a,#8ed625); border-color: #8ed625; }
html[data-theme="dark"] .danger { color: #ff9a9d; }
html[data-theme="dark"] .rule-item,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .connections article { border-color: rgba(218,240,197,.11); background: rgba(1,8,5,.38); }
html[data-theme="dark"] .rule-main span,
html[data-theme="dark"] .history-item span,
html[data-theme="dark"] .connections p,
html[data-theme="dark"] .note { color: #9ca797; }
html[data-theme="dark"] .tag { color: #c9ff68; border-color: rgba(186,255,61,.25); background: rgba(186,255,61,.08); }
html[data-theme="dark"] .result-box { color: #9ca797; border-color: rgba(218,240,197,.18); }

.rules-list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px}.rule-platform-card{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.48);box-shadow:0 12px 28px rgba(20,35,18,.06)}.rule-platform-card>header{display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid var(--line)}.rule-platform-card>header .platform{flex:0 0 42px;width:42px;height:42px}.rule-platform-card>header h3,.rule-platform-card>header p{margin:0}.rule-platform-card>header p{color:var(--muted);font-size:12px}.platform-rule-list{display:grid;gap:8px;padding:10px}.platform-rule-list .rule-item{grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0;padding:12px}.platform-empty{padding:18px 10px;text-align:center;color:var(--muted);font-size:13px}.rule-item.rule-conflict{border-color:#ff5f69!important;background:rgba(255,57,72,.1)!important;box-shadow:inset 3px 0 #ff5f69,0 0 0 1px rgba(255,95,105,.12)}.rule-conflict-warning{display:block!important;margin-top:7px;color:#ff737c!important;font-weight:800;line-height:1.35}.rule-platform-card .icon-btn{align-self:center;padding:7px 9px}html[data-theme="dark"] .rule-platform-card{background:rgba(1,8,5,.48);border-color:rgba(218,240,197,.12)}html[data-theme="dark"] .rule-platform-card>header{border-bottom-color:rgba(218,240,197,.1)}

html[data-theme="dark"] #historyTab {
  background-image: linear-gradient(90deg, rgba(8,20,15,.98), rgba(8,20,15,.92) 60%, rgba(8,20,15,.64)), url('/egypt-garden.png');
}
html[data-theme="dark"] #connectionsTab {
  background-image: linear-gradient(110deg, rgba(8,20,15,.98), rgba(8,20,15,.9) 62%, rgba(8,20,15,.62)), url('/egypt-lake.png');
}

html[data-theme="dark"] .access-card {
  color: #f4f1df;
  border-color: rgba(218,240,197,.16);
  background: rgba(7,18,14,.88);
}
html[data-theme="dark"] .access-card::before,
html[data-theme="dark"] .access-card > p:not(.eyebrow,.note) { color: #aab3a4; }
html[data-theme="dark"] .access-card .inline { background: rgba(1,8,5,.34); border-color: rgba(218,240,197,.13); }

@media (max-width: 980px) {
  .tabs::after { display: none; }
}

@media (max-width: 720px) {
  .theme-toggle #themeLabel { display: none; }
  .theme-toggle { padding: 8px; }
}

/* Panoramas temáticos: cada herramienta conserva una identidad propia. */
#rulesTab {
  background-image:
    linear-gradient(105deg, rgba(255,252,238,.98) 0%, rgba(255,252,238,.93) 50%, rgba(207,241,192,.58) 100%),
    url('/egypt-lake.png');
  background-position: center, center 48%;
  background-size: cover, cover;
}

#testTab {
  background-image:
    linear-gradient(115deg, rgba(255,252,238,.98) 0%, rgba(255,249,224,.9) 55%, rgba(91,196,187,.48) 100%),
    url('/egypt-garden.png');
  background-position: center, center 54%;
  background-size: cover, cover;
}

#historyTab {
  background-image:
    linear-gradient(110deg, rgba(255,252,238,.98) 0%, rgba(255,247,220,.9) 58%, rgba(239,154,60,.42) 100%),
    url('/egypt-house.png');
  background-position: center, center 50%;
  background-size: cover, cover;
}

#connectionsTab {
  background-image:
    linear-gradient(110deg, rgba(255,252,238,.98) 0%, rgba(242,251,226,.89) 60%, rgba(57,183,178,.44) 100%),
    url('/egypt-pyramids.jpg');
  background-position: center, center 58%;
  background-size: cover, cover;
}

#appearanceTab {
  background-image:
    linear-gradient(112deg, rgba(255,252,238,.98) 0%, rgba(255,244,218,.9) 57%, rgba(226,102,73,.38) 100%),
    url('/egypt-oasis.jpg');
  background-position: center, center 52%;
  background-size: cover, cover;
}
#widgetsTab{background-image:linear-gradient(112deg,rgba(255,252,238,.98) 0%,rgba(240,252,222,.91) 52%,rgba(21,173,167,.32) 100%),url('/egypt-fields.jpg');background-position:center;background-size:cover}
html[data-theme="dark"] #widgetsTab{background-image:linear-gradient(112deg,rgba(8,20,15,.98) 0%,rgba(8,20,15,.87) 48%,rgba(15,85,79,.27) 100%),url('/egypt-fields.jpg')}
.section-copy{max-width:650px;margin:7px 0 0;color:var(--muted);font-size:13px}.widget-status{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}.widget-status.ready{border-color:rgba(184,255,61,.4);background:rgba(184,255,61,.1);color:var(--lime)}
.widget-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:16px}.wheel-form,.wheel-preview-card{border:1px solid var(--line);border-radius:17px;background:rgba(2,10,7,.53);backdrop-filter:blur(12px)}.wheel-form{display:grid;gap:14px;padding:18px}.wheel-preview-card{align-self:start;padding:20px;position:sticky;top:88px}.widget-block{display:grid;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line)}.widget-step{color:var(--lime);font-size:10px;font-weight:900;letter-spacing:.13em}.widget-fields{display:grid;gap:12px}.widget-fields.two{grid-template-columns:1.5fr .5fr}.widget-fields.three{grid-template-columns:repeat(3,1fr)}.segment-count{max-width:230px}.wheel-segments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.wheel-segments label{position:relative}.wheel-segments label span{position:absolute;left:10px;top:30px;color:var(--muted);font-size:11px;pointer-events:none}.wheel-segments input{padding-left:40px}.widget-toggle{display:flex;flex-direction:row;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035)}.widget-toggle input{width:20px;height:20px;accent-color:var(--lime)}.widget-toggle span{display:grid}.widget-toggle strong{color:var(--text)}.widget-toggle small{color:var(--muted);font-weight:600}.widget-actions{display:flex;gap:10px}.widget-actions .primary{flex:1}.mini-wheel-wrap{position:relative;width:min(100%,330px);margin:18px auto 25px;aspect-ratio:1}.mini-wheel-wrap canvas{width:100%;height:100%;border-radius:50%;border:7px solid var(--wheel-border,#f5d76e);box-shadow:0 0 19px var(--wheel-border,#f5d76e)}.mini-wheel-wrap i{position:absolute;left:50%;top:-12px;transform:translateX(-50%);width:34px;height:43px;background:var(--wheel-border,#f5d76e);clip-path:polygon(50% 100%,0 0,100% 0)}.widget-overlay-link{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px}.wheel-preview-card>p{margin:12px 0 0;color:var(--muted);font-size:11px}
.wheel-platforms{display:flex;flex-wrap:wrap;gap:10px}.wheel-platforms label{cursor:pointer}.wheel-platforms input{position:absolute;width:1px;height:1px;opacity:0}.wheel-platforms label>span{display:flex;align-items:center;gap:9px;min-width:128px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.035);transition:.18s ease}.wheel-platforms img{width:22px;height:22px;object-fit:contain}.wheel-platforms input:checked+span{color:var(--text);border-color:var(--water);background:rgba(53,210,207,.12);box-shadow:0 0 0 2px rgba(53,210,207,.08)}.wheel-platforms input:focus-visible+span{outline:2px solid var(--water);outline-offset:2px}
.wheel-color-fields{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}.wheel-history-section{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(2,10,7,.53);backdrop-filter:blur(12px)}.wheel-history-section h3{margin:5px 0 0;font-size:20px}.wheel-history-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.wheel-history-heading .danger{flex:0 0 auto}.wheel-history{display:grid;gap:8px;margin-top:14px}.wheel-history-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035)}.wheel-history-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(184,255,61,.12);color:var(--lime);font-size:22px}.wheel-history-item div{display:grid;gap:3px}.wheel-history-item strong{color:var(--text)}.wheel-history-item span,.wheel-history-item time{color:var(--muted);font-size:12px}.wheel-history-item time{text-align:right}
.connection-actions{display:flex;gap:8px;align-items:center}.connection-actions button{white-space:nowrap}
@media(max-width:980px){.widget-layout{grid-template-columns:1fr}.wheel-preview-card{position:static}.wheel-segments{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.rules-list{grid-template-columns:1fr 1fr}.rule-platform-streamelements{grid-column:1/-1}}
@media(max-width:560px){.widget-fields.two,.widget-fields.three,.wheel-color-fields{grid-template-columns:1fr}.wheel-segments{grid-template-columns:repeat(2,1fr)}.widget-actions,.widget-overlay-link{grid-template-columns:1fr;display:grid}.wheel-history-heading{align-items:stretch;flex-direction:column}.wheel-history-heading .danger{width:100%}.wheel-history-item{grid-template-columns:auto 1fr}.wheel-history-item time{grid-column:2;text-align:left}}
@media(max-width:680px){.rules-list{grid-template-columns:1fr}.rule-platform-streamelements{grid-column:auto}}
.appearance-form{display:grid;gap:14px}
.appearance-group{min-width:0;margin:0;padding:19px;border:1px solid var(--line);border-radius:16px;background:rgba(5,12,10,.46)}
.appearance-group legend{display:flex;align-items:center;gap:11px;padding:0 10px 0 0;color:var(--text);font-size:15px;font-weight:850;letter-spacing:.01em}
.appearance-group legend>span:last-child{display:grid;gap:2px}
.appearance-group legend small{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0}
.appearance-step{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(184,255,61,.12);color:var(--lime);font-size:11px;font-weight:900}
.appearance-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
.appearance-fields.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-help{min-height:16px;margin-top:-6px;color:var(--muted);font-size:10px;font-weight:600}
.appearance-check .check-row{min-height:54px;display:flex;flex-direction:row;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(5,12,10,.45)}
.appearance-check input[type="checkbox"]{width:20px;height:20px;accent-color:var(--lime);flex:0 0 auto}
.appearance-check .check-row>span{display:grid;gap:1px}.appearance-check .check-row strong{color:var(--text);font-size:13px}.appearance-check .check-row small{color:var(--muted);font-size:10px;font-weight:600}
.neon-fields{grid-template-columns:minmax(240px,1.4fr) minmax(160px,1fr)}
.appearance-form[data-fill="solid"] .gradient-option,.appearance-form[data-neon="off"] .neon-option{opacity:.38}
.appearance-form[data-fill="solid"] .gradient-option select,.appearance-form[data-fill="solid"] .gradient-option input,.appearance-form[data-neon="off"] .neon-option input{pointer-events:none}
.appearance-save{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 3px 0}.appearance-save p{margin:0;color:var(--muted);font-size:12px}.appearance-save button{min-width:210px}
@media(max-width:850px){.appearance-fields,.appearance-fields.two-columns{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.appearance-group{padding:15px}.appearance-fields,.appearance-fields.two-columns,.neon-fields{grid-template-columns:1fr}.appearance-save{align-items:stretch;flex-direction:column}.appearance-save button{width:100%}}

html[data-theme="dark"] #rulesTab {
  background-image: linear-gradient(105deg, rgba(8,20,15,.98) 0%, rgba(8,20,15,.88) 48%, rgba(22,79,59,.32) 100%), url('/egypt-lake.png');
}
html[data-theme="dark"] #testTab {
  background-image: linear-gradient(115deg, rgba(8,20,15,.98) 0%, rgba(8,20,15,.86) 50%, rgba(18,91,86,.28) 100%), url('/egypt-garden.png');
}
html[data-theme="dark"] #historyTab {
  background-image: linear-gradient(110deg, rgba(8,20,15,.98) 0%, rgba(8,20,15,.87) 50%, rgba(112,64,27,.28) 100%), url('/egypt-house.png');
}
html[data-theme="dark"] #connectionsTab {
  background-image: linear-gradient(110deg, rgba(8,20,15,.98) 0%, rgba(8,20,15,.84) 48%, rgba(15,85,79,.25) 100%), url('/egypt-lake.png');
}
html[data-theme="dark"] #appearanceTab {
  background-image: linear-gradient(112deg, rgba(8,20,15,.98) 0%, rgba(8,20,15,.85) 49%, rgba(105,48,31,.26) 100%), url('/egypt-garden.png');
}

/* Paleta Osiris: agua, naturaleza y oro. */
:root {
  --bg: #dcefeb;
  --panel: rgba(247, 250, 230, .86);
  --panel2: rgba(252, 251, 235, .94);
  --text: #123934;
  --muted: #52736c;
  --line: rgba(17, 112, 104, .2);
  --lime: #65b947;
  --lime2: #368d43;
  --orange: #d7aa2c;
  --water: #20bfc2;
  --gold: #e4b83d;
}
body { background: #b9ddd6; }
body::before { filter: saturate(1.08) contrast(.96) brightness(1.06); }
body::after {
  background:
    radial-gradient(circle at 10% 14%, rgba(32,191,194,.42), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(228,184,61,.4), transparent 34%),
    radial-gradient(circle at 76% 84%, rgba(101,185,71,.38), transparent 37%),
    linear-gradient(180deg, rgba(237,250,244,.2), rgba(26,104,86,.3) 62%, rgba(7,48,42,.58));
}
.topbar { color:var(--text); border-color:rgba(255,255,255,.72); background:rgba(239,250,238,.8); box-shadow:0 16px 38px rgba(18,89,77,.15); }
.brand,.header-link { color:var(--text); }
.brand span strong { color:#247f78; }
.status-dot { background:var(--lime); box-shadow:0 0 12px rgba(101,185,71,.9); }
.user-chip { color:#236f48; background:rgba(101,185,71,.15); border-color:rgba(54,141,67,.25); }
.theme-toggle,.logout-btn { color:#24544d; border-color:rgba(17,112,104,.18); background:rgba(255,255,255,.46); }
.timer-card,.tab-panel,.tabs { border-color:rgba(255,255,255,.66); box-shadow:0 22px 60px rgba(14,80,69,.16); }
.tab-panel{border-left-color:#f5fcee}
.timer-card {
  background:
    radial-gradient(circle at 88% 5%, rgba(228,184,61,.35), transparent 34%),
    linear-gradient(120deg, rgba(238,251,242,.94), rgba(204,239,222,.82) 52%, rgba(151,221,210,.72));
}
.timer-card::before { background:radial-gradient(circle,rgba(32,191,194,.34),rgba(228,184,61,.12) 58%,transparent 70%); }
.timer-top>span:first-child,.eyebrow,.widget-step { color:#197f7f; }
.pill { color:#765808; background:rgba(228,184,61,.2); border-color:rgba(183,138,19,.3); }
.timer-actions { border-color:rgba(17,112,104,.16); background:rgba(249,255,249,.58); }
.obs-card {
  background:
    linear-gradient(145deg,rgba(7,111,109,.9),rgba(20,91,67,.86) 58%,rgba(123,98,17,.72)),
    url('/osiris-world.png') 78% center / cover;
  background-blend-mode:multiply,normal;
}
.obs-card::before { color:#ffe07a; }
.obs-card button { color:#153c34; background:linear-gradient(110deg,#f4d35e,#79cf59); border-color:#e4ba3d; }
.tabs { background:rgba(239,250,238,.84); }
.tabs button { color:#42665e; }
.tabs button.active { color:#103d38; background:linear-gradient(105deg,#69d6d0,#77c957 58%,#e7c04d); box-shadow:0 10px 22px rgba(20,133,119,.2); }
.rule-form { border-color:rgba(17,112,104,.14); border-left-color:var(--water); background:rgba(255,255,255,.62); }
input,select { color:#123934; border-color:rgba(17,112,104,.2); background:rgba(250,255,250,.78); }
input:focus,select:focus { border-color:var(--water); box-shadow:0 0 0 3px rgba(32,191,194,.16); }
.primary { color:#12372f; background:linear-gradient(105deg,#69d1ca,#75c951 58%,#e5bd44); border-color:#66bda9; }
.primary:hover:not(:disabled) { background:linear-gradient(105deg,#7ae0d8,#88d963 58%,#f0ce61); border-color:#48b9b4; }
.tag { color:#1d736c; border-color:rgba(32,191,194,.3); background:rgba(32,191,194,.12); }
.widget-status.ready { border-color:rgba(101,185,71,.42); background:rgba(101,185,71,.12); color:#327d39; }
.appearance-step,.wheel-history-icon { color:#267c58; background:linear-gradient(135deg,rgba(32,191,194,.16),rgba(101,185,71,.16)); }
.rule-platform-card,.wheel-form,.wheel-preview-card,.wheel-history-section,.appearance-group { border-color:rgba(17,112,104,.16); background:rgba(247,252,239,.64); }
#rulesTab { background-image:linear-gradient(105deg,#f5fcee 0%,#f5fcee 14%,rgba(218,243,226,.92) 52%,rgba(32,191,194,.38)),url('/egypt-lake.png'); }
#testTab { background-image:linear-gradient(115deg,#f5fcee 0%,#f5fcee 14%,rgba(221,244,226,.92) 54%,rgba(228,184,61,.36)),url('/egypt-garden.png'); }
#historyTab { background-image:linear-gradient(110deg,#f5fcee 0%,#f5fcee 14%,rgba(226,244,224,.92) 57%,rgba(228,184,61,.4)),url('/egypt-house.png'); }
#connectionsTab { background-image:linear-gradient(110deg,#f5fcee 0%,#f5fcee 14%,rgba(218,243,229,.91) 58%,rgba(32,191,194,.4)),url('/egypt-pyramids.jpg'); }
#appearanceTab { background-image:linear-gradient(112deg,#f5fcee 0%,#f5fcee 14%,rgba(222,244,224,.92) 56%,rgba(228,184,61,.36)),url('/egypt-oasis.jpg'); }
#widgetsTab { background-image:linear-gradient(112deg,#f5fcee 0%,#f5fcee 14%,rgba(218,243,226,.92) 52%,rgba(32,191,194,.38)),url('/egypt-fields.jpg'); }

html[data-theme="dark"] {
  --bg:#041714;
  --panel:rgba(5,27,24,.9);
  --panel2:rgba(8,39,34,.94);
  --text:#f3f4df;
  --muted:#9dbbb3;
  --line:rgba(69,205,194,.2);
  --lime:#78cf59;
  --lime2:#429b4e;
  --orange:#f0c64c;
  --water:#35d2cf;
  --gold:#f0c64c;
}
html[data-theme="dark"] body { color:var(--text); background:#041714; }
html[data-theme="dark"] body::before { filter:saturate(.86) brightness(.48) contrast(1.1); }
html[data-theme="dark"] body::after {
  background:
    radial-gradient(circle at 10% 15%,rgba(53,210,207,.22),transparent 31%),
    radial-gradient(circle at 88% 18%,rgba(240,198,76,.18),transparent 34%),
    radial-gradient(circle at 76% 84%,rgba(120,207,89,.2),transparent 37%),
    linear-gradient(180deg,rgba(3,18,16,.24),rgba(3,24,20,.68) 57%,rgba(1,12,10,.9));
}
html[data-theme="dark"] .topbar { border-color:rgba(69,205,194,.18); background:rgba(3,23,20,.86); box-shadow:0 18px 44px rgba(0,0,0,.36); }
html[data-theme="dark"] .brand span strong { color:var(--water); }
html[data-theme="dark"] .user-chip { color:#9ee979; background:rgba(120,207,89,.11); border-color:rgba(120,207,89,.28); }
html[data-theme="dark"] .timer-card {
  background:
    radial-gradient(circle at 87% 4%,rgba(240,198,76,.18),transparent 34%),
    linear-gradient(125deg,rgba(5,35,31,.96),rgba(7,49,42,.9) 55%,rgba(10,62,54,.84));
}
html[data-theme="dark"] .timer-card::before { background:radial-gradient(circle,rgba(53,210,207,.22),rgba(240,198,76,.07) 58%,transparent 70%); }
html[data-theme="dark"] .pill { color:#ffe18a; background:rgba(240,198,76,.09); border-color:rgba(240,198,76,.3); }
html[data-theme="dark"] .tabs { background:rgba(4,29,25,.9); }
html[data-theme="dark"] .tab-panel{border-left-color:#041b17}
html[data-theme="dark"] .tabs button.active { color:#082f2a; background:linear-gradient(105deg,#42cfca,#73c953 58%,#e9be42); }
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .widget-step { color:#5adbd5; }
html[data-theme="dark"] .rule-form { border-color:rgba(69,205,194,.14); border-left-color:var(--water); background:rgba(1,17,14,.38); }
html[data-theme="dark"] input,html[data-theme="dark"] select { border-color:rgba(69,205,194,.18); background:rgba(1,17,14,.58); }
html[data-theme="dark"] .primary { color:#082d27; background:linear-gradient(105deg,#45d2cc,#78cf59 58%,#eec64e); border-color:#45bdb5; }
html[data-theme="dark"] .tag { color:#6ee0da; border-color:rgba(53,210,207,.28); background:rgba(53,210,207,.09); }
html[data-theme="dark"] .rule-platform-card,html[data-theme="dark"] .wheel-form,html[data-theme="dark"] .wheel-preview-card,html[data-theme="dark"] .wheel-history-section,html[data-theme="dark"] .appearance-group { border-color:rgba(69,205,194,.15); background:rgba(1,20,17,.58); }
html[data-theme="dark"] #rulesTab { background-image:linear-gradient(105deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.92) 50%,rgba(18,111,104,.3)),url('/egypt-lake.png'); }
html[data-theme="dark"] #testTab { background-image:linear-gradient(115deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.91) 52%,rgba(128,102,19,.24)),url('/egypt-garden.png'); }
html[data-theme="dark"] #historyTab { background-image:linear-gradient(110deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.92) 52%,rgba(137,110,24,.25)),url('/egypt-house.png'); }
html[data-theme="dark"] #connectionsTab { background-image:linear-gradient(110deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.9) 50%,rgba(18,111,104,.28)),url('/egypt-pyramids.jpg'); }
html[data-theme="dark"] #appearanceTab { background-image:linear-gradient(112deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.91) 50%,rgba(105,139,39,.22)),url('/egypt-oasis.jpg'); }
html[data-theme="dark"] #widgetsTab { background-image:linear-gradient(112deg,#041b17 0%,#041b17 14%,rgba(5,37,31,.91) 50%,rgba(18,111,104,.28)),url('/egypt-fields.jpg'); }

/* Contraste estable para botones cromáticos en todos sus estados. */
.primary:hover:not(:disabled),
.primary:focus-visible:not(:disabled),
.primary:active:not(:disabled) {
  color:#102f29;
  background:linear-gradient(105deg,#7ae0d8,#88d963 58%,#f0ce61);
  border-color:#48b9b4;
  box-shadow:0 8px 20px rgba(25,137,120,.2);
}
html[data-theme="dark"] .primary:hover:not(:disabled),
html[data-theme="dark"] .primary:focus-visible:not(:disabled),
html[data-theme="dark"] .primary:active:not(:disabled) {
  color:#062b26;
  background:linear-gradient(105deg,#62e1da,#91dc6f 58%,#f6d568);
  border-color:#63d5ca;
  box-shadow:0 8px 22px rgba(53,210,207,.2);
}
.obs-card button:hover:not(:disabled),
.obs-card button:focus-visible:not(:disabled) {
  color:#10362f;
  background:linear-gradient(110deg,#ffe278,#8cda6d);
  border-color:#f0c64c;
}
.tabs button.active:hover:not(:disabled),
.tabs button.active:focus-visible:not(:disabled) {
  color:#0b3832;
  background:linear-gradient(105deg,#78e0da,#8ad56a 58%,#f0ce61);
  border-color:rgba(53,210,207,.4);
}
.section-head>.danger{flex:0 0 auto;color:#fff;border-color:#c43e4c;background:linear-gradient(135deg,#d84b59,#a92535);box-shadow:0 8px 20px rgba(160,32,48,.24)}
.section-head>.danger:hover:not(:disabled),.section-head>.danger:focus-visible:not(:disabled){color:#fff;background:#b93443;border-color:#b93443}
html[data-theme="dark"] .section-head>.danger{color:#fff;border-color:#e86270;background:linear-gradient(135deg,#d94b5a,#9e2333);box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 1px rgba(255,116,130,.12)}
html[data-theme="dark"] .section-head>.danger:hover:not(:disabled),html[data-theme="dark"] .section-head>.danger:focus-visible:not(:disabled){color:#fff;background:#b93443;border-color:#e95b69}
@media(max-width:560px){#historyTab .section-head{align-items:stretch;flex-direction:column;gap:14px}#historyTab .section-head>.danger{width:100%}}

/* Iconografía personalizada del panel. */
.nav-icon{width:23px;height:23px;flex:0 0 23px;object-fit:contain;opacity:.76;transition:filter .18s ease,opacity .18s ease,transform .18s ease}
.tabs button:hover .nav-icon{opacity:1;transform:scale(1.06)}
.tabs button.active .nav-icon{opacity:.92;filter:none}
html[data-theme="dark"] .tabs button:not(.active) .nav-icon{filter:invert(1);opacity:.72}
html[data-theme="dark"] .tabs button:not(.active):hover .nav-icon{filter:invert(83%) sepia(45%) saturate(718%) hue-rotate(117deg) brightness(99%);opacity:1}
.theme-icon{width:17px;height:17px;border:0;border-radius:0;background:url('/icon-theme-dark.png') center/contain no-repeat;box-shadow:none!important;opacity:.78}
html[data-theme="dark"] .theme-icon{background:url('/icon-theme-dark.png') center/contain no-repeat;filter:invert(1);opacity:.9}

/* Cabecera: controles separados, legibles y con acceso de administración real. */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.status-pill{min-height:40px;padding:0 13px;border:1px solid rgba(17,112,104,.15);border-radius:12px;background:rgba(255,255,255,.3);white-space:nowrap}
.theme-toggle{min-height:40px;padding:0 14px;border-radius:12px;white-space:nowrap}
.session-menu{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid rgba(17,112,104,.18)}
.user-identity{display:grid;min-width:110px;padding:3px 4px;line-height:1.15}
.user-identity>span{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.user-identity>strong{max-width:160px;margin-top:4px;overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.admin-button,.logout-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid rgba(17,112,104,.2);border-radius:12px;font-size:12px;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.admin-button{color:#083a34;background:linear-gradient(115deg,rgba(69,210,204,.9),rgba(120,207,89,.86));border-color:rgba(33,148,137,.4);box-shadow:0 8px 20px rgba(25,139,127,.16)}
.admin-button:hover{transform:translateY(-1px);border-color:rgba(20,125,116,.65);box-shadow:0 10px 24px rgba(25,139,127,.24)}
.admin-button-icon,.logout-icon{position:relative;width:16px;height:16px;flex:0 0 16px}
.admin-button-icon::before{content:"";position:absolute;inset:1px 3px 6px;border:2px solid currentColor;border-radius:50%}
.admin-button-icon::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:9px 9px 2px 2px}
.logout-icon{border:0;background:url('/icon-logout.png') center/contain no-repeat;opacity:.78}
.logout-icon::before,.logout-icon::after{content:none}
html[data-theme="dark"] .logout-icon{filter:invert(1);opacity:.9}
html[data-theme="dark"] .status-pill{border-color:rgba(69,205,194,.16);background:rgba(255,255,255,.035)}
html[data-theme="dark"] .session-menu{border-left-color:rgba(69,205,194,.18)}
html[data-theme="dark"] .admin-button{color:#062f2b;background:linear-gradient(115deg,#45d2cc,#78cf59);border-color:#45bdb5;box-shadow:0 8px 22px rgba(31,191,181,.16)}
html[data-theme="dark"] .admin-button:hover{color:#062f2b;background:linear-gradient(115deg,#59e2dc,#8bdf6c);box-shadow:0 10px 28px rgba(31,191,181,.25)}
@media(max-width:1050px){.status-pill{display:none}.user-identity{min-width:90px}.admin-button>span:last-child{max-width:92px;line-height:1.15;white-space:normal}}
@media(max-width:720px){.topbar{height:auto;min-height:68px;padding-top:8px;padding-bottom:8px}.header-actions{gap:7px}.session-menu{gap:7px;padding-left:7px}.user-identity{display:none}.admin-button,.logout-btn{width:40px;padding:0}.admin-button>span:last-child,.logout-btn>span:last-child{display:none}.theme-toggle{width:40px;justify-content:center;padding:0}}
@media(max-width:460px){.brand span{display:none}.topbar{padding-left:10px;padding-right:10px}.header-actions{margin-left:auto}}

/* Estados estables y bloque de copia integrado. */
.section-head>.danger,
html[data-theme="dark"] .section-head>.danger {
  color:#fff;
  background-color:#b72f40;
  background-image:linear-gradient(135deg,#df5361,#a52132);
  border-color:#e05c69;
  box-shadow:0 8px 22px rgba(138,24,42,.28);
  transform:none!important;
  transition:filter .15s ease,border-color .15s ease,box-shadow .15s ease!important;
  will-change:filter;
}
.section-head>.danger:hover:not(:disabled),
.section-head>.danger:focus-visible:not(:disabled),
.section-head>.danger:active:not(:disabled),
html[data-theme="dark"] .section-head>.danger:hover:not(:disabled),
html[data-theme="dark"] .section-head>.danger:focus-visible:not(:disabled),
html[data-theme="dark"] .section-head>.danger:active:not(:disabled) {
  color:#fff;
  background-color:#b72f40;
  background-image:linear-gradient(135deg,#df5361,#a52132);
  border-color:#ff7a86;
  box-shadow:0 10px 26px rgba(138,24,42,.38),0 0 0 3px rgba(255,105,120,.11);
  filter:brightness(1.08);
  transform:none!important;
}
.obs-card .copy-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0;
  align-items:stretch;
  padding:6px;
  margin-top:18px;
  border:1px solid rgba(113,224,207,.28);
  border-radius:14px;
  background:rgba(1,31,27,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.16);
}
.obs-card .copy-row input {
  min-width:0;
  height:46px;
  padding:0 13px;
  border:0;
  border-radius:9px 0 0 9px;
  color:#eafcf6;
  background:transparent;
  box-shadow:none;
  font-size:13px;
}
.obs-card #copyBtn,
.obs-card #copyBtn:hover:not(:disabled),
.obs-card #copyBtn:focus-visible:not(:disabled),
.obs-card #copyBtn:active:not(:disabled) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:112px;
  min-height:46px;
  color:#082f2a;
  border:1px solid rgba(255,224,112,.48);
  border-radius:10px;
  background-color:#72cf8a;
  background-image:linear-gradient(110deg,#42d2cc,#7ed15c 58%,#edc54b);
  box-shadow:0 7px 18px rgba(0,0,0,.18);
  transform:none!important;
  transition:filter .15s ease,box-shadow .15s ease!important;
}
.obs-card #copyBtn::before,.widget-overlay-link #copyWheelBtn::before{content:"";width:17px;height:17px;flex:0 0 17px;background:url('/icon-copy.png') center/contain no-repeat}
.widget-overlay-link #copyWheelBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}

.nav-symbol{display:grid;place-items:center;width:24px;height:24px;border:2px solid currentColor;border-radius:50%;font-size:0}.nav-symbol::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.goals-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px}.goal-form,.goal-help-card,.goal-card{border:1px solid var(--line);border-radius:17px;background:rgba(2,10,7,.53);backdrop-filter:blur(12px)}.goal-form{display:grid;gap:14px;padding:20px}.goal-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.goal-help-card{padding:24px;background-image:linear-gradient(135deg,rgba(3,25,21,.94),rgba(14,61,47,.72)),url('/egypt-lake.png');background-size:cover;background-position:center}.goal-help-card h3{margin:8px 0;font-size:30px;color:var(--gold)}.goal-help-card p{color:var(--text);max-width:40ch}.goal-shared-overlay{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:22px}.goal-shared-overlay input{min-width:0}.goals-list{display:grid;gap:12px;margin-top:18px}.goal-card{padding:18px}.goal-card header{display:flex;justify-content:space-between;align-items:start;gap:14px}.goal-card h3{margin:4px 0 12px;font-size:21px}.goal-card header>strong{color:var(--water);font-size:24px}.goal-state{color:var(--nature);font-size:10px;font-weight:900;letter-spacing:.14em}.goal-card.complete .goal-state,.goal-card.complete header>strong{color:var(--gold)}.goal-progress{height:13px;border:1px solid var(--line);border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden}.goal-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--water),var(--nature),var(--gold));box-shadow:0 0 14px var(--water)}.goal-meta{display:flex;justify-content:space-between;gap:12px;margin:9px 1px 14px;color:var(--muted);font-size:12px}.goal-overlay-row{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.goal-card.complete{border-color:rgba(228,184,61,.45)}html[data-theme="light"] .goal-form,html[data-theme="light"] .goal-card{background:rgba(247,252,239,.72)}
@media(max-width:900px){.goals-layout{grid-template-columns:1fr}.goal-meta{flex-direction:column;gap:3px}}@media(max-width:560px){.goal-fields,.goal-shared-overlay{grid-template-columns:1fr}.goal-overlay-row{display:grid}.goal-overlay-row button{width:100%}}

/* Access portal */
body:has(.access-shell:not(.hidden)) main{width:calc(100% - 28px);max-width:none;padding:14px 0 28px}.access-shell{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(420px,.72fr);min-height:calc(100vh - 110px);border:1px solid rgba(70,218,202,.2);border-radius:30px;overflow:hidden;background:#031510;box-shadow:0 30px 90px rgba(0,0,0,.32)}.access-visual{position:relative;min-height:650px;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,rgba(2,16,13,.16),rgba(2,16,13,.72)),linear-gradient(0deg,rgba(2,18,13,.82),transparent 62%),url('/egypt-lake.png') center/cover no-repeat}.access-visual::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 27% 20%,rgba(244,197,67,.22),transparent 27%),radial-gradient(circle at 73% 68%,rgba(28,202,194,.24),transparent 34%);mix-blend-mode:screen}.access-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 56%,rgba(3,21,17,.88) 78%);pointer-events:none}.access-monogram{position:absolute;left:clamp(28px,4vw,72px);top:clamp(32px,5vw,76px);z-index:2;display:flex;align-items:center;gap:14px;color:white;font-size:12px;font-weight:950;letter-spacing:.3em}.access-monogram img{width:60px;height:60px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}.access-orbit{position:absolute;z-index:1;border:1px solid rgba(104,236,213,.3);border-radius:50%;box-shadow:inset 0 0 45px rgba(44,216,199,.08),0 0 45px rgba(44,216,199,.08)}.orbit-one{width:430px;height:430px;left:12%;top:10%}.orbit-two{width:650px;height:650px;left:-1%;top:-5%;border-color:rgba(239,197,75,.16)}.access-visual-copy{position:absolute;z-index:2;left:clamp(28px,4vw,72px);right:50px;bottom:124px;display:grid;gap:12px}.access-visual-copy span{color:#7ee7d9;font-size:10px;font-weight:950;letter-spacing:.25em}.access-visual-copy strong{max-width:760px;color:white;font-size:clamp(2.45rem,4vw,5.25rem);line-height:.92;letter-spacing:-.06em;text-shadow:0 8px 35px rgba(0,0,0,.55)}.access-platforms{position:absolute;z-index:2;left:clamp(28px,4vw,72px);bottom:42px;display:flex;flex-wrap:wrap;gap:8px}.access-platforms span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:rgba(255,255,255,.8);background:rgba(2,17,14,.58);backdrop-filter:blur(12px);font-size:11px;font-weight:800}.access-platforms img{width:17px;height:17px;object-fit:contain}.access-panel{position:relative;z-index:3;display:flex;flex-direction:column;padding:clamp(30px,4vw,68px);background:linear-gradient(145deg,rgba(3,24,19,.98),rgba(3,15,13,.99));border-left:1px solid rgba(74,218,203,.16)}.access-panel::before{content:"";position:absolute;right:-80px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(93,224,104,.13),transparent 68%);pointer-events:none}.access-panel-top{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#83a69c;font-size:9px;font-weight:900;letter-spacing:.22em}.access-private{display:flex;align-items:center;gap:7px;color:#d8c05c}.access-private i{width:6px;height:6px;border-radius:50%;background:#e7c94f;box-shadow:0 0 12px #e7c94f}.access-heading{margin:auto 0 45px}.access-heading .eyebrow{margin-bottom:15px;color:#42d9cf}.access-heading h1{margin:0 0 25px;color:#f3f8ed;font-size:clamp(3.5rem,5vw,6.6rem);line-height:.78;letter-spacing:-.075em}.access-heading h1 em{color:transparent;font-style:normal;-webkit-text-stroke:1.5px #8ce464;text-shadow:0 0 28px rgba(91,220,100,.13)}.access-heading>p:last-child{max-width:470px;margin:0;color:#9ab1a8;font-size:14px;line-height:1.7}.access-form{display:grid;gap:11px}.access-form>label{color:#dbe8df;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.access-input{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:5px 5px 5px 15px;border:1px solid rgba(94,218,199,.27);border-radius:15px;background:rgba(255,255,255,.035);box-shadow:0 12px 32px rgba(0,0,0,.18);transition:.2s}.access-input:focus-within{border-color:#3bd8cc;box-shadow:0 0 0 3px rgba(59,216,204,.1),0 16px 38px rgba(0,0,0,.22)}.access-input>span{color:#50dcd0;font-size:24px;transform:rotate(-24deg)}.access-input input{height:52px;border:0!important;background:transparent!important;box-shadow:none!important;color:white}.access-input button{display:flex;align-items:center;gap:18px;height:48px;padding:0 18px;border:0;border-radius:11px;color:#071813;background:linear-gradient(135deg,#56ddd2,#9ce957 70%,#e6c956);box-shadow:0 9px 25px rgba(51,211,190,.18)}.access-input button b{font-size:18px}.access-form small{color:#6f8e84;font-size:10px;line-height:1.5}.access-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:#56746a;font-size:9px;font-weight:850;letter-spacing:.14em}.access-footer a{color:#b9dbcf;text-decoration:none;letter-spacing:.04em}.access-footer a:hover{color:#67e2d7}.access-footer b{color:#e8ce58}
html[data-theme="light"] .access-shell{border-color:rgba(255,255,255,.72);background:#eef4df;box-shadow:0 30px 85px rgba(40,58,32,.2)}html[data-theme="light"] .access-visual{background:linear-gradient(90deg,rgba(14,58,49,.02),rgba(8,58,49,.38)),linear-gradient(0deg,rgba(7,44,36,.62),transparent 58%),url('/egypt-lake.png') center/cover no-repeat}html[data-theme="light"] .access-panel{border-left-color:rgba(27,111,101,.12);background:linear-gradient(145deg,rgba(252,251,229,.98),rgba(228,244,216,.98))}html[data-theme="light"] .access-panel::before{background:radial-gradient(circle,rgba(71,199,187,.18),transparent 68%)}html[data-theme="light"] .access-index{color:#668277}html[data-theme="light"] .access-private{color:#896c12}html[data-theme="light"] .access-heading h1{color:#15382f}html[data-theme="light"] .access-heading h1 em{-webkit-text-stroke-color:#439f63;text-shadow:none}html[data-theme="light"] .access-heading>p:last-child{color:#586e65}html[data-theme="light"] .access-form>label{color:#27483f}html[data-theme="light"] .access-input{border-color:rgba(27,130,118,.24);background:rgba(255,255,255,.62)}html[data-theme="light"] .access-input input{color:#15382f}html[data-theme="light"] .access-form small,html[data-theme="light"] .access-footer{color:#71877d}html[data-theme="light"] .access-footer{border-top-color:rgba(21,56,47,.1)}html[data-theme="light"] .access-footer a{color:#246b60}
@media(max-width:1050px){.access-shell{grid-template-columns:1fr;min-height:auto}.access-visual{min-height:440px}.access-visual::after{background:linear-gradient(0deg,rgba(3,21,17,.9),transparent 70%)}.access-panel{min-height:610px;border-left:0;border-top:1px solid rgba(74,218,203,.16)}.access-heading{margin:70px 0 38px}.access-heading h1{font-size:clamp(4rem,11vw,7rem)}}@media(max-width:600px){body:has(.access-shell:not(.hidden)) main{width:calc(100% - 16px);padding-top:8px}.access-shell{border-radius:20px}.access-visual{min-height:365px}.access-monogram{left:24px;top:24px}.access-monogram img{width:46px;height:46px}.access-orbit{transform:scale(.7);transform-origin:left top}.access-visual-copy{left:24px;right:22px;bottom:92px}.access-visual-copy strong{font-size:2.35rem}.access-platforms{left:24px;bottom:28px}.access-platforms span{padding:7px 9px;font-size:9px}.access-panel{min-height:560px;padding:28px 22px}.access-panel-top{align-items:flex-start}.access-heading{margin:65px 0 35px}.access-heading h1{font-size:3.7rem}.access-input{grid-template-columns:auto 1fr;padding:5px 8px 5px 13px}.access-input button{grid-column:1/-1;width:100%;justify-content:space-between;margin-top:5px}.access-footer{align-items:flex-start;flex-direction:column}}

.access-footer nav{display:flex;align-items:center;gap:8px}.access-footer a{padding:7px 9px;border:1px solid transparent;border-radius:8px}.access-footer a:hover{border-color:rgba(70,218,202,.32)}
.access-key-icon{width:23px;height:23px;object-fit:contain;filter:invert(82%) sepia(45%) saturate(725%) hue-rotate(119deg) brightness(95%);opacity:.9}html[data-theme="light"] .access-key-icon{filter:invert(38%) sepia(27%) saturate(1124%) hue-rotate(122deg) brightness(88%)}
.support-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px;border:1px solid rgba(111,123,255,.32);border-radius:10px;color:#e8eaff;background:rgba(88,101,242,.13);text-decoration:none;font-size:11px;font-weight:850;letter-spacing:.035em;transition:.18s ease}.support-button img{width:22px;height:22px;border-radius:6px;object-fit:contain}.support-button:hover{color:white;border-color:rgba(111,123,255,.65);background:rgba(88,101,242,.25);transform:translateY(-1px);box-shadow:0 8px 20px rgba(60,71,190,.2)}html[data-theme="light"] .support-button{color:#3945a7;border-color:rgba(69,81,203,.25);background:rgba(88,101,242,.1)}
@media(max-width:720px){.support-button{padding:7px}.support-button span{display:none}.support-button img{width:24px;height:24px}}
.hype-train-card{display:grid;gap:18px;margin-top:18px;padding:22px;border:1px solid rgba(145,70,255,.28);border-radius:18px;background:linear-gradient(135deg,rgba(145,70,255,.08),rgba(53,210,207,.06)),rgba(2,10,7,.5)}.hype-train-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.hype-train-head h3{margin:3px 0 4px;font-size:25px}.hype-train-head p{margin:0;color:var(--muted)}.hype-switch{display:flex;flex-direction:row;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04)}.hype-switch input{width:19px;height:19px;accent-color:#9146ff}.hype-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.hype-duration{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:10px}.hype-test{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:15px;border-top:1px solid var(--line)}.hype-test>span{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em}.hype-test>span.active{color:#b8ff3d}.hype-test>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.hype-test button{padding:8px 10px;font-size:11px}html[data-theme="light"] .hype-train-card{background:linear-gradient(135deg,rgba(145,70,255,.08),rgba(53,210,207,.09)),rgba(247,252,239,.7)}
@media(max-width:980px){.hype-levels{grid-template-columns:repeat(3,1fr)}.hype-duration{grid-template-columns:1fr 1fr}.hype-duration button{grid-column:1/-1}}@media(max-width:620px){.hype-train-head,.hype-test{align-items:stretch;flex-direction:column}.hype-levels,.hype-duration{grid-template-columns:1fr}.hype-duration button{grid-column:auto}.hype-test>div{justify-content:flex-start}}
.hype-status-row{display:grid;grid-template-columns:minmax(280px,1fr) auto;align-items:stretch;gap:10px;padding-top:15px;border-top:1px solid var(--line)}.hype-state{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035)}.hype-state>i{width:11px;height:11px;flex:0 0 11px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 13px currentColor}.hype-state>div{display:grid;gap:0}.hype-state small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.13em}.hype-state strong{font-size:13px;letter-spacing:.02em}.hype-state span{color:var(--muted);font-size:9px}.hype-state.disabled{color:#ff7474;border-color:rgba(255,91,91,.3);background:rgba(255,65,65,.07)}.hype-state.waiting{color:#53d9cf;border-color:rgba(53,217,207,.35);background:rgba(53,217,207,.08)}.hype-state.waiting>i{animation:hypeWaiting 1.7s ease-in-out infinite}.hype-state.running{color:#bd85ff;border-color:rgba(171,91,255,.4);background:rgba(145,70,255,.11)}.hype-state.running>i{animation:hypeRunning .75s ease-in-out infinite alternate}.hype-state.reward{color:#f1cd50;border-color:rgba(241,205,80,.45);background:linear-gradient(90deg,rgba(241,205,80,.12),rgba(104,226,89,.07))}.hype-state.reward>i{animation:hypeReward .9s ease-in-out infinite alternate}.hype-status-row .hype-test{min-width:360px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}.hype-status-row .hype-test>span{display:block;margin-right:6px}.hype-status-row .hype-test button{padding:7px 9px}@keyframes hypeWaiting{50%{opacity:.35;box-shadow:0 0 4px currentColor}}@keyframes hypeRunning{to{transform:scale(1.22);box-shadow:0 0 25px currentColor}}@keyframes hypeReward{to{filter:brightness(1.45);box-shadow:0 0 28px currentColor}}
@media(max-width:900px){.hype-status-row{grid-template-columns:1fr}.hype-status-row .hype-test{min-width:0}}@media(max-width:620px){.hype-status-row .hype-test{display:flex}}
.timer-display-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}.timer-display-row .timer{min-width:0}.total-time-card{position:relative;display:grid;gap:3px;min-width:178px;padding:14px 16px;border:1px solid rgba(53,210,207,.22);border-radius:14px;background:linear-gradient(145deg,rgba(53,210,207,.08),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.04)}.total-time-card span{color:var(--water);font-size:9px;font-weight:950;letter-spacing:.16em}.total-time-card strong{color:var(--text);font-size:25px;line-height:1.1;font-weight:900;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.total-time-card small{color:var(--muted);font-size:9px}html[data-theme="light"] .total-time-card{border-color:rgba(24,143,140,.2);background:linear-gradient(145deg,rgba(53,210,207,.11),rgba(255,255,255,.36))}
@media(max-width:780px){.timer-display-row{grid-template-columns:1fr;gap:0}.total-time-card{width:max-content;min-width:165px;margin:0 0 18px}.timer-display-row .timer{margin-bottom:16px}}@media(max-width:480px){.total-time-card{width:100%}}
@media(max-width:600px){.access-footer nav{align-items:flex-start;flex-direction:column}}
.obs-card #copyBtn:hover:not(:disabled),.obs-card #copyBtn:focus-visible:not(:disabled){filter:brightness(1.1);box-shadow:0 9px 22px rgba(0,0,0,.22),0 0 0 3px rgba(53,210,207,.13)}
@media(max-width:560px){.obs-card .copy-row{grid-template-columns:1fr;gap:7px}.obs-card .copy-row input{border-radius:9px}.obs-card #copyBtn{width:100%}}
.rules-list,.connections{grid-template-columns:repeat(2,minmax(0,1fr))}.platform.streamlabs{background:#0b1512!important;border-color:rgba(128,245,167,.28)}
.rule-platform-streamlabs,.connections article:has(.platform.streamlabs){display:none!important}
.rule-platform-tiktok .platform.tiktok img{content:url('/tiktok-logo-user.png')}
.connections-native{display:contents}.platform.tiktok{padding:0;background:#071014;border-color:rgba(37,244,238,.35);overflow:hidden}.platform.tiktok img{width:100%;height:100%;object-fit:cover;border-radius:inherit;transform:scale(1.12)}.tiktok-connect-card{display:grid;align-content:start;gap:14px;padding:16px;border:1px solid rgba(37,244,238,.24);border-radius:18px;background:linear-gradient(135deg,rgba(37,244,238,.08),rgba(254,44,85,.06)),rgba(2,12,10,.64)}.tiktok-connect-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}.tiktok-connect-head .platform{width:42px;height:42px}.tiktok-connect-head h3{margin:0;font-size:18px}.tiktok-connect-head h3 span{display:inline-block;margin-left:5px;padding:3px 6px;border-radius:6px;color:#071014;background:linear-gradient(90deg,#25f4ee,#f3d257);font-size:7px;letter-spacing:.08em;vertical-align:middle}.tiktok-connect-head p{margin:3px 0 0;color:#ff9cae;font-size:10px;font-weight:750}.tiktok-connect-head>strong{grid-column:1/-1;color:#25f4ee;font-size:15px}.tiktok-capacity-track{height:7px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}.tiktok-capacity-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#25f4ee,#f3d257,#fe2c55);box-shadow:0 0 13px #25f4ee;transition:width .3s ease}.tiktok-connect-form{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:8px}.tiktok-connect-form label{display:grid;grid-column:1/-1;gap:6px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.08em}.tiktok-connect-form button{min-height:40px;width:100%;padding:8px}.rule-platform-tiktok{border-color:rgba(37,244,238,.25)}html[data-theme="light"] .tiktok-connect-card{background:linear-gradient(135deg,rgba(37,244,238,.12),rgba(254,44,85,.07)),rgba(247,252,239,.78)}@media(max-width:700px){.tiktok-connect-form{grid-template-columns:1fr}.tiktok-connect-form label{grid-column:auto}}
@media(max-width:760px){.rules-list,.connections{grid-template-columns:1fr}.rule-platform-streamelements{grid-column:auto}}

/* Composición estable: evita destellos de saturación al repintar capas translúcidas. */
.topbar,.tabs,.timer-card,.obs-card,.tab-panel,.wheel-form,.wheel-preview-card,
.wheel-history-section,.appearance-group,.goal-form,.goal-card,.access-platforms span {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
button,.admin-button,.logout-btn,.support-button,.tabs button,.nav-icon {
  transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease!important;
  will-change:auto!important;
}
button:hover:not(:disabled),.admin-button:hover,.support-button:hover,.tabs button:hover .nav-icon {
  transform:none!important;
}
.section-head>.danger,
.section-head>.danger:hover:not(:disabled),
.section-head>.danger:focus-visible:not(:disabled),
.section-head>.danger:active:not(:disabled),
.obs-card #copyBtn,
.obs-card #copyBtn:hover:not(:disabled),
.obs-card #copyBtn:focus-visible:not(:disabled),
.obs-card #copyBtn:active:not(:disabled) {
  filter:none!important;
  will-change:auto!important;
}
html[data-theme="dark"] .tabs button:not(.active):hover .nav-icon {
  filter:invert(1);
}