/* StudyFlow WordPress Plugin — studyflow.css */
#sf-root,#sf-root *{box-sizing:border-box;margin:0;padding:0}
#sf-root{
  --sf-bg:#0d0f14;--sf-bg2:#13161e;--sf-bg3:#1a1e28;--sf-bg4:#222636;
  --sf-border:#2a2f3f;--sf-border2:#3a4055;
  --sf-text:#e8eaf0;--sf-text2:#9aa0b8;--sf-text3:#5c6280;
  --sf-accent:#7c6ff7;--sf-accent2:#a89cf7;--sf-accent3:#3d3680;
  --sf-teal:#2dd4bf;--sf-teal2:#0d9488;
  --sf-amber:#fbbf24;--sf-amber2:#d97706;
  --sf-red:#f87171;--sf-red2:#dc2626;
  --sf-green:#4ade80;--sf-green2:#16a34a;
  --sf-pink:#f472b6;
  --sf-card-r:14px;--sf-r:8px;
  font-family:'DM Sans',sans-serif;
  background:var(--sf-bg);
  color:var(--sf-text);
  min-height:600px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
}

/* LAYOUT */
.sf-wrap{display:flex;width:100%;min-height:600px}

/* SIDEBAR */
.sf-sidebar{width:220px;background:var(--sf-bg2);border-right:1px solid var(--sf-border);display:flex;flex-direction:column;flex-shrink:0}
.sf-logo{padding:20px 20px 16px;border-bottom:1px solid var(--sf-border);display:flex;align-items:center;gap:10px}
.sf-logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--sf-accent),var(--sf-pink));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.sf-logo-text{font-family:'DM Serif Display',serif;font-size:18px;color:var(--sf-text);letter-spacing:-0.3px}
.sf-logo-text span{color:var(--sf-accent2)}
.sf-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.sf-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--sf-r);cursor:pointer;font-size:13.5px;color:var(--sf-text2);transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.sf-nav-item:hover{background:var(--sf-bg3);color:var(--sf-text)}
.sf-nav-item.sf-active{background:var(--sf-accent3);color:var(--sf-accent2);font-weight:500}
.sf-nav-item i{font-size:16px;width:18px;text-align:center}
.sf-nav-section{font-size:10.5px;color:var(--sf-text3);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:.8px}
.sf-sidebar-bottom{padding:12px 10px;border-top:1px solid var(--sf-border)}
.sf-user-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--sf-r);cursor:pointer}
.sf-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--sf-accent),var(--sf-pink));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;color:#fff}
.sf-user-info{flex:1;min-width:0}
.sf-user-name{font-size:12px;font-weight:500;color:var(--sf-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-user-plan{font-size:11px;color:var(--sf-accent2)}

/* MAIN */
.sf-main{flex:1;overflow-x:hidden;min-width:0;display:flex;flex-direction:column}
.sf-topbar{background:var(--sf-bg2);border-bottom:1px solid var(--sf-border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.sf-topbar-left{display:flex;align-items:center;gap:12px;flex:1}
.sf-page-title{font-size:15px;font-weight:500;color:var(--sf-text)}
.sf-search-box{display:flex;align-items:center;gap:8px;background:var(--sf-bg3);border:1px solid var(--sf-border);border-radius:var(--sf-r);padding:6px 12px;font-size:13px;color:var(--sf-text2);cursor:pointer}
.sf-topbar-right{display:flex;align-items:center;gap:8px}
.sf-icon-btn{width:36px;height:36px;border-radius:var(--sf-r);background:none;border:1px solid var(--sf-border);color:var(--sf-text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sf-icon-btn:hover{background:var(--sf-bg3);color:var(--sf-text)}
.sf-badge{background:var(--sf-red);color:#fff;font-size:9px;font-weight:600;border-radius:99px;padding:1px 5px;margin-left:-8px;margin-top:-8px;line-height:1.4}
.sf-btn-primary{background:var(--sf-accent);color:#fff;border:none;border-radius:var(--sf-r);padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .15s;font-family:inherit}
.sf-btn-primary:hover{opacity:.88}
.sf-btn-ghost{background:none;border:1px solid var(--sf-border2);color:var(--sf-text2);border-radius:var(--sf-r);padding:7px 14px;font-size:13px;cursor:pointer;transition:all .15s;font-family:inherit}
.sf-btn-ghost:hover{background:var(--sf-bg3);color:var(--sf-text)}

/* PAGES */
.sf-page{display:none;padding:20px 24px;flex:1;overflow-y:auto;animation:sfFadeUp .2s ease}
.sf-page.sf-active{display:block}
@keyframes sfFadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* STATS */
.sf-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sf-stat-card{background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-card-r);padding:14px 16px}
.sf-stat-label{font-size:11px;color:var(--sf-text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sf-stat-value{font-size:24px;font-family:'DM Serif Display',serif;color:var(--sf-text);line-height:1;margin-bottom:4px}
.sf-stat-change{font-size:11.5px;display:flex;align-items:center;gap:4px}
.sf-stat-change.sf-up{color:var(--sf-green)}
.sf-stat-change.sf-down{color:var(--sf-red)}
.sf-stat-change.sf-neutral{color:var(--sf-text3)}

/* SECTION */
.sf-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sf-section-title{font-size:14.5px;font-weight:500;color:var(--sf-text)}
.sf-section-sub{font-size:12px;color:var(--sf-text3);margin-top:2px}
.sf-link-btn{background:none;border:none;color:var(--sf-accent2);font-size:12px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px}
.sf-panel{background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-card-r);padding:16px}

/* LAYOUT GRIDS */
.sf-two-col{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-bottom:20px}
.sf-three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}

/* COURSES */
.sf-course-list{display:flex;flex-direction:column;gap:8px}
.sf-course-card{background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-card-r);padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s}
.sf-course-card:hover{border-color:var(--sf-border2);background:var(--sf-bg3)}
.sf-course-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sf-course-info{flex:1;min-width:0}
.sf-course-name{font-size:13.5px;font-weight:500;color:var(--sf-text);margin-bottom:2px}
.sf-course-meta{font-size:11.5px;color:var(--sf-text3)}
.sf-course-progress-wrap{flex:0 0 90px}
.sf-progress-bar{height:5px;background:var(--sf-bg4);border-radius:99px;overflow:hidden;margin-bottom:3px}
.sf-progress-fill{height:100%;border-radius:99px;transition:width .3s ease}
.sf-progress-label{font-size:10.5px;color:var(--sf-text3);text-align:right}

/* EXAMS */
.sf-exam-list{display:flex;flex-direction:column;gap:8px}
.sf-exam-item{background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-r);padding:12px 14px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .15s}
.sf-exam-item:hover{border-color:var(--sf-border2)}
.sf-exam-date-box{flex:0 0 42px;text-align:center;background:var(--sf-bg4);border-radius:var(--sf-r);padding:6px 4px}
.sf-exam-day{font-size:17px;font-weight:600;color:var(--sf-text);line-height:1}
.sf-exam-mon{font-size:10px;color:var(--sf-text3);text-transform:uppercase;letter-spacing:.5px}
.sf-exam-info{flex:1}
.sf-exam-name{font-size:13px;font-weight:500;color:var(--sf-text);margin-bottom:3px}
.sf-exam-detail{font-size:11.5px;color:var(--sf-text3)}
.sf-exam-badge{font-size:11px;padding:2px 8px;border-radius:99px;flex-shrink:0;align-self:center}
.sf-badge-urgent{background:rgba(248,113,113,.12);color:var(--sf-red);border:1px solid rgba(248,113,113,.25)}
.sf-badge-soon{background:rgba(251,191,36,.12);color:var(--sf-amber);border:1px solid rgba(251,191,36,.25)}
.sf-badge-ok{background:rgba(74,222,128,.1);color:var(--sf-green);border:1px solid rgba(74,222,128,.2)}

/* SCHEDULE */
.sf-schedule-list{display:flex;flex-direction:column;gap:6px}
.sf-schedule-item{display:flex;align-items:stretch;gap:12px;padding:10px 14px;border-radius:var(--sf-r);background:var(--sf-bg2);border:1px solid var(--sf-border);cursor:pointer;transition:all .15s}
.sf-schedule-item:hover{border-color:var(--sf-border2);background:var(--sf-bg3)}
.sf-schedule-item.sf-done{opacity:.55}
.sf-time-col{flex:0 0 52px;font-size:11.5px;color:var(--sf-text3);padding-top:1px}
.sf-schedule-body{flex:1}
.sf-schedule-name{font-size:13px;font-weight:500;color:var(--sf-text);margin-bottom:2px}
.sf-schedule-sub{font-size:11.5px;color:var(--sf-text3)}
.sf-check-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--sf-border2);background:none;cursor:pointer;flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sf-check-btn:hover{border-color:var(--sf-green);color:var(--sf-green)}
.sf-check-btn.sf-checked{background:var(--sf-green2);border-color:var(--sf-green2);color:#fff}
.sf-check-btn i{font-size:12px}

/* RING */
.sf-ring-wrap{display:flex;flex-direction:column;align-items:center;padding:12px}
.sf-ring-svg{transform:rotate(-90deg)}
.sf-ring-track{fill:none;stroke:var(--sf-bg4)}
.sf-ring-fill{fill:none;stroke:var(--sf-accent);stroke-linecap:round}
.sf-ring-text{font-size:22px;font-family:'DM Serif Display',serif;fill:var(--sf-text);text-anchor:middle;dominant-baseline:middle}
.sf-ring-sub{font-size:11px;fill:var(--sf-text3);text-anchor:middle;dominant-baseline:middle}

/* WEEK BARS */
.sf-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.sf-bar{width:100%;border-radius:4px 4px 0 0;background:var(--sf-accent3);cursor:pointer;position:relative}
.sf-bar:hover{background:var(--sf-accent)}

/* TABS */
.sf-tabs{display:flex;gap:2px;background:var(--sf-bg3);border-radius:var(--sf-r);padding:3px;margin-bottom:16px;width:fit-content}
.sf-tab{padding:6px 12px;border-radius:6px;font-size:12.5px;cursor:pointer;background:none;border:none;color:var(--sf-text3);font-family:inherit;transition:all .15s}
.sf-tab.sf-active{background:var(--sf-bg2);color:var(--sf-text);font-weight:500}

/* PERF BARS */
.sf-perf-bars{display:flex;flex-direction:column;gap:10px}
.sf-perf-row{display:flex;align-items:center;gap:10px}
.sf-perf-label{font-size:12px;color:var(--sf-text2);width:105px;flex-shrink:0}
.sf-perf-track{flex:1;height:7px;background:var(--sf-bg4);border-radius:99px;overflow:hidden}
.sf-perf-fill{height:100%;border-radius:99px;transition:width .6s ease}
.sf-perf-pct{font-size:12px;color:var(--sf-text3);width:34px;text-align:right}

/* STREAK */
.sf-streak-week{display:flex;flex-direction:column;gap:4px}
.sf-streak-day{height:18px;border-radius:3px;background:var(--sf-bg4)}
.sf-streak-day.sf-s1{background:var(--sf-accent3);opacity:.5}
.sf-streak-day.sf-s2{background:var(--sf-accent3);opacity:.8}
.sf-streak-day.sf-s3{background:var(--sf-accent)}

/* NOTIFS */
.sf-notif-list{display:flex;flex-direction:column;gap:6px}
.sf-notif-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-r);cursor:pointer;transition:all .15s}
.sf-notif-item:hover{border-color:var(--sf-border2)}
.sf-notif-item.sf-unread{border-left:3px solid var(--sf-accent)}
.sf-notif-icon{width:32px;height:32px;border-radius:var(--sf-r);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.sf-notif-body{flex:1}
.sf-notif-title{font-size:13px;font-weight:500;color:var(--sf-text);margin-bottom:2px}
.sf-notif-desc{font-size:11.5px;color:var(--sf-text3)}
.sf-notif-time{font-size:11px;color:var(--sf-text3);white-space:nowrap}

/* PLANS */
.sf-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.sf-plan-card{background:var(--sf-bg2);border:1px solid var(--sf-border);border-radius:var(--sf-card-r);padding:18px;position:relative}
.sf-plan-card.sf-featured{border-color:var(--sf-accent);background:rgba(124,111,247,.05)}
.sf-plan-name{font-size:12px;font-weight:500;color:var(--sf-text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sf-plan-price{font-size:28px;font-family:'DM Serif Display',serif;color:var(--sf-text);line-height:1;margin-bottom:4px}
.sf-plan-price span{font-size:12px;color:var(--sf-text3);font-family:'DM Sans',sans-serif}
.sf-plan-desc{font-size:12px;color:var(--sf-text3);margin-bottom:14px}
.sf-plan-features{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:16px;padding:0}
.sf-plan-features li{font-size:12px;color:var(--sf-text2);display:flex;align-items:center;gap:7px}
.sf-plan-features li i{font-size:13px;color:var(--sf-green)}
.sf-plan-features li.sf-no i{color:var(--sf-text3)}
.sf-plan-features li.sf-no{color:var(--sf-text3)}
.sf-popular-badge{position:absolute;top:-1px;right:14px;background:var(--sf-accent);color:#fff;font-size:10px;padding:3px 10px;border-radius:0 0 8px 8px;font-weight:500}

/* MODAL */
.sf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:999999;backdrop-filter:blur(2px)}
.sf-modal-overlay.sf-open{display:flex}
.sf-modal{background:var(--sf-bg2);border:1px solid var(--sf-border2);border-radius:16px;width:440px;max-width:95vw;padding:22px;animation:sfFadeUp .2s ease}
.sf-modal-title{font-family:'DM Serif Display',serif;font-size:19px;color:var(--sf-text);margin-bottom:3px}
.sf-modal-sub{font-size:12.5px;color:var(--sf-text3);margin-bottom:18px}
.sf-form-group{margin-bottom:12px}
.sf-form-label{font-size:12px;color:var(--sf-text2);margin-bottom:4px;display:block}
.sf-form-input{width:100%;background:var(--sf-bg3);border:1px solid var(--sf-border);border-radius:var(--sf-r);padding:8px 11px;font-size:13px;color:var(--sf-text);font-family:inherit;outline:none;transition:border .15s}
.sf-form-input:focus{border-color:var(--sf-accent)}
.sf-form-input::placeholder{color:var(--sf-text3)}
.sf-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sf-color-picker{display:flex;gap:8px;flex-wrap:wrap}
.sf-color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .1s}
.sf-color-swatch.sf-sel{border-color:var(--sf-text2);transform:scale(1.15)}
.sf-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
select.sf-form-input option{background:#13161e}

/* Responsive */
@media(max-width:900px){
  .sf-stats-grid{grid-template-columns:repeat(2,1fr)}
  .sf-two-col{grid-template-columns:1fr}
  .sf-three-col{grid-template-columns:1fr 1fr}
  .sf-plan-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .sf-sidebar{display:none}
  .sf-stats-grid{grid-template-columns:1fr 1fr}
  .sf-three-col{grid-template-columns:1fr}
}