:root{
    --navy-900:#0E2A20;
    --navy-800:#143A2B;
    --navy-700:#1C4B36;
    --navy-600:#246045;
    --gold-500:#63C98D;
    --gold-600:#46A872;
    --cream-50:#F6F9F5;
    --cream-100:#EAF1EA;
    --ink-900:#1B1B1F;
    --ink-700:#3B3D45;
    --slate-500:#5F7268;
    --slate-300:#A9B8AE;
    --line:#DFE8DE;
    --white:#FFFFFF;

    --c-novel:#CBE79F;
    --c-novel-ink:#4C6B14;
    --c-sains:#8FD6A6;
    --c-sains-ink:#1E6B41;
    --c-pengembangan:#6FC3AE;
    --c-pengembangan-ink:#12564B;
    --c-sejarah:#B4E4CC;
    --c-sejarah-ink:#2A6B49;
    --c-biografi:#9FD98A;
    --c-biografi-ink:#3E6B1A;

    --radius-card:14px;
    --radius-pill:999px;
    --shadow-soft:0 1px 2px rgba(14,42,32,.06), 0 8px 20px -12px rgba(14,42,32,.15);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--cream-50);
    color:var(--ink-900);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{font-family:'Fraunces',serif;}

  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important;}
  }

  /* ---------- Layout shell ---------- */
  .shell{
    display:flex;
    min-height:100vh;
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:240px;
    flex-shrink:0;
    background:var(--navy-900);
    color:var(--cream-100);
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px 22px 8px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .brand-mark{
    width:36px;height:36px;border-radius:9px;
    background:var(--gold-500);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{width:19px;height:19px;}
  .brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;line-height:1.15;color:var(--white);}
  .brand-sub{font-size:11.5px;color:var(--slate-300);margin-top:1px;}

  .mode-pill{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12px;font-weight:600;color:#CDEBDA;
    background:rgba(74,178,124,.16);
    border:1px solid rgba(74,178,124,.3);
    padding:6px 12px;border-radius:var(--radius-pill);
    margin:0 8px 22px 8px;
  }
  .mode-pill .dot{width:6px;height:6px;border-radius:50%;background:#4ABB7C;}

  .nav-label{
    font-size:11px;letter-spacing:.06em;color:var(--slate-300);
    padding:0 12px;margin-bottom:8px;
  }
  .nav{display:flex;flex-direction:column;gap:2px;}
  .nav-item{
    display:flex;align-items:center;gap:11px;
    padding:10px 12px;border-radius:10px;
    font-size:14.5px;font-weight:500;color:#C6D8CD;
    border:1px solid transparent;
    position:relative;
  }
  .nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.85;}
  .nav-item:hover{background:rgba(255,255,255,.06);color:var(--white);}
  .nav-item:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
  .nav-item.active{
    background:var(--navy-700);
    color:var(--white);
    border-color:rgba(99,201,141,.35);
  }
  .nav-item.active svg{opacity:1;}
  .nav-badge{
    margin-left:auto;
    background:var(--gold-500);
    color:var(--navy-900);
    font-size:11px;font-weight:700;
    padding:1px 7px;border-radius:var(--radius-pill);
  }

  .sidebar-foot{margin-top:auto;padding-top:16px;}
  .user-chip{
    display:flex;align-items:center;gap:10px;
    padding:10px;border-radius:10px;
    background:rgba(255,255,255,.05);
  }
  .avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--gold-500);color:var(--navy-900);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;flex-shrink:0;
  }
  .user-chip .who{font-size:13px;font-weight:600;color:var(--white);}
  .user-chip .role{font-size:11.5px;color:var(--slate-300);}

  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;}
  .topbar{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:28px 36px 18px 36px;
  }
  .eyebrow{font-size:12.5px;color:var(--slate-500);font-weight:500;}
  .page-title{font-size:28px;font-weight:600;margin:4px 0 0 0;color:var(--navy-900);}
  .topbar-right{display:flex;align-items:center;gap:16px;margin-top:4px;}
  .bell{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--white);border:1px solid var(--line);
    position:relative;
  }
  .bell svg{width:16px;height:16px;color:var(--ink-700);}
  .bell .ping{
    position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;
    background:var(--gold-600);
  }
  .date-chip{font-size:13px;color:var(--slate-500);}

  .content{padding:0 36px 48px 36px;}

  /* ---------- Stat cards (used on Statistik page) ---------- */
  .stat-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    margin-bottom:28px;
  }
  .stat-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:16px 18px;
  }
  .stat-card .n{font-family:'Fraunces',serif;font-size:26px;font-weight:600;color:var(--navy-900);}
  .stat-card .l{font-size:12.5px;color:var(--slate-500);margin-top:2px;}
  .stat-card .trend{font-size:11.5px;font-weight:600;margin-top:8px;display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);}
  .trend.up{color:#1E6B41;background:#E7F6EC;}
  .trend.warn{color:#8A2C1E;background:#FBE9E6;}

  /* ---------- Inner site navbar (embedded preview above hero) ---------- */
  .site-nav{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--navy-900);
    border-radius:14px 14px 0 0;
    padding:14px 26px;
  }
  .site-nav .site-brand{display:flex;align-items:center;gap:10px;}
  .site-nav .site-mark{
    width:32px;height:32px;border-radius:8px;background:var(--gold-500);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .site-nav .site-mark svg{width:16px;height:16px;}
  .site-nav .site-name{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--white);line-height:1.15;}
  .site-nav .site-sub{font-size:10.5px;color:var(--gold-500);margin-top:1px;}
  .site-nav .site-links{display:flex;gap:28px;}
  .site-nav .site-links a{font-size:13.5px;font-weight:500;color:#C6D8CD;}
  .site-nav .site-links a:hover, .site-nav .site-links a.current{color:var(--white);}
  .site-nav .site-links a:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;}

  /* ---------- Hero (bookshelf) ---------- */
  .hero-wrap{margin-bottom:34px;border-radius:14px;box-shadow:var(--shadow-soft);}
  .hero{
    position:relative;
    border-radius:0 0 14px 14px;
    overflow:hidden;
    background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
    padding:44px 40px 40px 40px;
    isolation:isolate;
  }
  .hero .shelf-svg{
    position:absolute;inset:0;width:100%;height:100%;
    opacity:.55;
    z-index:0;
  }
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(14,42,32,.96) 0%, rgba(14,42,32,.86) 32%, rgba(14,42,32,.35) 62%, rgba(14,42,32,.05) 100%);
    z-index:1;
  }
  .hero-inner{position:relative;z-index:2;max-width:560px;}
  .hero-tag{color:var(--gold-500);font-size:13px;font-weight:600;margin-bottom:10px;}
  .hero h1{
    color:var(--white);font-size:40px;line-height:1.12;font-weight:600;margin:0 0 14px 0;
  }
  .hero p{color:#C6D8CD;font-size:15px;line-height:1.55;margin:0 0 24px 0;max-width:440px;}
  .search-bar{
    display:flex;gap:10px;background:var(--white);border-radius:12px;padding:6px;max-width:460px;
    box-shadow:var(--shadow-soft);
  }
  .search-bar input{
    flex:1;border:none;outline:none;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink-900);background:transparent;
  }
  .search-bar input::placeholder{color:var(--slate-300);}
  .search-bar button{
    background:var(--gold-500);color:var(--navy-900);border:none;
    padding:0 20px;border-radius:8px;font-weight:700;font-size:14px;
  }
  .search-bar button:hover{background:var(--gold-600);}
  .search-bar button:focus-visible, .search-bar input:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}

  /* ---------- Category tabs ---------- */
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;justify-content:center;}
  #katalog-tabs{justify-content:flex-start;}
  .tab{
    padding:9px 16px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;
    background:var(--white);border:1px solid var(--line);color:var(--ink-700);
  }
  .tab:hover{border-color:var(--navy-600);}
  .tab.active{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}
  .tab:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}

  /* ---------- Section head ---------- */
  .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
  .section-head .eyebrow{color:var(--gold-600);}
  .section-head h2{font-size:22px;font-weight:600;margin:4px 0 2px 0;color:var(--navy-900);}
  .section-head .sub{font-size:13.5px;color:var(--slate-500);}
  .see-all{font-size:13.5px;font-weight:600;color:var(--navy-700);display:flex;align-items:center;gap:4px;}
  .see-all svg{width:14px;height:14px;}

  /* ---------- Book grid ---------- */
  .book-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  }
  .book-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);
    overflow:hidden;
  }
  .book-cover{
    aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;
    padding:14px;position:relative;
  }
  .book-cover svg{width:24px;height:24px;}
  .cat-chip{
    font-size:12px;font-weight:700;
  }
  .book-body{padding:13px 14px 15px 14px;}
  .book-title{font-size:14.5px;font-weight:600;color:var(--ink-900);line-height:1.3;margin-bottom:2px;}
  .book-author{font-size:12.5px;color:var(--slate-500);margin-bottom:10px;}
  .status-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);display:inline-block;}
  .status-tersedia{background:#E7F6EC;color:#1E6B41;}
  .status-dipinjam{background:#E4F0ED;color:#2A6E68;}

  .cover-novel{background:var(--c-novel);} .cover-novel .cat-chip{color:var(--c-novel-ink);}
  .cover-sains{background:var(--c-sains);} .cover-sains .cat-chip{color:var(--c-sains-ink);}
  .cover-pengembangan{background:var(--c-pengembangan);} .cover-pengembangan .cat-chip{color:var(--c-pengembangan-ink);}
  .cover-sejarah{background:var(--c-sejarah);} .cover-sejarah .cat-chip{color:var(--c-sejarah-ink);}
  .cover-biografi{background:var(--c-biografi);} .cover-biografi .cat-chip{color:var(--c-biografi-ink);}

  /* ---------- Tables (Anggota / Peminjaman) ---------- */
  .panel{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);
    overflow:hidden;
  }
  table{width:100%;border-collapse:collapse;}
  thead th{
    text-align:left;font-size:11.5px;letter-spacing:.03em;color:var(--slate-500);
    font-weight:600;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--cream-100);
  }
  tbody td{
    padding:13px 18px;font-size:13.5px;color:var(--ink-700);border-bottom:1px solid var(--line);
  }
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#F5FAF5;}
  .cell-strong{font-weight:600;color:var(--ink-900);}
  .cell-muted{color:var(--slate-500);font-size:12.5px;}

  .badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);display:inline-block;}
  .badge-dipinjam{background:#E4F0ED;color:#2A6E68;}
  .badge-dikembalikan{background:#E7F6EC;color:#1E6B41;}
  .badge-terlambat{background:#FBE9E6;color:#B3402C;}

  .icon-btn-text{
    font-size:12.5px;font-weight:600;color:var(--navy-700);
    background:var(--cream-100);border:1px solid var(--line);
    padding:6px 12px;border-radius:8px;
  }
  .icon-btn-text:hover{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}
  .icon-btn-text:disabled{opacity:.45;cursor:default;}
  .icon-btn-text:disabled:hover{background:var(--cream-100);color:var(--navy-700);}

  .member-row{display:flex;align-items:center;gap:10px;}
  .m-avatar{
    width:30px;height:30px;border-radius:50%;background:var(--navy-800);color:var(--white);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
  }

  /* ---------- Stat page (Statistik) ---------- */
  .stat-page-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-bottom:18px;}
  .chart-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:22px;
  }
  .chart-card h3{font-size:15px;margin:0 0 20px 0;color:var(--navy-900);}
  .bars{display:flex;align-items:flex-end;gap:18px;height:180px;padding:0 6px;}
  .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
  .bar{width:100%;border-radius:7px 7px 3px 3px;}
  .bar-label{font-size:11.5px;color:var(--slate-500);text-align:center;}
  .bar-value{font-size:12px;font-weight:700;color:var(--ink-900);}

  .donut-wrap{display:flex;align-items:center;gap:20px;}
  .legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px;}
  .legend .row{display:flex;align-items:center;gap:8px;}
  .legend .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
  .legend .val{margin-left:auto;font-weight:700;color:var(--ink-900);}

  /* ---------- utility ---------- */
  .hidden{display:none!important;}
  .empty-state{padding:48px 20px;text-align:center;color:var(--slate-500);font-size:13.5px;}

  @media (max-width:1100px){
    .stat-row{grid-template-columns:repeat(2,1fr);}
    .book-grid{grid-template-columns:repeat(2,1fr);}
    .stat-page-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .sidebar{position:fixed;transform:translateX(-100%);transition:transform .2s ease;z-index:50;box-shadow:0 0 0 100vmax rgba(0,0,0,0);}
    .sidebar.open{transform:translateX(0);}
    .main{width:100%;}
    .topbar{padding:20px;}
    .content{padding:0 20px 40px 20px;}
    .book-grid{grid-template-columns:1fr 1fr;}
    .hero h1{font-size:30px;}
  }