/* Sleep Calculator — sleep-calculator.css
   Mobile-first. Scoped to .sc-wrap */

.sc-wrap *,.sc-wrap *::before,.sc-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.sc-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;max-width:960px;margin:0 auto;background:#fff;border-radius:16px;border:1px solid #e2e8f0;overflow:hidden}

.sc-header{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#1e1b4b}
.sc-header-icon{width:44px;height:44px;background:rgba(255,255,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#a5b4fc;flex-shrink:0}
.sc-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:3px}
.sc-subtitle{font-size:12.5px;color:#a5b4fc}

.sc-body{display:flex;flex-direction:column}
@media(min-width:720px){.sc-body{flex-direction:row;align-items:flex-start}.sc-form{width:46%;border-right:1px solid #e2e8f0}.sc-results{width:54%;position:sticky;top:0;max-height:100vh;overflow-y:auto}}

.sc-form{padding:20px;display:flex;flex-direction:column;gap:16px}
.sc-field{display:flex;flex-direction:column;gap:6px}
.sc-label{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.05em}
.sc-hint{font-size:11.5px;color:#94a3b8}

/* Mode tabs */
.sc-mode-tabs{display:flex;flex-direction:column;gap:6px}
.sc-mode-tab{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;text-align:left}
.sc-mode-tab svg{flex-shrink:0;color:#94a3b8;transition:color .15s}
.sc-mode-tab:hover{border-color:#4f46e5;color:white}
.sc-mode-tab:hover svg{color:#4f46e5}
.sc-mode-tab.active{background:#1e1b4b;border-color:#1e1b4b;color:#fff}
.sc-mode-tab.active svg{color:#a5b4fc}

/* Time input */
.sc-time-input{width:100%;padding:12px 16px;border:1.5px solid #cbd5e1;border-radius:10px;font-size:24px;font-weight:700;color:#1e1b4b;outline:none;background:#f8fafc;transition:border-color .18s;font-family:inherit}
.sc-time-input:focus{border-color:#4f46e5;background:#fff}

/* Age grid */
.sc-age-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sc-age-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;cursor:pointer;transition:all .15s;text-align:center}
.sc-age-btn:hover{background:white; border-color:#4f46e5}
.sc-age-btn.active{border-color:#4f46e5;background:#eef2ff;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.sc-age-icon{font-size:20px}
.sc-age-name{font-size:12px;font-weight:700;color:#334155}
.sc-age-rec{font-size:10.5px;color:#64748b}
.sc-age-btn.active .sc-age-name{color:#4338ca}

/* Buttons */
.sc-btn-group{display:flex;gap:6px;flex-wrap:wrap}
.sc-lat-btn,.sc-nap-btn{padding:8px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:13px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s}
.sc-lat-btn:hover,.sc-nap-btn:hover{border-color:#4f46e5;color:white !important}
.sc-lat-btn.active,.sc-nap-btn.active{background:#1e1b4b;border-color:#1e1b4b;color:#fff}

/* Disclaimer */
.sc-disclaimer{display:flex;align-items:flex-start;gap:8px;background:#fefce8;border:1px solid #fde047;border-radius:9px;padding:10px 14px;font-size:12px;color:#854d0e;line-height:1.5}
.sc-disclaimer svg{flex-shrink:0;margin-top:1px;color:#ca8a04}

/* Results */
.sc-results{background:#f0f4ff;padding:20px}
.sc-result-header{margin-bottom:14px}
.sc-result-title{font-size:15px;font-weight:700;color:#1e1b4b;margin-bottom:3px}
.sc-result-sub{font-size:12.5px;color:#64748b}

/* Cycle cards */
.sc-cycles{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sc-cycle-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 16px;transition:border-color .15s}
.sc-cycle-card.sc-recommended{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.sc-cycle-card.sc-good{border-color:#0891b2}
.sc-cycle-left{display:flex;flex-direction:column;gap:2px}
.sc-cycle-time{font-size:24px;font-weight:800;color:#1e1b4b;line-height:1}
.sc-cycle-detail{font-size:12px;color:#64748b}
.sc-cycle-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sc-cycle-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.sc-badge-best{background:#eef2ff;color:#4338ca}
.sc-badge-good{background:#e0f2fe;color:#0369a1}
.sc-badge-ok{background:#f1f5f9;color:#64748b}
.sc-cycle-hrs{font-size:12.5px;font-weight:600;color:#94a3b8}

/* Sleep debt */
.sc-debt-block{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.sc-debt-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:10px}
.sc-debt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sc-debt-label{font-size:13px;color:#475569}
.sc-suffix-wrap{display:flex;align-items:center;border:1.5px solid #cbd5e1;border-radius:8px;overflow:hidden;background:#f8fafc;transition:border-color .18s}
.sc-suffix-wrap:focus-within{border-color:#4f46e5;background:#fff}
.sc-suffix{padding:0 10px;font-size:13px;font-weight:600;color:#64748b;background:#f1f5f9;height:40px;display:flex;align-items:center;border-left:1px solid #e2e8f0;flex-shrink:0}
.sc-input{flex:1;border:none;background:transparent;padding:0 12px;height:40px;font-size:14px;color:#1e293b;outline:none;-moz-appearance:textfield;min-width:0}
.sc-input::-webkit-outer-spin-button,.sc-input::-webkit-inner-spin-button{-webkit-appearance:none}
.sc-debt-result{padding:10px 0 4px}
.sc-debt-val{font-size:18px;font-weight:800;margin-bottom:3px}
.sc-debt-msg{font-size:12.5px;line-height:1.5}

/* Tips */
.sc-tips{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px}
.sc-tips-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:10px}
.sc-tip-row{display:flex;align-items:center;gap:10px;font-size:13px;color:#475569;padding:5px 0}
.sc-tip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

@media(max-width:480px){
  .sc-header,.sc-form,.sc-results{padding:16px}
  .sc-title{font-size:17px}
  .sc-time-input{font-size:20px}
  .sc-age-grid{grid-template-columns:1fr 1fr}
  .sc-cycle-time{font-size:20px}
}