/* =====================================================
   KATSEYE Theme - Holographic / Orb Identity
   ===================================================== */

/* Base hue for KATSEYE (purple-ish) */
html[data-color="katseye"]{ --brand-h:270; }

/* Core KATSEYE palette tokens */
html[data-color="katseye"]{
  --ke-core-dark: #13111E;
  --ke-core-black: #050308;
  --ke-star-yellow: #FFFFA5;
  --ke-pink: #F8B4F6;
  --ke-blue: #BBD7EA;
  --ke-purple: #9F7CFF;
  --ke-deep-blue: #1B1940;
  
  /* Holographic / glow accents */
  --ke-holo-pink: #FF66E6;
  --ke-holo-violet: #B46DFF;
  --ke-holo-blue: #5EB7FF;
  --ke-holo-cyan: #70F2FF;
  
  /* Member colors */
  --ke-mem-sophia: #C77BFF;
  --ke-mem-manon: #FF6FB1;
  --ke-mem-daniela: #5FB5FF;
  --ke-mem-lara: #79F57A;
  --ke-mem-megan: #FF8A6A;
  --ke-mem-yoonchae: #E4C3FF;
  
  /* UI neutrals */
  --ke-bg-0: #0A0814;
  --ke-bg-1: #13111E;
  --ke-bg-2: #19172A;
  --ke-bg-3: #221E3C;
  --ke-border-subtle: #2D2946;
  --ke-border-strong: #464065;
  --ke-shadow-soft: 0 12px 32px rgba(0,0,0,0.45);
  --ke-shadow-glow-pink: 0 0 24px rgba(255,102,230,0.55);
  --ke-shadow-glow-blue: 0 0 24px rgba(94,183,255,0.55);
  
  /* Text */
  --ke-text-main: #FDFDFE;
  --ke-text-soft: #D4D1F0;
  --ke-text-muted: #9A96C2;
  --ke-text-on-light: #15121F;
  --ke-text-danger: #FFB3C1;
  
  /* Semantic */
  --ke-ui-success: #39D98A;
  --ke-ui-warning: #FFC857;
  --ke-ui-error: #FF5C7A;
  --ke-ui-info: #4AA8FF;
}

/* Dark mode surfaces (KATSEYE is dark-first) */
html[data-theme="dark"][data-color="katseye"]{
  --bg: var(--ke-bg-0);
  --card: var(--ke-bg-2);
  --text: var(--ke-text-main);
  --muted: var(--ke-text-muted);
  --line: var(--ke-border-subtle);
  --brand: var(--ke-star-yellow);
  --brand-2: var(--ke-pink);
  --brand-3: var(--ke-purple);
  --brand-4: var(--ke-holo-cyan);
}

/* Light mode surfaces (adapted for KATSEYE) */
html[data-theme="light"][data-color="katseye"]{
  --bg: #F8F6FF;
  --card: #FFFFFF;
  --text: var(--ke-text-on-light);
  --muted: #6B6490;
  --line: #D8D3F0;
  --brand: #9F7CFF;
  --brand-2: #C77BFF;
  --brand-3: #FF66E6;
  --brand-4: #5EB7FF;
}

/* KATSEYE dark mode body background */
html[data-theme="dark"][data-color="katseye"] body{
  background: url('../backrounds/katseye-backround.png') center center / cover no-repeat fixed #0A0814;
  color: var(--ke-text-main);
}

/* KATSEYE light mode body background */
html[data-theme="light"][data-color="katseye"] body{
  background: url('../backrounds/katseye-backround.png') center center / cover no-repeat fixed #F8F6FF;
  color: var(--text);
}

/* Container styling */
html[data-color="katseye"] .container{
  border: 1px solid var(--ke-border-subtle);
  border-radius: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  box-shadow: var(--ke-shadow-soft);
  position: relative;
  z-index: 1;
}
html[data-theme="dark"][data-color="katseye"] .container{
  background: rgba(10,8,20,0.94);
}
html[data-theme="light"][data-color="katseye"] .container{
  background: rgba(255,255,255,0.95);
  border-color: rgba(159,124,255,0.2);
}

/* Card styling */
html[data-color="katseye"] .card{
  border-color: var(--ke-border-subtle);
  box-shadow: var(--ke-shadow-soft);
}
html[data-theme="dark"][data-color="katseye"] .card{
  background: var(--ke-bg-2);
}
html[data-theme="light"][data-color="katseye"] .card{
  background: #ffffff;
  border-color: rgba(159,124,255,0.15);
}

/* Themed cards with KATSEYE holographic gradient */
html[data-theme="dark"][data-color="katseye"] .themed-card::before{
  background: linear-gradient(140deg, rgba(19,17,30,0.9) 0%, rgba(27,25,64,0.8) 30%, rgba(94,183,255,0.4) 60%, rgba(255,102,230,0.35) 100%);
  opacity: 1;
}
html[data-theme="light"][data-color="katseye"] .themed-card::before{
  background: linear-gradient(135deg, rgba(159,124,255,0.2), rgba(248,180,246,0.15), rgba(187,215,234,0.2));
  opacity: 1;
}

/* KATSEYE primary buttons - star yellow with pink glow */
html[data-color="katseye"] button:not(.chip):not(.icon-btn):not(.quick-action),
html[data-color="katseye"] .btn{
  background: linear-gradient(135deg, var(--ke-star-yellow) 0%, #F5F08D 50%, var(--ke-pink) 150%);
  color: var(--ke-text-on-light);
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255,255,165,0.3);
}
html[data-color="katseye"] button:not(.chip):not(.icon-btn):not(.quick-action):hover,
html[data-color="katseye"] .btn:hover{
  background: linear-gradient(135deg, #F5F08D 0%, var(--ke-star-yellow) 50%, var(--ke-pink) 100%);
  box-shadow: 0 0 0 2px rgba(248,180,246,0.6), 0 6px 20px rgba(255,255,165,0.4);
  transform: translateY(-1px);
}
html[data-color="katseye"] button:not(.chip):not(.icon-btn):not(.quick-action):active,
html[data-color="katseye"] .btn:active{
  background: linear-gradient(135deg, #E0DA73, var(--ke-star-yellow));
  transform: translateY(0);
}

/* Chips */
html[data-theme="dark"][data-color="katseye"] .chip{
  background: linear-gradient(135deg, rgba(27,25,64,0.6), rgba(159,124,255,0.15));
  border-color: var(--ke-purple);
  color: var(--ke-text-soft);
}
html[data-theme="dark"][data-color="katseye"] .chip:hover{
  border-color: var(--ke-holo-pink);
  box-shadow: 0 0 12px rgba(255,102,230,0.3);
}
html[data-theme="dark"][data-color="katseye"] .chip[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--ke-star-yellow) 0%, var(--ke-pink) 50%, var(--ke-purple) 100%);
  color: var(--ke-text-on-light);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255,255,165,0.4);
}
html[data-theme="light"][data-color="katseye"] .chip{
  background: rgba(159,124,255,0.08);
  border-color: var(--ke-purple);
  color: var(--ke-text-on-light);
}
html[data-theme="light"][data-color="katseye"] .chip:hover{
  border-color: var(--ke-holo-pink);
}
html[data-theme="light"][data-color="katseye"] .chip[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--ke-purple) 0%, var(--ke-pink) 100%);
  color: #ffffff;
  border-color: transparent;
}

/* Pills - glowing accents */
html[data-theme="dark"][data-color="katseye"] .pill{
  background: linear-gradient(135deg, rgba(255,255,165,0.15), rgba(248,180,246,0.1));
  color: var(--ke-star-yellow);
  border: 1px solid rgba(255,255,165,0.2);
}
html[data-theme="light"][data-color="katseye"] .pill{
  background: linear-gradient(135deg, rgba(159,124,255,0.12), rgba(248,180,246,0.08));
  color: var(--ke-purple);
  border: 1px solid rgba(159,124,255,0.2);
}

/* Status badges */
html[data-color="katseye"] .status--current{
  background: linear-gradient(135deg, var(--ke-star-yellow) 0%, var(--ke-pink) 50%, var(--ke-holo-violet) 100%) !important;
  color: var(--ke-text-on-light) !important;
  box-shadow: 0 0 20px rgba(255,255,165,0.5), var(--ke-shadow-glow-pink);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
html[data-color="katseye"] .status--next{
  background: linear-gradient(135deg, var(--ke-purple) 0%, var(--ke-holo-blue) 50%, var(--ke-holo-cyan) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--ke-shadow-glow-blue);
}

/* Progress bar - holographic animated */
html[data-color="katseye"] .progress{
  background: var(--ke-bg-3);
  border: 1px solid var(--ke-border-subtle);
}
html[data-color="katseye"] .progress::after{
  background: linear-gradient(90deg, 
    var(--ke-star-yellow) 0%, 
    var(--ke-pink) 25%, 
    var(--ke-purple) 50%, 
    var(--ke-holo-blue) 75%, 
    var(--ke-holo-cyan) 100%);
  box-shadow: 0 0 10px rgba(159,124,255,0.4);
}

/* Clock - glowing star yellow */
html[data-theme="dark"][data-color="katseye"] .clock{
  color: var(--ke-star-yellow);
  text-shadow: 0 0 30px rgba(255,255,165,0.6), 0 0 60px rgba(255,255,165,0.3);
}
html[data-theme="light"][data-color="katseye"] .clock{
  background: linear-gradient(135deg, var(--ke-purple), var(--ke-holo-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Countdown - pink glow */
html[data-theme="dark"][data-color="katseye"] .countdown{
  color: var(--ke-holo-pink);
  text-shadow: 0 0 20px rgba(255,102,230,0.5), 0 0 40px rgba(255,102,230,0.2);
}
html[data-theme="light"][data-color="katseye"] .countdown{
  background: linear-gradient(135deg, var(--ke-holo-pink), var(--ke-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Schedule table - holographic active row */
html[data-color="katseye"] .schedule tr.active{
  background: linear-gradient(90deg, 
    rgba(255,255,165,0.15) 0%, 
    rgba(248,180,246,0.12) 25%, 
    rgba(159,124,255,0.1) 50%, 
    rgba(94,183,255,0.12) 75%, 
    rgba(112,242,255,0.08) 100%);
}
html[data-theme="dark"][data-color="katseye"] .schedule tr.active{
  box-shadow: inset 0 0 0 1px rgba(255,255,165,0.35), 0 0 20px rgba(159,124,255,0.2);
}
html[data-theme="dark"][data-color="katseye"] .schedule th{
  color: var(--ke-star-yellow);
}

/* Links */
html[data-theme="dark"][data-color="katseye"] a{
  color: var(--ke-holo-cyan);
}
html[data-theme="dark"][data-color="katseye"] a:hover{
  color: var(--ke-holo-pink);
}
html[data-theme="light"][data-color="katseye"] a{
  color: var(--ke-purple);
}
html[data-theme="light"][data-color="katseye"] a:hover{
  color: var(--ke-holo-pink);
}

/* Quick actions - secondary pink buttons */
html[data-theme="dark"][data-color="katseye"] .quick-action{
  background: transparent;
  border: 1px solid var(--ke-pink);
  color: var(--ke-pink);
}
html[data-theme="dark"][data-color="katseye"] .quick-action:hover{
  background: rgba(248,180,246,0.1);
  border-color: var(--ke-holo-pink);
  box-shadow: var(--ke-shadow-glow-pink);
  color: var(--ke-holo-pink);
}
html[data-theme="light"][data-color="katseye"] .quick-action{
  background: #ffffff;
  border: 1px solid var(--ke-purple);
  color: var(--ke-purple);
}
html[data-theme="light"][data-color="katseye"] .quick-action:hover{
  background: rgba(159,124,255,0.08);
  border-color: var(--ke-holo-pink);
  color: var(--ke-holo-pink);
}

/* Add block button - holographic gradient */
html[data-color="katseye"] .add-block-btn{
  background: linear-gradient(135deg, var(--ke-purple) 0%, var(--ke-holo-pink) 50%, var(--ke-holo-blue) 100%);
  color: #ffffff;
  border: none;
}
html[data-color="katseye"] .add-block-btn:hover{
  box-shadow: var(--ke-shadow-glow-pink), var(--ke-shadow-glow-blue);
  transform: translateY(-1px);
}

/* Dialogs */
html[data-theme="dark"][data-color="katseye"] dialog{
  background: var(--ke-bg-1);
  border-color: var(--ke-border-subtle);
}
html[data-theme="light"][data-color="katseye"] dialog{
  background: #ffffff;
  border-color: rgba(159,124,255,0.2);
}

/* Tabs */
html[data-color="katseye"] .tab[aria-selected="true"]{
  background: rgba(159,124,255,0.15);
  color: var(--ke-star-yellow);
}

/* Select inputs */
html[data-theme="dark"][data-color="katseye"] select{
  background: var(--ke-bg-2);
  border-color: var(--ke-border-subtle);
  color: var(--ke-text-main);
}
html[data-theme="light"][data-color="katseye"] select{
  background: #ffffff;
  border-color: rgba(159,124,255,0.3);
  color: var(--text);
}

/* Text inputs */
html[data-theme="dark"][data-color="katseye"] input[type="text"],
html[data-theme="dark"][data-color="katseye"] input[type="number"],
html[data-theme="dark"][data-color="katseye"] textarea{
  background: var(--ke-bg-2);
  border-color: var(--ke-border-subtle);
  color: var(--ke-text-main);
}
html[data-theme="dark"][data-color="katseye"] input[type="text"]:focus,
html[data-theme="dark"][data-color="katseye"] input[type="number"]:focus,
html[data-theme="dark"][data-color="katseye"] textarea:focus{
  border-color: var(--ke-purple);
  box-shadow: 0 0 0 2px rgba(159,124,255,0.25);
}
html[data-theme="light"][data-color="katseye"] input[type="text"],
html[data-theme="light"][data-color="katseye"] input[type="number"],
html[data-theme="light"][data-color="katseye"] textarea{
  background: #ffffff;
  border-color: rgba(159,124,255,0.3);
}
html[data-theme="light"][data-color="katseye"] input[type="text"]:focus,
html[data-theme="light"][data-color="katseye"] input[type="number"]:focus,
html[data-theme="light"][data-color="katseye"] textarea:focus{
  border-color: var(--ke-purple);
  box-shadow: 0 0 0 2px rgba(159,124,255,0.2);
}

/* Icon buttons */
html[data-theme="dark"][data-color="katseye"] .icon-btn{
  color: var(--ke-blue);
}
html[data-theme="dark"][data-color="katseye"] .icon-btn:hover{
  color: var(--ke-holo-cyan);
  background: rgba(94,183,255,0.15);
}
html[data-theme="light"][data-color="katseye"] .icon-btn{
  color: var(--ke-purple);
}
html[data-theme="light"][data-color="katseye"] .icon-btn:hover{
  color: var(--ke-holo-pink);
  background: rgba(159,124,255,0.1);
}

/* Block items */
html[data-theme="dark"][data-color="katseye"] .block-item{
  background: var(--ke-bg-2);
  border-color: var(--ke-border-subtle);
}
html[data-theme="dark"][data-color="katseye"] .block-item:hover{
  border-color: var(--ke-blue);
  box-shadow: var(--ke-shadow-glow-blue);
}
html[data-theme="light"][data-color="katseye"] .block-item{
  background: #ffffff;
  border-color: rgba(159,124,255,0.15);
}
html[data-theme="light"][data-color="katseye"] .block-item:hover{
  border-color: var(--ke-purple);
}

/* Toast notifications */
html[data-theme="dark"][data-color="katseye"] .toast{
  background: var(--ke-bg-1);
  border: 1px solid var(--ke-purple);
  color: var(--ke-text-main);
}
html[data-theme="light"][data-color="katseye"] .toast{
  background: #ffffff;
  border: 1px solid var(--ke-purple);
  color: var(--text);
}

/* Onboarding - holographic hero gradient */
html[data-theme="dark"][data-color="katseye"] .onboard{
  background: linear-gradient(140deg, #0A0814 0%, #1B1940 30%, rgba(94,183,255,0.25) 60%, rgba(255,102,230,0.2) 100%);
}
html[data-theme="light"][data-color="katseye"] .onboard{
  background: linear-gradient(180deg, #F8F6FF 0%, rgba(248,180,246,0.15) 30%, rgba(159,124,255,0.1) 60%, #F8F6FF 100%);
}
html[data-theme="dark"][data-color="katseye"] .onboard-card{
  background: linear-gradient(135deg, rgba(19,17,30,0.95), rgba(27,25,64,0.9));
  border-color: var(--ke-purple);
  box-shadow: 0 0 30px rgba(159,124,255,0.2), var(--ke-shadow-soft);
}
html[data-theme="light"][data-color="katseye"] .onboard-card{
  background: rgba(255,255,255,0.95);
  border-color: rgba(159,124,255,0.3);
  box-shadow: 0 10px 40px rgba(159,124,255,0.15);
}
html[data-theme="dark"][data-color="katseye"] .onboard-title{
  background: linear-gradient(90deg, var(--ke-star-yellow), var(--ke-pink), var(--ke-holo-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Labels and text overrides for KATSEYE */
html[data-theme="dark"][data-color="katseye"] .label{
  color: var(--ke-text-soft);
}
html[data-theme="dark"][data-color="katseye"] .muted{
  color: var(--ke-text-muted);
}

/* Themed card text */
html[data-color="katseye"] .themed-card .label,
html[data-color="katseye"] .themed-card .muted,
html[data-color="katseye"] .themed-card #currentName,
html[data-color="katseye"] .themed-card #countdownOut,
html[data-color="katseye"] .themed-card #timeRemaining{
  color: #ffffff !important;
}