/* ============================================================
   Scan-to-Wake — style.css
   Modern dark-mode alarm UI with glassmorphism & animations
   ============================================================ */

:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #131832;
  --bg-tertiary: #1c2240;
  --bg-glass: rgba(19,24,50,0.65);
  --accent-primary: #6c5ce7;
  --accent-secondary: #a29bfe;
  --accent-success: #00e676;
  --accent-danger: #ff5252;
  --accent-danger-glow: rgba(255,82,82,0.35);
  --accent-warning: #ffd740;
  --text-primary: #f0f0f5;
  --text-secondary: #9ca3af;
  --text-muted: #5c6180;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow-purple: 0 0 30px rgba(108,92,231,0.35);
  --shadow-glow-red: 0 0 40px rgba(255,82,82,0.45);
  --tr-fast: 0.2s ease;
  --tr-normal: 0.35s ease;
  --tr-slow: 0.6s ease;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);
  min-height:100vh;line-height:1.6;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% 0%,rgba(108,92,231,0.08) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 100%,rgba(162,155,254,0.06) 0%,transparent 60%);
}
.hidden{display:none!important}

/* Loading */
#loading-overlay{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;background:var(--bg-primary);
  transition:opacity var(--tr-slow);
}
#loading-overlay.fade-out{opacity:0;pointer-events:none}
.loader-ring{
  width:72px;height:72px;border-radius:50%;
  border:4px solid var(--bg-tertiary);border-top-color:var(--accent-primary);
  animation:spin 1s linear infinite;
}
.loader-text{font-size:clamp(.95rem,2.5vw,1.15rem);color:var(--text-secondary);letter-spacing:.02em}
.loader-text span{color:var(--accent-secondary);font-weight:600}

/* App Container */
.app-container{
  max-width:540px;margin:0 auto;padding:24px 20px 40px;
  display:flex;flex-direction:column;align-items:center;gap:28px;min-height:100vh;
}

/* Header */
.app-header{text-align:center;padding-top:12px}
.app-header h1{
  font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--accent-secondary),var(--accent-primary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.app-header .subtitle{font-size:clamp(.8rem,2vw,.92rem);color:var(--text-secondary);margin-top:4px}

/* Clock */
.clock-display{
  font-family:var(--font-mono);font-size:clamp(2.8rem,10vw,4.2rem);font-weight:700;
  letter-spacing:.04em;text-align:center;color:var(--text-primary);
  text-shadow:0 0 32px rgba(162,155,254,0.2);padding:8px 0;
}
.clock-display .seconds{font-size:.45em;color:var(--text-secondary);vertical-align:super;margin-left:2px}
.clock-date{text-align:center;font-size:clamp(.78rem,2vw,.88rem);color:var(--text-muted);margin-top:-4px}

/* Cards */
.card{
  width:100%;background:var(--bg-secondary);border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-card);
  transition:box-shadow var(--tr-normal);
}
.card:hover{box-shadow:var(--shadow-card),var(--shadow-glow-purple)}
.card-title{font-size:1rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card-title .icon{font-size:1.15em}

/* Alarm Form */
.alarm-form{display:flex;flex-direction:column;gap:14px}
.time-input-wrapper input[type="time"]{
  width:100%;padding:14px 18px;font-family:var(--font-mono);font-size:1.35rem;font-weight:600;
  color:var(--text-primary);background:var(--bg-tertiary);
  border:2px solid rgba(108,92,231,0.25);border-radius:var(--radius-sm);outline:none;
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast);-webkit-appearance:none;appearance:none;
}
.time-input-wrapper input[type="time"]:focus{
  border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(108,92,231,0.2);
}
.time-input-wrapper input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(.8);cursor:pointer}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;font-family:var(--font);font-size:.95rem;font-weight:700;
  letter-spacing:.01em;border:none;border-radius:var(--radius-sm);cursor:pointer;
  transition:background var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-primary),#5a4bd1);color:#fff;
  box-shadow:0 4px 16px rgba(108,92,231,0.35);
}
.btn-primary:hover{box-shadow:0 6px 24px rgba(108,92,231,0.5)}
.btn-danger{background:rgba(255,82,82,0.12);color:var(--accent-danger);border:1px solid rgba(255,82,82,0.25)}
.btn-danger:hover{background:rgba(255,82,82,0.2)}
.btn-success{
  background:linear-gradient(135deg,var(--accent-success),#00c853);color:#0a0e1a;
  box-shadow:0 4px 16px rgba(0,230,118,0.3);
}
.btn-success:hover{box-shadow:0 6px 24px rgba(0,230,118,0.45)}

/* Active Alarm */
.active-alarm{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:rgba(108,92,231,0.08);
  border:1px solid rgba(108,92,231,0.2);border-radius:var(--radius-sm);animation:fade-in var(--tr-normal);
}
.active-alarm .alarm-time{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--accent-secondary)}
.active-alarm .alarm-label{font-size:.82rem;color:var(--text-secondary)}
.active-alarm .alarm-info{display:flex;flex-direction:column;gap:2px}
.alarm-status-dot{width:10px;height:10px;background:var(--accent-success);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0}

/* Object List */
.object-list-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;color:var(--text-primary);cursor:pointer;padding:0;font-family:var(--font);
}
.object-list-toggle .chevron{transition:transform var(--tr-fast);font-size:1.1rem;color:var(--text-secondary)}
.object-list-toggle.open .chevron{transform:rotate(180deg)}
.object-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;
  overflow:hidden;max-height:0;transition:max-height .4s ease,opacity .3s ease;opacity:0;
}
.object-grid.open{max-height:400px;opacity:1}
.object-chip{
  display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-tertiary);
  border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.04);transition:border-color var(--tr-fast),background var(--tr-fast);
}
.object-chip:hover{border-color:rgba(108,92,231,0.3);background:rgba(108,92,231,0.08)}
.object-chip .chip-icon{font-size:1.15em}

/* Overlays */
.overlay{
  position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:20px;overflow-y:auto;
  background:rgba(10,14,26,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:fade-in .4s ease;
}
#alarm-overlay{gap:18px;justify-content:flex-start;padding-top:28px}

.alarm-banner{
  width:100%;max-width:480px;text-align:center;padding:16px 20px;
  background:rgba(255,82,82,0.1);border:2px solid var(--accent-danger);
  border-radius:var(--radius-md);animation:pulse-alarm 1.2s ease-in-out infinite;
}
.alarm-banner h2{
  font-size:clamp(1.1rem,4vw,1.4rem);font-weight:800;color:var(--accent-danger);
  display:flex;align-items:center;justify-content:center;gap:10px;
}

.challenge-text{text-align:center;max-width:480px}
.challenge-text .label{font-size:clamp(.85rem,2.5vw,.95rem);color:var(--text-secondary);margin-bottom:4px}
.challenge-text .object-name{
  font-size:clamp(1.4rem,5vw,2rem);font-weight:800;color:var(--accent-warning);
  text-shadow:0 0 24px rgba(255,215,64,0.25);animation:shake 3s ease-in-out infinite;
}

/* Camera */
.camera-container{
  width:100%;max-width:400px;aspect-ratio:4/3;border-radius:var(--radius-md);
  overflow:hidden;border:3px solid var(--accent-danger);box-shadow:var(--shadow-glow-red);
  position:relative;background:#000;flex-shrink:0;
}
.camera-container video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.camera-label{
  position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.6);color:var(--accent-danger);
  font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-full);
  letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:5px;
}
.camera-label .rec-dot{width:7px;height:7px;background:var(--accent-danger);border-radius:50%;animation:pulse-dot 1s ease-in-out infinite}

/* Detection */
.detection-panel{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px}
.detection-panel .panel-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.detection-row{display:flex;align-items:center;gap:12px}
.detection-row .det-label{flex:0 0 120px;font-size:.82rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detection-row .det-bar-track{flex:1;height:14px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}
.detection-row .det-bar-fill{
  height:100%;border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--accent-danger),var(--accent-warning));
  transition:width .15s ease,background .3s ease;min-width:0;
}
.detection-row .det-bar-fill.high{background:linear-gradient(90deg,var(--accent-success),#69f0ae)}
.detection-row .det-bar-fill.target-high{background:linear-gradient(90deg,var(--accent-success),#69f0ae);box-shadow:0 0 10px rgba(0,230,118,0.4)}
.detection-row .det-value{flex:0 0 48px;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--text-secondary);text-align:right}
.detection-row.is-target .det-label{color:var(--accent-warning)}
.detection-row.is-target .det-value{color:var(--accent-warning)}

/* Hold Progress */
.hold-progress-section{width:100%;max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.hold-progress-label{font-size:.82rem;color:var(--text-secondary)}
.hold-progress-label span{color:var(--accent-success);font-weight:700;font-family:var(--font-mono)}
.hold-progress-track{width:100%;height:10px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}
.hold-progress-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-success));
  border-radius:var(--radius-full);transition:width .25s linear;
}
.hold-progress-fill.complete{background:var(--accent-success);box-shadow:0 0 14px rgba(0,230,118,0.5)}

/* Success */
#success-overlay{justify-content:center;gap:24px;text-align:center;background:rgba(10,14,26,0.96)}
.success-icon{font-size:clamp(3.5rem,12vw,5rem);animation:success-pop .6s cubic-bezier(.34,1.56,.64,1) both}
.success-title{
  font-size:clamp(1.5rem,5vw,2rem);font-weight:800;color:var(--accent-success);
  text-shadow:0 0 30px rgba(0,230,118,0.3);animation:fade-in .6s .2s both;
}
.success-subtitle{font-size:clamp(.9rem,2.5vw,1.05rem);color:var(--text-secondary);max-width:320px;animation:fade-in .6s .4s both}
#success-overlay .btn{animation:fade-in .6s .6s both}

/* Error */
.error-banner{
  width:100%;max-width:480px;padding:14px 18px;background:rgba(255,82,82,0.1);
  border:1px solid rgba(255,82,82,0.3);border-radius:var(--radius-sm);
  color:var(--accent-danger);font-size:.88rem;text-align:center;animation:fade-in var(--tr-normal);
}

/* Footer */
.app-footer{text-align:center;font-size:.78rem;color:var(--text-muted);padding:8px 0;margin-top:auto}
.app-footer a{color:var(--accent-secondary);text-decoration:none}
.app-footer a:hover{text-decoration:underline}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-alarm{
  0%,100%{box-shadow:0 0 0 0 var(--accent-danger-glow);border-color:var(--accent-danger)}
  50%{box-shadow:0 0 32px 6px var(--accent-danger-glow);border-color:#ff8a80}
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes shake{0%,100%{transform:translateX(0)}8%{transform:translateX(-4px)}16%{transform:translateX(4px)}24%{transform:translateX(-3px)}32%{transform:translateX(3px)}40%{transform:translateX(0)}}
@keyframes success-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

#success-overlay::before,#success-overlay::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;animation:confetti-float 3s ease-in-out infinite}
#success-overlay::before{top:15%;left:20%;background:var(--accent-warning)}
#success-overlay::after{top:25%;right:18%;background:var(--accent-primary);animation-delay:.5s}
@keyframes confetti-float{0%,100%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-20px) scale(1.5);opacity:1}}

/* Responsive */
@media(max-width:420px){
  .app-container{padding:16px 14px 32px;gap:22px}
  .card{padding:18px 16px}
  .detection-row .det-label{flex:0 0 90px;font-size:.75rem}
  .detection-row .det-value{flex:0 0 40px;font-size:.72rem}
  .active-alarm{padding:12px 14px}
  .active-alarm .alarm-time{font-size:1.25rem}
  .camera-container{max-width:100%}
  .overlay{padding:14px}
  #alarm-overlay{padding-top:18px;gap:14px}
}
@media(min-width:768px){
  .app-container{padding-top:48px;gap:32px}
  .camera-container{max-width:420px}
}
@media(min-width:1024px){
  .app-container{max-width:580px;padding-top:56px}
}