:root{
  --navy:#15315c;
  --navy-deep:#0c1e3d;
  --gold:#c9a84c;
  --gold-soft:#e7d39a;
  --bg:#eef1f7;
  --card:#ffffff;
  --line:#e5e9f2;
  --line-soft:#f0f3f9;
  --text:#1e293b;
  --muted:#64748b;
  --row-hover:#f4f7fc;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -120px, rgba(201,168,76,.12), transparent),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header ---------- */
header{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:34px 24px 74px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 200px at 80% 0%, rgba(201,168,76,.18), transparent),
    radial-gradient(500px 200px at 10% 100%, rgba(255,255,255,.06), transparent);
  pointer-events:none;
}
header::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:5px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--gold-soft));
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  position:relative;
  z-index:1;
}
.logo{
  width:46px;height:46px;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  flex:none;
}
.logo svg{width:24px;height:24px;}
header h1{
  margin:0;
  font-size:clamp(20px,3.4vw,30px);
  font-weight:700;
  letter-spacing:.4px;
}
header p{
  margin:8px 0 0;
  color:#c6d3ec;
  font-size:14px;
  position:relative;z-index:1;
}
.gold{color:var(--gold-soft);}

/* ---------- Layout ---------- */
.wrap{
  max-width:1040px;
  margin:-46px auto 48px;
  padding:0 16px;
  position:relative;
  z-index:2;
}
.wrap.has-notes{
  max-width:1372px;
}
.card{
  background:var(--card);
  border-radius:18px;
  box-shadow:0 24px 60px -28px rgba(12,30,61,.45);
  border:1px solid var(--line);
  overflow:hidden;
}

/* ---------- Layout dua kolom ---------- */
.layout{
  display:grid;
  grid-template-columns:300px minmax(0, 1040px);
  gap:18px;
  align-items:start;
  justify-content:center;
}
.notes-col{ align-self:start; }
.note-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 44px -30px rgba(12,30,61,.4);
  overflow:hidden;
}
.note-head{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#fff;
  padding:13px 16px;
  font-weight:700;
  font-size:14px;
  position:relative;
}
.note-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold);
}
.note-head svg{width:18px;height:18px;color:var(--gold-soft);flex:none;}
.note-list{
  list-style:none;
  margin:0;padding:14px 16px;
}
.note-list li{
  position:relative;
  padding:0 0 0 18px;
  margin:0 0 12px;
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}
.note-list li:last-child{margin-bottom:0;}
.note-list li::before{
  content:"";
  position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}
.note-updated{
  border-top:1px solid var(--line);
  padding:11px 16px;
  font-size:12px;
  color:var(--muted);
  background:#fbfcfe;
}
@media (max-width:1380px){
  .wrap.has-notes{max-width:1040px;}
  .layout{grid-template-columns:280px minmax(0,1fr);}
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;}
  .notes-col{order:-1;}
}

/* ---------- Toolbar ---------- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcff,#f7f9fd);
}
.search-box{
  position:relative;
  flex:1;
  min-width:200px;
}
.search-box svg{
  position:absolute;
  left:12px; top:50%; transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);
}
.search-box input{
  width:100%;
  padding:11px 14px 11px 38px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  outline:none;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.search-box input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.18);
}
.meta{
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.meta .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.2);
}
.refresh-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:10px;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  font-family:inherit;
  white-space:nowrap;
}
.refresh-btn:hover{background:#f7f9fd;border-color:var(--gold);}
.refresh-btn:active{transform:scale(.97);}
.refresh-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(201,168,76,.25);
}
.refresh-btn:disabled{opacity:.65;cursor:default;}
.refresh-btn svg{width:16px;height:16px;flex:none;}
.refresh-btn.is-loading svg{animation:spin .8s linear infinite;}

/* ---------- Table ---------- */
.table-scroll{
  overflow:auto;
  max-height:72vh;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}
thead th{
  background:var(--navy);
  color:#fff;
  text-align:left;
  padding:13px 16px;
  font-weight:600;
  font-size:13px;
  letter-spacing:.3px;
  position:sticky;
  top:0;
  z-index:3;
  white-space:nowrap;
}
thead th:first-child{padding-left:20px;}
thead th::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--gold);
  opacity:.6;
}
tbody td{
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  color:var(--text);
}
tbody td:first-child{padding-left:20px;font-weight:600;color:var(--navy);}
tbody td:nth-child(2){font-weight:600;color:var(--navy);}
.col-no{
  width:46px;
  text-align:center !important;
  padding-left:14px !important;
  color:var(--muted) !important;
  font-weight:600;
}
thead th.col-no{color:#fff;}
tbody tr:nth-child(even){background:#fafbfe;}
tbody tr:hover{background:var(--row-hover);}
tbody tr:last-child td{border-bottom:none;}

/* ---------- States ---------- */
.state{
  padding:60px 20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.spinner{
  width:30px;height:30px;
  border:3px solid var(--line);
  border-top-color:var(--gold);
  border-radius:50%;
  margin:0 auto 14px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.is-hidden{display:none;}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:34px;
  padding:0 16px 40px;
}
.foot-inner{
  max-width:1040px;
  margin:0 auto;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#fff;
  border-radius:16px;
  padding:20px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 48px -30px rgba(12,30,61,.6);
}
.foot-inner::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
}
.foot-inner::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(420px 160px at 90% -40%, rgba(201,168,76,.18), transparent);
  pointer-events:none;
}
.foot-brand{
  display:flex;align-items:center;gap:14px;
  position:relative;z-index:1;
}
.foot-logo{
  width:42px;height:42px;flex:none;
  border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--gold-soft);
}
.foot-logo svg{width:22px;height:22px;}
.foot-text{display:flex;flex-direction:column;line-height:1.45;}
.foot-text strong{font-size:14px;font-weight:700;letter-spacing:.2px;}
.foot-text span{font-size:12.5px;color:#c6d3ec;}
.foot-meta{
  display:flex;align-items:center;gap:14px;
  position:relative;z-index:1;
}
.foot-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;
  color:var(--navy-deep);
  background:var(--gold-soft);
  padding:6px 12px;border-radius:999px;
  white-space:nowrap;
}
.foot-pill::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--navy-deep);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.foot-copy{font-size:12px;color:#aab9d6;white-space:nowrap;}
@media (max-width:560px){
  .foot-inner{flex-direction:column;align-items:flex-start;text-align:left;}
  .foot-meta{flex-wrap:wrap;}
}
@media (max-width:600px){
  thead th, tbody td{padding:10px 10px; font-size:12.5px;}
  thead th:first-child, tbody td:first-child{padding-left:14px;}
  header{padding:26px 16px 60px;}
}