/* Darul Furqan admin — modern Apple-style shell (loaded last). Desktop: fixed sidebar. Tablet: glass dock. Phone: unchanged drawer. */
:root{--sh-bg:#f5f5f7;--sh-card:#fff;--sh-ink:#1d1d1f;--sh-mut:#86868b;--sh-line:rgba(0,0,0,.08);--sh-pill:#1d1d1f;--sh-pill-ink:#fff;--sh-glass:rgba(255,255,255,.66);--sh-glass-line:rgba(255,255,255,.75);--sh-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 34px rgba(0,0,0,.06);--sh-acc:#50B2AD}
html[data-theme="dark"]{--sh-bg:#000;--sh-card:#1c1c1e;--sh-ink:#f5f5f7;--sh-mut:#98989f;--sh-line:rgba(255,255,255,.1);--sh-pill:#f5f5f7;--sh-pill-ink:#1d1d1f;--sh-glass:rgba(40,40,44,.62);--sh-glass-line:rgba(255,255,255,.12);--sh-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.45)}

/* ---- brand: no teal logo, plain black name ---- */
.df-nav-brand .df-monogram{display:none!important}
.df-nav-brand{padding:22px 22px 14px!important;gap:0!important;background:none!important;border:0!important}
.df-nav-brand strong{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif!important;font-size:19px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--sh-ink)!important;text-transform:none!important;display:block;line-height:1.15}
.df-nav-brand small{font-size:12.5px!important;color:var(--sh-mut)!important;display:block;margin-top:2px}

/* ---- page change animation ---- */
@keyframes shIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.main>.page.active,.main .page.active{animation:shIn .45s cubic-bezier(.22,1,.36,1) backwards}
@media(prefers-reduced-motion:reduce){.main .page.active{animation:none}}

/* ---- look & feel of content ---- */
html:not([data-theme="dark"]) body{background:var(--sh-bg)!important}
.df-panel,.panel,.card,.df-stat{background:var(--sh-card)!important;border:0!important;border-radius:22px!important;box-shadow:var(--sh-shadow)!important}
.df-stat:hover,.df-panel:hover{box-shadow:var(--sh-shadow)!important}
.df-title,.topbar-title,.page>h1,.df-dashboard-title{font-size:clamp(26px,3vw,34px)!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--sh-ink)!important}
.btn-primary,.df-button:not(.ghost),.df-attn button{background:var(--sh-pill)!important;color:var(--sh-pill-ink)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;font-weight:600!important;padding-inline:18px!important}
.df-button.ghost,.btn-secondary,.df-dashboard-actions button{background:var(--sh-card)!important;border:0!important;box-shadow:0 0 0 1px var(--sh-line)!important;border-radius:999px!important;color:var(--sh-ink)!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:14px!important;border:1px solid var(--sh-line)!important;background:var(--sh-card)!important;color:var(--sh-ink)!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--sh-acc)!important;box-shadow:0 0 0 4px rgba(80,178,173,.18)!important}
table{border-collapse:separate!important;border-spacing:0}
thead th{background:transparent!important;color:var(--sh-mut)!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;border-bottom:1px solid var(--sh-line)!important}
tbody td{border-bottom:1px solid var(--sh-line)!important}
tbody tr{transition:background .15s}tbody tr:hover{background:rgba(120,120,128,.07)!important}
.df-topbar.th{background:var(--sh-glass)!important;border-bottom:1px solid var(--sh-line)!important;box-shadow:none!important;-webkit-backdrop-filter:saturate(180%) blur(24px)!important;backdrop-filter:saturate(180%) blur(24px)!important}
.df-search-trigger{border-radius:999px!important;background:rgba(120,120,128,.12)!important;border:0!important;box-shadow:none!important}
.df-top-icon,.df-user{border-radius:50%!important;color:var(--sh-ink)!important;background:rgba(120,120,128,.12)!important;border:0!important}.df-top-icon i{color:var(--sh-ink)!important}

/* ---- DESKTOP: sidebar always visible, no toggle ---- */
@media(min-width:1100px){
  html body .df-nav.nav{transform:none!important;visibility:visible!important;left:0!important;top:0!important;bottom:0!important;width:268px!important;border-radius:0!important;background:var(--sh-glass)!important;-webkit-backdrop-filter:saturate(180%) blur(30px)!important;backdrop-filter:saturate(180%) blur(30px)!important;border-right:1px solid var(--sh-line)!important;box-shadow:none!important;z-index:60!important}
  @media(min-width:1500px){html body .main{--z:1.14;zoom:1.14}}
  @media(min-width:2100px){html body .main{--z:1.32;zoom:1.32}}
  .df-menu-button,.df-nav-close,.df-scrim,.nav-overlay{display:none!important}
  html body .main{--z:1;zoom:1;margin-left:calc(268px / var(--z))!important;max-width:calc((100vw - 268px) / var(--z))!important;min-width:0!important;width:auto!important;box-sizing:border-box}
  .df-nav .df-nav-bottom{padding:8px 12px 12px!important;border-top:1px solid var(--sh-line)!important;background:transparent!important}
  .df-nav .df-nav-bottom button{height:32px!important;padding:0 12px!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--sh-mut)!important;font-size:13px!important;font-weight:500!important;display:flex!important;align-items:center;gap:10px;width:100%;border-radius:10px!important;justify-content:flex-start!important}
  .df-nav .df-nav-bottom button:hover{background:rgba(120,120,128,.12)!important;color:var(--sh-ink)!important}
  .df-nav .df-nav-bottom{display:flex!important;flex-direction:column!important;gap:0!important}.df-nav .df-nav-bottom button{min-height:0!important;line-height:1!important}
  .df-nav .df-nav-bottom button i{width:20px;text-align:center;color:var(--sh-mut)!important}
  .df-nav .df-nav-footnote{font-size:11px!important;color:var(--sh-mut)!important;padding:6px 12px 0!important;text-align:left!important}
  html body .df-topbar.th{left:268px!important;width:auto!important;right:0!important}
  .df-nav .df-nav-scroll{padding:6px 12px 24px!important}
  .df-nav .df-group{margin-bottom:6px}
  html body .df-nav .df-group-title{font-size:11.5px!important;font-weight:600!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--sh-mut)!important;padding:14px 12px 6px!important}
  .df-nav .nav-item{height:38px!important;padding:0 12px!important;margin:1px 0!important;border-radius:12px!important;display:flex!important;align-items:center!important;gap:12px!important;color:var(--sh-ink)!important;font-size:14.5px!important;font-weight:500!important;transform:none!important;background:transparent!important;transition:background .2s,color .2s!important}
  .df-nav .nav-item i{width:20px!important;text-align:center;font-size:15px!important;color:var(--sh-mut)!important;opacity:1!important;transition:color .2s}
  .df-nav .nav-item:hover{background:rgba(120,120,128,.12)!important;transform:none!important}
  .df-nav .nav-item.active{background:var(--sh-pill)!important;color:var(--sh-pill-ink)!important;font-weight:600!important}
  .df-nav .nav-item.active i{color:var(--sh-pill-ink)!important}
  .df-nav .nav-lbl{opacity:1!important;transform:none!important}
  html:not([data-theme="dark"]) .df-nav .nav-item.active i{color:#fff!important}
}

/* ---- TABLET: no sidebar, glass dock + box sheet ---- */
#dfDock,#dfSheet,#dfSheetScrim{display:none}
@media(min-width:769px) and (max-width:1099px){
  html body .df-nav.nav,.df-menu-button,.df-scrim,.nav-overlay{display:none!important}
  html body .main{margin-left:0!important;padding-bottom:130px!important}
  html body .df-topbar.th{left:0!important;right:0!important;width:auto!important}
  body:not(.df-login-mode) #dfDock{display:flex}
  #dfDock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;gap:6px;padding:8px;border-radius:30px;background:var(--sh-glass);border:1px solid var(--sh-glass-line);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);box-shadow:0 12px 40px rgba(0,0,0,.16)}
  #dfDock button{all:unset;box-sizing:border-box;width:82px;padding:9px 0 7px;border-radius:22px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--sh-mut);font:600 11px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;cursor:pointer;transition:background .25s,color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
  #dfDock button i{font-size:22px;height:26px;display:flex;align-items:center}
  #dfDock button:active{transform:scale(.92)}
  #dfDock button.on{background:var(--sh-pill);color:var(--sh-pill-ink)}
  #dfDock button.cur:not(.on){color:var(--sh-ink)}
  body:not(.df-login-mode) #dfSheetScrim.show{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.12);animation:shFade .25s both}
  body:not(.df-login-mode) #dfSheet.show{display:block}
  #dfSheet{position:fixed;left:50%;bottom:112px;width:min(680px,92vw);transform:translateX(-50%);z-index:75;padding:18px;border-radius:30px;background:var(--sh-glass);border:1px solid var(--sh-glass-line);-webkit-backdrop-filter:saturate(180%) blur(34px);backdrop-filter:saturate(180%) blur(34px);box-shadow:0 24px 70px rgba(0,0,0,.22);transform-origin:50% 100%;animation:shSheet .38s cubic-bezier(.22,1,.36,1) both}
  #dfSheet h3{font:800 20px -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.02em;color:var(--sh-ink);margin:2px 6px 14px}
  #dfSheet .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  #dfSheet .box{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px;border-radius:20px;background:var(--sh-card);box-shadow:0 0 0 1px var(--sh-line);color:var(--sh-ink);font:600 13.5px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;animation:shBox .4s cubic-bezier(.22,1,.36,1) both}
  #dfSheet .box:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--sh-line),0 10px 24px rgba(0,0,0,.08)}
  #dfSheet .box:active{transform:scale(.96)}
  #dfSheet .box .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(80,178,173,.14);color:var(--sh-acc);font-size:17px}
  #dfSheet .box.on{background:var(--sh-pill);color:var(--sh-pill-ink)}
  #dfSheet .box.on .ic{background:rgba(255,255,255,.18);color:inherit}
  @keyframes shFade{from{opacity:0}to{opacity:1}}
  @keyframes shSheet{from{opacity:0;transform:translateX(-50%) translateY(26px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
  @keyframes shBox{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
}

/* ===== v2: uniform top bar, curved tables, no-gradient active item, hover sidebar ===== */
.df-top-actions{align-items:center!important;gap:8px!important}
.df-search-trigger{height:40px!important;border-radius:999px!important;background:rgba(120,120,128,.12)!important;border:0!important;box-shadow:none!important}
.df-top-icon,.df-user{position:relative;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center!important;background:rgba(120,120,128,.12)!important;border:0!important;box-shadow:none!important;font-weight:700!important;font-size:14px!important;line-height:1!important}
.df-top-icon i{font-size:15px!important;margin:0!important}
.df-global-month{height:40px!important;box-sizing:border-box;border-radius:999px!important;background:rgba(120,120,128,.12)!important;border:0!important;box-shadow:none!important;padding:0 5px 0 14px!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
.df-global-month select,#dfGlobalMonth{background:transparent!important;border:0!important;box-shadow:none!important;height:auto!important;font-weight:600!important;padding-top:0!important;padding-bottom:0!important;color:var(--sh-ink)!important}
.df-global-month i{color:var(--sh-ink)!important}
#dfNewMonthBtn{width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;border-radius:50%!important;background:var(--sh-pill)!important;color:var(--sh-pill-ink)!important;border:0!important;display:grid!important;place-items:center!important;box-shadow:none!important}
#dfNewMonthBtn i{color:var(--sh-pill-ink)!important;font-size:12px!important}
.df-top-month{font-size:12.5px!important;color:var(--sh-mut)!important}

/* everything curved: tables, headers, wraps */
.df-table-wrap,.tbl-wrap,.df-card-table{border-radius:20px!important;overflow:hidden}
.df-table thead th,table thead th{background:rgba(120,120,128,.09)!important;border-bottom:0!important}
.df-table thead th:first-child,table thead th:first-child{border-top-left-radius:14px!important;border-bottom-left-radius:14px!important}
.df-table thead th:last-child,table thead th:last-child{border-top-right-radius:14px!important;border-bottom-right-radius:14px!important}
.df-table tbody tr:hover td,.df-table tr:hover td{background:rgba(120,120,128,.06)!important}
.df-table tbody tr:hover td:first-child{border-radius:12px 0 0 12px}.df-table tbody tr:hover td:last-child{border-radius:0 12px 12px 0}
.df-input,.df-select,.df-toolbar input,.df-toolbar select,.filter-control{border-radius:14px!important}
.df-toolbar .df-button,.df-linkbtn,.df-quick-paid,.df-paid-done{border-radius:999px!important}
.df-badge,.df-pill,.pill-btn{border-radius:999px!important}
.modal,.modal-box,.df-modal,.mbox{border-radius:26px!important}

/* sidebar: no gradient, graphite pill */
.df-nav .nav-item.active,.df-nav .nav-item.active:hover{background:var(--sh-pill)!important;background-image:none!important;box-shadow:none!important;color:var(--sh-pill-ink)!important}
.df-nav .nav-item.active::before,.df-nav .nav-item.active::after{display:none!important}

/* DESKTOP: slim icon rail that opens on hover (content never moves) */
@media(min-width:1100px){
  html body .df-nav.nav{width:76px!important;overflow:hidden!important;z-index:900!important;transition:width .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,background .3s!important}
  html body .df-nav.nav:hover,html body .df-nav.nav:focus-within{width:268px!important;box-shadow:0 24px 70px rgba(0,0,0,.2)!important}
  html body .main{margin-left:calc(76px / var(--z))!important;max-width:calc((100vw - 76px) / var(--z))!important}
  html body .df-topbar.th{left:76px!important}
  .df-nav .nav-item{padding-left:17px!important;padding-right:12px!important;white-space:nowrap!important}
  html body .df-nav .nav-item .nav-lbl,html body .df-nav .df-group-title,html body .df-nav .df-nav-brand>div,html body .df-nav .df-nav-footnote{opacity:0!important;transition:opacity .18s!important;white-space:nowrap}
  html body .df-nav:hover .nav-item .nav-lbl,html body .df-nav:focus-within .nav-item .nav-lbl,html body .df-nav:hover .df-group-title,html body .df-nav:focus-within .df-group-title,html body .df-nav:hover .df-nav-brand>div,html body .df-nav:focus-within .df-nav-brand>div,html body .df-nav:hover .df-nav-footnote,html body .df-nav:focus-within .df-nav-footnote{opacity:1!important;transition-delay:.08s!important}
  html body .df-nav .df-group-title{height:26px;overflow:hidden;padding-top:10px!important}
  .df-nav .df-nav-bottom button{font-size:0!important;padding-left:17px!important;gap:12px!important}
  .df-nav .df-nav-bottom button i{font-size:15px!important}
  .df-nav:hover .df-nav-bottom button,.df-nav:focus-within .df-nav-bottom button{font-size:13px!important}
  .df-nav-brand{position:relative;min-height:60px}
  .df-nav-brand::before{content:"DF";position:absolute;left:14px;top:18px;width:48px;height:38px;border-radius:13px;background:var(--sh-pill);color:var(--sh-pill-ink);font:800 15px -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.02em;display:grid;place-items:center;transition:opacity .2s}
  .df-nav:hover .df-nav-brand::before,.df-nav:focus-within .df-nav-brand::before{opacity:0}
  .df-nav-brand strong,.df-nav-brand small{padding-left:0}
  .df-nav .df-nav-scroll{overflow-x:hidden!important}
}

/* v2b: beat older theme rules (gradient/teal/blue) with higher specificity */
html body .nav.df-nav .nav-item:hover{background:rgba(120,120,128,.12)!important;transform:none!important;color:var(--sh-ink)!important}
html body .nav.df-nav .nav-item.active,html body .nav.df-nav .nav-item.active:hover{background:var(--sh-pill)!important;background-image:none!important;color:var(--sh-pill-ink)!important;box-shadow:none!important}
html body .nav.df-nav .nav-item.active i,html body .nav.df-nav .nav-item.active .nav-lbl{color:var(--sh-pill-ink)!important}
html[data-theme="dark"] body .nav.df-nav .nav-item.active,html[data-theme="dark"] body .nav.df-nav .nav-item.active:hover{background:var(--sh-pill)!important;background-image:none!important;color:var(--sh-pill-ink)!important}
html[data-theme="dark"] body .nav.df-nav .nav-item.active i{color:var(--sh-pill-ink)!important}
html[data-theme="dark"] body .nav.df-nav .nav-item:hover{background:rgba(255,255,255,.1)!important;color:var(--sh-ink)!important}
@media(min-width:1100px){html body .df-nav.nav{z-index:3000!important}}
.df-top-actions>*{order:10}.df-top-actions>.df-search-trigger{order:1}.df-top-actions>.df-global-month{order:2}.df-top-actions>#dfAttnBell{order:3}.df-top-actions>.df-appearance-top{order:4}.df-top-actions>.df-top-icon:not(#dfAttnBell):not(.df-appearance-top){order:5}.df-top-actions>.df-top-month{order:8}.df-top-actions>.df-user{order:9}
.df-attn-bell{color:#d9822b!important}.df-attn-bell i{color:#d9822b!important}
.df-top-icon,.df-user{border-radius:50%!important}

/* ===== v3: desktop side bar = round icons when closed, opens on hover; Overview + Settings merged into hub pages ===== */
:root{--sh-ico:#3a3a3c;--ih:40px}html[data-theme="dark"]{--sh-ico:#d1d1d6}
#dfSide,#dfHub,.df-brandtop{display:none}
@media(min-width:1100px){
  html body #mainNav,html body .df-nav.nav{display:none!important}
  html body .main{margin-left:calc(76px / var(--z))!important;max-width:calc((100vw - 76px) / var(--z))!important}
  html body .df-topbar.th{left:0!important}
  .df-brandtop{display:flex;flex-direction:column;justify-content:center;margin-right:20px;padding-right:20px;border-right:1px solid var(--sh-line);line-height:1.15}
  .df-brandtop strong{font:800 17px -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.02em;color:var(--sh-ink)}
  .df-brandtop small{font-size:11.5px;color:var(--sh-mut);margin-top:2px}
  body:not(.df-login-mode) #dfRail{display:flex;flex-direction:column;position:fixed;left:0;top:72px;bottom:0;width:76px;z-index:1200;overflow:hidden;padding:12px 0;box-sizing:border-box;background:var(--sh-glass);border-right:1px solid var(--sh-line);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);transition:width .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
  body:not(.df-login-mode) #dfRail:hover{width:252px;box-shadow:0 24px 70px rgba(0,0,0,.2)}
  #dfRail .rb{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:calc(100% - 24px);margin:0 0 2px 12px;height:var(--rh,44px);padding-left:calc((52px - var(--rh,44px))/2);border-radius:999px;cursor:pointer;color:var(--sh-ico);flex:0 0 auto;white-space:nowrap;overflow:hidden;transition:background .2s,color .2s}
  #dfRail .ci{flex:0 0 var(--rh,44px);width:var(--rh,44px);height:var(--rh,44px);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
  #dfRail .ci i{font-size:var(--ri,18px);line-height:1;color:inherit}
  #dfRail .lb{font:400 14px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s;color:var(--sh-ink)}
  #dfRail:hover .lb{opacity:1;transition-delay:.1s}
  #dfRail .rb:hover .ci{background:rgba(120,120,128,.16)}
  #dfRail:hover .rb:hover{background:rgba(120,120,128,.13)}#dfRail:hover .rb:hover .ci{background:transparent}
  #dfRail:hover .rb.on{background:var(--sh-pill)}#dfRail:hover .rb.on .ci{background:transparent}#dfRail:hover .rb.on .lb{color:var(--sh-pill-ink);font-weight:500}
  #dfRail .rb:active .ci{transform:scale(.9)}
  #dfRail .rb.on .ci{background:var(--sh-pill);color:var(--sh-pill-ink)}
  #dfRail .rb.on .ci i{color:var(--sh-pill-ink)}
  #dfRail .sp{height:1px;margin:5px 22px 6px;background:var(--sh-line);flex:0 0 auto}
  body:not(.df-login-mode) #dfHub.show{display:block;position:fixed;left:76px;right:0;top:72px;bottom:0;z-index:1000;overflow:auto;background:var(--sh-bg);animation:shIn .4s cubic-bezier(.22,1,.36,1) both}
  #dfHub .hw{min-height:100%;box-sizing:border-box;padding:44px clamp(24px,5vw,80px) 80px;max-width:1100px;margin:0 auto}
  #dfHub h2{font:800 clamp(28px,3vw,38px) -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.03em;color:var(--sh-ink);margin:0}
  #dfHub p{margin:6px 0 34px;color:var(--sh-mut);font-size:15px}
  #dfHub .hg{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:30px 18px}
  #dfHub .hb{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:shIn .45s cubic-bezier(.22,1,.36,1) both}
  #dfHub .hb .ic{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--sh-card);box-shadow:var(--sh-shadow);color:var(--sh-ico);transition:background .25s,color .25s,transform .3s cubic-bezier(.22,1,.36,1)}
  #dfHub .hb .ic i{font-size:26px}
  #dfHub .hb .lb{font:600 14px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;color:var(--sh-ink);line-height:1.25}
  #dfHub .hb:hover .ic,#dfHub .hb.on .ic{background:var(--sh-pill);color:var(--sh-pill-ink)}
  #dfHub .hb:hover .ic{transform:translateY(-4px)}
  #dfHub .hb:active .ic{transform:scale(.92)}
}
/* tablet dock + sheet: same colours, round icons */
#dfDock button{color:var(--sh-ico)!important}#dfDock button.on{color:var(--sh-pill-ink)!important}
#dfSheet .box .ic{border-radius:50%!important;background:rgba(120,120,128,.14)!important;color:var(--sh-ico)!important}
#dfSheet .box:hover .ic{background:var(--sh-pill)!important;color:var(--sh-pill-ink)!important}
/* default icon colour: dark grey everywhere (not teal) */
.df-top-icon i,.df-title i,.topbar-title i,.df-stat i,.df-panel-head i,.df-dashboard-actions i,.df-quick i,.fc-panel-head i,.df-actions i,.df-search-trigger i{color:var(--sh-ico)!important}
.df-attn-bell i{color:#d9822b!important}
.rev-tile-icon,.df-stat-icon,.df-stat .ic,.df-quick-icon,.fc-stu-avatar,.df-avatar{border-radius:50%!important}
/* Fee calculator: roomy, no tiny scroll box */
.fc-wrap{grid-template-columns:minmax(340px,.85fr) minmax(380px,1.15fr)!important;gap:24px!important}
@media(max-width:900px){.fc-wrap{grid-template-columns:1fr!important}}
.fc-panel{border:0!important;border-radius:26px!important;box-shadow:var(--sh-shadow)!important;background:var(--sh-card)!important}
.fc-panel-head{background:transparent!important;border-bottom:1px solid var(--sh-line)!important;padding:18px 22px!important;font-size:1rem!important}
.fc-panel-head input{width:190px!important;border-radius:999px!important;padding:8px 14px!important}
#fcStudentList{max-height:none!important;overflow:visible!important;padding:10px 14px 18px!important}
.fc-stu-item{padding:11px 12px!important;border-radius:18px!important;margin-bottom:4px!important}
.fc-stu-item:hover{background:rgba(120,120,128,.09)!important}
.fc-stu-item.active{background:var(--sh-pill)!important;box-shadow:none!important;color:var(--sh-pill-ink)!important}
.fc-stu-item.active .fc-stu-name,.fc-stu-item.active .fc-stu-meta{color:var(--sh-pill-ink)!important}
.fc-stu-name{font-size:.95rem!important}.fc-stu-avatar{width:38px!important;height:38px!important;font-size:.72rem!important}
#fcSummaryPanel{position:sticky;top:96px;min-height:420px}
#fcSummaryPanel .fc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px}

/* v4: top bar = circles (beats older radius rules) */
html body .df-top-actions>.df-top-icon,html body .df-top-actions>.df-user,html body .df-menu-button{border-radius:50%!important;width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important}
html body .df-top-actions>.df-search-trigger,html body .df-top-actions>.df-global-month{border-radius:999px!important}
html body .df-global-month #dfNewMonthBtn{border-radius:50%!important}

/* merged one-window views (Overview / Settings) */
body.df-merged .main{display:flex!important;flex-direction:column}
body.df-merged .main>.page.mg{display:block!important;width:100%;box-sizing:border-box;margin-bottom:34px;padding-top:6px}
body.df-merged .main>.page.mg+.page.mg{border-top:1px solid var(--sh-line);padding-top:34px}
#dfMergeHead{width:100%;box-sizing:border-box;padding:22px 32px 10px}
#dfMergeHead h2{font:800 clamp(30px,3.2vw,40px) -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;letter-spacing:-.03em;color:var(--sh-ink);margin:0}
#dfMergeHead p{margin:6px 0 0;color:var(--sh-mut);font-size:15px}
#dfMergeHead .mg-acts{display:flex;flex-wrap:wrap;gap:22px 18px;margin-top:26px}
#dfMergeHead .hb{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;width:104px;text-align:center}
#dfMergeHead .hb .ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--sh-card);box-shadow:var(--sh-shadow);color:var(--sh-ico);transition:background .25s,color .25s,transform .3s cubic-bezier(.22,1,.36,1)}
#dfMergeHead .hb .ic i{font-size:21px}
#dfMergeHead .hb .lb{font:500 12.5px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;color:var(--sh-ink);line-height:1.25}
#dfMergeHead .hb:hover .ic{background:var(--sh-pill);color:var(--sh-pill-ink);transform:translateY(-3px)}

/* ===== v5: dashboard hero, students, salary, profile, lighter rail icons ===== */
#dfRail .ci{color:#66666b}html[data-theme="dark"] #dfRail .ci{color:#a1a1a8}#dfRail .ci i{font-size:var(--ri,17px)}
#dfRail .rb.on .ci,#dfRail .rb.on .ci i{color:var(--sh-pill-ink)}
.df-hero{background:linear-gradient(135deg,#0d1020 0%,#161a30 55%,#1d2140 100%);color:#fff;border-radius:34px;padding:34px 34px 30px;margin-bottom:22px;box-shadow:0 24px 60px rgba(13,16,32,.28);position:relative;overflow:hidden}
.df-hero::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(80,178,173,.28),transparent 68%);pointer-events:none}
.df-hero .df-title{color:#fff!important;margin:0!important}
.df-hero .df-subtitle{color:rgba(255,255,255,.62)!important;margin:6px 0 20px!important}
.df-hero .df-dashboard-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px!important}
.df-hero .df-dashboard-actions button{background:rgba(255,255,255,.1)!important;color:#fff!important;border:0!important;box-shadow:none!important;border-radius:999px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.df-hero .df-dashboard-actions button i{color:#fff!important}
.df-hero .df-dashboard-actions button:hover{background:rgba(255,255,255,.2)!important}
.df-hero .df-grid{margin:0!important}
.df-hero .df-stat,.df-hero .df-stat.green,.df-hero .df-stat.red,.df-hero .df-stat.blue,.df-hero .df-stat.amber{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important;color:#fff!important;border-radius:24px!important;min-height:120px!important}
.df-hero .df-stat::before{display:none!important}
.df-hero .df-stat label,.df-hero .df-stat small{color:rgba(255,255,255,.6)!important}
.df-hero .df-stat strong{color:#fff!important;font-size:clamp(26px,2.6vw,36px)!important;letter-spacing:-.03em}
.df-hero .df-stat.red strong{color:#ff8f87!important}
.df-hero .df-stat label i{width:34px;height:34px;border-radius:50%;display:inline-grid!important;place-items:center;background:rgba(255,255,255,.12);color:#fff!important;font-size:13px!important}
.df-hero .df-stat:hover{transform:none!important;background:rgba(255,255,255,.1)!important}
/* Students */
tr.tg-row td{padding:14px 6px 6px!important;border:0!important;background:transparent!important}
.tg-head,.tg-head[class*="tc"]{background:rgba(120,120,128,.1)!important;color:var(--sh-ink)!important;border:0!important;border-radius:999px!important;padding:8px 16px!important;font-weight:600!important}
.tg-head *{color:inherit!important}.tg-dot{width:9px!important;height:9px!important}
#stuBody tr:not(.tg-row) td{padding-top:11px!important;padding-bottom:11px!important}
#stuBody .btn-xs{width:34px;height:34px;padding:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center;border:0!important;box-shadow:none!important;background:rgba(120,120,128,.12)!important;color:var(--sh-ink)!important}
#stuBody .btn-xs.btn-primary{background:var(--sh-pill)!important;color:var(--sh-pill-ink)!important}
#stuBody .btn-xs.btn-danger{background:rgba(255,59,48,.12)!important;color:#ff3b30!important}
#stuBody .btn-xs i{margin:0!important}
.tbl-wrap,.df-table-wrap{background:var(--sh-card);box-shadow:var(--sh-shadow)}
/* Salary calculator */
.sal-summary{background:linear-gradient(135deg,#0d1020,#1d2140)!important;border-radius:30px!important;padding:26px 28px!important;box-shadow:0 20px 50px rgba(13,16,32,.25)}
.sal-item .sl{opacity:.6}.sal-item .sv{letter-spacing:-.02em}
.sstud{border:0!important;background:var(--sh-card)!important;border-radius:24px!important;padding:18px 20px!important;box-shadow:var(--sh-shadow)}
.sstud-name{font-size:.95rem!important}
.sd-val.c-green{color:#1f9d55!important}
.srec-stat,.tpay-card{border:0!important;border-radius:24px!important;background:var(--sh-card)!important;box-shadow:var(--sh-shadow)!important}
.tpay-avatar,.sstud .avatar{border-radius:50%!important}
.btn-success{background:rgba(52,199,89,.14)!important;color:#1f9d55!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
/* Slip window */
#slipOverlay .modal,#slipOverlay .modal-box,#slipOverlay>div>div{border-radius:30px!important}
/* Profile in Settings */
#dfProfile{margin:24px 0 8px;max-width:860px}
#dfProfile .pf-top{display:flex;align-items:center;gap:20px;margin-bottom:18px}
#dfProfile .pf-av{width:96px;height:96px;border-radius:50%;background:var(--sh-pill) center/cover no-repeat;color:var(--sh-pill-ink);display:grid;place-items:center;font:800 34px -apple-system,Inter,sans-serif;box-shadow:var(--sh-shadow)}
#dfProfile .pf-av-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#dfProfile .pf-av-btns small{flex-basis:100%;color:var(--sh-mut);font-size:12px}
#dfProfile .pf-btn,#dfProfile .pf-save{cursor:pointer;border:0;border-radius:999px;padding:10px 18px;font:600 13.5px -apple-system,Inter,sans-serif;background:var(--sh-pill);color:var(--sh-pill-ink);display:inline-block}
#dfProfile .pf-btn.ghost{background:rgba(120,120,128,.14);color:var(--sh-ink)}
#dfProfile .pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
#dfProfile .pf-card{background:var(--sh-card);border-radius:26px;padding:20px 22px;box-shadow:var(--sh-shadow);display:flex;flex-direction:column;gap:10px}
#dfProfile .pf-card h4{margin:0 0 2px;font:700 15px -apple-system,Inter,sans-serif;color:var(--sh-ink)}
#dfProfile .pf-card input{padding:11px 16px!important;border-radius:999px!important}
#dfProfile .pf-save{align-self:flex-start;margin-top:2px}
#dfProfile .pf-msg{font-size:13px;min-height:16px}#dfProfile .pf-msg.ok{color:#1f9d55}#dfProfile .pf-msg.bad{color:#ff3b30}
.df-user{background-size:cover!important;background-position:center!important}