/* ========================================================================== 
   CaseProfile UX/UI Rebuild · 2026-09
   Visual system: Studio Console / neutral canvas + graphite + indigo + mint
   This stylesheet is intentionally loaded last so legacy PHP logic can remain
   unchanged while every rendered screen shares one coherent design language.
   ========================================================================== */

:root{
  --ux-brand:#5b5cf0;
  --ux-brand-strong:#4647d8;
  --ux-brand-soft:#eeefff;
  --ux-mint:#13b8a6;
  --ux-coral:#f56f58;
  --ux-amber:#e9a23b;
  --ux-success:#12936f;
  --ux-danger:#d94e4e;
  --ux-info:#3578e5;
  --ux-ink:#171923;
  --ux-text:#343746;
  --ux-muted:#777c8e;
  --ux-line:#e5e7ef;
  --ux-line-strong:#d7dae5;
  --ux-canvas:#f5f6f9;
  --ux-surface:#ffffff;
  --ux-surface-2:#fafafe;
  --ux-sidebar:#171923;
  --ux-sidebar-2:#222532;
  --ux-radius-xs:9px;
  --ux-radius-sm:12px;
  --ux-radius:16px;
  --ux-radius-lg:22px;
  --ux-shadow-sm:0 2px 8px rgba(27,31,45,.06);
  --ux-shadow:0 14px 40px rgba(27,31,45,.08);
  --ux-shadow-lg:0 24px 70px rgba(27,31,45,.14);
  --ux-focus:0 0 0 4px rgba(91,92,240,.14);
}

html{background:var(--ux-canvas);scroll-behavior:smooth}
body{
  color:var(--ux-text);
  background:
    radial-gradient(circle at 10% -10%,rgba(91,92,240,.06),transparent 26rem),
    radial-gradient(circle at 100% 0,rgba(19,184,166,.05),transparent 24rem),
    var(--ux-canvas);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
*,*::before,*::after{box-sizing:border-box}
::selection{background:rgba(91,92,240,.18);color:var(--ux-ink)}
a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button,input,select,textarea{font:inherit}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:none!important;box-shadow:var(--ux-focus)!important}

/* ------------------------------ generic page ----------------------------- */
body:not(.sks-shell):not(.sks-login){
  min-height:100vh;
}
body:not(.sks-shell):not(.sks-login) > .container,
body:not(.sks-shell):not(.sks-login) > .container-fluid,
body:not(.sks-shell):not(.sks-login) > .page,
body:not(.sks-shell):not(.sks-login) > .page-wrap,
body:not(.sks-shell):not(.sks-login) > .wrapper,
body:not(.sks-shell):not(.sks-login) > .dashboard,
body:not(.sks-shell):not(.sks-login) > main{
  width:min(1480px,calc(100% - 40px));
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Old pages often use very large fixed padding. Normalize density. */
body.sks-themed.sks-embedded{padding:24px!important}
body.sks-themed.sks-embedded > *{max-width:1480px;margin-inline:auto}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.025em;color:var(--ux-ink)}
h1{font-size:clamp(1.65rem,2.2vw,2.25rem)}
h2{font-size:clamp(1.3rem,1.8vw,1.7rem)}
h3{font-size:1.12rem}
p{line-height:1.75}
small,.small,.text-muted,.sub,.help,.hint,.stat-hint{color:var(--ux-muted)!important}

/* ------------------------------- page heads ------------------------------ */
.page-title,.header-actions,.page > .header,.page-wrap > .page-title,.detail-header,.section-title,.project-title{
  color:var(--ux-ink)!important;
}
.page > .header,.page-wrap > .page-title,.header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 20px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.page > .header h1,.page-wrap > .page-title h2,.header-actions .page-title{
  margin:0!important;
  font-size:clamp(1.55rem,2vw,2rem)!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
}
.page > .header h1 i,.page-wrap > .page-title h2 i,.header-actions .page-title i{
  color:var(--ux-brand)!important;
}

/* -------------------------------- cards --------------------------------- */
.card,.list-card,.project-hero,.tab-shell,.section,.profile-card,.search-card,.box,.panel-card,.content-card,.stat,.quick,.filter-card{
  border:1px solid var(--ux-line)!important;
  border-radius:var(--ux-radius-lg)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--ux-shadow-sm)!important;
}
.card:hover,.quick:hover{border-color:#d9dbea!important}
.card-header,.modal-head,.modal-header,.detail-header{
  border-color:var(--ux-line)!important;
}

/* Stats */
.stats,.grid,.quick-grid{gap:14px!important}
.stats .stat,.grid .stat,.quick-grid .stat{
  position:relative;
  overflow:hidden;
  padding:18px!important;
  min-height:104px;
}
.stats .stat::after,.grid .stat::after,.quick-grid .stat::after{
  content:"";
  position:absolute;
  width:76px;height:76px;
  right:-28px;bottom:-34px;
  border-radius:50%;
  background:rgba(91,92,240,.07);
}
.stat-icon{
  width:42px!important;height:42px!important;
  display:grid!important;place-items:center!important;
  border-radius:13px!important;
  color:var(--ux-brand)!important;
  background:var(--ux-brand-soft)!important;
  font-size:1.05rem!important;
}
.stat-value,.stat strong{color:var(--ux-ink)!important;font-weight:850!important}
.stat-label{color:var(--ux-text)!important;font-weight:700!important}

/* -------------------------------- forms --------------------------------- */
label,.form-label{color:#4e5261!important;font-weight:700!important;font-size:.91rem!important}
.form-control,.form-select,.control,input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],input[type="url"],select,textarea{
  min-height:46px;
  border:1px solid var(--ux-line-strong)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--ux-ink)!important;
  box-shadow:0 1px 2px rgba(20,23,34,.02)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important;
}
textarea{min-height:120px;padding:12px 14px!important;resize:vertical}
.form-control:focus,.form-select:focus,.control:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(91,92,240,.64)!important;
  box-shadow:var(--ux-focus)!important;
  outline:none!important;
}
input::placeholder,textarea::placeholder{color:#a4a8b5!important}
input[readonly],input:disabled,select:disabled,textarea:disabled,.readonly{
  background:#f4f5f8!important;color:#858a99!important;cursor:not-allowed
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ux-brand)}
.form-group{margin-bottom:17px!important}
.filter,.filter-grid,.grid,.grid-3{gap:14px!important}

/* ------------------------------- buttons -------------------------------- */
.btn,.btn-primary,.btn-secondary,.btn-light,.btn-danger,.btn-warning,.btn-edit,.btn-delete,.btn-cancel,.btn-add,.custom-modal-btn,
button[type="submit"],input[type="submit"]{
  min-height:42px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  padding:9px 15px!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:none!important;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease!important;
}
.btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-light:hover,.btn-danger:hover,.btn-warning:hover,.btn-edit:hover,.btn-delete:hover,.btn-add:hover,button[type="submit"]:hover,input[type="submit"]:hover{
  transform:translateY(-1px)
}
.btn-primary,.btn-add,button[type="submit"],input[type="submit"],.custom-modal-btn{
  color:#fff!important;background:var(--ux-brand)!important;border-color:var(--ux-brand)!important;
  box-shadow:0 7px 18px rgba(91,92,240,.18)!important;
}
.btn-primary:hover,.btn-add:hover,button[type="submit"]:hover,input[type="submit"]:hover,.custom-modal-btn:hover{background:var(--ux-brand-strong)!important;border-color:var(--ux-brand-strong)!important}
.btn-secondary{color:#fff!important;background:var(--ux-ink)!important;border-color:var(--ux-ink)!important}
.btn-light,.btn-cancel{color:#505463!important;background:#fff!important;border-color:var(--ux-line)!important}
.btn-light:hover,.btn-cancel:hover{background:#f7f7fa!important;border-color:#ced1de!important;color:var(--ux-ink)!important}
.btn-danger,.btn-delete{color:#fff!important;background:var(--ux-danger)!important;border-color:var(--ux-danger)!important}
.btn-warning{color:#774d09!important;background:#fff6df!important;border-color:#f0d491!important}
.btn-sm{min-height:36px!important;padding:7px 10px!important;font-size:.86rem!important}
.actions,.action-row,.action-buttons,.modal-foot,.modal-footer-right{gap:8px!important}

/* ------------------------------- badges --------------------------------- */
.badge,.pill,.status-pill,.year-badge,.role-inline-option{
  border-radius:999px!important;
  font-weight:750!important;
}
.badge,.pill,.year-badge{
  border:1px solid #e0e2ec!important;
  background:#f7f7fb!important;
  color:#5b6070!important;
}
.status-pill{padding:6px 10px!important}

/* -------------------------------- tables -------------------------------- */
.table-wrap{border:1px solid var(--ux-line)!important;border-radius:16px!important;overflow:auto!important;background:#fff!important}
table,.table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:var(--ux-text)!important}
thead th,table th,.table th{
  position:relative;
  padding:13px 14px!important;
  border:0!important;
  border-bottom:1px solid var(--ux-line)!important;
  background:#f8f8fb!important;
  color:#676b79!important;
  font-size:.82rem!important;
  font-weight:800!important;
  letter-spacing:.03em!important;
  text-transform:none!important;
  white-space:nowrap;
}
tbody td,table td,.table td{
  padding:14px!important;
  border:0!important;
  border-bottom:1px solid #eff0f4!important;
  background:#fff!important;
  vertical-align:middle!important;
}
tbody tr:last-child td{border-bottom:0!important}
tbody tr{transition:background-color .15s ease}
tbody tr:hover td{background:#fafaff!important}
.main-name{color:var(--ux-ink)!important;font-weight:800!important}
.empty,.empty-state{color:var(--ux-muted)!important;text-align:center!important}
.empty-state{padding:44px 24px!important}

/* ----------------------------- pagination -------------------------------- */
.pager,.pagination{gap:7px!important;align-items:center!important}
.pager a,.pager span,.pagination a,.page-link{
  min-width:38px!important;height:38px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--ux-line)!important;border-radius:10px!important;
  background:#fff!important;color:#5c6070!important;text-decoration:none!important;font-weight:700!important;
}
.pager .current,.pagination .active,.page-link.active{background:var(--ux-ink)!important;color:#fff!important;border-color:var(--ux-ink)!important}

/* -------------------------------- modals -------------------------------- */
.modal-overlay,.modal-backdrop,.custom-modal-overlay{
  background:rgba(17,19,28,.62)!important;
  
}
.modal-overlay > .modal,.modal-panel,.custom-modal-box{
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--ux-shadow-lg)!important;
  overflow:hidden!important;
}
.modal-head,.modal-header{padding:18px 20px!important;background:#fbfbfd!important;border-bottom:1px solid var(--ux-line)!important}
.modal-body{padding:20px!important}
.modal-foot,.modal-footer{padding:15px 20px!important;border-top:1px solid var(--ux-line)!important;background:#fbfbfd!important}
.modal-close{width:38px!important;height:38px!important;border-radius:10px!important;border:1px solid var(--ux-line)!important;background:#fff!important;color:#626675!important;display:grid!important;place-items:center!important;cursor:pointer!important}
.modal-close:hover{background:#f1f2f6!important;color:var(--ux-ink)!important}

/* ------------------------------- alerts --------------------------------- */
.alert{
  border:1px solid var(--ux-line)!important;
  border-radius:13px!important;
  padding:12px 14px!important;
  box-shadow:none!important;
}
.alert-success{background:#edf9f5!important;border-color:#c7eadf!important;color:#176f59!important}
.alert-danger,.alert-error{background:#fff1f1!important;border-color:#f4caca!important;color:#a43f3f!important}
.alert-warning{background:#fff7e7!important;border-color:#f1d9a6!important;color:#8a5d12!important}

/* ---------------------- modern embedded dashboard ------------------------ */
body.sks-themed .dashboard{max-width:1440px!important}
body.sks-themed .hero{
  position:relative!important;
  overflow:hidden!important;
  padding:27px 28px!important;
  border:0!important;
  border-radius:22px!important;
  background:linear-gradient(118deg,#171923 0%,#24283a 60%,#323753 100%)!important;
  box-shadow:0 18px 46px rgba(18,20,31,.17)!important;
}
body.sks-themed .hero::after{
  content:"";position:absolute;right:-70px;top:-110px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,92,240,.72) 0,rgba(91,92,240,.2) 48%,transparent 70%);
}
body.sks-themed .hero h1,body.sks-themed .hero p{color:#fff!important;position:relative;z-index:1}
body.sks-themed .hero p{color:#bec2d2!important}
body.sks-themed .hero .pill{position:relative;z-index:1;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.12)!important;color:#e9eafd!important}
body.sks-themed .section{padding:20px!important}
body.sks-themed .section-title{font-size:1.03rem!important;margin-bottom:15px!important}
body.sks-themed .quick{padding:14px 16px!important;color:#4d5262!important;text-decoration:none!important;background:#fff!important}
body.sks-themed .quick:hover{color:var(--ux-brand)!important;border-color:#cbcdec!important;box-shadow:0 10px 24px rgba(91,92,240,.08)!important;transform:translateY(-2px)}

/* ---------------------------- profile screen ----------------------------- */
.profile-card{max-width:1000px!important;margin:36px auto!important;overflow:hidden!important}
.profile-sidebar{background:linear-gradient(165deg,#171923,#2a2e42)!important;color:#fff!important;padding:30px!important}
.profile-name{color:#fff!important;font-weight:850!important}
.profile-status{color:#c9ccdc!important}
.profile-img-container{border:5px solid rgba(255,255,255,.14)!important;box-shadow:0 14px 40px rgba(0,0,0,.18)!important}
.profile-details{padding:30px!important}
.detail-row{border-color:#eceef3!important}
.detail-label{color:#777b89!important;font-weight:700!important}
.detail-value{color:var(--ux-ink)!important;font-weight:650!important}

/* --------------------------- project manager ----------------------------- */
.project-hero{padding:22px!important;margin-bottom:14px!important}
.project-title{color:var(--ux-ink)!important}
.tab-shell{overflow:hidden!important}
.tabs{background:#f8f8fb!important;border-bottom:1px solid var(--ux-line)!important;padding:8px 8px 0!important}
.tab-btn{border-radius:10px 10px 0 0!important;color:#686c7b!important;padding:11px 14px!important}
.tab-btn:hover{background:#f0f0f7!important;color:var(--ux-brand)!important}
.tab-btn.active{background:#fff!important;color:var(--ux-brand)!important;box-shadow:inset 0 -3px 0 var(--ux-brand)!important}
.panel-loading{background:#fff!important;color:var(--ux-brand)!important}

/* ============================= MAIN SHELL ================================ */
body.sks-shell{
  --shell-header:76px;
  margin:0!important;
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:286px minmax(0,1fr)!important;
  grid-template-rows:auto 1fr!important;
  gap:0!important;
  background:#f4f5f8!important;
  color:var(--ux-text)!important;
  overflow:hidden!important;
}
body.sks-shell .header{
  grid-column:1 / -1!important;
  grid-row:1!important;
  position:relative!important;
  top:auto!important;
  min-height:var(--shell-header)!important;
  height:var(--shell-header)!important;
  width:100%!important;
  padding:0 22px!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:20px!important;
  background:#fff!important;
  border-bottom:1px solid var(--ux-line)!important;
  box-shadow:none!important;
  z-index:20!important;
}
body.sks-shell .header-left{gap:11px!important;min-width:0!important}
body.sks-shell .header-left > a:not(.header-title){display:none!important}
body.sks-shell .header-title{
  display:flex!important;align-items:center!important;gap:11px!important;
  min-width:0!important;color:var(--ux-ink)!important;font-size:1.02rem!important;font-weight:850!important;text-decoration:none!important;
}
body.sks-shell .header-title::before{
  content:"CP";width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;
  color:#fff;background:linear-gradient(145deg,var(--ux-brand),#7778ff);font-size:.82rem;font-weight:900;letter-spacing:-.03em;
  box-shadow:0 8px 20px rgba(91,92,240,.24);
}
body.sks-shell .header-title::after{content:" · Project Studio";color:#8b8e9c;font-weight:600}
body.sks-shell .header-right{gap:10px!important;flex-wrap:nowrap!important}
body.sks-shell .social-link{display:none!important}
body.sks-shell .idle-countdown-box{
  min-height:40px!important;padding:8px 12px!important;border:1px solid var(--ux-line)!important;
  background:#f8f8fb!important;color:#525665!important;border-radius:11px!important;font-size:.83rem!important;
}
body.sks-shell .idle-countdown-box .idle-label{color:#828694!important}
body.sks-shell .btn-logout{
  min-height:40px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;
  padding:8px 13px!important;border:1px solid #f0cece!important;border-radius:11px!important;color:#bc4848!important;background:#fff8f8!important;font-weight:750!important;text-decoration:none!important;
}
body.sks-shell .btn-logout:hover{background:#ffecec!important;color:#a83b3b!important}

body.sks-shell .welcome-section{
  width:100%!important;height:auto!important;
  padding:6px 8px 17px!important;margin:0 0 10px!important;
  background:transparent!important;
  color:#fff!important;
  text-align:left!important;
  overflow:visible!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
}
body.sks-shell .welcome-section h2{
  margin:0 0 8px!important;padding:0 8px!important;color:#fff!important;font-size:1rem!important;line-height:1.55!important;font-weight:760!important;letter-spacing:-.01em!important;
}
body.sks-shell .welcome-section h2::before{content:"SIGNED IN";display:block;margin-bottom:5px;color:#74798f;font-size:.68rem;font-weight:850;letter-spacing:.13em}
body.sks-shell .timer-box{
  width:100%!important;margin:10px 0 0!important;padding:10px 12px!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:12px!important;background:rgba(255,255,255,.06)!important;color:#dbdde9!important;box-shadow:none!important;animation:none!important;font-size:.78rem!important;
}
body.sks-shell .wrapper{
  grid-column:1 / -1!important;grid-row:2!important;
  width:100%!important;max-width:none!important;height:calc(100vh - var(--shell-header))!important;
  margin:0!important;padding:0!important;display:grid!important;grid-template-columns:286px minmax(0,1fr)!important;gap:0!important;align-items:stretch!important;overflow:hidden!important;
}
body.sks-shell .tabs-nav{
  grid-column:1!important;width:286px!important;min-width:286px!important;height:100%!important;
  margin:0!important;padding:18px 14px 22px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;
  position:relative!important;top:auto!important;
  background:var(--ux-sidebar)!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-y:auto!important;
}
body.sks-shell .tabs-nav::before{
  content:"WORKSPACE";display:block;padding:0 10px 9px;color:#74798e;font-size:.68rem;font-weight:850;letter-spacing:.14em;
}
body.sks-shell .tabs-nav input[name="sections"]{position:absolute!important;opacity:0!important;pointer-events:none!important}
body.sks-shell .tab-label{
  min-height:43px!important;margin:0!important;padding:10px 11px!important;display:flex!important;align-items:center!important;gap:11px!important;
  border:0!important;border-radius:11px!important;background:transparent!important;color:#b6bac9!important;font-size:.89rem!important;font-weight:660!important;cursor:pointer!important;white-space:nowrap!important;
}
body.sks-shell .tab-label i{width:19px!important;color:#7e8397!important;text-align:center!important;font-size:.93rem!important}
body.sks-shell .tab-label:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:none!important}
body.sks-shell input[name="sections"]:checked + .tab-label{
  color:#fff!important;background:linear-gradient(90deg,rgba(91,92,240,.24),rgba(91,92,240,.08))!important;
  border:1px solid rgba(130,131,255,.16)!important;box-shadow:inset 3px 0 0 #8b8cff!important;font-weight:760!important;
}
body.sks-shell input[name="sections"]:checked + .tab-label i{color:#a7a8ff!important}
body.sks-shell .content-panels{
  grid-column:2!important;width:auto!important;min-width:0!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:18px!important;background:#f4f5f8!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;
}
body.sks-shell .content-panels::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0,rgba(91,92,240,.045),transparent 34rem)}
body.sks-shell .panel{height:100%!important;border:1px solid var(--ux-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 30px rgba(28,31,45,.055)!important;overflow:hidden!important;position:relative!important}
body.sks-shell .panel iframe{width:100%!important;height:100%!important;min-height:0!important;border:0!important;background:#fff!important}
body.sks-shell .panel-loading{background:#fff!important;color:var(--ux-brand)!important}
body.sks-shell .custom-modal-box{max-width:430px!important;text-align:left!important;padding:24px!important}
body.sks-shell .custom-modal-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#fff1f1;color:var(--ux-danger)!important;font-size:1.3rem!important;margin:0 0 15px!important}
body.sks-shell .custom-modal-message{color:var(--ux-text)!important;font-size:.98rem!important}
body.sks-shell .custom-modal-btn{width:100%!important}

/* =============================== LOGIN ================================== */
body.sks-login{
  min-height:100vh!important;margin:0!important;padding:0!important;overflow:auto!important;
  background:#11131a!important;color:var(--ux-text)!important;
}
body.sks-login .row-container{min-height:100vh!important;margin:0!important;padding:18px!important;background:transparent!important}
body.sks-login .row-container > .row{
  min-height:calc(100vh - 36px)!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:28px!important;background:#fff!important;box-shadow:0 28px 90px rgba(0,0,0,.32)!important;
}
body.sks-login .side-image{
  position:relative!important;min-height:calc(100vh - 36px)!important;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;
  padding:54px!important;background:
    radial-gradient(circle at 20% 18%,rgba(119,120,255,.85),transparent 22rem),
    radial-gradient(circle at 85% 72%,rgba(19,184,166,.5),transparent 24rem),
    linear-gradient(145deg,#171923 0%,#252942 55%,#171923 100%)!important;
}
body.sks-login .side-image::before{
  content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 88%);
}
body.sks-login .side-image::after{
  content:"PROJECT STUDIO / 2026";position:absolute;left:54px;top:46px;color:rgba(255,255,255,.56);font-size:.72rem;font-weight:850;letter-spacing:.15em;
}
body.sks-login .side-content{position:relative!important;z-index:1!important;text-align:left!important;max-width:560px!important;margin:0!important}
body.sks-login .side-content h1{margin:0 0 13px!important;color:#fff!important;font-size:clamp(2.4rem,4.7vw,5.5rem)!important;line-height:.98!important;letter-spacing:-.055em!important;font-weight:900!important}
body.sks-login .side-content h1::after{content:"\AProject Management";white-space:pre;display:block;margin-top:13px;color:#d9dcff;font-size:.31em;line-height:1.2;letter-spacing:-.02em;font-weight:650}
body.sks-login .side-content p{color:#c4c7d5!important;text-align:left!important}
body.sks-login .side-content > div[style]{margin:22px 0!important;background:#8c8dff!important}
body.sks-login .login-form-container{position:relative!important;min-height:calc(100vh - 36px)!important;display:grid!important;place-items:center!important;padding:70px 7vw 40px!important;background:#fff!important}
body.sks-login .login-wrapper{width:min(450px,100%)!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important}
body.sks-login .login-wrapper .text-center{text-align:left!important;margin-bottom:30px!important}
body.sks-login .login-wrapper h2{font-size:2rem!important;letter-spacing:-.04em!important}
body.sks-login .btn-home{top:28px!important;right:30px!important;border:1px solid var(--ux-line)!important;border-radius:11px!important;background:#fff!important;color:#5b5f6e!important;box-shadow:none!important;padding:9px 13px!important;font-weight:700!important}
body.sks-login .form-floating > .form-control{height:56px!important;border:1px solid var(--ux-line-strong)!important;border-radius:13px!important}
body.sks-login .form-floating > label{color:#777b8a!important}
body.sks-login .btn-login{min-height:52px!important;width:100%!important;border-radius:13px!important;background:var(--ux-ink)!important;border-color:var(--ux-ink)!important;box-shadow:none!important;font-size:1rem!important}
body.sks-login .btn-login:hover{background:#292c39!important;border-color:#292c39!important;transform:translateY(-1px)!important;box-shadow:0 10px 24px rgba(23,25,35,.14)!important}
body.sks-login .captcha-img{height:56px!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;box-shadow:none!important;background:#fafafa!important}
body.sks-login .circular-timer-wrapper{width:42px!important;height:42px!important}
body.sks-login .progress-ring__circle{stroke:var(--ux-brand)!important}
body.sks-login .timer-text{color:var(--ux-brand)!important}
body.sks-login .links a{color:var(--ux-brand)!important;font-weight:700!important}

/* -------------------------- error / permissions -------------------------- */
body .box{max-width:560px!important;margin:10vh auto!important;padding:32px!important;text-align:center!important}

/* ------------------------------- RWD ------------------------------------ */
@media (max-width:1100px){
  body.sks-shell{grid-template-columns:230px minmax(0,1fr)!important}
  body.sks-shell .welcome-section,body.sks-shell .tabs-nav{width:230px!important;min-width:230px!important}
  body.sks-shell .wrapper{grid-template-columns:230px minmax(0,1fr)!important}
  body.sks-shell .header-title::after{display:none}
}
@media (max-width:820px){
  body:not(.sks-shell):not(.sks-login) > .container,
  body:not(.sks-shell):not(.sks-login) > .container-fluid,
  body:not(.sks-shell):not(.sks-login) > .page,
  body:not(.sks-shell):not(.sks-login) > .page-wrap,
  body:not(.sks-shell):not(.sks-login) > .wrapper,
  body:not(.sks-shell):not(.sks-login) > .dashboard,
  body:not(.sks-shell):not(.sks-login) > main{width:min(100% - 24px,1480px)}
  body.sks-themed.sks-embedded{padding:12px!important}

  body.sks-shell{display:flex!important;flex-direction:column!important;overflow:auto!important;min-height:100vh!important}
  body.sks-shell .header{position:sticky!important;top:0!important;height:68px!important;min-height:68px!important;padding:0 13px!important;z-index:100!important}
  body.sks-shell .header-title{font-size:.9rem!important}
  body.sks-shell .header-title::before{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  body.sks-shell .idle-countdown-box .idle-label{display:none!important}
  body.sks-shell .btn-logout{padding:8px 10px!important}
  body.sks-shell .btn-logout{font-size:0!important}
  body.sks-shell .btn-logout i{font-size:.95rem!important}
  body.sks-shell .welcome-section{display:none!important}
  body.sks-shell .wrapper{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:calc(100vh - 122px)!important;overflow:visible!important}
  body.sks-shell .tabs-nav{
    width:100%!important;min-width:0!important;height:auto!important;position:sticky!important;top:68px!important;z-index:80!important;
    flex-direction:row!important;padding:9px 10px!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  body.sks-shell .tabs-nav::before{display:none!important}
  body.sks-shell .tab-label{min-height:39px!important;flex:0 0 auto!important;padding:9px 11px!important;font-size:.83rem!important}
  body.sks-shell .content-panels{width:100%!important;height:calc(100vh - 190px)!important;min-height:620px!important;padding:10px!important;overflow:visible!important}
  body.sks-shell .panel{height:100%!important;border-radius:15px!important}

  body.sks-login .row-container{padding:0!important}
  body.sks-login .row-container > .row{border-radius:0!important;border:0!important;min-height:100vh!important}
  body.sks-login .side-image{display:none!important}
  body.sks-login .login-form-container{min-height:100vh!important;padding:86px 24px 32px!important}
  body.sks-login .btn-home{top:20px!important;right:20px!important}
}
@media (max-width:560px){
  .page > .header,.page-wrap > .page-title,.header-actions{align-items:flex-start!important;flex-direction:column!important}
  .btn,.btn-primary,.btn-light,.btn-danger,.btn-warning,.btn-add{min-height:44px}
  .modal-overlay > .modal,.modal-panel{width:calc(100% - 20px)!important;max-height:92vh!important;overflow:auto!important}
  .stats,.grid,.grid-3,.quick-grid{grid-template-columns:1fr!important}
  body.sks-shell .header-title{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.sks-shell .idle-countdown-box{display:none!important}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* -------------------------- auth / account flows ------------------------- */
body.sks-auth{
  min-height:100vh!important;
  margin:0!important;
  padding:48px 18px!important;
  display:block!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(91,92,240,.1),transparent 24rem),
    radial-gradient(circle at 88% 18%,rgba(19,184,166,.07),transparent 24rem),
    #f4f5f8!important;
}
body.sks-auth > .container,
body.sks-auth > .container-fluid,
body.sks-auth > .wrapper,
body.sks-auth > main{
  width:min(760px,100%)!important;
  margin:0 auto!important;
}
body.sks-auth .card,
body.sks-auth .container > form,
body.sks-auth .wrapper > form{
  border:1px solid var(--ux-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 18px 52px rgba(23,25,35,.09)!important;
}
body.sks-auth h1,body.sks-auth h2,body.sks-auth h3{color:var(--ux-ink)!important}
body.sks-auth .btn-primary,body.sks-auth button[type="submit"]{min-height:48px!important}
@media(max-width:640px){body.sks-auth{padding:22px 12px!important}}

/* Shell context / active workspace label */
body.sks-shell .ux-current-section{
  display:inline-flex;align-items:center;gap:7px;margin-left:3px;padding-left:14px;border-left:1px solid var(--ux-line);
  color:#8a8e9b;font-size:.82rem;font-weight:720;white-space:nowrap;
}
body.sks-shell .ux-current-section::before{content:"/";color:#c0c3ce}
@media(max-width:820px){body.sks-shell .ux-current-section{display:none}}

/* ========================================================================== 
   INFOCOM MEDIA SYSTEM · UX/UI revision 2 · 2026-09-28
   Visual direction: Information Communication / film frame / media timeline
   Brand colors sampled from the bundled IC mark: #224FA1 + #F4B320.
   ========================================================================== */

:root{
  --ux-brand:#224fa1;
  --ux-brand-strong:#173d84;
  --ux-brand-soft:#eef4ff;
  --ux-mint:#13a7b7;
  --ux-coral:#e76069;
  --ux-amber:#f4b320;
  --ux-success:#198866;
  --ux-danger:#c9434c;
  --ux-info:#2b6fc3;
  --ux-ink:#12213d;
  --ux-text:#29384f;
  --ux-muted:#65738a;
  --ux-line:#dfe6f0;
  --ux-line-strong:#ccd7e6;
  --ux-canvas:#f3f6fb;
  --ux-surface:#fff;
  --ux-surface-2:#f8faff;
  --ux-sidebar:#102a59;
  --ux-sidebar-2:#173a73;
  --ux-focus:0 0 0 4px rgba(34,79,161,.15);
  --ux-shadow-sm:0 4px 14px rgba(25,49,88,.07);
  --ux-shadow:0 18px 46px rgba(25,49,88,.10);
  --ux-shadow-lg:0 28px 75px rgba(20,42,77,.18);
}

html{font-size:17px!important}
body{
  font-size:1rem!important;
  line-height:1.65!important;
  background:
    radial-gradient(circle at 91% 8%,rgba(244,179,32,.10),transparent 20rem),
    radial-gradient(circle at 8% 2%,rgba(34,79,161,.09),transparent 24rem),
    linear-gradient(rgba(34,79,161,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,79,161,.018) 1px,transparent 1px),
    var(--ux-canvas)!important;
  background-size:auto,auto,32px 32px,32px 32px,auto!important;
}

/* Readability: the previous revision was intentionally compact; this one is not. */
h1{font-size:clamp(1.9rem,2.5vw,2.55rem)!important}
h2{font-size:clamp(1.45rem,2vw,1.95rem)!important}
h3{font-size:1.25rem!important}
p,li,td,th,input,select,textarea,button,.btn{font-size:1rem!important}
small,.small,.help,.hint,.stat-hint{font-size:.9rem!important}
label,.form-label{font-size:.98rem!important;line-height:1.5!important}
.form-control,.form-select,.control,input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],input[type="url"],select,textarea{
  min-height:50px!important;
  padding-left:14px!important;
  padding-right:14px!important;
  font-size:1rem!important;
}
textarea{padding-top:12px!important;padding-bottom:12px!important}
.btn,.btn-primary,.btn-secondary,.btn-light,.btn-danger,.btn-warning,.btn-edit,.btn-delete,.btn-cancel,.btn-add,.custom-modal-btn,button[type="submit"],input[type="submit"]{
  min-height:46px!important;
  padding:10px 17px!important;
  font-size:.97rem!important;
}
.btn-sm{min-height:40px!important;padding:8px 12px!important;font-size:.9rem!important}

/* Media-card language: a subtle yellow cue replaces the generic indigo look. */
.card,.list-card,.project-hero,.tab-shell,.section,.profile-card,.search-card,.box,.panel-card,.content-card,.stat,.quick,.filter-card{
  border-color:var(--ux-line)!important;
  box-shadow:0 5px 18px rgba(25,49,88,.06)!important;
}
.card::before,.section::before,.filter-card::before{content:none!important}
.section-title,.panel-title,.project-title{color:var(--ux-ink)!important}
body.sks-themed .section-title::before,
body:not(.sks-shell):not(.sks-login) .panel-title::before{
  content:"";display:inline-block;width:5px;height:1.15em;margin-right:10px;border-radius:4px;
  vertical-align:-.16em;background:linear-gradient(to bottom,var(--ux-brand) 0 68%,var(--ux-amber) 68% 100%);
}

/* Tables are deliberately larger for administrative use. */
.table-wrap{border-radius:17px!important;box-shadow:0 3px 14px rgba(25,49,88,.045)!important}
thead th,table th,.table th{
  padding:15px 16px!important;
  background:#f3f6fb!important;
  color:#4c5c74!important;
  font-size:.91rem!important;
  line-height:1.5!important;
  letter-spacing:.01em!important;
}
tbody td,table td,.table td{
  padding:15px 16px!important;
  color:#34445b!important;
  font-size:.98rem!important;
  line-height:1.6!important;
}
tbody tr:hover td{background:#f7faff!important}

/* Nested management pages (college/school/system management in iframe). */
body:not(.sks-shell):not(.sks-login) .tabs{
  gap:10px!important;
  margin-bottom:20px!important;
}
body:not(.sks-shell):not(.sks-login) .tab-label{
  min-height:47px!important;
  padding:11px 20px!important;
  border:1px solid var(--ux-line)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#43536c!important;
  font-size:.98rem!important;
  font-weight:750!important;
  box-shadow:0 2px 8px rgba(25,49,88,.045)!important;
}
body:not(.sks-shell):not(.sks-login) .tab-label:hover{
  border-color:#9eb5da!important;background:#f6f9ff!important;color:var(--ux-brand)!important;
}
body:not(.sks-shell):not(.sks-login) input[type="radio"]:checked ~ .tabs .tab-label,
body:not(.sks-shell):not(.sks-login) #one:checked ~ .tabs label[for="one"],
body:not(.sks-shell):not(.sks-login) #two:checked ~ .tabs label[for="two"],
body:not(.sks-shell):not(.sks-login) #three:checked ~ .tabs label[for="three"],
body:not(.sks-shell):not(.sks-login) #four:checked ~ .tabs label[for="four"]{
  box-shadow:none!important;
}
body:not(.sks-shell):not(.sks-login) #one:checked ~ .tabs label[for="one"],
body:not(.sks-shell):not(.sks-login) #two:checked ~ .tabs label[for="two"],
body:not(.sks-shell):not(.sks-login) #three:checked ~ .tabs label[for="three"],
body:not(.sks-shell):not(.sks-login) #four:checked ~ .tabs label[for="four"]{
  color:#fff!important;
  border-color:var(--ux-brand)!important;
  background:linear-gradient(135deg,#224fa1,#2d67bd)!important;
  box-shadow:0 9px 20px rgba(34,79,161,.20)!important;
  position:relative!important;
}
body:not(.sks-shell):not(.sks-login) #one:checked ~ .tabs label[for="one"]::after,
body:not(.sks-shell):not(.sks-login) #two:checked ~ .tabs label[for="two"]::after,
body:not(.sks-shell):not(.sks-login) #three:checked ~ .tabs label[for="three"]::after,
body:not(.sks-shell):not(.sks-login) #four:checked ~ .tabs label[for="four"]::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-4px;height:4px;border-radius:3px;background:var(--ux-amber);
}
body:not(.sks-shell):not(.sks-login) .panels{
  border:1px solid var(--ux-line)!important;
  border-radius:18px!important;
  padding:22px!important;
  background:#fff!important;
  box-shadow:0 9px 28px rgba(25,49,88,.065)!important;
}
body:not(.sks-shell):not(.sks-login) .panel-title{font-size:1.18rem!important;font-weight:850!important;color:var(--ux-ink)!important}

/* Dashboard becomes a media-production board rather than a generic SaaS panel. */
body.sks-themed .hero{
  padding:31px 32px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/46px 100%,
    radial-gradient(circle at 88% 22%,rgba(244,179,32,.34),transparent 12rem),
    linear-gradient(125deg,#102a59 0%,#224fa1 62%,#2864b9 100%)!important;
}
body.sks-themed .hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--ux-amber) 0 18%,#fff 18% 19%,transparent 19% 77%,rgba(255,255,255,.32) 77% 78%,transparent 78%);
}
body.sks-themed .hero::after{
  width:200px!important;height:200px!important;right:28px!important;top:-88px!important;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.12) 0 2px,transparent 2px 12px)!important;
}
body.sks-themed .hero h1{font-size:1.95rem!important}
body.sks-themed .hero p{font-size:1.02rem!important;color:#dbe7fb!important}
body.sks-themed .hero .pill{font-size:.93rem!important;padding:8px 12px!important}
body.sks-themed .quick{min-height:52px!important;font-size:.98rem!important}
body.sks-themed .quick:hover{color:#fff!important;background:var(--ux-brand)!important;border-color:var(--ux-brand)!important}
.stat-icon{background:#edf4ff!important;color:var(--ux-brand)!important;border:1px solid #d9e5f8!important}
.stats .stat::after,.grid .stat::after,.quick-grid .stat::after{background:rgba(244,179,32,.12)!important}

/* ====================== MAIN SHELL / INFOCOM STUDIO ====================== */
body.sks-shell{
  --shell-header:82px;
  grid-template-columns:304px minmax(0,1fr)!important;
  background:#f2f5fa!important;
}
body.sks-shell .header{
  min-height:82px!important;height:82px!important;padding:0 27px!important;
  border-bottom:1px solid #dce4ef!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 3px 16px rgba(23,50,91,.055)!important;
}
body.sks-shell .header-left{gap:14px!important}
body.sks-shell .header-title{
  gap:13px!important;color:#142744!important;font-size:1.07rem!important;font-weight:900!important;letter-spacing:-.015em!important;
}
body.sks-shell .header-title::before{
  content:""!important;width:52px!important;height:45px!important;flex:0 0 52px!important;border-radius:9px!important;
  background-color:#fff!important;background-image:url('/web/ic.png')!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;
  border:1px solid #e2e9f2!important;box-shadow:0 5px 15px rgba(34,79,161,.10)!important;
}
body.sks-shell .header-title::after{
  content:"MEDIA PROJECT SYSTEM"!important;
  display:inline-block!important;margin-left:3px!important;padding-left:14px!important;border-left:1px solid #dce4ef!important;
  color:#7a889d!important;font-size:.72rem!important;font-weight:850!important;letter-spacing:.11em!important;
}
body.sks-shell .idle-countdown-box{min-height:43px!important;font-size:.91rem!important;border-radius:13px!important;background:#f5f8fc!important}
body.sks-shell .btn-logout{min-height:43px!important;padding:9px 15px!important;font-size:.94rem!important;border-radius:13px!important}

body.sks-shell .wrapper{
  grid-template-columns:304px minmax(0,1fr)!important;
  height:calc(100vh - 82px)!important;
}
body.sks-shell .tabs-nav{
  width:304px!important;min-width:304px!important;
  padding:19px 15px 25px!important;gap:5px!important;
  background:
    linear-gradient(90deg,rgba(244,179,32,.9) 0 4px,transparent 4px),
    radial-gradient(circle at 25px 28px,rgba(255,255,255,.09) 0 4px,transparent 4.5px) 0 0/100% 34px,
    linear-gradient(170deg,#102a59 0%,#14356b 62%,#0d2450 100%)!important;
}
body.sks-shell .tabs-nav::before{
  content:"INFOCOM  MEDIA WORKSPACE"!important;
  padding:2px 11px 11px!important;color:#a9bedf!important;font-size:.69rem!important;letter-spacing:.14em!important;
}
body.sks-shell .tab-label{
  min-height:48px!important;padding:11px 13px!important;border-radius:12px!important;
  color:#d1ddf1!important;font-size:.97rem!important;font-weight:700!important;
}
body.sks-shell .tab-label i{width:22px!important;color:#8fb0dc!important;font-size:1rem!important}
body.sks-shell .tab-label:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
body.sks-shell input[name="sections"]:checked + .tab-label{
  color:#15315f!important;background:#fff!important;border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 10px 22px rgba(7,23,51,.22)!important;font-weight:850!important;
}
body.sks-shell input[name="sections"]:checked + .tab-label::after{
  content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--ux-amber);box-shadow:0 0 0 4px rgba(244,179,32,.18);
}
body.sks-shell input[name="sections"]:checked + .tab-label i{color:var(--ux-brand)!important}

body.sks-shell .welcome-section{
  padding:9px 10px 18px!important;margin:0 0 8px!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
}
body.sks-shell .welcome-section h2{
  padding:13px 13px 14px!important;margin:0!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:15px!important;
  background:rgba(255,255,255,.07)!important;color:#fff!important;font-size:.97rem!important;line-height:1.65!important;
}
body.sks-shell .welcome-section h2::before{
  content:"USER / INFOCOM"!important;margin-bottom:6px!important;color:#f3cc68!important;font-size:.69rem!important;letter-spacing:.14em!important;
}
body.sks-shell .timer-box{font-size:.9rem!important;background:rgba(244,179,32,.10)!important;border-color:rgba(244,179,32,.24)!important;color:#ffe09a!important}

body.sks-shell .content-panels{
  padding:22px!important;
  background:
    radial-gradient(circle at 98% 2%,rgba(244,179,32,.10),transparent 18rem),
    linear-gradient(rgba(34,79,161,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,79,161,.025) 1px,transparent 1px),
    #f3f6fb!important;
  background-size:auto,38px 38px,38px 38px,auto!important;
}
body.sks-shell .content-panels::before{display:none!important}
body.sks-shell .panel{
  border:1px solid #dce5f0!important;border-radius:20px!important;
  box-shadow:0 12px 36px rgba(22,48,87,.08)!important;
}
body.sks-shell .panel::before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:4px;pointer-events:none;
  background:linear-gradient(90deg,var(--ux-brand) 0 36%,var(--ux-amber) 36% 49%,#18a5b7 49% 60%,transparent 60%);
}

/* =========================== LOGIN / IMAGE KEPT ========================== */
body.sks-login{background:#0d2450!important}
body.sks-login .row-container{padding:20px!important}
body.sks-login .row-container > .row{border-radius:26px!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 30px 90px rgba(4,19,45,.38)!important}
body.sks-login .side-image{
  min-height:calc(100vh - 40px)!important;
  align-items:flex-end!important;justify-content:flex-start!important;padding:58px!important;
  background-image:
    linear-gradient(115deg,rgba(8,28,67,.84) 0%,rgba(18,54,111,.66) 47%,rgba(8,28,67,.30) 100%),
    url("images/79540674_10220954706839400_4836315161650266112_n.jpg")!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
body.sks-login .side-image::before{
  content:"";position:absolute;inset:0;opacity:.58!important;
  background:
    radial-gradient(circle at 26px 26px,rgba(255,255,255,.58) 0 5px,transparent 5.5px) left 0 top 10px/52px 52px repeat-y,
    radial-gradient(circle at 26px 26px,rgba(255,255,255,.58) 0 5px,transparent 5.5px) right 0 top 10px/52px 52px repeat-y!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.35));
  pointer-events:none;
}
body.sks-login .side-image::after{
  content:"ASIA UNIVERSITY  /  INFOCOM"!important;left:58px!important;top:46px!important;color:#fff!important;font-size:.78rem!important;font-weight:900!important;letter-spacing:.15em!important;
  padding:8px 11px!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:9px!important;background:rgba(8,28,67,.58)!important;
}
body.sks-login .side-content{max-width:690px!important}
body.sks-login .side-content h1{
  font-size:clamp(2.65rem,4.8vw,5.2rem)!important;line-height:1.04!important;letter-spacing:-.045em!important;text-shadow:0 5px 24px rgba(0,0,0,.25)!important;
}
body.sks-login .side-content h1::after{
  content:"傳播創意 × 資訊科技 × 生成式 AI"!important;white-space:normal!important;display:block!important;margin-top:18px!important;
  color:#ffdb79!important;font-size:.30em!important;line-height:1.45!important;letter-spacing:.04em!important;font-weight:800!important;
}
body.sks-login .side-content p{color:#eef5ff!important;font-size:1.08rem!important;font-weight:650!important;text-shadow:0 2px 12px rgba(0,0,0,.22)!important}
body.sks-login .side-content > div[style]{width:76px!important;height:5px!important;margin:23px 0!important;background:var(--ux-amber)!important}
body.sks-login .login-form-container{
  padding:78px clamp(36px,6vw,82px) 48px!important;
  background:
    linear-gradient(rgba(34,79,161,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,79,161,.025) 1px,transparent 1px),#fff!important;
  background-size:30px 30px,30px 30px,auto!important;
}
body.sks-login .login-wrapper{width:min(500px,100%)!important}
body.sks-login .login-wrapper .text-center{text-align:left!important;margin-bottom:34px!important}
body.sks-login .login-wrapper h2{font-size:2.15rem!important;color:#142744!important}
body.sks-login .login-wrapper .text-muted{font-size:1rem!important}
body.sks-login .form-floating > .form-control{height:60px!important;border:1px solid #cbd8e9!important;border-radius:14px!important;font-size:1rem!important}
body.sks-login .form-floating > label{font-size:.98rem!important;color:#68778d!important}
body.sks-login .form-floating > .form-control:focus{border-color:var(--ux-brand)!important;box-shadow:var(--ux-focus)!important}
body.sks-login .btn-login{
  min-height:56px!important;border-radius:14px!important;font-size:1.02rem!important;
  background:linear-gradient(135deg,#224fa1,#2e67bc)!important;border-color:#224fa1!important;box-shadow:0 10px 24px rgba(34,79,161,.22)!important;
}
body.sks-login .btn-login:hover{background:linear-gradient(135deg,#173d84,#224fa1)!important}
body.sks-login .btn-home{font-size:.94rem!important;border-radius:12px!important;color:#31517e!important;border-color:#d8e2ef!important;background:#fff!important}
body.sks-login .progress-ring__circle{stroke:var(--ux-brand)!important}
body.sks-login .timer-text,body.sks-login .links a{color:var(--ux-brand)!important}

/* Authentication/account support pages follow the same department palette. */
body.sks-auth{
  background:
    radial-gradient(circle at 10% 0,rgba(34,79,161,.15),transparent 26rem),
    radial-gradient(circle at 92% 12%,rgba(244,179,32,.13),transparent 22rem),
    #f3f6fb!important;
}
body.sks-auth .card,body.sks-auth .container > form,body.sks-auth .wrapper > form{border-top:5px solid var(--ux-brand)!important}

/* Better large-monitor density without shrinking text. */
@media(min-width:1500px){
  body.sks-themed.sks-embedded{padding:28px!important}
  body:not(.sks-shell):not(.sks-login) > .container,
  body:not(.sks-shell):not(.sks-login) > .container-fluid,
  body:not(.sks-shell):not(.sks-login) > .page,
  body:not(.sks-shell):not(.sks-login) > .page-wrap,
  body:not(.sks-shell):not(.sks-login) > .wrapper,
  body:not(.sks-shell):not(.sks-login) > .dashboard,
  body:not(.sks-shell):not(.sks-login) > main{width:min(1540px,calc(100% - 54px))}
}

@media(max-width:1100px){
  body.sks-shell{grid-template-columns:270px minmax(0,1fr)!important}
  body.sks-shell .wrapper{grid-template-columns:270px minmax(0,1fr)!important}
  body.sks-shell .tabs-nav{width:270px!important;min-width:270px!important}
  body.sks-shell .header-title::after{display:none!important}
}

@media(max-width:820px){
  html{font-size:16px!important}
  body.sks-shell .header{height:72px!important;min-height:72px!important;padding:0 14px!important}
  body.sks-shell .header-title{font-size:.96rem!important}
  body.sks-shell .header-title::before{width:45px!important;height:39px!important;flex-basis:45px!important}
  body.sks-shell .tabs-nav{top:72px!important;padding:10px!important;background:#102a59!important}
  body.sks-shell .tab-label{min-height:44px!important;font-size:.92rem!important}
  body.sks-shell input[name="sections"]:checked + .tab-label::after{display:none!important}
  body.sks-shell .content-panels{height:calc(100vh - 190px)!important;padding:11px!important}

  /* Keep the login photo instead of dropping it on mobile. */
  body.sks-login .row-container{padding:0!important}
  body.sks-login .row-container > .row{border-radius:0!important;border:0!important;display:flex!important;flex-direction:column!important;min-height:100vh!important}
  body.sks-login .side-image{
    display:flex!important;min-height:260px!important;height:34vh!important;max-height:340px!important;flex:0 0 auto!important;padding:30px!important;
    background-position:center 38%!important;
  }
  body.sks-login .side-image::after{left:28px!important;top:24px!important;font-size:.65rem!important}
  body.sks-login .side-content h1{font-size:2.25rem!important;margin-bottom:4px!important}
  body.sks-login .side-content h1::after{font-size:.36em!important;margin-top:10px!important}
  body.sks-login .side-content p,body.sks-login .side-content > div[style]{display:none!important}
  body.sks-login .login-form-container{min-height:auto!important;flex:1!important;padding:74px 24px 34px!important}
  body.sks-login .btn-home{top:18px!important;right:18px!important}
}

@media(max-width:560px){
  thead th,table th,.table th{font-size:.86rem!important;padding:13px 12px!important}
  tbody td,table td,.table td{font-size:.94rem!important;padding:13px 12px!important}
  body.sks-login .side-image{min-height:230px!important;height:30vh!important;padding:24px!important}
  body.sks-login .side-content h1{font-size:1.92rem!important}
}

/* 2026-09-28c · Pagination accessibility: never use black page-number backgrounds */
.pager a,.pager span,.pagination a,.pagination span,.pagination strong,.pagination>li>a,.pagination>li>span,.page-link{
  background:#fff!important;
  color:#34445c!important;
  border-color:#cfdbea!important;
  box-shadow:none!important;
}
.pager a:hover,.pagination a:hover,.pagination>li>a:hover,.page-link:hover{
  background:#eef5ff!important;
  color:#1f5fbf!important;
  border-color:#8fb2df!important;
}
.pager .current,.pagination .active,.pagination .active>a,.pagination .active>span,.pagination strong,.page-link.active{
  background:#1f5fbf!important;
  color:#fff!important;
  border-color:#1f5fbf!important;
  box-shadow:0 6px 14px rgba(31,95,191,.18)!important;
}

/* ========================= V6 PERFORMANCE PASS ========================= */
/* Avoid expensive live background blurs in Chromium/Windows. */
.modal-overlay,.modal-backdrop,.custom-modal-overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.sks-shell .panel iframe{contain:layout paint style}
body.sks-shell .content-panels{contain:layout paint}
@media (prefers-reduced-motion:no-preference){
  body.sks-shell .panel.is-entering{animation-duration:.16s!important}
}
/* Keep feedback animations, but avoid animating unspecified properties. */
.tab-label{transition:background-color .16s ease,color .16s ease,border-color .16s ease!important}
/* ====================================================================== */