@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Cinzel:wght@600;700&family=Great+Vibes&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --navy:#0f1e35;
  --navy2:#1a2f4a;
  --yellow:#F5C518;
  --yellow3:#E0B000;
  --bone:#F5F5F7; /* Apple style gray background */
  --bone2:#E5E5EA;
  --white:#FFFFFF;
  --white-glass: rgba(255, 255, 255, 0.75);
  --ink:#1D1D1F; /* Apple dark text */
  --ink2:#424245;
  --ink3:#86868B;
  --border:#E5E5EA; /* Lighter, subtle border */
  --border2:#D1D1D6;
  --r:12px;
  --r2:16px;
  --r3:20px;
  --gn:#34C759; /* Apple Green */
  --gn-bg:#E8F5E9;
  --gn-br:#A5D6A7;
  --rd:#FF3B30; /* Apple Red */
  --rd-bg:#FFEBEE;
  --rd-br:#FFCDD2;
  --am:#FF9500; /* Apple Orange/Amber */
  --am-bg:#FFF3E0;
  --am-br:#FFE0B2;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --blur: blur(20px);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bone);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════
   SHARED COMPONENTS
════════════════════════════════════════ */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.spinner-dark{border-color:rgba(27,46,94,.15);border-top-color:var(--navy);width:28px;height:28px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:14px;color:var(--ink3)}
.loading-txt{font-size:14px;font-weight:500;letter-spacing:-0.01em;}

/* Apple style badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:-0.01em}
.b-paid{background:var(--gn-bg);color:var(--gn);}
.b-partial{background:var(--am-bg);color:var(--am);}
.b-none{background:var(--rd-bg);color:var(--rd);}
.b-unk{background:var(--bone2);color:var(--ink2);}
.b-del{background:var(--navy);color:var(--white);}
.b-nodel{background:var(--bone2);color:var(--ink3);}
.b-ambl{background:var(--yellow);color:var(--navy);}
.b-retired{background:#F2F2F7;color:#86868B;}

.hpos{color:var(--gn);font-weight:600}
.hneg{color:var(--rd);font-weight:600}

/* Cards & Containers */
.hist-box{margin-top:10px;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.hist-hdr{font-size:11px;font-weight:600;color:var(--ink3);padding:10px 14px;background:var(--bone);border-bottom:1px solid var(--border)}
.hist-list{max-height:140px;overflow-y:auto}
.hist-row{font-size:13px;color:var(--ink2);display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}
.hist-row:last-child{border-bottom:none}

.seed-banner{background:var(--white);border-radius:var(--r2);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;flex-wrap:wrap;box-shadow:var(--shadow-sm);margin-bottom:16px;border:1px solid var(--border)}
.seed-banner button{background:var(--navy);color:#fff;border:none;border-radius:var(--r);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform 0.15s, opacity 0.15s;}
.seed-banner button:active{transform:scale(0.96);opacity:0.9;}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink3)}

/* Progress Bars */
.bar-track{height:6px;background:var(--bone2);border-radius:4px;overflow:hidden;flex:1}
.bar-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(0.25, 1, 0.5, 1)}
.bar-navy{background:var(--navy)}
.bar-yellow{background:var(--yellow)}

.rep-bar-t{height:5px;background:var(--bone2);border-radius:3px;overflow:hidden}
.rep-bar-f{height:100%;border-radius:3px;transition:width .6s cubic-bezier(0.25, 1, 0.5, 1)}

.area-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;flex-shrink:0}
.pill-c{background:var(--navy);color:var(--white)}
.pill-l{background:var(--yellow);color:var(--navy)}

/* Interactive Toggles */
.toggle-yes{background:var(--gn);color:var(--white);border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.toggle-no{background:var(--bone2);color:var(--ink2);border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.toggle-yes:active, .toggle-no:active{transform:scale(0.96)}

.pay-opt-base{border:1px solid var(--border);border-radius:var(--r);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:10px;transition:all .2s ease;font-weight:500;background:var(--white);font-family:inherit;box-shadow:var(--shadow-sm)}
.pay-opt-base.sel{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.pay-opt-base:hover:not(.sel){border-color:var(--border2);background:var(--bone)}
.pay-opt-base:active{transform:scale(0.98)}
.pdot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.danger-zone{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--r2);background:var(--rd-bg)}
.reactivate-zone{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--r2);background:var(--gn-bg)}

/* Apple style buttons */
.btn-primary{background:var(--navy);color:#fff;border:none;border-radius:var(--r);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;letter-spacing:-0.01em}
.btn-primary:hover{opacity:.9;box-shadow:0 4px 12px rgba(27,46,94,.2)}
.btn-primary:active{transform:scale(0.96)}
.btn-primary:disabled,.btn-yellow:disabled,.btn-outline:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-yellow{background:var(--yellow);color:var(--navy);border:none;border-radius:var(--r);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;letter-spacing:-0.01em}
.btn-yellow:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(245,197,24,.3)}
.btn-yellow:active{transform:scale(0.96)}

.btn-outline{background:var(--white);color:var(--ink);border:1px solid var(--border2);border-radius:var(--r);padding:9px 18px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.2s}
.btn-outline:hover{background:var(--bone);border-color:var(--ink3)}
.btn-outline:active{transform:scale(0.96)}

.btn-sm{padding:6px 14px;font-size:13px}
.btn-danger-sm{background:var(--rd);color:var(--white);border:none;border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s}
.btn-danger-sm:active{transform:scale(0.96)}

/* Toast */
.toast{position:fixed;z-index:999;padding:12px 20px;border-radius:var(--r2);font-size:14px;font-weight:600;opacity:0;transition:all .3s cubic-bezier(0.25, 1, 0.5, 1);pointer-events:none;box-shadow:var(--shadow-lg);backdrop-filter:var(--blur);transform:translateY(-10px)}
.toast.show{opacity:1;transform:translateY(0)}
.toast-ok{background:rgba(27,46,94,0.9);color:#fff}
.toast-err{background:rgba(255,59,48,0.9);color:#fff}

/* ════════════════════════════════════════
   DESKTOP LAYOUT
════════════════════════════════════════ */
.desk{display:none; height:100vh; overflow:hidden; flex-direction:row;}
.desk .sidebar {width:240px; background:var(--navy); display:flex; flex-direction:column; flex-shrink:0; height:100vh; overflow-y:auto; color:var(--white);}
.desk .sidebar::-webkit-scrollbar{display:none;}
.desk .logo{padding:28px 20px 24px; display:flex; flex-direction:column; gap:6px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:16px;}
.desk .logo-svg{height:70px; width:auto; display:block;}
.desk .logo-sub{font-size:11px; color:rgba(255,255,255,0.5); font-style:italic; font-family:'Playfair Display', serif; text-align:center;}
.desk .nav-section-title{font-size:10px; font-weight:700; color:rgba(255,255,255,0.35); padding:0 20px 8px; letter-spacing:1.2px;}
.desk .nav-links{display:flex; flex-direction:column; gap:2px; padding:0 8px;}
.desk .nav-btn{padding:10px 14px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.6); background:none; border:none; cursor:pointer; text-align:left; transition:all .18s; font-family:inherit; display:flex; align-items:center; gap:12px; border-radius:10px; width:100%;}
.desk .nav-btn:hover{color:var(--white); background:rgba(255,255,255,0.08);}
.desk .nav-btn.active{color:var(--yellow); background:rgba(255,255,255,0.1);}

.desk .main-content{flex:1; display:flex; flex-direction:column; background:var(--bone); min-width:0; overflow:hidden;}
.desk .top-header{height:68px; background:var(--white); border-bottom:1px solid rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:space-between; padding:0 32px; flex-shrink:0;}
.desk .header-title{font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-0.02em;}
.desk .header-right{display:flex; align-items:center; gap:12px;}
.desk .page-scroll{flex:1; overflow-y:auto; overflow-x:hidden;}
.desk .page{padding:32px; max-width:1200px; width:100%; margin:0 auto;}

.desk .saved-pill{font-size:12px; padding:4px 12px; border-radius:20px; background:var(--gn-bg); color:var(--gn); opacity:0; transition:opacity .4s; font-weight:600;}
.desk .saved-pill.show{opacity:1;}
.desk .sync-btn{font-size:13px; padding:6px 16px; border-radius:20px; background:var(--white); color:var(--ink2); border:1px solid rgba(0,0,0,0.1); cursor:pointer; font-family:inherit; font-weight:600; transition:all 0.2s;}
.desk .sync-btn:hover{background:var(--bg2); color:var(--ink);}

/* Dashboard grid */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-bottom:24px;}
.dash-card{background:var(--white); border-radius:var(--r3); padding:24px; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.04); display:flex; flex-direction:column;}
.dash-card-header{display:flex; align-items:center; gap:8px; font-size:10px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;}
.dash-card-val{font-size:42px; font-weight:800; color:var(--ink); letter-spacing:-0.03em; line-height:1;}
.dash-card-sub{font-size:12px; color:var(--ink3); margin-top:8px; font-weight:500;}
.dash-alert-card{background:var(--navy); color:var(--white); border-radius:var(--r3); padding:20px; box-shadow:var(--shadow-sm); grid-row:span 2;}
.dash-alert-item{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
.dash-alert-item:last-child{border-bottom:none; padding-bottom:0;}
.badge-agotado{background:rgba(225,175,17,0.2); color:var(--yellow); font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid rgba(225,175,17,0.3);}
.badge-bajo{background:rgba(255,255,255,0.1); color:var(--white); font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid rgba(255,255,255,0.2);}
.badge-deuda{background:var(--rd-bg); color:var(--rd); font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid rgba(240,68,56,0.3);}
.dash-chart-card{background:var(--white); border-radius:var(--r3); padding:24px; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.04); grid-column:1 / -1;}
.dash-deudas-card{border:2px solid var(--rd-bg); background:var(--white); border-radius:var(--r3); padding:24px; display:flex; flex-direction:column;}

/* Stats */
.desk .stats-row{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.desk .stat-card{background:var(--white);border-radius:var(--r3);padding:16px 20px;flex:1;min-width:120px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02);display:flex;flex-direction:column;gap:4px}
.desk .stat-val{font-size:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.desk .stat-lbl{font-size:12px;color:var(--ink3);font-weight:500}
.stat-navy{background:var(--navy) !important;color:var(--white) !important;border-color:var(--navy) !important;}
.stat-navy .stat-val{color:var(--yellow) !important;}
.stat-navy .stat-lbl{color:rgba(255,255,255,0.7) !important;}

/* Tabs */
.desk .level-tabs{display:flex;gap:12px;margin-bottom:24px;align-items:center;flex-wrap:wrap}
.desk .ltab{padding:8px 20px;border-radius:24px;font-size:14px;font-weight:600;border:none;cursor:pointer;background:var(--border);color:var(--ink2);transition:all .2s ease;font-family:inherit;letter-spacing:-0.01em}
.desk .ltab:hover{background:var(--border2)}
.desk .ltab.active{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(27,46,94,.2)}

/* Grid */
.desk .inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.desk .grade-card{background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,0.03);transition:transform .2s ease, box-shadow .2s ease}
.desk .grade-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.desk .gc-head{padding:16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--bone)}
.desk .g-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;background:var(--navy);color:var(--white)}
.desk .g-badge img{width:100%;height:100%;object-fit:cover}
.desk .g-badge-ov{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:12px;color:#fff}
.desk .g-badge:hover .g-badge-ov{opacity:1}

.desk .gc-acts{display:flex;gap:6px;margin-left:auto}
.desk .ic-btn{background:var(--bone);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.2s}
.desk .ic-btn:hover{background:var(--border);transform:scale(1.05)}

.desk .cover-strip{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bone);background:var(--white)}
.desk .cover-ph{width:50px;height:68px;border-radius:8px;border:1px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bone);flex-direction:column;gap:4px;transition:all .2s}
.desk .cover-ph:hover{border-color:var(--navy);background:var(--bone2)}
.desk .cover-img{width:50px;height:68px;border-radius:8px;object-fit:cover;border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow-sm)}
.desk .cover-area-lbl{font-size:10px;color:var(--ink3);text-align:center;margin-top:4px;font-weight:600}

.desk .gc-body{padding:16px;display:flex;flex-direction:column;gap:14px}
.desk .area-block{display:flex;flex-direction:column;gap:6px}
.desk .area-top{display:flex;align-items:center;gap:10px}
.desk .area-count{font-size:18px;font-weight:700;min-width:30px;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.desk .plus-btn{background:var(--bone);border:none;border-radius:50%;width:28px;height:28px;font-size:16px;cursor:pointer;color:var(--ink2);display:flex;align-items:center;justify-content:center;font-weight:600;transition:all .2s}
.desk .plus-btn:hover{background:var(--navy);color:var(--white);transform:scale(1.1)}

.desk .stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.desk .stu-card{background:var(--white);border-radius:var(--r2);padding:16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.desk .stu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.desk .stu-card.retired-card{opacity:.6;background:var(--bone)}

.desk .stu-top{display:flex;align-items:center;gap:12px}
.desk .avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;letter-spacing:-0.01em}
.desk .av-p{background:var(--navy);color:var(--white)}
.desk .av-s{background:var(--yellow);color:var(--navy)}

.desk .stu-name{font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.desk .stu-grade{font-size:12px;color:var(--ink3);margin-top:2px}
.desk .stu-badges{display:flex;gap:6px;flex-wrap:wrap}

.desk .grade-sec{margin-bottom:32px}
.desk .grade-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--navy);border-radius:var(--r2);margin-bottom:16px;box-shadow:var(--shadow-sm)}
.desk .grade-sec-title{font-size:15px;font-weight:700;color:var(--white);letter-spacing:0}
.desk .grade-sec-count{font-size:12px;color:rgba(255,255,255,0.7);font-weight:500}

.desk .toolbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.desk .search-inp{flex:1;min-width:240px;padding:12px 16px;border:none;border-radius:var(--r2);font-size:14px;background:var(--white);color:var(--ink);font-family:inherit;box-shadow:var(--shadow-sm);transition:box-shadow 0.2s}
.desk .search-inp:focus{outline:none;box-shadow:0 0 0 2px var(--navy), var(--shadow-sm)}
.desk .search-inp::placeholder{color:var(--ink3)}

/* Desktop profile panel (side drawer) */
.desk .prof-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);backdrop-filter:blur(4px);z-index:100;transition:opacity 0.3s}
.desk .prof-panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100vw;background:var(--bone);z-index:101;overflow-y:auto;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,0.1)}
.desk .pp-head{padding:24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;background:var(--white-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:2;border-bottom:1px solid rgba(0,0,0,0.05)}
.desk .pp-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.desk .pp-name{font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-0.02em}
.desk .pp-sub{font-size:13px;color:var(--ink3);margin-top:4px;font-weight:500}
.desk .pp-close{background:var(--bone);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink2);flex-shrink:0;margin-left:auto;transition:all 0.2s}
.desk .pp-close:hover{background:var(--border);transform:scale(1.05)}

.desk .pp-body{padding:24px;flex:1;display:flex;flex-direction:column;gap:24px}
.desk .pp-section{display:flex;flex-direction:column;gap:12px;background:var(--white);padding:20px;border-radius:var(--r3);box-shadow:var(--shadow-sm)}
.desk .pp-section-title{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.desk .field-row{display:flex;align-items:center;gap:12px;min-height:36px}
.desk .field-label{font-size:13px;color:var(--ink3);min-width:80px;flex-shrink:0;font-weight:500}
.desk .field-val{font-size:14px;font-weight:600;flex:1;color:var(--ink)}
.desk .edit-btn{background:var(--bone);border:none;cursor:pointer;color:var(--ink2);font-size:12px;padding:6px 12px;border-radius:16px;font-weight:600;transition:all 0.2s}
.desk .edit-btn:hover{background:var(--border);color:var(--ink)}
.desk .field-inp{flex:1;padding:8px 12px;border:none;border-radius:8px;font-size:14px;background:var(--bone);color:var(--ink);font-family:inherit}
.desk .field-inp:focus{outline:none;box-shadow:0 0 0 2px var(--navy)}
.desk .save-btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:600}
.desk .cancel-btn{background:var(--bone);border:none;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--ink2);font-weight:600}

.desk .pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.desk .del-row{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:var(--r2);background:var(--bone);margin-bottom:8px;border:1px solid var(--border)}
.desk .del-title{font-size:14px;font-weight:600;color:var(--ink)}
.desk .del-sub{font-size:12px;color:var(--ink3);margin-top:2px}

.desk .rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.desk .rep-card{background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,0.03)}
.desk .rep-head{padding:16px 20px;border-bottom:1px solid var(--bone);display:flex;align-items:center;justify-content:space-between;background:var(--white)}
.desk .rep-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.desk .rep-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.desk .rep-row{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.desk .rep-lbl{color:var(--ink2);font-weight:500}
.desk .rep-val{font-weight:700;font-variant-numeric:tabular-nums}

/* Desktop modals */
.desk .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.2);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;transition:opacity 0.3s}
.desk .modal{background:var(--white);border-radius:24px;padding:32px;width:420px;max-width:94vw;box-shadow:var(--shadow-lg);border:1px solid rgba(0,0,0,0.05)}
.desk .modal-title{font-size:20px;font-weight:700;color:var(--ink);padding-bottom:16px;margin-bottom:20px;letter-spacing:-0.02em}
.desk .modal-sub{font-size:14px;color:var(--ink3);margin-bottom:20px;margin-top:-8px;line-height:1.4}
.desk .mrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.desk .mlbl{font-size:14px;color:var(--ink2);min-width:90px;flex-shrink:0;font-weight:500}
.desk .minp{flex:1;padding:10px 14px;border:none;border-radius:var(--r);font-size:14px;background:var(--bone);color:var(--ink);font-family:inherit;transition:box-shadow 0.2s}
.desk .minp:focus{outline:none;box-shadow:0 0 0 2px var(--navy)}
.desk .minp-n{flex:none;width:100px}
.desk .modal-btns{display:flex;gap:12px;justify-content:flex-end;margin-top:28px}
.desk .toast{top:20px;right:20px}

/* ════════════════════════════════════════
   MOBILE LAYOUT
════════════════════════════════════════ */
.mobi{display:none}
:root{--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--nav-h:72px;--top-h:60px}

.mobi .topbar{background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:calc(var(--top-h) + var(--safe-top));padding-top:var(--safe-top);position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:none;color:var(--white)}
.mobi .logo{display:flex;align-items:center;gap:0}
.mobi .logo-svg{height:30px;width:auto;display:block}
.mobi .logo-sub{font-size:11px;color:rgba(255,255,255,0.7);font-weight:500}
.mobi .top-actions{display:flex;align-items:center;gap:10px}
.mobi .sync-btn{width:36px;height:36px;background:rgba(255,255,255,0.1);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--white);transition:all 0.2s}
.mobi .view-toggle{width:36px;height:36px;background:rgba(255,255,255,0.1);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--white);transition:all 0.2s}
.mobi .sync-btn:active, .mobi .view-toggle:active{transform:scale(0.9)}

.mobi .saved-dot{width:10px;height:10px;border-radius:50%;background:var(--gn);opacity:0;transition:opacity .4s}
.mobi .saved-dot.show{opacity:1}
.mobi .page-wrap{position:fixed;top:calc(var(--top-h) + var(--safe-top));left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobi .page{padding:16px 16px 24px}
.mobi .bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + var(--safe-bottom));background:var(--white-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid rgba(0,0,0,0.05);display:flex;align-items:flex-start;padding-top:10px;z-index:50;padding-bottom:var(--safe-bottom)}
.mobi .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 0;border:none;background:none;font-family:inherit;color:var(--ink3);transition:color .2s}
.mobi .nav-item.active{color:var(--navy)}
.mobi .nav-item.active .nav-icon{color:var(--navy)}
.mobi .nav-item.active .nav-icon svg{stroke:var(--navy);fill:rgba(27,46,94,0.1)}
.mobi .nav-icon{width:48px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--ink3)}
.mobi .nav-label{font-size:11px;font-weight:600;letter-spacing:0}
.mobi .fab{position:fixed;right:20px;bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px);width:56px;height:56px;background:var(--yellow);border-radius:28px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--navy);box-shadow:0 8px 24px rgba(245,197,24,.3);z-index:40;font-weight:500;line-height:1;transition:transform 0.2s}
.mobi .fab:active{transform:scale(0.92)}

.mobi .stats-scroll{display:flex;gap:12px;overflow-x:auto;margin-bottom:20px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mobi .stats-scroll::-webkit-scrollbar{display:none}
.mobi .stat-card{background:var(--white);border-radius:var(--r3);padding:14px 16px;flex-shrink:0;min-width:110px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.mobi .stat-val{font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.mobi .stat-lbl{font-size:11px;color:var(--ink3);margin-top:2px;font-weight:500}

.mobi .level-tabs{display:flex;gap:10px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.mobi .level-tabs::-webkit-scrollbar{display:none}
.mobi .ltab{padding:10px 20px;border-radius:24px;font-size:14px;font-weight:600;border:none;cursor:pointer;background:var(--border);color:var(--ink2);white-space:nowrap;flex-shrink:0;font-family:inherit;transition:all 0.2s}
.mobi .ltab.active{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(27,46,94,.2)}

.mobi .inv-grid{display:flex;flex-direction:column;gap:16px}
.mobi .grade-card{background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.mobi .gc-head{padding:16px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--bone)}
.mobi .g-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;background:var(--navy);color:var(--white)}
.mobi .gc-acts{display:flex;gap:8px;margin-left:auto}
.mobi .ic-btn{background:var(--bone);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.2s}
.mobi .ic-btn:active{transform:scale(0.9)}

.mobi .cover-strip{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bone);background:var(--white)}
.mobi .cover-ph{width:54px;height:72px;border-radius:10px;border:1px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bone);flex-direction:column;gap:4px}
.mobi .cover-img{width:54px;height:72px;border-radius:10px;object-fit:cover;border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow-sm)}

.mobi .gc-body{padding:16px;display:flex;flex-direction:column;gap:16px}
.mobi .area-block{display:flex;flex-direction:column;gap:8px}
.mobi .area-top{display:flex;align-items:center;gap:10px}
.mobi .area-count{font-size:20px;font-weight:700;min-width:30px;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.mobi .plus-btn{background:var(--bone);border:none;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:400;flex-shrink:0;transition:all 0.2s}
.mobi .plus-btn:active{background:var(--border2);transform:scale(0.9)}

.mobi .stu-list{display:flex;flex-direction:column;gap:12px}
.mobi .stu-card{background:var(--white);border-radius:var(--r2);padding:16px;cursor:pointer;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02);transition:all 0.2s}
.mobi .stu-card:active{transform:scale(0.98)}
.mobi .stu-card.retired-card{opacity:.6;background:var(--bone)}

.mobi .avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.mobi .av-p{background:var(--navy);color:var(--white)}
.mobi .av-s{background:var(--yellow);color:var(--navy)}
.mobi .stu-info{flex:1;min-width:0}
.mobi .stu-name{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.mobi .stu-grade{font-size:12px;color:var(--ink3);margin-top:2px}
.mobi .stu-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mobi .stu-chevron{color:var(--ink3);font-size:20px;flex-shrink:0;font-weight:300}

.mobi .grade-sec{margin-bottom:24px}
.mobi .grade-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--navy);border-radius:var(--r2);margin-bottom:12px;box-shadow:var(--shadow-sm)}
.mobi .grade-sec-title{font-size:15px;font-weight:700;color:var(--white);letter-spacing:0}
.mobi .grade-sec-count{font-size:12px;color:rgba(255,255,255,0.7);font-weight:500}

.mobi .search-bar{display:flex;gap:10px;margin-bottom:16px;align-items:center}
.mobi .search-inp{flex:1;padding:12px 16px;border:none;border-radius:var(--r2);font-size:16px;background:var(--white);color:var(--ink);font-family:inherit;-webkit-appearance:none;box-shadow:var(--shadow-sm)}
.mobi .search-inp:focus{outline:none;box-shadow:0 0 0 2px var(--navy), var(--shadow-sm)}
.mobi .search-inp::placeholder{color:var(--ink3)}

.mobi .filter-row{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.mobi .filter-chip{padding:8px 16px;border-radius:24px;font-size:13px;font-weight:600;border:none;cursor:pointer;background:var(--white);color:var(--ink2);white-space:nowrap;font-family:inherit;flex-shrink:0;transition:all .2s;box-shadow:var(--shadow-sm)}
.mobi .filter-chip:active{transform:scale(0.96)}
.mobi .filter-chip.active{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(27,46,94,.2)}

.mobi .rep-list{display:flex;flex-direction:column;gap:16px}
.mobi .rep-card{background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.mobi .rep-head{padding:16px;border-bottom:1px solid var(--bone);display:flex;align-items:center;justify-content:space-between;background:var(--white)}
.mobi .rep-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.mobi .rep-body{padding:16px;display:flex;flex-direction:column;gap:12px}

/* Mobile sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.sheet-bg.open{opacity:1;pointer-events:all}
.sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bone);border-radius:24px 24px 0 0;z-index:201;transform:translateY(100%);transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1);max-height:92vh;overflow-y:auto;padding-bottom:var(--safe-bottom);box-shadow:0 -10px 40px rgba(0,0,0,0.1)}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:40px;height:5px;background:var(--border2);border-radius:3px;margin:12px auto 0}
.sheet-title{font-size:20px;font-weight:700;color:var(--ink);padding:16px 24px 0;margin:0 0 20px;letter-spacing:-0.02em}
.sheet-body{padding:0 24px 24px}
.srow{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.slbl{font-size:15px;color:var(--ink2);min-width:80px;flex-shrink:0;font-weight:500}
.sinp{flex:1;padding:12px 16px;border:none;border-radius:var(--r2);font-size:16px;background:var(--white);color:var(--ink);font-family:inherit;-webkit-appearance:none;box-shadow:var(--shadow-sm)}
.sinp:focus{outline:none;box-shadow:0 0 0 2px var(--navy)}
.sheet-btns{display:flex;gap:12px;margin-top:24px}
.sheet-btns .btn-outline,.sheet-btns .btn-primary,.sheet-btns .btn-yellow{flex:1;justify-content:center;padding:14px;font-size:15px}

/* Mobile profile sheet */
.prof-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);z-index:209;opacity:0;pointer-events:none;transition:opacity .3s}
.prof-bg.open{opacity:1;pointer-events:all}
.prof-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bone);border-radius:24px 24px 0 0;z-index:210;transform:translateY(100%);transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1);max-height:95vh;overflow-y:auto;padding-bottom:var(--safe-bottom);box-shadow:0 -10px 40px rgba(0,0,0,0.1)}
.prof-sheet.open{transform:translateY(0)}
.prof-head{background:var(--white-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:20px 24px;display:flex;align-items:center;gap:16px;border-radius:24px 24px 0 0;position:sticky;top:0;z-index:2;border-bottom:1px solid rgba(0,0,0,0.05)}
.prof-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.prof-name{font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-0.02em}
.prof-sub{font-size:13px;color:var(--ink3);margin-top:4px;font-weight:500}
.prof-close{background:var(--border);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink2);flex-shrink:0;margin-left:auto;transition:all 0.2s}
.prof-close:active{transform:scale(0.9)}

.prof-body{padding:20px 24px 40px;display:flex;flex-direction:column;gap:24px}
.prof-section{display:flex;flex-direction:column;gap:12px;background:var(--white);padding:20px;border-radius:var(--r3);box-shadow:var(--shadow-sm)}
.prof-section-title{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.mobi .field-row{display:flex;align-items:center;gap:12px;min-height:40px}
.mobi .field-label{font-size:14px;color:var(--ink3);min-width:80px;flex-shrink:0;font-weight:500}
.mobi .field-val{font-size:15px;font-weight:600;flex:1;color:var(--ink)}
.mobi .edit-btn{background:var(--bone);border:none;cursor:pointer;color:var(--ink2);font-size:13px;padding:6px 14px;border-radius:16px;font-family:inherit;font-weight:600;transition:all 0.2s}
.mobi .edit-btn:active{transform:scale(0.94);background:var(--border)}
.mobi .field-inp{flex:1;padding:10px 14px;border:none;border-radius:var(--r);font-size:15px;background:var(--bone);color:var(--ink);font-family:inherit;-webkit-appearance:none}
.mobi .field-inp:focus{outline:none;box-shadow:0 0 0 2px var(--navy)}
.mobi .save-btn{background:var(--navy);color:#fff;border:none;border-radius:var(--r);padding:10px 16px;font-size:14px;cursor:pointer;font-weight:600}
.mobi .cancel-btn{background:var(--bone);border:none;border-radius:var(--r);padding:10px 16px;font-size:14px;cursor:pointer;color:var(--ink2);font-weight:600}

.mobi .del-row{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--r2);background:var(--bone);margin-bottom:10px;border:1px solid var(--border)}
.mobi .del-title{font-size:15px;font-weight:600;color:var(--ink)}
.mobi .del-sub{font-size:13px;color:var(--ink3);margin-top:4px}
.mobi .pay-list{display:flex;flex-direction:column;gap:10px}
.mobi .pay-opt{padding:16px;width:100%;text-align:left;font-size:15px}
.mobi .toast{top:calc(var(--top-h) + var(--safe-top) + 16px);left:16px;right:16px;text-align:center;box-shadow:var(--shadow-lg)}

/* ── Multi-select filter bar (desktop) ── */
.filter-bar-d{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding:16px 20px;background:var(--white);border-radius:var(--r3);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.fbar-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fbar-group+.fbar-group{padding-left:16px;border-left:1px solid var(--bone)}
.fbar-label{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;min-width:fit-content}
.fbar-chips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;border:none;cursor:pointer;background:var(--bone);color:var(--ink2);white-space:nowrap;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.fchip:hover{background:var(--border2);color:var(--ink)}
.fchip-on{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(27,46,94,.2)}
.fchip-on::before{content:'✓ ';font-size:12px;opacity:.9}

/* ── Delivery table ── */
.del-filter-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-start}
.del-grade-chips{display:flex;gap:8px;overflow-x:auto;flex-wrap:wrap;flex:1}
.del-seg-btn{padding:8px 16px;border-radius:24px;font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:inherit;color:var(--ink2);background:var(--bone);transition:all .2s;white-space:nowrap}
.del-seg-btn:hover{background:var(--border2);color:var(--ink)}
.del-seg-btn.active{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(27,46,94,.2)}

/* Table desktop */
.del-table-wrap{background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.del-table{width:100%;border-collapse:collapse}
.del-table th{padding:14px 20px;font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;background:var(--bone);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.del-table td{padding:14px 20px;border-bottom:1px solid var(--bone);font-size:14px;vertical-align:middle;color:var(--ink)}
.del-table tr:hover td{background:var(--bone)}
.del-table .grade-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px;background:var(--bone);color:var(--ink2);white-space:nowrap}
.del-table .sec-pill{background:var(--navy);color:var(--white)}

.del-check-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.del-check-btn:hover{border-color:var(--gn);background:var(--gn-bg)}
.del-check-btn.done{border-color:var(--gn);background:var(--gn)}
.del-check-btn.done svg{stroke:#fff}
.del-check-btn svg{width:18px;height:18px;stroke:var(--border2);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.del-check-btn:hover svg{stroke:var(--gn)}

/* Stats bar */
.del-stats{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.del-stat{background:var(--white);border-radius:var(--r3);padding:20px;flex:1;min-width:140px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.del-stat-title{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.del-stat-nums{display:flex;align-items:baseline;gap:8px}
.del-stat-done{font-size:32px;font-weight:700;color:var(--gn);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.del-stat-total{font-size:16px;color:var(--ink3);font-weight:500}
.del-stat-bar{height:6px;background:var(--bone2);border-radius:4px;margin-top:12px;overflow:hidden}
.del-stat-fill{height:100%;border-radius:4px;background:var(--gn);transition:width .6s cubic-bezier(0.25, 1, 0.5, 1)}

/* Mobile delivery list */
.del-m-list{display:flex;flex-direction:column;gap:0;background:var(--white);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.02)}
.del-m-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bone)}
.del-m-name{flex:1;min-width:0}
.del-m-n{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);letter-spacing:-0.01em}
.del-m-g{font-size:12px;color:var(--ink3);margin-top:2px}
.del-m-checks{display:flex;gap:10px;flex-shrink:0}

.del-check-sm{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-direction:column;gap:1px;font-size:10px;font-weight:700;color:var(--ink3)}
.del-check-sm.done{border-color:var(--gn);background:var(--gn);color:#fff}
.del-check-sm:active{transform:scale(.9)}

/* Export btn */
.btn-export{background:var(--white);color:var(--navy);border:1px solid var(--border2);border-radius:var(--r2);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);transition:all 0.2s}
.btn-export:hover{background:var(--bone);border-color:var(--border)}
.btn-export:active{transform:scale(0.96)}

/* Section header with progress */
.del-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--white);border-radius:var(--r2);margin:20px 0 12px;box-shadow:var(--shadow-sm)}
.del-sec-hdr-left{display:flex;align-items:center;gap:12px}
.del-sec-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.del-sec-prog{font-size:12px;color:var(--ink3);font-weight:500}
.del-prog-mini{width:64px;height:6px;background:var(--bone);border-radius:3px;overflow:hidden}
.del-prog-mini-fill{height:100%;background:var(--gn);border-radius:3px;transition:width .5s cubic-bezier(0.25, 1, 0.5, 1)}