/* ASY OS STREAK — Midnight / Gold / Mobile-first */
.streak-page{--ss-gold:#f2b84b;--ss-green:#43d391;--ss-muted:#9aa2ab;color:#f3f3f4;max-width:1510px;margin:0 auto;padding:3px 0 64px;display:grid;gap:24px}
.streak-page button{font:inherit;cursor:pointer}
.streak-hero{position:relative;overflow:hidden;border:1px solid #373325;border-radius:22px;background:radial-gradient(ellipse at 92% 0%,#282113 0,transparent 53%),linear-gradient(135deg,#141413,#080909 75%);padding:30px 32px;display:grid;gap:26px}
.streak-hero:before{content:"";position:absolute;right:-135px;top:-205px;width:450px;height:450px;border:1px solid #80653033;border-radius:50%;pointer-events:none}
.streak-hero-head,.streak-hero-bottom,.streak-topline,.streak-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.streak-hero-head{align-items:flex-start}
.streak-kicker{font:700 10px/1.5 inherit;letter-spacing:2px;color:var(--ss-gold)!important}
.streak-hero h2{font-size:clamp(26px,3vw,39px);letter-spacing:.5px;margin:8px 0 6px;line-height:1.15}
.streak-hero h2 span{font-weight:400;color:#c1a873}
.streak-hero p,.streak-section-heading p{color:#99a1aa;font-size:13px;margin:5px 0;line-height:1.55}
.streak-primary,.streak-cta{border:1px solid #ba9147;background:linear-gradient(110deg,#ad7e32,#edba61);color:#0d0e0e!important;padding:10px 16px;border-radius:10px;font-size:13px!important;font-weight:760!important;white-space:nowrap}
.streak-primary:hover,.streak-cta:hover{filter:brightness(1.1)}
.streak-hero-bottom{min-height:135px}
.streak-hero-bottom>div:first-child>span{font-size:11px;letter-spacing:2px;color:#b3a17d;font-weight:750}
.streak-hero-value{font-variant-numeric:tabular-nums;font-size:clamp(48px,6vw,77px);line-height:1.1;font-weight:800;color:#fff;margin:3px 0}
.streak-hero-value small{font-size:clamp(24px,3vw,34px);font-weight:400;color:#9198a1}
.streak-ring{flex-shrink:0;width:142px;height:142px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ss-gold) calc(var(--streak-progress)*1%),#3a352b 0)}
.streak-ring>div{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;background:#10110f}
.streak-ring b{font-size:30px;font-variant-numeric:tabular-nums}.streak-ring small{color:#a8adb3;font-size:11px}
.streak-track{width:100%;height:7px;overflow:hidden;border-radius:50px;background:#262a2d}
.streak-track i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#966726,#f2b84b);transition:width .25s ease}
.streak-track i.streak-limit{background:#829098}
.streak-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.streak-stats>div{border:1px solid #242729;background:#111314;border-radius:14px;min-width:0;padding:17px 20px;display:flex;flex-direction:column;gap:6px}
.streak-stats small{color:var(--ss-muted);font-size:12px}
.streak-stats strong{font-size:25px;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.streak-section-heading{margin:10px 0 0}.streak-section-heading h3{font-size:21px;margin:0}
.streak-section-heading p{font-size:12px}
.streak-subtle{border:1px solid #373b3e;border-radius:9px;padding:8px 12px;background:#171a1d;color:#e0e1e4;font-size:12px!important}
.streak-subtle:hover{border-color:#bd933b}
.streak-group{display:grid;gap:12px}.streak-group h4{font-size:15px;color:#c5c8ca;margin:0;display:flex;align-items:center;gap:9px}
.streak-group h4 small{color:#8e969e;font-size:12px;font-weight:400}
.streak-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.streak-tile{min-width:0;display:flex;flex-direction:column;gap:15px;border:1px solid #272b2c;border-radius:16px;background:linear-gradient(145deg,#151719,#0f1112);padding:18px}
.streak-tile.done{border-color:#264a39;background:linear-gradient(140deg,#14221b,#0d1110 75%)}
.streak-tile header{display:flex;gap:10px;align-items:center;min-width:0}
.streak-glyph{border:1px solid #3b3e3d;background:#252729;border-radius:11px;display:grid;place-items:center;flex-shrink:0;width:41px;height:41px;font-size:20px}
.streak-tile header>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.streak-tile header strong{font-size:13px;overflow-wrap:anywhere}.streak-tile header small{font-size:11px;color:#919ba3}
.streak-flame{font-size:13px;white-space:nowrap;color:#f2b84b;font-weight:700}
.streak-value{display:flex;align-items:baseline;justify-content:space-between;gap:7px;flex-wrap:wrap}
.streak-value b{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700;overflow-wrap:anywhere}
.streak-value span{font-size:11px;color:#9da4a9}
.streak-tile.done .streak-value span{color:#43d391}
.streak-tile footer{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-top:auto}
.streak-tile .streak-cta{padding:8px 12px;font-size:12px!important}
.streak-tile .streak-subtle{padding:8px 10px;font-size:12px!important}
.streak-detail,.streak-info{border:1px solid #3b3630;border-radius:16px;padding:22px;background:#111313}
.streak-detail{display:grid;gap:16px}
.streak-detail h3{font-size:18px;margin:0}
.streak-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.streak-detail-stats>div{background:#191c1d;border:1px solid #303333;padding:15px;border-radius:11px;display:flex;flex-direction:column;gap:4px}
.streak-detail-stats b{font-size:21px}.streak-detail-stats span{font-size:11px;color:#9aa2ab}
.streak-periods{display:flex;flex-wrap:wrap;gap:8px}.streak-periods button{border:1px solid #303537;background:#202324;color:#ddd;border-radius:8px;padding:7px 13px;font-size:12px}
.streak-periods .active{border-color:#c39b53;color:#f2b84b}
.streak-hint,.streak-privacy{font-size:12px;color:#959da4;line-height:1.6}
.streak-heat{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));gap:5px}
.streak-heat>span{aspect-ratio:1;min-width:0;min-height:7px;border-radius:3px;background:#242729}
.streak-heat .hot{background:#45b87c}.streak-heat .warm{background:#796430}.streak-heat .off{background:#121414}
.streak-detail-actions{display:flex;gap:12px;flex-wrap:wrap}
.streak-info{font-size:13px;color:#a8b0b5}
.streak-privacy{margin:0}
.streak-report{display:grid;gap:12px;margin-top:20px;padding:22px;border:1px solid #363126!important;background:#121413!important}
.streak-report h3{margin:4px 0}.streak-report-numbers{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.streak-report-numbers strong{font-size:27px;font-variant-numeric:tabular-nums}.streak-report-numbers span{font-size:12px;color:#9aa3aa}
.streak-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:12px}
.streak-modal-grid label{font-size:12px;color:#b9bec2;display:grid;gap:5px;min-width:0}.streak-modal-grid label input,.streak-modal-grid label select{min-width:0;width:100%;box-sizing:border-box}
.streak-modal-grid label small{font-size:10px;color:#8e959b}
@media(max-width:1000px){.streak-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.streak-page{gap:18px}.streak-hero{padding:18px;border-radius:16px;gap:20px}.streak-hero-head{flex-wrap:wrap}.streak-hero h2{font-size:25px}.streak-primary{padding:9px 12px}.streak-hero-bottom{min-height:0}.streak-ring{width:108px;height:108px}.streak-ring>div{width:91px;height:91px}.streak-ring b{font-size:22px}.streak-ring small{font-size:10px}.streak-hero-value{font-size:48px}.streak-hero-value small{font-size:21px}.streak-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.streak-stats>div{padding:12px}.streak-stats strong{font-size:20px}.streak-grid{grid-template-columns:minmax(0,1fr);gap:10px}.streak-tile{padding:14px;gap:12px}.streak-section-heading h3{font-size:18px}.streak-section-heading{align-items:flex-start}.streak-detail{padding:14px}.streak-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.streak-detail-stats>div{padding:9px}.streak-detail-stats b{font-size:17px}.streak-detail-stats span{font-size:10px}.streak-heat{grid-template-columns:repeat(14,minmax(0,1fr))}.streak-modal-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.streak-track i{transition:none}}

.streak-badges{display:flex;gap:8px;flex-wrap:wrap}.streak-badges span{padding:7px 10px;border:1px solid #383b3b;background:#1b1e1f;border-radius:10px;font-size:12px}.streak-badges span.unlocked{border-color:#816632;color:#eec476}.streak-badges span.locked{opacity:.5}

/* Exact time / active days grid: no guessed duration from counts. */
.streak-time-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.streak-time-grid>div{min-width:0;border:1px solid #303436;background:#101415;border-radius:9px;padding:9px 7px;display:flex;flex-direction:column;gap:4px}
.streak-time-grid small{font-size:10px;color:#a3adb5}
.streak-time-grid strong{font-size:13px;color:#f0f0f0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.streak-lesson-count{font-size:11px;color:#e3bc70;font-weight:600}
.streak-tile>small{font-size:10px;color:#9fa7af}
.streak-detail-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.streak-detail-totals>div{min-width:0;background:#171b1d;padding:12px;border:1px solid #313637;border-radius:10px;display:flex;flex-direction:column;gap:5px}
.streak-detail-totals small{font-size:10px;color:#a2acb2}
.streak-detail-totals strong{font-size:15px;overflow-wrap:anywhere}
@media(max-width:700px){
 .streak-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .streak-time-grid>div{padding:9px 6px}
 .streak-time-grid small{font-size:10px}
 .streak-time-grid strong{font-size:12px}
 .streak-detail-totals{grid-template-columns:minmax(0,1fr)}
}

.streak-header-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media(min-width:701px) and (max-width:1100px){.streak-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.streak-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.streak-header-controls{justify-content:flex-end}.streak-header-controls .streak-subtle{font-size:11px!important;padding:7px 9px}}

/* STREAK provenance: recorded source for every indicator, stays readable on mobile. */
.streak-tile .streak-source-map{display:block;overflow-wrap:anywhere;line-height:1.55;color:#9ba7b2;font-size:10px;padding:2px 1px 5px;}
@media(max-width:700px){.streak-tile .streak-source-map{font-size:11px;}}