:root{
      --bg:#0f1115;
      --panel:#171a21;
      --panel-2:#1f232c;
      --text:#f4f6f8;
      --muted:#9ea7b3;
      --accent:#ff8a00;
      --accent-2:#ffb347;
      --line:#2d333d;
      --success:#2ecc71;
      --danger:#ff5d5d;
      --shadow:0 18px 50px rgba(0,0,0,.28);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,Segoe UI,Arial,sans-serif;
      background:linear-gradient(135deg,#0b0d11,#151922 60%,#101217);
      color:var(--text);
      min-height:100vh;
    }
    .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
    aside{
      background:rgba(18,21,27,.96);
      border-right:1px solid var(--line);
      padding:24px 18px;
      position:sticky;top:0;height:100vh;
    }
    .brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}
    .logo{
      width:48px;height:48px;border-radius:14px;
      background:linear-gradient(135deg,var(--accent),#ff5e00);
      display:grid;place-items:center;font-weight:900;color:#111;font-size:20px;
      box-shadow:var(--shadow);
    }
    .brand h1{font-size:16px;margin:0}
    .brand span{font-size:12px;color:var(--muted)}
    nav button{
      width:100%;padding:13px 14px;margin:5px 0;border:none;border-radius:12px;
      background:transparent;color:var(--muted);text-align:left;cursor:pointer;font-size:14px;
    }
    nav button.active,nav button:hover{background:var(--panel-2);color:#fff}
    .aside-note{
      margin-top:28px;padding:14px;border:1px solid var(--line);border-radius:14px;
      color:var(--muted);font-size:12px;line-height:1.5;
    }
    main{padding:28px}
    .topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
    .title h2{margin:0 0 5px;font-size:26px}
    .title p{margin:0;color:var(--muted);font-size:14px}
    .user{
      display:flex;gap:10px;align-items:center;background:var(--panel);
      border:1px solid var(--line);padding:8px 12px;border-radius:14px;
    }
    .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#111;font-weight:800}
    .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
    .card{
      background:linear-gradient(180deg,rgba(31,35,44,.95),rgba(23,26,33,.95));
      border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);
    }
    .card span{color:var(--muted);font-size:13px}
    .card strong{display:block;font-size:28px;margin-top:10px}
    .toolbar{
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;
      background:var(--panel);border:1px solid var(--line);padding:14px;border-radius:16px 16px 0 0;
    }
    input,select,textarea{
      background:#11141a;border:1px solid var(--line);color:#fff;border-radius:10px;
      padding:10px 12px;outline:none;
    }
    input:focus,select:focus,textarea:focus{border-color:var(--accent)}
    .grow{flex:1;min-width:220px}
    .btn{
      border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;
      background:var(--panel-2);color:#fff;border:1px solid var(--line);
    }
    .btn.primary{background:linear-gradient(135deg,var(--accent),#ff6a00);color:#111;border:none}
    .btn.danger{background:rgba(255,93,93,.12);color:#ff8b8b;border-color:rgba(255,93,93,.3)}
    .table-wrap{
      overflow:auto;background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 16px 16px;
    }
    table{width:100%;border-collapse:collapse;min-width:1100px}
    th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
    th{color:var(--muted);background:#14171d;position:sticky;top:0}
    tr:hover td{background:rgba(255,255,255,.015)}
    .badge{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:700}
    .verified{background:rgba(46,204,113,.13);color:#6be49c}
    .pending{background:rgba(255,138,0,.13);color:#ffb65c}
    .actions{display:flex;gap:6px}
    .empty{padding:36px;text-align:center;color:var(--muted)}
    dialog{
      width:min(760px,94vw);border:none;border-radius:20px;background:var(--panel);
      color:#fff;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.55);
    }
    dialog::backdrop{background:rgba(0,0,0,.72)}
    .modal-head,.modal-foot{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
    .modal-foot{border-top:1px solid var(--line);border-bottom:none;justify-content:flex-end;gap:10px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px}
    .field{display:flex;flex-direction:column;gap:7px}
    .field.full{grid-column:1/-1}
    label{font-size:12px;color:var(--muted)}
    .section{display:none}
    .section.active{display:block}
    .placeholder{
      background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;color:var(--muted);
    }
    @media(max-width:950px){
      .app{grid-template-columns:1fr}
      aside{height:auto;position:relative;border-right:none;border-bottom:1px solid var(--line)}
      nav{display:flex;overflow:auto}
      nav button{min-width:max-content}
      .cards{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:620px){
      main{padding:18px}
      .cards{grid-template-columns:1fr}
      .topbar{align-items:flex-start;flex-direction:column}
      .form-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
    }
  
    .landing{
      min-height:calc(100vh - 56px);
      display:grid;
      place-items:center;
      padding:32px;
    }
    .landing-shell{
      width:min(1180px,100%);
      display:grid;
      grid-template-columns:minmax(320px,470px) 1fr;
      align-items:center;
      gap:42px;
    }
    .mascot-wrap{
      position:relative;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:520px;
      isolation:isolate;
    }
    .mascot-wrap::before{
      content:"";
      position:absolute;
      width:360px;
      height:460px;
      border-radius:48% 48% 44% 44%;
      background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.98) 0 38%, rgba(245,246,248,.96) 62%, rgba(255,138,0,.10) 76%, transparent 78%);
      box-shadow:
        0 28px 70px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.10),
        0 0 55px rgba(255,138,0,.10);
      z-index:-1;
    }
    .mascot-wrap img{
      width:min(100%,310px);
      max-height:500px;
      object-fit:contain;
      mix-blend-mode:multiply;
      filter:
        contrast(1.03)
        saturate(1.02)
        drop-shadow(0 24px 24px rgba(0,0,0,.26));
      transform:translateY(4px);
    }
    .hero-copy{max-width:650px}
    .eyebrow{
      letter-spacing:.34em;
      font-size:15px;
      font-weight:800;
      color:var(--muted);
      margin-bottom:12px;
    }
    .hero-title{
      margin:0;
      text-transform:uppercase;
      font-size:clamp(44px,7vw,92px);
      line-height:.94;
      letter-spacing:-.045em;
      font-weight:900;
    }
    .hero-title .accent{color:var(--accent)}
    .hero-sub{
      margin:18px 0 0;
      color:var(--muted);
      font-size:16px;
      line-height:1.7;
    }
    .home-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      margin-top:34px;
    }
    .glass-action{
      min-height:150px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:22px;
      background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      color:#fff;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-end;
      gap:12px;
      padding:22px;
      box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
      transition:.22s ease;
    }
    .glass-action:hover{
      transform:translateY(-4px);
      border-color:rgba(255,138,0,.65);
      box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(255,138,0,.16);
    }
    .glass-icon{
      width:48px;height:48px;border-radius:15px;
      display:grid;place-items:center;
      color:var(--accent);
      background:rgba(255,138,0,.10);
      border:1px solid rgba(255,138,0,.30);
      font-size:24px;
    }
    .glass-action strong{font-size:20px}
    .glass-action span{font-size:12px;color:var(--muted)}
    @media(max-width:950px){
      .landing-shell{grid-template-columns:1fr;text-align:center}
      .mascot-wrap{min-height:auto}
      .mascot-wrap{min-height:440px}.mascot-wrap::before{width:310px;height:400px}.mascot-wrap img{width:270px;max-height:420px}
      .hero-copy{margin:auto}
      .glass-action{align-items:center}
    }
    @media(max-width:620px){
      .landing{padding:18px}
      .home-actions{grid-template-columns:1fr}
      .mascot-wrap{min-height:360px}.mascot-wrap::before{width:260px;height:335px}.mascot-wrap img{width:225px;max-height:340px}
      .hero-title{font-size:48px}
      .eyebrow{font-size:12px}
    }

  
    .alumni-page{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .alumni-hero{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:flex-end;
      padding:24px;
      border:1px solid var(--line);
      border-radius:20px;
      background:
        linear-gradient(135deg,rgba(255,138,0,.11),transparent 42%),
        linear-gradient(180deg,rgba(31,35,44,.96),rgba(23,26,33,.96));
      box-shadow:var(--shadow);
    }
    .alumni-hero h3{
      margin:0 0 8px;
      font-size:28px;
    }
    .alumni-hero p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
      max-width:620px;
    }
    .hero-counter{
      min-width:160px;
      text-align:right;
    }
    .hero-counter strong{
      display:block;
      font-size:36px;
      color:var(--accent);
    }
    .hero-counter span{
      color:var(--muted);
      font-size:12px;
    }
    .filter-panel{
      display:grid;
      grid-template-columns:minmax(240px,1fr) 180px 180px auto;
      gap:10px;
      background:var(--panel);
      border:1px solid var(--line);
      padding:14px;
      border-radius:16px;
    }
    .view-toggle{
      display:flex;
      gap:8px;
      justify-content:flex-end;
      margin-bottom:-4px;
    }
    .view-toggle .btn.active{
      background:var(--accent);
      color:#111;
      border-color:transparent;
    }
    .alumni-grid{
      display:none;
      grid-template-columns:repeat(3,minmax(280px,1fr));
      gap:20px;
    }
    .alumni-grid.active{display:grid}
    .alumni-card{
      background:linear-gradient(180deg,rgba(31,35,44,.98),rgba(23,26,33,.98));
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      padding:0;
      box-shadow:var(--shadow);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .alumni-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,138,0,.42);
      box-shadow:0 24px 60px rgba(0,0,0,.36);
    }
    .alumni-card-photo{
      position:relative;
      width:100%;
      aspect-ratio:4/3;
      min-height:250px;
      overflow:hidden;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,rgba(255,138,0,.15),rgba(255,255,255,.025)),#11141a;
      border-bottom:1px solid var(--line);
    }
    .alumni-card-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 22%;
      display:block;
      transition:transform .35s ease;
    }
    .alumni-card:hover .alumni-card-photo img{transform:scale(1.015)}
    .alumni-card-initials{
      width:118px;height:118px;border-radius:32px;
      display:grid;place-items:center;
      font-size:42px;font-weight:900;color:#111;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 18px 45px rgba(0,0,0,.28);
    }
    .alumni-card-status{position:absolute;top:14px;right:14px}
    .alumni-card-body{padding:18px}
    .alumni-card-head{
      display:flex;
      gap:12px;
      align-items:flex-start;
      justify-content:space-between;
      margin-bottom:14px;
    }
    .alumni-card-title{min-width:0}
    .alumni-card h4{margin:0 0 5px;font-size:19px;line-height:1.25}
    .alumni-card small{color:var(--muted)}
    .alumni-avatar{
      width:52px;height:52px;border-radius:16px;
      display:grid;place-items:center;
      font-size:20px;font-weight:900;
      color:#111;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
    }
    .alumni-meta{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:14px 0;
    }
    .meta-item{
      padding:10px;
      border-radius:12px;
      background:#12151b;
      border:1px solid var(--line);
    }
    .meta-item span{
      display:block;
      color:var(--muted);
      font-size:10px;
      margin-bottom:4px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .meta-item strong{font-size:12px}
    .card-actions{
      display:flex;
      gap:8px;
      justify-content:flex-end;
    }
    .table-mode.hidden{display:none}
    @media(max-width:1050px){
      .filter-panel{grid-template-columns:1fr 1fr}
      .alumni-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:700px){
      .alumni-hero{align-items:flex-start;flex-direction:column}
      .hero-counter{text-align:left}
      .filter-panel{grid-template-columns:1fr}
      .alumni-grid{grid-template-columns:1fr}
    }

  
    .input-page{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .input-hero{
      padding:24px;
      border:1px solid var(--line);
      border-radius:20px;
      background:
        linear-gradient(135deg,rgba(255,138,0,.12),transparent 44%),
        linear-gradient(180deg,rgba(31,35,44,.96),rgba(23,26,33,.96));
      box-shadow:var(--shadow);
    }
    .input-hero h3{
      margin:0 0 8px;
      font-size:28px;
    }
    .input-hero p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
    }
    .input-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 320px;
      gap:18px;
      align-items:start;
    }
    .form-card,.info-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow);
    }
    .form-section{
      padding:20px;
      border-bottom:1px solid var(--line);
    }
    .form-section:last-child{border-bottom:none}
    .form-section h4{
      margin:0 0 15px;
      font-size:16px;
    }
    .form-grid-page{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .form-grid-page .full{grid-column:1/-1}
    .input-actions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      padding:18px 20px;
      border-top:1px solid var(--line);
    }
    .info-card{
      padding:20px;
      position:sticky;
      top:24px;
    }
    .info-card h4{margin:0 0 14px}
    .check-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .check-item{
      padding:11px 12px;
      border-radius:12px;
      background:#12151b;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
    }
    .check-item.ok{
      border-color:rgba(46,204,113,.35);
      color:#73dda0;
      background:rgba(46,204,113,.06);
    }
    .privacy-note{
      margin-top:16px;
      padding:14px;
      border-radius:14px;
      background:rgba(255,138,0,.08);
      border:1px solid rgba(255,138,0,.22);
      color:var(--muted);
      font-size:12px;
      line-height:1.6;
    }
    .save-message{
      display:none;
      margin:0 20px 18px;
      padding:12px 14px;
      border-radius:12px;
      background:rgba(46,204,113,.10);
      color:#78dfa4;
      border:1px solid rgba(46,204,113,.30);
      font-size:13px;
    }
    .save-message.show{display:block}
    @media(max-width:980px){
      .input-layout{grid-template-columns:1fr}
      .info-card{position:relative;top:auto}
    }
    @media(max-width:680px){
      .form-grid-page{grid-template-columns:1fr}
      .form-grid-page .full{grid-column:auto}
      .input-actions{flex-direction:column-reverse}
      .input-actions .btn{width:100%}
    }

  
    .photo-upload{
      display:grid;
      grid-template-columns:140px 1fr;
      gap:18px;
      align-items:center;
    }
    .photo-preview{
      width:140px;
      height:170px;
      border-radius:18px;
      border:1px dashed rgba(255,138,0,.45);
      background:
        linear-gradient(145deg,rgba(255,138,0,.08),rgba(255,255,255,.02)),
        #12151b;
      display:grid;
      place-items:center;
      overflow:hidden;
      color:var(--muted);
      text-align:center;
      font-size:12px;
      line-height:1.5;
    }
    .photo-preview img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .photo-control{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .photo-control input[type="file"]{
      padding:10px;
      width:100%;
    }
    .photo-note{
      color:var(--muted);
      font-size:12px;
      line-height:1.6;
    }
    .photo-status{
      display:none;
      padding:9px 11px;
      border-radius:10px;
      background:rgba(46,204,113,.08);
      border:1px solid rgba(46,204,113,.24);
      color:#78dfa4;
      font-size:12px;
    }
    .photo-status.show{display:block}
    .member-photo{
      width:44px;
      height:44px;
      border-radius:12px;
      object-fit:cover;
      border:1px solid var(--line);
      margin-right:10px;
      vertical-align:middle;
    }
    .member-name-wrap{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .alumni-avatar.has-photo{
      padding:0;
      overflow:hidden;
      background:#111;
    }
    .alumni-avatar.has-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    @media(max-width:620px){
      .photo-upload{grid-template-columns:1fr}
      .photo-preview{width:120px;height:145px}
    }

  
    /* MOBILE RESPONSIVE UPGRADE */
    .mobile-header{
      display:none;
    }
    .mobile-menu-btn{
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid var(--line);
      background:var(--panel);
      color:#fff;
      font-size:20px;
      cursor:pointer;
    }
    .mobile-overlay{
      display:none;
    }

    @media(max-width:950px){
      body{
        overflow-x:hidden;
      }
      .app{
        display:block;
        min-height:100vh;
      }
      aside{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        height:100vh;
        z-index:1001;
        transform:translateX(-105%);
        transition:transform .25s ease;
        border-right:1px solid var(--line);
        border-bottom:none;
        padding-top:24px;
      }
      aside.open{
        transform:translateX(0);
      }
      .mobile-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.65);
        backdrop-filter:blur(3px);
        z-index:1000;
      }
      .mobile-overlay.show{
        display:block;
      }
      .mobile-header{
        display:flex;
        position:sticky;
        top:0;
        z-index:900;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 16px;
        background:rgba(15,17,21,.94);
        backdrop-filter:blur(16px);
        border-bottom:1px solid var(--line);
      }
      .mobile-brand{
        display:flex;
        align-items:center;
        gap:10px;
      }
      .mobile-logo{
        width:38px;
        height:38px;
        border-radius:11px;
        display:grid;
        place-items:center;
        font-weight:900;
        color:#111;
        background:linear-gradient(135deg,var(--accent),#ff6500);
      }
      .mobile-brand strong{
        display:block;
        font-size:14px;
      }
      .mobile-brand span{
        display:block;
        font-size:10px;
        color:var(--muted);
      }
      nav{
        display:flex;
        flex-direction:column;
        overflow:visible;
      }
      nav button{
        min-width:0;
        width:100%;
      }
      main{
        padding:18px;
      }
      .topbar{
        display:none;
      }
      .landing{
        min-height:auto;
        padding:18px 0 28px;
      }
      .landing-shell{
        grid-template-columns:1fr;
        gap:16px;
        text-align:center;
      }
      .mascot-wrap{
        min-height:340px;
        order:1;
      }
      .hero-copy{
        order:2;
        margin:auto;
        width:100%;
      }
      .mascot-wrap::before{
        width:270px;
        height:340px;
      }
      .mascot-wrap img{
        width:230px;
        max-height:350px;
      }
      .hero-title{
        font-size:clamp(40px,11vw,64px);
        line-height:.96;
      }
      .hero-sub{
        font-size:14px;
        padding:0 8px;
      }
      .home-actions{
        grid-template-columns:1fr;
        gap:12px;
      }
      .glass-action{
        min-height:112px;
        padding:18px;
        align-items:flex-start;
        text-align:left;
      }
      .cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .card strong{
        font-size:24px;
      }
      .alumni-page,
      .input-page{
        gap:14px;
      }
      .alumni-hero,
      .input-hero{
        padding:18px;
        border-radius:16px;
      }
      .alumni-hero h3,
      .input-hero h3{
        font-size:23px;
      }
      .filter-panel{
        grid-template-columns:1fr;
        position:relative;
      }
      .filter-panel input,
      .filter-panel select,
      .filter-panel button{
        width:100%;
      }
      .view-toggle{
        justify-content:stretch;
      }
      .view-toggle .btn{
        flex:1;
      }
      .table-wrap{
        border-radius:14px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
      table{
        min-width:980px;
      }
      th,td{
        white-space:nowrap;
      }
      .alumni-grid{
        grid-template-columns:1fr;
      }
      .input-layout{
        grid-template-columns:1fr;
      }
      .form-card,
      .info-card{
        border-radius:16px;
      }
      .form-section{
        padding:16px;
      }
      .form-grid-page{
        grid-template-columns:1fr;
      }
      .form-grid-page .full{
        grid-column:auto;
      }
      input,select,textarea{
        width:100%;
        min-height:44px;
        font-size:16px;
      }
      textarea{
        min-height:110px;
      }
      .photo-upload{
        grid-template-columns:1fr;
        justify-items:center;
      }
      .photo-control{
        width:100%;
      }
      .photo-preview{
        width:130px;
        height:158px;
      }
      .input-actions{
        flex-direction:column-reverse;
      }
      .input-actions .btn{
        width:100%;
        min-height:46px;
      }
      dialog{
        width:100%;
        max-width:none;
        height:100dvh;
        max-height:100dvh;
        border-radius:0;
        margin:0;
      }
      .form-grid{
        grid-template-columns:1fr;
        padding:16px;
      }
      .field.full{
        grid-column:auto;
      }
      .modal-head,
      .modal-foot{
        position:sticky;
        background:var(--panel);
        z-index:3;
      }
      .modal-head{top:0}
      .modal-foot{bottom:0}
    }

    @media(max-width:620px){
      main{
        padding:12px;
      }
      .mobile-header{
        padding:10px 12px;
      }
      .cards{
        grid-template-columns:1fr 1fr;
        gap:10px;
      }
      .card{
        padding:14px;
        border-radius:14px;
      }
      .card span{
        font-size:11px;
      }
      .card strong{
        font-size:22px;
      }
      .landing{
        padding-top:8px;
      }
      .mascot-wrap{
        min-height:290px;
      }
      .mascot-wrap::before{
        width:230px;
        height:285px;
      }
      .mascot-wrap img{
        width:195px;
        max-height:290px;
      }
      .eyebrow{
        letter-spacing:.22em;
      }
      .hero-title{
        font-size:42px;
      }
      .glass-action{
        min-height:100px;
      }
      .alumni-hero{
        align-items:flex-start;
      }
      .hero-counter{
        text-align:left;
      }
      .alumni-card{
        padding:15px;
      }
      .alumni-meta{
        grid-template-columns:1fr;
      }
      .card-actions{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
      }
      .card-actions .btn{
        width:100%;
      }
      .info-card{
        padding:16px;
      }
    }

    @media(max-width:390px){
      .cards{
        grid-template-columns:1fr;
      }
      .hero-title{
        font-size:36px;
      }
      .mascot-wrap{
        min-height:255px;
      }
      .mascot-wrap::before{
        width:205px;
        height:250px;
      }
      .mascot-wrap img{
        width:170px;
      }
    }

  
    .detail-page{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .detail-toolbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .detail-shell{
      display:grid;
      grid-template-columns:300px minmax(0,1fr);
      gap:18px;
      align-items:start;
    }
    .profile-card,
    .detail-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow);
    }
    .profile-card{
      padding:22px;
      text-align:center;
      position:sticky;
      top:24px;
    }
    .profile-photo-large{
      width:170px;
      height:210px;
      margin:0 auto 16px;
      border-radius:22px;
      overflow:hidden;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,rgba(255,138,0,.12),rgba(255,255,255,.03));
      border:1px solid var(--line);
      color:var(--accent);
      font-size:42px;
      font-weight:900;
    }
    .profile-photo-large img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .profile-card h3{
      margin:0 0 6px;
      font-size:24px;
    }
    .profile-card p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:13px;
    }
    .profile-actions{
      display:grid;
      grid-template-columns:1fr;
      gap:9px;
      margin-top:16px;
    }
    .detail-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .detail-card{
      padding:20px;
    }
    .detail-card.full{
      grid-column:1/-1;
    }
    .detail-card h4{
      margin:0 0 15px;
      font-size:16px;
    }
    .detail-list{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    .detail-row{
      display:grid;
      grid-template-columns:150px 1fr;
      gap:12px;
      padding:11px 0;
      border-bottom:1px solid var(--line);
    }
    .detail-row:last-child{border-bottom:none}
    .detail-row span{
      color:var(--muted);
      font-size:12px;
    }
    .detail-row strong{
      font-size:13px;
      word-break:break-word;
    }
    .private-tag{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:4px 8px;
      border-radius:999px;
      font-size:10px;
      color:#ffbd68;
      background:rgba(255,138,0,.10);
      border:1px solid rgba(255,138,0,.22);
      margin-left:6px;
    }
    .verification-box{
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:center;
      padding:16px;
      border-radius:14px;
      background:#12151b;
      border:1px solid var(--line);
    }
    .verification-box p{
      margin:4px 0 0;
      color:var(--muted);
      font-size:12px;
    }
    .detail-empty{
      padding:40px;
      text-align:center;
      color:var(--muted);
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
    }
    @media(max-width:950px){
      .detail-shell{grid-template-columns:1fr}
      .profile-card{position:relative;top:auto}
      .profile-actions{grid-template-columns:1fr 1fr}
    }
    @media(max-width:680px){
      .detail-grid{grid-template-columns:1fr}
      .detail-card.full{grid-column:auto}
      .detail-row{grid-template-columns:1fr;gap:5px}
      .profile-actions{grid-template-columns:1fr}
      .verification-box{align-items:flex-start;flex-direction:column}
      .verification-box .btn{width:100%}
    }

  
    .login-page{
      min-height:calc(100vh - 80px);
      display:grid;
      place-items:center;
      padding:24px;
    }
    .login-card{
      width:min(440px,100%);
      background:linear-gradient(180deg,rgba(31,35,44,.97),rgba(23,26,33,.97));
      border:1px solid var(--line);
      border-radius:22px;
      padding:24px;
      box-shadow:var(--shadow);
    }
    .login-mark{
      width:62px;
      height:62px;
      border-radius:18px;
      display:grid;
      place-items:center;
      margin:0 auto 16px;
      font-size:24px;
      font-weight:900;
      color:#111;
      background:linear-gradient(135deg,var(--accent),#ff6500);
    }
    .login-card h3{
      margin:0;
      text-align:center;
      font-size:26px;
    }
    .login-card > p{
      margin:8px 0 20px;
      text-align:center;
      color:var(--muted);
      line-height:1.6;
      font-size:13px;
    }
    .login-fields{
      display:grid;
      gap:14px;
    }
    .password-wrap{
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px;
    }
    .password-wrap .btn{
      min-width:52px;
    }
    .login-message{
      display:none;
      padding:11px 12px;
      border-radius:11px;
      font-size:12px;
      line-height:1.5;
    }
    .login-message.show{display:block}
    .login-message.error{
      color:#ff9a9a;
      background:rgba(255,93,93,.09);
      border:1px solid rgba(255,93,93,.28);
    }
    .login-message.success{
      color:#75dfa1;
      background:rgba(46,204,113,.09);
      border:1px solid rgba(46,204,113,.28);
    }
    .demo-login-note{
      margin-top:18px;
      padding:13px;
      border-radius:13px;
      background:rgba(255,138,0,.07);
      border:1px solid rgba(255,138,0,.20);
      color:var(--muted);
      font-size:11px;
      line-height:1.6;
    }
    .admin-status{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:18px;
      padding:12px;
      border-radius:13px;
      background:#12151b;
      border:1px solid var(--line);
    }
    .admin-status-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--danger);
      box-shadow:0 0 14px rgba(255,93,93,.35);
    }
    .admin-status-dot.online{
      background:var(--success);
      box-shadow:0 0 14px rgba(46,204,113,.35);
    }
    .admin-only.locked{
      opacity:.45;
      pointer-events:none;
      filter:grayscale(.25);
    }
    .admin-field-only{display:none}
    body.admin-mode .admin-field-only{display:flex}

    .admin-lock-note{
      display:none;
      padding:12px 14px;
      border-radius:12px;
      color:#ffbd68;
      background:rgba(255,138,0,.08);
      border:1px solid rgba(255,138,0,.22);
      font-size:12px;
      margin-bottom:12px;
    }
    .admin-lock-note.show{display:block}
    @media(max-width:620px){
      .login-page{padding:12px}
      .login-card{padding:18px;border-radius:18px}
    }

  
    .db-settings{
      display:grid;
      grid-template-columns:minmax(0,1fr) 330px;
      gap:18px;
      align-items:start;
    }
    .db-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      padding:20px;
      box-shadow:var(--shadow);
    }
    .db-card h3,.db-card h4{margin:0 0 10px}
    .db-card p{color:var(--muted);line-height:1.6;font-size:13px}
    .db-fields{display:grid;gap:14px;margin-top:18px}
    .db-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
    .connection-state{
      display:flex;
      align-items:center;
      gap:10px;
      padding:13px;
      border-radius:13px;
      background:#12151b;
      border:1px solid var(--line);
      margin-bottom:14px;
    }
    .connection-dot{
      width:11px;height:11px;border-radius:50%;
      background:var(--danger);
      box-shadow:0 0 14px rgba(255,93,93,.35);
      flex:0 0 auto;
    }
    .connection-dot.connected{
      background:var(--success);
      box-shadow:0 0 14px rgba(46,204,113,.4);
    }
    .sync-log{
      margin-top:14px;
      padding:12px;
      min-height:76px;
      max-height:210px;
      overflow:auto;
      white-space:pre-wrap;
      border-radius:12px;
      background:#101319;
      border:1px solid var(--line);
      color:var(--muted);
      font:12px/1.55 Consolas,monospace;
    }
    .mode-badge{
      display:inline-flex;
      padding:5px 9px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      color:#ffbd68;
      background:rgba(255,138,0,.1);
      border:1px solid rgba(255,138,0,.24);
    }
    .mode-badge.online{
      color:#76dfa3;
      background:rgba(46,204,113,.09);
      border-color:rgba(46,204,113,.25);
    }
    @media(max-width:900px){
      .db-settings{grid-template-columns:1fr}
    }

  
    .excel-page{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .excel-hero{
      padding:24px;
      border-radius:20px;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(255,138,0,.12),transparent 45%),
        linear-gradient(180deg,rgba(31,35,44,.96),rgba(23,26,33,.96));
      box-shadow:var(--shadow);
    }
    .excel-hero h3{
      margin:0 0 8px;
      font-size:28px;
    }
    .excel-hero p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
    }
    .excel-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .excel-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      padding:20px;
      box-shadow:var(--shadow);
    }
    .excel-card h4{
      margin:0 0 10px;
    }
    .excel-card p{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .excel-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .upload-zone{
      border:1px dashed rgba(255,138,0,.45);
      border-radius:16px;
      padding:22px;
      text-align:center;
      background:rgba(255,138,0,.04);
      transition:.2s ease;
    }
    .upload-zone.dragover{
      background:rgba(255,138,0,.10);
      border-color:var(--accent);
    }
    .upload-zone input{
      margin-top:12px;
      width:100%;
    }
    .import-summary{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin-top:16px;
    }
    .summary-box{
      padding:12px;
      border-radius:13px;
      background:#12151b;
      border:1px solid var(--line);
    }
    .summary-box span{
      display:block;
      color:var(--muted);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:6px;
    }
    .summary-box strong{
      font-size:22px;
    }
    .preview-wrap{
      display:none;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .preview-wrap.show{display:block}
    .preview-head{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      padding:16px 18px;
      border-bottom:1px solid var(--line);
    }
    .preview-table{
      overflow:auto;
      max-height:430px;
    }
    .preview-table table{
      min-width:1200px;
    }
    .row-valid{color:#78dfa4}
    .row-duplicate{color:#ffbd68}
    .row-invalid{color:#ff9696}
    .mapping-list{
      display:grid;
      gap:8px;
      margin-top:12px;
    }
    .mapping-item{
      display:grid;
      grid-template-columns:160px 1fr;
      gap:10px;
      padding:9px 0;
      border-bottom:1px solid var(--line);
      font-size:12px;
    }
    .mapping-item span{color:var(--muted)}
    @media(max-width:900px){
      .excel-grid{grid-template-columns:1fr}
      .import-summary{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:560px){
      .import-summary{grid-template-columns:1fr 1fr}
      .preview-head{align-items:flex-start;flex-direction:column}
      .excel-actions .btn{width:100%}
    }

  
    /* DASHBOARD LIVE STATUS */
    .live-status-panel{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
      margin-top:18px;
    }
    .live-status-card{
      display:flex;
      align-items:center;
      gap:14px;
      min-height:88px;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.13);
      background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
      box-shadow:0 14px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
      text-align:left;
    }
    .live-status-icon{
      width:48px;height:48px;border-radius:15px;
      display:grid;place-items:center;flex:0 0 auto;
      background:rgba(255,138,0,.10);
      border:1px solid rgba(255,138,0,.28);
      font-size:22px;
    }
    .live-status-copy{min-width:0}
    .live-status-copy span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
    .live-status-copy strong{display:block;margin-top:4px;font-size:22px;line-height:1.15}
    .live-status-copy small{display:block;margin-top:4px;color:var(--muted);font-size:11px}
    .online-pulse{
      display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;
      background:var(--success);box-shadow:0 0 0 0 rgba(46,204,113,.55);
      animation:onlinePulse 1.8s infinite;
    }
    @keyframes onlinePulse{70%{box-shadow:0 0 0 9px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
    @media(max-width:620px){
      .live-status-panel{grid-template-columns:1fr;gap:10px}
      .live-status-card{min-height:78px;padding:14px}
      .live-status-copy strong{font-size:19px}
    }

    /* FINAL ACCESS & NAVIGATION */
    .glass-action{position:relative;overflow:hidden}
    .glass-action::after{
      content:"Buka →";position:absolute;right:18px;top:18px;
      font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--accent);
      opacity:.72;transition:.2s ease;
    }
    .glass-action:hover::after{opacity:1;transform:translateX(3px)}
    .app-toast{
      position:fixed;right:22px;bottom:22px;z-index:3000;
      max-width:min(380px,calc(100vw - 32px));padding:13px 16px;border-radius:14px;
      background:rgba(23,26,33,.96);border:1px solid var(--line);color:#fff;
      box-shadow:0 18px 60px rgba(0,0,0,.42);backdrop-filter:blur(16px);
      opacity:0;transform:translateY(18px);pointer-events:none;transition:.22s ease;
      font-size:13px;line-height:1.45;
    }
    .app-toast.show{opacity:1;transform:translateY(0)}
    .app-toast.success{border-color:rgba(46,204,113,.42);color:#8ce7b0}
    .app-toast.info{border-color:rgba(255,138,0,.42);color:#ffd09a}
    .shortcut-hint{
      margin-top:14px;text-align:center;color:var(--muted);font-size:11px;line-height:1.6;
    }
    .shortcut-hint kbd{
      display:inline-block;padding:3px 7px;border-radius:7px;background:#101319;
      border:1px solid var(--line);color:#fff;font:11px Consolas,monospace;
    }
    @media(max-width:620px){.app-toast{right:16px;bottom:16px}}

    /* V1.9.2 — CARD ALUMNI: FOTO PROPORSIONAL DI POJOK KIRI ATAS
       Perubahan visual saja. Database, API, privasi, login, simpan,
       verifikasi, hapus, dan cetak kartu tidak diubah. */
    .alumni-grid{
      grid-template-columns:repeat(2,minmax(340px,1fr));
      gap:18px;
      align-items:stretch;
    }

    .alumni-card{
      position:relative;
      display:grid;
      grid-template-columns:132px minmax(0,1fr);
      align-items:start;
      min-height:292px;
      padding:16px !important;
      gap:16px;
      overflow:hidden;
      border-radius:20px;
      background:
        radial-gradient(circle at 0 0,rgba(255,138,0,.11),transparent 38%),
        linear-gradient(180deg,rgba(31,35,44,.98),rgba(23,26,33,.98));
    }

    .alumni-card::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:4px;
      background:linear-gradient(180deg,var(--accent),#ff5e00);
      opacity:.9;
    }

    .alumni-card-photo{
      position:relative;
      width:132px;
      height:168px;
      min-height:168px;
      aspect-ratio:auto;
      flex:none;
      align-self:start;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.13);
      border-radius:16px;
      background:
        linear-gradient(145deg,rgba(255,138,0,.08),rgba(255,255,255,.035)),
        #e9ebee;
      box-shadow:0 12px 28px rgba(0,0,0,.25);
    }

    .alumni-card-photo img{
      width:100%;
      height:100%;
      padding:6px;
      object-fit:contain;
      object-position:center;
      background:#eef0f2;
      transform:none !important;
    }

    .alumni-card:hover .alumni-card-photo img{
      transform:none !important;
    }

    .alumni-card-initials{
      width:78px;
      height:78px;
      border-radius:22px;
      font-size:29px;
    }

    .alumni-card-status{
      position:absolute;
      top:8px;
      left:8px;
      right:auto;
      max-width:calc(100% - 16px);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      box-shadow:0 6px 18px rgba(0,0,0,.24);
    }

    .alumni-card-body{
      min-width:0;
      min-height:260px;
      padding:0;
      display:flex;
      flex-direction:column;
    }

    .alumni-card-head{
      min-height:52px;
      margin:2px 0 12px;
      padding-right:2px;
    }

    .alumni-card h4{
      margin:0 0 6px;
      font-size:19px;
      line-height:1.25;
      overflow-wrap:anywhere;
    }

    .alumni-card small{
      display:block;
      line-height:1.35;
    }

    .alumni-meta{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin:0 0 13px;
    }

    .meta-item{
      min-width:0;
      padding:9px 10px;
      border-radius:11px;
    }

    .meta-item strong{
      display:block;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .card-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-start;
      gap:7px;
      margin-top:auto;
      padding-top:4px;
    }

    .card-actions .btn{
      padding:9px 11px;
      font-size:12px;
    }

    @media(max-width:1180px){
      .alumni-grid{
        grid-template-columns:1fr;
      }
      .alumni-card{
        max-width:760px;
        width:100%;
      }
    }

    @media(max-width:700px){
      .alumni-grid{
        grid-template-columns:1fr;
      }
      .alumni-card{
        grid-template-columns:112px minmax(0,1fr);
        max-width:560px;
        min-height:270px;
        padding:14px !important;
        gap:13px;
        margin-inline:auto;
      }
      .alumni-card-photo{
        width:112px;
        height:146px;
        min-height:146px;
      }
      .alumni-card-body{
        min-height:242px;
      }
      .alumni-meta{
        grid-template-columns:1fr 1fr;
      }
      .card-actions{
        grid-template-columns:none;
      }
      .card-actions .btn{
        width:auto;
      }
    }

    @media(max-width:480px){
      .alumni-card{
        grid-template-columns:96px minmax(0,1fr);
        min-height:255px;
        padding:12px !important;
        gap:11px;
      }
      .alumni-card-photo{
        width:96px;
        height:126px;
        min-height:126px;
        border-radius:14px;
      }
      .alumni-card-status{
        top:6px;
        left:6px;
        max-width:calc(100% - 12px);
        padding:4px 6px;
        font-size:9px;
      }
      .alumni-card-body{
        min-height:230px;
      }
      .alumni-card h4{
        font-size:17px;
      }
      .alumni-meta{
        grid-template-columns:1fr;
        gap:6px;
      }
      .meta-item{
        padding:8px 9px;
      }
      .card-actions{
        flex-direction:column;
      }
      .card-actions .btn{
        width:100%;
      }
    }


    /* V1.9.4 — HERO TANPA BACKGROUND BULAT + TESTIMONI ALUMNI */
    #dashboard .mascot-wrap{
      min-height:680px !important;
      display:flex !important;
      align-items:center;
      justify-content:center;
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
      border-radius:0 !important;
      overflow:visible !important;
    }
    #dashboard .mascot-wrap::before,
    #dashboard .mascot-wrap::after{display:none !important;content:none !important}
    #dashboard .mascot-wrap img{
      width:auto !important;
      max-width:100% !important;
      height:680px !important;
      max-height:680px !important;
      object-fit:contain !important;
      object-position:center !important;
      background:transparent !important;
      border-radius:0 !important;
      filter:drop-shadow(0 24px 38px rgba(0,0,0,.32)) !important;
    }
    .testimonial-section{
      width:min(1180px,100%);
      margin:34px auto 0;
      padding:0 12px 28px;
    }
    .testimonial-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:18px;
    }
    .testimonial-head h3{margin:0 0 7px;font-size:28px}
    .testimonial-head p{margin:0;color:var(--muted);line-height:1.6}
    .testimonial-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .testimonial-card{
      position:relative;
      min-height:230px;
      padding:22px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.13);
      background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
      box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
      display:flex;
      flex-direction:column;
    }
    .testimonial-quote{font-size:38px;line-height:1;color:var(--accent);font-weight:900}
    .testimonial-text{margin:8px 0 20px;line-height:1.75;color:#e8eaed;font-size:14px}
    .testimonial-person{display:flex;align-items:center;gap:12px;margin-top:auto}
    .testimonial-avatar{
      width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--accent),#ff6500);color:#111;font-weight:900;
    }
    .testimonial-person strong{display:block;font-size:14px}
    .testimonial-person span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
    .testimonial-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px}
    .testimonial-form{display:none;margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
    .testimonial-form.show{display:block}
    .testimonial-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .testimonial-form-grid .full{grid-column:1/-1}
    .testimonial-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
    @media(max-width:950px){
      #dashboard .mascot-wrap{min-height:520px !important}
      #dashboard .mascot-wrap img{height:520px !important;max-height:520px !important}
      .testimonial-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:620px){
      #dashboard .mascot-wrap{min-height:360px !important}
      #dashboard .mascot-wrap img{height:360px !important;max-height:360px !important}
      .testimonial-head{align-items:flex-start;flex-direction:column}
      .testimonial-head .btn{width:100%}
      .testimonial-grid{grid-template-columns:1fr}
      .testimonial-form-grid{grid-template-columns:1fr}
      .testimonial-form-grid .full{grid-column:auto}
    }


/* PUBLICATION PAGE V2.1 */
.publication-page{display:grid;gap:20px}.publication-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:28px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(255,128,0,.14),rgba(255,255,255,.02));box-shadow:var(--shadow)}
.publication-kicker{display:inline-block;color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:8px}.publication-hero h3{font-size:30px;margin:0 0 8px}.publication-hero p{max-width:760px;margin:0;color:var(--muted);line-height:1.7}.publication-toolbar{display:grid;grid-template-columns:1fr 240px;gap:12px}.publication-toolbar input,.publication-toolbar select,.publication-form-grid input,.publication-form-grid select,.publication-form-grid textarea{width:100%;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:12px 14px;font:inherit}.publication-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.publication-card{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column}.publication-image{aspect-ratio:16/10;background:linear-gradient(135deg,#202630,#11151b);display:grid;place-items:center;overflow:hidden;position:relative}.publication-image img{width:100%;height:100%;object-fit:cover}.publication-image .no-photo{font-weight:900;font-size:28px;color:var(--muted)}.publication-category-badge{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:999px;background:rgba(10,14,20,.82);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(8px)}.publication-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}.publication-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}.publication-body h4{margin:0;font-size:19px;line-height:1.35}.publication-narrative{margin:0;color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.publication-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}.publication-dialog{width:min(900px,94vw);border:1px solid var(--border);border-radius:22px;padding:0;background:var(--card);color:var(--text)}.publication-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.publication-dialog form{padding:22px}.publication-dialog-head,.publication-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.publication-dialog-head{padding-bottom:18px;border-bottom:1px solid var(--border)}.publication-dialog-head h3{margin:3px 0 0}.publication-dialog-head small{color:var(--primary);font-weight:900;letter-spacing:.12em}.publication-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.publication-form-grid label{display:grid;gap:7px;font-weight:700}.publication-form-grid label small{font-weight:400;color:var(--muted)}.publication-full{grid-column:1/-1}.publication-photo-preview{min-height:220px;border:1px dashed var(--border);border-radius:16px;display:grid;place-items:center;overflow:hidden;color:var(--muted);background:var(--panel)}.publication-photo-preview img{width:100%;max-height:420px;object-fit:contain}.publication-dialog-actions{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:1050px){.publication-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.publication-hero{align-items:flex-start;flex-direction:column}.publication-toolbar,.publication-form-grid,.publication-grid{grid-template-columns:1fr}.publication-full{grid-column:auto}.publication-hero h3{font-size:25px}}



/* =========================================================
   V2.2 ENTERPRISE MOBILE FIX — final responsive overrides
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
main,.section,.placeholder,.card,.toolbar,.table-wrap{min-width:0}

@media (max-width:950px){
  .app{display:block!important;width:100%!important;min-width:0!important}
  main{width:100%!important;max-width:100%!important;margin:0!important;padding:16px!important}
  #mainSidebar{overflow-y:auto!important;overscroll-behavior:contain!important}
  #mainSidebar nav{display:block!important;overflow:visible!important}
  #mainSidebar nav button{display:block!important;width:100%!important;min-width:0!important;text-align:left!important;margin:5px 0!important}
  body.mobile-menu-open{overflow:hidden!important}
  .topbar{gap:12px!important}
  .topbar>*{min-width:0}
  .title h2{font-size:clamp(22px,6vw,28px)!important;overflow-wrap:anywhere}
  .toolbar{border-radius:14px!important;align-items:stretch!important}
  .toolbar>*{min-width:0!important}
  .toolbar .grow{flex:1 1 100%!important;width:100%!important}
  .toolbar .btn{flex:1 1 auto}
  dialog,.publication-dialog{overflow:hidden!important;display:none}
  dialog[open],.publication-dialog[open]{display:flex!important;flex-direction:column!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important}
  dialog>form,.publication-dialog>form{display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  .modal-head,.publication-dialog-head{position:sticky!important;top:0!important;z-index:5!important;background:var(--panel)!important}
  .modal-foot,.publication-dialog-actions{position:sticky!important;bottom:0!important;z-index:5!important;background:var(--panel)!important}
  .form-grid,.publication-form-grid{grid-template-columns:1fr!important}
  .field.full,.publication-full{grid-column:auto!important}
}

@media (max-width:700px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .card{padding:14px!important;border-radius:15px!important}
  .card strong{font-size:clamp(21px,7vw,28px)!important}
  .topbar{flex-direction:column!important;align-items:stretch!important}
  .user{width:100%!important;justify-content:flex-start!important}
  .publication-page{gap:14px!important}
  .publication-hero{padding:18px!important;border-radius:18px!important;gap:14px!important}
  .publication-hero h3{font-size:24px!important;line-height:1.2!important}
  .publication-hero p{font-size:14px!important;line-height:1.6!important}
  .publication-toolbar{grid-template-columns:1fr!important;gap:10px!important}
  .publication-grid{grid-template-columns:1fr!important;gap:14px!important}
  .publication-card{border-radius:17px!important}
  .publication-body{padding:15px!important}
  .publication-actions{display:grid!important;grid-template-columns:1fr!important}
  .publication-actions .btn{width:100%!important}
  .publication-photo-preview{min-height:170px!important}

  /* Mobile table-to-card layout. Horizontal desktop tables become readable records. */
  .table-wrap{overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important}
  .table-wrap table.mobile-card-table{display:block!important;min-width:0!important;width:100%!important;background:transparent!important}
  .table-wrap table.mobile-card-table thead{display:none!important}
  .table-wrap table.mobile-card-table tbody{display:grid!important;gap:12px!important}
  .table-wrap table.mobile-card-table tr{display:block!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--panel)!important;box-shadow:var(--shadow)!important;overflow:hidden!important}
  .table-wrap table.mobile-card-table td{display:grid!important;grid-template-columns:minmax(104px,38%) minmax(0,1fr)!important;gap:10px!important;align-items:start!important;width:100%!important;padding:10px 13px!important;border-bottom:1px solid var(--line)!important;text-align:left!important;overflow-wrap:anywhere!important;white-space:normal!important}
  .table-wrap table.mobile-card-table td:last-child{border-bottom:0!important}
  .table-wrap table.mobile-card-table td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
  .table-wrap table.mobile-card-table td[data-label="" ]::before{display:none}
  .table-wrap table.mobile-card-table td .actions,.table-wrap table.mobile-card-table td.actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  .table-wrap table.mobile-card-table td .btn{min-height:40px!important}
}

@media (max-width:480px){
  .mobile-header{padding:9px 11px!important}
  .mobile-brand strong{font-size:13px!important}
  .mobile-brand span{font-size:10px!important}
  main{padding:11px!important}
  .cards{grid-template-columns:1fr!important}
  .toolbar{padding:11px!important;gap:8px!important}
  .toolbar .btn,.toolbar input,.toolbar select{width:100%!important;flex:1 1 100%!important;min-height:44px!important}
  .btn{min-height:42px!important;padding:10px 12px!important}
  .landing{padding:14px 10px 26px!important;min-height:auto!important}
  .landing-shell{grid-template-columns:1fr!important;gap:16px!important}
  .mascot-wrap{min-height:290px!important}
  .mascot-wrap::before{width:230px!important;height:290px!important}
  .mascot-wrap img{width:190px!important;max-height:290px!important}
  .hero-copy{text-align:center!important}
  .hero-title{font-size:clamp(38px,16vw,58px)!important}
  .hero-sub{font-size:14px!important}
  .home-actions{grid-template-columns:1fr!important;gap:10px!important;margin-top:22px!important}
  .glass-action{min-height:112px!important;padding:16px!important}
  .publication-dialog form{padding:14px!important}
  .publication-dialog-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .publication-dialog-actions .btn{width:100%!important}
  .table-wrap table.mobile-card-table td{grid-template-columns:1fr!important;gap:4px!important}
}

/* ===== Extracted block ===== */

@page{size:85.6mm 54mm;margin:0}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#e9e9e9;font-family:Arial,Helvetica,sans-serif;color:#111}
  .sheet{min-height:100vh;display:grid;place-items:center;padding:18px}
  .card{width:85.6mm;height:54mm;background:#fff;border-radius:3mm;overflow:hidden;position:relative;box-shadow:0 8px 30px rgba(0,0,0,.22);border:.25mm solid #d5d5d5}
  .top{height:13mm;background:linear-gradient(120deg,#111318,#242a35);color:#fff;padding:3mm 4mm;display:flex;justify-content:space-between;align-items:center;border-bottom:1.2mm solid #ff8a00}
  .brand{display:flex;align-items:center;gap:2.5mm}.logo{width:8.5mm;height:8.5mm;border-radius:2mm;background:#ff8a00;color:#111;display:grid;place-items:center;font-weight:900;font-size:4mm}
  .brand strong{display:block;font-size:3.4mm;letter-spacing:.15mm}.brand small{font-size:2.2mm;color:#c7ccd5}
  .member-label{text-align:right;font-size:2.2mm;color:#d8dde6}.member-label b{display:block;color:#ffb347;font-size:3mm;margin-top:.7mm}
  .content{height:36mm;display:grid;grid-template-columns:25mm 1fr;gap:3.5mm;padding:3mm 4mm 2.5mm}
  .photo{height:30mm;border-radius:2.5mm;background:#f2f3f5;border:.35mm solid #d8dbe0;display:grid;place-items:center;overflow:hidden}
  .photo img{width:100%;height:100%;object-fit:contain;object-position:center;background:#f4f4f4}
  .initials{width:15mm;height:15mm;border-radius:50%;background:#ff8a00;display:grid;place-items:center;font-weight:900;font-size:5mm}
  .info{min-width:0;display:flex;flex-direction:column}
  h1{font-size:4.2mm;line-height:1.08;margin:0 0 1.2mm;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .member-no{font-size:2.8mm;font-weight:800;color:#e36f00;margin-bottom:2mm}
  .rows{display:grid;gap:1mm;font-size:2.45mm}.row{display:grid;grid-template-columns:17mm 1fr;gap:1.5mm}.row span{color:#6b7280}.row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status{margin-top:auto;display:inline-flex;align-self:flex-start;padding:1mm 2mm;border-radius:10mm;font-size:2.15mm;font-weight:800}.verified{background:#e9f8ef;color:#187a40;border:.25mm solid #9ad9b2}.pending{background:#fff1dc;color:#9b5700;border:.25mm solid #f2c078}
  .footer{position:absolute;left:0;right:0;bottom:0;height:5mm;background:#f4f5f7;border-top:.25mm solid #dadde2;padding:1.2mm 4mm;display:flex;justify-content:space-between;align-items:center;font-size:2mm;color:#606775}.footer b{color:#111}
  .controls{margin-top:18px;text-align:center}.controls button{border:0;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer;margin:0 5px}.print{background:#ff8a00}.close{background:#222;color:#fff}
  @media print{html,body{background:#fff}.sheet{display:block;padding:0;min-height:0}.card{box-shadow:none;border:0;border-radius:0}.controls{display:none}}


    /* V1.9.3 — HERO MASKOT BARU (VISUAL ONLY)
       Tidak mengubah database, data alumni, login, API, penyimpanan,
       verifikasi, import/export, ataupun fungsi JavaScript. */
    #dashboard .landing{
      padding:20px 0 34px;
      min-height:auto;
    }
    #dashboard .landing-shell{
      width:min(1380px,100%);
      grid-template-columns:1fr;
      gap:24px;
    }
    #dashboard .mascot-wrap{
      width:100%;
      min-height:0;
      display:block;
      border-radius:28px;
      overflow:hidden;
      background:#11141a;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 28px 80px rgba(0,0,0,.36);
    }
    #dashboard .mascot-wrap::before{display:none}
    #dashboard .mascot-wrap img{
      display:block;
      width:100%;
      max-width:none;
      max-height:none;
      height:auto;
      object-fit:contain;
      object-position:center;
      mix-blend-mode:normal;
      filter:none;
      transform:none;
    }
    #dashboard .hero-copy{
      max-width:none;
      text-align:center;
      padding:0 12px;
    }
    #dashboard .hero-copy .eyebrow,
    #dashboard .hero-copy .hero-title,
    #dashboard .hero-copy .hero-sub{
      display:none;
    }
    #dashboard .home-actions{
      width:min(900px,100%);
      margin:0 auto;
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    #dashboard .glass-action{
      min-height:118px;
    }
    @media(max-width:950px){
      #dashboard .landing{padding:10px 0 24px}
      #dashboard .landing-shell{gap:18px}
      #dashboard .mascot-wrap{min-height:0;order:1;border-radius:20px}
      #dashboard .mascot-wrap img{width:100%;max-height:none}
      #dashboard .hero-copy{order:2}
      #dashboard .home-actions{grid-template-columns:1fr 1fr}
    }
    @media(max-width:620px){
      #dashboard .mascot-wrap{border-radius:16px}
      #dashboard .home-actions{grid-template-columns:1fr;gap:10px}
      #dashboard .glass-action{min-height:96px}
    }

/* ===== Extracted block ===== */

body{margin:0;background:#0f1319;color:#eef2f7;font:16px Arial,sans-serif}main{max-width:900px;margin:auto;padding:35px 20px 70px}img{width:100%;max-height:620px;object-fit:contain;background:#171c24;border-radius:18px}small{color:#ff8a00;font-weight:700}h1{font-size:38px;line-height:1.15;margin:12px 0}.meta{color:#aab4c2;margin-bottom:20px}.text{white-space:pre-wrap;line-height:1.85;color:#d8dee8;font-size:18px}.back{display:inline-block;margin-bottom:22px;color:#ff9b22;text-decoration:none}@media(max-width:600px){h1{font-size:29px}}


/* V3.0 mobile stability safeguards */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
@media (max-width: 620px) {
  .modal, .dialog, [role="dialog"] { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  input, select, textarea, button { max-width: 100%; }
  .cards, .stats-grid, .publication-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ===== Statistics Alumni V3.1 ===== */
.statistics-page{display:grid;gap:20px}.statistics-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:var(--shadow)}.statistics-hero h3{margin:10px 0 6px;font-size:clamp(24px,3vw,36px)}.statistics-hero p,.statistics-card p{margin:0;color:var(--muted);line-height:1.65}.statistics-actions{display:flex;gap:10px;flex-wrap:wrap}.statistics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat-kpi{padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);display:grid;gap:7px}.stat-kpi span{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.stat-kpi strong{font-size:34px;line-height:1}.stat-kpi small{color:var(--muted)}.stat-kpi.warning strong{color:#ff9d2e}.statistics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.statistics-card{padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);min-width:0}.statistics-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}.statistics-card h4{margin:0 0 5px;font-size:18px}.bar-chart{display:grid;gap:11px}.bar-row{display:grid;grid-template-columns:minmax(105px,1.1fr) minmax(120px,2.3fr) 44px;gap:10px;align-items:center}.bar-label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:11px;background:rgba(127,127,127,.15);border-radius:999px;overflow:hidden}.bar-fill{height:100%;width:0;background:linear-gradient(90deg,#ff7a00,#ffad42);border-radius:inherit;transition:width .45s ease}.bar-value{text-align:right;font-weight:800;font-size:13px}.duplicate-card{grid-column:1/-1}.duplicate-status{padding:7px 10px;border-radius:999px;background:rgba(255,157,46,.14);color:#ff9d2e;font-size:12px;font-weight:800;white-space:nowrap}.duplicate-note{padding:12px 14px;border-radius:14px;background:rgba(255,157,46,.09);border:1px solid rgba(255,157,46,.25);color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:14px}.duplicate-results{display:grid;gap:12px}.duplicate-group{border:1px solid var(--line);border-radius:16px;overflow:hidden}.duplicate-group-head{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--panel2);font-size:13px}.duplicate-group-head strong{color:#ff9d2e}.duplicate-records{display:grid}.duplicate-record{display:grid;grid-template-columns:1.3fr .7fr 1fr 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);font-size:13px}.duplicate-record:first-child{border-top:0}.duplicate-record-name{font-weight:800}.duplicate-record small{display:block;color:var(--muted);margin-top:3px}.duplicate-record .btn{padding:7px 10px;font-size:12px}.empty-state{padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}.quality-good{color:#4fd18b}
@media(max-width:900px){.statistics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.statistics-grid{grid-template-columns:1fr}.statistics-hero{flex-direction:column}.duplicate-record{grid-template-columns:1fr 1fr}.duplicate-record .duplicate-actions{grid-column:1/-1}}
@media(max-width:560px){.statistics-kpis{grid-template-columns:1fr}.statistics-actions,.statistics-actions .btn{width:100%}.bar-row{grid-template-columns:92px 1fr 34px}.duplicate-record{grid-template-columns:1fr}.duplicate-record .duplicate-actions{grid-column:auto}.statistics-card,.statistics-hero{padding:16px}}

/* =========================================================
   ALUMNI TI ENTERPRISE RECOVERY V4.0 — FRESH UI
   Safe visual layer; no database/API behavior is changed.
   ========================================================= */
:root{
  --bg:#080b10;
  --panel:#11161e;
  --panel-2:#171e28;
  --panel2:#171e28;
  --text:#f7f8fa;
  --muted:#9ca8b8;
  --accent:#ff8a00;
  --accent-2:#ffc164;
  --line:rgba(255,255,255,.09);
  --success:#43d99c;
  --danger:#ff6969;
  --shadow:0 20px 60px rgba(0,0,0,.28);
}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0!important;
  max-width:none!important;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 85% 10%,rgba(255,138,0,.12),transparent 30%),
    radial-gradient(circle at 15% 85%,rgba(255,193,100,.06),transparent 30%),
    linear-gradient(135deg,#07090d 0%,#0d1219 52%,#090c11 100%)!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
}
.app{grid-template-columns:282px minmax(0,1fr);min-height:100vh}
aside{
  width:auto!important;
  padding:22px 16px!important;
  background:linear-gradient(180deg,rgba(14,18,25,.98),rgba(9,12,17,.98))!important;
  border-right:1px solid var(--line)!important;
  backdrop-filter:blur(18px);
  box-shadow:14px 0 45px rgba(0,0,0,.22);
}
.brand{padding:8px 8px 20px;margin-bottom:12px!important;border-bottom:1px solid var(--line)}
.logo,.mobile-logo{border-radius:16px!important;background:linear-gradient(145deg,#ffac3f,#ff7600)!important;box-shadow:0 14px 30px rgba(255,122,0,.23)!important}
.brand h1{font-size:17px!important;letter-spacing:.04em}.brand span{font-size:11px!important;letter-spacing:.08em;text-transform:uppercase}
nav{display:grid;gap:5px}
nav button{
  position:relative;
  min-height:46px;
  padding:12px 14px 12px 46px!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  font-weight:650;
  letter-spacing:.01em;
  transition:.2s ease;
}
nav button::before{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.92}
nav button:nth-child(1)::before{content:"⌂"}nav button:nth-child(2)::before{content:"◉"}nav button:nth-child(3)::before{content:"▧"}nav button:nth-child(4)::before{content:"▥"}nav button:nth-child(5)::before{content:"＋"}nav button:nth-child(6)::before{content:"◎"}nav button:nth-child(7)::before{content:"⚿"}nav button:nth-child(8)::before{content:"⇄"}nav button:nth-child(9)::before{content:"⚙"}
nav button:hover{transform:translateX(3px);background:rgba(255,255,255,.045)!important;border-color:var(--line)!important}
nav button.active{color:#fff!important;background:linear-gradient(135deg,rgba(255,138,0,.22),rgba(255,138,0,.07))!important;border-color:rgba(255,138,0,.32)!important;box-shadow:inset 3px 0 0 var(--accent)}
.admin-status,.aside-note{background:rgba(255,255,255,.025)!important;border-color:var(--line)!important}
main{max-width:none!important;width:100%!important;margin:0!important;padding:26px clamp(18px,3vw,42px) 60px!important}
.topbar{position:relative;padding:4px 0 22px;margin-bottom:18px!important;border-bottom:1px solid var(--line)}
.title h2{font-size:clamp(24px,3vw,34px)!important;letter-spacing:-.035em}.title p{font-size:13px!important}
.user{background:rgba(17,22,30,.82)!important;border-color:var(--line)!important;box-shadow:0 12px 30px rgba(0,0,0,.16);backdrop-filter:blur(14px)}
.avatar{background:linear-gradient(145deg,#ffac3f,#ff7600)!important;box-shadow:0 7px 20px rgba(255,122,0,.22)}
.section{animation:v4fade .28s ease both}@keyframes v4fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card,.panel,.statistics-card,.statistics-hero,.stat-kpi{
  background:linear-gradient(145deg,rgba(24,31,42,.94),rgba(14,19,27,.96))!important;
  border-color:var(--line)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.19)!important;
}
.card:hover,.stat-kpi:hover{transform:translateY(-2px);border-color:rgba(255,138,0,.28)!important;transition:.2s ease}
.btn{min-height:42px;border-radius:12px!important;transition:.18s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.primary{background:linear-gradient(135deg,#ffac3f,#ff7600)!important;color:#111!important;box-shadow:0 10px 24px rgba(255,122,0,.2)}
input,select,textarea{min-height:44px;background:#0d1219!important;border-color:rgba(255,255,255,.1)!important;border-radius:12px!important}
input:focus,select:focus,textarea:focus{border-color:rgba(255,138,0,.72)!important;box-shadow:0 0 0 4px rgba(255,138,0,.1)}
.toolbar{background:rgba(17,22,30,.9)!important;border-color:var(--line)!important;padding:15px!important;gap:11px!important}
.table-wrap{max-width:none!important;background:rgba(13,18,25,.85)!important;border-color:var(--line)!important}
table{width:100%!important}th{background:#171e28!important;color:#c7d0dc!important;text-transform:uppercase;letter-spacing:.06em;font-size:11px!important}td{border-color:rgba(255,255,255,.065)!important}tbody tr:hover{background:rgba(255,138,0,.045)!important}

/* Fresh dashboard hero */
#dashboard .landing{padding:0!important;margin-bottom:22px}
#dashboard .landing-shell{
  width:100%!important;max-width:none!important;
  min-height:490px;
  display:grid!important;grid-template-columns:minmax(320px,.88fr) minmax(380px,1.12fr)!important;
  gap:clamp(24px,5vw,70px)!important;align-items:center!important;
  padding:clamp(24px,4vw,54px)!important;
  border:1px solid var(--line)!important;border-radius:30px!important;
  background:
    linear-gradient(115deg,rgba(255,138,0,.09),transparent 42%),
    linear-gradient(145deg,rgba(25,32,43,.98),rgba(10,14,20,.97))!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
  overflow:hidden;position:relative;
}
#dashboard .landing-shell::after{content:"TI";position:absolute;right:-18px;bottom:-72px;font-size:260px;font-weight:950;line-height:1;color:rgba(255,255,255,.025);pointer-events:none}
#dashboard .mascot-wrap{min-height:400px!important;background:radial-gradient(circle,rgba(255,138,0,.16),transparent 65%)!important;border:0!important;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
#dashboard .mascot-wrap img{width:min(100%,480px)!important;max-height:470px!important;object-fit:contain!important;background:transparent!important;border-radius:0!important;filter:drop-shadow(0 30px 34px rgba(0,0,0,.38))}
#dashboard .hero-copy{text-align:left!important;padding:0!important;z-index:1}
#dashboard .hero-copy .eyebrow{display:inline-flex!important;padding:8px 12px;border:1px solid rgba(255,138,0,.3);border-radius:999px;color:var(--accent-2);background:rgba(255,138,0,.08);font-size:11px;letter-spacing:.18em;font-weight:800}
#dashboard .hero-copy .hero-title{display:block!important;font-size:clamp(46px,6vw,82px)!important;line-height:.88!important;letter-spacing:-.07em!important;margin:20px 0 22px!important}
#dashboard .hero-copy .hero-sub{display:block!important;max-width:620px;font-size:clamp(15px,1.5vw,18px)!important;line-height:1.7!important;color:#b5bfcd!important}
#dashboard .home-actions{width:100%!important;max-width:760px!important;margin:28px 0 0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
#dashboard .glass-action{min-height:118px!important;border-radius:20px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;backdrop-filter:blur(12px);transition:.22s ease!important}
#dashboard .glass-action:hover{transform:translateY(-4px)!important;border-color:rgba(255,138,0,.36)!important;background:rgba(255,138,0,.08)!important}
#dashboard .live-status-panel{margin-top:16px!important;max-width:760px!important}
#dashboard .live-status-card{background:rgba(5,8,12,.38)!important;border-color:var(--line)!important}
.testimonial-section{margin-top:22px!important;padding:clamp(20px,3vw,34px)!important;border:1px solid var(--line)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(21,27,37,.94),rgba(12,16,22,.96))!important}

/* Publications and statistics */
.publication-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.publication-card{border-radius:22px!important;border-color:var(--line)!important;background:linear-gradient(145deg,rgba(24,31,42,.96),rgba(13,18,25,.98))!important;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.2)!important;transition:.22s ease}
.publication-card:hover{transform:translateY(-4px);border-color:rgba(255,138,0,.3)!important}
.statistics-kpis{gap:16px!important}.stat-kpi strong{color:#fff}.statistics-hero{border-radius:26px!important}

.mobile-header{background:rgba(10,14,20,.94)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(18px)}
@media(max-width:1100px){.publication-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:950px){
  .app{display:block!important}.mobile-header{display:flex!important}
  aside{position:fixed!important;z-index:1200!important;width:min(86vw,310px)!important;height:100dvh!important;transform:translateX(-105%);transition:.25s ease}
  aside.open{transform:translateX(0)}
  main{padding:82px 16px 48px!important}
  .topbar{align-items:flex-start!important}.user{display:none!important}
  #dashboard .landing-shell{grid-template-columns:1fr!important;padding:26px 20px!important;gap:10px!important}
  #dashboard .mascot-wrap{order:1!important;min-height:300px!important}
  #dashboard .mascot-wrap img{max-height:360px!important}
  #dashboard .hero-copy{order:2!important;text-align:center!important}
  #dashboard .hero-copy .hero-title{font-size:clamp(43px,13vw,68px)!important}
  #dashboard .hero-copy .hero-sub{margin-left:auto!important;margin-right:auto!important}
  #dashboard .home-actions,#dashboard .live-status-panel{margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:640px){
  main{padding-left:12px!important;padding-right:12px!important}
  .topbar{padding-bottom:14px!important}.title h2{font-size:24px!important}
  #dashboard .landing-shell{border-radius:22px!important;padding:20px 14px!important;min-height:auto!important}
  #dashboard .mascot-wrap{min-height:250px!important}
  #dashboard .mascot-wrap img{max-height:295px!important}
  #dashboard .hero-copy .hero-title{margin:14px 0 16px!important;font-size:45px!important}
  #dashboard .home-actions{grid-template-columns:1fr!important}
  #dashboard .glass-action{min-height:92px!important}
  .publication-grid{grid-template-columns:1fr!important}
  .toolbar>*{width:100%!important}.grow{min-width:0!important}
  .cards,.statistics-kpis{grid-template-columns:1fr!important}
  .testimonial-section{border-radius:20px!important;padding:17px!important}
}
@media print{
  body{background:#fff!important;color:#111!important}.app{display:block!important}aside,.mobile-header,.topbar .user{display:none!important}main{padding:0!important}.card,.panel,.statistics-card,.statistics-hero,.stat-kpi{box-shadow:none!important;background:#fff!important;color:#111!important;border-color:#bbb!important}*{color:#111!important}
}

/* ===== V4.1 recovery status ===== */
.v41-recovery-notice{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  max-width:min(420px,calc(100vw - 36px));
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:#172033;
  color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  font-size:14px;
  line-height:1.45;
}
.v41-recovery-notice[hidden]{display:none!important}
.v41-recovery-notice.success{background:#116149}
.v41-recovery-notice.error{background:#9f2f2f}
@media (max-width:640px){
  .v41-recovery-notice{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ===== V4.1 BUILD006 - INFORMATIVE STATISTICS CHARTS ===== */
.chart-surface{min-height:285px;display:flex;align-items:center;justify-content:center;overflow:hidden}.line-chart-wrap{width:100%;overflow-x:auto}.line-chart-wrap svg{display:block;width:100%;min-width:560px;height:auto}.chart-grid{stroke:rgba(148,163,184,.17);stroke-width:1;stroke-dasharray:4 5}.chart-axis{fill:var(--muted);font-size:11px}.chart-line{fill:none;stroke:#ff8a00;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 8px rgba(255,138,0,.28))}.chart-point circle{fill:#ff8a00;stroke:#fff;stroke-width:2}.chart-point:hover circle{r:7}.chart-value-label{fill:#fff;font-size:12px;font-weight:800}.donut-layout,.quality-layout{width:100%;display:grid;grid-template-columns:minmax(190px,.8fr) minmax(240px,1.2fr);gap:24px;align-items:center}.donut-chart{width:min(220px,100%);aspect-ratio:1;border-radius:50%;position:relative;margin:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.22)}.donut-hole{position:absolute;inset:24%;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 1px var(--line)}.donut-hole strong{font-size:30px;line-height:1}.donut-hole span{color:var(--muted);font-size:11px;margin-top:7px}.donut-legend{display:grid;gap:8px}.donut-legend-row{display:grid;grid-template-columns:10px minmax(0,1fr) 34px 42px;align-items:center;gap:8px;font-size:12px}.donut-legend-row i{width:10px;height:10px;border-radius:50%}.donut-legend-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.donut-legend-row strong{text-align:right}.donut-legend-row small{text-align:right;color:var(--muted)}.colorful-bars .bar-fill{background:var(--bar-color);box-shadow:0 0 12px color-mix(in srgb,var(--bar-color) 45%,transparent)}.quality-layout{grid-template-columns:minmax(180px,.72fr) minmax(260px,1.28fr)}.quality-list{display:grid;gap:12px}.quality-row{display:grid;grid-template-columns:95px minmax(90px,1fr) 42px;gap:9px;align-items:center;font-size:12px}.quality-track{height:10px;border-radius:999px;background:rgba(127,127,127,.16);overflow:hidden}.quality-track i{display:block;height:100%;border-radius:inherit;background:var(--quality-color);transition:width .5s ease}.quality-row strong{text-align:right}.statistics-insight-card{grid-column:1/-1}.statistics-insights{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.insight-item{display:flex;gap:11px;align-items:flex-start;padding:14px;border-radius:15px;background:linear-gradient(145deg,var(--panel2),rgba(255,138,0,.04));border:1px solid var(--line)}.insight-item>i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,138,0,.13);color:#ff9d2e;font-style:normal;font-weight:900;flex:0 0 auto}.insight-item span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.insight-item strong{display:block;font-size:13px;line-height:1.4}.stat-kpi:nth-child(1){border-top:3px solid #2f80ed}.stat-kpi:nth-child(2){border-top:3px solid #28c76f}.stat-kpi:nth-child(3){border-top:3px solid #00b8d9}.stat-kpi:nth-child(4){border-top:3px solid #ff8a00}
@media(max-width:1100px){.statistics-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.donut-layout,.quality-layout{grid-template-columns:1fr}.chart-surface{min-height:250px}}
@media(max-width:620px){.statistics-insights{grid-template-columns:1fr}.donut-legend-row{grid-template-columns:10px minmax(0,1fr) 30px 38px}.quality-row{grid-template-columns:82px 1fr 38px}.chart-surface{min-height:230px}.donut-chart{width:190px}}
@media print{.chart-axis{fill:#111!important}.chart-value-label{fill:#111!important}.donut-hole{background:#fff!important}.chart-line{stroke:#d46f00!important}.statistics-insights{grid-template-columns:repeat(2,1fr)!important}}

/* ===== V4.1 BUILD007 — NEWS & DISCUSSION ===== */
.community-page{display:grid;gap:18px}.community-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,rgba(255,145,0,.12),rgba(21,28,39,.85));box-shadow:var(--shadow)}.community-hero h3{font-size:28px;margin:5px 0}.community-hero p{color:var(--muted);max-width:760px}.moderation-note,.admin-review-panel{padding:14px 16px;border-radius:14px;border:1px solid rgba(255,145,0,.25);background:rgba(255,145,0,.08);color:var(--muted)}.admin-review-panel{display:flex;justify-content:space-between;color:var(--text)}.news-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:1120px;margin:0 auto}.news-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);display:grid;grid-template-columns:300px minmax(0,1fr);min-height:220px}.news-card-image{min-height:220px;background:linear-gradient(135deg,#1d2735,#0d1219);display:grid;place-items:center;color:var(--muted);overflow:hidden}.news-card-image img{width:100%;height:100%;object-fit:cover}.news-card-body{padding:22px 24px;display:grid;align-content:center;gap:11px}.news-card-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.community-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(255,145,0,.12);color:var(--accent);font-size:11px;font-weight:800}.status-pending{color:#ffb347}.status-approved{color:#43d98b}.status-rejected{color:#ff6b6b}.news-card h4{font-size:19px}.news-card p{color:var(--muted);line-height:1.65;white-space:pre-line}.moderation-actions{display:flex;gap:8px;flex-wrap:wrap}.community-dialog{width:min(760px,94vw)}.community-photo-preview{min-height:150px;border:1px dashed var(--border);border-radius:14px;display:grid;place-items:center;color:var(--muted);overflow:hidden;margin-top:8px}.community-photo-preview img{width:100%;max-height:260px;object-fit:contain;background:#fff}.discussion-list{display:grid;gap:16px}.discussion-card{border:1px solid var(--border);border-radius:18px;background:var(--panel);padding:20px;box-shadow:var(--shadow)}.discussion-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.discussion-card h4{font-size:20px;margin:7px 0}.discussion-content{color:var(--muted);line-height:1.65;white-space:pre-line}.comment-list{display:grid;gap:10px;margin-top:16px}.comment-item{padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid var(--border)}.comment-item strong{font-size:13px}.comment-item p{margin-top:5px;color:var(--muted);white-space:pre-line}.comment-form{display:grid;grid-template-columns:170px 1fr auto;gap:8px;margin-top:14px}.comment-form input,.comment-form textarea{min-width:0}.comment-form textarea{min-height:44px;resize:vertical}.pending-card{border-color:rgba(255,179,71,.45)}
@media(max-width:1100px){.news-card{grid-template-columns:260px minmax(0,1fr)}}@media(max-width:720px){.community-hero{align-items:flex-start;flex-direction:column}.comment-form{grid-template-columns:1fr}.news-card{grid-template-columns:1fr}.news-card-image{height:200px;min-height:200px}.news-card-body{padding:18px}}

/* =========================================================
   V4.1 BUILD008 — FRESH INDUSTRIAL PATTERN BACKGROUND
   Motif ringan tanpa gambar eksternal; tetap cepat dan responsif.
   ========================================================= */
:root{
  --pattern-orange:rgba(255,138,0,.075);
  --pattern-white:rgba(255,255,255,.026);
  --ambient-orange:rgba(255,112,0,.13);
  --ambient-blue:rgba(55,105,155,.09);
}

body{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 8%,var(--ambient-orange),transparent 28%),
    radial-gradient(circle at 88% 18%,var(--ambient-blue),transparent 30%),
    radial-gradient(circle at 72% 85%,rgba(255,138,0,.065),transparent 29%),
    linear-gradient(135deg,#090b0f 0%,#121722 46%,#0d1017 100%);
  background-attachment:fixed;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
}

/* Motif grid teknik / blueprint yang sangat halus */
body::before{
  background-image:
    linear-gradient(var(--pattern-white) 1px,transparent 1px),
    linear-gradient(90deg,var(--pattern-white) 1px,transparent 1px),
    linear-gradient(135deg,transparent 46%,var(--pattern-orange) 47%,var(--pattern-orange) 48%,transparent 49%);
  background-size:42px 42px,42px 42px,168px 168px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.84),rgba(0,0,0,.26));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.84),rgba(0,0,0,.26));
}

/* Bentuk lingkaran industrial yang memberi kedalaman */
body::after{
  inset:-120px;
  background:
    radial-gradient(circle at 15% 32%,transparent 0 78px,rgba(255,138,0,.055) 79px 80px,transparent 81px),
    radial-gradient(circle at 82% 68%,transparent 0 124px,rgba(255,255,255,.035) 125px 126px,transparent 127px),
    radial-gradient(circle at 68% 18%,transparent 0 48px,rgba(255,138,0,.045) 49px 50px,transparent 51px);
  filter:blur(.1px);
}

.app,
.landing{
  position:relative;
  z-index:0;
}

aside{
  background:
    linear-gradient(180deg,rgba(17,20,27,.965),rgba(12,15,21,.94)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 14px);
  box-shadow:18px 0 45px rgba(0,0,0,.18);
}

main::before{
  content:"";
  position:fixed;
  right:-120px;
  top:90px;
  width:360px;
  height:360px;
  border:1px solid rgba(255,138,0,.075);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(255,138,0,.018),
    0 0 0 84px rgba(255,255,255,.012);
  pointer-events:none;
  z-index:-1;
}

.card,
.toolbar,
.table-wrap,
.placeholder,
.user,
.news-card,
.discussion-card,
.stat-panel,
.chart-panel{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.card{
  background:
    linear-gradient(145deg,rgba(35,40,51,.91),rgba(20,24,32,.88)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 12px);
}

.section.active{
  animation:freshPageIn .34s ease both;
}

@keyframes freshPageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@media(max-width:950px){
  body{background-attachment:scroll}
  body::before{background-size:34px 34px,34px 34px,136px 136px}
  main::before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .section.active{animation:none}
}

@media print{
  body,
  body::before,
  body::after{
    background:#fff !important;
  }
  body::before,
  body::after,
  main::before{display:none !important}
  .card,.toolbar,.table-wrap,.placeholder,.user{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* ===== V4.1 BUILD009 — PUBLIC PAGE GLASSCARD HUB ===== */
.dashboard-access-head{margin-top:26px;margin-bottom:14px;max-width:920px}
.dashboard-access-head h2{margin:5px 0 5px;font-size:clamp(22px,2.5vw,34px);line-height:1.15;color:var(--text)}
.dashboard-access-head p{margin:0;color:var(--muted);max-width:720px;line-height:1.55}
#dashboard .public-page-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;max-width:980px!important;width:100%!important}
#dashboard .public-page-grid .glass-action{min-height:150px!important;display:grid!important;grid-template-columns:48px 1fr!important;grid-template-rows:auto auto 1fr auto!important;column-gap:13px!important;align-items:start!important;text-align:left!important;padding:18px!important}
#dashboard .public-page-grid .glass-icon{grid-column:1;grid-row:1/4;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,rgba(255,138,0,.22),rgba(255,255,255,.055));border:1px solid rgba(255,151,45,.25);font-size:23px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#dashboard .public-page-grid strong{grid-column:2;grid-row:1;font-size:17px;line-height:1.2;margin-top:3px}
#dashboard .public-page-grid span:not(.glass-icon){grid-column:2;grid-row:2/4;font-size:12px;line-height:1.5;margin-top:6px}
#dashboard .public-page-grid em{grid-column:1/3;grid-row:4;font-size:11px;font-style:normal;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07)}
#dashboard .public-page-grid .glass-action:hover em{letter-spacing:.07em}
@media(max-width:1080px){#dashboard .public-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){
  #dashboard .public-page-grid{grid-template-columns:1fr!important;gap:11px!important}
  #dashboard .public-page-grid .glass-action{min-height:118px!important;padding:15px!important;grid-template-columns:44px 1fr!important}
  #dashboard .public-page-grid .glass-icon{width:42px;height:42px;border-radius:13px;font-size:21px}
  .dashboard-access-head{margin-top:20px}
}
@media print{.dashboard-access-head,.public-page-grid{display:none!important}}


/* ===== V4.1 BUILD010 — ALL BATCHES + PDF EXPORT ===== */
.batch-chart-summary{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,138,0,.07);font-size:12px}.batch-chart-summary span{color:var(--muted)}.batch-chart-summary strong{color:#ff9d2e}.batch-line-chart{padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#ff8a00 rgba(127,127,127,.12)}.batch-line-chart svg{max-width:none!important;min-width:760px!important}.batch-axis-label{font-size:10px!important}.btn-accent{background:linear-gradient(135deg,#ff8a00,#ffad42)!important;color:#111!important;border-color:transparent!important;font-weight:900!important}
@media print{
  body.print-statistics-only .section{display:none!important}
  body.print-statistics-only #statistics{display:block!important}
  body.print-statistics-only #statistics .statistics-page{display:block!important}
  body.print-statistics-only #statistics .statistics-actions{display:none!important}
  body.print-statistics-only #statistics .statistics-hero{margin-bottom:10mm!important;break-inside:avoid}
  body.print-statistics-only #statistics .statistics-kpis{grid-template-columns:repeat(4,1fr)!important;gap:4mm!important;break-inside:avoid}
  body.print-statistics-only #statistics .statistics-grid{display:block!important}
  body.print-statistics-only #statistics .statistics-card{margin:0 0 8mm!important;break-inside:avoid;page-break-inside:avoid}
  body.print-statistics-only #statistics .chart-surface{overflow:visible!important;min-height:0!important}
  body.print-statistics-only #statistics .line-chart-wrap{overflow:visible!important}
  body.print-statistics-only #statistics .batch-line-chart svg{width:100%!important;min-width:0!important;height:auto!important}
  body.print-statistics-only #statistics .batch-chart-summary{background:#fff!important}
  body.print-statistics-only #statistics .donut-layout,
  body.print-statistics-only #statistics .quality-layout{grid-template-columns:190px 1fr!important}
  body.print-statistics-only #statistics .duplicate-card{page-break-before:always}
  @page{size:A4 landscape;margin:10mm}
}

/* ===== V4.1 BUILD011 — THREE PRIMARY STATISTICS ===== */
.statistics-page-three{gap:18px}
.statistics-grid-three{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.statistics-grid-three .statistics-card-batch-full{grid-column:1/-1;padding:22px}
.statistics-card-batch-full .batch-chart-surface{min-height:370px;align-items:stretch}
.statistics-card-batch-full .line-chart-wrap{width:100%}
.statistics-card-batch-full .batch-line-chart svg{min-width:900px!important}
@media(max-width:900px){.statistics-grid-three{grid-template-columns:1fr}.statistics-grid-three .statistics-card-batch-full{grid-column:auto}.statistics-card-batch-full .batch-chart-surface{min-height:300px}}
@media print{
  body.print-statistics-only #statistics .statistics-grid-three{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6mm!important}
  body.print-statistics-only #statistics .statistics-card-batch-full{grid-column:1/-1!important;margin-bottom:0!important}
  body.print-statistics-only #statistics .statistics-card{margin:0!important}
  body.print-statistics-only #statistics .statistics-card-batch-full .batch-line-chart svg{width:100%!important;min-width:0!important}
}


/* =========================================================
   V4.1 BUILD012 — MOBILE ADMIN ACCESS FIX
   ========================================================= */
.mobile-header-actions{display:flex;align-items:center;gap:8px}
.mobile-admin-btn{
  display:none;
  min-height:42px;
  padding:9px 13px;
  border-radius:12px;
  border:1px solid rgba(255,138,0,.45);
  background:linear-gradient(135deg,rgba(255,138,0,.18),rgba(255,94,0,.10));
  color:#ffb35c;
  font-weight:800;
  cursor:pointer;
}
.mobile-admin-btn.logged-in{
  border-color:rgba(46,204,113,.45);
  background:rgba(46,204,113,.12);
  color:#75e5a3;
}
@media(max-width:950px){
  .mobile-admin-btn{display:inline-flex!important;align-items:center;justify-content:center}
  #mainSidebar{
    display:flex!important;
    flex-direction:column!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
  }
  #mainSidebar nav{flex:0 0 auto!important}
  #mainSidebar .admin-status:first-of-type{margin-top:12px!important}
  #loginNavBtn{
    position:sticky!important;
    bottom:8px!important;
    z-index:4!important;
    margin-top:12px!important;
    background:linear-gradient(135deg,#ff8a00,#ff6500)!important;
    color:#111!important;
    font-weight:900!important;
    box-shadow:0 10px 28px rgba(0,0,0,.35)!important;
  }
  body.mobile-menu-open{overflow:hidden!important;touch-action:none}
}
@media(max-width:390px){
  .mobile-admin-btn{padding:8px 10px;font-size:12px}
  .mobile-menu-btn{width:40px;height:40px}
}

/* =========================================================
   V4.1 BUILD013 — ACTIVE MOBILE NAVIGATION DRAWER FIX
   ========================================================= */
@media(max-width:950px){
  .mobile-header{z-index:4900!important}
  #mobileOverlay.mobile-overlay{
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:5000!important;
    transition:opacity .24s ease,visibility .24s ease!important;
    background:rgba(3,6,10,.58)!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
  }
  #mobileOverlay.mobile-overlay.show{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  #mainSidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(88vw,330px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    z-index:5100!important;
    transform:translate3d(-110%,0,0)!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#111721!important;
    box-shadow:24px 0 70px rgba(0,0,0,.52)!important;
    transition:transform .26s ease,opacity .2s ease,visibility .26s ease!important;
  }
  #mainSidebar.open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  #mainSidebar::before{
    content:"MENU NAVIGASI";
    display:block;
    margin:0 8px 10px;
    padding:0 0 11px;
    border-bottom:1px solid var(--line);
    color:#ffad4d;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
  }
  .mobile-menu-btn[aria-expanded="true"]{
    border-color:rgba(255,138,0,.62)!important;
    background:rgba(255,138,0,.16)!important;
    color:#ffad4d!important;
  }
}


/* ===== V4.1 BUILD014 — FULL-VIEW BATCH CURVE 2001 TO LATEST ===== */
.statistics-card-batch-full .batch-line-chart{overflow:hidden!important;width:100%!important}
.statistics-card-batch-full .batch-line-chart svg{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:320px!important;
}
.statistics-card-batch-full .batch-axis-label{font-size:9px!important}
@media(max-width:620px){
  .statistics-card-batch-full .batch-line-chart svg{height:270px!important}
  .statistics-card-batch-full .batch-axis-label{font-size:8px!important}
  .statistics-card-batch-full .chart-value-label{font-size:9px!important}
}
@media print{
  body.print-statistics-only #statistics .statistics-card-batch-full .batch-line-chart svg{
    width:100%!important;min-width:0!important;max-width:100%!important;height:95mm!important
  }
}

/* =========================================================
   V4.1 BUILD015 — ANDROID STABLE DRAWER + CLEAN BATCH CHART
   ========================================================= */
.batch-chart-analysis{
  width:100%;
  margin-top:14px;
  padding:14px 16px;
  border-left:4px solid #ff8a00;
  border-radius:0 14px 14px 0;
  background:rgba(255,138,0,.07);
}
.batch-chart-analysis strong{display:block;margin-bottom:6px;color:#ffad4d;font-size:14px}
.batch-chart-analysis p{margin:0!important;color:var(--muted);font-size:13px;line-height:1.65}
.batch-chart-summary{display:none!important}

@media(max-width:950px){
  body.mobile-menu-open{overflow:hidden!important;touch-action:auto!important}
  #mobileOverlay.mobile-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:7000!important;
    background:rgba(0,0,0,.55)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    -webkit-filter:none!important;
  }
  #mainSidebar{
    z-index:7100!important;
    pointer-events:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    background:#0d141e!important;
    -webkit-transform:translateX(-105%)!important;
    transform:translateX(-105%)!important;
  }
  #mainSidebar.open{
    -webkit-transform:translateX(0)!important;
    transform:translateX(0)!important;
  }
  #mainSidebar, #mainSidebar *{filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mobile-header{z-index:7200!important}
  .statistics-card-batch-full .batch-chart-surface{display:block!important;min-height:0!important}
  .statistics-card-batch-full .batch-line-chart svg{height:280px!important}
}
@media(max-width:620px){
  .batch-chart-analysis{padding:12px 13px}
  .batch-chart-analysis p{font-size:12px}
  .statistics-card-batch-full .batch-line-chart svg{height:255px!important}
}
@media print{
  .batch-chart-analysis{background:#fff!important;border:1px solid #bbb!important;border-left:4px solid #d46f00!important}
  .batch-chart-analysis strong,.batch-chart-analysis p{color:#111!important}
}


/* =========================================================
   V4.1 BUILD016 — CLEAN PROFESSIONAL BATCH CHART
   ========================================================= */
.statistics-card-chart-only{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  grid-column:1/-1!important;
  padding:22px 24px 24px!important;
  overflow:hidden!important;
}
.statistics-card-chart-only .statistics-chart-title{
  width:100%!important;
  margin:0 0 10px!important;
  padding:0!important;
}
.statistics-card-chart-only .batch-chart-surface{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.statistics-card-chart-only .batch-line-chart{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(255,138,0,.045),rgba(255,138,0,0))!important;
  border-radius:16px!important;
}
.statistics-card-chart-only .batch-line-chart::before,
.statistics-card-chart-only .batch-line-chart::after{display:none!important;content:none!important}
.statistics-card-chart-only .batch-line-chart svg{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:330px!important;
  margin:0!important;
}
.statistics-card-chart-only .batch-chart-analysis{
  width:100%!important;
  box-sizing:border-box!important;
  margin:14px 0 0!important;
}
@media(max-width:620px){
  .statistics-card-chart-only{padding:16px!important}
  .statistics-card-chart-only .batch-line-chart svg{height:270px!important}
}
@media print{
  body.print-statistics-only #statistics .statistics-card-chart-only{
    width:100%!important;padding:6mm!important
  }
  body.print-statistics-only #statistics .statistics-card-chart-only .batch-line-chart svg{
    width:100%!important;max-width:100%!important;min-width:0!important;height:92mm!important
  }
}

/* =========================================================
   V4.1 BUILD017 — REAL MOBILE SIDEBAR STACKING FIX
   The overlay previously covered the drawer because .app created
   a z-index stacking context. The drawer is now above the overlay.
   ========================================================= */
@media (max-width:950px){
  html,body{overflow-x:hidden!important}
  .app{
    position:relative!important;
    z-index:auto!important;
    isolation:auto!important;
    filter:none!important;
    -webkit-filter:none!important;
    transform:none!important;
  }
  #mobileOverlay.mobile-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:8000!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    background:rgba(0,0,0,.52)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  #mobileOverlay.mobile-overlay.show{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  #mainSidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    z-index:8100!important;
    width:min(86vw,320px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(-105%,0,0)!important;
    -webkit-transform:translate3d(-105%,0,0)!important;
    background:#0d141e!important;
    color:#f4f7fb!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:22px 0 55px rgba(0,0,0,.55)!important;
    transition:transform .24s ease,opacity .18s ease,visibility .24s ease!important;
  }
  #mainSidebar.open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
  }
  #mainSidebar, #mainSidebar *{
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
  }
  #mainSidebar nav button{
    position:relative!important;
    z-index:1!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .mobile-header{z-index:8200!important}
  body.mobile-menu-open{overflow:hidden!important}
}

/* =========================================================
   V4.1 BUILD018 — PROFESSIONAL STATISTICS MERGED EDITION
   ========================================================= */
.statistics-page-three{gap:22px!important}
.statistics-grid-three{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important}
.statistics-grid-three .statistics-card-batch-full{grid-column:1/-1!important}
.statistics-card-chart-only{padding:24px!important;background:linear-gradient(145deg,rgba(13,22,32,.94),rgba(20,27,36,.88))!important}
.batch-professional-chart{width:100%;display:grid;gap:14px}
.batch-chart-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.batch-chart-kpis>div{padding:13px 14px;border:1px solid rgba(255,138,0,.18);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,138,0,.055));min-width:0}
.batch-chart-kpis span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:5px}
.batch-chart-kpis strong{font-size:22px;line-height:1;color:#fff}
.batch-chart-kpis small{display:block;color:#ffad4d;font-size:10px;margin-top:4px}
.professional-line-chart{position:relative;height:390px!important;border:1px solid rgba(255,138,0,.15)!important;background:radial-gradient(circle at 18% 0%,rgba(255,138,0,.11),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))!important;box-shadow:inset 0 1px rgba(255,255,255,.03),0 18px 35px rgba(0,0,0,.18);overflow:hidden!important}
.statistics-card-chart-only .professional-line-chart svg{height:100%!important;width:100%!important;min-width:0!important;max-width:none!important}
.professional-chart-line{stroke:url(#statLineGradient)!important;stroke-width:4.5!important;filter:url(#chartGlow)!important}
.professional-point circle:first-child{fill:#ff8a00;stroke:#fff;stroke-width:2;transition:r .18s ease,filter .18s ease}
.professional-point:hover circle:first-child,.professional-point:focus circle:first-child{r:7;filter:drop-shadow(0 0 8px rgba(255,138,0,.9))}
.point-hit{fill:transparent!important;stroke:none!important;pointer-events:all;cursor:pointer}
.batch-chart-tooltip{position:absolute;z-index:3;transform:translateX(-50%);min-width:170px;padding:10px 12px;border-radius:12px;background:rgba(7,12,18,.96);border:1px solid rgba(255,138,0,.4);box-shadow:0 14px 35px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;transition:.15s ease;text-align:left}
.batch-chart-tooltip.show{opacity:1;visibility:visible}
.batch-chart-tooltip strong{display:block;color:#fff;font-size:12px;margin-bottom:3px}.batch-chart-tooltip span{display:block;color:#ffb35a;font-size:11px}
.statistics-card-chart-only .batch-chart-analysis{margin-top:0!important;background:linear-gradient(135deg,rgba(255,138,0,.095),rgba(255,255,255,.025))!important;border:1px solid rgba(255,138,0,.24)!important;border-left:4px solid #ff8a00!important;border-radius:14px!important}
.statistics-grid-three>.statistics-card:not(.statistics-card-batch-full){background:linear-gradient(145deg,rgba(13,22,32,.94),rgba(20,27,36,.88));padding:22px}
.statistics-grid-three>.statistics-card:not(.statistics-card-batch-full) .chart-surface{min-height:330px}
@media(max-width:900px){.statistics-grid-three{grid-template-columns:1fr!important}.batch-chart-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.professional-line-chart{height:330px!important}}
@media(max-width:620px){.statistics-card-chart-only{padding:15px!important}.batch-chart-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.batch-chart-kpis>div{padding:10px}.batch-chart-kpis strong{font-size:18px}.professional-line-chart{height:285px!important}.batch-axis-label{font-size:8px!important}.axis-label-alt{transform:translateY(12px)}.statistics-grid-three>.statistics-card:not(.statistics-card-batch-full){padding:16px}.statistics-grid-three>.statistics-card:not(.statistics-card-batch-full) .chart-surface{min-height:280px}}
@media print{body.print-statistics-only #statistics .batch-chart-kpis{grid-template-columns:repeat(4,1fr)!important}body.print-statistics-only #statistics .professional-line-chart{height:92mm!important;background:#fff!important;border:1px solid #bbb!important}.batch-chart-tooltip{display:none!important}}

/* V4.3 News Portal */
.news-card-body>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.news-read-btn{text-decoration:none;text-align:center;justify-content:center;width:max-content;min-width:160px}.news-detail-page{max-width:1040px;margin:0 auto;padding:34px 18px 70px}.news-detail-shell{background:var(--panel,#fff);border:1px solid var(--border,#ddd);border-radius:18px;overflow:hidden;box-shadow:var(--shadow,0 12px 35px rgba(0,0,0,.12))}.news-detail-head{max-width:820px;margin:0 auto;padding:44px 42px 24px;text-align:center}.news-detail-head h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,4.5vw,48px);line-height:1.18;margin:14px 0 18px;letter-spacing:-.02em}.news-detail-meta{color:var(--muted,#666);display:flex;gap:10px 18px;justify-content:center;flex-wrap:wrap;font-size:14px}.news-detail-cover{max-width:760px;margin:8px auto 0;padding:0 34px}.news-detail-cover img{width:100%;max-height:460px;display:block;object-fit:contain;border-radius:12px;background:rgba(0,0,0,.025)}.news-detail-content{max-width:760px;margin:0 auto;padding:34px 42px;font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.95;text-align:justify;white-space:pre-wrap;color:var(--text,#222)}.news-detail-content:first-letter{font-size:3.4em;line-height:.86;float:left;margin:.12em .12em 0 0;font-weight:700;color:var(--accent,#e67e00)}.news-detail-second{max-width:760px;margin:0 auto;padding:0 34px 34px}.news-detail-second img{width:100%;max-height:440px;display:block;object-fit:contain;border-radius:12px;background:rgba(0,0,0,.025)}.news-detail-caption{text-align:center;color:var(--muted,#666);font-size:13px;margin-top:8px}.news-detail-actions{max-width:760px;margin:0 auto;padding:0 42px 42px;display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border,#ddd);padding-top:24px}@media(max-width:700px){.news-detail-head{padding:30px 20px 18px}.news-detail-cover{padding:0 18px}.news-detail-content{padding:28px 22px;font-size:17px;line-height:1.85;text-align:left}.news-detail-second{padding:0 18px 28px}.news-detail-actions{padding:22px 22px 30px}.community-dialog{width:min(96vw,760px)}}

/* V4.4 Media Center */
.media-center-page{padding:4px}.media-center-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:28px;border-radius:24px;background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(15,23,42,.04));border:1px solid var(--line);margin-bottom:18px}.media-center-hero h3{font-size:30px;margin:5px 0}.media-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:16px}.media-toolbar input,.media-toolbar select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text)}.media-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.media-summary div{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;flex-direction:column}.media-summary strong{font-size:24px}.media-summary span{color:var(--muted);font-size:12px}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.media-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}.media-cover{height:190px;background:linear-gradient(135deg,#172033,#34425d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;position:relative}.media-cover img{width:100%;height:100%;object-fit:cover}.media-kind{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-size:11px}.media-body{padding:17px}.media-body h4{font-size:18px;margin:7px 0}.media-body p{color:var(--muted);line-height:1.65;min-height:50px}.media-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}.media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.media-file-info{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}@media(max-width:950px){.media-grid{grid-template-columns:repeat(2,1fr)}.media-toolbar{grid-template-columns:1fr}.media-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.media-center-hero{align-items:flex-start;flex-direction:column}.media-grid{grid-template-columns:1fr}.media-summary{grid-template-columns:repeat(2,1fr)}}


/* V4.5 Agenda Alumni */
.agenda-page{padding:4px}.agenda-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:28px;border-radius:24px;background:linear-gradient(135deg,rgba(249,115,22,.17),rgba(59,130,246,.08));border:1px solid var(--line);margin-bottom:16px}.agenda-hero h3{font-size:30px;margin:5px 0}.agenda-next{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;border-radius:20px;background:linear-gradient(120deg,#172033,#283850);color:#fff;margin-bottom:16px}.agenda-next span{font-size:11px;font-weight:800;letter-spacing:.11em;color:#ffb35a}.agenda-next h4{font-size:24px;margin:5px 0}.agenda-next p{margin:0;color:#cbd5e1}.agenda-countdown{min-width:105px;height:105px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(249,115,22,.16);border:2px solid #f97316}.agenda-countdown strong{font-size:34px;line-height:1}.agenda-countdown small{color:#fff;margin-top:5px}.agenda-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:16px}.agenda-toolbar input,.agenda-toolbar select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text)}.agenda-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.agenda-summary div{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;flex-direction:column}.agenda-summary strong{font-size:24px}.agenda-summary span{color:var(--muted);font-size:12px}.agenda-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.agenda-card{display:grid;grid-template-columns:210px 1fr;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}.agenda-poster{min-height:250px;background:linear-gradient(145deg,#162033,#374968);position:relative;display:grid;place-items:center;color:#fff}.agenda-poster img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.agenda-type,.agenda-cancel-label{position:absolute;z-index:2;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.84);font-size:10px;font-weight:800}.agenda-cancel-label{left:auto;right:12px;background:#b91c1c}.agenda-date-badge{width:88px;height:88px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(249,115,22,.92);box-shadow:0 15px 35px rgba(0,0,0,.25)}.agenda-date-badge strong{font-size:35px;line-height:1}.agenda-date-badge span{font-size:13px;font-weight:800}.agenda-body{padding:20px;display:flex;flex-direction:column}.agenda-date-line{font-size:12px;font-weight:800;color:#f97316}.agenda-body h4{font-size:21px;margin:7px 0}.agenda-body p{color:var(--muted);line-height:1.65;margin:0 0 12px}.agenda-info{display:grid;gap:6px;color:var(--muted);font-size:12px}.agenda-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:15px}.agenda-cancelled{opacity:.72}.agenda-cancelled .agenda-poster img{filter:grayscale(1)}@media(max-width:1100px){.agenda-grid{grid-template-columns:1fr}}@media(max-width:760px){.agenda-hero{align-items:flex-start;flex-direction:column}.agenda-toolbar{grid-template-columns:1fr}.agenda-summary{grid-template-columns:repeat(2,1fr)}.agenda-next{align-items:flex-start}.agenda-countdown{min-width:88px;height:88px}.agenda-card{grid-template-columns:1fr}.agenda-poster{min-height:210px}}@media(max-width:480px){.agenda-next{flex-direction:column}.agenda-countdown{width:80px;height:80px}.agenda-summary{grid-template-columns:repeat(2,1fr)}}


/* V4.6 — Enterprise Admin Center */
.admin-enterprise-head{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px;border-radius:24px;background:linear-gradient(135deg,#111827,#1f2937 58%,#f97316);color:#fff;box-shadow:0 20px 46px rgba(15,23,42,.22);margin-bottom:20px}.admin-enterprise-head h3{font-size:30px;margin:5px 0 8px}.admin-enterprise-head p{max-width:760px;color:rgba(255,255,255,.78)}.admin-live-state{display:flex;align-items:center;gap:12px;min-width:210px;padding:14px 16px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px)}.admin-live-state div{display:grid;gap:3px}.admin-live-state small{color:rgba(255,255,255,.7)}
.admin-kpi-enterprise{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.admin-kpi-enterprise article{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 26px rgba(15,23,42,.07);display:grid;gap:7px;min-height:130px}.admin-kpi-enterprise span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.admin-kpi-enterprise strong{font-size:31px;color:var(--text)}.admin-kpi-enterprise small{color:var(--muted);line-height:1.35}
.admin-enterprise-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.admin-command-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 12px 32px rgba(15,23,42,.07)}.admin-command-card.wide{grid-column:1/-1}.admin-card-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.admin-card-title h4{font-size:19px;margin:0 0 4px}.admin-card-title p{margin:0;color:var(--muted);font-size:13px}.admin-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-quick-grid button{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;background:var(--soft);cursor:pointer;display:grid;gap:4px;color:var(--text);transition:.2s}.admin-quick-grid button:hover{transform:translateY(-2px);border-color:#f97316;box-shadow:0 8px 20px rgba(249,115,22,.12)}.admin-quick-grid span{font-size:11px;color:var(--muted)}
.admin-priority-list{display:grid;gap:10px}.admin-priority-item{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}.admin-priority-item .count{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff7ed;color:#c2410c;font-size:19px;font-weight:900}.admin-priority-item .copy{flex:1}.admin-priority-item .copy strong{display:block;margin-bottom:3px}.admin-priority-item .copy span{font-size:12px;color:var(--muted)}.admin-priority-item.clear .count{background:#ecfdf5;color:#047857}.admin-health-list{display:grid;gap:0}.admin-health-list div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.admin-health-list div:last-child{border-bottom:0}.admin-health-list span{color:var(--muted)}.admin-health-list .healthy{color:#059669}.admin-loading{padding:18px;text-align:center;color:var(--muted)}
@media(max-width:1200px){.admin-kpi-enterprise{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){.admin-enterprise-head{align-items:flex-start;flex-direction:column}.admin-enterprise-grid{grid-template-columns:1fr}.admin-quick-grid{grid-template-columns:1fr}.admin-kpi-enterprise{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.admin-kpi-enterprise{grid-template-columns:1fr}.admin-enterprise-head{padding:20px}.admin-enterprise-head h3{font-size:24px}}

/* ===== Enterprise V5.0 Official ===== */
.home-live-overview{margin-top:28px;padding:28px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,249,252,.92));border:1px solid rgba(19,33,49,.08);box-shadow:0 24px 60px rgba(15,23,42,.10)}
.home-section-head h3,.analytics-enterprise-head h3{margin:5px 0 7px;font-size:clamp(24px,3vw,38px)}
.home-section-head p,.analytics-enterprise-head p{margin:0;color:var(--muted)}
.home-live-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
.home-live-kpis article,.visitor-kpis article{padding:20px;border-radius:20px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 28px rgba(15,23,42,.07)}
.home-live-kpis span,.visitor-kpis span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.home-live-kpis strong,.visitor-kpis strong{display:block;font-size:30px;margin:8px 0 3px}.home-live-kpis small,.visitor-kpis small{color:var(--muted)}
.home-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-feature-panel,.visitor-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:22px;padding:20px;box-shadow:0 12px 28px rgba(15,23,42,.06)}
.home-panel-head,.visitor-card-head,.analytics-enterprise-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.home-panel-head h4,.visitor-card-head h4{margin:0 0 4px;font-size:19px}.home-panel-head p,.visitor-card-head p{margin:0;color:var(--muted);font-size:13px}
.home-mini-list{display:grid;gap:10px;margin-top:16px}.home-mini-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;text-decoration:none;color:inherit;border:0;background:#f7f9fc;border-radius:16px;padding:14px;cursor:pointer}.home-mini-item:hover{transform:translateY(-1px);background:#fff3ea}.home-mini-item div{display:grid;gap:4px}.home-mini-item span{font-size:11px;font-weight:800;color:var(--orange);text-transform:uppercase}.home-mini-item strong{font-size:15px}.home-mini-item small,.home-empty,.home-loading{color:var(--muted)}
.analytics-enterprise-head{padding:26px;border-radius:24px;background:linear-gradient(135deg,#111827,#283548);color:#fff;margin-bottom:18px}.analytics-enterprise-head p{color:rgba(255,255,255,.72)}.analytics-period{display:flex;gap:10px}.analytics-period select{min-width:130px}
.visitor-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.visitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.visitor-card.wide{grid-column:1/-1}.visitor-bars{height:250px;display:flex;align-items:flex-end;gap:8px;overflow-x:auto;padding:25px 4px 5px}.visitor-bar-col{min-width:34px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:220px}.visitor-bar{width:70%;max-width:36px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#ff8a31,#e85d04);box-shadow:0 8px 16px rgba(232,93,4,.22)}.visitor-bar-value{font-size:11px;font-weight:800;margin-bottom:5px}.visitor-bar-col small{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:6px}.visitor-rank-list{display:grid;gap:10px;margin-top:15px}.visitor-rank{display:flex;justify-content:space-between;gap:12px;padding:13px;background:#f7f9fc;border-radius:14px}.visitor-rank div{display:grid;gap:3px}.visitor-rank span{font-size:12px;color:var(--muted)}.visitor-rank em{font-style:normal;font-weight:900;color:var(--orange)}
@media(max-width:900px){.home-live-kpis,.visitor-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.home-content-grid,.visitor-grid{grid-template-columns:1fr}.analytics-enterprise-head{flex-direction:column}.visitor-card.wide{grid-column:auto}}
@media(max-width:560px){.home-live-overview{padding:18px;border-radius:20px}.home-live-kpis,.visitor-kpis{grid-template-columns:1fr}.home-panel-head{flex-direction:column}.analytics-period{width:100%}.analytics-period select,.analytics-period button{flex:1}.visitor-bars{height:220px}.home-content-grid{gap:12px}}
@media print{#visitor-analytics{display:block!important}.analytics-enterprise-head{background:#fff!important;color:#000!important;border:1px solid #bbb}.analytics-enterprise-head p{color:#333!important}.visitor-card,.visitor-kpis article{box-shadow:none!important}}


/* ===== V5.2 PUBLICATION ACCESS + ACTIVE TESTIMONIALS ===== */
.home-live-kpis article,.home-feature-panel{
  background:linear-gradient(145deg,var(--panel),var(--panel-2))!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}
.home-live-kpis article{position:relative;overflow:hidden}
.home-live-kpis article::after{content:"";position:absolute;inset:auto -30px -45px auto;width:110px;height:110px;border-radius:50%;background:rgba(255,138,0,.08)}
.home-live-kpis strong,.home-feature-panel h4{color:var(--text)!important}
.publication-status,.testimonial-status{display:inline-flex;align-self:flex-start;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.04em}
.publication-status.pending,.testimonial-status.pending{background:rgba(255,157,46,.14);color:#ffad42;border:1px solid rgba(255,157,46,.28)}
.publication-status.rejected,.testimonial-status.rejected{background:rgba(235,87,87,.14);color:#ff7b7b;border:1px solid rgba(235,87,87,.28)}
.testimonial-card{position:relative}
.testimonial-status{position:absolute;right:16px;top:16px}
.testimonial-admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.testimonial-admin-actions .btn{padding:8px 10px;font-size:12px}
#testimonialSection .testimonial-form{background:linear-gradient(145deg,var(--panel),var(--panel-2))!important}

/* ===== V5.3 PORTAL ALUMNI CONTRAST FIX ===== */
.home-live-overview{
  background:linear-gradient(145deg,rgba(23,26,33,.98),rgba(31,35,44,.96))!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
  color:var(--text)!important;
}
.home-live-overview .home-section-head .eyebrow{
  color:var(--accent-2)!important;
}
.home-live-overview .home-section-head h3{
  color:var(--text)!important;
}
.home-live-overview .home-section-head p{
  color:var(--muted)!important;
}
.home-live-overview .home-live-kpis article,
.home-live-overview .home-feature-panel{
  background:linear-gradient(145deg,#171a21,#1f232c)!important;
  border:1px solid #343b47!important;
  color:var(--text)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
}
.home-live-overview .home-live-kpis span,
.home-live-overview .home-live-kpis small,
.home-live-overview .home-panel-head p,
.home-live-overview .home-mini-item small,
.home-live-overview .home-empty,
.home-live-overview .home-loading{
  color:#aeb7c4!important;
}
.home-live-overview .home-live-kpis strong,
.home-live-overview .home-panel-head h4,
.home-live-overview .home-mini-item strong{
  color:#f7f8fa!important;
}
.home-live-overview .home-mini-item{
  background:#11141a!important;
  border:1px solid #2d333d!important;
  color:#f7f8fa!important;
}
.home-live-overview .home-mini-item:hover{
  background:#20252e!important;
  border-color:rgba(255,138,0,.55)!important;
}
.home-live-overview .home-panel-head .btn{
  background:#232832!important;
  color:#fff!important;
  border-color:#3a424f!important;
}
.home-live-overview .home-panel-head .btn:hover{
  border-color:var(--accent)!important;
  color:var(--accent-2)!important;
}
@media print{
  .home-live-overview{background:#fff!important;color:#000!important;border:1px solid #bbb!important;box-shadow:none!important}
  .home-live-overview .home-section-head h3,.home-live-overview .home-panel-head h4,.home-live-overview .home-live-kpis strong,.home-live-overview .home-mini-item strong{color:#000!important}
  .home-live-overview .home-section-head p,.home-live-overview .home-live-kpis span,.home-live-overview .home-live-kpis small,.home-live-overview .home-panel-head p,.home-live-overview .home-mini-item small{color:#333!important}
  .home-live-overview .home-live-kpis article,.home-live-overview .home-feature-panel,.home-live-overview .home-mini-item{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #bbb!important}
}

/* ===== FINAL FIX: PORTAL ALUMNI CONTAINER TRANSPARENT ===== */
.home-live-overview{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.home-live-overview .home-section-head .eyebrow{
  color:#9aa8bb!important;
}
.home-live-overview .home-section-head h3{
  color:#f7f8fa!important;
}
.home-live-overview .home-section-head p{
  color:#9eabba!important;
}
@media print{
  .home-live-overview{
    background:#fff!important;
    border:1px solid #bbb!important;
  }
}


/* ===== GLASSCARD PAGE SUMMARY ENHANCEMENT ===== */
#dashboard .public-page-grid .glass-action{
  min-height:210px!important;
  grid-template-rows:auto auto auto 1fr auto!important;
}
#dashboard .public-page-grid .card-summary{
  grid-column:2!important;
  grid-row:2!important;
  margin-top:8px!important;
  color:rgba(232,237,245,.78)!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}
#dashboard .public-page-grid .card-features{
  grid-column:2!important;
  grid-row:3!important;
  display:block!important;
  margin-top:10px!important;
  color:#ffae55!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
#dashboard .public-page-grid em{grid-row:5!important}
@media(max-width:640px){
  #dashboard .public-page-grid .glass-action{min-height:178px!important}
  #dashboard .public-page-grid .card-summary{font-size:12px!important}
}

/* ===== GLASSCARD LAYOUT FIX — prevent overlapping text ===== */
#dashboard .public-page-grid{
  grid-template-columns:repeat(3,minmax(220px,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}
#dashboard .public-page-grid .glass-action{
  min-height:230px!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto 1fr auto!important;
  grid-template-areas:
    "icon title"
    "icon summary"
    ". features"
    ". spacer"
    "cta cta"!important;
  column-gap:14px!important;
  row-gap:0!important;
  align-content:start!important;
  align-items:start!important;
  justify-items:stretch!important;
  padding:18px!important;
  text-align:left!important;
  overflow:hidden!important;
}
#dashboard .public-page-grid .glass-action::after{display:none!important;content:none!important}
#dashboard .public-page-grid .glass-icon{
  grid-area:icon!important;
  width:48px!important;
  height:48px!important;
  margin:0!important;
  align-self:start!important;
}
#dashboard .public-page-grid .glass-action strong{
  grid-area:title!important;
  display:block!important;
  min-width:0!important;
  margin:3px 0 0!important;
  font-size:17px!important;
  line-height:1.25!important;
  color:#f7f8fb!important;
  overflow-wrap:anywhere!important;
}
#dashboard .public-page-grid .card-summary{
  grid-area:summary!important;
  display:block!important;
  min-width:0!important;
  margin:9px 0 0!important;
  color:#aeb8c6!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow-wrap:anywhere!important;
}
#dashboard .public-page-grid .card-features{
  grid-area:features!important;
  display:block!important;
  min-width:0!important;
  margin:10px 0 0!important;
  color:#ffad4d!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  overflow-wrap:anywhere!important;
}
#dashboard .public-page-grid .glass-action em{
  grid-area:cta!important;
  display:block!important;
  width:100%!important;
  margin:14px 0 0!important;
  padding:12px 0 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  color:#ff970f!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:1180px){
  #dashboard .public-page-grid{grid-template-columns:repeat(2,minmax(240px,1fr))!important}
}
@media(max-width:680px){
  #dashboard .public-page-grid{grid-template-columns:1fr!important;gap:12px!important}
  #dashboard .public-page-grid .glass-action{min-height:210px!important;padding:16px!important;grid-template-columns:48px minmax(0,1fr)!important;column-gap:12px!important}
  #dashboard .public-page-grid .glass-icon{width:44px!important;height:44px!important}
}

/* ===== FINAL QUICK ACCESS CARD FIX — clean, readable, no overlap ===== */
#dashboard .public-page-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
}
#dashboard .public-page-grid .glass-action{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  min-width:0!important;
  min-height:245px!important;
  height:auto!important;
  padding:20px!important;
  overflow:hidden!important;
  text-align:left!important;
}
#dashboard .public-page-grid .glass-action > *{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#dashboard .public-page-grid .glass-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:46px!important;
  height:46px!important;
  margin:0 0 14px!important;
  border-radius:14px!important;
  font-size:21px!important;
  line-height:1!important;
}
#dashboard .public-page-grid .glass-action strong{
  display:block!important;
  width:100%!important;
  margin:0!important;
  color:#f7f8fb!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:800!important;
  overflow-wrap:break-word!important;
}
#dashboard .public-page-grid .card-summary{
  display:block!important;
  width:100%!important;
  margin:10px 0 0!important;
  color:#aeb8c6!important;
  font-size:13px!important;
  line-height:1.6!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow-wrap:break-word!important;
}
#dashboard .public-page-grid .card-features{
  display:block!important;
  width:100%!important;
  margin:10px 0 0!important;
  color:#ffad4d!important;
  font-size:11px!important;
  line-height:1.5!important;
  font-weight:800!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow-wrap:break-word!important;
}
#dashboard .public-page-grid .glass-action em{
  display:block!important;
  width:100%!important;
  margin:auto 0 0!important;
  padding:14px 0 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  color:#ff970f!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
#dashboard .public-page-grid .glass-action::after{
  display:none!important;
  content:none!important;
}
@media(max-width:760px){
  #dashboard .public-page-grid{grid-template-columns:1fr!important}
  #dashboard .public-page-grid .glass-action{min-height:220px!important;padding:18px!important}
}


/* ===== FINAL COMPACT QUICK ACCESS CARDS ===== */
#dashboard .public-page-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(190px,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
#dashboard .public-page-grid .glass-action{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  grid-template-rows:auto auto 1fr auto!important;
  grid-template-areas:"icon title" "icon summary" ". spacer" "cta cta"!important;
  column-gap:14px!important;
  row-gap:0!important;
  min-height:170px!important;
  height:100%!important;
  padding:18px!important;
  align-items:start!important;
  overflow:hidden!important;
  text-align:left!important;
}
#dashboard .public-page-grid .glass-action > *{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  max-width:100%!important;
}
#dashboard .public-page-grid .glass-icon{
  grid-area:icon!important;
  width:46px!important;
  height:46px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  font-size:20px!important;
}
#dashboard .public-page-grid .glass-action strong{
  grid-area:title!important;
  margin:2px 0 0!important;
  font-size:17px!important;
  line-height:1.25!important;
  color:#f7f8fb!important;
  font-weight:800!important;
}
#dashboard .public-page-grid .card-summary{
  grid-area:summary!important;
  margin:8px 0 0!important;
  color:#aeb8c6!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:normal!important;
}
#dashboard .public-page-grid .card-features{display:none!important}
#dashboard .public-page-grid .glass-action em{
  grid-area:cta!important;
  display:block!important;
  width:100%!important;
  margin:16px 0 0!important;
  padding:12px 0 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  color:#ff970f!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}
#dashboard .public-page-grid .glass-action::after{display:none!important;content:none!important}
@media(max-width:1180px){#dashboard .public-page-grid{grid-template-columns:repeat(2,minmax(220px,1fr))!important}}
@media(max-width:680px){
 #dashboard .public-page-grid{grid-template-columns:1fr!important}
 #dashboard .public-page-grid .glass-action{min-height:155px!important;padding:16px!important}
}


/* ===== V5.4 MOBILE PORTRAIT + REVISION ===== */
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
main,.section,.app,.landing,.landing-shell,.input-layout,.statistics-page,.revision-page{min-width:0;max-width:100%}
img,video,canvas,svg{max-width:100%;height:auto}
.table-wrap,.preview-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;touch-action:pan-x pan-y}
.revision-page{display:flex;flex-direction:column;gap:18px}.revision-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(255,138,0,.12),transparent 45%),var(--panel)}.revision-hero h3{margin:6px 0 8px;font-size:28px}.revision-hero p{margin:0;color:var(--muted)}
.revision-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}.revision-search-row{display:flex;gap:10px}.revision-search-row input{flex:1;min-width:0}.revision-results{display:grid;gap:10px;margin-top:14px}.revision-result{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;text-align:left;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--text);cursor:pointer}.revision-result span{display:flex;flex-direction:column;gap:5px}.revision-result small{color:var(--muted)}.revision-result em{color:var(--accent);font-style:normal}.revision-selected{display:flex;flex-direction:column;gap:4px;padding:14px;margin-bottom:16px;border-radius:12px;background:rgba(255,138,0,.1);border:1px solid rgba(255,138,0,.3)}.revision-selected span{color:var(--muted);font-size:13px}.revision-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.revision-admin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.revision-admin-summary article{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.revision-admin-summary span{color:var(--muted);font-size:12px}.revision-admin-summary strong{display:block;font-size:28px;margin-top:8px}.revision-admin-list{display:grid;gap:14px}.revision-admin-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.revision-admin-head{display:flex;justify-content:space-between;gap:15px}.revision-admin-head h4{margin:0 0 5px}.revision-admin-head p{margin:0;color:var(--muted);font-size:12px}.revision-status{padding:6px 10px;border-radius:999px;height:max-content;font-size:11px;text-transform:uppercase}.revision-status.pending{background:rgba(255,138,0,.15);color:#ffb65c}.revision-status.approved{background:rgba(46,204,113,.15);color:#6be49c}.revision-status.rejected{background:rgba(255,93,93,.15);color:#ff8b8b}.revision-diffs{display:grid;gap:8px;margin:16px 0}.revision-diff{display:grid;grid-template-columns:130px 1fr 30px 1fr;gap:8px;align-items:center;padding:10px;border-radius:10px;background:#11141a}.revision-diff .old{color:#ff9b9b;text-decoration:line-through}.revision-diff .new{color:#7ce6a5}.revision-diff .arrow{text-align:center;color:var(--muted)}.revision-reason{padding:12px;border-left:3px solid var(--accent);background:rgba(255,138,0,.06);line-height:1.6}.statistics-card-duplicate-full{grid-column:1/-1}.duplicate-status{margin:0 0 12px;color:var(--muted);font-size:13px}.duplicate-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.duplicate-group{border:1px solid var(--line);border-radius:14px;padding:14px;background:#11141a}.duplicate-group-head{display:flex;justify-content:space-between;gap:10px}.duplicate-group-head span{color:var(--accent);font-size:12px}.duplicate-key{margin:8px 0;color:var(--muted);font-size:12px;word-break:break-all}.duplicate-record{padding:8px 0;border-top:1px solid var(--line)}.duplicate-record span{display:flex;flex-direction:column;gap:3px}.duplicate-record small{color:var(--muted)}
@media(max-width:950px){body{padding-top:64px}.app{display:block!important;width:100%}main{width:100%;padding:16px!important}aside{position:fixed!important;left:0;top:64px;bottom:0;width:min(86vw,320px);height:auto!important;z-index:1002;transform:translateX(-105%);transition:transform .25s ease;overflow-y:auto;border-right:1px solid var(--line)!important}aside.open{transform:translateX(0)}.mobile-header{display:flex!important}.topbar{display:none}.section{width:100%;overflow:visible}.landing{min-height:auto;padding:12px!important}.landing-shell{width:100%;grid-template-columns:1fr!important}.home-actions,.public-page-grid{grid-template-columns:1fr!important}.form-grid-page,.input-layout,.statistics-grid,.statistics-grid-three{grid-template-columns:1fr!important}.statistics-card,.statistics-card-batch-full,.statistics-card-duplicate-full{grid-column:auto!important}.duplicate-results{grid-template-columns:1fr}.revision-admin-summary{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){main{padding:12px!important}.landing{padding:4px!important}.hero-title{font-size:clamp(38px,13vw,52px)!important}.glass-action{min-height:130px}.revision-hero{align-items:flex-start;flex-direction:column;padding:18px}.revision-search-row{flex-direction:column}.revision-card{padding:14px}.revision-admin-summary{grid-template-columns:1fr}.revision-admin-head{flex-direction:column}.revision-diff{grid-template-columns:1fr;gap:4px}.revision-diff .arrow{text-align:left}.revision-actions{flex-direction:column-reverse}.revision-actions .btn{width:100%}.table-wrap table,.preview-table table{min-width:760px}.mobile-header{width:100vw}.user{max-width:100%}}

/* ===== V6.0 APPROVAL CENTER ===== */
.nav-badge{display:inline-flex;min-width:22px;height:22px;padding:0 7px;border-radius:999px;align-items:center;justify-content:center;background:#dc2626;color:#fff;font-size:11px;font-weight:800;margin-left:auto}.nav-badge[hidden]{display:none!important}
.approval-center-page{max-width:1500px;margin:0 auto}.approval-center-hero{align-items:center}.approval-dashboard-grid,.database-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.approval-dashboard-grid article,.database-health-grid article{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.approval-dashboard-grid span,.database-health-grid span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.approval-dashboard-grid strong,.database-health-grid strong{display:block;font-size:30px;line-height:1.1;margin:8px 0}.approval-dashboard-grid small,.database-health-grid small{color:var(--muted)}
.database-health-grid article{border-left:4px solid var(--primary)}.approval-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px;margin:22px 0 12px;scrollbar-width:thin}.approval-tabs button{white-space:nowrap;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer}.approval-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff}.approval-tabs button span{display:inline-flex;min-width:21px;height:21px;align-items:center;justify-content:center;margin-left:5px;border-radius:999px;background:rgba(255,255,255,.22)}.approval-tab-panel{display:none}.approval-tab-panel.active{display:block}.approval-filter-row{display:flex;justify-content:flex-end;margin-bottom:12px}.approval-filter-row select{min-width:220px}.audit-log-list{display:grid;gap:10px}.audit-log-item{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:15px;padding:15px 17px}.audit-log-item div{display:grid;gap:4px}.audit-log-item span,.audit-log-item small{color:var(--muted);font-size:12px}.revision-admin-card.needs_revision{border-left:4px solid #f59e0b}.revision-status.needs_revision{background:#fef3c7;color:#92400e}
@media(max-width:900px){.approval-dashboard-grid,.database-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approval-center-hero{align-items:flex-start}.audit-log-item{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.approval-dashboard-grid,.database-health-grid{grid-template-columns:1fr 1fr;gap:9px}.approval-dashboard-grid article,.database-health-grid article{padding:13px;border-radius:14px}.approval-dashboard-grid strong,.database-health-grid strong{font-size:23px}.approval-tabs{margin-inline:-4px}.revision-admin-card{overflow:hidden}.revision-diff{grid-template-columns:1fr}.revision-diff .arrow{display:none}.revision-actions{display:grid;grid-template-columns:1fr}.revision-actions .btn{width:100%}.audit-log-item{padding:13px}}


/* ===== V6.1 ELEGANT MASCOT + COMPACT CONTENT CARDS ===== */
.mascot-wrap{padding:10px;border:3px solid rgba(255,255,255,.96);border-radius:28px;background:rgba(255,255,255,.10);box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.35);overflow:hidden}
.mascot-wrap img{border-radius:20px;display:block}
.public-page-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;gap:10px!important}
.public-page-grid .glass-action{min-height:70px!important;padding:12px 14px!important;border-radius:16px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important}
.public-page-grid .glass-action .glass-icon{font-size:20px!important;flex:0 0 auto}
.public-page-grid .glass-action strong{font-size:13px!important;line-height:1.2!important;margin:0!important}
.news-grid,.publication-grid,.discussion-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;gap:14px!important}
.compact-content-card,.publication-card{min-height:0!important;border-radius:18px!important;overflow:hidden!important}
.news-card.compact-content-card,.discussion-card.compact-content-card{display:grid!important;grid-template-columns:116px minmax(0,1fr)!important;align-items:stretch!important}
.compact-thumb,.publication-image{width:116px!important;min-height:126px!important;height:100%!important;border-radius:0!important;overflow:hidden!important;background:rgba(255,255,255,.06)!important}
.compact-thumb img,.publication-image img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.compact-card-body,.discussion-card-main,.publication-body{padding:14px 16px!important;min-width:0!important}
.compact-card-body h4,.discussion-card-main h4,.publication-body h4{font-size:16px!important;margin:7px 0 5px!important;line-height:1.3!important}
.content-preview,.publication-narrative{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;font-size:13px!important;line-height:1.55!important;margin:8px 0!important;max-height:4.65em!important}
.text-more-link,.discussion-details>summary{display:inline-flex;color:var(--accent,#ff9d2e);font-weight:800;font-size:12px;cursor:pointer;text-decoration:none;margin-top:4px}
.discussion-details>summary{list-style:none}.discussion-details>summary::-webkit-details-marker{display:none}.discussion-details[open]>summary{margin-bottom:12px}.discussion-full-content{white-space:pre-wrap;line-height:1.7}
.publication-card{display:grid!important;grid-template-columns:116px minmax(0,1fr)!important}
.publication-actions .btn.primary{font-size:12px!important;padding:7px 10px!important}
.compact-preview{min-height:100px!important;max-height:180px!important}.compact-preview img{width:100%;height:100%;max-height:180px;object-fit:contain}
@media(max-width:600px){.mascot-wrap{border-width:2px;border-radius:22px;padding:7px}.public-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.public-page-grid .glass-action{min-height:62px!important;padding:10px!important}.news-grid,.publication-grid,.discussion-list{grid-template-columns:1fr!important}.news-card.compact-content-card,.discussion-card.compact-content-card,.publication-card{grid-template-columns:92px minmax(0,1fr)!important}.compact-thumb,.publication-image{width:92px!important;min-height:118px!important}.compact-card-body,.discussion-card-main,.publication-body{padding:12px!important}}


/* ===== V6.1.1 MOBILE ALUMNI TABLE HORIZONTAL SCROLL FIX ===== */
.mobile-scroll-hint{display:none}
.alumni-table-scroll{position:relative;width:100%;max-width:100%;overflow-x:auto!important;overflow-y:visible;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-gutter:stable;overscroll-behavior-x:contain}
.alumni-table-scroll .alumni-data-table{width:max-content!important;min-width:1100px!important;table-layout:auto}
.alumni-table-scroll th,.alumni-table-scroll td{white-space:nowrap}
.alumni-table-scroll th:nth-child(2),.alumni-table-scroll td:nth-child(2),
.alumni-table-scroll th:nth-child(5),.alumni-table-scroll td:nth-child(5),
.alumni-table-scroll th:nth-child(6),.alumni-table-scroll td:nth-child(6),
.alumni-table-scroll th:nth-child(7),.alumni-table-scroll td:nth-child(7){white-space:normal;min-width:150px}
@media(max-width:950px){
  #alumni.section.active{overflow:visible!important;max-width:100%!important;min-width:0!important}
  #alumni .placeholder,#alumni .filter-panel,#alumni .view-toggle{max-width:100%;min-width:0}
  .mobile-scroll-hint{display:block;margin:8px 0;padding:9px 12px;border-radius:10px;background:rgba(255,138,0,.10);border:1px solid rgba(255,138,0,.28);color:var(--accent);font-size:11px;font-weight:800;text-align:center}
  .alumni-table-scroll{display:block!important;width:100%!important;max-width:calc(100vw - 24px)!important;overflow-x:scroll!important;overflow-y:hidden!important;padding-bottom:8px;cursor:grab}
  .alumni-table-scroll:active{cursor:grabbing}
  .alumni-table-scroll::-webkit-scrollbar{height:9px}
  .alumni-table-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
  .alumni-table-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
  .alumni-table-scroll .alumni-data-table{display:table!important;width:1100px!important;min-width:1100px!important;max-width:none!important}
  .alumni-table-scroll .alumni-data-table thead{display:table-header-group!important}
  .alumni-table-scroll .alumni-data-table tbody{display:table-row-group!important}
  .alumni-table-scroll .alumni-data-table tr{display:table-row!important}
  .alumni-table-scroll .alumni-data-table th,.alumni-table-scroll .alumni-data-table td{display:table-cell!important}
}
@media(max-width:620px){
  .alumni-table-scroll{max-width:calc(100vw - 24px)!important}
  .alumni-table-scroll .alumni-data-table{width:1050px!important;min-width:1050px!important}
}

/* ===== V6.2 COMPACT BUTTON GLASSCARDS + PHOTO REVISION ===== */
#dashboard .public-page-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:flex-start!important}
#dashboard .public-page-grid .glass-action{width:auto!important;min-width:0!important;min-height:0!important;height:auto!important;padding:8px 12px!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;flex:0 0 auto!important}
#dashboard .public-page-grid .glass-action .glass-icon{font-size:16px!important;line-height:1!important;margin:0!important}
#dashboard .public-page-grid .glass-action strong{font-size:13px!important;line-height:1.15!important;white-space:nowrap!important;margin:0!important}
#dashboard .public-page-grid .glass-action span:not(.glass-icon),#dashboard .public-page-grid .glass-action small,#dashboard .public-page-grid .glass-action em,#dashboard .public-page-grid .glass-action p{display:none!important}
.revision-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}.revision-photo-grid>div{display:grid;gap:8px}.revision-photo-preview{min-height:170px;border:1px dashed var(--line);border-radius:14px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;padding:10px;color:var(--muted);overflow:hidden}.revision-photo-preview img{width:150px;height:150px;object-fit:cover;border-radius:12px}.revision-photo-diff img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.14)}.revision-photo-diff .old,.revision-photo-diff .new{display:flex;align-items:center;justify-content:center}
@media(max-width:620px){#dashboard .public-page-grid{gap:7px!important}#dashboard .public-page-grid .glass-action{padding:7px 10px!important}#dashboard .public-page-grid .glass-action strong{font-size:12px!important}.revision-photo-grid{grid-template-columns:1fr}.revision-photo-preview{min-height:145px}}


/* ===== V6.3 PREMIUM WHITE MASCOT FRAME + BRANDING MANAGER ===== */
#dashboard .mascot-wrap{
  padding:12px!important;
  border:7px solid #fff!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07))!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 0 1px rgba(20,26,38,.16),inset 0 0 0 1px rgba(255,255,255,.65)!important;
  overflow:hidden!important;
}
#dashboard .mascot-wrap img{
  display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;
  object-fit:contain!important;border-radius:20px!important;background:rgba(255,255,255,.035)!important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.28))!important;
}
.branding-manager-card{grid-column:span 2}.branding-preview{min-height:260px;display:flex;align-items:center;justify-content:center;padding:14px;border:5px solid #fff;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:0 16px 38px rgba(0,0,0,.22);overflow:hidden}.branding-preview img{display:block;max-width:100%;width:auto;height:270px;object-fit:contain;border-radius:16px}.branding-manager-card input[type=file]{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--text)}
@media(max-width:900px){.branding-manager-card{grid-column:1/-1}}
@media(max-width:620px){#dashboard .mascot-wrap{padding:8px!important;border-width:5px!important;border-radius:22px!important}#dashboard .mascot-wrap img{border-radius:14px!important}.branding-preview{min-height:210px;border-width:4px;border-radius:19px}.branding-preview img{height:220px}}

/* =========================================================
   V7.0 INDUSTRIAL FRESH — TOP NAVIGATION
   ========================================================= */
:root{--industrial-blue:#8db7cd;--industrial-deep:#0b1118;--nav-height:92px}
body{
  background-color:#0b1118!important;
  background-image:linear-gradient(rgba(7,12,17,.79),rgba(8,13,18,.9)),url('../img/industrial-isometric.svg')!important;
  background-size:cover,cover!important;background-position:center top!important;background-attachment:fixed!important;
}
body::before{background:radial-gradient(circle at 78% 8%,rgba(255,138,0,.13),transparent 28%),linear-gradient(180deg,rgba(11,17,24,.05),rgba(11,17,24,.72))!important;pointer-events:none}
.app{display:block!important;min-height:100vh!important}
#mainSidebar{
  position:sticky!important;top:0!important;z-index:7000!important;width:100%!important;height:auto!important;min-height:var(--nav-height)!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:22px!important;
  padding:13px clamp(18px,3vw,48px)!important;border-right:0!important;border-bottom:1px solid rgba(141,183,205,.2)!important;
  background:linear-gradient(180deg,rgba(9,15,21,.96),rgba(12,19,27,.91))!important;backdrop-filter:blur(20px)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.35)!important;overflow:visible!important;
}
#mainSidebar .brand{margin:0!important;min-width:200px!important}
#mainSidebar .logo{border-radius:12px!important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(255,138,0,.22)!important}
#mainSidebar .brand h1{font-size:15px!important;letter-spacing:.08em!important}
#mainSidebar .brand span{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.11em!important}
#mainSidebar nav{display:flex!important;align-items:center!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 2px!important;scrollbar-width:thin!important}
#mainSidebar nav button{
  width:auto!important;min-width:max-content!important;margin:0!important;padding:10px 12px!important;text-align:center!important;border-radius:10px!important;
  color:#aebdca!important;font-size:12px!important;font-weight:750!important;border:1px solid transparent!important;transition:.2s ease!important;
}
#mainSidebar nav button:hover{color:#fff!important;background:rgba(141,183,205,.08)!important;border-color:rgba(141,183,205,.14)!important}
#mainSidebar nav button.active{color:#111820!important;background:linear-gradient(135deg,#ffb347,#ff8100)!important;border-color:transparent!important;box-shadow:0 8px 22px rgba(255,138,0,.2)!important}
#mainSidebar .admin-status{display:none!important}
#mainSidebar .aside-note{display:none!important}
main{padding:28px clamp(18px,3.2vw,52px) 70px!important;max-width:1500px!important;margin:0 auto!important}
.topbar{padding:15px 20px!important;border:1px solid rgba(141,183,205,.16)!important;border-radius:18px!important;background:rgba(14,22,30,.62)!important;backdrop-filter:blur(14px)!important}
.title h2{letter-spacing:-.02em}.title p{color:#9db0bf!important}
.section{animation:industrialFade .28s ease}
@keyframes industrialFade{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}
.landing{min-height:auto!important;padding:28px 0 48px!important}
.landing-shell{width:100%!important;max-width:1380px!important;padding:38px!important;border:1px solid rgba(141,183,205,.17)!important;border-radius:30px!important;background:linear-gradient(135deg,rgba(17,28,38,.83),rgba(8,14,20,.67))!important;box-shadow:0 30px 90px rgba(0,0,0,.38)!important;backdrop-filter:blur(8px)!important}
.hero-title{font-size:clamp(44px,6vw,82px)!important;text-shadow:0 16px 45px rgba(0,0,0,.45)!important}
.hero-sub{color:#b8c6d1!important}.eyebrow{color:#ff9a25!important}
.mascot-wrap::before{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.97) 0 36%,rgba(220,230,236,.93) 60%,rgba(255,138,0,.15) 76%,transparent 78%)!important;box-shadow:0 28px 70px rgba(0,0,0,.4),0 0 0 1px rgba(141,183,205,.22),0 0 65px rgba(255,138,0,.16)!important}
.glass-action{background:linear-gradient(145deg,rgba(28,43,55,.84),rgba(10,18,25,.67))!important;border-color:rgba(141,183,205,.17)!important}
.glass-action:hover{background:linear-gradient(145deg,rgba(36,52,65,.92),rgba(13,22,30,.82))!important}
.card,.panel,.placeholder,.statistics-card,.publication-card,.discussion-card,.community-hero,.alumni-hero,.testimonial-section{backdrop-filter:blur(12px)}
.mobile-header{display:none!important}
@media(max-width:1180px){
  #mainSidebar{grid-template-columns:auto minmax(0,1fr)!important;gap:14px!important}
  #mainSidebar nav{grid-column:1/-1!important;width:100%!important}
}
@media(max-width:820px){
  body{background-attachment:scroll!important;background-size:auto 1000px!important}
  .mobile-header{display:flex!important;position:sticky!important;top:0!important;z-index:8300!important;background:rgba(8,14,20,.96)!important}
  #mainSidebar{position:fixed!important;top:62px!important;left:0!important;right:0!important;bottom:0!important;height:auto!important;min-height:0!important;width:100%!important;display:block!important;padding:14px!important;transform:translateY(-120%)!important;transition:transform .25s ease!important;overflow-y:auto!important;border-bottom:0!important}
  #mainSidebar.open{transform:translateY(0)!important}
  #mainSidebar .brand{display:none!important}
  #mainSidebar nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
  #mainSidebar nav button{width:100%!important;min-width:0!important;white-space:normal!important;padding:13px 10px!important;text-align:left!important}
  main{padding:16px 14px 55px!important}
  .topbar{margin-top:4px!important}.landing-shell{padding:22px 16px!important;border-radius:22px!important}
}
@media(max-width:520px){#mainSidebar nav{grid-template-columns:1fr!important}.landing-shell{padding:18px 12px!important}}
@media print{body{background:#fff!important;background-image:none!important}#mainSidebar{display:none!important}}

/* =========================================================
   V7.1 NAVIGATION READABILITY + VISITOR ANALYTICS CONTRAST
   ========================================================= */
:root{--nav-height:118px}
#mainSidebar{
  grid-template-columns:minmax(210px,auto) minmax(0,1fr)!important;
  align-items:start!important;
  gap:16px 26px!important;
  padding:14px clamp(18px,2.6vw,42px) 16px!important;
}
#mainSidebar .brand{align-self:center!important;padding-top:3px!important}
#mainSidebar nav{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-content:center!important;
  gap:8px!important;
  overflow:visible!important;
  padding:2px 0!important;
}
#mainSidebar nav button{
  min-height:42px!important;
  padding:10px 15px!important;
  border-radius:13px!important;
  font-size:13.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(141,183,205,.10)!important;
}
#mainSidebar nav button:hover{
  transform:translateY(-1px)!important;
  background:rgba(141,183,205,.12)!important;
  border-color:rgba(141,183,205,.24)!important;
}
#mainSidebar nav button.active{
  background:linear-gradient(135deg,#ffb347,#ff8100)!important;
  border-color:transparent!important;
}

/* Visitor Analytics: dark industrial cards with clear hierarchy */
#visitor-analytics{color:#eef5f8!important}
#visitor-analytics .analytics-enterprise-head{
  background:linear-gradient(135deg,rgba(17,29,40,.98),rgba(25,43,56,.96))!important;
  border:1px solid rgba(141,183,205,.24)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
}
#visitor-analytics .analytics-enterprise-head h3,
#visitor-analytics .visitor-card h4{color:#fff!important}
#visitor-analytics .analytics-enterprise-head p,
#visitor-analytics .visitor-card-head p{color:#b8c8d3!important}
#visitor-analytics .analytics-period select{
  color:#eef5f8!important;
  background:#111d27!important;
  border:1px solid rgba(141,183,205,.28)!important;
}
#visitor-analytics .analytics-period select option{color:#111!important;background:#fff!important}
#visitor-analytics .visitor-kpis article,
#visitor-analytics .visitor-card{
  color:#edf4f7!important;
  background:linear-gradient(145deg,rgba(22,35,46,.96),rgba(12,22,30,.94))!important;
  border:1px solid rgba(141,183,205,.18)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.25)!important;
}
#visitor-analytics .visitor-kpis article{position:relative;overflow:hidden}
#visitor-analytics .visitor-kpis article::after{
  content:"";position:absolute;right:-25px;top:-30px;width:95px;height:95px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,0,.18),transparent 68%);pointer-events:none
}
#visitor-analytics .visitor-kpis span,
#visitor-analytics .visitor-kpis small,
#visitor-analytics .visitor-bar-col small,
#visitor-analytics .visitor-rank span{color:#aebfca!important}
#visitor-analytics .visitor-kpis strong{color:#fff!important;text-shadow:0 5px 18px rgba(0,0,0,.22)}
#visitor-analytics .visitor-bar-value{color:#f7fbfd!important}
#visitor-analytics .visitor-rank{
  color:#edf4f7!important;
  background:rgba(141,183,205,.08)!important;
  border:1px solid rgba(141,183,205,.11)!important;
}
#visitor-analytics .table-wrap{
  background:rgba(7,15,22,.48)!important;
  border:1px solid rgba(141,183,205,.14)!important;
  border-radius:16px!important;
  overflow:auto!important;
}
#visitor-analytics table{color:#edf4f7!important;background:transparent!important}
#visitor-analytics table thead th{
  color:#ffb15b!important;background:#111d27!important;border-bottom:1px solid rgba(141,183,205,.22)!important
}
#visitor-analytics table tbody td{color:#dbe7ed!important;border-bottom:1px solid rgba(141,183,205,.10)!important}
#visitor-analytics table tbody tr:hover{background:rgba(141,183,205,.06)!important}
#visitor-analytics .empty{color:#b8c8d3!important}

@media(max-width:1280px) and (min-width:821px){
  #mainSidebar{grid-template-columns:1fr!important}
  #mainSidebar .brand{justify-self:start!important}
  #mainSidebar nav{width:100%!important}
}
@media(max-width:820px){
  :root{--nav-height:62px}
  #mainSidebar nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #mainSidebar nav button{min-height:48px!important;font-size:14px!important;padding:12px 13px!important;white-space:normal!important}
}
@media(max-width:520px){#mainSidebar nav{grid-template-columns:1fr!important}}
@media print{
  #visitor-analytics{color:#111!important}
  #visitor-analytics .visitor-card,#visitor-analytics .visitor-kpis article{background:#fff!important;color:#111!important;border:1px solid #bbb!important}
  #visitor-analytics .visitor-card h4,#visitor-analytics .visitor-kpis strong{color:#111!important;text-shadow:none!important}
  #visitor-analytics table,#visitor-analytics table tbody td{color:#111!important}
  #visitor-analytics table thead th{color:#111!important;background:#eee!important}
}

/* =========================================================
   V7.2 INDUSTRIAL COMMAND CENTER UI
   Web implementation of the approved visual reference
   ========================================================= */
:root{--nav-height:96px}
body{
  background-color:#07111a!important;
  background-image:
    linear-gradient(180deg,rgba(4,11,17,.18),rgba(4,10,15,.76)),
    url('../img/industrial-isometric.svg')!important;
  background-size:cover,cover!important;
  background-position:center top,center top!important;
  background-attachment:fixed!important;
}
#mainSidebar{
  min-height:86px!important;height:auto!important;
  grid-template-columns:250px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:10px 20px!important;
  background:linear-gradient(180deg,rgba(8,20,30,.98),rgba(8,17,26,.96))!important;
  border-bottom:1px solid rgba(133,178,205,.20)!important;
}
#mainSidebar .brand{min-width:230px!important}
#mainSidebar .logo{width:46px!important;height:46px!important;clip-path:polygon(25% 6%,75% 6%,100% 25%,100% 75%,75% 94%,25% 94%,0 75%,0 25%);border-radius:0!important}
#mainSidebar .brand h1{font-size:16px!important;color:#fff!important}
#mainSidebar .brand span{color:#ff9a22!important;font-weight:800!important}
#mainSidebar nav{display:grid!important;grid-template-rows:auto auto!important;gap:7px!important;width:100%!important;overflow:visible!important;padding:0!important}
#mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{display:flex;align-items:stretch;gap:4px;min-width:0}
#mainSidebar nav .nav-primary{justify-content:space-between}
#mainSidebar nav .nav-admin{justify-content:flex-end}
#mainSidebar nav button{
  position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-width:72px!important;min-height:62px!important;padding:7px 8px 6px!important;margin:0!important;
  border-radius:13px!important;background:transparent!important;border:1px solid transparent!important;
  color:#d7e0e7!important;font-size:11px!important;font-weight:700!important;line-height:1.12!important;letter-spacing:0!important;
  white-space:nowrap!important;text-align:center!important;overflow:visible!important;
}
#mainSidebar nav .nav-admin button{min-height:30px!important;min-width:auto!important;flex-direction:row!important;padding:7px 12px!important;font-size:11px!important;border-color:rgba(134,177,201,.12)!important;background:rgba(255,255,255,.025)!important}
#mainSidebar nav button::before{
  position:static!important;left:auto!important;top:auto!important;transform:none!important;
  display:block!important;margin:0 0 6px!important;font-size:20px!important;line-height:1!important;color:#e8eff4!important;opacity:1!important;
}
#mainSidebar nav .nav-admin button::before{display:none!important}
#mainSidebar nav button[data-section="dashboard"]::before{content:"⌂"!important}
#mainSidebar nav button[data-section="visitor-analytics"]::before{content:"◉"!important}
#mainSidebar nav button[data-section="alumni"]::before{content:"♙"!important}
#mainSidebar nav button[data-section="publication"]::before{content:"▤"!important}
#mainSidebar nav button[data-section="media"]::before{content:"▣"!important}
#mainSidebar nav button[data-section="agenda"]::before{content:"▦"!important}
#mainSidebar nav button[data-section="news"]::before{content:"▧"!important}
#mainSidebar nav button[data-section="discussion"]::before{content:"♧"!important}
#mainSidebar nav button[data-section="statistics"]::before{content:"⌁"!important}
#mainSidebar nav button[data-section="input"]::before{content:"▥"!important}
#mainSidebar nav button:hover{background:rgba(80,133,166,.10)!important;border-color:rgba(133,178,205,.18)!important;transform:translateY(-1px)!important}
#mainSidebar nav button.active{color:#ff9a22!important;background:linear-gradient(180deg,rgba(32,56,73,.84),rgba(14,29,41,.82))!important;border-color:rgba(255,145,26,.18)!important;box-shadow:inset 0 -3px 0 #ff8a00,0 8px 24px rgba(0,0,0,.18)!important}
#mainSidebar nav button.active::before{color:#ff9418!important}
main{padding-top:22px!important;max-width:1520px!important}
.topbar{background:linear-gradient(135deg,rgba(9,20,30,.92),rgba(12,27,39,.88))!important;border-color:rgba(131,178,205,.20)!important}

/* Analytics command-center composition */
#visitor-analytics .analytics-enterprise-head{
  min-height:150px!important;padding:28px 30px!important;align-items:center!important;
  background:linear-gradient(90deg,rgba(7,18,28,.94),rgba(12,30,44,.80)),url('../img/industrial-isometric.svg') center 38%/cover!important;
  border-radius:20px!important;border-color:rgba(255,142,21,.22)!important;
}
#visitor-analytics .analytics-enterprise-head h3{font-size:clamp(30px,3.2vw,48px)!important;letter-spacing:-.035em!important}
#visitor-analytics .analytics-enterprise-head .eyebrow{letter-spacing:.22em!important;font-size:13px!important}
#visitor-analytics .analytics-period{align-self:flex-start!important;padding-top:0!important}
#visitor-analytics .visitor-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
#visitor-analytics .visitor-kpis article{min-height:132px!important;padding:22px!important;border-radius:19px!important}
#visitor-analytics .visitor-kpis article::before{content:"";display:block;width:42px;height:42px;margin-bottom:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffbb62,#ff7b00 68%,#b84200);box-shadow:0 0 0 7px rgba(255,133,0,.08),0 10px 28px rgba(255,115,0,.22)}
#visitor-analytics .visitor-kpis strong{font-size:34px!important;line-height:1!important}
#visitor-analytics .visitor-grid{grid-template-columns:1.25fr .95fr .95fr!important;gap:14px!important}
#visitor-analytics .visitor-card{border-radius:19px!important;padding:20px!important}
#visitor-analytics .visitor-card.wide{grid-column:span 2!important}
#visitor-analytics .visitor-bars{min-height:260px!important}

@media(max-width:1350px) and (min-width:821px){
  #mainSidebar{grid-template-columns:210px minmax(0,1fr)!important}
  #mainSidebar nav button{min-width:62px!important;font-size:10px!important;padding-left:5px!important;padding-right:5px!important}
  #mainSidebar nav button::before{font-size:18px!important}
}
@media(max-width:1120px) and (min-width:821px){
  #mainSidebar{grid-template-columns:1fr!important}
  #mainSidebar .brand{display:none!important}
  #mainSidebar nav .nav-primary{justify-content:center;flex-wrap:wrap}
}
@media(max-width:820px){
  body{background-attachment:scroll!important}
  #mainSidebar nav{display:block!important}
  #mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:10px!important}
  #mainSidebar nav button,#mainSidebar nav .nav-admin button{min-height:56px!important;flex-direction:row!important;justify-content:flex-start!important;gap:10px!important;padding:12px 13px!important;font-size:13px!important;text-align:left!important;white-space:normal!important}
  #mainSidebar nav button::before,#mainSidebar nav .nav-admin button::before{display:block!important;margin:0!important;font-size:18px!important;min-width:22px!important}
  #visitor-analytics .visitor-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #visitor-analytics .visitor-grid{grid-template-columns:1fr!important}
  #visitor-analytics .visitor-card.wide{grid-column:auto!important}
}
@media(max-width:520px){
  #mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{grid-template-columns:1fr!important}
  #visitor-analytics .visitor-kpis{grid-template-columns:1fr!important}
  #visitor-analytics .analytics-enterprise-head{padding:22px 18px!important}
}

/* =========================================================
   V7.3 MOBILE NAVIGATION + LIGHT INDUSTRIAL MODE
   ========================================================= */
@media (max-width:820px){
  :root{
    --mobile-surface:#f7fafc;
    --mobile-card:#ffffff;
    --mobile-ink:#14212b;
    --mobile-muted:#5f7180;
    --mobile-line:#d9e4ea;
  }

  html,body{min-height:100%;background:#edf3f6!important;color:var(--mobile-ink)!important}
  body{
    background-image:
      linear-gradient(rgba(239,245,248,.91),rgba(239,245,248,.96)),
      url('../img/industrial-isometric.svg')!important;
    background-size:auto,900px auto!important;
    background-position:center top,center 62px!important;
    background-attachment:scroll!important;
  }

  .mobile-header{
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid var(--mobile-line)!important;
    box-shadow:0 8px 24px rgba(29,55,70,.10)!important;
  }
  .mobile-brand strong{color:#172630!important}
  .mobile-brand span{color:#6a7d89!important}
  .mobile-menu-btn,.mobile-admin-btn{
    color:#172630!important;background:#f2f6f8!important;
    border:1px solid #d5e1e7!important;
  }
  .mobile-menu-btn:active,.mobile-admin-btn:active{background:#e7eef2!important}

  /* Drawer becomes a genuinely scrollable mobile sheet */
  #mainSidebar{
    position:fixed!important;
    top:62px!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:calc(100dvh - 62px)!important;max-height:calc(100dvh - 62px)!important;
    padding:14px 14px 28px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f4f8fa 100%)!important;
    border:0!important;border-top:1px solid #dce6eb!important;
    box-shadow:0 22px 48px rgba(21,42,55,.20)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-gutter:stable!important;
  }
  #mainSidebar.open{transform:translateY(0)!important}
  #mainSidebar nav{
    display:block!important;width:100%!important;min-height:max-content!important;
    overflow:visible!important;padding:0 0 22px!important;
  }
  #mainSidebar nav .nav-primary,
  #mainSidebar nav .nav-admin{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;margin:0 0 14px!important;
    overflow:visible!important;min-height:max-content!important;
  }
  #mainSidebar nav .nav-admin{
    padding-top:14px!important;border-top:1px solid #dce5ea!important;
  }
  #mainSidebar nav button,
  #mainSidebar nav .nav-admin button{
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;min-width:0!important;min-height:58px!important;
    padding:12px 13px!important;gap:10px!important;
    color:#273844!important;background:#fff!important;
    border:1px solid #d9e4ea!important;border-radius:14px!important;
    box-shadow:0 5px 14px rgba(35,63,78,.06)!important;
    font-size:13px!important;font-weight:750!important;line-height:1.2!important;
    white-space:normal!important;text-align:left!important;
  }
  #mainSidebar nav button::before,
  #mainSidebar nav .nav-admin button::before{
    display:grid!important;place-items:center!important;flex:0 0 34px!important;
    width:34px!important;height:34px!important;min-width:34px!important;margin:0!important;
    border-radius:10px!important;color:#435966!important;background:#edf3f6!important;
    font-size:18px!important;
  }
  #mainSidebar nav .nav-admin button::before{content:"⚙"!important}
  #mainSidebar nav button.active{
    color:#17232b!important;background:linear-gradient(135deg,#fff4e5,#ffffff)!important;
    border-color:#ffad4d!important;
    box-shadow:inset 4px 0 0 #ff8a00,0 7px 18px rgba(255,138,0,.12)!important;
  }
  #mainSidebar nav button.active::before{color:#fff!important;background:#ff8a00!important}
  #mainSidebar .admin-status,#mainSidebar .aside-note{display:none!important}

  .mobile-overlay.show{background:rgba(26,40,49,.32)!important;backdrop-filter:blur(2px)!important}

  main{padding:76px 12px 24px!important;max-width:none!important;color:var(--mobile-ink)!important}
  .topbar,
  .landing-shell,
  .glass-card,
  .card,
  .panel,
  .table-wrap,
  .section > .form-card{
    background:rgba(255,255,255,.94)!important;
    color:var(--mobile-ink)!important;
    border-color:#d8e3e9!important;
    box-shadow:0 10px 28px rgba(31,58,72,.09)!important;
  }
  .topbar h2,.topbar strong,.section h2,.section h3,.section h4,
  .glass-card h3,.glass-card h4,.card h3,.card h4{color:#172630!important}
  .topbar p,.section p,.section small,.muted{color:var(--mobile-muted)!important}

  input,select,textarea{
    color:#182833!important;background:#fff!important;border-color:#cad8df!important;
  }

  /* Analytics is brighter on phones while retaining industrial accents */
  #visitor-analytics{color:var(--mobile-ink)!important}
  #visitor-analytics .analytics-enterprise-head{
    min-height:auto!important;padding:22px 18px!important;
    background:
      linear-gradient(110deg,rgba(255,255,255,.94),rgba(238,246,250,.91)),
      url('../img/industrial-isometric.svg') center/cover!important;
    border-color:#cfdde4!important;box-shadow:0 12px 30px rgba(32,60,76,.10)!important;
  }
  #visitor-analytics .analytics-enterprise-head h3,
  #visitor-analytics .visitor-card h4{color:#172630!important}
  #visitor-analytics .analytics-enterprise-head p,
  #visitor-analytics .visitor-card-head p{color:#607482!important}
  #visitor-analytics .analytics-period{width:100%!important;display:grid!important;grid-template-columns:1fr auto!important;gap:9px!important}
  #visitor-analytics .analytics-period select{color:#172630!important;background:#fff!important;border-color:#cbd9e0!important}
  #visitor-analytics .visitor-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #visitor-analytics .visitor-kpis article,
  #visitor-analytics .visitor-card{
    background:rgba(255,255,255,.96)!important;color:#172630!important;
    border-color:#d5e1e7!important;box-shadow:0 9px 24px rgba(30,58,72,.08)!important;
  }
  #visitor-analytics .visitor-kpis strong,#visitor-analytics .visitor-bar-value{color:#172630!important;text-shadow:none!important}
  #visitor-analytics .visitor-kpis span,#visitor-analytics .visitor-kpis small,
  #visitor-analytics .visitor-bar-col small,#visitor-analytics .visitor-rank span{color:#667b88!important}
  #visitor-analytics .visitor-rank{background:#f1f6f8!important;color:#22333e!important;border-color:#d9e4e9!important}
  #visitor-analytics .table-wrap{background:#fff!important;border-color:#d8e3e8!important}
  #visitor-analytics table{color:#243641!important}
  #visitor-analytics table thead th{color:#8a4a00!important;background:#fff4e6!important;border-bottom-color:#f2c78e!important}
  #visitor-analytics table tbody td{color:#334752!important;border-bottom-color:#e3ebef!important}
}

@media (max-width:520px){
  #mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{grid-template-columns:1fr 1fr!important}
  #mainSidebar nav button,#mainSidebar nav .nav-admin button{font-size:12.5px!important;padding:11px!important}
  #visitor-analytics .visitor-kpis{grid-template-columns:1fr!important}
}

@media (max-width:380px){
  #mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{grid-template-columns:1fr!important}
}

/* =========================================================
   V7.4 MOBILE STABLE DRAWER + ACCESSIBLE CONTRAST
   Final overrides: do not place new mobile rules above this block.
   ========================================================= */
@media (max-width:820px){
  html{overflow-x:hidden!important;background:#eef3f6!important}
  body{
    overflow-x:hidden!important;
    background:#eef3f6!important;
    color:#172630!important;
  }
  body.mobile-menu-open{
    overflow:hidden!important;
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  body.mobile-menu-open main,
  body.mobile-menu-open .app > main{
    pointer-events:none!important;
    user-select:none!important;
  }

  .mobile-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;height:62px!important;min-height:62px!important;
    z-index:12020!important;
    background:#ffffff!important;color:#172630!important;
    border-bottom:1px solid #d5e0e6!important;
    box-shadow:0 5px 18px rgba(24,48,62,.12)!important;
  }
  .mobile-brand,.mobile-brand strong{color:#172630!important}
  .mobile-brand span{color:#5c707d!important}
  .mobile-menu-btn,.mobile-admin-btn{
    color:#172630!important;background:#f2f6f8!important;
    border:1px solid #ccd9e0!important;box-shadow:none!important;
  }

  #mobileOverlay.mobile-overlay{
    display:block!important;position:fixed!important;inset:62px 0 0 0!important;
    z-index:12000!important;background:rgba(9,20,28,.58)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
    backdrop-filter:blur(3px)!important;
  }
  #mobileOverlay.mobile-overlay.show{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }

  #mainSidebar{
    display:block!important;position:fixed!important;
    top:62px!important;left:0!important;right:auto!important;bottom:0!important;
    width:min(88vw,360px)!important;height:calc(100dvh - 62px)!important;
    max-height:calc(100dvh - 62px)!important;margin:0!important;
    padding:14px 14px 28px!important;z-index:12010!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    background:#f7fafc!important;color:#172630!important;
    border:0!important;border-right:1px solid #d4e0e6!important;
    box-shadow:18px 0 45px rgba(10,27,37,.24)!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .24s ease!important;
  }
  #mainSidebar.open{transform:translate3d(0,0,0)!important}
  #mainSidebar .brand{display:none!important}
  #mainSidebar nav{display:block!important;width:100%!important;padding:0 0 24px!important;overflow:visible!important}
  #mainSidebar nav .nav-primary,
  #mainSidebar nav .nav-admin{
    display:grid!important;grid-template-columns:1fr!important;
    gap:9px!important;width:100%!important;margin:0 0 14px!important;
  }
  #mainSidebar nav .nav-admin{
    padding-top:14px!important;border-top:1px solid #d8e3e9!important;
  }
  #mainSidebar nav button,
  #mainSidebar nav .nav-admin button{
    position:relative!important;display:flex!important;align-items:center!important;
    justify-content:flex-start!important;flex-direction:row!important;
    width:100%!important;min-width:0!important;min-height:54px!important;
    margin:0!important;padding:11px 13px!important;gap:11px!important;
    color:#21323d!important;background:#ffffff!important;
    border:1px solid #d5e1e7!important;border-radius:13px!important;
    box-shadow:0 4px 12px rgba(31,57,70,.06)!important;
    font-size:14px!important;font-weight:750!important;line-height:1.25!important;
    letter-spacing:0!important;text-align:left!important;white-space:normal!important;
    opacity:1!important;-webkit-text-fill-color:#21323d!important;
  }
  #mainSidebar nav button::before,
  #mainSidebar nav .nav-admin button::before{
    position:static!important;transform:none!important;display:grid!important;place-items:center!important;
    flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;
    margin:0!important;border-radius:9px!important;
    color:#354b58!important;background:#eaf1f4!important;font-size:17px!important;
  }
  #mainSidebar nav button.active{
    color:#172630!important;-webkit-text-fill-color:#172630!important;
    background:#fff6ea!important;border-color:#f0a24c!important;
    box-shadow:inset 4px 0 0 #ff8a00,0 5px 14px rgba(255,138,0,.10)!important;
  }
  #mainSidebar nav button.active::before{color:#fff!important;background:#ff8a00!important}
  #mainSidebar .admin-status,#mainSidebar .aside-note{display:none!important}

  main,.app main{
    width:100%!important;max-width:100%!important;margin:0!important;
    padding:76px 12px 24px!important;overflow:visible!important;
    color:#172630!important;background:transparent!important;
  }
  .section,.landing,.landing-shell,.card,.panel,.glass-card,.form-card,.table-wrap,
  .statistics-card,.visitor-card,.visitor-kpis article{
    color:#172630!important;
  }
  .card,.panel,.glass-card,.form-card,.table-wrap,.landing-shell,
  .statistics-card,#visitor-analytics .visitor-card,#visitor-analytics .visitor-kpis article{
    background:#ffffff!important;border-color:#d5e1e7!important;
  }
  h1,h2,h3,h4,h5,h6,.section-title,.card-title,.glass-card h3,.panel h3{
    color:#14242e!important;-webkit-text-fill-color:#14242e!important;
  }
  p,small,.muted,.helper-text,.subtitle,.description{
    color:#586d79!important;-webkit-text-fill-color:#586d79!important;
  }
  label{color:#263b47!important;-webkit-text-fill-color:#263b47!important}
  input,select,textarea{
    color:#172630!important;-webkit-text-fill-color:#172630!important;
    background:#fff!important;border-color:#bfced6!important;opacity:1!important;
  }
  input::placeholder,textarea::placeholder{color:#7a8c96!important;opacity:1!important}
  table,tbody,td{color:#263a46!important}
  thead th{color:#6f3a00!important;background:#fff3e3!important}

  #visitor-analytics,#visitor-analytics *{text-shadow:none!important}
  #visitor-analytics .analytics-enterprise-head{
    background:linear-gradient(120deg,#ffffff,#edf5f8)!important;
    color:#172630!important;border-color:#cbd9e0!important;
  }
  #visitor-analytics .analytics-enterprise-head h3,
  #visitor-analytics .visitor-card h4,
  #visitor-analytics .visitor-kpis strong{color:#14242e!important;-webkit-text-fill-color:#14242e!important}
  #visitor-analytics .analytics-enterprise-head p,
  #visitor-analytics .visitor-kpis span,
  #visitor-analytics .visitor-kpis small,
  #visitor-analytics .visitor-card p{color:#5c707d!important;-webkit-text-fill-color:#5c707d!important}
}


/* =========================================================
   V7.5 REAL MOBILE REBUILD — FULL SCREEN NAVIGATION
   Cache-busted from index.php with app.css?v=7.5.0
   ========================================================= */
.mobile-drawer-title{display:none}
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{padding-top:62px!important;background:#f0f4f6!important;color:#15242d!important}

  .mobile-header{
    display:flex!important;position:fixed!important;inset:0 0 auto 0!important;
    height:62px!important;padding:9px 12px!important;z-index:30020!important;
    background:#ffffff!important;border-bottom:1px solid #d6e0e5!important;
    box-shadow:0 5px 18px rgba(15,35,47,.14)!important;
  }
  .mobile-brand strong{display:block!important;color:#15242d!important;font-size:14px!important}
  .mobile-brand span{display:block!important;color:#667985!important;font-size:10px!important}
  .mobile-menu-btn,.mobile-admin-btn{
    min-width:42px!important;height:42px!important;color:#15242d!important;
    background:#f4f7f9!important;border:1px solid #cbd8df!important;border-radius:11px!important;
    opacity:1!important;-webkit-text-fill-color:#15242d!important;
  }

  #mobileOverlay.mobile-overlay{display:none!important}

  #mainSidebar{
    display:flex!important;flex-direction:column!important;position:fixed!important;
    inset:62px 0 0 0!important;width:100vw!important;height:calc(100dvh - 62px)!important;
    max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;
    z-index:30010!important;background:#f3f7f9!important;color:#15242d!important;
    border:0!important;box-shadow:none!important;overflow:hidden!important;
    transform:translate3d(0,-110%,0)!important;opacity:0!important;visibility:hidden!important;
    pointer-events:none!important;transition:transform .24s ease,opacity .18s ease,visibility .18s ease!important;
  }
  #mainSidebar.open{
    transform:translate3d(0,0,0)!important;opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;
  }
  #mainSidebar .brand,#mainSidebar .admin-status,#mainSidebar .aside-note{display:none!important}
  #mainSidebar .mobile-drawer-title{
    display:flex!important;flex:0 0 auto!important;align-items:flex-start!important;justify-content:center!important;
    flex-direction:column!important;min-height:68px!important;padding:12px 16px!important;
    background:#172630!important;border-bottom:3px solid #ff8a00!important;
  }
  #mainSidebar .mobile-drawer-title span{color:#fff!important;font-size:14px!important;font-weight:900!important;letter-spacing:.08em!important}
  #mainSidebar .mobile-drawer-title small{color:#c7d3d9!important;font-size:11px!important;margin-top:3px!important}

  #mainSidebar nav{
    display:block!important;flex:1 1 auto!important;width:100%!important;min-height:0!important;
    padding:14px 14px 32px!important;overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;touch-action:pan-y!important;
  }
  #mainSidebar nav .nav-primary,#mainSidebar nav .nav-admin{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
    width:100%!important;margin:0 0 15px!important;padding:0!important;
  }
  #mainSidebar nav .nav-admin{padding-top:14px!important;border-top:1px solid #ccd9df!important}
  #mainSidebar nav button,#mainSidebar nav .nav-admin button{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    flex-direction:row!important;width:100%!important;min-width:0!important;min-height:58px!important;
    padding:11px 14px!important;margin:0!important;gap:12px!important;
    color:#1c303b!important;-webkit-text-fill-color:#1c303b!important;background:#fff!important;
    border:1px solid #cedbe1!important;border-radius:14px!important;
    box-shadow:0 4px 12px rgba(28,51,64,.07)!important;
    font-size:14px!important;font-weight:800!important;line-height:1.25!important;
    text-align:left!important;white-space:normal!important;opacity:1!important;
  }
  #mainSidebar nav button::before,#mainSidebar nav .nav-admin button::before{
    position:static!important;display:grid!important;place-items:center!important;flex:0 0 36px!important;
    width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;
    color:#2f4754!important;background:#e9f0f3!important;border-radius:10px!important;font-size:18px!important;
  }
  #mainSidebar nav button.active{
    color:#172630!important;-webkit-text-fill-color:#172630!important;background:#fff3e2!important;
    border-color:#ff9e2d!important;box-shadow:inset 5px 0 0 #ff8a00,0 6px 16px rgba(255,138,0,.13)!important;
  }
  #mainSidebar nav button.active::before{background:#ff8a00!important;color:#fff!important}

  body.mobile-menu-open{
    position:fixed!important;overflow:hidden!important;width:100%!important;height:100%!important;
    touch-action:none!important;overscroll-behavior:none!important;
  }
  body.mobile-menu-open main,body.mobile-menu-open .app>main{
    visibility:hidden!important;pointer-events:none!important;
  }

  .app{display:block!important;width:100%!important;min-height:100%!important}
  main,.app main{
    display:block!important;width:100%!important;max-width:100%!important;margin:0!important;
    padding:14px 12px 28px!important;background:transparent!important;color:#15242d!important;
  }
  .topbar{display:none!important}
  .section{width:100%!important;max-width:100%!important;color:#15242d!important}
  .landing,.landing-shell,.card,.panel,.glass-card,.form-card,.table-wrap,.statistics-card,
  #visitor-analytics .visitor-card,#visitor-analytics .visitor-kpis article{
    background:#fff!important;color:#15242d!important;border-color:#d2dee4!important;
  }
  h1,h2,h3,h4,h5,h6,strong,label{color:#15242d!important;-webkit-text-fill-color:#15242d!important}
  p,small,.muted,.helper-text,.subtitle,.description{color:#586d78!important;-webkit-text-fill-color:#586d78!important}
  input,select,textarea{background:#fff!important;color:#15242d!important;-webkit-text-fill-color:#15242d!important;border-color:#bfcdd5!important}
}

/* =========================================================
   V8.0 MOBILE BRAND PARITY — DESKTOP IDENTITY ON MOBILE
   Final source-of-truth mobile rules. Branding follows desktop.
   ========================================================= */
@media (max-width:820px){
  :root{--mobile-header-h:66px}

  html,body{
    background-color:#07111a!important;
    color:#eef2f7!important;
  }
  body{
    padding-top:var(--mobile-header-h)!important;
    background-image:
      linear-gradient(180deg,rgba(5,13,20,.78),rgba(5,13,20,.92)),
      url('../img/industrial-isometric.svg')!important;
    background-size:auto,1050px auto!important;
    background-position:center top,center var(--mobile-header-h)!important;
    background-attachment:scroll!important;
  }

  /* Mobile header uses exactly the desktop brand language: white title + orange subtitle */
  .mobile-header{
    height:var(--mobile-header-h)!important;
    padding:9px 12px!important;
    background:linear-gradient(180deg,rgba(8,20,30,.99),rgba(8,17,26,.98))!important;
    border-bottom:1px solid rgba(133,178,205,.20)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
  }
  .mobile-logo{
    width:44px!important;height:44px!important;border-radius:0!important;
    clip-path:polygon(25% 6%,75% 6%,100% 25%,100% 75%,75% 94%,25% 94%,0 75%,0 25%)!important;
    background:linear-gradient(145deg,#ffad38,#ff7b00)!important;
    color:#111820!important;border:0!important;box-shadow:0 0 0 3px rgba(255,145,26,.12)!important;
    font-size:14px!important;font-weight:900!important;
  }
  .mobile-brand{min-width:0!important;gap:10px!important}
  .mobile-brand strong{
    display:block!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
    font-size:15px!important;font-weight:900!important;line-height:1.05!important;
    letter-spacing:.07em!important;text-shadow:none!important;
  }
  .mobile-brand span{
    display:block!important;color:#ff9a22!important;-webkit-text-fill-color:#ff9a22!important;
    font-size:10px!important;font-weight:800!important;line-height:1.2!important;
    letter-spacing:.09em!important;margin-top:3px!important;
  }
  .mobile-header-actions{gap:7px!important;flex:0 0 auto!important}
  .mobile-menu-btn,.mobile-admin-btn{
    height:42px!important;min-width:42px!important;padding:0 11px!important;
    color:#eef2f7!important;-webkit-text-fill-color:#eef2f7!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(133,178,205,.24)!important;border-radius:11px!important;
    font-weight:800!important;box-shadow:none!important;
  }
  .mobile-menu-btn:active,.mobile-admin-btn:active{background:rgba(255,145,26,.16)!important;border-color:#ff9220!important}

  /* Full-screen drawer below header, independent scroll, page fully locked */
  #mainSidebar{
    inset:var(--mobile-header-h) 0 0 0!important;
    height:calc(100dvh - var(--mobile-header-h))!important;
    background:linear-gradient(180deg,#0b1924 0%,#08131c 100%)!important;
    color:#eef2f7!important;
  }
  #mainSidebar .mobile-drawer-title{
    min-height:66px!important;padding:12px 16px!important;
    background:#0d202e!important;border-bottom:3px solid #ff8a00!important;
  }
  #mainSidebar .mobile-drawer-title span{color:#fff!important;-webkit-text-fill-color:#fff!important}
  #mainSidebar .mobile-drawer-title small{color:#aebcc6!important;-webkit-text-fill-color:#aebcc6!important}
  #mainSidebar nav{padding:14px 13px 34px!important;background:transparent!important}
  #mainSidebar nav .nav-admin{border-top-color:rgba(133,178,205,.18)!important}
  #mainSidebar nav button,#mainSidebar nav .nav-admin button{
    min-height:58px!important;
    color:#e8eff4!important;-webkit-text-fill-color:#e8eff4!important;
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
    border-color:rgba(133,178,205,.20)!important;
    box-shadow:0 5px 16px rgba(0,0,0,.18)!important;
  }
  #mainSidebar nav button::before,#mainSidebar nav .nav-admin button::before{
    color:#e8eff4!important;background:rgba(133,178,205,.12)!important;
  }
  #mainSidebar nav button.active{
    color:#ff9a22!important;-webkit-text-fill-color:#ff9a22!important;
    background:linear-gradient(145deg,rgba(255,138,0,.17),rgba(255,138,0,.07))!important;
    border-color:rgba(255,154,34,.58)!important;
    box-shadow:inset 5px 0 0 #ff8a00,0 7px 18px rgba(0,0,0,.22)!important;
  }
  #mainSidebar nav button.active::before{background:#ff8a00!important;color:#101820!important}

  body.mobile-menu-open{
    position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
    overflow:hidden!important;touch-action:none!important;overscroll-behavior:none!important;
  }
  body.mobile-menu-open main,body.mobile-menu-open .app>main{
    visibility:hidden!important;pointer-events:none!important;
  }

  /* Content remains desktop-dark, with readable contrast; no mobile-only rebranding */
  main,.app main{background:transparent!important;color:#eef2f7!important;padding:14px 12px 30px!important}
  .section{color:#eef2f7!important}
  .landing,.landing-shell,.card,.panel,.glass-card,.form-card,.table-wrap,.statistics-card,
  #visitor-analytics .visitor-card,#visitor-analytics .visitor-kpis article{
    background:linear-gradient(145deg,rgba(16,31,43,.96),rgba(10,22,32,.96))!important;
    color:#eef2f7!important;border-color:rgba(133,178,205,.22)!important;
  }
  h1,h2,h3,h4,h5,h6,strong,label{color:#f4f7fa!important;-webkit-text-fill-color:#f4f7fa!important}
  p,small,.muted,.helper-text,.subtitle,.description{color:#aebbc5!important;-webkit-text-fill-color:#aebbc5!important}
  input,select,textarea{
    background:#101f2b!important;color:#eef2f7!important;-webkit-text-fill-color:#eef2f7!important;
    border-color:rgba(133,178,205,.30)!important;
  }
}

@media (max-width:390px){
  .mobile-brand strong{font-size:13px!important}
  .mobile-brand span{font-size:9px!important}
  .mobile-admin-btn{display:none!important}
}

/* =========================================================
   V8.1 MOBILE HERO TI-UIN — ORANGE 3D ACCENT
   Mobile only. Desktop/laptop styling remains unchanged.
   ========================================================= */
@media (max-width:820px){
  #dashboard .hero-copy .hero-title .accent{
    display:inline-block!important;
    color:#ff9418!important;
    -webkit-text-fill-color:#ff9418!important;
    font-weight:950!important;
    letter-spacing:-.045em!important;
    text-shadow:
      0 1px 0 #df7000,
      0 2px 0 #c65e00,
      0 3px 0 #a94c00,
      0 4px 0 #873900,
      0 5px 0 #632800,
      0 8px 10px rgba(0,0,0,.58),
      0 0 16px rgba(255,139,18,.32)!important;
    transform:translateZ(0)!important;
  }
}

/* =========================================================
   V8.2 MOBILE DATA ALUMNI COLOR RESTORE
   Restore desktop color hierarchy specifically for Data Alumni.
   ========================================================= */
@media (max-width:820px){
  #alumni,
  #alumni .section-head,
  #alumni .toolbar,
  #alumni .table-wrap,
  #alumni .card,
  #alumni .panel,
  #alumni .glass-card{
    color:#f4f6f8!important;
    -webkit-text-fill-color:initial!important;
  }

  #alumni h1,
  #alumni h2,
  #alumni h3,
  #alumni h4,
  #alumni h5,
  #alumni h6,
  #alumni strong,
  #alumni .title,
  #alumni .section-title,
  #alumni .card-title,
  #alumni td{
    color:#f4f6f8!important;
    -webkit-text-fill-color:#f4f6f8!important;
  }

  #alumni .accent,
  #alumni .kpi-value,
  #alumni .stat-value,
  #alumni .badge.pending,
  #alumni .verified-count,
  #alumni thead th,
  #alumni th{
    color:#ff9a22!important;
    -webkit-text-fill-color:#ff9a22!important;
  }

  #alumni p,
  #alumni small,
  #alumni .muted,
  #alumni .helper-text,
  #alumni .subtitle,
  #alumni .description,
  #alumni .card span{
    color:#d2dbe2!important;
    -webkit-text-fill-color:#d2dbe2!important;
  }

  #alumni .empty{
    color:#d2dbe2!important;
    -webkit-text-fill-color:#d2dbe2!important;
  }

  #alumni input,
  #alumni select,
  #alumni textarea{
    color:#f4f6f8!important;
    -webkit-text-fill-color:#f4f6f8!important;
  }

  #alumni input::placeholder,
  #alumni textarea::placeholder{
    color:#aebbc5!important;
    opacity:1!important;
  }
}

/* =========================================================
   V8.3 DATA ALUMNI STATUS BADGE
   Status container black; verified label orange.
   ========================================================= */
#alumni .badge.verified,
#alumni .alumni-card-status.verified{
  background:#050505!important;
  color:#ff9818!important;
  -webkit-text-fill-color:#ff9818!important;
  border:1px solid rgba(255,152,24,.72)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

@media (max-width:820px){
  #alumni .badge.verified,
  #alumni .alumni-card-status.verified{
    background:#050505!important;
    color:#ff9818!important;
    -webkit-text-fill-color:#ff9818!important;
    border-color:rgba(255,152,24,.78)!important;
  }
}