/* STUDY PLUS — selaras dengan token CLINED (--card --line --surface --text --muted --brand) */
.sp-today{display:flex;align-items:stretch;gap:12px;margin-top:12px}
.sp-today-main{flex:1;min-width:0}
.sp-today .section-title{margin-bottom:4px}
.sp-today-sub{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--text)}
.sp-today-chips{margin:0 0 10px;font-size:11.5px;font-weight:800;color:var(--muted);line-height:1.5}
.sp-start{width:100%;margin-top:6px}
.sp-cd{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px;border-radius:18px;border:2px solid #1899d6;border-bottom-width:4px;background:rgba(28,176,246,.12);color:var(--text);font:inherit;cursor:pointer;text-align:center}
.sp-cd b{font-size:28px;font-weight:950;letter-spacing:-1px;line-height:1;color:#1899d6}
.sp-cd span{font-size:11px;font-weight:850;line-height:1.3}
.sp-cd small{font-size:10px;color:var(--muted);font-weight:800;display:block;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-cd-empty{border-style:dashed;background:transparent}
.sp-cd:active{transform:translateY(2px)}

.sp-card{padding-bottom:20px}
.sp-block{margin-top:14px;padding:14px;border-radius:20px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card)}
.sp-h{font-size:15px;font-weight:950;margin-bottom:10px;color:var(--text)}
.sp-sub{font-size:12px;font-weight:900;color:var(--muted);margin:10px 0 6px}
.sp-note{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--muted);line-height:1.5}
.sp-empty{padding:14px;text-align:center;border:2px dashed var(--line);border-radius:14px;font-size:12.5px;font-weight:800;color:var(--muted)}

.sp-cd-big{display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:linear-gradient(135deg,#1cb0f6,#16a4e8);color:#fff}
.sp-cd-big>b{font-size:44px;font-weight:950;letter-spacing:-2px;line-height:1}
.sp-cd-big span{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:800}
.sp-cd-big small{font-size:11.5px;opacity:.9;font-weight:700}
.sp-goal{margin-top:12px}
.sp-goal-top{display:flex;justify-content:space-between;font-size:13px;font-weight:850;margin-bottom:6px}
.sp-track{height:12px;border-radius:99px;background:var(--surface);border:2px solid var(--line);overflow:hidden}
.sp-track i{display:block;height:100%;border-radius:99px;background:var(--brand,#58cc02);transition:width .3s}
.sp-split-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;margin-top:6px;border-radius:13px;background:var(--surface);border:1.5px solid var(--line);font-size:13px;font-weight:900}
.sp-split-row small{display:block;font-size:11px;color:var(--muted);font-weight:750}
.sp-split-row b{color:#1899d6;white-space:nowrap}
.sp-form{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sp-form input[type=text],.sp-form input[type=date],.sp-form input[type=time]{width:100%;padding:11px 12px;border-radius:13px;border:2px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-weight:800;font-size:14px}
.sp-form-inline label{display:flex;align-items:center;gap:10px;font-weight:850;font-size:13px}
.sp-form-inline input{width:auto!important}
.sp-form-btns{display:flex;gap:8px;flex-wrap:wrap}
.sp-form-btns .small-btn{flex:1;min-width:120px}

.sp-bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end}
.sp-bar{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.sp-bar b{font-size:10px;font-weight:900;color:var(--muted);height:12px}
.sp-bar-track{width:100%;height:96px;display:flex;align-items:flex-end;border-radius:9px;background:var(--surface);border:1.5px solid var(--line);overflow:hidden}
.sp-bar-track i{display:block;width:100%;border-radius:7px 7px 0 0;background:var(--line);transform-origin:bottom;animation:spGrow .6s ease both}
.sp-bar-track i.weak{background:#ef4444}.sp-bar-track i.mid{background:#f5a524}.sp-bar-track i.ok{background:#58cc02}
@keyframes spGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sp-bar small{font-size:9.5px;font-weight:800;color:var(--muted)}
.sp-trend-note{margin:10px 0 0;font-size:12.5px;font-weight:900}
.sp-trend-note.up{color:#46a900}.sp-trend-note.down{color:#ef4444}

.sp-heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:4px;overflow-x:auto;padding-bottom:2px}
.sp-cell{display:block;width:100%;aspect-ratio:1;min-width:12px;border-radius:4px;background:var(--surface);border:1px solid var(--line)}
.sp-heat-legend .sp-cell{width:12px;min-width:12px}
.sp-l1{background:#c8f0a0;border-color:transparent}.sp-l2{background:#8fdc4a;border-color:transparent}.sp-l3{background:#58cc02;border-color:transparent}.sp-l4{background:#3a9400;border-color:transparent}
.sp-future{opacity:0;border-color:transparent}
.sp-heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:8px;font-size:10.5px;font-weight:800;color:var(--muted)}

.sp-time-row{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1.5px dashed var(--line);font-size:13px;font-weight:900}
.sp-time-row:last-child{border-bottom:0}
.sp-time-row small{display:block;font-size:10.5px;color:var(--muted);font-weight:750}
.sp-time-avg{text-align:center}
.sp-time-flags{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.sp-time-flags em{font-style:normal;font-size:11px;font-weight:900;color:var(--muted)}
.sp-time-flags em.warn{color:#ef4444}.sp-time-flags em.ok{color:#46a900}
.sp-switch{display:flex;align-items:center;gap:10px;font-weight:900;font-size:14px}
.sp-switch input{width:20px;height:20px;accent-color:#58cc02}
@media (prefers-reduced-motion:reduce){.sp-bar-track i,.sp-track i{animation:none;transition:none}}

/* ───── v2: tampilan lebih bersih ───── */
#studyPlusBody { display: grid; gap: 12px; }
#studyPlusBody .sp-block { margin-top: 0; padding: 14px; }
#studyPlusBody .sp-h { margin-bottom: 10px; font-size: 14.5px; }
.sp-hero { background: linear-gradient(180deg, rgba(28,176,246,.10), transparent 60%), var(--card); }
.sp-hero .sp-cd-big { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #1cb0f6, #6a5cff); box-shadow: 0 5px 0 #1186bd; position: relative; overflow: hidden; }
.sp-hero .sp-cd-big::after { content: "📅"; position: absolute; right: 12px; top: 8px; font-size: 54px; opacity: .22; }
.sp-hero .sp-cd-big > b { font-size: 64px; letter-spacing: -3px; }
.sp-hero .sp-cd-big > span { font-size: 14px; }
.sp-hero .sp-cd-big > span b { font-weight: 950; }
.sp-hero .sp-goal { margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--surface); }
.sp-hero .sp-split { margin-top: 12px; }
.sp-edit { margin-top: 12px; }
.sp-edit > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 900; border-radius: 14px; border: 2px dashed var(--line); color: var(--muted); }
.sp-edit > summary::-webkit-details-marker { display: none; }
.sp-edit[open] > summary { margin-bottom: 4px; }
.sp-form input[type=text], .sp-form input[type=date], .sp-form input[type=time] { font-size: 16px; min-height: 48px; }
.sp-form-btns .small-btn { min-height: 48px; }
.sp-del { color: #d33a3a !important; border-color: rgba(255,75,75,.5) !important; }

/* kalender: sel lebih besar, rapi */
.sp-heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; }
.sp-heat .sp-cell { width: auto; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 5px; }
.sp-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--muted); }
.sp-heat-legend .sp-cell { width: 14px; height: 14px; border-radius: 4px; }

/* tren */
.sp-bars { gap: 6px; }
.sp-trend-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 900; background: var(--surface); }
.sp-trend-note.up { color: #2f7a00; background: rgba(88,204,2,.14); } .sp-trend-note.down { color: #d33a3a; background: rgba(255,75,75,.12); }

/* waktu per soal */
.sp-time-row { padding: 10px 12px; border-radius: 14px; }

/* pengaturan */
.sp-remrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; }
.sp-remrow .sp-switch { flex: 1; min-height: 44px; }
.sp-remrow input[type=time] { width: auto; min-width: 118px; min-height: 46px; padding: 0 12px; font-size: 16px; font-weight: 900; border-radius: 13px; border: 2px solid var(--line); background: var(--surface); color: inherit; }
.sp-switch input { width: 24px; height: 24px; }
.sp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-actions .small-btn { min-height: 48px; font-size: 12.5px; padding: 0 6px; white-space: nowrap; }
.sp-empty { padding: 12px; font-size: 12.5px; }

/* v95 kalender bulanan */
.sp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-cal-head b { font-size: 15px; }
.sp-cal-nav { width: 40px; min-height: 40px; padding: 0; border-radius: 12px; font-size: 20px; }
.sp-cal-nav:disabled { opacity: .35; }
.sp-cal-dow, .sp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sp-cal-dow span { text-align: center; font-size: 10.5px; font-weight: 900; opacity: .6; padding-bottom: 2px; }
.sp-cal .sp-blank { background: none; border: 0; }
.sp-cal .sp-day { position: relative; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: inherit; display: grid; place-items: center; align-content: center; gap: 0; box-shadow: none; font-weight: 900; }
.sp-day span { font-size: 13px; line-height: 1; } .sp-day small { font-size: 9px; font-weight: 900; opacity: .8; line-height: 1; }
.sp-day.fut { opacity: .45; }
.sp-day.sp-l1 { background: #d7f5b8; } .sp-day.sp-l2 { background: #a5e66a; } .sp-day.sp-l3 { background: #6fcf2a; color: #17400a; } .sp-day.sp-l4 { background: #3f9b0a; color: #fff; }
.sp-day.today { box-shadow: 0 0 0 2px #1cb0f6; } .sp-day.exam { box-shadow: 0 0 0 2px #ff4b4b; } .sp-day.pick { outline: 2px solid #1cb0f6; outline-offset: 1px; }
.sp-cal-sum, .sp-cal-pick { margin: 10px 0 0; font-size: 12.5px; font-weight: 800; opacity: .85; }
@media (min-width:1100px) and (hover:hover) and (pointer:fine) { .sp-cal { max-width: 460px; } }