*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;font-family:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif;color:#211a15;background:#f6f1e9}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}.center{min-height:100vh;display:grid;place-items:center}.eyebrow,.module-kicker{font-size:.72rem;font-weight:900;letter-spacing:.18em;color:#a76e29}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.brand-panel{padding:8vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#2a1e17,#755038);color:#fff}.brand-panel .eyebrow{color:#e8bb78}.brand-panel h1{font-size:5rem;margin:.5rem 0}.brand-panel p{font-size:1.2rem}.brand-note{margin-top:2rem;color:#e9d8c7}.login-card{align-self:center;width:min(520px,90%);margin:auto;padding:2.5rem;border-radius:28px;background:#fff;box-shadow:0 28px 80px #4f38231b}.login-badge{display:inline-block;padding:.5rem .8rem;border-radius:999px;background:#eee1d1;color:#67472c;font-weight:800}.login-card h2{font-size:2.3rem;margin:1rem 0 .4rem}.login-card>p{color:#76685c}.login-card label,.form-grid label{display:block;margin-top:1rem;font-size:.85rem;font-weight:800}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.toolbar input,.toolbar select{width:100%;margin-top:.4rem;padding:.9rem 1rem;border:1px solid #d8cfc2;border-radius:12px;background:#fff}.phone-field{display:flex;align-items:center;margin-top:.4rem;border:1px solid #d8cfc2;border-radius:12px;overflow:hidden}.phone-field span{padding:0 1rem;font-weight:900;border-right:1px solid #e5ded4}.phone-field input{border:0;margin:0;border-radius:0}.login-card button,.modal-actions button,.toolbar>button{width:100%;margin-top:1rem;padding:.95rem 1rem;border-radius:12px;background:#3a281c;color:#fff;font-weight:900}.secondary{background:#eee4d8!important;color:#4d3a2b!important}.text-button{background:transparent!important;color:#70563f!important}.notice{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;font-size:.86rem}.notice.ok{background:#e8f2e4;color:#48613d}.notice.error{background:#f6e2dc;color:#8a4633}.notice.info{background:#eee6da;color:#6b5846}.notice.global{position:sticky;top:.5rem;z-index:8;margin-bottom:1rem;box-shadow:0 10px 30px #0001}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}aside{position:sticky;top:0;height:100vh;padding:2rem 1rem 1.2rem;display:flex;flex-direction:column;background:#201914;color:#fff}.logo-small{font-weight:900;letter-spacing:.16em}.logo-cn{margin-top:.2rem;color:#d6a45d;font-weight:800}.super-chip{margin:1rem 0;padding:.6rem .7rem;border:1px solid #d6b06a55;border-radius:10px;background:#d6b06a12;color:#e5c386;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-align:center}nav{display:grid;gap:.25rem;margin-top:1rem}.nav-item,.logout{width:100%;padding:.9rem 1rem;border-radius:10px;background:transparent;color:#d9d1cb;text-align:left;font-weight:700}.nav-item:hover,.nav-item.active{background:#ffffff12;color:#fff}.aside-user{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding:1rem .2rem;border-top:1px solid #ffffff14}.aside-user .avatar,.user-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#b47b38;color:#fff;font-weight:900}.aside-user strong,.aside-user small,.user-pill strong,.user-pill small{display:block}.aside-user small{margin-top:.15rem;color:#b8aaa0;font-size:.7rem}.logout{margin-top:.4rem;background:#ffffff09;text-align:center}.dashboard{min-width:0;padding:2.5rem 3vw 4rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}.topbar h1{font-size:2.65rem;margin:.2rem 0}.top-actions{display:flex;align-items:center;gap:.5rem}.version-badge{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #79562d59;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em;color:#7b552d;background:#f5ead9}.user-pill{display:flex;align-items:center;gap:.65rem;padding:.5rem .75rem;border-radius:999px;background:#ece1d2;color:#3f3025;text-align:left}.user-pill small{color:#7a6858;font-size:.68rem}.user-dot{width:30px;height:30px}.admin-banner{display:flex;gap:1rem;margin-top:1.2rem;padding:1rem 1.2rem;border:1px solid #dbc28f;border-radius:14px;background:#f8edd8;color:#5e4526}.admin-banner span{color:#7b674e;font-size:.86rem}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}.cards article{padding:1.5rem;border:1px solid #e5ddd2;border-radius:18px;background:#fff}.cards span{color:#7d7165}.cards strong{display:block;margin-top:.7rem;font-size:1.7rem}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1rem}.quick-card{padding:1.3rem;border:1px solid #e5ddd2;border-radius:18px;background:#fff;color:#33251b;text-align:left}.quick-card span,.quick-card strong,.quick-card small{display:block}.quick-card strong{font-size:2rem;margin:.35rem 0}.quick-card small{color:#8b7866}.welcome{margin-top:1rem;padding:2rem;border-radius:20px;background:#e9dfd2}.welcome h2{margin:.4rem 0;font-size:2rem}.welcome p{max-width:850px;line-height:1.8;color:#655c53}
.management-page{margin-top:1.5rem}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}.section-head h2{font-size:2rem;margin:.25rem 0}.section-head p{margin:.2rem 0;color:#776b60}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0}.toolbar-left{display:flex;gap:.6rem;flex:1;min-width:0}.toolbar input,.toolbar select{width:auto;margin:0;min-width:150px}.toolbar .search{flex:1;min-width:220px}.toolbar>button{width:auto;margin:0;white-space:nowrap}.table-card{overflow:hidden;border:1px solid #e5ddd2;border-radius:18px;background:#fff}.table-head,.table-row{display:grid;align-items:center;gap:.9rem;padding:.9rem 1rem}.table-head{background:#eee5da;color:#695848;font-size:.72rem;font-weight:900;letter-spacing:.04em}.table-row{border-top:1px solid #eee7de}.table-row:first-of-type{border-top:0}.table-row strong,.table-row small{display:block}.table-row small{margin-top:.2rem;color:#8b7d70;font-size:.74rem}.city-cols{grid-template-columns:1.4fr .5fr .5fr .6fr 2fr}.school-cols{grid-template-columns:1.6fr .8fr .8fr .6fr 1.6fr}.course-cols{grid-template-columns:1.3fr .7fr .7fr .55fr .6fr 1.6fr}.teacher-cols{grid-template-columns:1fr .8fr 1.1fr .55fr .7fr 1.9fr}.actions{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}.mini{padding:.48rem .65rem;border-radius:9px;background:#eee5da;color:#4e3928;font-size:.73rem;font-weight:800}.mini.danger{background:#f3dfd8;color:#8a4936}.status{display:inline-flex;padding:.38rem .6rem;border-radius:999px;background:#eee;color:#776e67;font-size:.7rem;font-weight:900}.status.active{background:#e7f0e1;color:#4f6d3f}.status-select{max-width:105px;padding:.45rem .5rem;border:1px solid #d9d0c5;border-radius:8px;background:#fff;font-size:.72rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:3rem;text-align:center;color:#80746a}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:#1d1712aa;backdrop-filter:blur(4px)}.edit-modal{width:min(460px,96vw);max-height:92vh;overflow:auto;padding:1.7rem;border-radius:22px;background:#fff;box-shadow:0 30px 100px #0005}.edit-modal.wide{width:min(780px,96vw)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.modal-head h2{margin:.25rem 0 1rem}.icon-close{width:40px;height:40px;border-radius:50%;background:#eee5da;color:#4a3526;font-size:1.5rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}.form-grid label{margin:0}.span2{grid-column:1/-1}.form-grid textarea{min-height:100px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.2rem}.modal-actions button{width:auto;min-width:120px}.modal-actions .secondary{margin-top:1rem}
@media(max-width:1150px){.table-card{overflow:auto}.table-head,.table-row{min-width:900px}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.app-shell{grid-template-columns:220px 1fr}.cards{grid-template-columns:repeat(2,1fr)}.dashboard{padding:2rem}.toolbar{align-items:stretch;flex-direction:column}.toolbar-left{flex-wrap:wrap}.toolbar>button{align-self:flex-start}.top-actions{align-items:flex-end;flex-direction:column}}@media(max-width:700px){.login-shell{grid-template-columns:1fr}.brand-panel{min-height:32vh;padding:3rem 2rem}.brand-panel h1{font-size:3.5rem}.login-card{margin:1.2rem;padding:1.5rem}.app-shell{grid-template-columns:1fr}aside{display:none}.dashboard{padding:1.2rem}.topbar{align-items:flex-start}.topbar h1{font-size:2rem}.version-badge{display:none}.cards{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.admin-banner{flex-direction:column}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.toolbar-left{display:grid;grid-template-columns:1fr}.toolbar input,.toolbar select{width:100%}}
.school2-cols{grid-template-columns:1.4fr .55fr 1.25fr .55fr .9fr .5fr 1.7fr}.class-cols{grid-template-columns:1fr 1.35fr .8fr .8fr .45fr .8fr 1.5fr}.settle-cols{grid-template-columns:.9fr .75fr .75fr .75fr .55fr .75fr .6fr 1fr}.user-cols{grid-template-columns:1.2fr .9fr 1fr .8fr .55fr 1fr}.settle-summary{padding:1rem;border-radius:12px;background:#f4ede4;display:flex;justify-content:space-between;gap:1rem}.settle-summary span{color:#725f4e}.table-row small{line-height:1.35}.table-head span{white-space:nowrap}@media(max-width:1300px){.school2-cols,.class-cols,.settle-cols,.user-cols{min-width:1150px}}
.mobile-nav{display:none;padding:.55rem .7rem;border:1px solid #d9cdbd;border-radius:10px;background:#fff}.school6-cols{grid-template-columns:1.25fr .6fr 1.45fr 1.35fr .45fr 1.45fr}.course6-cols{grid-template-columns:1.4fr .8fr .8fr .8fr .5fr 1.5fr}.teacher6-cols{grid-template-columns:1.2fr 1.2fr .55fr .55fr 1fr 1.6fr}.class6-cols{grid-template-columns:1.45fr 1.3fr .85fr .8fr .9fr 1.45fr}.assign-cols{grid-template-columns:1.15fr 1.35fr .8fr .8fr 1.15fr .55fr 1.3fr}.tabs{display:flex;gap:.5rem;margin:1rem 0}.tabs button{padding:.7rem 1rem;border-radius:10px;background:#ece3d8;color:#5c4938;font-weight:800}.tabs button.active{background:#37271c;color:#fff}.permission-card,.setting-card{border:1px solid #e5ddd2;border-radius:18px;background:#fff;overflow:hidden}.permission-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:.7rem;align-items:center;padding:.8rem 1rem;border-top:1px solid #eee7de}.permission-grid.header{border-top:0;background:#eee5da}.perm-cell{display:flex;gap:.45rem;flex-wrap:wrap}.perm-cell label{display:flex;align-items:center;gap:.25rem;font-size:.75rem}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.setting-card{padding:1.2rem}.setting-card h3{margin:.2rem 0 1rem}.setting-save{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;background:#37271c;color:#fff;font-weight:900}.auto-code-note{padding:.75rem 1rem;border-radius:10px;background:#f5eddf;color:#755736;font-size:.82rem}.user-cols{grid-template-columns:1.2fr .9fr 1fr .8fr .55fr 1fr}@media(max-width:1350px){.school6-cols,.course6-cols,.teacher6-cols,.class6-cols,.assign-cols{min-width:1100px}}@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}@media(max-width:700px){.mobile-nav{display:block}.top-actions{width:100%;align-items:stretch}.user-pill{display:none}.topbar{flex-direction:column}.quick-grid{grid-template-columns:1fr}.permission-card{overflow:auto}.permission-grid{min-width:760px}}

/* Phase 7 settlement engine */
.inline-tools{display:flex;gap:10px;align-items:center}.inline-tools select,.inline-tools input{min-width:150px}.billing-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}.billing-classes{background:#fff;border:1px solid #e7e2d9;border-radius:18px;padding:14px;align-self:start}.billing-classes h3{margin:4px 4px 12px}.billing-class{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 12px;margin:5px 0;border:1px solid transparent;border-radius:12px;background:#f8f6f1;text-align:left;cursor:pointer}.billing-class.active{border-color:#222;background:#fff}.billing-class small{opacity:.65}.billing-main{min-width:0}.section-head.spaced{margin-top:26px}.table-card.compact{overflow-x:auto}.billing-cols{grid-template-columns:.7fr 1.4fr 1fr .55fr .8fr 1fr 1fr;min-width:850px}.adjust-cols{grid-template-columns:1.2fr .7fr 1.3fr .55fr .8fr 1fr 1fr;min-width:850px}.school-month-cols{grid-template-columns:1.6fr .8fr .9fr .9fr 1fr 1fr 1.1fr 1fr;min-width:1000px}.teacher-month-cols{grid-template-columns:1.6fr .65fr .9fr .9fr 1fr .8fr 1fr 1.1fr;min-width:1000px}@media(max-width:900px){.billing-layout{grid-template-columns:1fr}.billing-classes{display:flex;overflow-x:auto;gap:8px}.billing-classes h3{display:none}.billing-class{min-width:210px}}

/* =========================================================
   MAGIC FAMILY BRAND UI — Artful Operations Edition
   Palette sampled from the official brand artwork:
   Sunshine #FAC859 / Cocoa #6A3B25 / Caramel #8F5C3A
   ========================================================= */
:root{
  --mf-yellow:#fac859;
  --mf-yellow-soft:#fff1bf;
  --mf-yellow-pale:#fff9e8;
  --mf-cocoa:#5a311f;
  --mf-cocoa-2:#6f422b;
  --mf-caramel:#8f5c3a;
  --mf-ink:#34231b;
  --mf-muted:#827064;
  --mf-paper:#fbf8f0;
  --mf-card:#fffdf8;
  --mf-line:#eadfcf;
  --mf-green:#4f7559;
  --mf-red:#a85b4c;
  --mf-shadow:0 18px 50px rgba(91,56,34,.08);
}
html,body,#root{background:var(--mf-paper);color:var(--mf-ink)}
body{
  background-image:
    radial-gradient(circle at 12% 6%,rgba(250,200,89,.16),transparent 24rem),
    radial-gradient(circle at 94% 14%,rgba(143,92,58,.06),transparent 22rem),
    linear-gradient(180deg,#fdfaf3 0%,#f8f3e9 100%);
}
button,input,select,textarea{font-family:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif}
input,select,textarea{outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
input:focus,select:focus,textarea:focus{border-color:#d6a331!important;box-shadow:0 0 0 4px rgba(250,200,89,.18);background:#fff!important}
::selection{background:var(--mf-yellow);color:var(--mf-cocoa)}

/* Login — brand first, still calm and professional */
.login-shell{background:var(--mf-paper)}
.brand-panel{
  position:relative;overflow:hidden;padding:clamp(2.5rem,7vw,7rem);
  background:
    radial-gradient(circle at 15% 88%,rgba(255,255,255,.30),transparent 22rem),
    linear-gradient(145deg,#ffd66e 0%,var(--mf-yellow) 62%,#efb94d 100%);
  color:var(--mf-cocoa);
}
.brand-panel:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-140px;top:-120px;border:1px solid rgba(90,49,31,.12)}
.brand-panel:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-260px;bottom:-330px;border:1px solid rgba(90,49,31,.1)}
.brand-art{position:relative;z-index:1;width:min(590px,100%);margin-bottom:2rem;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(90,49,31,.16);border:1px solid rgba(90,49,31,.10)}
.brand-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.brand-panel .eyebrow{position:relative;z-index:1;color:var(--mf-cocoa);opacity:.75}
.brand-panel h1{position:relative;z-index:1;margin:.3rem 0;font-family:"Noto Serif TC","Songti TC",serif;font-weight:900;letter-spacing:.04em;font-size:clamp(3rem,5vw,5.5rem);color:var(--mf-cocoa)}
.brand-panel p{position:relative;z-index:1;color:#6c432c;font-weight:800;letter-spacing:.05em}
.brand-note{position:relative;z-index:1;margin-top:1.6rem;padding:1rem 1.2rem;width:fit-content;border:1px solid rgba(90,49,31,.16);border-radius:999px;background:rgba(255,255,255,.24);color:#69422d;font-weight:750;backdrop-filter:blur(8px)}
.login-card{border:1px solid var(--mf-line);background:rgba(255,253,248,.94);box-shadow:0 32px 90px rgba(85,54,35,.12);backdrop-filter:blur(14px)}
.login-badge{background:var(--mf-yellow-soft);color:var(--mf-cocoa);border:1px solid #ebcf75}
.login-card h2{font-family:"Noto Serif TC","Songti TC",serif;color:var(--mf-cocoa)}
.login-card button,.modal-actions button,.toolbar>button{background:var(--mf-cocoa);box-shadow:0 8px 18px rgba(90,49,31,.13);transition:transform .15s,box-shadow .15s,background .15s}
.login-card button:hover,.modal-actions button:hover,.toolbar>button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(90,49,31,.17)}

/* Sidebar — gallery-like dark cocoa */
.app-shell{grid-template-columns:278px minmax(0,1fr)}
aside{
  overflow-y:auto;padding:1.35rem 1rem 1.1rem;
  background:
    radial-gradient(circle at 50% 0%,rgba(250,200,89,.09),transparent 18rem),
    linear-gradient(180deg,#4f2c1e 0%,#372117 100%);
  border-right:1px solid rgba(255,255,255,.04);
  box-shadow:8px 0 30px rgba(68,39,24,.06);
}
.brand-lockup{display:flex;align-items:center;gap:.75rem;padding:.55rem .55rem .85rem;border-bottom:1px solid rgba(255,255,255,.09)}
.brand-lockup img{width:66px;height:54px;object-fit:cover;object-position:center 18%;border-radius:13px;background:var(--mf-yellow);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.logo-small{font-family:"Arial Black",Impact,sans-serif;font-size:.86rem;letter-spacing:.075em;color:#fff5d7;line-height:1.05}
.logo-cn{color:#f2c95f;font-size:.72rem;letter-spacing:.06em}
.super-chip{margin:.9rem .2rem .5rem;border-color:rgba(250,200,89,.25);background:rgba(250,200,89,.11);color:#f6cf6b}
nav{gap:.18rem;margin-top:.6rem}
.nav-item{position:relative;padding:.76rem .9rem;border-radius:12px;color:#e5d8cb;font-size:.88rem;transition:background .16s,color .16s,transform .16s}
.nav-item:before{content:"";position:absolute;left:8px;top:50%;width:4px;height:0;border-radius:99px;background:var(--mf-yellow);transform:translateY(-50%);transition:height .16s}
.nav-item:hover{background:rgba(255,255,255,.075);color:#fff;transform:translateX(2px)}
.nav-item.active{padding-left:1.15rem;background:linear-gradient(90deg,rgba(250,200,89,.17),rgba(255,255,255,.055));color:#fff8df}
.nav-item.active:before{height:58%}
.aside-user{border-top-color:rgba(255,255,255,.1)}
.aside-user .avatar,.user-dot{background:var(--mf-yellow);color:var(--mf-cocoa);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.logout{background:rgba(255,255,255,.06);color:#d9c7b8}
.logout:hover{background:rgba(250,200,89,.11);color:#ffe599}

/* Workspace */
.dashboard{padding:2.15rem clamp(1.3rem,3vw,3.4rem) 4rem;background:transparent}
.topbar{padding-bottom:1rem;border-bottom:1px solid rgba(143,92,58,.12)}
.eyebrow,.module-kicker{color:var(--mf-caramel);letter-spacing:.2em}
.topbar h1,.section-head h2,.welcome h2{font-family:"Noto Serif TC","Songti TC",serif;color:var(--mf-cocoa);letter-spacing:.02em}
.topbar h1{font-size:clamp(2rem,3.2vw,3rem)}
.version-badge{border:1px solid #e4c66c;background:linear-gradient(180deg,#fff5ca,#ffe492);color:#714523;box-shadow:0 6px 18px rgba(143,92,58,.08)}
.user-pill{border:1px solid #eadcc9;background:rgba(255,253,248,.88);box-shadow:0 8px 20px rgba(90,49,31,.05)}
.admin-banner{border:1px solid #ecd37b;background:linear-gradient(90deg,#fff5ce,#fffaf0);color:var(--mf-cocoa);box-shadow:0 10px 28px rgba(143,92,58,.05)}
.admin-banner strong:before{content:"✦";margin-right:.45rem;color:#c18b1f}

/* Dashboard cards */
.cards article,.quick-card,.welcome,.table-card,.permission-card,.setting-card,.billing-classes{
  border-color:var(--mf-line);background:rgba(255,253,248,.94);box-shadow:var(--mf-shadow)
}
.cards article{position:relative;overflow:hidden;min-height:122px}
.cards article:after{content:"";position:absolute;right:-24px;bottom:-30px;width:92px;height:92px;border-radius:50%;background:rgba(250,200,89,.14)}
.cards span{color:var(--mf-muted);font-weight:650}
.cards strong{color:var(--mf-cocoa);font-family:"Noto Serif TC","Songti TC",serif;font-size:1.85rem}
.quick-card{position:relative;transition:transform .16s,border-color .16s,box-shadow .16s}
.quick-card:hover{transform:translateY(-3px);border-color:#dfc26d;box-shadow:0 18px 42px rgba(90,49,31,.11)}
.quick-card strong{color:var(--mf-cocoa)}
.quick-card small{color:var(--mf-muted)}
.welcome{background:linear-gradient(120deg,#fff5cb 0%,#fffdf7 58%,#f6eee2 100%);border:1px solid #ead69b}
.welcome p{color:#735f51}

/* Management surfaces */
.management-page{margin-top:1.7rem}
.section-head{padding:.1rem .15rem .35rem}
.section-head h2{font-size:2.15rem}
.section-head p{color:var(--mf-muted);line-height:1.7}
.toolbar{padding:.65rem;border:1px solid var(--mf-line);border-radius:16px;background:rgba(255,253,248,.72);box-shadow:0 8px 26px rgba(90,49,31,.035)}
.toolbar input,.toolbar select,.form-grid input,.form-grid select,.form-grid textarea,.mobile-nav,.inline-tools select,.inline-tools input{border-color:#dfd3c5;background:#fffdf9}
.toolbar>button,.setting-save{background:linear-gradient(180deg,#6b402a,#54301f);color:#fff9e9}
.table-card{border-radius:20px}
.table-head{background:linear-gradient(180deg,#fff1bc,#f7e4aa);color:#68442e;border-bottom:1px solid #e4cd83;letter-spacing:.065em}
.table-row{border-top-color:#efe6d9;transition:background .13s}
.table-row:hover{background:#fffaf0}
.table-row strong{color:#513120}
.table-row small{color:#948174}
.actions{gap:.42rem}
.mini{border:1px solid #e2d4c3;background:#f7efe4;color:#67472f;transition:transform .14s,background .14s,border-color .14s}
.mini:hover{transform:translateY(-1px);border-color:#d9bd70;background:#fff4c8}
.mini.danger{border-color:#edd0c7;background:#fff0ec;color:#994f41}
.status{border:1px solid #e2d8cc;background:#f3ede6;color:#77695f}
.status.active{border-color:#cfe0c9;background:#eef6e9;color:#527044}
.status-select{border-color:#ddd0c1;background:#fffdf8}
.empty-state{color:#9a897c;background:linear-gradient(180deg,transparent,#fffaf0)}

/* Finance — numbers become the visual focus */
.settle-cols strong,.school-month-cols strong,.teacher-month-cols strong{font-family:"Noto Serif TC","Songti TC",serif}
.school-month-cols>strong,.teacher-month-cols>strong{font-size:1.05rem;color:#70461f}
.billing-class{border-color:#eadfce;background:#fbf5e9;transition:transform .14s,border-color .14s,background .14s}
.billing-class:hover{transform:translateX(2px);border-color:#ddc16e}
.billing-class.active{border-color:#d0a532;background:linear-gradient(135deg,#fff5c8,#fffdf8);box-shadow:0 7px 18px rgba(143,92,58,.08)}
.billing-class.active strong{color:var(--mf-cocoa)}
.billing-main>.section-head{border-bottom:1px solid var(--mf-line);padding-bottom:.8rem;margin-bottom:.8rem}

/* Permission matrix / settings */
.tabs button{border:1px solid #e4d7c7;background:#f6eee4;color:#6a4c37}
.tabs button.active{border-color:#d7aa34;background:var(--mf-yellow);color:var(--mf-cocoa);box-shadow:0 8px 18px rgba(143,92,58,.09)}
.permission-grid.header{background:linear-gradient(180deg,#fff2be,#f8e7b0);color:#67442d}
.setting-card{position:relative;overflow:hidden}
.setting-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--mf-yellow)}
.auto-code-note{border:1px solid #ead489;background:#fff6d4;color:#6c482d}

/* Modal */
.modal-backdrop{background:rgba(65,38,25,.55);backdrop-filter:blur(8px)}
.edit-modal{border:1px solid rgba(255,255,255,.45);background:#fffdf9;box-shadow:0 34px 100px rgba(55,31,20,.28)}
.modal-head{position:sticky;top:-1.7rem;z-index:2;margin:-1.7rem -1.7rem 1.1rem;padding:1.45rem 1.7rem 1rem;background:rgba(255,253,249,.94);border-bottom:1px solid var(--mf-line);backdrop-filter:blur(12px)}
.modal-head h2{font-family:"Noto Serif TC","Songti TC",serif;color:var(--mf-cocoa)}
.icon-close{background:#f5eadb;color:var(--mf-cocoa)}
.form-grid label{color:#664832}
.form-grid input,.form-grid select,.form-grid textarea{border-color:#dfd3c5;background:#fffefa}
.settle-summary{border:1px solid #ead48c;background:linear-gradient(110deg,#fff4c4,#fffaf0)}

/* Notices */
.notice{border:1px solid transparent;box-shadow:0 8px 24px rgba(90,49,31,.04)}
.notice.ok{border-color:#cadfc2;background:#eef6e9;color:#45623d}
.notice.error{border-color:#ebc9c0;background:#fff0eb;color:#914c3c}
.notice.info{border-color:#ead489;background:#fff5cf;color:#704c2f}

/* Fine details */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f4ecdf}
::-webkit-scrollbar-thumb{background:#d7bea0;border:2px solid #f4ecdf;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#bf9870}

@media(max-width:1150px){.app-shell{grid-template-columns:244px minmax(0,1fr)}.brand-lockup img{width:54px;height:46px}.logo-small{font-size:.76rem}}
@media(max-width:700px){
  .brand-panel{min-height:auto;padding:2rem 1.4rem 2.3rem}.brand-art{margin:0 auto 1.2rem;border-radius:18px}.brand-panel h1{font-size:2.8rem}.brand-note{border-radius:18px;line-height:1.6}
  .dashboard{padding:1rem 1rem 3rem}.topbar{padding-bottom:.8rem}.section-head h2{font-size:1.75rem}.toolbar{padding:.55rem}.table-card{border-radius:15px}.edit-modal{border-radius:18px}
}

/* =========================================================
   MAGIC FAMILY — PHASE 8 BRAND EDITION
   Brand palette sampled from supplied CI:
   warm magic yellow / espresso brown / cream paper / soft ink
   ========================================================= */
:root{
  --mf-yellow:#F8C85C;
  --mf-yellow-soft:#FFF1C7;
  --mf-yellow-pale:#FFF8E8;
  --mf-brown:#4B2618;
  --mf-brown-2:#6A3A25;
  --mf-ink:#2F211B;
  --mf-cream:#FFFDF8;
  --mf-paper:#FAF6ED;
  --mf-line:#E7DCC9;
  --mf-muted:#8A7566;
  --mf-green:#557A62;
  --mf-red:#A85A43;
  --mf-shadow:0 14px 38px rgba(75,38,24,.08);
  --mf-shadow-lg:0 28px 80px rgba(75,38,24,.14);
}
html,body,#root{
  color:var(--mf-ink);
  background:
    radial-gradient(circle at 16% 8%,rgba(248,200,92,.13),transparent 24%),
    radial-gradient(circle at 82% 1%,rgba(248,200,92,.08),transparent 23%),
    var(--mf-paper);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
}
body{letter-spacing:.01em}
::selection{background:var(--mf-yellow);color:var(--mf-brown)}
button,input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:0 0 0 4px rgba(248,200,92,.25)!important;border-color:#D8A73E!important
}

/* Brand typography */
.eyebrow,.module-kicker{
  color:#A16A24;
  letter-spacing:.22em;
  font-weight:900
}
.logo-small{
  font-family:"Arial Black","Helvetica Neue",sans-serif;
  letter-spacing:-.02em;
  font-size:1.04rem;
  color:var(--mf-yellow)
}
.logo-cn{color:#FFF4D2;font-size:.88rem;letter-spacing:.08em}
.logo-tagline{margin-top:.22rem;color:#D9B57C;font-size:.67rem;letter-spacing:.16em}

/* Login — editorial / gallery-like */
.login-shell{
  min-height:100vh;
  grid-template-columns:minmax(460px,1.06fr) minmax(420px,.94fr);
  background:var(--mf-paper)
}
.brand-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,7vw,110px);
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.12),transparent 22%),
    linear-gradient(145deg,#3A2017 0%,#4B2618 52%,#6A3A25 100%);
}
.brand-panel:after{
  content:"";
  position:absolute;inset:auto -8% -22% auto;width:54%;aspect-ratio:1;
  border:1px solid rgba(248,200,92,.18);border-radius:50%;
  box-shadow:0 0 0 48px rgba(248,200,92,.035),0 0 0 96px rgba(248,200,92,.025);
  pointer-events:none
}
.brand-art{
  position:relative;z-index:1;
  width:min(620px,100%);
  margin:0 0 36px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.14);
  background:var(--mf-yellow)
}
.brand-art img{display:block;width:100%;height:auto}
.brand-panel h1{
  position:relative;z-index:1;
  margin:.42rem 0 .2rem;
  font-size:clamp(3.4rem,6vw,6.4rem);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:950
}
.brand-panel p,.brand-note,.brand-panel .eyebrow{position:relative;z-index:1}
.brand-panel .eyebrow{color:var(--mf-yellow)}
.brand-note{max-width:660px;line-height:1.9;color:#E8D8C9}
.login-card{
  width:min(540px,88%);
  padding:clamp(28px,4vw,52px);
  border:1px solid rgba(75,38,24,.08);
  border-radius:30px;
  background:rgba(255,253,248,.95);
  box-shadow:var(--mf-shadow-lg)
}
.login-badge{
  background:var(--mf-yellow-soft);
  color:var(--mf-brown);
  border:1px solid rgba(75,38,24,.08)
}
.login-card h2{color:var(--mf-brown);letter-spacing:-.035em}
.login-card button,.modal-actions button,.toolbar>button,.setting-save{
  background:var(--mf-brown);
  color:#fff;
  box-shadow:0 8px 18px rgba(75,38,24,.13)
}
.login-card button:hover,.modal-actions button:hover,.toolbar>button:hover,.setting-save:hover{
  transform:translateY(-1px);
  background:#5B2D1C
}

/* Sidebar — brand anchor, not childish */
.app-shell{grid-template-columns:276px 1fr}
aside{
  width:auto;
  padding:22px 16px 18px;
  overflow-y:auto;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 32%),
    var(--mf-brown);
  box-shadow:12px 0 40px rgba(75,38,24,.08)
}
.brand-lockup{
  display:block;
  padding:10px;
  margin-bottom:8px;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07)
}
.brand-lockup>img{
  width:100%;
  height:112px;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:12px;
  margin-bottom:11px;
  background:var(--mf-yellow)
}
.super-chip{
  margin:.7rem 2px 1rem;
  color:#5B361F;
  background:linear-gradient(135deg,#F7CB66,#F3B94A);
  border:0;
  box-shadow:0 8px 22px rgba(0,0,0,.12)
}
nav{gap:.3rem}
.nav-item{
  position:relative;
  padding:.82rem .9rem .82rem 1rem;
  border-radius:12px;
  color:#E9DBCF;
  font-weight:760
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{
  background:linear-gradient(90deg,rgba(248,200,92,.20),rgba(248,200,92,.07));
  color:#FFF8E8;
  box-shadow:inset 3px 0 0 var(--mf-yellow)
}
.nav-item.active:after{
  content:"";
  position:absolute;right:11px;top:50%;width:6px;height:6px;
  transform:translateY(-50%);border-radius:50%;background:var(--mf-yellow)
}
.aside-user{border-color:rgba(255,255,255,.10)}
.aside-user .avatar,.user-dot{
  background:var(--mf-yellow);
  color:var(--mf-brown);
  box-shadow:0 5px 14px rgba(0,0,0,.15)
}
.logout{border:1px solid rgba(255,255,255,.08);color:#EADDD4}
.logout:hover{background:rgba(255,255,255,.10)}

/* Main workspace — quiet paper */
.dashboard{
  padding:32px clamp(24px,3.2vw,56px) 56px;
  background:
    linear-gradient(rgba(255,255,255,.44),rgba(255,255,255,.44)),
    var(--mf-paper)
}
.topbar{
  position:sticky;top:0;z-index:10;
  margin:-8px -10px 10px;
  padding:14px 10px 18px;
  background:linear-gradient(180deg,rgba(250,246,237,.98) 72%,rgba(250,246,237,0));
  backdrop-filter:blur(10px)
}
.topbar h1{
  color:var(--mf-brown);
  font-size:clamp(2rem,3.2vw,3.15rem);
  letter-spacing:-.055em;
  font-weight:900
}
.version-badge{
  border:1px solid rgba(75,38,24,.12);
  background:var(--mf-yellow-soft);
  color:var(--mf-brown);
  box-shadow:0 6px 16px rgba(75,38,24,.05)
}
.user-pill{
  background:rgba(255,253,248,.92);
  border:1px solid var(--mf-line);
  box-shadow:0 8px 22px rgba(75,38,24,.05)
}
.admin-banner{
  position:relative;
  overflow:hidden;
  border:1px solid #E6C879;
  background:linear-gradient(100deg,#FFF5D8,#FFF9EA);
  color:var(--mf-brown);
  box-shadow:0 10px 30px rgba(117,77,26,.05)
}
.admin-banner:before{
  content:"✦";color:#B27625;font-size:1.1rem;margin-right:.1rem
}

/* Dashboard cards — editorial rhythm */
.cards{gap:14px}
.cards article,.quick-card,.welcome,.table-card,.permission-card,.setting-card{
  border:1px solid rgba(75,38,24,.09);
  background:rgba(255,253,248,.96);
  box-shadow:var(--mf-shadow)
}
.cards article{
  position:relative;
  padding:1.45rem 1.55rem 1.55rem;
  border-radius:20px;
  overflow:hidden
}
.cards article:before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-yellow)
}
.cards article strong{
  color:var(--mf-brown);
  font-size:1.9rem;
  letter-spacing:-.04em
}
.cards article span,.quick-card small{color:var(--mf-muted)}
.quick-card{
  border-radius:18px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.quick-card:hover{
  transform:translateY(-2px);
  border-color:#E3C77C;
  box-shadow:0 18px 38px rgba(75,38,24,.10)
}
.quick-card strong{color:var(--mf-brown)}
.welcome{
  position:relative;
  padding:2.1rem 2.25rem;
  border-radius:24px;
  background:
    linear-gradient(115deg,rgba(255,248,227,.98),rgba(255,253,248,.98));
  overflow:hidden
}
.welcome:after{
  content:"MAGIC";
  position:absolute;right:24px;bottom:-22px;
  font-family:"Arial Black",sans-serif;
  font-size:6.5rem;letter-spacing:-.08em;
  color:rgba(75,38,24,.035);pointer-events:none
}
.welcome h2{color:var(--mf-brown);letter-spacing:-.04em}

/* Management pages */
.management-page{margin-top:1.25rem}
.section-head h2{
  color:var(--mf-brown);
  letter-spacing:-.04em;
  font-weight:900
}
.section-head p{color:var(--mf-muted);line-height:1.65}
.toolbar{
  padding:10px;
  border:1px solid rgba(75,38,24,.07);
  border-radius:16px;
  background:rgba(255,253,248,.72)
}
.toolbar input,.toolbar select,.form-grid input,.form-grid select,.form-grid textarea,.mobile-nav,.inline-tools select,.inline-tools input{
  border:1px solid #DED2C1;
  background:#FFFEFA;
  color:var(--mf-ink)
}
.toolbar input:hover,.toolbar select:hover,.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{
  border-color:#CDBA9F
}
.table-card{
  border-radius:20px;
  overflow:hidden
}
.table-head{
  background:linear-gradient(180deg,#F3E8D8,#EFE2D1);
  color:#6E533F;
  border-bottom:1px solid #E1D3C0
}
.table-row{
  background:rgba(255,253,248,.98);
  border-top:1px solid #EEE5D9;
  transition:background .14s ease
}
.table-row:hover{background:#FFF9E9}
.table-row strong{color:#3F2A20}
.table-row small{color:var(--mf-muted)}
.mini{
  background:#F3E9DA;
  color:#5E412E;
  border:1px solid rgba(75,38,24,.06)
}
.mini:hover{background:#EAD9C1;transform:translateY(-1px)}
.mini.danger{background:#F7E8E2;color:#934E3C}
.status{border:1px solid transparent}
.status.active{
  background:#E9F1E8;
  color:#416448;
  border-color:#D8E6D8
}

/* Billing visual hierarchy */
.billing-layout{gap:20px}
.billing-classes{
  border-color:rgba(75,38,24,.09);
  background:rgba(255,253,248,.96);
  box-shadow:var(--mf-shadow)
}
.billing-class{
  background:#F8F1E7;
  color:var(--mf-ink)
}
.billing-class:hover{background:#FFF5D8}
.billing-class.active{
  border-color:#DDB655;
  background:linear-gradient(120deg,#FFF3CA,#FFF9E9);
  box-shadow:inset 3px 0 0 var(--mf-yellow)
}
.billing-class strong{color:var(--mf-brown)}
.table-card.compact{box-shadow:none}
.school-month-cols strong:last-child,.teacher-month-cols strong:last-child{
  color:var(--mf-brown);
  font-size:1.02rem
}

/* Modal — calm, premium */
.modal-backdrop{background:rgba(47,33,27,.62);backdrop-filter:blur(7px)}
.edit-modal{
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  background:var(--mf-cream);
  box-shadow:0 32px 100px rgba(47,33,27,.28)
}
.modal-head{
  position:sticky;top:-1.7rem;z-index:2;
  margin:-1.7rem -1.7rem 1rem;
  padding:1.5rem 1.7rem .8rem;
  background:linear-gradient(180deg,var(--mf-cream) 80%,rgba(255,253,248,0))
}
.modal-head h2{color:var(--mf-brown);letter-spacing:-.035em}
.icon-close{background:#F2E8DA;color:var(--mf-brown)}
.auto-code-note{
  background:var(--mf-yellow-pale);
  color:#705033;
  border:1px dashed #E4C46E
}

/* Permission + settings */
.tabs button{background:#F0E5D6}
.tabs button.active{background:var(--mf-brown);color:#fff}
.permission-grid.header{background:#F1E5D3}
.setting-card h3{color:var(--mf-brown)}

/* Small delight without visual noise */
.notice.ok{background:#EAF2E8;color:#47604A}
.notice.error{background:#F8E8E3;color:#914B39}
.notice.info{background:#FFF3D3;color:#74542B}
.empty-state{color:#9B8877}
.empty-state:before{
  content:"✦";
  display:block;
  margin-bottom:.4rem;
  color:#D9AA48;
  font-size:1.25rem
}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:#CDB99F transparent}
aside::-webkit-scrollbar{width:7px}
aside::-webkit-scrollbar-thumb{background:rgba(248,200,92,.25);border-radius:20px}

/* Responsive */
@media(max-width:1100px){
  .app-shell{grid-template-columns:238px 1fr}
  aside{padding-left:12px;padding-right:12px}
  .brand-lockup>img{height:94px}
}
@media(max-width:700px){
  .login-shell{grid-template-columns:1fr}
  .brand-panel{min-height:auto;padding:28px 22px 34px}
  .brand-art{margin-bottom:20px;border-radius:18px}
  .brand-panel h1{font-size:3.2rem}
  .login-card{width:auto;margin:16px;padding:24px}
  .dashboard{padding:16px 14px 42px}
  .topbar{position:static;background:transparent;margin:0;padding:4px 0 12px}
  .toolbar{padding:8px}
}

/* Phase 9 weekly attendance billing */
.attendance-panel{margin-bottom:24px;padding:20px;border:1px solid #e5c76f;border-radius:20px;background:linear-gradient(135deg,#fff8df,#fffdf7);box-shadow:0 12px 30px rgba(75,38,24,.06)}
.week-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.week-card{display:block;padding:13px;border:1px solid #eadfca;border-radius:14px;background:#fff}
.week-card span,.week-card small{display:block}.week-card span{font-weight:900;color:#4b2618}.week-card small{margin-top:5px;color:#8a7566;font-size:.72rem}
.week-card input{width:100%;margin-top:8px;padding:10px;border:1px solid #ddcfba;border-radius:10px;font-size:1.2rem;font-weight:900}
.attendance-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.attendance-summary>div{padding:12px;border-radius:13px;background:#f7efe3}.attendance-summary span,.attendance-summary strong{display:block}.attendance-summary span{font-size:.74rem;color:#846e5d}.attendance-summary strong{margin-top:4px;color:#4b2618;font-size:1.12rem}.attendance-summary .grand{background:#4b2618;color:#fff}.attendance-summary .grand span,.attendance-summary .grand strong{color:#fff}
.attendance-hint{margin-top:14px;padding:12px;border-radius:12px;background:#f4eee3;color:#806e5e}
@media(max-width:1000px){.week-grid{grid-template-columns:repeat(3,1fr)}.attendance-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.week-grid{grid-template-columns:1fr 1fr}.attendance-summary{grid-template-columns:1fr}}

/* Phase 11 dynamic role CRUD */
.role-cols{grid-template-columns:1.5fr 1fr .65fr .65fr .65fr 1.4fr}
.role-perm-grid{grid-template-columns:minmax(150px,1.2fr) repeat(var(--role-count,4),minmax(150px,1fr));min-width:900px}
.role-cols code{padding:.35rem .5rem;border-radius:8px;background:#f3eadf;color:#5b3928;font-size:.78rem}
@media(max-width:1150px){.role-cols{min-width:980px}}

/* =========================================================
   PHASE 12 — MAGIC FAMILY ART UI
   Bright yellow + white / editorial education brand system
   ========================================================= */
:root{
  --mf-yellow:#F7C94A;
  --mf-yellow-2:#FFD96B;
  --mf-yellow-soft:#FFF7D9;
  --mf-cream:#FFFDF7;
  --mf-paper:#FFFEFB;
  --mf-brown:#56311F;
  --mf-brown-soft:#7B5A49;
  --mf-line:#EEDFBF;
  --mf-shadow:0 14px 40px rgba(93,62,38,.08);
  --mf-shadow-soft:0 8px 24px rgba(93,62,38,.06);
  --mf-radius-xl:28px;
  --mf-radius-lg:22px;
  --mf-radius-md:16px;
}

html,body,#root{min-height:100%;background:
  radial-gradient(circle at 90% 0%,rgba(247,201,74,.18),transparent 28%),
  linear-gradient(180deg,#fffdfa 0%,#fffefb 100%);color:var(--mf-brown);}

body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  letter-spacing:.01em;
}

.art-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  background:transparent;
}

.art-sidebar{
  position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,#FFFDF6 0%,#FFF9E7 100%)!important;
  border-right:1px solid rgba(120,83,52,.10);
  box-shadow:8px 0 34px rgba(107,73,40,.04);
  padding:20px 14px 22px;
  overflow-y:auto;
}

.art-sidebar .brand,
.art-sidebar .sidebar-brand{
  background:transparent!important;
  border:none!important;
}

.art-sidebar nav,.art-sidebar .nav-list{display:flex;flex-direction:column;gap:6px}

.art-sidebar button,.art-sidebar a,.art-sidebar .nav-item{
  border-radius:15px!important;
  color:#624533!important;
  min-height:46px;
  transition:.18s ease;
}

.art-sidebar button:hover,.art-sidebar a:hover,.art-sidebar .nav-item:hover{
  background:#FFF3C8!important;
  transform:translateX(2px);
}

.art-sidebar .active{
  background:linear-gradient(135deg,var(--mf-yellow),var(--mf-yellow-2))!important;
  color:#3c2618!important;
  box-shadow:0 10px 20px rgba(247,201,74,.28);
  font-weight:900;
}

.art-main{min-width:0;width:100%;padding:0!important}

.art-topbar{
  position:sticky;top:0;z-index:20;
  min-height:74px;
  background:rgba(255,255,255,.90)!important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(113,80,49,.09);
  padding:12px clamp(18px,3vw,42px)!important;
}

main,.page,.page-content,.content{
  width:100%;
  max-width:none!important;
}

.management-page,
.dashboard-page,
main>section{
  width:100%;
  max-width:1640px;
  margin:0 auto;
  padding:clamp(20px,2.5vw,38px) clamp(18px,3vw,44px) 44px!important;
}

.section-head{
  gap:18px;
  align-items:flex-start!important;
  margin-bottom:20px!important;
}
.section-head h1,.section-head h2,
.management-page h1,.management-page h2{
  font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;
  letter-spacing:.04em;
  color:#432619;
}
.page-subtitle{
  margin:.35rem 0 0;
  color:#9A806E;
  font-size:.92rem;
}

.module-kicker{
  color:#B78813!important;
  letter-spacing:.18em!important;
  font-weight:900;
}

.table-card,.permission-card,.setting-card,.billing-main,
.card,.summary-card,.metric-card,.dashboard-card,
.attendance-panel{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(113,80,49,.10)!important;
  border-radius:var(--mf-radius-lg)!important;
  box-shadow:var(--mf-shadow-soft)!important;
}

.table-card,.permission-card,.billing-main{overflow:hidden}

.table-head{
  background:#FFF9E9!important;
  color:#7A5A44!important;
  border-bottom:1px solid #F0E2C5!important;
}

.table-row{
  border-bottom:1px solid rgba(126,91,58,.08)!important;
  transition:.16s ease;
}
.table-row:hover{background:#FFFDF4!important}

button,.btn{
  border-radius:13px!important;
  font-weight:800;
  transition:.18s ease;
}

button.primary,.btn.primary,.setting-save{
  background:linear-gradient(135deg,#F8C94B,#FFD96E)!important;
  color:#4A2B1D!important;
  border:none!important;
  box-shadow:0 8px 20px rgba(248,201,75,.24);
}
button.primary:hover,.btn.primary:hover,.setting-save:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(248,201,75,.30);
}

button.secondary,.btn.secondary{
  background:#fff!important;color:#6A4A37!important;
  border:1px solid #EADBBF!important;
}

input,select,textarea{
  background:#FFF!important;
  border:1px solid #E6D7BC!important;
  border-radius:13px!important;
  color:#4E3222!important;
  min-height:42px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:#E5B83B!important;
  box-shadow:0 0 0 4px rgba(247,201,74,.14)!important;
}

.tabs{
  display:inline-flex!important;
  gap:6px!important;
  background:#FFF7DD!important;
  padding:5px!important;
  border-radius:16px!important;
  margin-bottom:18px!important;
}
.tabs button{
  background:transparent!important;
  border:none!important;
  color:#805F4A!important;
  padding:.65rem 1rem!important;
}
.tabs button.active{
  background:#fff!important;
  color:#4A2C1D!important;
  box-shadow:0 5px 14px rgba(78,50,34,.08);
}

.status,.badge,.version-badge{
  border-radius:999px!important;
}

.notice{
  border-radius:16px!important;
  box-shadow:var(--mf-shadow)!important;
}

.form-grid{
  gap:16px!important;
}
.form-grid label{
  color:#6E503E!important;
  font-weight:800!important;
}
.edit-modal{
  background:#FFFDF8!important;
  border-radius:26px!important;
  border:1px solid rgba(110,75,45,.12)!important;
  box-shadow:0 28px 80px rgba(77,50,30,.20)!important;
}
.modal-head{
  border-bottom:1px solid #F0E5D2!important;
  background:linear-gradient(180deg,#FFF9E9,#FFFDF8)!important;
}

/* Dashboard visual rhythm */
.dashboard-grid,.summary-grid,.metrics-grid{
  gap:14px!important;
}
.summary-card,.metric-card{
  position:relative;
  overflow:hidden;
}
.summary-card:after,.metric-card:after{
  content:"";
  position:absolute;right:-20px;bottom:-26px;
  width:88px;height:88px;border-radius:50%;
  background:rgba(247,201,74,.14);
}
.summary-card strong,.metric-card strong{
  font-family:"Noto Serif TC","Songti TC",serif;
  color:#3C271B!important;
}

/* make wide pages actually use screen */
@media (min-width:1440px){
  .management-page,.dashboard-page,main>section{
    max-width:1760px;
    padding-left:48px!important;
    padding-right:48px!important;
  }
  .art-shell{grid-template-columns:230px minmax(0,1fr)}
}

/* Tablet */
@media (max-width:1024px){
  .art-shell{grid-template-columns:190px minmax(0,1fr)}
  .management-page,.dashboard-page,main>section{
    padding:20px 18px 36px!important;
  }
}

/* Mobile — app-like */
@media (max-width:760px){
  .art-shell{display:block}
  .art-sidebar{
    position:fixed!important;
    left:0;right:0;bottom:0;top:auto;
    width:100%!important;height:auto!important;
    z-index:50;
    border-right:none!important;
    border-top:1px solid rgba(103,73,45,.10);
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(14px);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;
    overflow:visible;
  }
  .art-sidebar .brand,.art-sidebar .sidebar-brand,
  .art-sidebar .sidebar-footer,
  .art-sidebar .sidebar-branding,
  .art-sidebar .sidebar-note{display:none!important}
  .art-sidebar nav,.art-sidebar .nav-list{
    display:grid!important;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
  }
  .art-sidebar button,.art-sidebar a,.art-sidebar .nav-item{
    min-height:54px!important;
    padding:7px 2px!important;
    border-radius:12px!important;
    font-size:.69rem!important;
    text-align:center;
  }
  .art-sidebar .active{
    box-shadow:none!important;
    background:#FFF0B7!important;
  }
  .art-topbar{
    min-height:60px;
    padding:8px 14px!important;
  }
  .art-main{padding-bottom:76px!important}
  .management-page,.dashboard-page,main>section{
    padding:16px 13px 24px!important;
  }
  .section-head{
    flex-direction:column!important;
    gap:10px!important;
  }
  .section-head h1,.section-head h2{font-size:1.55rem!important}
  .table-card{
    overflow-x:auto!important;
    border-radius:18px!important;
  }
  .table-head,.table-row{min-width:820px}
  .settings-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .span2{grid-column:auto!important}
  .edit-modal{
    width:calc(100vw - 20px)!important;
    max-height:88vh!important;
    border-radius:22px!important;
  }
  .permission-card{overflow:auto!important}
  .permission-grid{min-width:900px!important}
}

/* Small phone */
@media (max-width:430px){
  .art-sidebar nav,.art-sidebar .nav-list{
    grid-template-columns:repeat(5,1fr);
  }
  .management-page,.dashboard-page,main>section{
    padding-left:10px!important;padding-right:10px!important;
  }
  .tabs{width:100%;overflow-x:auto}
  .tabs button{white-space:nowrap;flex:1}
}

/* =========================================================
   PHASE 13 — MOBILE YELLOW BRAND EDITION
   手機版改為品牌黃色＋白色，咖啡色只保留文字細節
   ========================================================= */

:root{
  --mf-brand-yellow:#F7C64A;
  --mf-brand-yellow-strong:#F3B91D;
  --mf-brand-yellow-light:#FFF4C2;
  --mf-brand-yellow-pale:#FFF9E7;
  --mf-brand-white:#FFFFFF;
  --mf-brand-ink:#4A3225;
  --mf-brand-muted:#8B7565;
}

/* ---------- LOGIN / AUTH ---------- */
@media (max-width:760px){
  body{
    background:linear-gradient(180deg,#FFFDF8 0%,#FFF9E8 100%)!important;
  }

  .login-page,
  .mobile-yellow-login{
    min-height:100svh!important;
    display:block!important;
    background:
      radial-gradient(circle at 90% 0%,rgba(255,216,94,.34),transparent 30%),
      linear-gradient(180deg,#FFFDF8 0%,#FFF8E2 100%)!important;
    color:var(--mf-brand-ink)!important;
  }

  .login-hero,
  .mobile-yellow-hero{
    min-height:auto!important;
    padding:20px 14px 18px!important;
    background:linear-gradient(145deg,#FFD65D 0%,#F8C344 58%,#FFE38A 100%)!important;
    color:var(--mf-brand-ink)!important;
    border-radius:0 0 28px 28px!important;
    box-shadow:0 12px 30px rgba(189,135,12,.16)!important;
    position:relative;
    overflow:hidden;
  }

  .login-hero:before,
  .mobile-yellow-hero:before{
    content:"";
    position:absolute;
    inset:auto -60px -90px auto;
    width:190px;
    height:190px;
    border-radius:50%;
    background:rgba(255,255,255,.20);
  }

  .login-hero:after,
  .mobile-yellow-hero:after{
    content:"";
    position:absolute;
    left:-60px;
    top:-70px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
  }

  .login-hero h1,
  .login-hero h2,
  .mobile-yellow-hero h1,
  .mobile-yellow-hero h2{
    color:#4A2A1A!important;
    text-shadow:none!important;
  }

  .login-hero p,
  .login-hero .eyebrow,
  .login-hero .module-kicker,
  .mobile-yellow-hero p,
  .mobile-yellow-hero .eyebrow{
    color:#6D4B2F!important;
    opacity:1!important;
  }

  .login-hero img,
  .mobile-yellow-hero img{
    width:100%!important;
    max-height:255px!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:22px!important;
    border:2px solid rgba(255,255,255,.60)!important;
    box-shadow:0 12px 24px rgba(145,96,11,.14)!important;
    margin:0 0 18px!important;
  }

  .login-hero .hero-note,
  .login-hero .hero-box,
  .login-hero .tagline-box{
    background:rgba(255,255,255,.72)!important;
    color:#4A3225!important;
    border:1px solid rgba(255,255,255,.86)!important;
    backdrop-filter:blur(8px);
    border-radius:18px!important;
  }

  .login-panel,
  .mobile-yellow-panel{
    padding:20px 14px 110px!important;
    background:transparent!important;
  }

  .login-card,
  .mobile-yellow-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 20px!important;
    border-radius:24px!important;
    background:#FFFFFF!important;
    border:1px solid rgba(178,129,18,.12)!important;
    box-shadow:0 16px 36px rgba(128,91,23,.10)!important;
  }

  .login-card h1,
  .login-card h2,
  .mobile-yellow-card h1,
  .mobile-yellow-card h2{
    color:#4A2E20!important;
    font-size:2rem!important;
    line-height:1.15!important;
  }

  .login-card input,
  .mobile-yellow-card input{
    min-height:52px!important;
    border-radius:15px!important;
    font-size:1rem!important;
    border:1px solid #EBD79B!important;
    background:#FFFEFB!important;
  }

  .login-card button,
  .mobile-yellow-card button{
    min-height:52px!important;
    border-radius:15px!important;
  }
}

/* ---------- MOBILE APP SHELL ---------- */
@media (max-width:760px){
  .art-topbar{
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid #F1E5C7!important;
    box-shadow:0 4px 18px rgba(100,71,27,.05)!important;
  }

  .art-main{
    background:
      radial-gradient(circle at 100% 0%,rgba(247,198,74,.15),transparent 28%),
      linear-gradient(180deg,#FFFDF9 0%,#FFF 100%)!important;
  }

  .management-page,
  .dashboard-page,
  main>section{
    background:transparent!important;
  }

  .section-head{
    margin-bottom:14px!important;
  }

  .section-head h1,
  .section-head h2{
    color:#43291D!important;
  }

  .module-kicker{
    color:#C28B00!important;
  }

  /* Cards become cleaner + brighter */
  .table-card,
  .permission-card,
  .setting-card,
  .billing-main,
  .card,
  .summary-card,
  .metric-card,
  .dashboard-card,
  .attendance-panel{
    background:#FFFFFF!important;
    border:1px solid #F0E5CB!important;
    box-shadow:0 10px 26px rgba(111,78,35,.07)!important;
  }

  .summary-card:after,
  .metric-card:after{
    background:rgba(247,198,74,.18)!important;
  }

  .summary-card,
  .metric-card{
    border-top:3px solid #F7C64A!important;
  }

  /* Buttons */
  button.primary,
  .btn.primary,
  .setting-save{
    background:linear-gradient(135deg,#FFD75F,#F7C64A)!important;
    color:#4A2D1F!important;
    box-shadow:0 8px 18px rgba(232,175,27,.20)!important;
  }

  button.secondary,
  .btn.secondary{
    background:#FFFDF7!important;
    border:1px solid #EED9A2!important;
    color:#674632!important;
  }

  /* Tabs */
  .tabs{
    background:#FFF3C8!important;
    border:1px solid #F3DF9D!important;
  }

  .tabs button.active{
    background:#FFFFFF!important;
    color:#4A2D1F!important;
    box-shadow:0 5px 12px rgba(114,78,29,.08)!important;
  }

  /* Tables */
  .table-head{
    background:#FFF8E3!important;
    color:#6B503B!important;
  }

  .table-row:hover{
    background:#FFFDF6!important;
  }

  /* Forms */
  input,select,textarea{
    background:#FFFFFF!important;
    border:1px solid #E8D7AE!important;
  }

  input:focus,select:focus,textarea:focus{
    border-color:#F1BE2D!important;
    box-shadow:0 0 0 4px rgba(247,198,74,.16)!important;
  }

  /* Mobile bottom nav: yellow highlight, no brown */
  .art-sidebar{
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid #EEDFBF!important;
    box-shadow:0 -8px 24px rgba(110,77,29,.08)!important;
  }

  .art-sidebar button,
  .art-sidebar a,
  .art-sidebar .nav-item{
    color:#7A6B60!important;
    background:transparent!important;
  }

  .art-sidebar .active{
    background:#FFF3C5!important;
    color:#D29400!important;
    box-shadow:none!important;
  }

  /* yellow dot / badge language */
  .status.active,
  .badge.active{
    background:#FFF0B0!important;
    color:#8A6200!important;
  }

  .version-badge{
    background:#FFF2BD!important;
    color:#6D4A17!important;
    border:1px solid #ECD98E!important;
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width:430px){
  .login-hero,
  .mobile-yellow-hero{
    padding:14px 10px 16px!important;
  }

  .login-hero img,
  .mobile-yellow-hero img{
    max-height:220px!important;
    border-radius:18px!important;
  }

  .login-panel,
  .mobile-yellow-panel{
    padding:14px 10px 96px!important;
  }

  .login-card,
  .mobile-yellow-card{
    padding:20px 16px!important;
    border-radius:20px!important;
  }

  .management-page,
  .dashboard-page,
  main>section{
    padding-top:12px!important;
  }
}

/* =========================================================
   PHASE 14 — YELLOW BRAND SYSTEM FOR DESKTOP + MOBILE
   桌機與手機統一：黃色＋白色為主，咖啡色只作文字與細節
   ========================================================= */

@media (min-width:761px){
  body{
    background:
      radial-gradient(circle at 88% 2%,rgba(255,214,89,.22),transparent 30%),
      linear-gradient(180deg,#FFFDF8 0%,#FFF9E7 100%)!important;
  }

  .login-page{
    background:
      radial-gradient(circle at 85% 5%,rgba(255,217,101,.34),transparent 30%),
      linear-gradient(135deg,#FFFDF8 0%,#FFF6D1 100%)!important;
  }

  .login-hero{
    background:
      linear-gradient(145deg,#FFD75F 0%,#F7C64A 52%,#FFE790 100%)!important;
    color:#4A3225!important;
    border-radius:0!important;
  }

  .login-hero h1,
  .login-hero h2,
  .login-hero p,
  .login-hero .eyebrow,
  .login-hero .module-kicker{
    color:#4A3225!important;
    opacity:1!important;
  }

  .login-hero img{
    border:2px solid rgba(255,255,255,.68)!important;
    box-shadow:0 18px 38px rgba(140,95,16,.14)!important;
  }

  .login-hero .hero-note,
  .login-hero .hero-box,
  .login-hero .tagline-box{
    background:rgba(255,255,255,.74)!important;
    color:#4A3225!important;
    border:1px solid rgba(255,255,255,.88)!important;
    backdrop-filter:blur(8px);
  }

  .login-panel{
    background:#FFFDF9!important;
  }

  .login-card{
    background:#FFFFFF!important;
    border:1px solid #F0E1B6!important;
    box-shadow:0 22px 60px rgba(113,80,28,.10)!important;
  }

  .art-sidebar{
    background:linear-gradient(180deg,#FFFDF7 0%,#FFF7D7 100%)!important;
    border-right:1px solid #F1E1B3!important;
    box-shadow:8px 0 28px rgba(111,77,23,.05)!important;
  }

  .art-sidebar .active{
    background:linear-gradient(135deg,#FFD860,#F7C64A)!important;
    color:#4A2D1F!important;
    box-shadow:0 10px 24px rgba(225,169,20,.22)!important;
  }

  .art-sidebar button:hover,
  .art-sidebar a:hover,
  .art-sidebar .nav-item:hover{
    background:#FFF1B6!important;
  }

  .art-topbar{
    background:rgba(255,255,255,.94)!important;
    border-bottom:1px solid #F0E2BD!important;
    box-shadow:0 4px 18px rgba(97,66,24,.05)!important;
  }

  .art-main{
    background:
      radial-gradient(circle at 100% 0%,rgba(247,198,74,.13),transparent 28%),
      linear-gradient(180deg,#FFFDF9 0%,#FFFFFF 100%)!important;
  }

  .management-page,
  .dashboard-page,
  main>section{
    background:transparent!important;
  }

  .table-card,
  .permission-card,
  .setting-card,
  .billing-main,
  .card,
  .summary-card,
  .metric-card,
  .dashboard-card,
  .attendance-panel{
    background:#FFFFFF!important;
    border:1px solid #F0E5CA!important;
    box-shadow:0 12px 30px rgba(103,72,29,.07)!important;
  }

  .summary-card,
  .metric-card{
    border-top:3px solid #F7C64A!important;
  }

  .summary-card:after,
  .metric-card:after{
    background:rgba(247,198,74,.18)!important;
  }

  .table-head{
    background:#FFF8E2!important;
    color:#70503B!important;
  }

  .table-row:hover{
    background:#FFFDF6!important;
  }

  .tabs{
    background:#FFF3C7!important;
    border:1px solid #F0D990!important;
  }

  .tabs button.active{
    background:#FFFFFF!important;
    color:#4A2D1F!important;
    box-shadow:0 5px 14px rgba(105,73,27,.08)!important;
  }

  button.primary,
  .btn.primary,
  .setting-save{
    background:linear-gradient(135deg,#FFD65B,#F7C64A)!important;
    color:#4A2D1F!important;
    box-shadow:0 9px 22px rgba(224,167,20,.22)!important;
  }

  button.primary:hover,
  .btn.primary:hover,
  .setting-save:hover{
    box-shadow:0 13px 28px rgba(224,167,20,.28)!important;
  }

  button.secondary,
  .btn.secondary{
    background:#FFFDF8!important;
    color:#694936!important;
    border:1px solid #EBD8A9!important;
  }

  input,select,textarea{
    background:#FFFFFF!important;
    border:1px solid #E7D5A9!important;
  }

  input:focus,select:focus,textarea:focus{
    border-color:#F0BC28!important;
    box-shadow:0 0 0 4px rgba(247,198,74,.14)!important;
  }

  .version-badge{
    background:#FFF0AF!important;
    color:#714B10!important;
    border:1px solid #E8D27D!important;
  }

  .status.active,
  .badge.active{
    background:#FFF1B7!important;
    color:#8C6500!important;
  }

  .edit-modal{
    background:#FFFDF8!important;
    border:1px solid #EEDFB9!important;
    box-shadow:0 28px 80px rgba(86,58,24,.16)!important;
  }

  .modal-head{
    background:linear-gradient(180deg,#FFF8DF,#FFFDF8)!important;
    border-bottom:1px solid #F0E4C7!important;
  }
}

@media (min-width:1400px){
  .art-shell{
    grid-template-columns:240px minmax(0,1fr)!important;
  }

  .management-page,
  .dashboard-page,
  main>section{
    max-width:1800px!important;
    padding-left:52px!important;
    padding-right:52px!important;
  }
}

/* Phase 18: 開課頁取消班級名稱欄位 */
.class5-cols{
  display:grid;
  grid-template-columns:minmax(160px,1.1fr) minmax(220px,1.5fr) minmax(150px,.9fr) minmax(150px,.9fr) minmax(220px,1.25fr);
  gap:14px;
  align-items:center;
}
@media(max-width:900px){
  .class5-cols{
    min-width:900px;
  }
}

/* Phase 19 linked finance */
.course7-cols{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(100px,.7fr) minmax(110px,.8fr) minmax(110px,.8fr) minmax(120px,.9fr) 90px minmax(190px,1.2fr);gap:14px;align-items:center}
.cards article small{display:block;margin-top:5px;opacity:.65;font-size:12px}
@media(max-width:900px){.course7-cols{min-width:1000px}}

/* Phase 20 — Monthly settlement action */
.settle-now-btn{
  min-height:44px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  font-weight:800;
  background:linear-gradient(135deg,#F7C94A,#FFD96B);
  color:#56311F;
  box-shadow:0 8px 22px rgba(120,83,16,.14);
  cursor:pointer;
  white-space:nowrap;
}
.settle-now-btn:disabled{opacity:.5;cursor:not-allowed}

/* Phase 21 — course term one-off fees */
.course9-cols{
  display:grid;
  grid-template-columns:minmax(180px,1.35fr) minmax(90px,.65fr) minmax(100px,.7fr) minmax(100px,.7fr) minmax(160px,1fr) minmax(180px,1.15fr) minmax(105px,.75fr) 82px minmax(185px,1.15fr);
  gap:12px;
  align-items:center;
}
.course9-cols small{display:block;margin-top:4px;opacity:.68}
@media(max-width:1100px){.course9-cols{min-width:1250px}}

/* Phase 22 — course finance cleanup */
.course9-cols > div small{line-height:1.35}

/* Phase 23 — Four-level profit report */
.profit-levels{display:grid;gap:24px}
.profit-section{display:grid;gap:10px}
.profit-section-title{display:flex;align-items:baseline;gap:12px;padding:0 4px}
.profit-section-title strong{font-family:Georgia,'Noto Serif TC',serif;font-size:24px;color:#56311F}
.profit-section-title span{font-size:13px;opacity:.62}
.profit-cols{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(6,minmax(105px,.8fr)) minmax(100px,.7fr);gap:12px;align-items:center}
@media(max-width:1000px){.profit-cols{min-width:1050px}}

/* Phase 24 — course CRUD actions always visible */
.course9-cols{
  grid-template-columns:minmax(190px,1.35fr) minmax(150px,.9fr) minmax(90px,.65fr) minmax(100px,.7fr) minmax(100px,.7fr) minmax(140px,.9fr) minmax(180px,1.1fr) minmax(150px,1fr) minmax(120px,.8fr);
}
.course9-cols .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.course9-cols .mini.primary{
  background:linear-gradient(135deg,#F7C94A,#FFD96B);
  color:#56311F;
  font-weight:800;
}
@media(max-width:760px){
  .course9-cols{
    min-width:1100px;
  }
  .course9-cols .actions{
    position:sticky;
    left:0;
    z-index:2;
  }
}

/* Phase 26 — complete profit report UX */
.profit-toolbar{flex-wrap:wrap}
.scope-note{
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px 16px;
  margin-bottom:18px;
  border:1px solid rgba(247,201,74,.45);
  border-radius:14px;
  background:#FFF9E8;
}
.scope-note strong{color:#56311F}
.scope-note span{font-size:13px;opacity:.7}
.zero-row{background:rgba(255,249,232,.55)}
@media(max-width:760px){
  .scope-note{align-items:flex-start;flex-direction:column}
  .profit-toolbar select,.profit-toolbar input,.profit-toolbar button{min-height:46px}
}