:root{
      --bg:#eef2f7;
      --panel:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --border:#e5eaf2;
      --shadow:0 18px 55px rgba(15,23,42,.12);
      --shadow-sm:0 8px 26px rgba(15,23,42,.10);
      --radius:18px;

      --primary:#5aa8ff;
      --primary-2:#9ad4ff;
      --primary-rgb:90,168,255;
      --primary-soft:rgba(90,168,255,.12);
      --primary-glow:rgba(90,168,255,.22);

      --sidebar-w:260px;
      --sidebar-mini:84px;

      --gap:16px;
    }

    body.dark{
      --bg:#0b1220;
      --panel:rgba(17,24,39,.92);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:rgba(148,163,184,.22);
      --shadow:0 18px 55px rgba(0,0,0,.45);
      --shadow-sm:0 8px 26px rgba(0,0,0,.35);

      --primary:#fbbf24;
      --primary-2:#fde68a;
      --primary-rgb:251,191,36;
      --primary-soft:rgba(251,191,36,.16);
      --primary-glow:rgba(251,191,36,.22);
    }

    .card-head{ display:flex; align-items:center; justify-content:space-between; min-height: 28px; }
    .card-status{
      display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
      color:rgba(15,23,42,.6); background:rgba(255,255,255,.85);
      padding:6px 10px; border-radius:999px; border:1px solid rgba(229,234,242,.9); margin-left:auto;
    }
    body.dark .card-status{
      color:rgba(229,231,235,.72);
      background:rgba(17,24,39,.9);
      border:1px solid rgba(148,163,184,.22);
    }
    .card-status .spin{ font-size:16px; animation: spin 1.1s linear infinite; }
    @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

    .sima-upload-indicator{
      position:fixed;
      right:18px;
      top:18px;
      z-index:100000;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:min(320px, calc(100vw - 36px));
      max-width:min(420px, calc(100vw - 36px));
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(var(--primary-rgb),.22);
      background:rgba(255,255,255,.96);
      color:var(--text);
      box-shadow:0 18px 48px rgba(15,23,42,.18);
      opacity:0;
      pointer-events:none;
      transform:translateY(-8px);
      transition:opacity .18s ease, transform .18s ease;
    }
    .sima-upload-indicator.show{ opacity:1; transform:translateY(0); }
    .sima-upload-indicator .material-symbols-rounded{ color:var(--primary); font-size:24px; flex:0 0 auto; }
    .sima-upload-indicator strong{ display:block; font-size:13px; line-height:1.2; }
    .sima-upload-indicator small{ display:block; margin-top:3px; color:var(--muted); font-size:11.5px; font-weight:700; }
    body.dark .sima-upload-indicator{ background:rgba(15,23,42,.96); border-color:rgba(148,163,184,.20); box-shadow:0 18px 48px rgba(0,0,0,.38); }

    /* Standar global overlay proses untuk halaman utama, Community Media, dan Workspace. */
    body.dark .sima-process-overlay,
    body.dark .community-process-overlay,
    body.dark .manager-process-overlay{
      background:rgba(2,6,23,.58);
      backdrop-filter:blur(4px);
    }
    body.dark .sima-process-loader,
    body.dark .community-process-loader,
    body.dark .manager-process-loader{
      background:rgba(17,24,39,.98);
      border-color:rgba(148,163,184,.22);
      box-shadow:0 20px 48px rgba(0,0,0,.42);
      color:var(--text);
    }
    body.dark .sima-process-spinner,
    body.dark .community-process-spinner,
    body.dark .manager-process-spinner{
      border-color:rgba(148,163,184,.24);
      border-top-color:var(--primary);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:linear-gradient(180deg, #f4f7fb 0%, var(--bg) 100%);
      color:var(--text);
    }
    body.dark{ background:linear-gradient(180deg, rgba(17,24,39,.9) 0%, var(--bg) 100%); }

    .app{ height:100%; display:flex; padding:0; }
    .shell{
      flex:1; display:flex; min-height:100vh;
      background:transparent;
      border:none;
      border-radius:0;
      box-shadow:none;
      overflow:hidden;
      backdrop-filter:none;
    }
    body.dark .shell{
      background:transparent;
      border:none;
      backdrop-filter:none;
    }

    .sidebar{
      width:var(--sidebar-w);
      background:rgba(255,255,255,.9);
      border-right:1px solid var(--border);
      padding:14px 12px;
      display:flex;
      flex-direction:column;
      gap:12px;
      transition:width .22s ease;
      position:relative;
      height:100vh;
      max-height:100vh;
      overflow:hidden;
    }
    body.dark .sidebar{
      background:rgba(17,24,39,.92);
      border-right:1px solid rgba(148,163,184,.18);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 10px;
      border-radius:14px;
      flex:0 0 auto;
    }

    .brand .logo{
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }

    .brand .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }

    .logo{
      width:34px; height:34px; border-radius:12px;
      background:none;
      display:grid; place-items:center; color:white;
      font-weight:800; letter-spacing:.3px;
      box-shadow:none;
      flex:0 0 auto;
    }
    body.dark .logo{ color:#111827; box-shadow:0 10px 26px rgba(0,0,0,.25); }
    .brand h1{ font-size:14px; margin:0; line-height:1.15; font-weight:800; }
    .brand small{ display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:600; }

    .nav{
      display:flex; flex-direction:column; gap:6px; padding:6px;
      border-radius:16px;
      background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.01));
      border:1px solid rgba(229,234,242,.7);
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      overscroll-behavior:contain;
      scrollbar-width:none;
      scrollbar-color:transparent transparent;
    }
    .nav::-webkit-scrollbar{ width:0; height:0; }
    .nav::-webkit-scrollbar-track{ background:transparent; }
    .nav::-webkit-scrollbar-button{ display:none; width:0; height:0; }
    .nav::-webkit-scrollbar-thumb{
      background:transparent;
      border-radius:999px;
      border:0;
      background-clip:padding-box;
    }
    body.dark .nav{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border:1px solid rgba(148,163,184,.18);
    }
    .nav button{
      appearance:none; border:0; background:transparent; cursor:pointer; width:100%;
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:14px;
      color:var(--muted); font-weight:700; font-size:13px;
      justify-content:flex-start;
      text-align:left;
      transition:background .15s ease, color .15s ease;
    }
    .nav button .label{
      min-width:0;
      flex:1 1 auto;
      text-align:left;
    }
    .nav button .material-symbols-rounded{ font-size:20px; width:22px; color:#94a3b8; }
    body.dark .nav button .material-symbols-rounded{ color:rgba(226,232,240,.65); }
    .nav button.active{
      background:var(--primary-soft);
      color:var(--text);
      box-shadow:0 10px 22px rgba(var(--primary-rgb),.12);
    }
    body.dark .nav button.active{ box-shadow:0 10px 22px rgba(0,0,0,.22); }
    .nav button.active .material-symbols-rounded{ color:var(--primary); }
    .nav button:hover{ background:rgba(15,23,42,.04); }
    body.dark .nav button:hover{ background:rgba(255,255,255,.05); }
    .nav-group{
      display:grid;
      gap:3px;
    }
    .nav button.nav-parent{
      position:relative;
      padding-right:9px;
    }
    .nav-parent .nav-chevron{
      margin-left:auto;
      width:18px;
      font-size:18px !important;
      color:#94a3b8;
      transition:transform .16s ease, color .16s ease;
    }
    .nav-group.open .nav-parent .nav-chevron{
      transform:rotate(180deg);
      color:var(--primary);
    }
    .nav-submenu{
      display:none;
      position:relative;
      gap:2px;
      margin:0 0 2px 18px;
      padding:2px 0 2px 14px;
    }
    .nav-submenu::before{
      content:"";
      position:absolute;
      left:4px;
      top:2px;
      bottom:2px;
      width:1px;
      background:rgba(148,163,184,.28);
    }
    .nav-group.open .nav-submenu{
      display:grid;
    }
    .nav button.nav-subitem{
      min-height:30px;
      padding:6px 8px;
      border-radius:9px;
      font-size:11.5px;
      font-weight:500;
      color:rgba(51,65,85,.9);
      background:transparent;
      box-shadow:none;
      gap:7px;
    }
    .nav button.nav-subitem .material-symbols-rounded{
      width:17px;
      font-size:16px;
      color:#94a3b8;
    }
    .nav button.nav-subitem.active{
      color:var(--text);
      background:rgba(var(--primary-rgb),.12);
      box-shadow:none;
    }
    .nav button.nav-subitem.active .material-symbols-rounded{
      color:var(--primary);
    }
    body.dark .nav-submenu::before{ background:rgba(148,163,184,.22); }
    body.dark .nav button.nav-subitem{
      color:rgba(226,232,240,.78);
      background:transparent;
    }
    body.dark .nav button.nav-subitem.active{
      background:rgba(var(--primary-rgb),.18);
      color:var(--text);
    }
    .community-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.15fr) minmax(260px, .85fr);
      gap:12px;
      align-items:stretch;
    }
    .community-panel{
      border:1px solid var(--border);
      border-radius:12px;
      background:var(--card);
      padding:16px;
      min-height:170px;
      box-shadow:var(--shadow-soft);
    }
    .community-panel h4{
      margin:0 0 8px;
      font-size:17px;
      color:var(--text);
      display:flex;
      align-items:center;
      gap:8px;
    }
    .community-panel h4 .material-symbols-rounded{ color:var(--primary); }
    .community-panel p{ margin:0; color:var(--muted); line-height:1.55; font-size:13px; }
    .community-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .community-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid rgba(var(--primary-rgb), .24);
      background:rgba(var(--primary-rgb), .09);
      color:var(--text);
      font-size:12px;
      font-weight:800;
    }
    @media (max-width: 860px){
      .community-grid{ grid-template-columns:1fr; }
      .community-panel{ min-height:auto; }
    }
    .mini .nav-group.open .nav-submenu{ display:none; }
    .mini .nav-parent .nav-chevron{ display:none; }
    .mini-nav-popover{
      position:fixed;
      display:none;
      z-index:130;
      width:min(224px, calc(100vw - 106px));
      pointer-events:auto;
    }
    .mini-nav-popover.show{ display:block; }
    .mini-nav-popover-title{
      display:inline-flex;
      align-items:center;
      max-width:100%;
      min-height:24px;
      padding:4px 8px;
      border-radius:5px;
      background:#111827;
      color:#fff;
      font-size:11px;
      font-weight:800;
      line-height:1.1;
      box-shadow:0 10px 22px rgba(15,23,42,.16);
    }
    .mini-nav-popover-panel{
      margin-top:6px;
      padding:8px;
      border:1px solid rgba(203,213,225,.78);
      border-radius:8px;
      background:rgba(255,255,255,.98);
      box-shadow:0 18px 42px rgba(15,23,42,.16);
    }
    .mini-nav-popover-list{
      position:relative;
      display:grid;
      gap:2px;
      padding-left:15px;
    }
    .mini-nav-popover-list::before{
      content:"";
      position:absolute;
      left:4px;
      top:3px;
      bottom:3px;
      width:1px;
      background:rgba(148,163,184,.32);
    }
    .mini-nav-popover button{
      appearance:none;
      border:0;
      width:100%;
      min-height:30px;
      border-radius:6px;
      padding:6px 8px;
      display:flex;
      align-items:center;
      gap:8px;
      background:transparent;
      color:rgba(51,65,85,.92);
      font:inherit;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      text-align:left;
    }
    .mini-nav-popover button .material-symbols-rounded{
      width:17px;
      font-size:16px;
      color:#64748b;
    }
    .mini-nav-popover button.active{
      background:rgba(var(--primary-rgb),.12);
      color:var(--text);
    }
    .mini-nav-popover button.active .material-symbols-rounded{
      color:var(--primary);
    }
    body.dark .mini-nav-popover-title{
      background:#f8fafc;
      color:#0f172a;
      box-shadow:0 12px 28px rgba(0,0,0,.28);
    }
    body.dark .mini-nav-popover-panel{
      border-color:rgba(148,163,184,.22);
      background:rgba(17,24,39,.98);
      box-shadow:0 20px 46px rgba(0,0,0,.36);
    }
    body.dark .mini-nav-popover-list::before{ background:rgba(148,163,184,.28); }
    body.dark .mini-nav-popover button{ color:rgba(226,232,240,.82); }

    .sidebar-spacer{ display:none; }
    .sidebar-footer{
      padding:6px; border-radius:16px;
      background:rgba(15,23,42,.02);
      border:1px solid rgba(229,234,242,.7);
      display:flex; flex-direction:column; gap:8px;
      flex:0 0 auto;
    }
    body.dark .sidebar-footer{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(148,163,184,.18);
    }
    .side-action{ display:flex; gap:8px; flex-direction:column; }
    .side-action button{ flex:0 0 auto; width:100%; justify-content:flex-start; }
    .side-action button{
      flex:1; border:1px solid var(--border); background:var(--panel);
      border-radius:14px; padding:10px; cursor:pointer;
      display:flex; align-items:center; justify-content:flex-start; gap:8px;
      text-align:left;
      font-weight:800; font-size:12px; color:var(--text);
      box-shadow:var(--shadow-sm);
    }
    .side-action button .label{ flex:1 1 auto; min-width:0; text-align:left; }
    .side-action button .material-symbols-rounded{ font-size:18px; color:#64748b; }
    body.dark .side-action button .material-symbols-rounded{ color:rgba(226,232,240,.75); }

    .mini .sidebar{ width:var(--sidebar-mini); }
    .mini .brand h1, .mini .brand small,
    .mini .nav button span.label,
    .mini .side-action button span.label{ display:none; }
    .mini .brand{ justify-content:center; }
    .mini .nav button{ justify-content:center; }
    .mini .side-action button{ justify-content:center; }
    .mini .nav button .material-symbols-rounded{ width:auto; }

    .content{
      flex:1;
      display:flex;
      flex-direction:column;
      padding:14px;
      gap:14px;
      min-width:0;
      min-height:0;
      overflow:auto;
      scrollbar-gutter:stable;
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(229,234,242,.7);
      box-shadow:var(--shadow-sm);
      gap:10px;
    }
    body.dark .topbar{
      background:rgba(17,24,39,.82);
      border:1px solid rgba(148,163,184,.18);
    }
    .top-left{ display:flex; align-items:center; gap:10px; min-width:0; }
    .icon-btn{
      border:1px solid var(--border);
      background:var(--panel);
      width:40px; height:40px;
      border-radius:14px;
      cursor:pointer;
      display:grid; place-items:center;
      box-shadow:var(--shadow-sm);
      flex:0 0 auto;
    }
    .icon-btn .material-symbols-rounded{ color:#64748b; font-size:22px; }
    body.dark .icon-btn .material-symbols-rounded{ color:rgba(226,232,240,.75); }

    .page-title{ display:flex; flex-direction:column; min-width:0; }
    .page-title strong{ font-size:14px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .page-title span{ font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .top-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
    .avatar{
      width:34px; height:34px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 100%);
      box-shadow:0 12px 26px rgba(var(--primary-rgb),.25);
    }
    body.dark .avatar{
      box-shadow:0 12px 26px rgba(0,0,0,.25);
    }
    .account-menu-wrap{ position:relative; display:flex; align-items:center; }
    .account-btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.94);
      width:40px;
      min-width:40px;
      height:40px;
      padding:0;
      border-radius:14px;
      overflow:hidden;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:var(--shadow-sm);
      color:var(--text);
      font-weight:900;
    }
    body.dark .account-btn{
      border-color:rgba(148,163,184,.18);
      background:rgba(17,24,39,.84);
    }
    .account-btn:hover{ background:rgba(var(--primary-rgb),.08); }
    .account-avatar{
      width:28px;
      height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--primary-2), var(--primary));
      color:#fff;
      font-size:11px;
      line-height:1;
      font-weight:950;
      box-shadow:0 10px 22px rgba(var(--primary-rgb),.24);
      text-transform:uppercase;
    }
    .account-avatar.has-photo,
    .account-profile-avatar.has-photo{
      overflow:hidden;
      padding:0;
      background:var(--panel);
    }
    .account-avatar img,
    .account-profile-avatar img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center center;
      aspect-ratio:1 / 1;
    }
    .account-btn .account-avatar{
      width:100%;
      height:100%;
      border-radius:inherit;
      box-shadow:none;
    }
    .account-btn .material-symbols-rounded{ font-size:18px; color:var(--muted); }
    .account-menu{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      width:236px;
      border-radius:16px;
      border:1px solid rgba(229,234,242,.86);
      background:rgba(255,255,255,.98);
      box-shadow:var(--shadow);
      padding:8px;
      display:none;
      z-index:90;
    }
    .account-menu::before{
      content:"";
      position:absolute;
      top:-6px;
      right:24px;
      width:12px;
      height:12px;
      transform:rotate(45deg);
      background:inherit;
      border-left:1px solid rgba(229,234,242,.86);
      border-top:1px solid rgba(229,234,242,.86);
    }
    body.dark .account-menu{
      border-color:rgba(148,163,184,.18);
      background:rgba(17,24,39,.98);
      box-shadow:0 20px 42px rgba(0,0,0,.34);
    }
    body.dark .account-menu::before{ border-color:rgba(148,163,184,.18); }
    .account-menu.show{ display:block; }
    .account-menu-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 8px 10px;
      border-bottom:1px solid rgba(226,232,240,.72);
      margin-bottom:6px;
    }
    body.dark .account-menu-head{ border-bottom-color:rgba(148,163,184,.18); }
    .account-menu-name{ font-size:12px; font-weight:950; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .account-menu-role{ font-size:11px; font-weight:800; color:var(--muted); margin-top:2px; }
    .account-menu button{
      width:100%;
      border:0;
      background:transparent;
      cursor:pointer;
      padding:10px 9px;
      border-radius:11px;
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      font-size:12px;
      font-weight:900;
      text-align:left;
    }
    .account-menu button .material-symbols-rounded{ font-size:20px; color:var(--muted); }
    .account-menu button:hover{ background:rgba(var(--primary-rgb),.09); }
    .account-menu button.danger{ color:#dc2626; }
    .account-menu button.danger .material-symbols-rounded{ color:#dc2626; }
    .community-login-as-modal{ width:min(560px,96vw); }
    .community-login-as-note{ margin:0 0 12px; color:var(--muted); font-size:10px; line-height:1.5; }
    .community-login-as-role-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
    .community-login-as-role-tab{ flex:0 0 auto; min-height:30px; padding:6px 10px; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:var(--muted); cursor:pointer; font:inherit; font-size:10px; font-weight:850; }
    .community-login-as-role-tab:hover{ border-color:rgba(var(--primary-rgb),.4); color:var(--primary); }
    .community-login-as-role-tab.is-active{ border-color:rgba(var(--primary-rgb),.5); background:var(--primary-soft); color:var(--primary); box-shadow:0 0 0 2px rgba(var(--primary-rgb),.08); }
    .community-login-as-search{ display:flex; align-items:center; gap:7px; min-height:34px; margin:0 0 10px; padding:0 9px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--muted); }
    .community-login-as-search:focus-within{ border-color:rgba(var(--primary-rgb),.55); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1); }
    .community-login-as-search > .material-symbols-rounded{ font-size:17px; color:var(--primary); }
    .community-login-as-search input{ min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:11px; }
    .community-login-as-search input::placeholder{ color:var(--muted); }
    .community-login-as-count{ flex:0 0 auto; color:var(--muted); font-size:9px; font-weight:800; }
    .community-login-as-list{ display:grid; gap:6px; max-height:min(420px,60vh); overflow:auto; }
    .community-login-as-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; font:inherit; }
    .community-login-as-item:hover{ border-color:rgba(var(--primary-rgb),.4); background:var(--primary-soft); }
    .community-login-as-item > .material-symbols-rounded{ margin-left:auto; color:var(--primary); font-size:18px; }
    .community-login-as-copy{ display:grid; gap:2px; min-width:0; }
    .community-login-as-copy strong{ overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
    .community-login-as-copy small{ color:var(--muted); font-size:8.5px; }
    body.dark .community-login-as-item{ background:var(--panel); }
    .notification-wrap{ position:relative; display:flex; align-items:center; }
    .notification-wrap::after{
      content:"";
      position:absolute;
      left:50%;
      top:calc(100% + 4px);
      width:18px;
      height:12px;
      transform:translateX(-50%);
      background:rgba(255,255,255,.98);
      clip-path:polygon(50% 0, 100% 100%, 0 100%);
      opacity:0;
      pointer-events:none;
      z-index:98;
      filter:drop-shadow(0 -1px 0 rgba(229,234,242,.86));
    }
    .notification-wrap.is-open::after{ opacity:1; }
    body.dark .notification-wrap::after{ background:rgba(17,24,39,.98); filter:drop-shadow(0 -1px 0 rgba(148,163,184,.18)); }
    .notification-btn{ position:relative; }
    .notification-badge{
      position:absolute;
      top:-5px;
      right:-5px;
      width:18px;
      min-width:18px;
      height:18px;
      padding:0;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#dc2626;
      color:#fff;
      border:2px solid var(--panel);
      font-size:10px;
      font-weight:950;
      line-height:1;
      box-shadow:0 8px 16px rgba(220,38,38,.28);
    }
    body.dark .notification-badge{ border-color:#111827; }
    .notification-panel{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      width:min(380px, calc(100vw - 26px));
      max-height:min(70vh, 560px);
      border-radius:16px;
      border:1px solid rgba(229,234,242,.86);
      background:rgba(255,255,255,.98);
      box-shadow:var(--shadow);
      display:none;
      z-index:96;
      overflow:hidden;
    }
    .notification-panel::before{ display:none; }
    .notification-panel.show{ display:block; }
    body.dark .notification-panel{
      border-color:rgba(148,163,184,.18);
      background:rgba(17,24,39,.98);
      box-shadow:0 20px 42px rgba(0,0,0,.34);
    }
    body.dark .notification-panel::before{ border-color:rgba(148,163,184,.18); }
    .notification-panel-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      padding:12px 12px 10px;
      border-bottom:1px solid rgba(226,232,240,.72);
    }
    body.dark .notification-panel-head{ border-bottom-color:rgba(148,163,184,.18); }
    .notification-title{ font-size:13px; font-weight:950; color:var(--text); }
    .notification-sub{ margin-top:2px; font-size:11px; font-weight:800; color:var(--muted); }
    .notification-head-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
    .notification-read-btn, .notification-clear-btn{
      border:0;
      background:rgba(var(--primary-rgb),.10);
      color:var(--primary);
      border-radius:10px;
      padding:7px 9px;
      cursor:pointer;
      font-size:11px;
      font-weight:950;
      white-space:nowrap;
    }
    .notification-clear-btn{ color:#dc2626; background:rgba(220,38,38,.09); }
    .notification-list{ max-height:calc(min(70vh, 560px) - 58px); overflow:auto; padding:6px 7px; }
    .notification-item{
      width:100%;
      margin-top:0;
      margin-bottom:5px;
      border:0;
      border-radius:14px;
      background:transparent;
      cursor:default;
      display:grid;
      grid-template-columns:28px minmax(0,1fr);
      align-items:center;
      gap:10px;
      padding:10px;
      color:var(--text);
      text-align:left;
    }
    .notification-item.has-target{ cursor:pointer; }
    .notification-item.has-target:hover,.notification-item.has-target:focus-visible{ background:rgba(var(--primary-rgb),.08); outline:0; }
    .notification-item.unread{ background:rgba(var(--primary-rgb),.12); }
    body.dark .notification-item.unread{ background:rgba(var(--primary-rgb),.20); }
    .notification-icon{ width:28px; height:28px; display:grid; place-items:center; color:var(--primary); }
    .notification-icon .material-symbols-rounded{ font-size:21px; }
    .notification-item-content{ min-width:0; display:block; }
    .notification-item-title,.notification-context{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .notification-item-title{ color:var(--text); font-size:12.5px; font-weight:500; line-height:1.3; }
    .notification-context{ margin-top:3px; color:#5d779e; font-size:11px; font-weight:500; line-height:1.35; }
    body.dark .notification-context{ color:#9fb4d2; }
    .notification-open{ display:none; }
    .notification-open.is-hidden{ display:none; }    .notification-empty{ padding:20px 12px; text-align:center; color:var(--muted); font-size:12px; font-weight:850; }
    @media (max-width:620px){
      .notification-panel{ right:-54px; width:calc(100vw - 24px); }
      .notification-panel::before{ display:none; right:72px; }
    }
    .account-modal{ width:min(560px, 96vw); }
    .account-profile-hero{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px;
      border:1px solid rgba(226,232,240,.82);
      border-radius:16px;
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.12), rgba(255,255,255,.72));
      margin-bottom:12px;
    }
    body.dark .account-profile-hero{
      border-color:rgba(148,163,184,.18);
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.18), rgba(15,23,42,.28));
    }
    .account-profile-avatar{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--primary-2), var(--primary));
      color:#fff;
      font-weight:950;
      font-size:16px;
      box-shadow:0 14px 28px rgba(var(--primary-rgb),.26);
    }
    .account-profile-hero-actions{ margin-left:auto; display:flex; align-items:center; flex:0 0 auto; }
    .account-profile-photo-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-2px 0 12px; }
    .account-profile-photo-help{ display:block; margin:0 0 12px; color:var(--muted); font-size:11px; font-weight:600; }
    .account-profile-photo-button{ min-height:36px; padding:8px 11px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(var(--primary-rgb),.26); border-radius:11px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:800; cursor:pointer; }
    .account-profile-photo-button:hover{ border-color:var(--primary); background:rgba(var(--primary-rgb),.16); }
    .account-profile-photo-button:disabled{ opacity:.6; cursor:wait; }
    .account-profile-name{ font-size:15px; font-weight:950; color:var(--text); }
    .account-profile-sub{ font-size:12px; font-weight:800; color:var(--muted); margin-top:3px; }
    .account-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .account-info-item{
      display:flex;
      gap:10px;
      align-items:flex-start;
      min-width:0;
      padding:11px;
      border:1px solid rgba(226,232,240,.82);
      border-radius:14px;
      background:rgba(248,250,252,.74);
    }
    body.dark .account-info-item{ border-color:rgba(148,163,184,.18); background:rgba(15,23,42,.28); }
    .account-info-item .material-symbols-rounded{ font-size:20px; color:var(--primary); }
    .account-info-label{ font-size:10px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
    .account-info-value{ margin-top:3px; font-size:12px; font-weight:900; color:var(--text); word-break:break-word; }
    .account-password-error{ margin-top:10px; color:#dc2626; font-size:12px; font-weight:800; display:none; }
    body.dark .account-password-error{ color:#fca5a5; }
    @media (max-width: 620px){
      .account-btn{ width:40px; min-width:40px; padding:5px; justify-content:center; }
      .account-menu{ right:-2px; width:220px; }
      .account-info-grid{ grid-template-columns:1fr; }
    }

    .card{
      background:rgba(255,255,255,.92);
      border:1px solid rgba(229,234,242,.8);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      padding:14px;
      overflow:hidden;
      position:relative;
    }
    body.dark .card{
      background:rgba(17,24,39,.92);
      border:1px solid rgba(148,163,184,.18);
    }
    .card h3{
      margin:0 0 10px 0;
      font-size:12px;
      font-weight:900;
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .section{ display:none; }
    .section.active{ display:block; padding-bottom:18px; }

    .select, .input{
      border:1px solid rgba(229,234,242,.95);
      background-color:rgba(255,255,255,.95);
      border-radius:14px;
      padding:10px 42px 10px 12px;
      font-weight:500;
      font-size:13px;
      color:var(--text);
      box-shadow:var(--shadow-sm);
      outline:none;
      height:42px;
    }
    .input{ padding-right:12px; }
    .select{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }
    body.dark .select, body.dark .input{
      border:1px solid rgba(148,163,184,.18);
      background-color:rgba(2,6,23,.35);
      color:var(--text);
    }
    body.dark .select{
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(226,232,240,.75) 50%),
        linear-gradient(135deg, rgba(226,232,240,.75) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }

    .select:focus, .input:focus{
      border-color: rgba(var(--primary-rgb),.65);
      box-shadow:0 0 0 4px var(--primary-soft), var(--shadow-sm);
    }
    body.dark .select:focus, body.dark .input:focus{
      border-color: rgba(var(--primary-rgb),.55);
      box-shadow:0 0 0 4px var(--primary-soft), var(--shadow-sm);
    }

    .toolbar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .tool-left{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-end;
      flex:1;
      min-width:0;
    }
    .filter-field{ display:flex; flex-direction:column; gap:6px; min-width:150px; }
    .filter-label{ font-size:12px; font-weight:600; color:rgba(15,23,42,.70); margin-left:2px; line-height:1; }
    body.dark .filter-label{ color:rgba(226,232,240,.75); }
    .filter-field.search{ min-width:220px; flex: 1 1 260px; }
    .filter-field.search .input{ width:100%; }

    .btn-primary{
      border:0;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
      color:#0b1220;
      border-radius:14px;
      padding:10px 14px;
      font-weight:500;
      font-size:13px;
      cursor:pointer;
      box-shadow:0 16px 28px rgba(var(--primary-rgb),.18);
      display:flex;
      align-items:center;
      gap:8px;
      height:42px;
      flex: 0 0 auto;
    }
    body.dark .btn-primary{ box-shadow:0 16px 28px rgba(0,0,0,.28); }

    .btn-system{
      appearance:none;
      min-width:0;
      height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 12px;
      border:1px solid rgba(var(--primary-rgb),.22);
      border-radius:14px;
      background:linear-gradient(180deg,rgba(var(--primary-rgb),.11),rgba(var(--primary-rgb),.07));
      color:var(--text);
      font:inherit;
      font-size:13px;
      font-weight:750;
      line-height:1;
      text-decoration:none;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
      transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
    }
    .btn-system .material-symbols-rounded{ color:var(--primary); }
    .btn-system:hover:not(:disabled){
      border-color:rgba(var(--primary-rgb),.38);
      background:rgba(var(--primary-rgb),.15);
      box-shadow:0 7px 16px rgba(var(--primary-rgb),.10);
      transform:translateY(-1px);
    }
    .btn-system:active:not(:disabled){
      transform:translateY(0) scale(.98);
      box-shadow:none;
    }
    .btn-system:focus-visible{
      outline:3px solid var(--primary-glow);
      outline-offset:2px;
      border-color:rgba(var(--primary-rgb),.52);
    }
    .btn-system:disabled{
      opacity:.48;
      cursor:not-allowed;
      box-shadow:none;
      transform:none;
    }
    body.dark .btn-system{
      border-color:rgba(var(--primary-rgb),.30);
      background:rgba(var(--primary-rgb),.12);
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    body.dark .btn-system:hover:not(:disabled){
      border-color:rgba(var(--primary-rgb),.48);
      background:rgba(var(--primary-rgb),.20);
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }
    .btn-system.icon-only{ width:44px; min-width:44px; padding:0; justify-content:center; }

    .icon-action{
      width:32px;
      min-width:32px;
      height:32px;
      padding:0;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.95);
      box-shadow:var(--shadow-sm);
      cursor:pointer;
      display:inline-grid;
      place-items:center;
      flex:0 0 auto;
      line-height:1;
      transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }
    .icon-action:hover:not(:disabled){
      transform:translateY(-1px);
      border-color:rgba(var(--primary-rgb),.36);
      background:var(--primary-soft);
      box-shadow:0 10px 22px rgba(15,23,42,.10);
    }
    .icon-action:disabled{
      opacity:.45;
      cursor:not-allowed;
      pointer-events:none;
      transform:none;
      box-shadow:none;
    }
    body.dark .icon-action{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(2,6,23,.35);
    }
    body.dark .icon-action:hover:not(:disabled){
      background:rgba(var(--primary-rgb),.14);
      border-color:rgba(var(--primary-rgb),.28);
      box-shadow:0 10px 22px rgba(0,0,0,.18);
    }
    .icon-action .material-symbols-rounded{
      font-size:18px;
      color:#64748b;
    }
    body.dark .icon-action .material-symbols-rounded{
      color:rgba(226,232,240,.75);
    }
    .icon-action.danger{
      border:1px solid rgba(239,68,68,.25);
      background:rgba(239,68,68,.10);
    }
    .icon-action.danger:hover:not(:disabled){
      border-color:rgba(239,68,68,.34);
      background:rgba(239,68,68,.14);
    }
    .icon-action.danger .material-symbols-rounded{ color:#b91c1c; }

    .aksi,
    .aksi-row,
    .research-actions{
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:center;
      flex-wrap:nowrap;
    }

    /* ===== Documents: dropzone ===== */
    .dropzone{
      border:1.5px dashed rgba(100,116,139,.45);
      border-radius:16px;
      padding:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background:rgba(15,23,42,.02);
    }
    body.dark .dropzone{
      border:1.5px dashed rgba(226,232,240,.35);
      background:rgba(255,255,255,.03);
    }
    .dropzone strong{ font-size:12px; font-weight:800; }
    .dropzone small{ display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:600; }
    .dropzone.dragover{
      border-color: var(--primary);
      box-shadow:0 0 0 4px var(--primary-soft);
    }
    body.dark .dropzone.dragover{
      box-shadow:0 0 0 4px var(--primary-soft);
    }


    th, td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    td.wrap{ white-space:normal; line-height:1.35; }
    td.center{ text-align:center; }

    .table-wrap{
      border:1px solid rgba(203,213,225,.78);
      border-radius:14px;
      background:rgba(255,255,255,.94);
      box-shadow:0 10px 30px rgba(15,23,42,.08);
      overflow:hidden;
    }
    body.dark .table-wrap{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(17,24,39,.92);
    }

    .table-scroll{
      max-height:none;
      min-height:0;
      overflow-y:visible;
      overflow-x:auto;
      padding-bottom:0;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      font-size:13px;
      table-layout:fixed;
    }
    #page-matakuliah table{ min-width:1180px; }
    #page-matakuliah td.center{ text-align:center; white-space:nowrap; }
    #page-matakuliah td.wrap{ white-space:normal; line-height:1.35; }
    #page-matakuliah .table-scroll{
      max-height:none !important;
      min-height:0 !important;
      overflow-y:visible !important;
      overflow-x:auto;
      padding-bottom:0;
    }

    thead th{
      position:sticky; top:0; z-index:2;
      text-align:left;
      padding:12px 12px;
      background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
      border-bottom:1px solid var(--border);
      color:var(--text);
      font-weight:900;
      font-size:12px;
      white-space:nowrap;
    }
    body.dark thead th{
      background:linear-gradient(180deg,rgba(17,24,39,.98) 0%,rgba(15,23,42,.98) 100%);
      border-bottom:1px solid rgba(148,163,184,.18);
    }

    th.col-wp{ text-align:center; }
    th.col-aksi{ text-align:center; }

    /* ===== Sort button in header ===== */
    .th-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      min-width:0;
    }
    .th-wrap.center{ justify-content:center; }
    .th-label{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .sort-btn{
      appearance:none;
      border:none;
      background:transparent;
      width:26px; height:26px;
      border-radius:10px;
      cursor:pointer;
      display:grid;
      place-items:center;
      box-shadow:none;
      flex:0 0 auto;
      padding:0;
    }
    body.dark .sort-btn{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(2,6,23,.30);
    }
    .sort-ico{
      width:0; height:0;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-top:8px solid rgba(100,116,139,.9); /* segitiga default */
      transform:translateY(1px);
    }
    body.dark .sort-ico{ border-top-color: rgba(226,232,240,.75); }

    /* aktif ASC = segitiga ke atas */
    .sort-btn.asc .sort-ico{
      border-top:0;
      border-bottom:8px solid var(--primary);
      transform:translateY(-1px);
    }
    /* aktif DESC = segitiga ke bawah */
    .sort-btn.desc .sort-ico{
      border-top:8px solid var(--primary);
      border-bottom:0;
      transform:translateY(1px);
    }

    tbody td{
      padding:12px 12px;
      border-bottom:1px solid rgba(226,232,240,.8);
      color:var(--text);
      font-weight:500;
      vertical-align:top;
      background:rgba(255,255,255,.92);
    }
    body.dark tbody td{
      border-bottom:1px solid rgba(148,163,184,.14);
      background:rgba(17,24,39,.92);
    }
    tbody tr:nth-child(even) td{ background:rgba(248,250,252,.55); }
    tbody tr:hover td{ background:rgba(var(--primary-rgb),.08); }
    body.dark tbody tr:nth-child(even) td{ background:rgba(15,23,42,.24); }
    body.dark tbody tr:hover td{ background:rgba(var(--primary-rgb),.12); }
    tbody tr:last-child td{ border-bottom:0; }

    tbody td:nth-child(2){ text-align:left; }

    .aksi{ display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:nowrap; }
    .muted{ color:var(--muted); font-weight:700; font-size:12px; }

    .pager{
      margin-top:16px;
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
      gap:10px;
    }
    .pager-left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-start; min-width:0; }
    .pager-center{ display:flex; align-items:center; justify-content:center; gap:10px; min-width:260px; }
    .pager-right{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
    .page-chip{
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(229,234,242,.95);
      background:rgba(255,255,255,.95);
      box-shadow:var(--shadow-sm);
      font-size:13px;
      font-weight:500;
      color:rgba(15,23,42,.78);
      white-space:nowrap;
      max-width: 100%;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    body.dark .page-chip{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(2,6,23,.35);
      color:rgba(226,232,240,.78);
    }
    .rowsize-label{ color:rgba(15,23,42,.7); font-weight:500; font-size:13px; }
    body.dark .rowsize-label{ color:rgba(226,232,240,.75); }

    .dashboard-grid{
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    .dashboard-card{ min-height:0; min-width:0; }
    .dashboard-card.span-12{ grid-column:1 / -1; }
    .dashboard-card.span-11{ grid-column:span 11; }
    .dashboard-card.span-10{ grid-column:span 10; }
    .dashboard-card.span-9{ grid-column:span 9; }
    .dashboard-card.span-8{ grid-column:span 8; }
    .dashboard-card.span-7{ grid-column:span 7; }
    .dashboard-card.span-6{ grid-column:span 6; }
    .dashboard-card.span-5{ grid-column:span 5; }
    .dashboard-card.span-4{ grid-column:span 4; }
    .dashboard-card[data-dashboard-layout-key]{
      position:relative;
      transition:opacity .16s ease, box-shadow .16s ease, outline-color .16s ease, height .1s ease-out;
    }
    .dashboard-card[data-dashboard-user-height]{
      height:var(--dashboard-card-height) !important;
      min-height:var(--dashboard-card-height) !important;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .dashboard-card[data-dashboard-user-height] > .dashboard-table-wrap{
      flex:1 1 0;
      min-height:0;
      overflow:hidden;
    }
    .dashboard-card[data-dashboard-user-height] > .dashboard-table-wrap .dashboard-table-scroll{
      height:100%;
      min-height:0;
      overflow:auto;
    }
    .dashboard-card[data-dashboard-user-height] > #shortcutGrid{
      flex:1 1 auto;
      min-height:0;
      overflow-x:auto;
      overflow-y:hidden;
    }
    .dashboard-drag-handle{
      margin-left:auto;
      cursor:grab;
      touch-action:none;
      user-select:none;
      -webkit-user-select:none;
    }
    .dashboard-drag-handle:focus-visible{
      border-color:rgba(var(--primary-rgb),.5);
      background:var(--primary-soft);
      outline:3px solid var(--primary-glow);
      outline-offset:2px;
    }
    .dashboard-drag-handle:hover .material-symbols-rounded,
    .dashboard-drag-handle:focus-visible .material-symbols-rounded{
      color:var(--primary);
    }
    .icon-action.dashboard-drag-handle:active,
    .icon-action.dashboard-drag-handle.is-dragging{
      cursor:grabbing;
      transform:scale(.94);
    }
    .dashboard-resize-handle.icon-action{
      position:absolute;
      right:7px;
      bottom:7px;
      z-index:12;
      width:28px;
      min-width:28px;
      height:28px;
      border-radius:9px;
      cursor:nwse-resize;
      touch-action:none;
      user-select:none;
      -webkit-user-select:none;
      opacity:.58;
      box-shadow:0 5px 14px rgba(15,23,42,.08);
    }
    .dashboard-card:hover > .dashboard-resize-handle,
    .dashboard-resize-handle:focus-visible,
    .dashboard-resize-handle.is-resizing{
      opacity:1;
    }
    .dashboard-resize-handle:focus-visible{
      border-color:rgba(var(--primary-rgb),.5);
      outline:3px solid var(--primary-glow);
      outline-offset:2px;
    }
    .dashboard-resize-handle .material-symbols-rounded{
      font-size:17px;
      transform:rotate(-45deg);
    }
    .dashboard-resize-handle:hover .material-symbols-rounded,
    .dashboard-resize-handle:focus-visible .material-symbols-rounded,
    .dashboard-resize-handle.is-resizing .material-symbols-rounded{
      color:var(--primary);
    }
    .dashboard-resize-handle.is-resizing{
      cursor:nwse-resize;
      transform:scale(.92) !important;
    }
    body.dark .dashboard-resize-handle.icon-action{
      box-shadow:0 5px 14px rgba(0,0,0,.22);
    }
    .dashboard-drag-handle.icon-action,
    .dashboard-resize-handle.icon-action,
    body.dark .dashboard-drag-handle.icon-action,
    body.dark .dashboard-resize-handle.icon-action{
      border:0;
      background:transparent;
      box-shadow:none;
    }
    .dashboard-drag-handle.icon-action:hover:not(:disabled),
    .dashboard-drag-handle.icon-action:focus-visible,
    .dashboard-resize-handle.icon-action:hover:not(:disabled),
    .dashboard-resize-handle.icon-action:focus-visible{
      border:0;
      background:var(--primary-soft);
      box-shadow:none;
    }
    .dashboard-card.is-dashboard-dragging{
      z-index:4;
      opacity:.4;
      outline:2px dashed rgba(var(--primary-rgb),.55);
      outline-offset:-2px;
      box-shadow:0 22px 48px rgba(15,23,42,.18), 0 0 0 3px var(--primary-glow);
    }
    .dashboard-card.is-dashboard-resizing{
      z-index:5;
      outline:2px solid rgba(var(--primary-rgb),.58);
      outline-offset:-2px;
      box-shadow:0 22px 48px rgba(15,23,42,.18), 0 0 0 4px var(--primary-glow);
    }
    .dashboard-card.is-dashboard-keyboard-moved{
      box-shadow:0 0 0 3px var(--primary-glow), var(--shadow-sm);
    }
    .dashboard-card.is-dashboard-settling{
      animation:dashboardCardSettle .34s cubic-bezier(.2,.8,.2,1);
    }
    .dashboard-card.is-dashboard-drop-before::before,
    .dashboard-card.is-dashboard-drop-after::after{
      content:'';
      position:absolute;
      left:10px;
      right:10px;
      z-index:8;
      height:4px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 4px var(--primary-glow);
      pointer-events:none;
      animation:dashboardDropPulse .85s ease-in-out infinite alternate;
    }
    .dashboard-card.is-dashboard-drop-before::before{ top:-8px; }
    .dashboard-card.is-dashboard-drop-after::after{ bottom:-8px; }
    .dashboard-drag-ghost{
      position:fixed;
      z-index:100000;
      display:flex;
      align-items:center;
      gap:8px;
      max-width:min(310px, calc(100vw - 24px));
      padding:10px 13px;
      border:1px solid rgba(var(--primary-rgb),.45);
      border-radius:12px;
      background:var(--panel);
      color:var(--text);
      box-shadow:0 18px 45px rgba(15,23,42,.22);
      font-size:12px;
      font-weight:850;
      line-height:1.3;
      animation:dashboardGhostIn .18s cubic-bezier(.2,.8,.2,1) both;
      pointer-events:none;
    }
    .dashboard-drag-ghost .material-symbols-rounded{
      color:var(--primary);
      font-size:20px;
    }
    .dashboard-layout-dragging,
    .dashboard-layout-dragging *{
      cursor:grabbing !important;
      user-select:none !important;
    }
    .dashboard-resize-badge{
      position:fixed;
      z-index:100001;
      display:flex;
      align-items:center;
      min-height:30px;
      padding:6px 10px;
      border:1px solid rgba(var(--primary-rgb),.38);
      border-radius:10px;
      background:var(--panel);
      color:var(--text);
      box-shadow:0 14px 34px rgba(15,23,42,.18);
      font-size:11px;
      font-weight:850;
      line-height:1.2;
      white-space:nowrap;
      pointer-events:none;
      animation:dashboardBadgeIn .16s cubic-bezier(.2,.8,.2,1) both;
    }
    .dashboard-card-resizing,
    .dashboard-card-resizing *{
      cursor:nwse-resize !important;
      user-select:none !important;
    }
    @keyframes dashboardGhostIn{
      from{ opacity:0; transform:translateY(5px) scale(.96) rotate(0deg); }
      to{ opacity:1; transform:translateY(0) scale(1) rotate(1deg); }
    }
    @keyframes dashboardBadgeIn{
      from{ opacity:0; transform:translateY(5px) scale(.96); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes dashboardCardSettle{
      0%{ transform:scale(.985); }
      58%{ transform:scale(1.008); }
      100%{ transform:scale(1); }
    }
    @keyframes dashboardDropPulse{
      from{ opacity:.68; transform:scaleX(.97); }
      to{ opacity:1; transform:scaleX(1); }
    }
    @media (prefers-reduced-motion:reduce){
      .dashboard-card[data-dashboard-layout-key],
      .dashboard-drag-ghost,
      .dashboard-resize-badge,
      .dashboard-card.is-dashboard-settling,
      .dashboard-card.is-dashboard-drop-before::before,
      .dashboard-card.is-dashboard-drop-after::after{
        animation:none !important;
        transition:none !important;
      }
    }

    .chart-card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .chart-card-title{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      color:var(--text);
      font-size:12.5px;
      font-weight:900;
      line-height:1.25;
    }
    .chart-card-title .material-symbols-rounded{ color:var(--primary); font-size:19px; }
    .chart-wrap{
      position:relative;
      width:100%;
      height:255px;
      min-height:220px;
    }
    .chart-wrap.compact{
      height:170px;
      min-height:150px;
    }
    .chart-wrap canvas{
      width:100%;
      height:100%;
      display:block;
    }
    .chart-meta{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin-top:8px;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
      line-height:1.35;
    }
    .dash-pill{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      border:1px solid rgba(203,213,225,.78);
      background:rgba(248,250,252,.78);
      border-radius:999px;
      padding:5px 9px;
      color:var(--muted);
      font-size:11.5px;
      font-weight:800;
    }
    body.dark .dash-pill{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.35);
      color:rgba(226,232,240,.72);
    }
    .dash-tooltip{
      position:fixed;
      display:none;
      z-index:120;
      max-width:260px;
      padding:9px 10px;
      border-radius:10px;
      border:1px solid rgba(203,213,225,.85);
      background:rgba(255,255,255,.96);
      box-shadow:0 16px 42px rgba(15,23,42,.18);
      color:var(--text);
      font-size:12px;
      line-height:1.45;
      pointer-events:none;
    }
    body.dark .dash-tooltip{
      border-color:rgba(148,163,184,.2);
      background:rgba(17,24,39,.96);
    }
    .dashboard-table-scroll{ max-height:none; min-height:0; overflow-y:visible; overflow-x:auto; }
    .dashboard-table-wrap table{ min-width:760px; table-layout:fixed; }
    .dashboard-table-wrap td{ white-space:normal; line-height:1.35; }
    .sys-module-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:10px;
    }
    #page-system-data.section.active{
      display:grid;
      gap:14px;
    }
    #page-system-data .card{
      margin:0;
    }
    .sys-module-btn{
      min-height:58px;
      border:1px solid rgba(203,213,225,.78);
      background:rgba(255,255,255,.88);
      border-radius:14px;
      padding:10px 12px;
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      cursor:pointer;
      box-shadow:var(--shadow-sm);
      text-align:left;
      font-weight:500;
    }
    .sys-module-btn .material-symbols-rounded{ color:var(--primary); font-size:22px; }
    .sys-module-btn span:last-child{ font-weight:500; }
    .sys-module-btn.active{
      border-color:rgba(var(--primary-rgb),.45);
      background:var(--primary-soft);
    }
    body.dark .sys-module-btn{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.35);
    }
    #page-system-data table{ min-width:1280px; table-layout:auto; }
    #page-system-data td.wrap{ white-space:normal; line-height:1.35; }
    #page-penelitian.section.active{
      display:grid;
      gap:14px;
    }
    #page-penelitian .card{ margin:0; }
    #page-kerjasama.section.active{
      display:grid;
      gap:14px;
    }
    #page-kerjasama .card{ margin:0; }
    #page-kerjasama table{
      min-width:980px;
      table-layout:fixed;
    }
    .cooperation-status-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:26px;
      padding:5px 9px;
      border-radius:999px;
      border:1px solid rgba(34,197,94,.24);
      background:rgba(34,197,94,.12);
      color:#15803d;
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .cooperation-status-chip.inactive{
      border-color:rgba(148,163,184,.32);
      background:rgba(148,163,184,.14);
      color:var(--muted);
    }
    .cooperation-status-chip .material-symbols-rounded{ font-size:16px; }
    body.dark .cooperation-status-chip{
      color:#86efac;
      background:rgba(34,197,94,.16);
      border-color:rgba(34,197,94,.26);
    }
    body.dark .cooperation-status-chip.inactive{
      color:rgba(203,213,225,.86);
      background:rgba(148,163,184,.12);
      border-color:rgba(148,163,184,.2);
    }
    .cooperation-detail-hero{
      grid-column:1 / -1;
      border:1px solid rgba(226,232,240,.9);
      border-radius:16px;
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.12), rgba(255,255,255,.78));
      padding:16px;
      display:grid;
      gap:12px;
    }
    .cooperation-detail-parties{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
      gap:12px;
      align-items:center;
    }
    .cooperation-party-box{
      border:1px solid rgba(203,213,225,.78);
      background:rgba(255,255,255,.78);
      border-radius:14px;
      padding:12px;
      min-width:0;
    }
    .cooperation-party-label{
      color:var(--muted);
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0;
      margin-bottom:5px;
    }
    .cooperation-party-name{
      font-size:15px;
      font-weight:850;
      color:var(--text);
      line-height:1.35;
    }
    .cooperation-party-arrow{
      width:38px;
      height:38px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:var(--primary);
      color:#fff;
      box-shadow:0 14px 28px rgba(var(--primary-rgb),.24);
    }
    .cooperation-detail-meta{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .cooperation-detail-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(203,213,225,.8);
      background:rgba(255,255,255,.78);
      font-size:12px;
      font-weight:800;
      color:var(--text);
    }
    .cooperation-detail-pill .material-symbols-rounded{ font-size:16px; color:var(--primary); }
    button.cooperation-detail-pill{
      appearance:none;
      cursor:pointer;
      font-family:inherit;
    }
    button.cooperation-detail-pill:hover{
      border-color:rgba(var(--primary-rgb),.36);
      background:rgba(var(--primary-rgb),.12);
    }
    .cooperation-file-mode{
      display:grid;
      gap:8px;
    }
    .cooperation-inline-row{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:1.1fr 1fr 1fr;
      gap:12px;
    }
    .cooperation-inline-row .field{ min-width:0; }
    body.dark .cooperation-detail-hero{
      border-color:rgba(148,163,184,.2);
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.16), rgba(15,23,42,.35));
    }
    body.dark .cooperation-party-box,
    body.dark .cooperation-detail-pill{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.42);
    }
    @media (max-width: 720px){
      .cooperation-detail-parties{
        grid-template-columns:1fr;
      }
      .cooperation-party-arrow{
        justify-self:center;
        transform:rotate(90deg);
      }
      .cooperation-inline-row{
        grid-template-columns:1fr;
        grid-column:auto;
      }
    }
    #page-pengabdian.section.active{
      display:grid;
      gap:14px;
    }
    #page-pengabdian .card{ margin:0; }
    .research-tabs{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .module-submenu-card,
    #scheduleTabs{
      display:none !important;
    }
    .research-tabs.service-tabs{
      grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .research-tab{
      border:1px solid rgba(203,213,225,.8);
      background:rgba(255,255,255,.9);
      border-radius:14px;
      padding:12px;
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      cursor:pointer;
      box-shadow:var(--shadow-sm);
      text-align:left;
      font-weight:500;
    }
    .research-tab .material-symbols-rounded{ color:var(--primary); font-size:22px; }
    .research-tab.active{
      border-color:rgba(var(--primary-rgb),.46);
      background:var(--primary-soft);
    }
    body.dark .research-tab{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.35);
    }
    .schedule-tabs{
      grid-template-columns:repeat(2,minmax(180px,260px));
      margin-bottom:12px;
    }
    .schedule-tabs .research-tab{
      padding:10px 12px;
      min-height:44px;
    }
    .schedule-main-actions{
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .schedule-period-semesters{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
    }
    .schedule-period-semesters label{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:38px;
      padding:8px 10px;
      border:1px solid rgba(203,213,225,.78);
      border-radius:12px;
      background:rgba(255,255,255,.86);
      color:var(--text);
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      box-shadow:var(--shadow-sm);
    }
    .schedule-period-semesters input{
      width:15px;
      height:15px;
      accent-color:var(--primary);
    }
    body.dark .schedule-period-semesters label{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.36);
    }
    .schedule-pane{
      display:none;
    }
    .schedule-pane.active{
      display:block;
    }
    #page-schedule[data-schedule-subtab="matrix"] .schedule-table-filter{
      display:none;
    }
    #page-schedule[data-schedule-subtab="matrix"] .schedule-table-tool,
    #page-schedule[data-schedule-subtab="table"] .schedule-matrix-controls{
      display:none !important;
    }
    #page-schedule .schedule-period-filter{
      flex:0 1 190px;
      min-width:180px;
    }
    #page-schedule .schedule-table-filter{
      flex:0 0 112px;
      min-width:124px;
    }
    .schedule-table-pane .table-wrap{
      margin-top:0;
    }
    #schTableScroll{
      max-height:none !important;
      min-height:0 !important;
      overflow-y:visible !important;
      overflow-x:auto;
      padding-bottom:0;
    }
    .schedule-matrix-panel{
      position:relative;
      margin:0;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      overflow:visible;
    }
    body.dark .schedule-matrix-panel{
      border-color:transparent;
      background:transparent;
    }
    .schedule-matrix-toolbar{
      display:none;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .schedule-matrix-title{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:220px;
    }
    .schedule-matrix-title > .material-symbols-rounded{
      width:38px;
      height:38px;
      border-radius:13px;
      display:grid;
      place-items:center;
      color:var(--primary);
      background:var(--primary-soft);
      border:1px solid rgba(var(--primary-rgb),.24);
      box-shadow:0 10px 24px rgba(var(--primary-rgb),.12);
    }
    .schedule-matrix-title strong{
      display:block;
      font-size:13px;
      color:var(--text);
      line-height:1.2;
    }
    .schedule-matrix-title small{
      display:block;
      margin-top:2px;
      font-size:11.5px;
      font-weight:700;
      color:var(--muted);
    }
    .schedule-matrix-controls{
      display:flex;
      align-items:flex-end;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .schedule-matrix-controls .filter-field.compact{
      min-width:112px;
    }
    .schedule-matrix-controls .filter-field.compact .select{
      min-width:112px;
    }
    .schedule-room-filter{
      position:relative;
      min-width:184px;
      display:flex;
      flex-direction:column;
      gap:5px;
    }
    .schedule-room-filter-btn{
      min-width:184px;
      justify-content:space-between;
      padding-inline:12px 8px;
    }
    .schedule-room-filter-btn .material-symbols-rounded{
      font-size:18px;
    }
    .schedule-room-panel{
      display:none;
      position:absolute;
      right:0;
      top:calc(100% + 6px);
      width:min(360px, calc(100vw - 40px));
      max-height:320px;
      overflow:auto;
      z-index:70;
      padding:10px;
      border:1px solid rgba(203,213,225,.88);
      border-radius:14px;
      background:rgba(255,255,255,.98);
      box-shadow:0 22px 60px rgba(15,23,42,.18);
    }
    .schedule-room-panel.show{ display:block; }
    body.dark .schedule-room-panel{
      border-color:rgba(148,163,184,.22);
      background:rgba(17,24,39,.98);
      box-shadow:0 22px 60px rgba(0,0,0,.38);
    }
    .schedule-room-dataonly{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px;
      border-radius:10px;
      background:var(--primary-soft);
      color:var(--text);
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }
    .schedule-room-dataonly input,
    .schedule-room-checks input{
      width:15px;
      height:15px;
      accent-color:var(--primary);
    }
    .schedule-room-panel-actions{
      display:flex;
      gap:8px;
      margin:9px 0;
    }
    .schedule-room-panel-actions button{
      flex:1;
      min-height:30px;
      border:1px solid rgba(203,213,225,.82);
      border-radius:10px;
      background:rgba(255,255,255,.92);
      color:var(--text);
      font-size:11.5px;
      font-weight:800;
      cursor:pointer;
    }
    body.dark .schedule-room-panel-actions button{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.42);
    }
    .schedule-room-checks{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:7px;
    }
    .schedule-room-checks label{
      display:flex;
      align-items:center;
      gap:6px;
      min-height:32px;
      padding:6px 7px;
      border:1px solid rgba(203,213,225,.72);
      border-radius:10px;
      background:rgba(248,250,252,.86);
      color:var(--text);
      font-size:11.5px;
      font-weight:800;
      cursor:pointer;
      min-width:0;
    }
    .schedule-room-checks span{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    body.dark .schedule-room-checks label{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.36);
    }
    .schedule-matrix-alert{
      margin-bottom:10px;
      border:1px solid rgba(239,68,68,.22);
      background:rgba(254,226,226,.8);
      color:#b91c1c;
      border-radius:12px;
      padding:9px 11px;
      font-size:12px;
      font-weight:800;
      line-height:1.35;
    }
    body.dark .schedule-matrix-alert{
      background:rgba(127,29,29,.22);
      color:#fecaca;
      border-color:rgba(248,113,113,.26);
    }
    .schedule-matrix-scroll{
      overflow:auto;
      border:1px solid rgba(203,213,225,.72);
      border-radius:14px;
      background:rgba(255,255,255,.94);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    body.dark .schedule-matrix-scroll{
      border-color:rgba(148,163,184,.18);
      background:rgba(15,23,42,.24);
      box-shadow:none;
    }
    .schedule-matrix-grid{
      display:grid;
      grid-template-columns:74px 76px repeat(3,minmax(210px,1fr));
      min-width:860px;
      align-items:stretch;
    }
    .schedule-matrix-corner,
    .schedule-matrix-time,
    .schedule-day-cell,
    .schedule-room-cell,
    .schedule-slot{
      border-right:1px solid rgba(203,213,225,.68);
      border-bottom:1px solid rgba(203,213,225,.68);
    }
    body.dark .schedule-matrix-corner,
    body.dark .schedule-matrix-time,
    body.dark .schedule-day-cell,
    body.dark .schedule-room-cell,
    body.dark .schedule-slot{
      border-color:rgba(148,163,184,.18);
    }
    .schedule-matrix-corner,
    .schedule-matrix-time{
      min-height:38px;
      padding:9px 10px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.06);
      color:var(--text);
      font-size:12px;
      font-weight:900;
      text-align:center;
    }
    body.dark .schedule-matrix-corner,
    body.dark .schedule-matrix-time{
      background:rgba(255,255,255,.05);
    }
    .schedule-day-cell{
      padding:10px 8px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.04);
      color:var(--text);
      font-size:12px;
      font-weight:900;
      text-align:center;
    }
    .schedule-room-cell{
      min-height:82px;
      display:grid;
      place-items:center;
      padding:8px;
      background:rgba(255,255,255,.72);
      color:var(--muted);
      font-size:12px;
      font-weight:900;
      text-align:center;
    }
    body.dark .schedule-room-cell{
      background:rgba(255,255,255,.03);
    }
    .schedule-slot{
      min-height:82px;
      padding:6px;
      display:flex;
      flex-direction:column;
      gap:6px;
      background:rgba(255,255,255,.72);
      transition:background .15s ease, box-shadow .15s ease;
    }
    body.dark .schedule-slot{
      background:rgba(15,23,42,.18);
    }
    .schedule-slot.drag-over{
      background:var(--primary-soft);
      box-shadow:inset 0 0 0 2px rgba(var(--primary-rgb),.34);
    }
    .schedule-slot-empty{
      min-height:36px;
      display:grid;
      place-items:center;
      border:1px dashed rgba(148,163,184,.34);
      border-radius:10px;
      color:rgba(100,116,139,.56);
      font-size:11px;
      font-weight:800;
    }
    .schedule-card{
      position:relative;
      border:1px solid rgba(var(--primary-rgb),.38);
      background:var(--primary);
      color:#fff;
      border-radius:10px;
      padding:8px 36px 8px 9px;
      cursor:grab;
      box-shadow:0 10px 22px rgba(var(--primary-rgb),.18);
      user-select:none;
    }
    .schedule-card:active{ cursor:grabbing; }
    .schedule-card.dragging{ opacity:.55; }
    .schedule-card-title{
      font-size:12px;
      font-weight:900;
      line-height:1.25;
      word-break:break-word;
    }
    .schedule-card-meta{
      margin-top:5px;
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      align-items:center;
    }
    .schedule-card-chip{
      display:inline-flex;
      align-items:center;
      min-height:20px;
      padding:2px 6px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      color:#fff;
      font-size:10.5px;
      font-weight:900;
      line-height:1.1;
    }
    .schedule-card-dosen{
      margin-top:5px;
      color:rgba(255,255,255,.88);
      font-size:10.8px;
      line-height:1.25;
      font-weight:700;
      word-break:break-word;
    }
    .schedule-card-edit{
      position:absolute;
      top:6px;
      right:6px;
      width:24px;
      height:24px;
      min-width:24px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.18);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      box-shadow:none;
      padding:0;
    }
    .schedule-card-edit:hover{
      background:rgba(255,255,255,.28);
    }
    .schedule-card-edit .material-symbols-rounded{
      font-size:15px;
      color:#fff;
    }
    .schedule-basket-toggle{
      position:fixed;
      right:clamp(16px, 3vw, 34px);
      bottom:clamp(18px, 4vh, 32px);
      z-index:90;
      width:48px;
      min-width:48px;
      height:48px;
      border-radius:16px;
      border:1px solid rgba(var(--primary-rgb),.32);
      background:#fff;
      color:var(--text);
      box-shadow:0 14px 34px rgba(var(--primary-rgb),.16);
    }
    body.dark .schedule-basket-toggle{
      background:#111827;
      border-color:rgba(148,163,184,.22);
    }
    .schedule-basket-toggle .material-symbols-rounded{
      color:var(--primary);
    }
    .schedule-basket-count{
      position:absolute;
      right:-6px;
      top:-6px;
      min-width:22px;
      min-height:22px;
      padding:3px 6px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:var(--primary);
      color:#fff;
      font-size:11px;
      font-weight:900;
      line-height:1;
      box-shadow:0 8px 18px rgba(var(--primary-rgb),.22);
    }
    .schedule-basket-toggle.active{
      background:var(--primary);
      color:#fff;
      border-color:var(--primary);
    }
    .schedule-basket-toggle.active .material-symbols-rounded{ color:#fff; }
    .schedule-basket-toggle.active .schedule-basket-count{
      background:rgba(255,255,255,.22);
      color:#fff;
    }
    .schedule-basket-toggle.drag-over,
    .schedule-unmapped.drag-over{
      border-color:var(--primary);
      background:var(--primary-soft);
      box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16), 0 18px 44px rgba(var(--primary-rgb),.2);
    }
    .schedule-basket-toggle.drag-over{
      background:#fff;
    }
    body.dark .schedule-basket-toggle.drag-over{
      background:#111827;
    }
    .schedule-basket-toggle.drag-over .material-symbols-rounded{
      color:var(--primary);
    }
    .schedule-unmapped{
      position:fixed;
      right:clamp(16px, 3vw, 34px);
      top:auto;
      bottom:86px;
      width:min(370px, calc(100vw - 32px));
      max-height:min(540px, calc(100vh - 140px));
      overflow:auto;
      z-index:89;
      margin-top:0;
      padding:10px;
      border:1px solid rgba(203,213,225,.72);
      border-radius:14px;
      background:rgba(255,255,255,.96);
      box-shadow:0 24px 70px rgba(15,23,42,.18);
    }
    body.dark .schedule-unmapped{
      border-color:rgba(148,163,184,.18);
      background:rgba(17,24,39,.96);
      box-shadow:0 24px 70px rgba(0,0,0,.36);
    }
    .schedule-unmapped-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px;
      margin-bottom:8px;
      color:var(--muted);
      font-size:12px;
      font-weight:900;
    }
    .schedule-unmapped-title{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .schedule-basket-close{
      width:28px;
      height:28px;
      border:1px solid rgba(203,213,225,.75);
      border-radius:9px;
      background:rgba(255,255,255,.86);
      color:var(--muted);
      display:grid;
      place-items:center;
      cursor:pointer;
      padding:0;
    }
    .schedule-basket-close .material-symbols-rounded{
      font-size:17px;
    }
    body.dark .schedule-basket-close{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.42);
    }
    .schedule-unmapped-list{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
      gap:8px;
    }
    .research-table table{
      min-width:920px;
      table-layout:fixed;
    }
    .research-table .table-scroll{
      max-height:none !important;
      min-height:0 !important;
      overflow-y:visible !important;
      overflow-x:auto;
      padding-bottom:0;
    }
    .research-table th:first-child,
    .research-table td:first-child{
      width:44px;
      text-align:center;
    }
    .research-table td{
      vertical-align:top;
      white-space:normal;
      line-height:1.38;
    }
    .research-title-cell{
      font-weight:500;
      color:var(--text);
    }
    .research-meta-line{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
    }
    .research-personnel-cell{
      display:grid;
      gap:5px;
      line-height:1.35;
    }
    .research-personnel-line{
      color:var(--text);
    }
    .research-personnel-line + .research-personnel-line{ color:var(--muted); }
    .research-actions{
      display:flex;
      justify-content:center;
      gap:6px;
      align-items:center;
      flex-wrap:nowrap;
    }
    .research-actions .icon-action{
      width:32px;
      height:32px;
      border-radius:10px;
    }
    .research-bulkbar{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin:14px 0 12px;
      padding:11px 12px;
      border:1px solid rgba(248,113,113,.24);
      border-radius:16px;
      background:linear-gradient(180deg, rgba(255,247,247,.96), rgba(254,242,242,.86));
      color:#7f1d1d;
      font-size:13px;
      font-weight:600;
      box-shadow:0 12px 28px rgba(127,29,29,.08);
    }
    .research-bulkbar.show{ display:flex; }
    #lecBulkbar.show{ margin:16px 0 14px; }
    .research-bulk-info{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:38px;
    }
    .research-bulk-info .material-symbols-rounded{
      width:30px;
      height:30px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(248,113,113,.14);
      color:#b91c1c;
      font-size:18px;
    }
    .research-bulk-delete{
      border:0;
      background:#dc2626;
      color:#fff;
      border-radius:12px;
      min-height:38px;
      padding:9px 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      font-size:13px;
      font-weight:800;
      box-shadow:0 12px 24px rgba(220,38,38,.22);
    }
    .research-bulk-delete:hover{ filter:brightness(.96); }
    .research-bulk-delete .material-symbols-rounded{ font-size:18px; }
    .research-bulk-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .research-bulk-action{
      border:1px solid rgba(var(--primary-rgb),.28);
      background:rgba(var(--primary-rgb),.12);
      color:var(--primary-ink, var(--text));
      border-radius:12px;
      min-height:38px;
      padding:9px 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      font-size:13px;
      font-weight:800;
      box-shadow:0 12px 24px rgba(var(--primary-rgb),.12);
    }
    .research-bulk-action:hover{ filter:brightness(.98); }
    .research-bulk-action .material-symbols-rounded{ font-size:18px; }
    body.dark .research-bulkbar{
      background:linear-gradient(180deg, rgba(127,29,29,.28), rgba(127,29,29,.18));
      border-color:rgba(248,113,113,.26);
      color:#fecaca;
      box-shadow:0 12px 28px rgba(0,0,0,.16);
    }
    body.dark .research-bulk-info .material-symbols-rounded{
      background:rgba(248,113,113,.18);
      color:#fecaca;
    }
    body.dark .research-bulk-action{
      color:var(--text);
      background:rgba(var(--primary-rgb),.16);
      border-color:rgba(var(--primary-rgb),.24);
      box-shadow:0 12px 24px rgba(0,0,0,.16);
    }
    .research-modal-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      padding:14px;
    }
    #researchModalBackdrop .modal,
    #serviceModalBackdrop .modal,
    #sysModalBackdrop .modal{
      max-height:min(90vh, 760px);
      display:flex;
      flex-direction:column;
    }
    #researchModalBackdrop .modal-head,
    #researchModalBackdrop .modal-foot,
    #serviceModalBackdrop .modal-head,
    #serviceModalBackdrop .modal-foot,
    #sysModalBackdrop .modal-head,
    #sysModalBackdrop .modal-foot{
      flex:0 0 auto;
    }
    #researchFormGrid,
    #serviceFormGrid,
    #sysFormGrid{
      flex:1 1 auto;
      overflow-y:auto;
      min-height:0;
      scrollbar-gutter:stable;
    }
    #researchError,
    #serviceError,
    #sysError{
      flex:0 0 auto;
    }
    .research-modal-grid .span-2{ grid-column:1 / -1; }
    .research-form-row{
      grid-column:1 / -1;
      display:grid;
      gap:12px;
      min-width:0;
    }
    .research-form-row-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .research-form-row-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .research-form-full{ grid-column:1 / -1; min-width:0; }
    .research-check-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:7px 10px;
      padding:10px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--panel-soft,var(--panel));
      max-height:170px;
      overflow:auto;
    }
    .research-check-option{
      display:flex;
      align-items:center;
      gap:7px;
      min-width:0;
      font-size:12px;
      color:var(--text);
      cursor:pointer;
    }
    .research-check-option span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .research-location-other{ display:none; margin-top:8px; }
    .research-location-other.show{ display:block; }
    .research-modal-grid select[multiple]{
      min-height:112px;
      padding:8px;
    }
    .research-other-input{
      display:none;
      margin-top:8px;
    }
    .research-other-input.show{ display:block; }
    .research-detail-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      padding:16px;
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      scrollbar-gutter:stable;
    }
    #researchDetailBackdrop .modal,
    #serviceDetailBackdrop .modal,
    #sysDetailBackdrop .modal{
      width:min(1080px, 96vw) !important;
      max-height:min(90vh, 780px);
      display:flex;
      flex-direction:column;
    }
    #sysDetailBackdrop .modal{
      width:min(1180px, 96vw) !important;
    }
    #sysDetailGrid{
      grid-template-columns:repeat(4,minmax(0,1fr));
    }
    #sysDetailGrid .detail-wide{
      grid-column:span 2;
    }
    #sysDataTable .sys-col-check{
      width:44px;
      text-align:center;
    }
    #sysDataTable .sys-col-aksi{
      width:132px;
      text-align:center;
    }
    #sysDataTable.system-mahasiswa-table{
      min-width:720px;
      table-layout:fixed;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-check{
      width:44px;
      text-align:center;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-nim{
      width:150px;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-nama{
      width:auto;
      min-width:260px;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-jk{
      width:70px;
      text-align:center;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-angkatan{
      width:110px;
      text-align:center;
    }
    #sysDataTable.system-mahasiswa-table .sys-col-aksi{
      width:128px;
      text-align:center;
    }
    #sysDataTable.system-mahasiswa-table td.sys-col-nama{
      white-space:normal;
      line-height:1.35;
    }
    #sysDataTable.system-mahasiswa-table td.sys-col-nim,
    #sysDataTable.system-mahasiswa-table td.sys-col-jk,
    #sysDataTable.system-mahasiswa-table td.sys-col-angkatan{
      white-space:nowrap;
    }
    #sysDataTable.system-peminatan-table{
      min-width:620px;
      table-layout:fixed;
    }
    #sysDataTable.system-peminatan-table th,
    #sysDataTable.system-peminatan-table td{
      padding:10px 12px;
      white-space:nowrap;
      vertical-align:middle;
    }
    #sysDataTable.system-peminatan-table .sys-col-check{
      width:42px;
      text-align:center;
    }
    #sysDataTable.system-peminatan-table .sys-col-tahun{
      width:92px;
      text-align:center;
    }
    #sysDataTable.system-peminatan-table .sys-col-peminat,
    #sysDataTable.system-peminatan-table .sys-col-kuota,
    #sysDataTable.system-peminatan-table .sys-col-realisasi,
    #sysDataTable.system-peminatan-table .sys-col-ketetatan{
      width:112px;
      text-align:right;
      font-variant-numeric:tabular-nums;
    }
    #sysDataTable.system-peminatan-table .sys-col-aksi{
      width:120px;
      text-align:center;
    }
    #sysDataTable.system-akm-table{
      min-width:1040px;
      table-layout:fixed;
    }
    #sysDataTable.system-akm-table th,
    #sysDataTable.system-akm-table td{
      padding:9px 10px;
      white-space:nowrap;
      vertical-align:middle;
    }
    #sysDataTable.system-akm-table .sys-col-check{
      width:42px;
      text-align:center;
    }
    #sysDataTable.system-akm-table .sys-col-periode{
      width:92px;
      text-align:center;
    }
    #sysDataTable.system-akm-table .sys-col-angkatan{
      width:92px;
      text-align:center;
    }
    #sysDataTable.system-akm-table .sys-col-total{
      width:76px;
      text-align:right;
      font-variant-numeric:tabular-nums;
    }
    #sysDataTable.system-akm-table th[class*="sys-col-"]:not(.sys-col-check):not(.sys-col-periode):not(.sys-col-angkatan):not(.sys-col-aksi):not(.sys-col-total),
    #sysDataTable.system-akm-table td[class*="sys-col-"]:not(.sys-col-check):not(.sys-col-periode):not(.sys-col-angkatan):not(.sys-col-aksi):not(.sys-col-total){
      width:62px;
      text-align:right;
      font-variant-numeric:tabular-nums;
    }
    #sysDataTable.system-akm-table .sys-col-aksi{
      width:120px;
      text-align:center;
    }
    #sysDataTable.system-prestasi-table{
      min-width:980px;
      table-layout:fixed;
    }
    #sysDataTable.system-prestasi-table th,
    #sysDataTable.system-prestasi-table td{
      padding:9px 10px;
      vertical-align:middle;
    }
    #sysDataTable.system-prestasi-table .sys-col-check{
      width:42px;
      text-align:center;
    }
    #sysDataTable.system-prestasi-table .sys-col-nama-kegiatan{
      width:230px;
    }
    #sysDataTable.system-prestasi-table .sys-col-peserta{
      width:170px;
    }
    #sysDataTable.system-prestasi-table .sys-col-tanggal,
    #sysDataTable.system-prestasi-table .sys-col-prestasi,
    #sysDataTable.system-prestasi-table .sys-col-periode,
    #sysDataTable.system-prestasi-table .sys-col-dokumentasi,
    #sysDataTable.system-prestasi-table .sys-col-sertifikat{
      width:112px;
      white-space:nowrap;
    }
    #sysDataTable.system-prestasi-table .sys-col-aksi{
      width:120px;
      text-align:center;
    }
    #sysDataTable.system-prestasi-table td.sys-col-nama-kegiatan,
    #sysDataTable.system-prestasi-table td.sys-col-peserta{
      white-space:normal;
      line-height:1.32;
    }
    .sys-file-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      max-width:100%;
      min-height:26px;
      padding:5px 8px;
      border-radius:9px;
      border:1px solid rgba(var(--primary-rgb),.24);
      background:rgba(var(--primary-rgb),.10);
      color:var(--text);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .system-file-existing{
      margin-top:7px;
      font-size:12px;
      line-height:1.35;
    }
    .system-detail-links{
      display:grid;
      gap:6px;
    }
    .sys-file-chip{
      cursor:pointer;
      font-family:inherit;
    }
    .sys-file-chip:disabled{
      cursor:not-allowed;
      opacity:.55;
    }
    .sys-file-preview-layout{
      display:grid;
      grid-template-columns:220px minmax(0,1fr);
      gap:12px;
      min-height:420px;
    }
    .sys-file-preview-layout.single{ grid-template-columns:1fr; }
    .sys-file-preview-list{
      display:grid;
      align-content:start;
      gap:8px;
      max-height:520px;
      overflow:auto;
      padding-right:4px;
    }
    .sys-file-preview-item{
      border:1px solid rgba(226,232,240,.9);
      background:rgba(248,250,252,.78);
      border-radius:12px;
      padding:9px 10px;
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--text);
      cursor:pointer;
      text-align:left;
      font-weight:700;
      font-size:12px;
    }
    .sys-file-preview-item.active{
      border-color:rgba(var(--primary-rgb),.42);
      background:rgba(var(--primary-rgb),.12);
    }
    .sys-file-preview-item .material-symbols-rounded{ font-size:18px; color:var(--primary); }
    .sys-file-preview-stage{
      min-height:420px;
      border:1px solid rgba(226,232,240,.9);
      border-radius:14px;
      background:rgba(248,250,252,.62);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .sys-file-preview-stage img{
      max-width:100%;
      max-height:520px;
      object-fit:contain;
      display:block;
    }
    .sys-file-preview-stage iframe,
    .sys-file-preview-stage object{
      width:100%;
      height:520px;
      border:0;
      background:white;
    }
    .sys-file-preview-empty{
      display:grid;
      gap:8px;
      place-items:center;
      color:var(--muted);
      text-align:center;
      padding:24px;
      font-size:13px;
      font-weight:700;
    }
    .sys-file-preview-empty .material-symbols-rounded{
      font-size:34px;
      color:var(--primary);
    }
    body.dark .sys-file-preview-item,
    body.dark .sys-file-preview-stage{
      border-color:rgba(148,163,184,.2);
      background:rgba(15,23,42,.42);
    }
    .act-title-cell{ min-width:180px; font-weight:900; color:var(--text); line-height:1.25; overflow-wrap:anywhere; }
    .act-muted-cell{ color:var(--muted); font-size:12px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
    #page-activity .table-scroll{
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      scrollbar-gutter:stable;
    }
    #actTable{
      width:100%;
      min-width:940px;
      table-layout:fixed;
    }
    #actTable th,
    #actTable td{
      overflow:visible;
      text-overflow:clip;
      vertical-align:top;
    }
    #actTable th{
      white-space:normal;
      line-height:1.25;
      text-align:left;
    }
    #actTable thead th[data-act-col="status"],
    #actTable thead th[data-act-col="berkas"],
    #actTable thead th.col-aksi{ text-align:center; }
    #actTable td.act-data-cell{
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:normal;
      line-height:1.4;
    }
    #actTable .act-wrap-cell{ min-width:250px; white-space:normal; overflow-wrap:anywhere; }
    #actTable .act-table-file{
      border:0;
      background:transparent;
      color:var(--primary);
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:2px 0;
      font:inherit;
      font-size:12px;
      font-weight:850;
      cursor:pointer;
      white-space:nowrap;
    }
    #actTable .act-table-file:hover{ color:var(--primary-2); }
    #actTable .act-table-file,
    #actTable .act-file-badge,
    #actTable .act-status-select,
    #actTable .act-badge{ font-weight:400; }
    .act-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:4px 8px; border-radius:999px; border:1px solid rgba(148,163,184,.32); background:rgba(248,250,252,.78); color:var(--text); font-size:11px; font-weight:900; line-height:1; white-space:nowrap; }
    .act-badge.complete,.act-badge.done{ border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.12); color:#047857; }
    .act-badge.incomplete,.act-badge.delayed{ border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.14); color:#b45309; }
    .act-badge.planned{ border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.10); color:#1d4ed8; }
    body.dark .act-badge{ color:rgba(226,232,240,.92); background:rgba(15,23,42,.38); }
    body.dark .act-badge.complete,body.dark .act-badge.done{ color:#6ee7b7; }
    body.dark .act-badge.incomplete,body.dark .act-badge.delayed{ color:#fbbf24; }
    body.dark .act-badge.planned{ color:#93c5fd; }
    .act-file-badge{ font-family:inherit; cursor:pointer; }
    .act-file-badge:focus-visible,
    .act-status-select:focus-visible{ outline:2px solid rgba(var(--primary-rgb),.32); outline-offset:2px; }
    .act-status-select{
      width:132px;
      min-width:132px;
      min-height:26px;
      height:26px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.32);
      padding:3px 7px;
      font-size:11px;
      font-weight:900;
      line-height:1;
      color:var(--text);
      cursor:pointer;
      background:rgba(248,250,252,.78);
    }
    .act-status-select.done{ border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.12); color:#047857; }
    .act-status-select.delayed{ border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.14); color:#b45309; }
    .act-status-select.planned{ border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.10); color:#1d4ed8; }
    .act-status-select:disabled{ cursor:wait; opacity:.72; }
    body.dark .act-status-select{ color:rgba(226,232,240,.92); background:rgba(15,23,42,.38); }
    body.dark .act-status-select.done{ color:#6ee7b7; }
    body.dark .act-status-select.delayed{ color:#fbbf24; }
    body.dark .act-status-select.planned{ color:#93c5fd; }
    .act-range-inline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:12px; font-weight:800; }
    .act-existing-files{ display:grid; gap:6px; padding:10px; border:1px dashed rgba(148,163,184,.38); border-radius:12px; background:rgba(248,250,252,.62); font-size:12px; color:var(--muted); line-height:1.35; }
    body.dark .act-existing-files{ background:rgba(15,23,42,.32); border-color:rgba(148,163,184,.2); }
    .act-searchbox{ position:relative; display:flex; align-items:center; }
    .act-searchbox .input{ padding-right:92px; }
    .act-search-actions{ position:absolute; right:5px; top:50%; transform:translateY(-50%); display:flex; gap:4px; }
    .act-search-actions .icon-action{ width:24px; height:24px; min-width:24px; border:0; border-radius:7px; box-shadow:none; background:transparent; }
    .act-search-actions .material-symbols-rounded{ font-size:15px; }
    .act-column-panel{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      z-index:45;
      width:214px;
      display:none;
      gap:6px;
      padding:9px;
      border:1px solid rgba(226,232,240,.92);
      border-radius:10px;
      background:rgba(255,255,255,.98);
      box-shadow:0 18px 34px rgba(15,23,42,.14);
    }
    .act-column-panel.show{ display:grid; }
    .act-column-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 3px; font-size:11px; font-weight:900; color:var(--text); }
    .act-column-reset{ border:0; background:transparent; color:var(--primary); font-size:11px; font-weight:900; cursor:pointer; padding:2px 0; }
    .act-column-option{ display:flex; align-items:center; gap:8px; min-height:28px; padding:5px 6px; border-radius:8px; color:var(--text); font-size:12px; font-weight:800; cursor:pointer; }
    .act-column-option:hover{ background:rgba(var(--primary-rgb),.08); }
    .act-column-option input{ width:14px; height:14px; margin:0; accent-color:var(--primary); }
    body.dark .act-column-panel{ border-color:rgba(148,163,184,.2); background:rgba(15,23,42,.98); box-shadow:0 18px 34px rgba(0,0,0,.28); }
    #page-activity .activity-toolbar{
      align-items:flex-end;
      gap:8px;
      flex-wrap:nowrap;
    }
    #page-activity .activity-tool-left{
      flex:1 1 auto;
      min-width:0;
      display:flex;
      gap:8px;
      flex-wrap:nowrap;
      align-items:flex-end;
    }
    #page-activity .activity-toolbar .filter-field{ min-width:0 !important; }
    #page-activity .activity-toolbar .filter-label{ margin-bottom:3px; font-size:10px; line-height:1; }
    #page-activity .activity-toolbar .select,
    #page-activity .activity-toolbar .input{
      min-height:34px;
      height:34px;
      padding-top:7px;
      padding-bottom:7px;
      font-size:12px;
    }
    #page-activity .act-filter-pic{ flex:0 1 150px; }
    #page-activity .act-filter-period{ flex:0 1 245px; }
    #page-activity .act-filter-status{ flex:0 1 136px; }
    #page-activity .act-filter-search{ flex:1 1 220px; }
    #page-activity .act-date-range-filter{ display:flex; gap:6px; align-items:center; }
    #page-activity .act-date-range-filter .input{ min-width:0; }
    #page-activity .act-date-range-filter .muted{ font-size:11px; flex:0 0 auto; }
    #page-activity .activity-toolbar-actions{ flex:0 0 auto; display:flex; align-items:flex-end; }
    #page-activity .activity-toolbar-actions .btn-primary{ height:34px; min-height:34px; padding:0 10px; white-space:nowrap; align-items:center; justify-content:center; }
    #actTable .aksi{ gap:4px; justify-content:flex-end; }
    #actTable .icon-action{ width:28px; min-width:28px; height:28px; border-radius:9px; }
    #actTable .icon-action .material-symbols-rounded{ font-size:17px; }
    .act-detail-body{ display:grid; gap:12px; }
    .act-detail-hero{ display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid rgba(var(--primary-rgb),.18); border-radius:14px; background:linear-gradient(135deg, rgba(var(--primary-rgb),.10), rgba(255,255,255,.78)); }
    body.dark .act-detail-hero{ background:linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(15,23,42,.34)); border-color:rgba(148,163,184,.18); }
    .act-detail-hero-icon{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow:0 14px 26px var(--primary-glow); flex:0 0 auto; }
    .act-detail-hero-icon .material-symbols-rounded{ font-size:24px; }
    .act-detail-hero h4{ margin:0; color:var(--text); font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
    .act-detail-hero-meta{ margin-top:7px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:12px; font-weight:800; }
    .act-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .act-detail-item{ display:flex; gap:9px; align-items:flex-start; min-width:0; padding:10px; border:1px solid rgba(226,232,240,.86); border-radius:12px; background:rgba(248,250,252,.66); }
    body.dark .act-detail-item{ border-color:rgba(148,163,184,.16); background:rgba(15,23,42,.30); }
    .act-detail-item.wide{ grid-column:1 / -1; }
    .act-detail-item > .material-symbols-rounded{ color:var(--primary); font-size:20px; flex:0 0 auto; }
    .act-detail-label{ color:var(--muted); font-size:11px; font-weight:900; line-height:1.2; margin-bottom:3px; }
    .act-detail-value{ color:var(--text); font-size:12.5px; font-weight:800; line-height:1.38; overflow-wrap:anywhere; }
    .act-detail-section{ display:grid; gap:9px; }
    .act-detail-section-title{ display:flex; align-items:center; gap:7px; color:var(--text); font-size:13px; font-weight:900; }
    .act-detail-section-title .material-symbols-rounded{ color:var(--primary); font-size:20px; }
    .act-detail-file-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
    .act-detail-file-card{ display:grid; gap:9px; min-width:0; padding:10px; border:1px solid rgba(226,232,240,.86); border-radius:12px; background:rgba(255,255,255,.74); }
    body.dark .act-detail-file-card{ border-color:rgba(148,163,184,.16); background:rgba(15,23,42,.30); }
    .act-detail-file-head{ display:flex; align-items:flex-start; gap:8px; min-width:0; }
    .act-detail-file-head > .material-symbols-rounded{ color:var(--primary); font-size:22px; flex:0 0 auto; }
    .act-detail-file-head strong{ display:block; color:var(--text); font-size:12.5px; line-height:1.2; }
    .act-detail-file-head small{ display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:800; }
    .act-detail-file-actions{ display:flex; gap:6px; flex-wrap:wrap; }
    .act-detail-file-actions .btn-system{ min-height:30px; padding:6px 9px; font-size:12px; }
    .act-detail-file-list{ display:grid; gap:5px; }
    .act-detail-file-list button{ min-width:0; display:flex; align-items:center; gap:6px; width:100%; min-height:28px; border:1px solid rgba(148,163,184,.22); border-radius:9px; background:rgba(248,250,252,.74); color:var(--text); font-size:11.5px; font-weight:800; text-align:left; cursor:pointer; }
    .act-detail-file-list button span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .act-detail-file-list .material-symbols-rounded{ color:var(--primary); font-size:17px; }
    .act-detail-file-empty{ color:var(--muted); font-size:11.5px; font-weight:800; }
    body.dark .act-detail-file-list button{ border-color:rgba(148,163,184,.16); background:rgba(15,23,42,.34); }
    @media (max-width: 860px){
      .act-detail-grid,
      .act-detail-file-grid{ grid-template-columns:1fr; }
      .act-detail-hero{ align-items:flex-start; }
    }
    @media (max-width: 920px){
      #page-activity .activity-toolbar,
      #page-activity .activity-tool-left{ flex-wrap:wrap; }
    }
    @media (max-width: 760px){ #page-activity .toolbar{ align-items:stretch; } #page-activity .tool-left{ width:100%; } #page-activity .filter-field{ min-width:100% !important; } }
    @media (max-width: 760px){
      .sys-file-preview-layout{
        grid-template-columns:1fr;
        min-height:0;
      }
      .sys-file-preview-stage,
      .sys-file-preview-stage iframe,
      .sys-file-preview-stage object{
        min-height:340px;
        height:340px;
      }
    }
    #sysDataTable .sys-summary-row td{
      background:rgba(var(--primary-rgb),.10);
      border-top:1px solid rgba(var(--primary-rgb),.24);
      font-weight:800;
    }
    body.dark #sysDataTable .sys-summary-row td{
      background:rgba(var(--primary-rgb),.14);
      border-top-color:rgba(var(--primary-rgb),.28);
    }
    .sys-akm-legend{
      display:none;
      margin:12px 0 4px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(226,232,240,.85);
      background:rgba(255,251,235,.72);
      color:var(--text);
    }
    .sys-akm-legend.show{ display:block; }
    .sys-akm-legend-title{
      font-size:13px;
      font-weight:800;
      margin-bottom:10px;
    }
    .sys-akm-legend-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:6px 18px;
      font-size:13px;
      line-height:1.35;
    }
    .sys-akm-legend-grid span{
      min-width:0;
    }
    .sys-akm-legend-grid b{
      font-weight:800;
    }
    body.dark .sys-akm-legend{
      background:rgba(250,204,21,.08);
      border-color:rgba(250,204,21,.16);
    }
    @media (max-width: 820px){
      .sys-akm-legend-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width: 520px){
      .sys-akm-legend-grid{
        grid-template-columns:1fr;
      }
    }
    #researchDetailBackdrop .modal-head,
    #researchDetailBackdrop .modal-foot,
    #serviceDetailBackdrop .modal-head,
    #serviceDetailBackdrop .modal-foot,
    #sysDetailBackdrop .modal-head,
    #sysDetailBackdrop .modal-foot{
      flex:0 0 auto;
    }
    .research-detail-item{
      border:1px solid rgba(226,232,240,.9);
      border-radius:16px;
      padding:12px 14px;
      background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.78));
      min-width:0;
      box-shadow:0 8px 22px rgba(15,23,42,.05);
    }
    .research-detail-item.full{ grid-column:1 / -1; }
    .research-detail-label{
      color:var(--muted);
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.02em;
      margin-bottom:5px;
    }
    .research-detail-value{
      color:var(--text);
      font-size:13px;
      line-height:1.42;
      word-break:break-word;
    }
    .research-detail-value a{
      color:var(--primary);
      font-weight:700;
      text-decoration:none;
    }
    .research-detail-value a:hover{ text-decoration:underline; }
    body.dark .research-detail-item{
      border-color:rgba(148,163,184,.18);
      background:linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.32));
      box-shadow:0 8px 22px rgba(0,0,0,.16);
    }
    @media (max-width:780px){
      .research-tabs{ grid-template-columns:1fr; }
      .research-tabs.service-tabs{ grid-template-columns:1fr; }
      .schedule-tabs{ grid-template-columns:1fr; }
      .schedule-matrix-toolbar{ align-items:stretch; }
      .schedule-matrix-title{ min-width:0; width:100%; }
      .schedule-matrix-controls{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
        justify-content:stretch;
      }
      .schedule-matrix-controls .filter-field.compact,
      .schedule-matrix-controls .filter-field.compact .select,
      .schedule-room-filter,
      .schedule-room-filter-btn{
        min-width:0;
        width:100%;
      }
      .schedule-room-panel{
        left:0;
        right:auto;
        width:100%;
      }
      .schedule-room-checks{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .schedule-matrix-controls .btn-system.icon-only{
        width:100%;
      }
      .schedule-matrix-controls .schedule-basket-toggle.btn-system.icon-only{
        width:48px;
        min-width:48px;
        height:48px;
        right:16px;
        bottom:16px;
      }
      .schedule-main-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
      }
      .schedule-main-actions .btn-primary,
      .schedule-main-actions .btn-system{
        width:100%;
        justify-content:center;
      }
      .schedule-period-semesters{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .schedule-matrix-grid{
        grid-template-columns:64px 66px repeat(3,minmax(188px,1fr));
        min-width:700px;
      }
      .schedule-matrix-panel{
        padding:0;
      }
      .schedule-unmapped{
        left:11px;
        right:11px;
        top:auto;
        bottom:76px;
        width:auto;
        max-height:52vh;
      }
      .schedule-day-cell,
      .schedule-room-cell,
      .schedule-slot{ min-height:76px; }
      .schedule-card{ padding:7px 34px 7px 8px; }
      .schedule-unmapped-list{ grid-template-columns:1fr; }
      .research-modal-grid,
      .research-detail-grid{ grid-template-columns:1fr; }
      #sysDetailGrid{ grid-template-columns:1fr; }
      .research-modal-grid .span-2,
      #sysDetailGrid .detail-wide,
      .research-detail-item.full{ grid-column:auto; }
      .research-form-row-2,
      .research-form-row-3{ grid-template-columns:1fr; }
      .research-form-full{ grid-column:auto; }
      .research-check-grid{ grid-template-columns:1fr; }
      .research-table table{ min-width:760px; }
    }
    @media (max-width:1100px){
      .dashboard-card.span-12,
      .dashboard-card.span-11,
      .dashboard-card.span-10,
      .dashboard-card.span-9,
      .dashboard-card.span-8,
      .dashboard-card.span-7,
      .dashboard-card.span-6,
      .dashboard-card.span-5,
      .dashboard-card.span-4{ grid-column:1 / -1; }
    }
    @media (min-width:640px) and (max-width:1100px){
      .dashboard-card[data-dashboard-user-span].span-12{ grid-column:1 / -1; }
      .dashboard-card[data-dashboard-user-span].span-11{ grid-column:span 11; }
      .dashboard-card[data-dashboard-user-span].span-10{ grid-column:span 10; }
      .dashboard-card[data-dashboard-user-span].span-9{ grid-column:span 9; }
      .dashboard-card[data-dashboard-user-span].span-8{ grid-column:span 8; }
      .dashboard-card[data-dashboard-user-span].span-7{ grid-column:span 7; }
      .dashboard-card[data-dashboard-user-span].span-6{ grid-column:span 6; }
      .dashboard-card[data-dashboard-user-span].span-5{ grid-column:span 5; }
      .dashboard-card[data-dashboard-user-span].span-4{ grid-column:span 4; }
    }

    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.35);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:80;
      padding:16px;
    }
    body.dark .modal-backdrop{ background:rgba(0,0,0,.55); }
    .modal-backdrop.show{ display:flex; }
    .modal{
      width:min(720px, 96vw);
      border-radius:20px;
      background:rgba(255,255,255,.95);
      border:1px solid rgba(229,234,242,.9);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    body.dark .modal{
      background:rgba(17,24,39,.96);
      border:1px solid rgba(148,163,184,.18);
    }
    .modal-head{
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:rgba(15,23,42,.02);
      border-bottom:1px solid var(--border);
    }
    body.dark .modal-head{
      background:rgba(255,255,255,.03);
      border-bottom:1px solid rgba(148,163,184,.18);
    }
    .modal-head strong{ font-weight:950; font-size:14px; }
    .modal-body{ padding:14px 16px; }
    .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .form-grid .span-2{ grid-column:1 / -1; }
    /* utility grid (dipakai beberapa section seperti Broadcast) */
    .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; }
    @media (max-width: 820px){
      .grid{ grid-template-columns: 1fr; }
    }

    /* Lecturers form: horizontal layout (3 columns on desktop) */
    .lec-form-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; align-items:start; }
    @media (max-width: 980px){
      .lec-form-grid{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 820px){
      .lec-form-grid{ grid-template-columns: 1fr; }
    }

    .lec-detail-layout{
      display:grid;
      grid-template-columns:220px minmax(0, 1fr) 310px;
      gap:14px;
      align-items:start;
    }
    .lec-detail-main{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-width:0;
    }
    .lec-detail-aside{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-width:0;
    }
    .lec-profile-head{
      display:flex;
      gap:12px;
      align-items:center;
      border:1px solid var(--border);
      background:rgba(248,250,252,.74);
      border-radius:12px;
      padding:12px;
    }
    body.dark .lec-profile-head{
      background:rgba(15,23,42,.35);
      border-color:rgba(148,163,184,.2);
    }
    .lec-profile-icon{
      width:42px;
      height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.14);
      color:var(--primary);
      flex:0 0 auto;
    }
    .lec-profile-icon .material-symbols-rounded{ font-size:24px; }
    .lec-profile-title{
      min-width:0;
      flex:1;
    }
    .lec-profile-name{
      font-size:16px;
      font-weight:950;
      color:var(--text);
      line-height:1.25;
      overflow-wrap:anywhere;
    }
    .lec-profile-sub{
      margin-top:3px;
      font-size:12px;
      font-weight:700;
      color:var(--muted);
      overflow-wrap:anywhere;
    }
    .lec-profile-meta-row{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .lec-profile-meta-row .lec-profile-sub{
      margin-top:0;
      flex:0 1 auto;
    }
    .lec-profile-chips{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:0;
      align-items:center;
    }
    .lec-chip{
      display:inline-flex;
      align-items:center;
      gap:5px;
      min-height:26px;
      padding:5px 8px;
      border-radius:999px;
      border:1px solid rgba(var(--primary-rgb),.24);
      background:rgba(var(--primary-rgb),.1);
      color:rgba(15,23,42,.78);
      font-size:11.5px;
      font-weight:850;
      line-height:1;
    }
    body.dark .lec-chip{
      color:rgba(226,232,240,.84);
      border-color:rgba(var(--primary-rgb),.22);
      background:rgba(var(--primary-rgb),.12);
    }
    .lec-chip .material-symbols-rounded{ font-size:16px; }
    .lec-chip.lec-chip-icon{
      width:30px;
      min-width:30px;
      justify-content:center;
      padding:5px;
      border-color:rgba(16,185,129,.32);
      background:rgba(16,185,129,.12);
      color:#047857;
    }
    body.dark .lec-chip.lec-chip-icon{
      border-color:rgba(52,211,153,.28);
      background:rgba(52,211,153,.14);
      color:#6ee7b7;
    }
    .lec-info-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    .lec-info-item{
      display:grid;
      grid-template-columns:34px minmax(0, 1fr);
      gap:9px;
      align-items:start;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.68);
      min-width:0;
    }
    body.dark .lec-info-item{
      background:rgba(15,23,42,.25);
      border-color:rgba(148,163,184,.18);
    }
    .lec-info-item.full{ grid-column:1/-1; }
    .lec-info-ico{
      width:34px;
      height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.05);
      color:rgba(15,23,42,.65);
    }
    body.dark .lec-info-ico{
      background:rgba(255,255,255,.06);
      color:rgba(226,232,240,.72);
    }
    .lec-info-ico .material-symbols-rounded{ font-size:20px; }
    .lec-info-label{
      font-size:11px;
      font-weight:900;
      color:var(--muted);
      line-height:1.2;
      margin-bottom:3px;
    }
    .lec-info-value{
      font-size:13px;
      font-weight:750;
      color:var(--text);
      line-height:1.35;
      overflow-wrap:anywhere;
    }
    .lec-doc-panel{
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.68);
    }
    body.dark .lec-doc-panel{
      background:rgba(15,23,42,.25);
      border-color:rgba(148,163,184,.18);
    }
    .lec-doc-title{
      display:flex;
      align-items:center;
      gap:7px;
      font-size:12px;
      font-weight:950;
      color:var(--text);
      margin-bottom:8px;
    }
    .lec-doc-title .material-symbols-rounded{ font-size:18px; color:var(--primary); }
    .lec-doc-actions{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .lec-doc-actions .btn-system,
    .lec-doc-actions .btn-primary{
      gap:6px;
      padding-left:10px;
      padding-right:10px;
      width:100%;
      justify-content:flex-start;
      min-width:0;
    }
    .lec-doc-actions .material-symbols-rounded{ font-size:18px; }
    .lec-detail-photo{
      border:1px solid var(--border);
      background:rgba(248,250,252,.82);
      border-radius:12px;
      padding:10px;
    }
    body.dark .lec-detail-photo{
      background:rgba(15,23,42,.35);
      border-color:rgba(148,163,184,.2);
    }
    .lec-detail-photo-box{
      width:100%;
      aspect-ratio:3 / 4;
      border-radius:10px;
      overflow:hidden;
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.18), rgba(var(--primary-rgb),.06));
      display:grid;
      place-items:center;
      color:rgba(15,23,42,.55);
      font-weight:900;
      font-size:32px;
    }
    body.dark .lec-detail-photo-box{
      background:linear-gradient(135deg, rgba(var(--primary-rgb),.2), rgba(var(--primary-rgb),.08));
      color:rgba(226,232,240,.72);
    }
    .lec-detail-photo-box img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    @media (max-width: 1080px){
      .lec-detail-layout{
        grid-template-columns:210px minmax(0, 1fr);
      }
      .lec-detail-aside{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 760px){
      .lec-detail-layout{ grid-template-columns:1fr; }
      .lec-detail-photo{
        max-width:220px;
        justify-self:center;
        width:100%;
        order:-1;
      }
      .lec-detail-aside{ grid-template-columns:1fr; }
      .lec-doc-actions{ grid-template-columns:1fr; }
      .lec-info-grid{ grid-template-columns:1fr; }
      .lec-profile-head{ align-items:flex-start; }
    }

    #sysDetailGrid.student-detail-grid{
      display:block;
      padding:14px;
      overflow-y:auto;
    }
    .student-detail-grid .lec-detail-layout{
      grid-template-columns:210px minmax(0, 1fr) 300px;
    }
    .student-detail-grid .lec-detail-photo-box{
      aspect-ratio:3 / 4;
    }
    .student-detail-grid .lec-doc-panel,
    .student-detail-grid .lec-info-item{
      overflow:visible;
    }
    .student-detail-grid .lec-info-grid{
      align-items:stretch;
    }
    .student-detail-grid .lec-info-item{
      min-height:0;
      height:auto;
    }
    .student-detail-grid .lec-info-value{
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .student-detail-grid .student-contact-grid{
      grid-template-columns:1fr;
    }
    .student-detail-grid .student-contact-item{
      color:inherit;
      text-decoration:none;
      transition:background .15s ease, border-color .15s ease, transform .15s ease;
    }
    .student-detail-grid .student-contact-item:hover{
      transform:translateY(-1px);
      border-color:rgba(var(--primary-rgb),.36);
      background:rgba(var(--primary-rgb),.08);
    }
    .student-detail-grid .student-contact-item.disabled{
      pointer-events:none;
      opacity:.62;
    }
    .student-detail-grid .student-address-item{
      grid-column:1 / -1;
    }
    @media (max-width: 1080px){
      .student-detail-grid .lec-detail-layout{
        grid-template-columns:200px minmax(0, 1fr);
      }
      .student-detail-grid .lec-detail-aside{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 760px){
      #sysDetailGrid.student-detail-grid{ padding:12px; }
      .student-detail-grid .lec-detail-layout{ grid-template-columns:1fr; }
      .student-detail-grid .lec-detail-aside{ grid-template-columns:1fr; }
    }


    .calendar-page{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(300px, 360px);
      align-items:start;
      gap:14px;
    }
    .calendar-card,
    .calendar-detail-panel{
      min-width:0;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(255,255,255,.9);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    body.dark .calendar-card,
    body.dark .calendar-detail-panel{
      background:rgba(17,24,39,.8);
      border-color:rgba(148,163,184,.18);
    }
    .calendar-card-head,
    .calendar-detail-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px;
      border-bottom:1px solid var(--border);
      background:rgba(248,250,252,.68);
    }
    body.dark .calendar-card-head,
    body.dark .calendar-detail-head{
      border-bottom-color:rgba(148,163,184,.16);
      background:rgba(15,23,42,.32);
    }
    .calendar-title{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      color:var(--text);
      font-size:15px;
      font-weight:950;
      line-height:1.2;
    }
    .calendar-title .material-symbols-rounded{
      color:var(--primary);
      font-size:22px;
    }
    .calendar-subtitle{
      margin-top:4px;
      color:var(--muted);
      font-size:12px;
      font-weight:750;
    }
    .calendar-actions{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .calendar-summary{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(124px, 1fr));
      gap:8px;
      padding:12px 14px;
    }
    .calendar-summary-item{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      border:1px solid rgba(203,213,225,.76);
      border-radius:12px;
      padding:9px 10px;
      background:rgba(255,255,255,.66);
    }
    body.dark .calendar-summary-item{
      background:rgba(15,23,42,.26);
      border-color:rgba(148,163,184,.16);
    }
    .calendar-summary-icon{
      width:32px;
      height:32px;
      border-radius:10px;
      display:grid;
      place-items:center;
      color:var(--primary);
      background:rgba(var(--primary-rgb),.12);
      flex:0 0 auto;
    }
    .calendar-summary-icon .material-symbols-rounded{ font-size:19px; }
    .calendar-summary-label{
      color:var(--muted);
      font-size:11px;
      font-weight:900;
      line-height:1.1;
    }
    .calendar-summary-value{
      margin-top:2px;
      color:var(--text);
      font-size:14px;
      font-weight:950;
      line-height:1.1;
    }
    .calendar-weekdays{
      display:grid;
      grid-template-columns:repeat(7, minmax(0, 1fr));
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      background:rgba(15,23,42,.035);
    }
    body.dark .calendar-weekdays{
      border-color:rgba(148,163,184,.16);
      background:rgba(255,255,255,.04);
    }
    .calendar-weekday{
      padding:9px 8px;
      color:var(--muted);
      font-size:11px;
      font-weight:950;
      text-align:center;
      text-transform:uppercase;
      letter-spacing:0;
    }
    .calendar-grid{
      display:grid;
      grid-template-columns:repeat(7, minmax(0, 1fr));
      background:rgba(203,213,225,.7);
      gap:1px;
    }
    body.dark .calendar-grid{ background:rgba(148,163,184,.16); }
    .calendar-day{
      min-height:116px;
      display:flex;
      flex-direction:column;
      gap:6px;
      border:0;
      padding:8px;
      background:rgba(255,255,255,.92);
      color:var(--text);
      text-align:left;
      font:inherit;
      cursor:pointer;
      min-width:0;
      transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    body.dark .calendar-day{ background:rgba(17,24,39,.76); }
    .calendar-day:hover{
      background:rgba(var(--primary-rgb),.07);
      box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.24);
    }
    .calendar-day.is-out{
      background:rgba(248,250,252,.76);
      color:rgba(100,116,139,.82);
    }
    body.dark .calendar-day.is-out{
      background:rgba(15,23,42,.44);
      color:rgba(148,163,184,.72);
    }
    .calendar-day.is-selected{
      box-shadow:inset 0 0 0 2px rgba(var(--primary-rgb),.62);
      background:rgba(var(--primary-rgb),.08);
    }
    .calendar-day-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px;
      min-width:0;
    }
    .calendar-day-number{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:var(--text);
      font-size:12px;
      font-weight:950;
      line-height:1;
    }
    .calendar-day.is-today .calendar-day-number{
      color:#fff;
      background:var(--primary);
    }
    .calendar-day-count{
      color:var(--muted);
      font-size:10.5px;
      font-weight:900;
      white-space:nowrap;
    }
    .calendar-day-events{
      display:grid;
      gap:4px;
      min-width:0;
      overflow:hidden;
    }
    .calendar-pill{
      display:flex;
      align-items:center;
      gap:4px;
      min-width:0;
      min-height:20px;
      border-radius:7px;
      padding:3px 5px;
      color:rgba(15,23,42,.86);
      font-size:11px;
      font-weight:850;
      line-height:1.15;
      overflow:hidden;
    }
    .calendar-pill .material-symbols-rounded{ font-size:14px; flex:0 0 auto; }
    .calendar-pill-title{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .calendar-pill.thesis{
      border:1px solid rgba(37,99,235,.18);
      background:rgba(37,99,235,.1);
    }
    .calendar-pill.activity{
      border:1px solid rgba(16,185,129,.2);
      background:rgba(16,185,129,.12);
    }
    .calendar-pill.consultation{
      border:1px solid rgba(14,165,233,.2);
      background:rgba(14,165,233,.12);
    }
    .calendar-pill.holiday{
      border:1px solid rgba(220,38,38,.18);
      background:rgba(220,38,38,.1);
    }
    .calendar-pill.leave{
      border:1px solid rgba(245,158,11,.24);
      background:rgba(245,158,11,.13);
    }
    .calendar-pill.more{
      justify-content:center;
      color:var(--muted);
      border:1px dashed rgba(148,163,184,.42);
      background:rgba(248,250,252,.76);
    }
    body.dark .calendar-pill{ color:rgba(226,232,240,.88); }
    body.dark .calendar-pill.more{
      background:rgba(15,23,42,.32);
      border-color:rgba(148,163,184,.22);
    }
    .calendar-detail-list{
      display:grid;
      gap:9px;
      padding:12px 14px 14px;
    }
    .calendar-detail-item{
      display:grid;
      grid-template-columns:38px minmax(0, 1fr);
      gap:10px;
      align-items:start;
      border:1px solid rgba(203,213,225,.76);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.72);
      min-width:0;
    }
    body.dark .calendar-detail-item{
      background:rgba(15,23,42,.26);
      border-color:rgba(148,163,184,.16);
    }
    .calendar-detail-icon{
      width:38px;
      height:38px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:var(--primary);
      background:rgba(var(--primary-rgb),.12);
    }
    .calendar-detail-icon.activity{
      color:#059669;
      background:rgba(16,185,129,.12);
    }
    .calendar-detail-icon.consultation{
      color:#0284c7;
      background:rgba(14,165,233,.12);
    }
    .calendar-detail-icon.holiday{
      color:#dc2626;
      background:rgba(220,38,38,.1);
    }
    .calendar-detail-icon.leave{
      color:#b45309;
      background:rgba(245,158,11,.13);
    }
    body.dark .calendar-detail-icon.activity{ color:#6ee7b7; }
    body.dark .calendar-detail-icon.consultation{ color:#7dd3fc; }
    body.dark .calendar-detail-icon.holiday{ color:#fca5a5; }
    body.dark .calendar-detail-icon.leave{ color:#fbbf24; }
    .calendar-detail-main{ min-width:0; }
    .calendar-detail-top{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      margin-bottom:5px;
    }
    .calendar-badge{
      display:inline-flex;
      align-items:center;
      min-height:22px;
      border-radius:999px;
      padding:4px 8px;
      color:var(--text);
      background:rgba(15,23,42,.05);
      font-size:11px;
      font-weight:900;
      line-height:1;
    }
    body.dark .calendar-badge{ background:rgba(255,255,255,.06); }
    .calendar-detail-time{
      color:var(--muted);
      font-size:11.5px;
      font-weight:850;
    }
    .calendar-detail-title{
      color:var(--text);
      font-size:13.5px;
      font-weight:950;
      line-height:1.3;
      overflow-wrap:anywhere;
    }
    .calendar-detail-meta,
    .calendar-detail-desc{
      margin-top:5px;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
      line-height:1.35;
      overflow-wrap:anywhere;
    }
    .calendar-thesis-desc{
      display:grid;
      gap:7px;
      margin-top:8px;
      color:var(--text);
      font-size:12px;
      font-weight:750;
      line-height:1.45;
      overflow-wrap:anywhere;
    }
    .calendar-thesis-line{
      display:flex;
      align-items:flex-start;
      gap:7px;
      min-width:0;
    }
    .calendar-thesis-line .material-symbols-rounded{
      flex:0 0 auto;
      width:19px;
      height:19px;
      border-radius:6px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.1);
      color:var(--primary);
      font-size:15px;
    }
    .calendar-thesis-line strong{
      color:var(--text);
      font-weight:950;
    }
    .calendar-thesis-line span:last-child{ min-width:0; }
    .calendar-thesis-schedule-title{
      display:flex;
      align-items:center;
      gap:7px;
      margin-top:8px;
      color:var(--text);
      font-size:12.5px;
      font-weight:950;
      line-height:1.25;
    }
    .calendar-detail-item.thesis .calendar-badge,
    .calendar-detail-item.thesis .calendar-detail-time,
    .calendar-detail-item.thesis .calendar-detail-title,
    .calendar-detail-item.thesis .calendar-detail-meta,
    .calendar-detail-item.thesis .calendar-detail-desc,
    .calendar-detail-item.thesis .calendar-thesis-desc,
    .calendar-detail-item.thesis .calendar-thesis-line strong,
    .calendar-detail-item.thesis .calendar-thesis-schedule-title{ font-weight:400; }
    .calendar-thesis-schedule-title .material-symbols-rounded{
      color:var(--primary);
      font-size:18px;
    }
    .calendar-detail-item.thesis{ position:relative; padding-right:48px; }
    .calendar-thesis-alert-btn{
      position:absolute;
      top:10px;
      right:10px;
      width:30px;
      height:30px;
      border:1px solid rgba(var(--primary-rgb),.24);
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.1);
      color:var(--primary);
      cursor:pointer;
      transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
    }
    .calendar-thesis-alert-btn:hover{
      transform:translateY(-1px);
      background:rgba(var(--primary-rgb),.16);
      box-shadow:0 8px 18px rgba(15,23,42,.12);
    }
    .calendar-thesis-alert-btn .material-symbols-rounded{ font-size:19px; }
    .calendar-thesis-modal{ width:min(760px, 96vw) !important; }
    .calendar-thesis-modal-body{ padding:14px; display:grid; gap:12px; }
    .calendar-thesis-hero{
      display:flex;
      align-items:flex-start;
      gap:12px;
      border:1px solid rgba(203,213,225,.75);
      border-radius:14px;
      padding:12px;
      background:rgba(248,250,252,.78);
    }
    body.dark .calendar-thesis-hero{ border-color:rgba(148,163,184,.18); background:rgba(15,23,42,.32); }
    .calendar-thesis-hero-icon{
      width:42px;
      height:42px;
      border-radius:13px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.12);
      color:var(--primary);
      flex:0 0 auto;
    }
    .calendar-thesis-hero-icon .material-symbols-rounded{ font-size:24px; }
    .calendar-thesis-hero-title{ color:var(--text); font-size:15px; font-weight:950; line-height:1.25; overflow-wrap:anywhere; }
    .calendar-thesis-hero-sub{ margin-top:3px; color:var(--muted); font-size:12px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
    .calendar-thesis-detail-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
    .calendar-thesis-detail-item{
      display:grid;
      grid-template-columns:32px minmax(0, 1fr);
      gap:8px;
      align-items:start;
      border:1px solid rgba(203,213,225,.72);
      border-radius:12px;
      padding:9px;
      background:rgba(255,255,255,.68);
      min-width:0;
    }
    body.dark .calendar-thesis-detail-item{ border-color:rgba(148,163,184,.16); background:rgba(15,23,42,.26); }
    .calendar-thesis-detail-item.full{ grid-column:1 / -1; }
    .calendar-thesis-detail-item .material-symbols-rounded{
      width:32px;
      height:32px;
      border-radius:10px;
      display:grid;
      place-items:center;
      color:var(--primary);
      background:rgba(var(--primary-rgb),.1);
      font-size:18px;
    }
    .calendar-thesis-detail-label{ color:var(--muted); font-size:11px; font-weight:900; line-height:1.2; margin-bottom:3px; }
    .calendar-thesis-detail-value{ color:var(--text); font-size:12.5px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
    .calendar-status-chip{
      display:inline-flex;
      align-items:center;
      min-height:22px;
      border-radius:999px;
      padding:4px 8px;
      border:1px solid rgba(37,99,235,.22);
      background:rgba(37,99,235,.1);
      color:#1d4ed8;
      font-size:11px;
      font-weight:950;
      line-height:1;
    }
    .calendar-status-chip.done{ border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.12); color:#047857; }
    .calendar-status-chip.delayed{ border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.11); color:#b91c1c; }
    body.dark .calendar-status-chip{ color:#bfdbfe; }
    body.dark .calendar-status-chip.done{ color:#86efac; }
    body.dark .calendar-status-chip.delayed{ color:#fca5a5; }
    .calendar-detail-actions{
      margin-top:8px;
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .calendar-empty{
      display:grid;
      place-items:center;
      min-height:110px;
      border:1px dashed rgba(148,163,184,.42);
      border-radius:12px;
      color:var(--muted);
      font-size:12.5px;
      font-weight:800;
      text-align:center;
      padding:14px;
    }
    @media (max-width: 900px){
      .calendar-page{ grid-template-columns:1fr; }
      .calendar-summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1120px){
      .calendar-card-head,
      .calendar-detail-head{ align-items:flex-start; flex-direction:column; }
      .calendar-actions{ justify-content:flex-start; }
      .calendar-day{ min-height:96px; padding:7px; }
    }
    @media (max-width: 640px){
      .calendar-summary{ grid-template-columns:1fr; }
      .calendar-weekday{ font-size:10px; padding:7px 4px; }
      .calendar-day{ min-height:78px; gap:4px; padding:5px; }
      .calendar-day-number{ width:22px; height:22px; font-size:11px; }
      .calendar-day-count{ display:none; }
      .calendar-pill{ min-height:7px; padding:0; border-radius:999px; }
      .calendar-pill .material-symbols-rounded,
      .calendar-pill-title{ display:none; }
      .calendar-pill.more{ min-height:12px; font-size:9px; padding:1px 3px; }
      .calendar-detail-item{ grid-template-columns:32px minmax(0,1fr); padding:9px; }
      .calendar-detail-icon{ width:32px; height:32px; border-radius:10px; }
      .calendar-thesis-desc{ gap:6px; }
      .calendar-detail-item.thesis{ padding-right:42px; }
      .calendar-thesis-alert-btn{ top:8px; right:8px; }
      .calendar-thesis-detail-grid{ grid-template-columns:1fr; }
    }

    #thDetailBackdrop .modal,
    #thBerkasBackdrop .modal{
      max-height:calc(100vh - 30px);
    }
    .th-detail-modal{ width:min(1320px, 98vw) !important; }
    .th-berkas-modal{ width:min(900px, 96vw) !important; }
    .thesis-detail-body,
    .th-berkas-body{
      padding:12px 14px;
      overflow:auto;
    }
    .thesis-detail-grid{
      display:block;
      padding:14px;
      overflow-y:auto;
    }
    .thesis-detail-grid .lec-detail-layout{
      grid-template-columns:180px minmax(0, 1fr) 360px;
    }
    .thesis-detail-avatar .lec-detail-photo-box{
      aspect-ratio:3 / 4;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:24px;
      line-height:1;
    }
    .thesis-detail-avatar .material-symbols-rounded{
      font-size:44px;
      color:var(--primary);
    }
    .thesis-detail-grid .lec-doc-panel,
    .thesis-detail-grid .lec-info-item{
      overflow:visible;
    }
    .thesis-detail-grid .lec-info-value{
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .thesis-detail-grid .thesis-title-item{
      grid-column:1 / -1;
    }
    .thesis-file-mini-grid{
      display:grid;
      gap:8px;
    }
    .thesis-file-card{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:8px;
      align-items:center;
      border:1px solid rgba(203,213,225,.78);
      border-radius:10px;
      padding:8px;
      background:rgba(255,255,255,.72);
      min-width:0;
    }
    body.dark .thesis-file-card{
      border-color:rgba(148,163,184,.18);
      background:rgba(15,23,42,.28);
    }
    .thesis-file-card.empty{
      opacity:.62;
    }
    .thesis-file-card-main{
      display:grid;
      grid-template-columns:30px minmax(0, 1fr);
      gap:8px;
      align-items:center;
      min-width:0;
    }
    .thesis-file-card-icon{
      width:30px;
      height:30px;
      border-radius:9px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.12);
      color:var(--primary);
    }
    .thesis-file-card-icon .material-symbols-rounded{ font-size:18px; }
    .thesis-file-card-label{
      font-size:11px;
      font-weight:900;
      color:var(--muted);
      line-height:1.2;
    }
    .thesis-file-card-name{
      margin-top:2px;
      color:var(--text);
      font-size:12.5px;
      font-weight:800;
      line-height:1.25;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .thesis-file-card-actions{
      display:flex;
      gap:4px;
      align-items:center;
      justify-content:flex-end;
    }
    .thesis-file-card-actions .icon-action:disabled{
      opacity:.38;
    }
    .thesis-hidden-file{ display:none; }
    .th-berkas-summary{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      margin-bottom:10px;
      padding:10px;
      border:1px solid rgba(203,213,225,.78);
      border-radius:12px;
      background:rgba(248,250,252,.78);
    }
    body.dark .th-berkas-summary{
      border-color:rgba(148,163,184,.18);
      background:rgba(15,23,42,.28);
    }
    .th-berkas-summary strong{
      color:var(--text);
      font-size:13px;
      font-weight:950;
      line-height:1.25;
      overflow-wrap:anywhere;
    }
    .th-berkas-summary .lec-chip{
      min-height:24px;
      padding:4px 8px;
    }
    .thesis-berkas-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      align-items:start;
    }
    .thesis-jadwal-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      align-items:start;
    }
    .thesis-berkas-panel{
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.7);
      min-width:0;
    }
    body.dark .thesis-berkas-panel{
      border-color:rgba(148,163,184,.18);
      background:rgba(15,23,42,.26);
    }
    .thesis-berkas-title{
      display:flex;
      align-items:center;
      gap:7px;
      margin-bottom:9px;
      color:var(--text);
      font-size:12px;
      font-weight:950;
    }
    .thesis-berkas-title .material-symbols-rounded{
      color:var(--primary);
      font-size:18px;
    }
    .thesis-schedule-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
      margin-bottom:10px;
    }
    .thesis-jadwal-grid .thesis-schedule-grid{
      grid-template-columns:1fr;
      margin-bottom:0;
    }
    .thesis-file-list{
      display:grid;
      gap:8px;
    }
    .thesis-file-field{
      border:1px solid rgba(203,213,225,.72);
      border-radius:10px;
      padding:8px;
      background:rgba(248,250,252,.62);
      min-width:0;
    }
    body.dark .thesis-file-field{
      border-color:rgba(148,163,184,.16);
      background:rgba(15,23,42,.3);
    }
    .thesis-file-head{
      display:grid;
      grid-template-columns:30px minmax(0, 1fr);
      gap:8px;
      align-items:start;
      margin-bottom:7px;
    }
    .thesis-file-head .material-symbols-rounded{
      width:30px;
      height:30px;
      border-radius:9px;
      display:grid;
      place-items:center;
      background:rgba(var(--primary-rgb),.12);
      color:var(--primary);
      font-size:18px;
    }
    .thesis-file-head label{
      margin:0;
      color:var(--text);
      font-size:12px;
      font-weight:900;
      line-height:1.25;
    }
    .thesis-file-status{
      display:block;
      margin-top:2px;
      color:var(--muted);
      font-size:11px;
      font-weight:750;
      line-height:1.25;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .thesis-file-status.has-file{ color:rgba(22,101,52,.92); }
    .thesis-file-status.pending{ color:rgba(180,83,9,.96); }
    body.dark .thesis-file-status.has-file{ color:#86efac; }
    body.dark .thesis-file-status.pending{ color:#fbbf24; }
    .thesis-file-control{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:8px;
      align-items:center;
    }
    .thesis-file-control .input{
      width:100%;
      min-width:0;
      height:38px;
      min-height:38px;
      border-radius:10px;
      padding:8px 10px;
      box-shadow:none;
    }
    .thesis-file-actions{
      display:flex;
      gap:4px;
      align-items:center;
    }
    .thesis-file-actions .icon-action:disabled{
      opacity:.38;
    }
    @media (max-width: 980px){
      .thesis-detail-grid .lec-detail-layout{
        grid-template-columns:160px minmax(0, 1fr);
      }
      .thesis-detail-grid .lec-detail-aside{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .thesis-berkas-grid,
      .thesis-jadwal-grid{
        grid-template-columns:1fr;
      }
    }
    @media (max-width: 700px){
      .thesis-detail-body,
      .th-berkas-body,
      .thesis-detail-grid{ padding:10px; }
      .thesis-detail-grid .lec-detail-layout,
      .thesis-detail-grid .lec-detail-aside,
      .thesis-schedule-grid{
        grid-template-columns:1fr;
      }
      .thesis-detail-avatar{
        max-width:160px;
        justify-self:center;
        width:100%;
        order:-1;
      }
      .thesis-file-card{
        grid-template-columns:1fr;
      }
      .thesis-file-card-actions{
        justify-content:flex-start;
      }
      .thesis-file-control{
        grid-template-columns:1fr;
      }
      .thesis-file-actions{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
      }
      .thesis-file-actions .icon-action{
        width:100%;
      }
    }

    .skripsi-page{
      display:grid;
      grid-template-columns:minmax(0, 1fr);
      gap:12px;
    }
    .skripsi-status-card{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px;
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(255,255,255,.72);
    }
    body.dark .skripsi-status-card{ border-color:rgba(148,163,184,.18); background:rgba(15,23,42,.28); }
    #page-skripsi .thesis-detail-grid .lec-detail-layout{
      grid-template-columns:minmax(0, 1fr) 360px;
      align-items:start;
    }
    #page-skripsi .thesis-detail-grid .lec-detail-main{ min-width:0; }
    .skripsi-identity{
      display:grid;
      grid-template-columns:248px minmax(0, 1fr);
      gap:12px;
      align-items:stretch;
    }
    .skripsi-photo{
      width:248px;
      max-width:100%;
      min-height:0;
      height:100%;
      border-radius:12px;
      overflow:hidden;
      border:1px solid var(--border);
      background:rgba(var(--primary-rgb),.10);
      display:grid;
      place-items:center;
      color:var(--primary);
      font-weight:950;
      line-height:1;
    }
    .skripsi-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
    .skripsi-photo .material-symbols-rounded{ font-size:68px; }
    .skripsi-photo > div{ font-size:40px; }
    .skripsi-form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
    .skripsi-form-grid .full{ grid-column:1 / -1; }
    .identity-grid{
      grid-template-columns:minmax(0, 1fr) minmax(112px, .58fr) minmax(190px, .9fr);
      gap:10px 12px;
      align-content:start;
    }
    .identity-grid .identity-name,
    .identity-grid .identity-title{ grid-column:1 / -1; }
    .identity-grid .field label{ margin-bottom:5px; }
    .identity-grid .input,
    .identity-grid .select{ min-height:42px; height:42px; padding-top:8px; padding-bottom:8px; }
    .identity-grid .textarea{ min-height:88px; padding-top:10px; }
    .skripsi-panel-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
    .skripsi-file-note{ font-size:11px; font-weight:750; color:var(--muted); line-height:1.35; }
    @media (max-width: 980px){
      #page-skripsi .thesis-detail-grid .lec-detail-layout{ grid-template-columns:1fr; }
      #page-skripsi .thesis-detail-grid .lec-detail-aside{ grid-column:auto; display:block; }
    }
    @media (max-width: 900px){
      .identity-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .identity-grid .identity-peminatan{ grid-column:1 / -1; }
    }
    @media (max-width: 760px){
      .skripsi-identity,
      .skripsi-form-grid,
      .identity-grid{ grid-template-columns:1fr; }
      .identity-grid .identity-peminatan{ grid-column:auto; }
      .skripsi-photo{ width:min(256px, 100%); aspect-ratio:3 / 4; height:auto; justify-self:center; }
      .skripsi-status-card{ align-items:flex-start; flex-direction:column; }
      .skripsi-panel-actions{ justify-content:flex-start; }
    }
    /* field wrapper agar rapi dan tidak terlalu tinggi */
    .field{ display:flex; flex-direction:column; gap:0; }
    .field small.muted{ margin-top:6px; line-height:1.35; }

    /* textarea mengikuti style input aplikasi */
    textarea.input, textarea.select, textarea.textarea{
      border:1px solid rgba(229,234,242,.95);
      background-color:rgba(255,255,255,.95);
      border-radius:14px;
      padding:10px 12px;
      font-weight:500;
      font-size:13px;
      color:var(--text);
      box-shadow:var(--shadow-sm);
      outline:none;
      width:100%;
      min-height:110px;
      resize:vertical;
    }
    body.dark textarea.input, body.dark textarea.select, body.dark textarea.textarea{
      border:1px solid rgba(148,163,184,.22);
      background-color:rgba(15,23,42,.35);
      color:rgba(226,232,240,.92);
    }

    /* khusus modal Add/Edit Class: buat maksimal 3 kolom agar tidak terlalu melebar ke bawah */
    .form-grid.sch-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field label{
      display:block;
      font-size:12px;
      font-weight:900;
      color:rgba(15,23,42,.75);
      margin:0 0 6px 2px;
    }
    body.dark .field label{ color:rgba(226,232,240,.78); }
    .field .input, .field .select{ width:100%; }

    .modal-foot{
      padding:14px 16px;
      display:flex;
      gap:10px;
      justify-content:flex-end;
      border-top:1px solid var(--border);
      background:rgba(15,23,42,.01);
    }
    body.dark .modal-foot{
      border-top:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.02);
    }
    .error{
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(239,68,68,.25);
      background:rgba(239,68,68,.10);
      color:#b91c1c;
      font-weight:800;
      font-size:12px;
      display:none;
    }
    .error.show{ display:block; }

    .overlay{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.35);
      z-index:50;
    }
    .sidebar.mobile{
      position:fixed;
      left:14px; top:14px; bottom:14px;
      z-index:60;
      border-radius:22px;
      box-shadow:var(--shadow);
      transform:translateX(-120%);
      transition:transform .22s ease;
      height:auto;
      max-height:calc(100dvh - 28px);
    }
    .sidebar.mobile.open{ transform:translateX(0); }
    .overlay.show{ display:block; }

    @media (max-width: 820px){
      .form-grid{ grid-template-columns:1fr; }
      .form-grid.sch-grid{ grid-template-columns:1fr; }
      .pager{ grid-template-columns: 1fr; justify-items:stretch; }
      .pager-left, .pager-center, .pager-right{ justify-content:flex-start; }
      .pager-center{ justify-content:flex-start; min-width:auto; }
    }

    @media (min-width: 821px) and (max-width: 1100px){
      .form-grid.sch-grid{ grid-template-columns: 1fr 1fr; }
    }

    .settings-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    @media (max-width: 820px){ .settings-grid{ grid-template-columns:1fr; } }
    .setting-item{
      border:1px solid rgba(229,234,242,.8);
      background:rgba(255,255,255,.92);
      border-radius:16px;
      padding:12px;
      box-shadow:var(--shadow-sm);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    body.dark .setting-item{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(2,6,23,.35);
    }
    .setting-left{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .setting-left strong{
      font-size:13px;
      font-weight:900;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .setting-left span{
      font-size:12px;
      font-weight:600;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .toggle{
      position:relative;
      width:46px;
      height:28px;
      border-radius:999px;
      border:1px solid rgba(229,234,242,.9);
      background:rgba(255,255,255,.95);
      cursor:pointer;
      box-shadow:var(--shadow-sm);
      flex:0 0 auto;
    }
    body.dark .toggle{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(17,24,39,.9);
    }
    .toggle::after{
      content:"";
      position:absolute;
      top:3px; left:3px;
      width:22px; height:22px;
      border-radius:999px;
      background:linear-gradient(135deg, #94a3b8, #64748b);
      transition:transform .18s ease, background .18s ease;
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }
    .toggle.on{
      border-color:rgba(var(--primary-rgb),.45);
      background:rgba(var(--primary-rgb),.12);
    }
    body.dark .toggle.on{
      border-color:rgba(var(--primary-rgb),.45);
      background:rgba(var(--primary-rgb),.14);
    }
    .toggle.on::after{
      transform:translateX(18px);
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
    }

    /* =========================
      DASHBOARD SHORTCUT CARDS
      ========================= */
    .shortcuts-grid{
      display:grid;
      grid-template-columns:none;
      grid-auto-flow:column;
      grid-auto-columns:calc((100% - 42px) * .25);
      gap:14px;
      align-items:stretch;
      width:100%;
      max-width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      padding:2px;
      scroll-behavior:smooth;
      scroll-snap-type:x mandatory;
      overscroll-behavior-inline:contain;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
      cursor:grab;
      touch-action:pan-y;
      user-select:none;
      -webkit-user-select:none;
    }
    .shortcuts-grid.is-empty{ grid-auto-columns:100%; }
    .shortcuts-grid::-webkit-scrollbar{ width:0; height:0; display:none; }
    .shortcuts-grid.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
    .dashboard-shortcut-card{
      min-width:0;
      min-height:292px;
      display:flex;
      flex-direction:column;
      padding:14px;
      border:1px solid rgba(226,232,240,.96);
      border-radius:16px;
      background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94));
      box-shadow:0 10px 28px rgba(15,23,42,.08);
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
      scroll-snap-align:start;
      scroll-snap-stop:always;
    }
    .dashboard-shortcut-card:hover{
      transform:translateY(-2px);
      border-color:rgba(var(--primary-rgb),.32);
      box-shadow:0 16px 34px rgba(15,23,42,.12);
    }
    .dashboard-shortcut-media{
      position:relative;
      height:132px;
      display:grid;
      place-items:center;
      overflow:hidden;
      padding:10px;
      border-bottom:1px solid rgba(148,163,184,.30);
    }
    .dashboard-shortcut-media img{
      position:relative;
      z-index:1;
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    .dashboard-shortcut-fallback{
      position:absolute;
      inset:0;
      display:grid;
      place-content:center;
      justify-items:center;
      gap:3px;
      color:var(--muted);
      background:var(--primary-soft);
    }
    .dashboard-shortcut-fallback .material-symbols-rounded{ font-size:34px; color:var(--primary); }
    .dashboard-shortcut-fallback small{ font-size:11px; font-weight:800; }
    .dashboard-shortcut-media.has-image .dashboard-shortcut-fallback{ display:none; }
    .dashboard-shortcut-body{
      flex:1;
      min-height:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:15px 5px 2px;
    }
    .dashboard-shortcut-description{
      width:100%;
      flex:1;
      margin:0 0 14px;
      color:var(--text);
      font-size:13px;
      font-weight:700;
      line-height:1.55;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .dashboard-shortcut-button{
      min-width:132px;
      min-height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:9px 16px;
      border:1px solid rgba(var(--primary-rgb),.42);
      border-radius:12px;
      color:var(--primary);
      background:var(--panel);
      font-size:12px;
      font-weight:900;
      text-decoration:none;
      box-shadow:0 6px 18px rgba(var(--primary-rgb),.10);
      transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
    }
    .dashboard-shortcut-button .material-symbols-rounded{ font-size:18px; }
    .dashboard-shortcut-button:hover{
      transform:translateY(-1px);
      color:#fff;
      background:var(--primary);
      box-shadow:0 10px 22px rgba(var(--primary-rgb),.22);
    }
    .dashboard-shortcut-empty{
      grid-column:1/-1;
      min-height:116px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      padding:20px;
      border:1px dashed rgba(148,163,184,.40);
      border-radius:14px;
      color:var(--muted);
      background:rgba(248,250,252,.66);
      font-size:12px;
      font-weight:800;
      text-align:center;
    }
    .dashboard-shortcut-empty .material-symbols-rounded{ color:var(--primary); }
    body.dark .dashboard-shortcut-card{
      border-color:rgba(148,163,184,.20);
      background:linear-gradient(180deg,rgba(17,24,39,.94),rgba(15,23,42,.88));
      box-shadow:0 14px 34px rgba(0,0,0,.24);
    }
    body.dark .dashboard-shortcut-media{ border-bottom-color:rgba(148,163,184,.24); }
    body.dark .dashboard-shortcut-button{ background:rgba(15,23,42,.74); }
    body.dark .dashboard-shortcut-empty{ border-color:rgba(148,163,184,.24); background:rgba(15,23,42,.34); }
    @media (max-width:1100px){ .shortcuts-grid{ grid-auto-columns:calc((100% - 14px) * .5); } }
    @media (max-width:620px){ .shortcuts-grid{ grid-auto-columns:100%; } }
    /* =========================
      DASHBOARD MINI CALENDAR
      ========================= */
    .dashboard-mini-calendar{
      min-height:0;
      display:grid;
      gap:8px;
    }
    .dashboard-mini-calendar-controls{
      display:grid;
      grid-template-columns:32px minmax(0,1fr) 32px;
      align-items:center;
      gap:7px;
    }
    .dashboard-mini-calendar-controls .icon-action{
      width:32px;
      min-width:32px;
      height:32px;
      border:0;
      background:transparent;
      box-shadow:none;
    }
    .dashboard-mini-calendar-month{
      appearance:none;
      min-width:0;
      min-height:32px;
      padding:4px 8px;
      border:0;
      border-radius:10px;
      background:var(--primary-soft);
      color:var(--text);
      font:inherit;
      font-size:12px;
      font-weight:900;
      cursor:pointer;
    }
    .dashboard-mini-calendar-weekdays,
    .dashboard-mini-calendar-grid{
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:4px;
    }
    .dashboard-mini-calendar-weekday{
      padding:2px 0;
      color:var(--muted);
      font-size:9.5px;
      font-weight:900;
      text-align:center;
      text-transform:uppercase;
    }
    .dashboard-mini-calendar-day{
      appearance:none;
      position:relative;
      min-width:0;
      min-height:35px;
      display:grid;
      place-items:center;
      gap:2px;
      padding:3px 2px;
      border:1px solid transparent;
      border-radius:10px;
      background:rgba(248,250,252,.72);
      color:var(--text);
      font:inherit;
      cursor:pointer;
      transition:background .15s ease,border-color .15s ease,transform .15s ease;
    }
    .dashboard-mini-calendar-day:hover{
      border-color:rgba(var(--primary-rgb),.30);
      background:var(--primary-soft);
      transform:translateY(-1px);
    }
    .dashboard-mini-calendar-day.is-out{ opacity:.38; background:transparent; }
    .dashboard-mini-calendar-day.is-today{
      border-color:rgba(var(--primary-rgb),.42);
      color:var(--primary);
      font-weight:950;
    }
    .dashboard-mini-calendar-day.is-selected{
      border-color:var(--primary);
      background:var(--primary);
      color:#fff;
      box-shadow:0 6px 14px rgba(var(--primary-rgb),.22);
    }
    .dashboard-mini-calendar-number{
      font-size:10.5px;
      font-weight:850;
      line-height:1;
    }
    .dashboard-mini-calendar-dots{
      min-height:4px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:2px;
    }
    .dashboard-mini-calendar-dot{
      width:4px;
      height:4px;
      border-radius:50%;
      background:#94a3b8;
    }
    .dashboard-mini-calendar-dot.consultation{ background:#0ea5e9; }
    .dashboard-mini-calendar-dot.thesis{ background:#8b5cf6; }
    .dashboard-mini-calendar-dot.activity{ background:#10b981; }
    .dashboard-mini-calendar-dot.holiday,
    .dashboard-mini-calendar-dot.leave{ background:#ef4444; }
    .dashboard-mini-calendar-day.is-selected .dashboard-mini-calendar-dot{
      background:#fff;
      opacity:.92;
    }
    .dashboard-mini-calendar-count{
      position:absolute;
      top:2px;
      right:3px;
      min-width:13px;
      height:13px;
      display:grid;
      place-items:center;
      padding:0 3px;
      border-radius:999px;
      background:var(--primary-soft);
      color:var(--primary);
      font-size:8px;
      font-weight:950;
      line-height:1;
    }
    .dashboard-mini-calendar-day.is-selected .dashboard-mini-calendar-count{
      background:rgba(255,255,255,.22);
      color:#fff;
    }
    .dashboard-mini-calendar-footer{
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding-top:8px;
      border-top:1px solid var(--border);
    }
    .dashboard-mini-calendar-footer > span{
      min-width:0;
      color:var(--muted);
      font-size:10.5px;
      font-weight:750;
      line-height:1.3;
    }
    .dashboard-mini-calendar-footer .btn-system{
      flex:0 0 auto;
      width:auto;
      min-height:30px;
      height:30px;
      padding:5px 8px;
      border-radius:9px;
      font-size:10px;
    }
    .dashboard-mini-calendar-footer .btn-system .material-symbols-rounded{ font-size:15px; }
    .dashboard-mini-calendar.is-loading{ opacity:.72; }
    .dashboard-card[data-dashboard-user-height] > .dashboard-mini-calendar{
      flex:1 1 auto;
      overflow:auto;
    }
    body.dark .dashboard-mini-calendar-day{ background:rgba(15,23,42,.52); }
    body.dark .dashboard-mini-calendar-day.is-out{ background:transparent; }
    body.dark .dashboard-mini-calendar-day.is-selected{ background:var(--primary); }
    @media (max-width:430px){
      .dashboard-mini-calendar-day{ min-height:34px; }
      .dashboard-mini-calendar-footer{ align-items:stretch; flex-direction:column; }
      .dashboard-mini-calendar-footer .btn-system{ width:100%; }
    }
    /* ========================
       LOGIN PAGE
       ======================== */
    .login-page{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px;
      background:
        linear-gradient(115deg, rgba(var(--primary-rgb),.22) 0%, rgba(var(--primary-rgb),.13) 31%, transparent 31.2%),
        linear-gradient(180deg, #f4f7fb 0%, var(--bg) 100%);
    }
    body.dark .login-page{
      background:
        linear-gradient(115deg, rgba(var(--primary-rgb),.18) 0%, rgba(var(--primary-rgb),.10) 31%, transparent 31.2%),
        linear-gradient(180deg, rgba(17,24,39,.9) 0%, var(--bg) 100%);
    }
    .login-shell{
      width:min(960px,100%);
      min-height:560px;
      display:grid;
      grid-template-columns:minmax(300px,.92fr) minmax(340px,1.08fr);
      overflow:hidden;
      background:var(--panel);
      border:1px solid rgba(226,232,240,.86);
      border-radius:16px;
      box-shadow:0 24px 70px rgba(15,23,42,.16);
    }
    .login-showcase{
      position:relative;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      gap:18px;
      min-width:0;
      padding:34px 28px;
      color:#fff;
      background:
        linear-gradient(180deg, rgba(15,23,42,.18) 0%, rgba(15,23,42,.55) 100%),
        var(--login-showcase-bg, linear-gradient(145deg, var(--primary) 0%, #0f766e 100%));
      background-size:cover;
      background-position:center;
      overflow:hidden;
    }
    .login-showcase::before,
    .login-showcase::after{
      display:none;
    }
    .login-welcome-vertical{
      position:absolute;
      left:24px;
      top:34px;
      z-index:1;
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-size:34px;
      line-height:1;
      letter-spacing:0;
      font-weight:900;
      color:rgba(255,255,255,.34);
    }
    .login-visual{
      display:none;
    }
    .login-visual::before,
    .login-visual::after{
      display:none;
    }
    .login-showcase-copy,
    .login-charts{ position:relative; z-index:1; }
    .login-eyebrow{
      font-size:11px;
      font-weight:900;
      opacity:.84;
      margin-bottom:7px;
    }
    .login-showcase h2{
      margin:0;
      max-width:340px;
      font-size:24px;
      line-height:1.14;
      font-weight:900;
      letter-spacing:0;
    }
    .login-showcase p{
      max-width:360px;
      margin:9px 0 0;
      color:rgba(255,255,255,.78);
      font-size:12.5px;
      line-height:1.55;
    }
    .login-role-strip{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:14px;
    }
    .login-role-strip span,
    .login-role-strip a{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      padding:0 9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.28);
      background:rgba(255,255,255,.12);
      font-size:10.5px;
      font-weight:900;
      color:inherit;
      text-decoration:none;
    }
    .login-role-strip a:hover{
      background:rgba(255,255,255,.22);
    }
    .login-card{
      width:100%;
      min-width:0;
      background:var(--panel);
      padding:44px 42px;
      align-self:stretch;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .login-form-panel{
      width:min(340px,100%);
      text-align:center;
    }
    .login-logo{
      width:138px;
      height:auto;
      display:block;
      margin:0 auto 20px;
    }
    .login-title{
      margin:0;
      font-size:34px;
      letter-spacing:1px;
      font-weight:900;
      color:var(--primary);
      line-height:1.05;
      text-transform:uppercase;
    }
    .login-brand-name{
      margin-top:8px;
      font-size:13px;
      color:var(--text);
      font-weight:900;
      letter-spacing:0;
    }
    .login-sub{
      margin-top:5px;
      font-size:11px;
      letter-spacing:3px;
      color:rgba(15,23,42,.55);
      text-transform:uppercase;
    }
    body.dark .login-sub{ color:rgba(229,231,235,.55); }
    .login-role-field{
      margin-top:22px;
      text-align:left;
    }
    .login-role-field label{
      display:block;
      margin-bottom:7px;
      font-size:11px;
      font-weight:900;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:0;
    }
    .login-select-wrap{
      position:relative;
    }
    .login-role-select{
      width:100%;
      height:46px;
      appearance:none;
      border:1px solid rgba(148,163,184,.35);
      border-radius:999px;
      padding:0 42px 0 16px;
      background:rgba(255,255,255,.82);
      color:var(--text);
      font-size:14px;
      font-weight:800;
      outline:none;
      box-shadow:0 10px 24px rgba(15,23,42,.07);
    }
    .login-select-wrap .material-symbols-rounded{
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      color:var(--primary);
      font-size:20px;
      pointer-events:none;
    }
    .login-form{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:stretch;
    }
    .login-input{
      width:100%;
      height:48px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      padding:0 16px;
      font-size:14px;
      outline:none;
      background:rgba(255,255,255,.82);
      color:var(--text);
      box-shadow:0 10px 24px rgba(15,23,42,.07);
    }
    body.dark .login-input,
    body.dark .login-role-select{
      background:rgba(2,6,23,.35);
      border:1px solid rgba(148,163,184,.22);
      box-shadow:0 12px 26px rgba(0,0,0,.25);
    }
    .login-input:focus,
    .login-role-select:focus{
      border-color:rgba(var(--primary-rgb),.7);
      box-shadow:0 0 0 4px var(--primary-soft);
    }
    .login-btn{
      width:100%;
      height:50px;
      border-radius:999px;
      border:none;
      cursor:pointer;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
      color:#fff;
      font-weight:900;
      letter-spacing:.4px;
      box-shadow:0 16px 34px rgba(var(--primary-rgb),.28);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition:transform .08s ease, opacity .12s ease;
      user-select:none;
      margin-top:8px;
    }
    body.dark .login-btn{ box-shadow:0 16px 34px rgba(var(--primary-rgb),.22); }
    .login-btn:active{ transform:translateY(1px); }
    .login-btn[disabled]{ opacity:.6; cursor:not-allowed; }
    .login-error{
      width:100%;
      display:none;
      margin:2px 0 0;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(239,68,68,.28);
      background:rgba(239,68,68,.08);
      color:#b91c1c;
      font-size:13px;
      text-align:left;
      line-height:1.45;
    }
    body.dark .login-error{
      color:#fecaca;
      background:rgba(239,68,68,.12);
      border:1px solid rgba(239,68,68,.22);
    }
    .login-charts{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      margin-top:16px;
    }
    .login-chart-card{
      min-height:118px;
      border-radius:8px;
      padding:8px;
      background:rgba(255,255,255,.90);
      color:var(--text);
      border:1px solid rgba(255,255,255,.42);
      box-shadow:0 10px 24px rgba(15,23,42,.10);
    }
    .login-chart-card .chart-wrap{
      height:70px;
      min-height:66px;
    }
    .login-chart-card .chart-card-title{ font-size:10.5px; }
    .login-chart-card .chart-meta{
      margin-top:4px;
      font-size:10px;
    }
    @media (max-width:980px){
      .login-page{ justify-content:flex-start; }
      .login-shell{ grid-template-columns:1fr; min-height:0; }
      .login-showcase{ min-height:360px; }
      .login-visual{ margin-top:88px; }
      .login-charts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .login-card{ padding:32px 24px; }
    }
    @media (max-width:620px){
      .login-page{ padding:18px; }
      .login-shell{ border-radius:14px; }
      .login-showcase{ padding:24px 18px; min-height:330px; }
      .login-welcome-vertical{ font-size:28px; left:18px; }
      .login-visual{ width:min(220px,74%); margin-top:78px; }
      .login-showcase h2{ font-size:22px; }
      .login-charts{ grid-template-columns:1fr; }
      .login-chart-card{ min-height:112px; }
      .login-card{ padding:26px 18px 22px; }
      .login-logo{ width:116px; }
      .login-title{ font-size:30px; }
      .login-sub{ letter-spacing:2px; }
    }
    /* ===== Broadcast ===== */
    
    /* ===== Broadcast WhatsApp UI refinements ===== */
    #page-broadcast .card{ display:flex; flex-direction:column; }
    #page-broadcast .card > .muted{ flex:0 0 auto; }
    #page-broadcast .bc-scroll{
      flex:1 1 auto;
      overflow:auto;
      max-height: calc(100vh - 230px);
      padding-right: 6px;
      scrollbar-gutter: stable both-edges;
    }
    /* nicer scrollbar (webkit) */
    #page-broadcast .bc-scroll::-webkit-scrollbar{ width:10px; height:10px; }
    #page-broadcast .bc-scroll::-webkit-scrollbar-thumb{
      background: rgba(100,116,139,.25);
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.0);
      background-clip: padding-box;
    }
    body.dark #page-broadcast .bc-scroll::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.22); }

    #page-broadcast .bc-actions{
      display:flex; gap:10px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap;
    }
    /* Make buttons match app style (compact + consistent height) */
    #page-broadcast .bc-actions .btn,
    #page-broadcast .bc-actions .btn-system{
      min-height: 40px;
      border-radius: 14px;
      padding: 10px 14px;
      font-weight: 800;
    }
    #page-broadcast .bc-actions .btn .material-symbols-rounded,
    #page-broadcast .bc-actions .btn-system .material-symbols-rounded{
      font-size: 18px;
    }
    #page-broadcast .bc-actions .btn-system{
      background: rgba(15,23,42,.03);
      border: 1px solid rgba(229,234,242,.9);
      box-shadow: var(--shadow-sm);
      color: var(--text);
    }
    body.dark #page-broadcast .bc-actions .btn-system{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(148,163,184,.18);
    }

    /* Multi-select dropdown (Contact) */
    .ms{ position:relative; }
    .ms-btn{
      width:100%;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--text);
      font-weight:700;
      cursor:pointer;
      box-shadow:var(--shadow-sm);
      min-height:40px;
    }
    body.dark .ms-btn{ border:1px solid rgba(148,163,184,.18); background:rgba(17,24,39,.92); }
    .ms-btn:focus{ outline:2px solid rgba(var(--primary-rgb),.35); outline-offset:2px; }
    .ms-caret{ font-size:20px; color:var(--muted); }
    .ms-caret{ transition: transform .15s ease; }
    .ms-caret.rot{ transform: rotate(180deg); }
    .ms-pop{
      position:absolute;
      left:0; right:0;
      top:calc(100% + 8px);
      z-index:60;
      border-radius:16px;
      border:1px solid var(--border);
      background:var(--panel);
      box-shadow:var(--shadow);
      padding:10px;
    }
    body.dark .ms-pop{ border:1px solid rgba(148,163,184,.18); background:rgba(17,24,39,.96); }
    .ms-top{ display:flex; gap:10px; align-items:center; }
    .ms-top .input{ flex:1; }
    .ms-list{
      margin-top:10px;
      border:1px solid rgba(148,163,184,.18);
      border-radius:14px;
      max-height:260px;
      overflow:auto;
      padding:6px;
      background:rgba(15,23,42,.02);
    }
    body.dark .ms-list{ background:rgba(255,255,255,.03); }
    .ms-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
.pill-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
    .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--primary-soft); border:1px solid var(--border); font-size:12px; }
    .pill button{ border:none; background:transparent; cursor:pointer; color:var(--muted); display:grid; place-items:center; }
    .checklist{ border:1px solid var(--border); border-radius:14px; padding:10px; background:rgba(255,255,255,.02); }
    .check-item{ display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-bottom:1px dashed rgba(148,163,184,.18); }
    .check-item:last-child{ border-bottom:none; }
    .check-item label{ cursor:pointer; line-height:1.25; }
    .notice{ padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(var(--primary-rgb),.08); }

    /* ===== Responsive polish: laptop + smartphone ===== */
    :root{
      --radius:14px;
      --sidebar-w:248px;
      --sidebar-mini:76px;
      --gap:12px;
      --control-h:40px;
      --app-font-size:13px;
      --table-font-size:12.5px;
    }
    body{
      font-size:var(--app-font-size);
      line-height:1.45;
      -webkit-text-size-adjust:100%;
      text-rendering:optimizeLegibility;
    }
    .sidebar{ padding:12px 10px; gap:10px; }
    .brand{ padding:8px; gap:9px; border-radius:12px; }
    .brand .logo{ width:36px; height:36px; }
    .brand h1{ font-size:13.5px; }
    .brand small{ font-size:10.5px; }
    .nav{ gap:4px; padding:5px; border-radius:14px; }
    .nav button{ min-height:38px; padding:9px 10px; border-radius:12px; font-size:12.5px; }
    .nav button .material-symbols-rounded{ font-size:19px; width:21px; }
    .sidebar-footer{ padding:5px; border-radius:14px; }
    .side-action{ gap:6px; }
    .side-action button{ min-height:38px; padding:9px 10px; border-radius:12px; font-size:12px; }
    .content{ padding:12px; gap:12px; }
    .topbar{ min-height:54px; padding:9px 11px; border-radius:14px; }
    .icon-btn{ width:38px; height:38px; border-radius:12px; }
    .icon-btn .material-symbols-rounded{ font-size:21px; }
    .page-title strong{ font-size:14px; line-height:1.2; }
    .page-title span{ font-size:11.5px; line-height:1.25; }
    .avatar{ width:32px; height:32px; border-radius:12px; }
    .card{ padding:12px; border-radius:14px; }
    .card h3{ font-size:12.5px; margin-bottom:9px; }
    .select,
    .input,
    .ms-btn,
    .btn-primary,
    .btn-system{
      min-height:var(--control-h);
      height:var(--control-h);
      border-radius:12px;
      font-size:13px;
    }
    .select{ padding:9px 38px 9px 11px; }
    .input{ padding:9px 11px; }
    textarea.input,
    textarea.select,
    textarea.textarea{
      height:auto;
      min-height:104px;
      border-radius:12px;
      font-size:13px;
      line-height:1.45;
    }
    .btn-primary,
    .btn-system{ padding:9px 12px; font-weight:700; }
    .btn-system.icon-only{ width:40px; min-width:40px; }
    .icon-action{ width:32px; height:32px; border-radius:10px; }
    .icon-action .material-symbols-rounded{ font-size:18px; }
    .toolbar{ gap:8px; margin-bottom:9px; }
    .tool-left{ gap:8px; }
    .filter-field{ gap:5px; min-width:136px; }
    .filter-field.search{ flex-basis:230px; min-width:190px; }
    .filter-label,
    .field label{ font-size:11.5px; }
    .table-wrap{ border-radius:14px; }
    .table-scroll{ max-height:none; min-height:0; }
    table{ font-size:var(--table-font-size); }
    thead th,
    tbody td{ padding:10px 10px; }
    .sort-btn{ width:24px; height:24px; border-radius:9px; }
    .aksi{ gap:6px; }
    .pager{ margin-top:12px; gap:8px; }
    .pager-left,
    .pager-center,
    .pager-right{ gap:8px; }
    .page-chip{ padding:8px 10px; border-radius:12px; font-size:12.5px; }
    .rowsize-label{ font-size:12.5px; }
    .modal{ border-radius:16px; max-height:calc(100vh - 28px); display:flex; flex-direction:column; }
    .modal-head{ padding:12px 14px; flex:0 0 auto; }
    .modal-head strong{ font-size:13.5px; }
    .modal-body{ padding:12px 14px; overflow:auto; }
    .modal-foot{ padding:12px 14px; flex:0 0 auto; }
    .dropzone{ border-radius:14px; padding:12px; }
    .shortcuts-grid{ gap:10px; }
    .login-card{ padding:34px 28px; }
    .login-logo{ width:126px; }
    .login-title{ font-size:28px; }
    .login-sub{ font-size:12px; letter-spacing:3px; }
    .login-form{ margin-top:22px; }
    .login-input{ height:46px; font-size:14px; }
    .login-btn{ height:48px; }

    @media (min-width: 1180px){
      :root{ --control-h:42px; --app-font-size:13.5px; --table-font-size:13px; }
      .content{ padding:14px; gap:14px; }
      .card{ padding:14px; }
      .table-scroll{ max-height:none; min-height:0; }
      thead th,
      tbody td{ padding:11px 12px; }
    }

    @media (max-width: 820px){
      :root{
        --sidebar-w:min(304px, calc(100vw - 28px));
        --control-h:44px;
        --app-font-size:14px;
        --table-font-size:13px;
      }
      body{ background:var(--bg); }
      .app{ min-height:100vh; height:auto; }
      .shell{ min-height:100vh; overflow:visible; }
      .content{ padding:10px; gap:10px; }
      .topbar{
        min-height:58px;
        padding:10px;
        border-radius:14px;
        align-items:center;
      }
      .top-left{ gap:8px; flex:1; }
      .top-right{ gap:8px; }
      .icon-btn{ width:42px; height:42px; }
      .page-title{ flex:1; }
      .page-title strong{ font-size:15px; }
      .page-title span{ font-size:12px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
      .card{ padding:11px; border-radius:14px; }
      .card-head{ align-items:flex-start; gap:8px; flex-wrap:wrap; }
      .toolbar{ display:grid; grid-template-columns:1fr; align-items:stretch; }
      .tool-left{ display:grid; grid-template-columns:1fr; width:100%; }
      .filter-field,
      .filter-field.search{ min-width:0; width:100%; flex-basis:auto; }
      .select,
      .input,
      .ms-btn,
      .btn-primary,
      .btn-system{ width:100%; min-height:44px; height:44px; font-size:14px; }
      .btn-primary,
      .btn-system{ justify-content:center; }
      .btn-system.icon-only{ width:42px; height:42px; min-width:42px; }
      .icon-action{ width:34px; height:34px; min-width:34px; }
      .dropzone{ flex-direction:column; align-items:stretch; }
      .table-scroll{ min-height:0; max-height:none; }
      table{ min-width:760px; table-layout:auto; }
      thead th,
      tbody td{ padding:10px; }
      th, td{ white-space:nowrap; }
      .aksi{ justify-content:center; flex-wrap:nowrap; }
      .pager{ margin-top:10px; }
      .pager-left,
      .pager-center,
      .pager-right{ width:100%; justify-content:stretch; }
      .pager-center .btn-system,
      .pager-right .btn-system,
      .pager-left .select{ flex:1; }
      .page-chip{ width:100%; text-align:center; }
      .modal-backdrop{ padding:10px; align-items:flex-end; }
      .modal{ width:100%; max-height:92vh; border-radius:18px 18px 0 0; }
      .modal-foot{ display:grid; grid-template-columns:1fr 1fr; }
      .modal-foot .btn-primary,
      .modal-foot .btn-system{ width:100%; }
      .sidebar.mobile{
        left:10px;
        top:10px;
        bottom:10px;
        width:var(--sidebar-w);
        border-radius:18px;
      }
      .brand .logo{ width:38px; height:38px; }
      .nav button{ min-height:42px; font-size:13px; }
      .side-action button{ min-height:42px; }
      .login-page{ padding:18px; align-items:center; }
      .login-card{ width:100%; max-width:none; padding:24px 18px 20px; }
      .login-logo{ width:112px; }
      .login-title{ font-size:26px; }
      .login-sub{ font-size:11px; letter-spacing:2px; }
      .shortcuts-grid{ grid-auto-columns:100%; gap:9px; }
      #page-broadcast .bc-scroll{ max-height:none; padding-right:0; }
      .ms-pop{ position:fixed; left:10px; right:10px; top:auto; bottom:10px; max-height:78vh; overflow:auto; }
    }

    @media (max-width: 430px){
      .content{ padding:8px; }
      .topbar{ border-radius:12px; }
      .card{ padding:10px; border-radius:12px; }
      .shortcuts-grid{ grid-auto-columns:100%; }
      .login-title{ font-size:26px; }
      .login-sub{ letter-spacing:2px; }
      .modal-foot{ grid-template-columns:1fr; }
    }

    /* Compact popups and menus */
    .modal{
      width:min(640px, 94vw);
      border-radius:14px;
    }
    .modal-head{
      min-height:46px;
      padding:10px 12px;
    }
    .modal-head strong{ font-size:13px; }
    .modal-body{ padding:10px 12px; }
    .modal-foot{
      padding:10px 12px;
      gap:8px;
    }
    .modal-body .grid,
    .modal-body .form-grid,
    .modal-body .lec-form-grid{
      gap:10px;
    }
    .modal .field label{ margin-bottom:4px; }
    .modal .input,
    .modal .select,
    .modal .btn-primary,
    .modal .btn-system{
      min-height:38px;
      height:38px;
      border-radius:11px;
      font-size:12.5px;
      padding-top:8px;
      padding-bottom:8px;
    }
    .modal textarea.input,
    .modal textarea.select,
    .modal textarea.textarea{
      min-height:88px;
      height:auto;
    }
    .ms-pop{
      border-radius:12px;
      padding:8px;
    }
    .ms-list{
      max-height:220px;
      border-radius:11px;
      padding:4px;
    }
    .checklist{
      border-radius:11px;
      padding:7px;
    }
    .check-item{
      padding:7px 5px;
      gap:8px;
    }

    /* Compact tables */
    thead th{
      padding:7px 8px;
      line-height:1.15;
    }
    tbody td{
      padding:7px 8px;
      line-height:1.25;
      vertical-align:middle;
    }
    td.wrap,
    #page-system-data td.wrap,
    #page-matakuliah td.wrap,
    .research-table td{
      line-height:1.25;
      vertical-align:middle;
    }
    .th-wrap{
      gap:5px;
    }
    .sort-btn{
      width:20px;
      height:20px;
      border-radius:7px;
    }
    .sort-ico{
      border-left-width:4px;
      border-right-width:4px;
      border-top-width:6px;
    }
    .sort-btn.asc .sort-ico{
      border-bottom-width:6px;
    }
    .sort-btn.desc .sort-ico{
      border-top-width:6px;
    }
    .aksi,
    .aksi-row,
    .research-actions{
      gap:4px;
      justify-content:center;
    }
    .icon-action,
    .aksi .icon-action,
    .aksi-row .icon-action,
    .research-actions .icon-action{
      width:26px;
      min-width:26px;
      height:26px;
      border-radius:8px;
      box-shadow:none;
    }
    .icon-action .material-symbols-rounded{
      font-size:16px;
    }
    table input[type="checkbox"]{
      width:14px;
      height:14px;
      accent-color:var(--primary);
    }
    .pager{
      margin-top:10px;
      gap:8px;
    }
    .page-chip{
      padding:7px 9px;
      border-radius:10px;
      font-size:12px;
      box-shadow:none;
    }
    #page-matakuliah table{
      min-width:980px;
      table-layout:fixed;
    }
    #page-matakuliah .mk-check-col,
    #page-matakuliah .mk-check-cell,
    .research-table th:first-child,
    .research-table td:first-child,
    #sysDataTable .sys-col-check,
    #sysDataTable.system-mahasiswa-table .sys-col-check,
    #sysDataTable.system-peminatan-table .sys-col-check,
    #sysDataTable.system-akm-table .sys-col-check,
    #sysDataTable.system-prestasi-table .sys-col-check{
      width:34px;
      text-align:center;
      padding-left:5px;
      padding-right:5px;
    }
    #page-matakuliah .mk-actions-cell,
    #page-matakuliah th.col-aksi{
      width:68px;
      text-align:center;
      padding-left:5px;
      padding-right:5px;
    }
    #sysDataTable .sys-col-aksi,
    #sysDataTable.system-mahasiswa-table .sys-col-aksi,
    #sysDataTable.system-peminatan-table .sys-col-aksi,
    #sysDataTable.system-akm-table .sys-col-aksi,
    #sysDataTable.system-prestasi-table .sys-col-aksi{
      width:96px;
      text-align:center;
      padding-left:5px;
      padding-right:5px;
    }
    #sysDataTable.system-peminatan-table th,
    #sysDataTable.system-peminatan-table td,
    #sysDataTable.system-akm-table th,
    #sysDataTable.system-akm-table td,
    #sysDataTable.system-prestasi-table th,
    #sysDataTable.system-prestasi-table td{
      padding:7px 8px;
      vertical-align:middle;
    }
    #page-matakuliah #mkMetaInfo{
      margin-top:8px !important;
      font-size:11.5px;
    }
    @media (max-width: 820px){
      thead th,
      tbody td,
      #sysDataTable.system-peminatan-table th,
      #sysDataTable.system-peminatan-table td,
      #sysDataTable.system-akm-table th,
      #sysDataTable.system-akm-table td,
      #sysDataTable.system-prestasi-table th,
      #sysDataTable.system-prestasi-table td{
        padding:7px 7px;
      }
      #page-matakuliah table{
        min-width:940px;
      }
      #page-matakuliah .mk-actions-cell,
      #page-matakuliah th.col-aksi{
        width:64px;
      }
    }


    @media (max-width: 820px){
      .sidebar.mobile{
        width:min(268px, calc(100vw - 24px));
        left:8px;
        top:8px;
        bottom:8px;
        padding:9px 8px;
        border-radius:15px;
      }
      .sidebar.mobile .brand{ padding:7px; }
      .sidebar.mobile .brand .logo{ width:34px; height:34px; }
      .sidebar.mobile .nav button,
      .sidebar.mobile .side-action button{
        min-height:38px;
        padding:8px 9px;
        border-radius:10px;
        font-size:12.5px;
      }
      .modal-backdrop{
        padding:8px;
      }
      .modal{
        max-height:88vh;
        border-radius:15px 15px 0 0;
      }
      .modal-head,
      .modal-body,
      .modal-foot{
        padding-left:10px;
        padding-right:10px;
      }
      .modal .input,
      .modal .select,
      .modal .btn-primary,
      .modal .btn-system{
        min-height:40px;
        height:40px;
      }
      .ms-pop{
        left:8px;
        right:8px;
        bottom:8px;
        max-height:70vh;
        border-radius:14px;
      }
      .ms-list{ max-height:210px; }
    }

    /* Global table control sizing */
    .toolbar .select,
    .toolbar .input{
      min-height:36px;
      height:36px;
      border-radius:10px;
      font-size:12px;
      padding-top:7px;
      padding-bottom:7px;
    }
    .toolbar .btn-primary,
    .toolbar .btn-system{
      min-height:36px;
      height:36px;
      border-radius:10px;
      padding:0 11px;
      font-size:12px;
      font-weight:800;
      align-items:center;
    }
    .toolbar .btn-system.icon-only{
      width:34px;
      min-width:34px;
      height:34px;
      min-height:34px;
      padding:0;
      justify-content:center;
      box-shadow:none;
    }
    .toolbar .btn-system.icon-only .material-symbols-rounded{ font-size:18px; }
    table .icon-action,
    .aksi .icon-action,
    .aksi-row .icon-action,
    .research-actions .icon-action{
      width:28px;
      min-width:28px;
      height:28px;
      border-radius:9px;
      box-shadow:none;
    }
    table .icon-action .material-symbols-rounded,
    .aksi .icon-action .material-symbols-rounded,
    .aksi-row .icon-action .material-symbols-rounded,
    .research-actions .icon-action .material-symbols-rounded{ font-size:17px; }
    .research-bulk-action,
    .research-bulk-delete{
      min-height:34px;
      border-radius:10px;
      padding:7px 11px;
      font-size:12px;
    }
    .research-bulk-action .material-symbols-rounded,
    .research-bulk-delete .material-symbols-rounded{ font-size:17px; }

    /* Global table search input actions */
    .global-searchbox{
      position:relative;
      display:flex;
      align-items:center;
      width:100%;
    }
    .global-searchbox .input{
      width:100%;
      padding-right:68px !important;
    }
    .global-search-actions{
      position:absolute;
      right:5px;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      gap:4px;
      align-items:center;
    }
    .global-search-actions .icon-action,
    .global-search-actions .btn-system,
    .global-search-actions .btn-system.icon-only{
      width:24px;
      height:24px;
      min-width:24px;
      min-height:24px;
      padding:0;
      border:0;
      border-radius:7px;
      box-shadow:none;
      background:transparent;
      display:grid;
      place-items:center;
    }
    .global-search-actions .material-symbols-rounded{ font-size:15px; }
    .global-search-actions .icon-action:hover,
    .global-search-actions .btn-system:hover{ background:rgba(var(--primary-rgb),.10); }
    .global-search-external-hidden{ display:none !important; }
    /* Global direct column arrangement */
    table.global-column-control thead th{
      position:relative;
      user-select:none;
    }
    table.global-column-control thead th[draggable="true"]{ cursor:grab; }
    table.global-column-control thead th.global-col-dragging{
      opacity:.46;
      cursor:grabbing;
    }
    table.global-column-control thead th.global-col-drop-left::before,
    table.global-column-control thead th.global-col-drop-right::after{
      content:"";
      position:absolute;
      top:5px;
      bottom:5px;
      width:3px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14);
      z-index:3;
    }
    table.global-column-control thead th.global-col-drop-left::before{ left:0; }
    table.global-column-control thead th.global-col-drop-right::after{ right:0; }
    .global-col-resize{
      position:absolute;
      top:6px;
      right:0;
      bottom:6px;
      width:7px;
      border-radius:999px;
      cursor:col-resize;
      opacity:0;
      transition:opacity .15s ease, background .15s ease;
      z-index:4;
    }
    table.global-column-control thead th:hover .global-col-resize,
    .global-col-resize:hover{
      opacity:1;
      background:rgba(var(--primary-rgb),.26);
    }
    body.global-column-resizing,
    body.global-column-resizing *{
      cursor:col-resize !important;
      user-select:none !important;
    }
    body.dark table.global-column-control thead th.global-col-drop-left::before,
    body.dark table.global-column-control thead th.global-col-drop-right::after{ box-shadow:0 0 0 3px rgba(var(--primary-rgb),.24); }
/* Standalone Community pages */
body.community-standalone{
  min-height:100%;
  background:linear-gradient(180deg, #f4f7fb 0%, var(--bg) 100%);
}
body.community-standalone.auth-pending .community-standalone-card,
body.community-standalone.auth-blocked .community-standalone-card{ display:none; }
.community-standalone-page{
  width:100%;
  min-height:100vh;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.community-standalone-inner{
  width:min(1120px, 100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.community-standalone-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  box-shadow:var(--shadow-sm);
}
body.dark .community-standalone-top{ background:rgba(17,24,39,.88); border-color:rgba(148,163,184,.18); }
.community-standalone-brand{ padding:0; min-width:0; }
.community-standalone-brand .brand-text{ min-width:0; }
.community-standalone-brand h1{ margin:0; font-size:15px; line-height:1.1; }
.community-standalone-brand small{ display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.02em; }
.community-logo-fallback{
  width:100%;
  height:100%;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  font-weight:900;
}
.community-standalone-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.community-standalone-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:start;
  margin-bottom:16px;
}
.community-standalone-title{ display:flex; gap:12px; align-items:flex-start; min-width:0; }
.community-standalone-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 16px 28px var(--primary-glow);
  flex:0 0 auto;
}
.community-standalone-icon .material-symbols-rounded{ font-size:25px; }
.community-standalone-title h2{ margin:0; font-size:22px; line-height:1.15; letter-spacing:0; }
.community-standalone-title p{ margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.55; max-width:720px; }
.community-standalone-tabs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.community-standalone-tabs a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.74);
}
.community-standalone-tabs a.active{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px var(--primary-glow);
}
body.dark .community-standalone-tabs a{ background:rgba(15,23,42,.34); border-color:rgba(148,163,184,.2); }
.community-access-notice{
  padding:16px;
  border:1px solid rgba(var(--primary-rgb),.24);
  border-radius:16px;
  background:var(--primary-soft);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.community-access-notice strong{ display:block; margin-bottom:4px; }
.community-access-notice p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.community-access-notice[hidden]{ display:none; }
@media (max-width:760px){
  .community-standalone-page{ padding:14px; }
  .community-standalone-top,
  .community-standalone-hero{ grid-template-columns:1fr; flex-direction:column; align-items:stretch; }
  .community-standalone-actions,
  .community-standalone-tabs{ justify-content:flex-start; }
  .community-standalone-title h2{ font-size:19px; }
}
/* Community standalone shell layout */
body.community-standalone{
  min-height:100%;
  overflow:hidden;
}
body.community-standalone .community-app{
  height:100vh;
  min-height:100vh;
}
.community-brand{
  color:inherit;
  text-decoration:none;
}
.community-logo-fallback{
  width:100%;
  height:100%;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  font-weight:900;
}
.community-sidebar .nav-subitem .label,
.community-sidebar .nav-parent .label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.community-sidebar .nav-group.open .nav-submenu{
  display:grid;
}
body.community-standalone.auth-pending .community-protected,
body.community-standalone.auth-blocked .community-protected{
  display:none !important;
}
.community-access-notice{
  padding:14px 16px;
  border:1px solid rgba(var(--primary-rgb),.24);
  border-radius:16px;
  background:var(--primary-soft);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:var(--shadow-sm);
}
.community-access-notice[hidden]{ display:none; }
.community-access-notice strong{ display:block; margin-bottom:4px; font-size:13px; }
.community-access-notice p{ margin:0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.community-shell-card{
  min-height:calc(100vh - 124px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.community-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:13px;
  font-weight:900;
  color:var(--text);
}
.community-card-title .material-symbols-rounded{ color:var(--primary); font-size:20px; }
.community-card-subtitle{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(var(--primary-rgb),.18);
  background:var(--primary-soft);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.community-module-hero{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.10), rgba(255,255,255,.72));
}
body.dark .community-module-hero{
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(15,23,42,.32));
  border-color:rgba(148,163,184,.18);
}
.community-module-hero h2{
  margin:0;
  font-size:20px;
  line-height:1.15;
  letter-spacing:0;
}
.community-module-hero p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.community-module-view[hidden]{ display:none !important; }
.community-module-view{
  min-height:180px;
}
.community-local-menu .nav-parent .label{
  white-space:normal;
  line-height:1.2;
}
body.community-standalone .community-content{
  overflow:auto;
}
@media (max-width:860px){
  body.community-standalone{ overflow:auto; }
  body.community-standalone .community-app{ height:auto; min-height:100vh; }
  .community-shell-card{ min-height:auto; }
  .community-module-hero{ align-items:center; }
  .community-module-hero h2{ font-size:18px; }
  .community-access-notice{ align-items:flex-start; flex-direction:column; }
}

.speaker-date-mode{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  min-width:0;
}
.speaker-date-mode > .field{ min-width:0; }
.speaker-multiple-date-field{ grid-column:1 / -1; }
.speaker-multiple-date-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.speaker-multiple-date-head label{ margin:0; }
.speaker-multiple-date-head .btn-system{
  width:auto;
  min-height:36px;
  height:36px;
  padding:7px 10px;
}
.speaker-multiple-dates{
  display:grid;
  gap:8px;
}
.speaker-multiple-date-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:8px;
  align-items:center;
}
.speaker-multiple-date-row .btn-system{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
}

.member-profession-table table{
  min-width:900px;
  table-layout:fixed;
}
.member-profession-table th:nth-child(2){ width:22%; }
.member-profession-table th:nth-child(3){ width:29%; }
.member-profession-table th:nth-child(4){ width:20%; }
.member-profession-table td{
  vertical-align:middle;
  overflow-wrap:anywhere;
}
#page-lecturer-support .cooperation-status-chip{
  justify-content:center;
}
@media (max-width:720px){
  .speaker-date-mode{ grid-template-columns:1fr; }
  .speaker-multiple-date-head{
    align-items:stretch;
    flex-direction:column;
  }
  .speaker-multiple-date-head .btn-system{ width:100%; }
  .speaker-multiple-date-row{
    grid-template-columns:minmax(0,1fr) 36px;
  }
}

/* Social Media Specialist workspace */
.sms-workspace{
  grid-column:1 / -1;
  min-height:560px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(203,213,225,.78);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
body.dark .sms-workspace{ border-color:rgba(148,163,184,.18); background:rgba(17,24,39,.92); box-shadow:0 14px 34px rgba(0,0,0,.25); }
.sms-board[hidden],.sms-calendar[hidden],.sms-list[hidden],#communityWorkPanel[hidden]{ display:none !important; }
.sms-workspace-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(255,255,255,.72));
}
body.dark .sms-workspace-head{ background:rgba(255,255,255,.025); border-color:rgba(148,163,184,.18); }
.sms-title-wrap{ display:flex; align-items:center; gap:11px; min-width:0; }
.sms-title-icon{ width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; border:1px solid rgba(var(--primary-rgb),.24); background:var(--primary-soft); color:var(--primary); }
.sms-title-icon .material-symbols-rounded{ font-size:21px; }
.sms-title-wrap h4{ margin:0 0 3px; color:var(--text); font-size:14px; font-weight:900; }
.sms-title-wrap p{ margin:0; color:var(--muted); font-size:11.5px; line-height:1.4; }
.sms-head-actions,.sms-modal-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sms-action-btn{ height:38px; min-height:38px; border-radius:12px; padding:8px 12px; font-size:12px; white-space:nowrap; }
.sms-workspace-body{ display:grid; gap:12px; padding:14px; background:rgba(248,250,252,.42); }
body.dark .sms-workspace-body{ background:rgba(2,6,23,.12); }
.sms-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.sms-stat{
  --sms-stat-color:var(--primary);
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
  position:relative;
  overflow:hidden;
}
.sms-stat::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sms-stat-color); opacity:.78; }
.sms-stat.purple{ --sms-stat-color:#8b5cf6; }.sms-stat.amber{ --sms-stat-color:#f59e0b; }.sms-stat.blue{ --sms-stat-color:#3b82f6; }.sms-stat.green{ --sms-stat-color:#22c55e; }
.sms-stat > .material-symbols-rounded{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--sms-stat-color) 12%,transparent); color:var(--sms-stat-color); font-size:20px; }
.sms-stat > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; min-width:0; }
.sms-stat small{ grid-column:1; overflow:hidden; color:var(--muted); font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.sms-stat strong{ grid-column:2; grid-row:1 / span 2; color:var(--text); font-size:23px; font-weight:900; line-height:1; }
.sms-stat div > span{ grid-column:1; margin-top:3px; overflow:hidden; color:var(--muted); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.sms-control-card{ border:1px solid var(--border); border-radius:14px; background:var(--panel); box-shadow:0 6px 18px rgba(15,23,42,.045); overflow:hidden; }
.sms-section-heading{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border-bottom:1px solid var(--border); background:rgba(15,23,42,.018); }
body.dark .sms-section-heading{ background:rgba(255,255,255,.025); }
.sms-section-heading > div:first-child{ display:grid; gap:2px; }
.sms-section-heading strong{ color:var(--text); font-size:12.5px; font-weight:900; }
.sms-section-heading span{ color:var(--muted); font-size:10px; }
.sms-workspace-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sms-workspace-meta > span{ min-height:25px; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--muted); font-size:9.5px; font-weight:800; }
.sms-connection-summary i{ width:7px; height:7px; border-radius:999px; background:#94a3b8; }
.sms-connection-summary.ready{ color:#15803d; border-color:rgba(34,197,94,.22); background:rgba(34,197,94,.08); }
.sms-connection-summary.ready i{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.sms-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:11px 12px 12px; }
.sms-filter-grid{ flex:1 1 auto; display:grid; grid-template-columns:minmax(220px,1fr) 150px 140px; gap:9px; min-width:0; }
.sms-filter-field{ min-width:0; }
.sms-filter-field .select{ width:100%; height:38px; border-radius:11px; padding:0 34px 0 10px; font-size:11px; box-shadow:none; }
.sms-search{ height:38px; display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:11px; padding:0 10px; background:var(--panel); transition:border-color .15s ease,box-shadow .15s ease; }
.sms-search:focus-within{ border-color:rgba(var(--primary-rgb),.65); box-shadow:0 0 0 4px var(--primary-soft); }
.sms-search .material-symbols-rounded{ color:#94a3b8; font-size:18px; }
.sms-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:11px; }
.sms-view-switch{ flex:0 0 auto; display:flex; height:38px; padding:3px; border:1px solid var(--border); border-radius:11px; background:rgba(148,163,184,.09); }
.sms-view-switch button{ min-width:38px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:0; border-radius:8px; padding:5px 8px; background:transparent; color:var(--muted); font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.sms-view-switch button.active{ background:var(--panel); color:var(--primary); box-shadow:0 3px 10px rgba(15,23,42,.09); }
.sms-view-switch .material-symbols-rounded{ font-size:16px; }
.sms-feedback{ padding:11px 13px; border:1px solid rgba(var(--primary-rgb),.24); border-radius:12px; background:var(--primary-soft); color:var(--text); font-size:11px; font-weight:700; }
.sms-board{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; align-items:start; }
.sms-column{ min-width:0; border:1px solid var(--border); border-radius:14px; background:rgba(241,245,249,.68); overflow:hidden; }
body.dark .sms-column{ background:rgba(2,6,23,.19); }
.sms-column-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:9px 10px; border-bottom:1px solid var(--border); background:var(--panel); }
.sms-column-head strong{ display:flex; align-items:center; gap:7px; min-width:0; color:var(--text); font-size:10.5px; font-weight:900; }
.sms-column-head i{ width:8px; height:8px; flex:0 0 auto; border-radius:999px; background:var(--sms-status,#94a3b8); box-shadow:0 0 0 3px rgba(148,163,184,.12); }
.sms-column-head span{ min-width:23px; padding:3px 7px; border-radius:999px; background:rgba(148,163,184,.1); color:var(--muted); text-align:center; font-size:9px; font-weight:900; }
.sms-column-body{ display:grid; align-content:start; gap:7px; min-height:238px; max-height:520px; overflow:auto; padding:7px; }
.sms-content-card{ min-width:0; border:1px solid rgba(203,213,225,.78); border-radius:11px; padding:9px; background:var(--panel); box-shadow:0 4px 12px rgba(15,23,42,.045); cursor:pointer; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
body.dark .sms-content-card{ border-color:rgba(148,163,184,.18); }
.sms-content-card:hover{ border-color:rgba(var(--primary-rgb),.45); transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.08); }
.sms-card-top,.sms-card-meta,.sms-card-foot{ display:flex; align-items:center; gap:6px; min-width:0; }
.sms-card-top{ justify-content:space-between; }
.sms-platform-badge,.sms-type-badge,.sms-status-pill{ display:inline-flex; align-items:center; gap:4px; max-width:100%; border-radius:999px; padding:3px 6px; background:var(--primary-soft); color:var(--primary); font-size:8.5px; font-weight:900; text-transform:capitalize; }
.sms-type-badge{ overflow:hidden; background:rgba(148,163,184,.1); color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.sms-platform-badge .material-symbols-rounded{ font-size:12px; }
.sms-card-title{ margin:8px 0 6px; color:var(--text); font-size:11px; font-weight:900; line-height:1.4; overflow-wrap:anywhere; }
.sms-card-caption{ display:-webkit-box; overflow:hidden; margin:0 0 8px; color:var(--muted); font-size:9.5px; line-height:1.45; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sms-card-meta{ flex-wrap:wrap; color:var(--muted); font-size:8.5px; }
.sms-card-meta span{ display:inline-flex; align-items:center; gap:3px; min-width:0; }
.sms-card-meta .material-symbols-rounded{ font-size:12px; }
.sms-card-foot{ justify-content:space-between; margin-top:8px; padding-top:7px; border-top:1px solid var(--border); color:var(--muted); font-size:8.5px; }
.sms-card-foot > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sms-empty{ display:grid; place-items:center; min-height:105px; padding:18px; color:var(--muted); text-align:center; font-size:10px; }
.sms-calendar{ border:1px solid var(--border); border-radius:14px; background:var(--panel); overflow:hidden; }
.sms-calendar-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.sms-calendar-toolbar strong{ color:var(--text); font-size:12px; font-weight:900; text-transform:capitalize; }
.sms-calendar-actions{ display:flex; align-items:center; gap:6px; }
.sms-calendar-nav{ min-height:30px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--border); border-radius:9px; padding:5px 8px; background:var(--panel); color:var(--text); font:inherit; font-size:9.5px; font-weight:800; cursor:pointer; }
.sms-calendar-nav .material-symbols-rounded{ font-size:15px; color:var(--muted); }
.sms-calendar-head{ display:grid; grid-template-columns:repeat(7,1fr); background:rgba(148,163,184,.08); }
.sms-calendar-head span{ padding:8px 6px; color:var(--muted); text-align:center; font-size:9px; font-weight:900; }
.sms-calendar-grid{ display:grid; grid-template-columns:repeat(7,minmax(80px,1fr)); overflow-x:auto; }
.sms-calendar-day{ min-height:105px; padding:7px; border-top:1px solid var(--border); border-right:1px solid var(--border); background:var(--panel); }
.sms-calendar-day:nth-child(7n){ border-right:0; }
.sms-calendar-day.is-other{ background:rgba(148,163,184,.035); opacity:.56; }
.sms-calendar-day.is-today{ box-shadow:inset 0 0 0 2px rgba(var(--primary-rgb),.38); background:var(--primary-soft); }
.sms-day-number{ display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:900; }
.sms-calendar-item{ display:block; width:100%; margin:3px 0; overflow:hidden; border:0; border-left:3px solid var(--primary); border-radius:6px; padding:4px 5px; background:var(--primary-soft); color:var(--text); text-align:left; text-overflow:ellipsis; white-space:nowrap; font:inherit; font-size:8.5px; cursor:pointer; }
.sms-list{ overflow:auto; }
.sms-table{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0; table-layout:auto; }
.sms-table th,.sms-table td{ padding:10px 11px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; font-size:10px; }
.sms-table th{ position:sticky; top:0; z-index:1; background:linear-gradient(180deg,#fff,#f8fafc); color:var(--text); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.035em; }
body.dark .sms-table th{ background:linear-gradient(180deg,#111827,#0f172a); }
.sms-table tbody tr{ cursor:pointer; }
.sms-table tbody tr:last-child td{ border-bottom:0; }
.sms-table tbody tr:hover{ background:var(--primary-soft); }
.sms-modal-backdrop{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.4); backdrop-filter:blur(4px); }
body.dark .sms-modal-backdrop{ background:rgba(0,0,0,.62); }
.sms-modal-backdrop[hidden]{ display:none !important; }
.sms-modal form[hidden],.sms-btn[hidden],.sms-admin-note[hidden]{ display:none !important; }
.sms-modal{ width:min(760px,96vw); max-height:calc(100vh - 32px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(229,234,242,.9); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:var(--shadow); }
body.dark .sms-modal{ border-color:rgba(148,163,184,.18); background:rgba(17,24,39,.98); }
.sms-settings-modal{ width:min(920px,96vw); }
.sms-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:0 0 auto; padding:13px 16px; border-bottom:1px solid var(--border); background:rgba(15,23,42,.02); }
body.dark .sms-modal-head{ background:rgba(255,255,255,.03); }
.sms-modal-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.sms-modal-title > .material-symbols-rounded{ width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:var(--primary-soft); color:var(--primary); font-size:19px; }
.sms-modal-head h3{ margin:0; color:var(--text); font-size:14px; font-weight:950; }
.sms-modal-head p{ margin:3px 0 0; color:var(--muted); font-size:10.5px; }
.sms-icon-btn{ width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--muted); cursor:pointer; }
.sms-icon-btn:hover{ color:var(--text); background:var(--primary-soft); }
.sms-icon-btn .material-symbols-rounded{ font-size:18px; }
.sms-modal form{ min-height:0; display:flex; flex:1 1 auto; flex-direction:column; overflow:hidden; }
.sms-modal-body{ display:grid; gap:12px; overflow:auto; padding:14px 16px; }
.sms-form-section{ display:grid; gap:11px; border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(248,250,252,.55); }
body.dark .sms-form-section{ background:rgba(2,6,23,.16); }
.sms-form-section-head{ display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--border); }
.sms-form-section-head > .material-symbols-rounded{ color:var(--primary); font-size:18px; }
.sms-form-section-head > div{ display:grid; gap:2px; }
.sms-form-section-head strong{ color:var(--text); font-size:11.5px; font-weight:900; }
.sms-form-section-head small{ color:var(--muted); font-size:9.5px; }
.sms-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sms-field{ display:grid; gap:6px; min-width:0; color:var(--text); font-size:10px; font-weight:800; }
.sms-field.wide{ grid-column:1/-1; }
.sms-field input,.sms-field select,.sms-field textarea{ width:100%; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--text); outline:0; font:inherit; font-size:11px; transition:border-color .15s ease,box-shadow .15s ease; }
.sms-field input,.sms-field select{ height:38px; padding:0 10px; }
.sms-field textarea{ resize:vertical; padding:10px; line-height:1.5; }
.sms-field input:focus,.sms-field select:focus,.sms-field textarea:focus{ border-color:rgba(var(--primary-rgb),.65); box-shadow:0 0 0 4px var(--primary-soft); }
.sms-modal-actions{ flex:0 0 auto; margin:0; padding:11px 16px; border-top:1px solid var(--border); background:rgba(15,23,42,.018); }
body.dark .sms-modal-actions{ background:rgba(255,255,255,.025); }
.sms-action-spacer{ flex:1 1 auto; }
.sms-btn{ min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border); border-radius:11px; padding:7px 12px; background:var(--panel); color:var(--text); font:inherit; font-size:11px; font-weight:800; cursor:pointer; transition:.16s ease; }
.sms-btn:hover:not(:disabled){ transform:translateY(-1px); border-color:rgba(var(--primary-rgb),.4); }
.sms-btn:disabled{ opacity:.55; cursor:not-allowed; }
.sms-btn .material-symbols-rounded{ font-size:17px; }
.sms-btn.primary{ border-color:transparent; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#0b1220; box-shadow:0 10px 20px rgba(var(--primary-rgb),.16); }
.sms-btn.secondary{ background:var(--panel); }
.sms-btn.danger{ color:#dc2626; border-color:rgba(239,68,68,.22); background:rgba(239,68,68,.07); }
.sms-settings-general{ display:grid; grid-template-columns:1fr 160px minmax(220px,1.3fr); gap:10px; align-items:end; }
.sms-check{ min-height:52px; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--text); cursor:pointer; }
.sms-check input{ accent-color:var(--primary); }
.sms-check span{ display:grid; gap:2px; }
.sms-check strong{ font-size:10px; }
.sms-check small{ color:var(--muted); font-size:9px; line-height:1.35; }
.sms-platform-settings{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sms-platform-setting{ border:1px solid var(--border); border-radius:13px; padding:11px; background:var(--panel); }
.sms-platform-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--border); }
.sms-platform-head strong{ display:flex; align-items:center; gap:7px; color:var(--text); font-size:11px; }
.sms-platform-head strong .material-symbols-rounded{ color:var(--primary); font-size:17px; }
.sms-connection-state{ border-radius:999px; padding:4px 7px; background:rgba(148,163,184,.1); color:var(--muted); font-size:8.5px; font-weight:900; }
.sms-connection-state.ready{ background:rgba(34,197,94,.1); color:#15803d; }
.sms-platform-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sms-platform-fields .wide{ grid-column:1/-1; }
.sms-token-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; }
.sms-clear-token{ display:flex; align-items:center; gap:5px; color:var(--muted); font-size:8.5px; font-weight:700; white-space:nowrap; }
.sms-field .sms-clear-token input{ width:auto; height:auto; padding:0; border:0; border-radius:0; box-shadow:none; accent-color:var(--primary); }
.sms-security-note,.sms-admin-note{ display:flex; align-items:flex-start; gap:8px; border:1px solid rgba(var(--primary-rgb),.18); border-radius:11px; padding:9px 10px; background:var(--primary-soft); color:var(--muted); font-size:9.5px; line-height:1.45; }
.sms-security-note{ margin-top:10px; }
.sms-security-note .material-symbols-rounded,.sms-admin-note .material-symbols-rounded{ flex:0 0 auto; color:var(--primary); font-size:17px; }
.sms-admin-note{ margin:14px 16px; }
.sms-admin-note strong{ color:var(--text); }
.sms-admin-note p{ margin:2px 0 0; }
.sms-toast{ position:fixed; right:20px; bottom:20px; z-index:1400; max-width:360px; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:11px 14px; background:#0f172a; color:#fff; box-shadow:0 18px 40px rgba(15,23,42,.28); font-size:11px; font-weight:700; }
.sms-toast.error{ background:#b91c1c; }
.sms-toast[hidden]{ display:none !important; }
@media (max-width:1280px){
  .sms-board{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sms-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
  .sms-toolbar{ align-items:stretch; flex-direction:column; }
  .sms-filter-grid{ grid-template-columns:minmax(200px,1fr) 150px 140px; width:100%; }
  .sms-view-switch{ align-self:flex-end; }
  .sms-settings-general{ grid-template-columns:1fr 160px; }
  .sms-settings-general .sms-check{ grid-column:1/-1; }
}
@media (max-width:760px){
  .sms-workspace-head{ align-items:flex-start; flex-direction:column; }
  .sms-head-actions{ width:100%; }
  .sms-head-actions .sms-action-btn{ flex:1; justify-content:center; }
  .sms-section-heading{ align-items:flex-start; flex-direction:column; }
  .sms-workspace-meta{ justify-content:flex-start; }
  .sms-filter-grid{ grid-template-columns:1fr; }
  .sms-view-switch{ width:100%; align-self:stretch; }
  .sms-view-switch button{ flex:1; }
  .sms-board{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(250px,82vw); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:5px; }
  .sms-column{ scroll-snap-align:start; }
  .sms-form-grid,.sms-platform-settings,.sms-settings-general,.sms-platform-fields{ grid-template-columns:1fr; }
  .sms-field.wide,.sms-platform-fields .wide,.sms-settings-general .sms-check{ grid-column:auto; }
  .sms-modal-backdrop{ padding:8px; }
  .sms-modal{ width:100%; max-height:calc(100vh - 16px); border-radius:16px; }
  .sms-calendar{ overflow-x:auto; }
  .sms-calendar-toolbar,.sms-calendar-head,.sms-calendar-grid{ min-width:660px; }
}
@media (max-width:480px){
  .sms-workspace-body{ padding:10px; }
  .sms-stats{ grid-template-columns:1fr; }
  .sms-title-wrap{ align-items:flex-start; }
  .sms-modal-head,.sms-modal-body,.sms-modal-actions{ padding-left:12px; padding-right:12px; }
  .sms-token-row{ grid-template-columns:1fr; }
}

/* Instagram management inside Social Media Specialist */
.ig-workspace{ min-height:680px; }
.ig-workspace-head{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.09),rgba(255,255,255,.96) 44%,rgba(236,72,153,.045)); }
body.dark .ig-workspace-head{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(17,24,39,.96) 50%,rgba(236,72,153,.06)); }
.ig-title-icon{ background:linear-gradient(135deg,rgba(249,115,22,.13),rgba(236,72,153,.13),rgba(139,92,246,.13)); color:#db2777; border-color:rgba(219,39,119,.18); }
.ig-subnav{
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  padding:7px 10px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  scrollbar-width:thin;
}
.ig-subnav button{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  border:0;
  border-radius:10px;
  padding:7px 10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  transition:.16s ease;
}
.ig-subnav button:hover{ color:var(--text); background:rgba(148,163,184,.09); }
.ig-subnav button.active{ color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.12); }
.ig-subnav .material-symbols-rounded{ font-size:17px; }
.ig-page[hidden]{ display:none !important; }
.ig-page{ display:grid; gap:12px; animation:igPageIn .2s ease; }
@keyframes igPageIn{ from{ opacity:.35; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.ig-page-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; min-width:0; }
.ig-page-heading > div:first-child{ min-width:0; }
.ig-page-heading h3{ margin:3px 0 3px; color:var(--text); font-size:17px; font-weight:950; letter-spacing:-.02em; }
.ig-page-heading p{ margin:0; color:var(--muted); font-size:10.5px; line-height:1.45; }
.ig-eyebrow{ display:block; color:var(--primary); font-size:8.5px; font-weight:950; letter-spacing:.12em; }
.ig-char-counter{ flex:0 0 auto; color:var(--muted); font-size:9.5px; font-weight:700; }
.ig-char-counter strong{ color:var(--text); }
.ig-dashboard-grid,.ig-settings-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ig-panel{ min-height:245px; }
.ig-account-list,.ig-activity-list,.ig-log-list{ display:grid; align-content:start; }
.ig-account-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.ig-account-row:last-child{ border-bottom:0; }
.ig-account-avatar{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(135deg,#f97316,#ec4899,#8b5cf6);
  color:#fff;
}
.ig-account-avatar img{ width:100%; height:100%; object-fit:cover; }
.ig-account-avatar .material-symbols-rounded{ font-size:18px; }
.ig-account-info{ display:grid; gap:2px; min-width:0; flex:1; }
.ig-account-info strong{ overflow:hidden; color:var(--text); font-size:11.5px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.ig-account-info span,.ig-account-info small{ overflow:hidden; color:var(--muted); font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-account-info .ig-account-handle{ color:var(--primary); font-weight:850; }
.ig-account-info .ig-local-storage-label{ width:max-content; display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 6px; background:rgba(34,197,94,.09); color:#15803d; font-weight:850; }
.ig-local-storage-label .material-symbols-rounded{ font-size:10px; }
.ig-account-info .is-error{ color:#dc2626; white-space:normal; }
.ig-connection-dot{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  border-radius:999px;
  padding:4px 7px;
  background:rgba(148,163,184,.1);
  color:var(--muted);
  font-size:8px;
  font-weight:900;
}
.ig-connection-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:#94a3b8; }
.ig-connection-dot.ready{ background:rgba(34,197,94,.1); color:#15803d; }
.ig-connection-dot.ready::before{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.ig-account-actions,.ig-table-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.ig-account-actions button,.ig-table-actions button,.ig-table-actions a{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel);
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
}
.ig-account-actions button:hover,.ig-table-actions button:hover,.ig-table-actions a:hover{ color:var(--primary); border-color:rgba(var(--primary-rgb),.35); }
.ig-account-actions .danger,.ig-table-actions .danger{ color:#dc2626; }
.ig-account-actions .material-symbols-rounded,.ig-table-actions .material-symbols-rounded{ font-size:15px; }
.ig-activity-item{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  border:0;
  border-bottom:1px solid var(--border);
  padding:9px 12px;
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.ig-activity-item:last-child{ border-bottom:0; }
.ig-activity-item:hover{ background:var(--primary-soft); }
.ig-activity-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb,var(--ig-status) 11%,transparent);
  color:var(--ig-status);
}
.ig-activity-icon .material-symbols-rounded{ font-size:17px; }
.ig-activity-item > span:nth-child(2){ display:grid; gap:2px; min-width:0; }
.ig-activity-item strong{ overflow:hidden; color:var(--text); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ig-activity-item small{ color:var(--muted); font-size:8.5px; }
.ig-status-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  border-radius:999px;
  padding:4px 7px;
  background:color-mix(in srgb,var(--ig-status) 10%,transparent);
  color:var(--ig-status);
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.ig-status-pill .material-symbols-rounded{ font-size:12px; }
.ig-text-button{ border:0; padding:3px; background:transparent; color:var(--primary); font:inherit; font-size:9.5px; font-weight:900; cursor:pointer; }
.ig-empty-state{ min-height:160px; display:grid; place-items:center; align-content:center; gap:6px; padding:22px; color:var(--muted); text-align:center; }
.ig-empty-state > .material-symbols-rounded{ width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--primary-soft); color:var(--primary); font-size:21px; }
.ig-empty-state strong{ color:var(--text); font-size:11px; }
.ig-empty-state p{ max-width:320px; margin:0; font-size:9.5px; line-height:1.45; }
.ig-composer{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.72fr); gap:12px; align-items:start; }
.ig-compose-form{ padding:13px; }
.ig-compose-form .sms-form-section-head{ margin-bottom:11px; }
.ig-composer-reset{ margin-left:auto; min-height:29px; padding:5px 8px; border-radius:9px; font-size:9px; }
.ig-composer-reset .material-symbols-rounded{ font-size:14px; }
.sms-field > small{ color:var(--muted); font-size:8.5px; font-weight:500; line-height:1.4; }
.ig-composer-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.ig-preview-panel{ overflow:hidden; }
.ig-preview-label{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.ig-preview-label .material-symbols-rounded{ font-size:17px; }
.ig-preview-account{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
.ig-preview-avatar{ width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; overflow:hidden; aspect-ratio:1 / 1; border-radius:50%; clip-path:circle(50%); background:linear-gradient(135deg,#f97316,#ec4899,#8b5cf6); color:#fff; }
.ig-preview-avatar .material-symbols-rounded{ font-size:16px; }

.ig-preview-avatar.has-photo{ background:rgba(148,163,184,.12); }

.ig-preview-avatar img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:fill; }
.ig-preview-account > div{ display:grid; gap:1px; }
.ig-preview-account strong{ color:var(--text); font-size:9.5px; }
.ig-preview-account small{ color:var(--muted); font-size:8px; }
.ig-preview-media{ aspect-ratio:1/1; display:grid; place-items:center; align-content:center; gap:6px; overflow:hidden; background:linear-gradient(135deg,rgba(148,163,184,.1),rgba(var(--primary-rgb),.08)); color:var(--muted); }
.ig-preview-media > .material-symbols-rounded{ font-size:34px; opacity:.65; }
.ig-preview-media small{ font-size:8.5px; }
.ig-preview-media img,.ig-preview-media video{ width:100%; height:100%; object-fit:cover; }
.ig-preview-media.is-broken::after{ content:"Preview URL tidak dapat dimuat"; color:#dc2626; font-size:9px; }
.ig-preview-copy{ padding:11px 12px 13px; color:var(--text); font-size:9.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.ig-preview-copy strong{ margin-right:5px; }
.ig-preview-copy p{ margin:5px 0 0; color:var(--primary); }
.ig-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.ig-card-grid > .ig-empty-state,.ig-media-grid > .ig-empty-state{ grid-column:1/-1; border:1px dashed var(--border); border-radius:14px; background:var(--panel); }
.ig-post-card{ min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--panel); box-shadow:0 7px 20px rgba(15,23,42,.055); }
.ig-post-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:rgba(148,163,184,.09); }
.ig-post-media img,.ig-post-media video{ width:100%; height:100%; object-fit:cover; }
.ig-post-media .ig-status-pill{ position:absolute; top:8px; right:8px; background:var(--panel); box-shadow:0 4px 12px rgba(15,23,42,.12); }
.ig-post-body{ display:grid; gap:7px; padding:11px; }
.ig-post-account{ display:flex; align-items:center; gap:5px; color:var(--muted); font-size:8.5px; font-weight:800; }
.ig-post-account .material-symbols-rounded{ font-size:13px; color:#db2777; }
.ig-post-body p{ display:-webkit-box; min-height:42px; overflow:hidden; margin:0; color:var(--text); font-size:10px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.ig-post-body > small{ color:var(--muted); font-size:8.5px; }
.ig-inline-error{ display:flex; align-items:flex-start; gap:5px; border-radius:9px; padding:7px; background:rgba(239,68,68,.08); color:#dc2626; font-size:8.5px; line-height:1.4; }
.ig-inline-error .material-symbols-rounded{ font-size:14px; }
.ig-post-actions{ display:flex; gap:6px; padding-top:8px; border-top:1px solid var(--border); }
.ig-post-actions button{ min-height:31px; display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:1; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:var(--text); font:inherit; font-size:9px; font-weight:800; cursor:pointer; }
.ig-post-actions button.primary{ border-color:transparent; background:var(--primary); color:#0b1220; }
.ig-post-actions .material-symbols-rounded{ font-size:14px; }
.ig-schedule-list{ min-height:120px; }
.ig-schedule-rows{ display:grid; }
.ig-schedule-rows article{ display:grid; grid-template-columns:150px minmax(0,1fr) auto 34px; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); }
.ig-schedule-rows article:last-child{ border-bottom:0; }
.ig-schedule-date{ display:grid; gap:2px; }
.ig-schedule-date strong{ color:var(--text); font-size:9.5px; }
.ig-schedule-date small{ color:var(--muted); font-size:8px; }
.ig-schedule-copy{ overflow:hidden; color:var(--text); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-media-note{ display:flex; align-items:flex-start; gap:8px; border:1px solid rgba(var(--primary-rgb),.18); border-radius:11px; padding:9px 11px; background:var(--primary-soft); color:var(--muted); font-size:9px; line-height:1.45; }
.ig-media-note .material-symbols-rounded{ color:var(--primary); font-size:16px; }
.ig-media-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ig-media-card{ min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:13px; background:var(--panel); }
.ig-media-preview{ position:relative; aspect-ratio:4/3; overflow:hidden; background:rgba(148,163,184,.09); }
.ig-media-preview img,.ig-media-preview video{ width:100%; height:100%; object-fit:cover; }
.ig-video-mark{ position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:#fff; font-size:30px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.ig-media-info{ display:grid; gap:4px; padding:9px; }
.ig-media-info strong{ overflow:hidden; color:var(--text); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-media-info > span{ color:var(--muted); font-size:8px; text-transform:capitalize; }
.ig-media-info > div{ display:flex; align-items:center; gap:5px; margin-top:4px; }
.ig-media-info button{ min-height:29px; flex:1; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--primary); font:inherit; font-size:8.5px; font-weight:900; cursor:pointer; }
.ig-media-info button.danger{ max-width:31px; color:#dc2626; }
.ig-media-info .material-symbols-rounded{ font-size:14px; }
.ig-upload-button{ cursor:pointer; }
.ig-preview-media.is-carousel{display:block;position:relative;padding:0}.ig-preview-media.is-carousel .ig-preview-carousel{height:100%}
.ig-post-upload-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}.ig-post-upload-row>small{color:var(--muted);font-size:8.5px;line-height:1.4}.ig-post-upload-button{display:inline-flex;align-items:center;gap:5px;min-height:31px}.ig-post-upload-button input{display:none}.ig-preview-caption-more{display:inline;border:0;padding:0;background:transparent;color:var(--primary);font:inherit;font-weight:850;cursor:pointer}
.ig-history-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.ig-history-toolbar .sms-search{ flex:1; }
.ig-history-toolbar select{ width:170px; height:38px; border:1px solid var(--border); border-radius:11px; padding:0 10px; background:var(--panel); color:var(--text); font:inherit; font-size:10px; }
.ig-history-table tbody tr{ cursor:default; }
.ig-history-content{ display:grid; gap:2px; max-width:320px; }
.ig-history-content strong{ overflow:hidden; color:var(--text); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-history-content small{ color:var(--muted); font-size:7.8px; }
.ig-history-error{ display:block; max-width:250px; overflow:hidden; color:#dc2626; text-overflow:ellipsis; white-space:nowrap; font-size:8.5px; }
.ig-history-success{ color:#15803d; font-size:8.5px; font-weight:800; }
.ig-config-status{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.ig-config-status article{ display:flex; align-items:center; gap:8px; min-width:0; border:1px solid var(--border); border-radius:12px; padding:9px 10px; background:var(--panel); }
.ig-config-status article > .material-symbols-rounded{ width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; font-size:16px; }
.ig-config-status article.ready > .material-symbols-rounded{ background:rgba(34,197,94,.1); color:#16a34a; }
.ig-config-status article.warning > .material-symbols-rounded{ background:rgba(245,158,11,.1); color:#d97706; }
.ig-config-status article div{ display:grid; gap:1px; min-width:0; }
.ig-config-status strong{ overflow:hidden; color:var(--text); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ig-config-status small{ overflow:hidden; color:var(--muted); font-size:7.8px; text-overflow:ellipsis; white-space:nowrap; }
.ig-settings-grid > .sms-control-card{ min-height:300px; }
.ig-settings-grid form{ padding:12px; }
.ig-account-test-preview{ display:flex; align-items:center; gap:10px; min-width:0; border:1px solid rgba(34,197,94,.22); border-radius:14px; padding:10px; background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(var(--primary-rgb),.06)); }
.ig-account-test-preview[hidden]{ display:none; }
.ig-account-test-preview > div{ display:grid; gap:2px; min-width:0; flex:1; }
.ig-account-test-preview small{ color:#15803d; font-size:7.5px; font-weight:950; letter-spacing:.08em; }
.ig-account-test-preview strong{ overflow:hidden; color:var(--text); font-size:11.5px; font-weight:950; text-overflow:ellipsis; white-space:nowrap; }
.ig-account-test-preview div > span{ overflow:hidden; color:var(--muted); font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-account-test-preview .ig-verified-mark{ flex:0 0 auto; color:#16a34a; font-size:20px; }
.ig-account-form-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.ig-log-panel{ max-height:300px; }
.ig-log-list{ max-height:235px; overflow:auto; }
.ig-log-item{ display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); }
.ig-log-item:last-child{ border-bottom:0; }
.ig-log-item > .material-symbols-rounded{ width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:var(--primary-soft); color:var(--primary); font-size:15px; }
.ig-log-item.warning > .material-symbols-rounded{ background:rgba(245,158,11,.1); color:#d97706; }
.ig-log-item.error > .material-symbols-rounded{ background:rgba(239,68,68,.1); color:#dc2626; }
.ig-log-item div{ display:grid; gap:2px; min-width:0; }
.ig-log-item strong{ color:var(--text); font-size:9.5px; font-weight:800; line-height:1.4; }
.ig-log-item small{ color:var(--muted); font-size:8px; }
body.dark .ig-workspace .sms-control-card,
body.dark .ig-post-card,
body.dark .ig-media-card,
body.dark .ig-config-status article{ border-color:rgba(148,163,184,.18); }
@media(max-width:1180px){
  .ig-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-media-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ig-config-status{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px){
  .ig-dashboard-grid,.ig-settings-grid,.ig-composer{ grid-template-columns:1fr; }
  .ig-preview-panel{ max-width:420px; width:100%; justify-self:center; }
  .ig-media-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px){
  .ig-page-heading{ align-items:flex-start; flex-direction:column; }
  .ig-card-grid,.ig-media-grid,.ig-config-status{ grid-template-columns:1fr; }
  .ig-schedule-rows article{ grid-template-columns:1fr auto; }
  .ig-schedule-copy{ grid-column:1/-1; grid-row:2; }
  .ig-history-toolbar{ align-items:stretch; flex-direction:column; }
  .ig-history-toolbar select{ width:100%; }
  .ig-account-row{ align-items:flex-start; flex-wrap:wrap; }
  .ig-account-actions{ width:100%; justify-content:flex-end; }
}
@media(max-width:480px){
  .ig-subnav{ padding-inline:7px; }
  .ig-subnav button{ padding-inline:8px; }
  .ig-composer-actions .sms-btn{ flex:1 1 calc(50% - 5px); }
  .ig-preview-panel{ max-width:none; }
}

/* Social Media Specialist refinements: account modal, local history, and Story */
body.sms-modal-open{ overflow:hidden; }
.community-protected{ display:grid; gap:12px; }
.community-shell-card > .community-module-view{ padding:12px; }
.ig-connection-summary{ min-height:30px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; padding:5px 10px; background:var(--panel); color:var(--muted); font-size:9px; font-weight:900; }
.ig-connection-summary i{ width:7px; height:7px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.12); }
.ig-connection-summary.ready{ color:#15803d; border-color:rgba(34,197,94,.2); background:rgba(34,197,94,.08); }
.ig-connection-summary.ready i{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.ig-settings-grid.single{ grid-template-columns:minmax(0,1fr); }
.ig-settings-accounts-card{ min-height:220px !important; }
.ig-account-actions button.with-label{ width:auto; min-width:82px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 9px; font:inherit; font-size:8.5px; font-weight:900; }
.ig-account-modal{ width:min(680px,96vw); }
.ig-account-modal-actions{ justify-content:flex-end; }
.ig-local-modal-note{ display:flex; align-items:flex-start; gap:9px; border:1px solid rgba(var(--primary-rgb),.2); border-radius:12px; padding:10px 11px; background:var(--primary-soft); }
.ig-local-modal-note > .material-symbols-rounded{ flex:0 0 auto; color:var(--primary); font-size:18px; }
.ig-local-modal-note > div{ display:grid; gap:2px; }
.ig-local-modal-note strong{ color:var(--text); font-size:10px; font-weight:900; }
.ig-local-modal-note small{ color:var(--muted); font-size:9px; line-height:1.45; }
.ig-history-filter-card{ overflow:visible; }
.ig-history-toolbar{ border-bottom:0; }
.ig-history-data-card{ overflow:hidden; border-radius:0 0 14px 14px; }
.ig-history-data-card .ig-empty-state{ border-radius:0; }
.ig-history-data-card .table-wrap{ width:100%; overflow:auto; }
.ig-preview-panel.is-story{ width:min(100%,390px); justify-self:center; }
.ig-preview-media.is-story{ aspect-ratio:9/16; max-height:500px; background:linear-gradient(155deg,rgba(249,115,22,.1),rgba(236,72,153,.1),rgba(139,92,246,.12)); }
.ig-preview-copy[hidden]{ display:none !important; }
.ig-post-card:has(.ig-post-media video) .ig-post-media{ background:#0f172a; }
@media(max-width:680px){
  .ig-account-row .ig-connection-dot{ margin-left:auto; }
  .ig-account-actions button.with-label{ min-width:94px; }
  .ig-account-modal-actions .sms-action-spacer{ display:none; }
  .ig-account-modal-actions{ align-items:stretch; }
  .ig-account-modal-actions .sms-btn{ flex:1 1 calc(50% - 4px); }
  .ig-history-filter-card .sms-section-heading,.ig-log-panel .sms-section-heading,.ig-settings-accounts-card .sms-section-heading{ align-items:flex-start; flex-direction:column; }
}
/* Community Instagram feature modules */
.ig-external-module{ min-height:0; }
.ig-module-copy{ display:grid; gap:12px; margin-top:0; }
.ig-module-copy > .sms-stats{ margin-top:0; }
.ig-module-copy > .ig-dashboard-grid{ align-items:stretch; }
.ig-module-copy > .ig-dashboard-grid .ig-panel{ min-height:230px; }
.ig-module-copy > .sms-control-card{ overflow:hidden; }
.ig-module-copy > .ig-media-grid{ min-height:170px; }
.ig-module-copy > .ig-media-grid > .ig-empty-state{ grid-column:1/-1; }
.ig-module-copy #igModuleScheduleCalendar{ min-height:430px; }
.ig-module-copy .ig-schedule-list{ min-height:150px; }
.ig-module-copy .ig-page-heading{ padding:2px 1px; }
body.dark .ig-module-copy > .sms-control-card{ border-color:rgba(148,163,184,.18); }
@media(max-width:900px){
  .ig-module-copy #igModuleScheduleCalendar{ min-height:390px; }
}
@media(max-width:680px){
  .ig-module-copy{ gap:10px; margin-top:0; }
  .ig-module-copy #igModuleScheduleCalendar{ min-height:340px; overflow:auto; }
  .ig-module-copy .sms-calendar-grid,.ig-module-copy .sms-calendar-head{ min-width:640px; }
}
/* Standalone Social Media Specialist modules */
.ig-create-post-module{ gap:12px; }
.ig-carousel-media-list{display:grid;gap:6px;margin-top:7px;max-height:190px;overflow:auto}.ig-carousel-media-item{display:grid;grid-template-columns:24px 34px minmax(0,1fr) repeat(3,30px);align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.ig-carousel-media-item img{width:34px;height:34px;object-fit:cover;border-radius:6px;background:var(--soft)}.ig-carousel-media-item strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ig-carousel-media-order{font-size:10px;font-weight:800;color:var(--primary);text-align:center}.ig-carousel-media-empty{color:var(--muted);padding:4px}.ig-carousel-picker{position:relative;margin-top:5px}.ig-carousel-picker-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:11px;text-align:left;cursor:pointer}.ig-carousel-picker-panel{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;display:grid;gap:4px;max-height:250px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 14px 28px rgba(15,23,42,.16)}.ig-carousel-picker-option{display:grid;grid-template-columns:19px 30px minmax(0,1fr);align-items:center;gap:7px;padding:5px;border-radius:7px;cursor:pointer}.ig-carousel-picker-option:hover{background:var(--primary-soft)}.ig-carousel-picker-option input{margin:0;accent-color:var(--primary)}.ig-carousel-picker-option img{width:30px;height:30px;object-fit:cover;border-radius:6px;background:var(--soft)}.ig-carousel-picker-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ig-preview-carousel{position:relative;display:block;width:100%;height:100%;padding:0;background:var(--soft)}.ig-preview-carousel-stage{width:100%;height:100%;min-width:0;overflow:hidden;border-radius:0;background:#fff}.ig-preview-carousel-stage img{width:100%;height:100%;object-fit:cover}.ig-preview-carousel-button{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;cursor:pointer;transform:translateY(-50%)}.ig-preview-carousel-button.prev{left:8px}.ig-preview-carousel-button.next{right:8px}.ig-preview-carousel-button .material-symbols-rounded{font-size:18px}.ig-preview-carousel-footer{position:absolute;right:0;bottom:8px;left:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;text-shadow:0 1px 3px rgba(15,23,42,.75);font-size:10px;font-weight:800}.ig-preview-carousel-dots{display:flex;gap:4px}.ig-preview-carousel-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}.ig-preview-carousel-dots i.is-active{background:#fff}
#igCreatePostComposerMount:empty{ display:none; }
#igCreatePostComposerMount > .ig-page{ min-width:0; }
.ig-create-post-panel[hidden]{ display:none !important; }
.ig-create-post-panel{ display:grid; gap:12px; min-width:0; }
.ig-create-post-subnav{
  border:1px solid var(--border);
  border-radius:13px;
  padding:6px;
  background:rgba(15,23,42,.018);
}
.ig-create-post-subnav button{
  flex:1 1 50%;
  justify-content:center;
  min-width:190px;
}
body.dark .ig-create-post-subnav{ border-color:rgba(148,163,184,.18); background:rgba(255,255,255,.025); }
.ig-module-pipeline{
  display:grid;
  gap:12px;
  min-width:0;


}
.ig-platform-settings-module{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:12px;
}
.ig-platform-tabs button{ flex:1 1 100%; }
[data-platform-settings-panel][hidden]{ display:none !important; }
.ig-platform-subnav{
  position:sticky;
  top:12px;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid rgba(148,163,184,.2);
  border-radius:15px;
  background:linear-gradient(150deg,rgba(var(--primary-rgb),.08),rgba(255,255,255,.78));
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.ig-platform-subnav > span{
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 6px 8px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ig-platform-subnav > span .material-symbols-rounded{ font-size:16px; }
.ig-platform-subnav button{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.ig-platform-subnav button .material-symbols-rounded{ font-size:18px; }
.ig-platform-subnav button:hover,
.ig-platform-subnav button.active{
  border-color:rgba(var(--primary-rgb),.18);
  background:rgba(var(--primary-rgb),.12);
  color:var(--primary);
}
.ig-platform-settings-panel{
  display:grid;
  gap:12px;
  min-width:0;
}

body.dark .ig-platform-subnav{
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(150deg,rgba(var(--primary-rgb),.12),rgba(15,23,42,.72));
  box-shadow:none;
}
.sidebar-footer .side-action #communitySettingsLink.active{
  color:var(--primary);
  background:rgba(var(--primary-rgb),.12);
}
@media(max-width:860px){
  .ig-platform-settings-module{ grid-template-columns:1fr; }
  .ig-platform-subnav{ position:static; display:flex; align-items:center; overflow-x:auto; }
  .ig-platform-subnav > span{ flex:0 0 auto; padding:4px 8px; }
  .ig-platform-subnav button{ width:auto; min-width:120px; }
}
@media(max-width:680px){
  .ig-create-post-module{ gap:10px; }

  .ig-platform-subnav{ padding:8px; border-radius:13px; }
}
/* Published social content module */
.ig-published-content-module,.ig-published-platform-panel{ display:grid; gap:12px; min-width:0; }
.ig-published-platform-tabs button{ flex:1 1 100%; }
[data-published-platform-panel][hidden]{ display:none !important; }
.ig-published-filter-card{ overflow:visible !important; }
.ig-published-toolbar{
  display:grid;
  grid-template-columns:minmax(190px,240px) minmax(220px,1fr) minmax(150px,190px);
  align-items:end;
  gap:10px;
  padding:12px;
}
.ig-published-toolbar .sms-field{ min-width:0; }
.ig-published-toolbar .sms-search{ height:39px; align-self:end; }
.ig-published-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  min-height:180px;
}
.ig-published-grid > .ig-empty-state{
  grid-column:1/-1;
  min-height:190px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:var(--panel);
}
.ig-published-card{
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 7px 20px rgba(15,23,42,.055);
}
.ig-published-preview{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(var(--primary-rgb),.08),rgba(148,163,184,.12));
  color:var(--muted);
}
.ig-published-preview > img,.ig-published-preview > video{ width:100%; height:100%; object-fit:cover; }
.ig-published-preview > .material-symbols-rounded{ font-size:34px; }
.ig-published-type{
  position:absolute;
  top:9px;
  left:9px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(15,23,42,.76);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  backdrop-filter:blur(8px);
}
.ig-published-body{ display:grid; align-content:space-between; gap:12px; padding:11px; min-width:0; }
.ig-published-body > div:first-child{ display:grid; gap:6px; min-width:0; }
.ig-published-body strong{ overflow:hidden; color:var(--text); font-size:10.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.ig-published-body small{ overflow:hidden; color:var(--muted); font-size:8.5px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.ig-published-actions{ display:flex; align-items:center; gap:8px; }
.ig-published-actions .sms-btn{ width:100%; justify-content:center; text-decoration:none; }
.ig-published-unavailable{ color:var(--muted); font-size:9px; }
.ig-media-note.warning{ border-color:rgba(245,158,11,.24); background:rgba(245,158,11,.08); }
.ig-media-note.warning .material-symbols-rounded{ color:#d97706; }
body.dark .ig-published-card{ border-color:rgba(148,163,184,.18); box-shadow:none; }
@media(max-width:1000px){ .ig-published-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px){
  .ig-published-toolbar{ grid-template-columns:1fr; align-items:stretch; }
  .ig-published-toolbar .sms-search{ align-self:stretch; }
}
@media(max-width:560px){ .ig-published-grid{ grid-template-columns:1fr; } }
/* Professional social analytics module */
.ig-analytics-module,.ig-analytics-platform-panel{ display:grid; gap:12px; min-width:0; }
.ig-analytics-platform-tabs button{ flex:1 1 100%; }
[data-analytics-platform-panel][hidden]{ display:none !important; }
.ig-analytics-filter-card{ overflow:visible !important; }
.ig-analytics-toolbar{
  display:grid;
  grid-template-columns:minmax(190px,240px) minmax(160px,190px) minmax(250px,1fr);
  align-items:end;
  gap:10px;
  padding:12px;
}
.ig-analytics-range{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:39px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(15,23,42,.018);
  min-width:0;
}
.ig-analytics-range > .material-symbols-rounded{ flex:0 0 auto; color:var(--primary); font-size:19px; }
.ig-analytics-range > div{ display:grid; gap:1px; min-width:0; }
.ig-analytics-range small{ color:var(--muted); font-size:7.5px; font-weight:900; letter-spacing:.06em; }
.ig-analytics-range strong{ overflow:hidden; color:var(--text); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ig-analytics-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ig-analytics-kpi{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-width:0;
  padding:13px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 6px 18px rgba(15,23,42,.045);
}
.ig-analytics-kpi::after{ content:""; position:absolute; inset:auto -24px -30px auto; width:78px; height:78px; border-radius:50%; background:currentColor; opacity:.055; }
.ig-analytics-kpi > .material-symbols-rounded{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; color:#fff; font-size:19px; }
.ig-analytics-kpi > .material-symbols-rounded::before{ color:#fff; }
.ig-analytics-kpi > div{ display:grid; gap:2px; min-width:0; }
.ig-analytics-kpi small{ color:var(--muted); font-size:7.5px; font-weight:900; letter-spacing:.07em; }
.ig-analytics-kpi strong{ color:var(--text); font-size:22px; line-height:1.1; letter-spacing:-.03em; }
.ig-analytics-kpi p{ margin:1px 0 0; color:var(--muted); font-size:8.5px; line-height:1.35; }
.ig-analytics-kpi.violet{ color:#8b5cf6; }

.ig-analytics-kpi.violet > .material-symbols-rounded{ background:#8b5cf6; }
.ig-analytics-kpi.blue{ color:#3b82f6; }

.ig-analytics-kpi.blue > .material-symbols-rounded{ background:#3b82f6; }
.ig-analytics-kpi.green{ color:#10b981; }

.ig-analytics-kpi.green > .material-symbols-rounded{ background:#10b981; }
.ig-analytics-kpi.amber{ color:#f59e0b; }

.ig-analytics-kpi.amber > .material-symbols-rounded{ background:#f59e0b; }
.ig-analytics-report-grid{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(250px,.75fr); gap:10px; min-width:0; }
.ig-analytics-chart-card,.ig-analytics-snapshot-card{ min-width:0; }
.ig-analytics-legend{ display:flex !important; grid-auto-flow:column; align-items:center; gap:10px !important; }
.ig-analytics-legend span{ position:relative; padding-left:11px; font-size:8px !important; font-weight:800; }
.ig-analytics-legend span::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; border-radius:50%; transform:translateY(-50%); }
.ig-analytics-legend .views::before{ background:#8b5cf6; }
.ig-analytics-legend .reach::before{ background:#3b82f6; }
.ig-analytics-legend .interactions::before{ background:#10b981; }
.ig-analytics-chart{ display:grid; min-height:250px; padding:8px 10px 4px; }
.ig-analytics-chart > .ig-empty-state{ min-height:232px; }
.ig-analytics-svg-wrap{ width:100%; min-width:0; overflow:hidden; }
.ig-analytics-svg-wrap svg{ display:block; width:100%; min-width:540px; height:auto; overflow:visible; }
.ig-analytics-svg-wrap .grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 5; }
.ig-analytics-svg-wrap text{ fill:var(--muted); font-size:8px; font-family:Inter,sans-serif; }
.ig-analytics-svg-wrap .metric{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ig-analytics-svg-wrap .metric.views{ stroke:#8b5cf6; }
.ig-analytics-svg-wrap .metric.reach{ stroke:#3b82f6; }
.ig-analytics-svg-wrap .metric.interactions{ stroke:#10b981; }
.ig-analytics-snapshot{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; min-height:250px; padding:4px 12px 10px; }
.ig-analytics-snapshot > div{ display:grid; align-content:center; justify-items:start; gap:4px; min-width:0; padding:13px 9px; border-bottom:1px solid var(--border); }
.ig-analytics-snapshot > div:nth-last-child(-n+2){ border-bottom:0; }
.ig-analytics-snapshot .material-symbols-rounded{ color:var(--primary); font-size:20px; }
.ig-analytics-snapshot small{ color:var(--muted); font-size:8px; font-weight:800; }
.ig-analytics-snapshot strong{ color:var(--text); font-size:17px; }
.ig-analytics-content-card{ min-width:0; }
.ig-analytics-content-card .table-wrap{ min-height:150px; }
.ig-analytics-content-card .ig-empty-state{ min-height:150px; }
.ig-analytics-table{ min-width:900px; }
.ig-analytics-table tbody tr{ cursor:default; }
.ig-analytics-table td > strong,.ig-analytics-table td > small{ display:block; }
.ig-analytics-table td > small{ margin-top:3px; color:var(--muted); font-size:8px; }
.ig-analytics-content-cell{ display:flex; align-items:center; gap:9px; min-width:250px; max-width:360px; }
.ig-analytics-content-cell > div{ display:grid; gap:3px; min-width:0; }
.ig-analytics-content-cell strong{ overflow:hidden; color:var(--text); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.ig-analytics-content-cell small{ color:var(--muted); font-size:8px; }
.ig-analytics-thumb{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; overflow:hidden; border-radius:10px; background:var(--primary-soft); color:var(--muted); }
.ig-analytics-thumb img{ width:100%; height:100%; object-fit:cover; }
.ig-analytics-thumb .material-symbols-rounded{ font-size:18px; }
.ig-analytics-rate{ display:inline-flex; padding:5px 8px; border-radius:999px; background:rgba(16,185,129,.11); color:#059669; font-size:9px; font-weight:900; }
body.dark .ig-analytics-kpi{ border-color:rgba(148,163,184,.18); box-shadow:none; }
body.dark .ig-analytics-range{ background:rgba(255,255,255,.025); }
@media(max-width:1050px){
  .ig-analytics-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-analytics-report-grid{ grid-template-columns:1fr; }
  .ig-analytics-snapshot{ grid-template-columns:repeat(4,minmax(0,1fr)); min-height:0; }
  .ig-analytics-snapshot > div{ border-bottom:0; border-right:1px solid var(--border); }
  .ig-analytics-snapshot > div:last-child{ border-right:0; }
}
@media(max-width:760px){
  .ig-analytics-toolbar{ grid-template-columns:1fr; align-items:stretch; }
  .ig-analytics-legend{ grid-auto-flow:row; gap:4px !important; }
  .ig-analytics-chart{ overflow-x:auto; }
}
@media(max-width:560px){
  .ig-analytics-kpis{ grid-template-columns:1fr; }
  .ig-analytics-kpi{ padding:11px; }
  .ig-analytics-snapshot{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-analytics-snapshot > div{ border-right:0; border-bottom:1px solid var(--border); }
  .ig-analytics-snapshot > div:nth-last-child(-n+2){ border-bottom:0; }
}
/* Community Manager */
.cm-manager-module{ display:grid; gap:12px; }
.cm-manager-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.cm-manager-heading h3{ margin:3px 0 5px; color:var(--text); font-size:24px; letter-spacing:-.035em; }
.cm-manager-heading p{ max-width:720px; margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.cm-manager-heading > .sms-btn{ flex:0 0 auto; }
.cm-manager-kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.cm-manager-kpis article{ display:flex; align-items:flex-start; gap:9px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--panel); box-shadow:0 6px 18px rgba(15,23,42,.04); }
.cm-manager-kpis article > .material-symbols-rounded{ display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border-radius:10px; background:var(--primary-soft); color:var(--primary); font-size:18px; }
.cm-manager-kpis article:nth-child(2) > .material-symbols-rounded{ background:rgba(59,130,246,.12); color:#2563eb; }
.cm-manager-kpis article:nth-child(3) > .material-symbols-rounded{ background:rgba(139,92,246,.12); color:#7c3aed; }
.cm-manager-kpis article:nth-child(4) > .material-symbols-rounded{ background:rgba(245,158,11,.13); color:#d97706; }
.cm-manager-kpis article:nth-child(5) > .material-symbols-rounded{ background:rgba(168,85,247,.13); color:#9333ea; }

.cm-manager-kpis article.cm-manager-kpi-completed > .material-symbols-rounded{ background:#dcfce7; color:#16a34a; }

body.dark .cm-manager-kpis article.cm-manager-kpi-completed > .material-symbols-rounded{ background:rgba(34,197,94,.18); color:#86efac; }

.cm-manager-kpis article:nth-child(6) > .material-symbols-rounded{ background:rgba(239,68,68,.12); color:#dc2626; }
.cm-manager-kpis article > div{ display:grid; gap:1px; min-width:0; }
.cm-manager-kpis small{ color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.07em; white-space:nowrap; }
.cm-manager-kpis strong{ color:var(--text); font-size:21px; line-height:1.08; letter-spacing:-.03em; }
.cm-manager-kpis span:not(.material-symbols-rounded){ overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.cm-manager-toolbar{ display:grid; grid-template-columns:minmax(210px,1.8fr) repeat(4,minmax(120px,.65fr)); gap:8px; align-items:center; }
.cm-manager-toolbar select{ width:100%; min-width:0; height:35px; padding:0 28px 0 10px; border:1px solid var(--border); border-radius:10px; outline:0; background:var(--panel); color:var(--text); font:inherit; font-size:10px; }
.cm-manager-toolbar select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.cm-manager-table{ min-width:1460px; }
.cm-manager-table td{ vertical-align:middle; }
.cm-manager-table td>strong,.cm-manager-table td>small{ display:block; }
.cm-manager-table td>strong{ max-width:190px; overflow:hidden; color:var(--text); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.cm-manager-table td>small{ margin-top:3px; color:var(--muted); font-size:8px; line-height:1.25; }
.cm-manager-confirm,.cm-manager-waiting,.cm-manager-status,.cm-manager-deadline{ display:inline-flex; align-items:center; width:max-content; max-width:150px; padding:4px 7px; border-radius:999px; font-size:8px; font-weight:850; line-height:1.1; white-space:nowrap; }
.cm-manager-confirm.pending{ background:rgba(100,116,139,.12); color:#475569; }.cm-manager-confirm.accepted{ background:rgba(59,130,246,.12); color:#2563eb; }.cm-manager-confirm.clarification{ background:rgba(245,158,11,.13); color:#b45309; }
.cm-manager-status.status-assigned{ background:rgba(100,116,139,.12); color:#475569; }.cm-manager-status.status-acknowledged,.cm-manager-status.status-in_progress{ background:rgba(59,130,246,.12); color:#2563eb; }.cm-manager-status.status-clarification{ background:rgba(245,158,11,.14); color:#b45309; }.cm-manager-status.status-waiting_review{ background:rgba(139,92,246,.13); color:#7c3aed; }.cm-manager-status.status-revision{ background:rgba(249,115,22,.14); color:#c2410c; }.cm-manager-status.status-approved,.cm-manager-status.status-completed{ background:rgba(16,185,129,.13); color:#047857; }.cm-manager-status.status-scheduled{ background:rgba(6,182,212,.13); color:#0e7490; }.cm-manager-status.status-published{ background:rgba(5,150,105,.15); color:#047857; }.cm-manager-status.status-canceled{ background:#ffe4e6; color:#be123c; border:1px solid #fda4af; }.cm-manager-status.status-on_hold{ background:rgba(148,163,184,.16); color:#475569; }
.cm-manager-waiting.manager{ background:rgba(139,92,246,.1); color:#6d28d9; }.cm-manager-waiting.staff{ background:rgba(59,130,246,.1); color:#1d4ed8; }.cm-manager-waiting.schedule{ background:rgba(6,182,212,.12); color:#0e7490; }.cm-manager-waiting.none{ background:rgba(100,116,139,.1); color:#64748b; }
.cm-manager-deadline{ margin-bottom:3px; }.cm-manager-deadline.overdue,.cm-manager-deadline.today{ background:rgba(239,68,68,.12); color:#dc2626; }.cm-manager-deadline.urgent{ background:rgba(249,115,22,.13); color:#c2410c; }.cm-manager-deadline.near{ background:rgba(245,158,11,.14); color:#b45309; }.cm-manager-deadline.normal{ background:rgba(16,185,129,.1); color:#047857; }
.cm-manager-progress{ display:grid; grid-template-columns:minmax(72px,1fr) auto; align-items:center; gap:4px 6px; min-width:110px; }.cm-manager-progress>span{ display:block; height:6px; overflow:hidden; border-radius:999px; background:var(--primary-soft); }.cm-manager-progress i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#7c3aed); }.cm-manager-progress strong{ color:var(--text); font-size:9px; }.cm-manager-progress small{ grid-column:1/-1; margin:0 !important; font-size:7.5px !important; }
.cm-manager-next{ display:block; min-width:145px; max-width:190px; color:var(--muted); font-size:8.5px; line-height:1.35; }
.cm-manager-actions{ display:flex; align-items:center; gap:5px; }.cm-manager-actions button{ display:inline-flex; align-items:center; justify-content:center; min-height:29px; padding:0 7px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); cursor:pointer; font:inherit; font-size:8px; font-weight:800; }.cm-manager-actions button.primary{ border-color:var(--primary); background:var(--primary); color:#fff; }.cm-manager-actions .material-symbols-rounded{ font-size:16px; }
.cm-manager-bottom-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr); gap:10px; }.cm-manager-alerts{ display:grid; gap:5px; }.cm-manager-alert{ display:grid; grid-template-columns:20px minmax(0,1fr) 17px; align-items:center; gap:7px; width:100%; padding:8px 9px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); cursor:pointer; text-align:left; font:inherit; font-size:9px; }.cm-manager-alert:hover{ background:var(--primary-soft); }.cm-manager-alert .material-symbols-rounded{ font-size:16px; color:var(--primary); }.cm-manager-alert.warning .material-symbols-rounded{ color:#d97706; }.cm-manager-alert.danger .material-symbols-rounded{ color:#dc2626; }.cm-manager-alert.violet .material-symbols-rounded{ color:#7c3aed; }
.cm-manager-bottlenecks{ display:grid; gap:12px; padding:5px 0; }.cm-manager-bottlenecks>div{ display:grid; gap:5px; }.cm-manager-bottlenecks span{ display:flex; align-items:center; justify-content:space-between; gap:8px; }.cm-manager-bottlenecks strong{ color:var(--text); font-size:9px; }.cm-manager-bottlenecks small{ color:var(--muted); font-size:8px; }.cm-manager-bottlenecks i{ display:block; height:7px; overflow:hidden; border-radius:999px; background:var(--primary-soft); }.cm-manager-bottlenecks b{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#8b5cf6); }
.cm-manager-task-modal{ width:min(930px,calc(100vw - 26px)); max-height:calc(100vh - 26px); }.cm-manager-detail-modal{ width:min(1060px,calc(100vw - 26px)); max-height:calc(100vh - 26px); }.cm-manager-task-modal form,.cm-manager-detail-content{ overflow:auto; max-height:calc(100vh - 150px); }.cm-manager-form-sections{ display:grid; gap:13px; padding:0 2px 14px; }.cm-manager-form-sections section{ padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-soft,var(--panel)); }.cm-manager-form-sections h4,.cm-manager-detail-section h4{ margin:0 0 10px; color:var(--text); font-size:11px; }.cm-manager-form-sections textarea{ min-height:88px; }
.cm-manager-detail-content{ display:grid; gap:12px; padding:2px 2px 14px; }.cm-manager-detail-head{ display:flex; align-items:flex-start; gap:9px; padding:2px 1px; }.cm-manager-detail-head>div:first-child{ min-width:0; flex:1; }.cm-manager-detail-head h4{ margin:0; overflow:hidden; color:var(--text); font-size:17px; text-overflow:ellipsis; white-space:nowrap; }.cm-manager-detail-head p{ margin:4px 0 0; color:var(--muted); font-size:9px; }.cm-manager-detail-tools{ display:flex; gap:5px; }.cm-manager-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.cm-manager-detail-section{ min-width:0; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.cm-manager-detail-section.cm-manager-brief{ grid-column:1/-1; }.cm-manager-detail-section dl{ display:grid; grid-template-columns:105px minmax(0,1fr); gap:7px 10px; margin:0; }.cm-manager-detail-section dt{ color:var(--muted); font-size:8.5px; }.cm-manager-detail-section dd{ margin:0; color:var(--text); font-size:9px; font-weight:700; }.cm-manager-brief p{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; margin:7px 0 0; color:var(--text); font-size:9px; line-height:1.45; white-space:pre-wrap; }.cm-manager-brief p strong{ color:var(--muted); font-size:8.5px; }.cm-manager-brief a{ color:var(--primary); word-break:break-all; }.cm-manager-status-info{ display:grid; gap:7px; margin-top:13px; }.cm-manager-status-info strong{ color:var(--text); font-size:10px; }.cm-manager-status-info span:last-child{ color:var(--muted); font-size:9px; }
.cm-manager-action-panel{ grid-column:1/-1; }.cm-manager-action-row,.cm-manager-review-actions{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; }.cm-manager-action-row>.sms-field,.cm-manager-review-actions>.sms-field{ display:grid; gap:6px; flex:1 1 230px; }.cm-manager-action-row textarea,.cm-manager-review-actions textarea,.cm-manager-comment-form textarea,.cm-manager-progress-editor textarea{ min-height:66px; }.cm-manager-progress-editor{ display:grid; gap:9px; }.cm-manager-progress-editor label{ display:grid; gap:6px; }.cm-manager-progress-editor label span{ display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }.cm-manager-progress-editor input[type=range]{ accent-color:var(--primary); }.cm-manager-progress-editor>div{ display:flex; flex-wrap:wrap; gap:7px; }.cm-manager-inline-form{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(170px,.7fr) auto; align-items:end; gap:8px; }.cm-manager-performance{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.cm-manager-performance label{ display:grid; gap:4px; }.cm-manager-performance span{ color:var(--muted); font-size:7.5px; font-weight:850; }.cm-manager-performance input{ min-width:0; }
.cm-manager-detail-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.cm-manager-comments,.cm-manager-revisions,.cm-manager-logs{ display:grid; gap:7px; max-height:270px; overflow:auto; }.cm-manager-comments article,.cm-manager-revisions article{ padding:8px; border:1px solid var(--border); border-radius:9px; background:var(--panel-soft,var(--panel)); }.cm-manager-comments article.mine{ border-color:rgba(var(--primary-rgb),.28); background:var(--primary-soft); }.cm-manager-comments strong,.cm-manager-revisions strong{ display:block; color:var(--text); font-size:9px; }.cm-manager-comments small,.cm-manager-revisions small{ display:block; margin-top:3px; color:var(--muted); font-size:7.5px; }.cm-manager-comments p,.cm-manager-revisions p{ margin:6px 0 0; color:var(--text); font-size:9px; line-height:1.45; white-space:pre-wrap; }.cm-manager-revisions em{ display:block; margin-top:7px; color:#047857; font-size:8px; font-style:normal; }.cm-manager-comment-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:7px; margin-top:8px; }.cm-manager-log-title{ margin-top:14px !important; }.cm-manager-logs article{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:7px; padding-bottom:7px; border-bottom:1px solid var(--border); }.cm-manager-logs time{ color:var(--muted); font-size:7.5px; }.cm-manager-logs span{ color:var(--text); font-size:8.5px; line-height:1.4; }.cm-manager-empty-text{ margin:0; color:var(--muted); font-size:9px; }
body.dark .cm-manager-kpis article,body.dark .cm-manager-detail-section,body.dark .cm-manager-form-sections section{ box-shadow:none; border-color:rgba(148,163,184,.18); }
@media(max-width:1250px){.cm-manager-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }.cm-manager-toolbar{ grid-template-columns:repeat(3,minmax(0,1fr)); }.cm-manager-toolbar .sms-search{ grid-column:span 2; }}
@media(max-width:820px){.cm-manager-heading{ display:grid; }.cm-manager-heading>.sms-btn{ justify-self:start; }.cm-manager-bottom-grid,.cm-manager-detail-split{ grid-template-columns:1fr; }.cm-manager-detail-grid{ grid-template-columns:1fr; }.cm-manager-detail-section.cm-manager-brief{ grid-column:auto; }.cm-manager-performance{ grid-template-columns:repeat(3,minmax(0,1fr)); }.cm-manager-inline-form{ grid-template-columns:1fr; }.cm-manager-detail-head{ flex-wrap:wrap; }.cm-manager-detail-tools{ width:100%; }.cm-manager-toolbar{ grid-template-columns:repeat(2,minmax(0,1fr)); }.cm-manager-toolbar .sms-search{ grid-column:1/-1; }}
@media(max-width:560px){.cm-manager-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }.cm-manager-kpis article{ padding:10px; }.cm-manager-kpis strong{ font-size:18px; }.cm-manager-toolbar{ grid-template-columns:1fr; }.cm-manager-toolbar .sms-search{ grid-column:auto; }.cm-manager-performance{ grid-template-columns:repeat(2,minmax(0,1fr)); }.cm-manager-detail-section dl,.cm-manager-brief p{ grid-template-columns:1fr; gap:3px; }.cm-manager-comment-form{ grid-template-columns:1fr; }.cm-manager-logs article{ grid-template-columns:1fr; gap:3px; }}
/* Refined account-menu text and thesis action layout. */
.account-menu button{font-size:10.5px;font-weight:400;}
@media (max-width:760px){
  #page-skripsi .skripsi-panel-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;flex-wrap:nowrap;}
  #page-skripsi .skripsi-panel-actions .btn-system,
  #page-skripsi .skripsi-panel-actions .btn-primary{width:100%;min-width:0;justify-content:center;white-space:nowrap;padding-inline:10px;}
}
/* Compact topbar copy and regular-weight activity data. */
.notification-title{font-size:12px;}
.notification-sub{font-size:10px;font-weight:500;}
.notification-read-btn,.notification-clear-btn{font-size:10px;font-weight:700;}
.notification-item-title{font-size:11.5px;}
.notification-context{font-size:10px;}
.notification-empty{font-size:11px;font-weight:500;}
.notification-badge{font-size:9px;}
#page-activity .act-title-cell{font-weight:400;}
/* Dashboard overview akademik */
.dashboard-card.span-3{grid-column:span 3;}
.dashboard-overview-metric{display:grid;align-content:start;gap:12px;min-height:148px;}
.dashboard-overview-metric-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);font-size:12px;font-weight:800;}
.dashboard-overview-metric-head .material-symbols-rounded{color:var(--primary);font-size:21px;}
.dashboard-overview-value{display:block;color:var(--text);font-size:28px;line-height:1;font-weight:850;letter-spacing:-.035em;}
.dashboard-overview-comparison{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:10px;font-weight:600;line-height:1.35;}
.dashboard-overview-comparison>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-overview-chip{display:inline-flex;align-items:center;flex:0 0 auto;min-height:23px;max-width:155px;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:750;white-space:nowrap;}
.dashboard-overview-chip.is-positive{background:rgba(16,185,129,.13);color:#047857;}
.dashboard-overview-chip.is-negative{background:rgba(244,63,94,.12);color:#be123c;}
.dashboard-overview-chip.is-neutral{background:var(--panel-soft);color:var(--muted);}
.dashboard-overview-chart .chart-card-head{position:relative;}
.dashboard-overview-menu-btn{margin-left:auto;}
.dashboard-overview-menu{position:absolute;z-index:30;top:calc(100% + 7px);right:0;width:min(260px,calc(100vw - 40px));padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 16px 34px rgba(15,23,42,.18);}
.dashboard-overview-menu[hidden]{display:none!important;}
.dashboard-overview-menu-label{margin-bottom:7px;color:var(--text);font-size:10px;font-weight:800;}
.dashboard-overview-menu .select{width:100%;min-height:34px;font-size:11px;}
.dashboard-overview-range-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;color:var(--muted);font-size:10px;font-weight:700;}
.dashboard-overview-chart .chart-wrap.compact{height:205px;min-height:185px;}
.dashboard-overview-selectivity{display:grid;align-content:start;gap:12px;min-height:300px;}
.dashboard-overview-gauge{--dashboard-gauge-progress:4%;display:grid;place-items:center;width:176px;aspect-ratio:1;margin:0 auto;border-radius:50%;background:conic-gradient(var(--primary) var(--dashboard-gauge-progress),var(--border) 0);}
.dashboard-overview-gauge>div{display:grid;place-items:center;align-content:center;gap:5px;width:142px;aspect-ratio:1;padding:16px;border-radius:50%;background:var(--panel);text-align:center;}
.dashboard-overview-gauge strong{color:var(--text);font-size:25px;line-height:1;font-weight:850;letter-spacing:-.035em;}
.dashboard-overview-gauge span{color:var(--muted);font-size:9px;line-height:1.35;font-weight:650;}
.dashboard-overview-comparison-center{justify-content:center;flex-wrap:wrap;text-align:center;}
.dashboard-overview-thesis{display:flex;flex-direction:column;gap:0;min-height:300px;}
.dashboard-overview-description{margin:2px 0 12px;color:var(--muted);font-size:10px;line-height:1.45;}
.dashboard-overview-thesis .dashboard-table-wrap{flex:1 1 auto;min-height:0;}
.dashboard-overview-thesis .dashboard-table-scroll{max-height:295px;overflow:auto;}
.dashboard-overview-thesis table{min-width:560px;}
body.dark .dashboard-overview-menu{box-shadow:0 18px 38px rgba(0,0,0,.44);}
body.dark .dashboard-overview-chip.is-positive{background:rgba(16,185,129,.17);color:#6ee7b7;}
body.dark .dashboard-overview-chip.is-negative{background:rgba(244,63,94,.16);color:#fda4af;}
@media(max-width:1100px){.dashboard-card.span-3{grid-column:span 6;}}
@media(max-width:640px){.dashboard-card.span-3{grid-column:1/-1;}.dashboard-overview-metric{min-height:132px;}.dashboard-overview-chart .chart-wrap.compact{height:190px;min-height:175px;}.dashboard-overview-gauge{width:158px;}.dashboard-overview-gauge>div{width:128px;}.dashboard-overview-comparison{align-items:flex-start;flex-wrap:wrap;}.dashboard-overview-comparison>span:last-child{white-space:normal;}.dashboard-overview-menu{right:-2px;}}
/* Dashboard masonry: card pendek mengisi ruang vertikal yang tersedia. */
.dashboard-grid.dashboard-masonry{grid-auto-rows:8px;grid-auto-flow:row dense;align-items:start;}
.dashboard-grid.dashboard-masonry>.dashboard-card{grid-row-end:span var(--dashboard-grid-row-span,1);align-self:start;}
.dashboard-grid.dashboard-masonry>.dashboard-card[data-dashboard-user-height]{height:var(--dashboard-card-height)!important;min-height:var(--dashboard-card-height)!important;}
@media(max-width:1100px){
  .dashboard-grid.dashboard-masonry{display:grid;grid-auto-rows:auto;grid-auto-flow:row;}
  .dashboard-grid.dashboard-masonry>.dashboard-card{grid-row-end:auto!important;}
}
/* Interaksi langsung pengaturan Dashboard untuk Admin. */
.dashboard-direct-editable{cursor:grab;}
.dashboard-direct-editable.is-dashboard-dragging{cursor:grabbing;}
.dashboard-edge-resize{position:absolute;z-index:20;display:block;background:transparent;touch-action:none;}
.dashboard-edge-resize[data-dashboard-resize-edge="top"]{top:-5px;left:12px;right:12px;height:11px;cursor:ns-resize;}
.dashboard-edge-resize[data-dashboard-resize-edge="right"]{top:12px;right:-5px;bottom:12px;width:11px;cursor:ew-resize;}
.dashboard-edge-resize[data-dashboard-resize-edge="bottom"]{right:12px;bottom:-5px;left:12px;height:11px;cursor:ns-resize;}
.dashboard-edge-resize[data-dashboard-resize-edge="left"]{top:12px;bottom:12px;left:-5px;width:11px;cursor:ew-resize;}
.dashboard-card[data-dashboard-static="shortcuts"]{container-type:inline-size;}
@container (max-width:540px){
  .shortcuts-grid{grid-auto-columns:76px;gap:8px;padding:0;scroll-snap-type:x mandatory;}
  .dashboard-shortcut-card{min-height:76px;height:76px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;}
  .dashboard-shortcut-media{height:100%;padding:7px;border-bottom:0;}
  .dashboard-shortcut-media img{object-fit:contain;}
  .dashboard-shortcut-body{display:none;}
  .dashboard-shortcut-fallback small{display:none;}
}
@container (max-width:340px){
  .shortcuts-grid{grid-auto-columns:58px;gap:6px;}
  .dashboard-shortcut-card{min-height:58px;height:58px;border-radius:10px;}
  .dashboard-shortcut-media{padding:5px;}
}
/* Card hanya dapat dipindahkan dari kepala atau strip bagian atasnya. */
.dashboard-direct-editable{cursor:default;}
.dashboard-direct-editable>.chart-card-head,
.dashboard-direct-editable>.dashboard-overview-metric-head,
.dashboard-direct-editable>.card-head{cursor:grab;}
.dashboard-direct-editable.is-dashboard-dragging>.chart-card-head,
.dashboard-direct-editable.is-dashboard-dragging>.dashboard-overview-metric-head,
.dashboard-direct-editable.is-dashboard-dragging>.card-head{cursor:grabbing;}
/* Grafik publikasi bergaya ringkas tanpa sumbu. */
.dashboard-publication-card .chart-wrap.compact{height:232px;min-height:210px;}
/* Penyelarasan kartu ringkasan Dashboard. */
.dashboard-grid{gap:10px;}
.dashboard-overview-metric{gap:10px;min-height:150px;}
.dashboard-overview-metric-head{font-size:13px;font-weight:750;}
.dashboard-overview-value-row{display:flex;align-items:center;gap:10px;min-width:0;}
.dashboard-overview-value{font-size:34px;font-weight:780;}
.dashboard-overview-value-row .dashboard-overview-chip{min-height:25px;padding:4px 9px;font-size:10px;}
.dashboard-overview-metric .dashboard-overview-comparison{min-height:16px;font-size:10.5px;font-weight:500;}
.dashboard-custom-chart-inner{display:grid;gap:9px;margin-top:3px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--panel-soft,var(--panel));}
.dashboard-custom-chart-inner .chart-wrap.compact{height:235px;min-height:210px;}
.dashboard-overview-thesis th:nth-child(1),.dashboard-overview-thesis th:nth-child(3),.dashboard-overview-thesis th:nth-child(4),.dashboard-overview-thesis th:nth-child(5),.dashboard-overview-thesis td:nth-child(1),.dashboard-overview-thesis td:nth-child(3),.dashboard-overview-thesis td:nth-child(4),.dashboard-overview-thesis td:nth-child(5){text-align:center;}
.dashboard-mini-calendar-day .dashboard-mini-calendar-number{font-weight:400;}
body.dark .dashboard-custom-chart-inner{background:rgba(15,23,42,.34);}
@media(max-width:640px){.dashboard-overview-value{font-size:30px;}.dashboard-overview-value-row{gap:8px;}.dashboard-overview-value-row .dashboard-overview-chip{font-size:9.5px;padding-inline:8px;}.dashboard-custom-chart-inner{padding:11px;}.dashboard-custom-chart-inner .chart-wrap.compact{height:205px;min-height:185px;}}
/* Shortcut ringkas tetap dapat dibuka melalui gambar. */
@container (max-width:540px){.dashboard-shortcut-media{cursor:pointer;}}

/* Card Articles dan pemulihan Dashboard. */
.dashboard-publication-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;height:228px;padding:10px 6px 0;}
.dashboard-publication-bar{display:grid;grid-template-rows:22px minmax(12px,1fr) 24px;align-items:end;gap:5px;flex:1 1 0;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--muted);font:600 10px Inter,Arial,sans-serif;cursor:pointer;}
.dashboard-publication-bar b{align-self:end;visibility:hidden;overflow:hidden;color:var(--primary);font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-publication-bar i{display:block;align-self:end;width:min(100%,34px);height:var(--dashboard-publication-height,10%);margin:auto;border-radius:10px;background:var(--panel-soft);transition:height .18s ease,background .18s ease,box-shadow .18s ease;}
.dashboard-publication-bar span{align-self:start;overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-publication-bar:hover b,.dashboard-publication-bar:focus-visible b{visibility:visible;}
.dashboard-publication-bar:hover i,.dashboard-publication-bar:focus-visible i{background:var(--primary);box-shadow:0 7px 16px rgba(var(--primary-rgb),.24);}
.dashboard-publication-bar:hover span,.dashboard-publication-bar:focus-visible span{color:var(--primary);}
.dashboard-publication-bar:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px;}
@media(max-width:640px){.dashboard-publication-bars{height:205px;gap:6px;padding-inline:2px;}.dashboard-publication-bar i{border-radius:8px;}.dashboard-publication-bar span{font-size:9px;}}/* Batang Articles dapat dijelajahi dengan cursor. */

.dashboard-publication-card canvas{cursor:pointer;}

/* Kartu ringkasan membuka sumber datanya, tanpa mengganggu mode atur Dashboard Admin. */

.dashboard-overview-metric[data-dashboard-overview-link]:not(.dashboard-direct-editable){cursor:pointer;}

.dashboard-overview-metric[data-dashboard-overview-link]:not(.dashboard-direct-editable):focus-visible{outline:2px solid var(--primary);outline-offset:3px;}


/* Tata letak Dashboard yang dapat disusun bebas. */
.dashboard-grid.dashboard-masonry{grid-auto-flow:row dense;}
.dashboard-grid.dashboard-masonry>.dashboard-card{min-width:0;}
.dashboard-direct-editable>.chart-card-head,
.dashboard-direct-editable>.dashboard-overview-metric-head,
.dashboard-direct-editable>.card-head{user-select:none;touch-action:none;}
/* Ringkasan mengikuti komposisi angka dan perbandingan yang ringkas. */
.dashboard-overview-metric{padding:18px;gap:11px;}
.dashboard-overview-metric-head{font-size:14px;font-weight:760;line-height:1.2;}
.dashboard-overview-value{font-size:35px;line-height:1;letter-spacing:-.045em;}
.dashboard-overview-value-row{gap:9px;}
.dashboard-overview-metric .dashboard-overview-comparison{font-size:10.5px;line-height:1.35;}
/* Articles bergaya batang vertikal tanpa status aktif sebelum di-hover. */
.dashboard-publication-card .chart-card-title .material-symbols-rounded{display:none;}
.dashboard-publication-card .chart-card-title{font-size:14px;}
.dashboard-publication-bars{height:232px;padding:8px 8px 2px;gap:clamp(8px,1.5vw,16px);}
.dashboard-publication-bar{grid-template-rows:22px minmax(16px,1fr) 23px;gap:5px;font-size:10.5px;}
.dashboard-publication-bar i{width:min(100%,38px);border-radius:11px;background:rgba(148,163,184,.16);}
.dashboard-publication-bar:hover i,.dashboard-publication-bar:focus-visible i{background:var(--primary);}
/* Kolom nomor dibuat sempit agar ruang nama dosen lebih leluasa. */
    .dashboard-overview-thesis table{table-layout:fixed;}
    .dashboard-overview-thesis th:nth-child(1),
    .dashboard-overview-thesis td:nth-child(1){width:42px;min-width:42px;max-width:42px;padding-inline:5px;}
    .dashboard-overview-thesis th:nth-child(3),
    .dashboard-overview-thesis td:nth-child(3){width:95px;min-width:95px;}
    .dashboard-overview-thesis th:nth-child(4),
    .dashboard-overview-thesis td:nth-child(4),
    .dashboard-overview-thesis th:nth-child(5),
    .dashboard-overview-thesis td:nth-child(5){width:90px;min-width:90px;}

    /* Ukuran default tabel Community Services mengikuti makna kolomnya.
       Data-column tetap melekat saat pengguna mengubah urutan kolom. */
    #page-pengabdian .research-table th[data-column="Nama"],
    #page-pengabdian .research-table td[data-column="Nama"]{width:315px;min-width:315px;}
    #page-pengabdian .research-table th[data-column="Peran"],
    #page-pengabdian .research-table td[data-column="Peran"]{width:145px;min-width:145px;}
    #page-pengabdian .research-table th[data-column^="Nomor SK"],
    #page-pengabdian .research-table td[data-column^="Nomor SK"]{width:215px;min-width:215px;}
    #page-pengabdian .research-table th[data-column="Status"],
    #page-pengabdian .research-table td[data-column="Status"]{width:110px;min-width:110px;padding-left:8px;padding-right:8px;}
    #page-pengabdian .research-table table[data-service-tab="jabatan_struktural"] th[data-column="Status"],
    #page-pengabdian .research-table table[data-service-tab="jabatan_struktural"] td[data-column="Status"]{width:135px;min-width:135px;}
@media(max-width:640px){
  .dashboard-overview-metric{padding:16px;}
  .dashboard-overview-value{font-size:31px;}
  .dashboard-publication-bars{height:205px;gap:6px;padding-inline:2px;}
  .dashboard-publication-bar i{width:min(100%,30px);}
}
/* Card dapat dijatuhkan pula pada ruang kosong di sisi kiri atau kanan card lain. */
.dashboard-grid.dashboard-masonry{grid-auto-flow:row dense;}
/* Card aktivitas Articles: batang selalu bertumpu dari bagian bawah. */
.dashboard-publication-card{display:flex;flex-direction:column;}
.dashboard-publication-card .dashboard-publication-bars{flex:1 1 auto;min-height:206px;height:auto;align-items:stretch;}
.dashboard-publication-card .dashboard-publication-bar{align-self:stretch;height:100%;}
@media(max-width:640px){.dashboard-publication-card .dashboard-publication-bars{min-height:185px;}}
/* Satu ritme ruang: padding content, topbar, dan semua sisi grid Dashboard. */
#page-dashboard{--dashboard-space:14px;}
#page-dashboard .dashboard-grid{gap:var(--dashboard-space);}
@media(max-width:760px){#page-dashboard{--dashboard-space:10px;}}
/* Jarak rapat antar-card Dashboard. */
#page-dashboard{--dashboard-space:5px;}
@media(max-width:760px){#page-dashboard{--dashboard-space:5px;}}
/* Articles bertumpu di bagian bawah card saat tinggi card diperbesar. */
.dashboard-publication-card .dashboard-publication-bars{flex:0 1 232px;height:232px;margin-top:auto;align-items:flex-end;}
@media(max-width:640px){.dashboard-publication-card .dashboard-publication-bars{flex-basis:205px;height:205px;}}
/* Jarak Dashboard yang seimbang. */
#page-dashboard{--dashboard-space:10px;}
@media(max-width:760px){#page-dashboard{--dashboard-space:10px;}}
/* Bentuk Articles: semua batang tumbuh dari baseline yang sama di bagian bawah. */
.dashboard-publication-card{min-height:274px;}
.dashboard-publication-card .dashboard-publication-bars{flex:1 1 auto;height:auto;min-height:208px;margin-top:auto;padding:12px 10px 4px;align-items:stretch;}
.dashboard-publication-card .dashboard-publication-bar{height:100%;align-self:stretch;}
.dashboard-publication-card .dashboard-publication-bar i{align-self:end;background:#edf0f4;box-shadow:none;}
.dashboard-publication-card .dashboard-publication-bar:not(:hover):not(:focus-visible) i{background:#edf0f4!important;box-shadow:none!important;}
.dashboard-publication-card .dashboard-publication-bar:not(:hover):not(:focus-visible) b{visibility:hidden;}
.dashboard-publication-card .dashboard-publication-bar:not(:hover):not(:focus-visible) span{color:var(--muted);}
@media(max-width:640px){.dashboard-publication-card{min-height:245px;}.dashboard-publication-card .dashboard-publication-bars{min-height:180px;padding-inline:4px;}}
/* Articles mengikuti pola batang vertikal: nilai tepat di atas batang aktif. */
.dashboard-publication-card .chart-card-title{font-size:16px;font-weight:780;}
.dashboard-publication-card .dashboard-publication-bars{display:flex;align-items:stretch;justify-content:space-between;gap:clamp(9px,1.6vw,16px);padding:12px 10px 4px;}
.dashboard-publication-card .dashboard-publication-bar{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 23px;align-items:stretch;justify-items:center;gap:5px;min-width:0;height:100%;padding:0;color:var(--muted);}
.dashboard-publication-card .dashboard-publication-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-height:0;}
.dashboard-publication-card .dashboard-publication-stage i{display:block;flex:0 0 auto;width:min(100%,38px);height:var(--dashboard-publication-height);margin:0;border-radius:11px;background:#edf0f4;box-shadow:none;transition:background .18s ease,box-shadow .18s ease;}
.dashboard-publication-card .dashboard-publication-stage b{position:absolute;z-index:1;bottom:calc(var(--dashboard-publication-height) + 7px);visibility:hidden;margin:0;color:var(--text);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;}
.dashboard-publication-card .dashboard-publication-label{align-self:start;width:100%;overflow:hidden;color:var(--muted);font-size:10.5px;font-weight:600;line-height:1.25;text-align:center;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-publication-card .dashboard-publication-bar:hover .dashboard-publication-stage i{background:var(--primary)!important;box-shadow:0 7px 16px rgba(var(--primary-rgb),.24)!important;}
.dashboard-publication-card .dashboard-publication-bar:hover .dashboard-publication-stage b{visibility:visible;}
.dashboard-publication-card .dashboard-publication-bar:hover .dashboard-publication-label{color:var(--primary);font-weight:750;}
.dashboard-publication-card .dashboard-publication-bar:focus-visible .dashboard-publication-stage i{background:#edf0f4!important;box-shadow:none!important;}
.dashboard-publication-card .dashboard-publication-bar:focus-visible .dashboard-publication-stage b{visibility:hidden;}
@media(max-width:640px){.dashboard-publication-card .dashboard-publication-bars{gap:6px;padding-inline:3px;}.dashboard-publication-card .dashboard-publication-stage i{width:min(100%,30px);border-radius:9px;}.dashboard-publication-card .dashboard-publication-label{font-size:9px;}}
/* Nilai batang tinggi diposisikan di tengah agar tetap terbaca di dalam card. */
.dashboard-publication-card .dashboard-publication-bar.is-tall .dashboard-publication-stage b{bottom:var(--dashboard-publication-value-position);color:#fff;text-shadow:0 1px 2px rgba(15,23,42,.18);}
/* Gambar Shortcut merupakan tautan langsung ke halaman yang disematkan. */
.dashboard-shortcut-media{cursor:pointer;text-decoration:none;}
.dashboard-shortcut-media:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* Tinggi grafik Articles tetap; saat card diperpanjang, ruang tambahan berada di atas grafik. */
.dashboard-publication-card .dashboard-publication-bars{flex:0 1 232px;height:232px;min-height:206px;margin-top:auto;align-items:stretch;box-sizing:border-box;}
@media(max-width:640px){.dashboard-publication-card .dashboard-publication-bars{flex-basis:205px;height:205px;min-height:180px;}}
/* Nilai Articles selalu tampil tepat di atas batang yang sedang disorot. */
.dashboard-publication-card .dashboard-publication-bar.is-tall .dashboard-publication-stage b{bottom:calc(var(--dashboard-publication-height) + 7px);color:var(--text);text-shadow:none;}
/* Form Student Achievements: peserta perseorangan atau kelompok dari Student Data. */
#sysFormGrid.sys-achievement-form{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start;}
#sysFormGrid.sys-achievement-form .sys-achievement-name{grid-column:span 4;}
#sysFormGrid.sys-achievement-form .sys-achievement-participant-type{grid-column:span 2;}
#sysFormGrid.sys-achievement-form .sys-achievement-participants{grid-column:1/-1;}
#sysFormGrid.sys-achievement-form .sys-achievement-core-field{grid-column:span 2;}
#sysFormGrid.sys-achievement-form .sys-achievement-file-field{grid-column:span 3;}
.sys-achievement-radio-group{display:flex;align-items:center;gap:8px;min-height:38px;flex-wrap:wrap;}
.sys-achievement-radio{display:inline-flex!important;align-items:center;gap:7px;margin:0!important;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel-soft,var(--panel));color:var(--text)!important;font-size:12px!important;font-weight:600!important;cursor:pointer;line-height:1.15;}
.sys-achievement-radio input{width:15px;height:15px;margin:0;accent-color:var(--primary);}
.sys-achievement-radio:has(input:checked){border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.1);color:var(--primary)!important;}
.sys-achievement-participant-picker{position:relative;}
.sys-achievement-participant-picker textarea.input{min-height:96px;}
.sys-achievement-suggestions{position:absolute;z-index:70;top:calc(100% + 6px);right:0;left:0;display:grid;gap:2px;max-height:220px;overflow:auto;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 16px 32px rgba(15,23,42,.18);}
.sys-achievement-suggestions[hidden]{display:none!important;}
.sys-achievement-suggestion{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:var(--text);font:600 12px/1.25 Inter,Arial,sans-serif;text-align:left;cursor:pointer;}
.sys-achievement-suggestion:hover,.sys-achievement-suggestion:focus-visible{background:rgba(var(--primary-rgb),.1);color:var(--primary);outline:none;}
.sys-achievement-suggestion .material-symbols-rounded{font-size:17px;}
body.dark .sys-achievement-radio{border-color:rgba(148,163,184,.25);background:rgba(15,23,42,.32);}
body.dark .sys-achievement-suggestions{background:#111827;border-color:rgba(148,163,184,.24);box-shadow:0 16px 32px rgba(0,0,0,.42);}
@media(max-width:700px){#sysFormGrid.sys-achievement-form{grid-template-columns:1fr;}#sysFormGrid.sys-achievement-form .sys-achievement-name,#sysFormGrid.sys-achievement-form .sys-achievement-participant-type,#sysFormGrid.sys-achievement-form .sys-achievement-core-field,#sysFormGrid.sys-achievement-form .sys-achievement-file-field{grid-column:1/-1;}.sys-achievement-radio-group{min-height:auto;}.sys-achievement-radio{flex:1 1 140px;justify-content:center;}}
/* Interest: kartu ringkasan jalur dan tabel terpusat. */
.interest-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px;}
.interest-summary-card{display:grid;align-content:start;gap:10px;min-width:0;min-height:150px;padding:18px;}
.interest-summary-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text);font-size:14px;font-weight:760;line-height:1.2;}
.interest-summary-head .material-symbols-rounded{color:var(--primary);font-size:22px;}
.interest-summary-value-row{display:flex;align-items:center;gap:9px;min-width:0;}
.interest-summary-value-row strong{color:var(--text);font-size:35px;line-height:1;font-weight:780;letter-spacing:-.045em;}
.interest-summary-value-row .dashboard-overview-chip{font-size:10px;}
.interest-summary-meta{min-height:16px;color:var(--muted);font-size:10.5px;line-height:1.35;font-weight:500;}
.interest-summary-years{color:var(--muted);font-size:9px;line-height:1.3;}
.dashboard-overview-chip.is-warning{background:rgba(245,158,11,.15);color:#b45309;}
body.dark .dashboard-overview-chip.is-warning{background:rgba(245,158,11,.2);color:#fbbf24;}
.system-interest-table th,.system-interest-table td{text-align:center!important;}
.system-interest-table th.sys-col-check,.system-interest-table td.sys-col-check,.system-interest-table th.sys-col-aksi,.system-interest-table td.sys-col-aksi{text-align:center!important;}
@media(max-width:900px){.interest-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.interest-summary-grid{grid-template-columns:1fr;gap:8px;}.interest-summary-card{min-height:132px;padding:16px;}.interest-summary-value-row strong{font-size:31px;}}.dashboard-source-chip{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-inline:auto;width:max-content;max-width:calc(100% - 8px);padding:4px 9px;border-radius:999px;color:var(--muted);font-size:9px;font-weight:650;text-decoration:none;transition:background .15s ease,border-color .15s ease;}
.dashboard-source-chip:hover,.dashboard-source-chip:focus-visible{border-color:var(--primary);background:var(--primary-soft);outline:0;}/* Interest grid hardening: prevent page-level card rules from collapsing the four cards. */
#page-system-data #interestSummaryCards.interest-summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;align-items:stretch;}
#page-system-data #interestSummaryCards .interest-summary-card{width:auto;min-width:0;}
@media(max-width:900px){#page-system-data #interestSummaryCards.interest-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:640px){#page-system-data #interestSummaryCards.interest-summary-grid{grid-template-columns:1fr!important;gap:8px!important;}}
body.dark .cm-manager-status.status-canceled{background:rgba(251,113,133,.18);color:#fda4af;border-color:rgba(251,113,133,.42);}.cm-manager-action-hint{display:block;margin:5px 0 0;color:var(--muted);font-size:8.5px;line-height:1.4;}.ig-carousel-picker-panel[hidden]{display:none!important;}