/* Throne Watch owner-only Appearance Lab. Loaded last so previews are complete and reversible. */
@font-face{font-family:"TW Cinzel";src:url("../fonts/cinzel-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Cinzel";src:url("../fonts/cinzel-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Source Sans 3";src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Source Sans 3";src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Marcellus";src:url("../fonts/marcellus-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Inter";src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"TW Inter";src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

.appearance-lab{
  position:fixed;
  top:14px;
  right:14px;
  z-index:10060;
  width:min(390px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:hidden;
  border:1px solid rgba(226,197,132,.55);
  border-radius:17px;
  background:linear-gradient(180deg,#292039,#15111d 76%);
  color:#eee7ff;
  box-shadow:0 26px 85px rgba(0,0,0,.74),0 0 0 1px rgba(157,103,236,.14);
  font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif;
}
.appearance-lab[hidden]{display:none!important;}
.appearance-lab-head,.appearance-lab-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-color:rgba(216,189,132,.2);}
.appearance-lab-head{border-bottom:1px solid rgba(216,189,132,.2);}
.appearance-lab-foot{border-top:1px solid rgba(216,189,132,.2);}
.appearance-lab-head h2{margin:2px 0 0;color:#ffe4a0;font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif;font-size:19px;}
.appearance-lab-kicker{display:block;color:#cbb2ef;font-size:9px;font-weight:900;letter-spacing:.14em;}
.appearance-lab-close{display:grid;place-items:center;width:35px;height:35px;padding:0;border-radius:50%;font-size:21px;}
.appearance-lab-body{display:grid;gap:11px;max-height:calc(100vh - 151px);overflow:auto;padding:12px 14px;}
.appearance-lab-group{display:grid;gap:9px;padding:11px;border:1px solid rgba(216,189,132,.18);border-radius:12px;background:rgba(8,6,13,.3);}
.appearance-lab-group h3{margin:0;color:#f1dda9;font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif;font-size:14px;}
.appearance-lab-group p{margin:0;color:#b4aac5;font-size:11px;line-height:1.45;}
.appearance-lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.appearance-lab label{display:grid;gap:4px;color:#c9bfd9;font-size:10px;font-weight:700;letter-spacing:.02em;}
.appearance-lab select{width:100%;min-width:0;padding:8px 9px;border-color:rgba(177,130,236,.35);background:#1b1627;color:#eee7ff;font-size:12px;}
.appearance-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.appearance-palette-btn,.appearance-cycle-btn{min-height:36px;padding:7px 8px;border-color:rgba(177,130,236,.3);background:linear-gradient(180deg,rgba(77,56,100,.72),rgba(39,29,51,.9));color:#f5e9ff;font-size:11px;}
.appearance-palette-btn.active,.appearance-cycle-btn.active{border-color:#f2d07b;box-shadow:0 0 0 1px rgba(242,208,123,.28),0 0 14px rgba(164,113,232,.2);color:#fff1bc;}
.appearance-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.appearance-color-field{display:grid;grid-template-columns:1fr 33px;align-items:center;gap:7px;padding:6px 7px;border:1px solid rgba(216,189,132,.13);border-radius:9px;background:rgba(0,0,0,.16);}
.appearance-color-field input[type="color"]{width:33px;height:28px;padding:2px;border-radius:7px;background:#17121f;cursor:pointer;}
.appearance-cycle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.appearance-toggle{display:flex!important;grid-column:1/-1;align-items:center;gap:8px;color:#d8cee8!important;font-size:11px!important;font-weight:600!important;}
.appearance-toggle input{width:16px;height:16px;margin:0;padding:0;accent-color:#a871ff;}
.appearance-lab-status{min-height:16px;color:#cbbde0;font-size:10px;line-height:1.4;}
.appearance-lab-foot button{padding:8px 10px;font-size:11px;}
.appearance-lab-foot-actions{display:flex;gap:7px;}

body.appearance-lab-preview{
  --bg:var(--lab-bg,#0d0b16);
  --panel:var(--lab-panel,#2b2736);
  --panel2:var(--lab-panel2,#2b2240);
  --line:var(--lab-line,#5a477e);
  --text:var(--lab-text,#eee7ff);
  --muted:var(--lab-muted,#b4aac5);
  --custom-card-top:color-mix(in srgb,var(--lab-panel,#2b2736) 92%,white 8%);
  --custom-card-bottom:color-mix(in srgb,var(--lab-panel2,#2b2240) 82%,black 18%);
  --custom-subpanel:color-mix(in srgb,var(--lab-panel2,#2b2240) 76%,black 24%);
  --custom-soft:color-mix(in srgb,var(--lab-panel,#2b2736) 82%,black 18%);
  --custom-line:var(--lab-line,#5a477e);
  color:var(--lab-text);
  font-family:var(--appearance-body-font,"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif)!important;
}
body.appearance-lab-palette-active{background:radial-gradient(circle at top left,color-mix(in srgb,var(--lab-bg) 72%,var(--lab-accent) 28%),var(--lab-bg) 46%,color-mix(in srgb,var(--lab-bg) 80%,black 20%))!important;}
body.appearance-lab-preview :is(input,button,select,textarea){font-family:var(--appearance-body-font,"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif);}
body.appearance-lab-preview :is(h1,h2,h3,h4,.section-title,.tw-feature-title,.updates-center-title,.brand-copy){font-family:var(--appearance-heading-font,"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif)!important;}
body.appearance-lab-palette-active :is(.card,.schedule-head,.tw-next-panel,.tw-upcoming-card,.tw-correction,.tw-cheatsheet,.manual-timers,.discord-card,.cycle-current,.timer-item,.rule-block,.notify-pill,.progress,.event-row,.daily-calendar-entry,.timestamp-form,.timestamp-result){
  border-color:var(--lab-line)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lab-panel) 92%,white 8%),color-mix(in srgb,var(--lab-panel2) 84%,black 16%))!important;
}
body.appearance-lab-palette-active :is(.section-title,.schedule-date-controls,.schedule-status-line,.calendar-controls-row,.tw-feature-title){color:var(--lab-text);}
body.appearance-lab-palette-active :is(.mini,.sub,label,.daily-calendar-note,.timestamp-field,.timestamp-help,.appearance-muted-preview){color:var(--lab-muted)!important;}
body.appearance-lab-palette-active :is(input,select,textarea):not([type="color"]){border-color:var(--lab-line);background:color-mix(in srgb,var(--lab-panel2) 78%,black 22%);color:var(--lab-text);}
body.appearance-lab-palette-active :is(.tiny-btn,.qa-btn,.tw-flip-btn,.format-toggle,.calendar-view-toggle):not(.danger-btn){border-color:var(--lab-line);background:linear-gradient(180deg,color-mix(in srgb,var(--lab-panel) 78%,var(--lab-accent) 22%),color-mix(in srgb,var(--lab-panel2) 88%,black 12%));color:var(--lab-text);}
/* Semantic colors are intentionally excluded: PvP chips, Arch crowns, alert bells, status colors, Mango badges, and Night haze. */
body.appearance-layout-check .appearance-overflow{outline:2px dashed #ff6b6b!important;outline-offset:2px!important;box-shadow:0 0 0 3px rgba(255,35,61,.18)!important;}

@media(max-width:600px){
  .appearance-lab{top:7px;right:7px;width:calc(100vw - 14px);max-height:calc(100vh - 14px);}
  .appearance-lab-body{max-height:calc(100vh - 137px);}
  .appearance-lab-grid,.appearance-color-grid{grid-template-columns:1fr;}
}
