/*
Theme Name: TitleScan
Theme URI: https://pgsd.fkip.uns.ac.id/
Author: TitleScan — PGSD FKIP UNS
Author URI: https://pgsd.fkip.uns.ac.id/
Description: Tema WordPress untuk TitleScan — Smart Academic Title Similarity Scanner. Aplikasi pengecekan kemiripan judul skripsi untuk Program Studi PGSD FKIP Universitas Sebelas Maret, lengkap dengan halaman mahasiswa (ajuan judul & cek status), dasbor admin (daftar ajuan & pengaturan ambang), serta cetak laporan resmi berkop UNS. Tema ini menampilkan aplikasi secara penuh di halaman depan.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: titlescan
Tags: education, one-column, custom-menu
*/

/* ============================================================
   TitleScan — Smart Academic Title Similarity Scanner
   Desain: netral hangat + aksen biru tua kehijauan (teal),
   kategori risiko: merah bata / kuning tua / hijau lumut.
   ============================================================ */

/* ============================================================
   TitleScan — Smart Academic Title Similarity Scanner
   Prototipe satu file untuk PGSD FKIP Universitas Sebelas Maret
   Desain: netral hangat + aksen biru tua kehijauan (teal),
   kategori risiko: merah bata / kuning tua / hijau lumut.
   ============================================================ */
:root{
  --bg:#FAF9F6;
  --surface:#FFFFFF;
  --surface-2:#F4F1EB;
  --border:#E7E2D9;
  --border-2:#D9D3C7;
  --ink:#292524;
  --ink-2:#57534E;
  --ink-3:#8A8378;
  --teal:#0F766E;
  --teal-dark:#134E4A;
  --teal-ink:#0B4F4A;
  --teal-soft:#E8F2F0;
  --teal-border:#BFDAD5;
  --brick:#A8443A;
  --brick-soft:#F8EAE7;
  --brick-border:#E7C6BF;
  --gold:#8F6E14;
  --gold-soft:#F9F1DA;
  --gold-border:#E6D4A4;
  --moss:#4E7A28;
  --moss-soft:#EEF3E1;
  --moss-border:#D0DFB5;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(41,37,36,.05), 0 4px 16px rgba(41,37,36,.06);
  --shadow-lg:0 8px 32px rgba(41,37,36,.14);
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ line-height:1.3; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 .8em; }
button{ font-family:inherit; }
img,svg{ vertical-align:middle; }
:focus-visible{ outline:3px solid rgba(15,118,110,.45); outline-offset:2px; border-radius:4px; }

.container{ max-width:1140px; margin:0 auto; padding:0 20px; }

/* ---------- Kartu ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 24px;
}
.card + .card{ margin-top:18px; }
.card-title{
  font-size:17px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px;
}
.card-sub{ font-size:13px; color:var(--ink-2); margin:0 0 16px; }

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:700; padding:10px 18px; line-height:1.35;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .06s ease;
  text-decoration:none; min-height:42px;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--teal-dark); }
.btn-outline{ background:var(--surface); color:var(--teal-ink); border-color:var(--teal-border); }
.btn-outline:hover:not(:disabled){ background:var(--teal-soft); }
.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--border-2); }
.btn-ghost:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); }
.btn-danger{ background:var(--brick); color:#fff; }
.btn-danger:hover:not(:disabled){ background:#8E372E; }
.btn-moss{ background:var(--moss); color:#fff; }
.btn-moss:hover:not(:disabled){ background:#3F6420; }
.btn-gold{ background:#A7862A; color:#fff; }
.btn-gold:hover:not(:disabled){ background:#8F6E14; }
.btn-sm{ padding:7px 13px; font-size:13px; min-height:34px; border-radius:8px; }
.btn-lg{ padding:13px 24px; font-size:15px; min-height:48px; }
.btn-block{ width:100%; }

/* ---------- Lencana / badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:3px 10px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.badge-risk-low{ background:var(--moss-soft); color:var(--moss); border-color:var(--moss-border); }
.badge-risk-mid{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold-border); }
.badge-risk-high{ background:var(--brick-soft); color:var(--brick); border-color:var(--brick-border); }
.badge-risk-crit{ background:var(--brick); color:#fff; border-color:var(--brick); }
.badge-st-wait{ background:var(--surface-2); color:var(--ink-2); border-color:var(--border-2); }
.badge-st-ok{ background:var(--moss-soft); color:var(--moss); border-color:var(--moss-border); }
.badge-st-rev{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold-border); }
.badge-st-no{ background:var(--brick-soft); color:var(--brick); border-color:var(--brick-border); }
.chip{
  display:inline-block; background:var(--surface-2); border:1px solid var(--border);
  color:var(--ink-2); border-radius:999px; font-size:12px; font-weight:600; padding:2px 10px;
}

/* ---------- Formulir ---------- */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.input,.textarea,.select{
  width:100%; background:#fff; border:1px solid var(--border-2); border-radius:10px;
  padding:10px 13px; font-family:inherit; font-size:14.5px; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{ resize:vertical; min-height:92px; line-height:1.55; }
.input:focus,.textarea:focus,.select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.14);
}
.input[readonly]{ background:var(--surface-2); color:var(--ink-2); }
.counter{ text-align:right; font-size:12px; color:var(--ink-3); margin-top:4px; }
.counter.over{ color:var(--brick); font-weight:700; }
.field-error{ color:var(--brick); font-size:13px; font-weight:600; margin-top:8px; }
.hint{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.select-wrap{ position:relative; }
.select{ appearance:none; padding-right:38px; }
.select-wrap::after{
  content:""; position:absolute; right:14px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.check-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 2px; font-size:14.5px; }
.check-row input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; accent-color:var(--teal); flex:none; cursor:pointer; }
.check-row label{ cursor:pointer; }

/* ---------- Tabel ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.tbl th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:800; padding:11px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background .12s ease; }
.tbl tbody tr.clickable{ cursor:pointer; }
.tbl tbody tr.clickable:hover{ background:#FBFAF7; }
.tbl .td-title{ font-weight:600; max-width:360px; }
.ellip{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.td-num{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--teal-ink); }
.empty-state{ padding:38px 20px; text-align:center; color:var(--ink-3); font-size:14px; }

/* ---------- Blok skor ---------- */
.score-flex{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.score-big{
  font-size:54px; font-weight:800; letter-spacing:-.03em; color:var(--teal-ink);
  font-variant-numeric:tabular-nums; line-height:1;
}
.score-big small{ font-size:22px; font-weight:700; color:var(--ink-3); }
.score-caption{ font-size:14px; color:var(--ink-2); max-width:520px; }

/* ---------- Bar faset ---------- */
.facet-list{ display:flex; flex-direction:column; gap:9px; margin:10px 0 4px; }
.facet-row{ display:grid; grid-template-columns:168px 1fr 118px; gap:10px; align-items:center; }
.facet-name{ font-size:12.5px; font-weight:700; color:var(--ink-2); line-height:1.35; }
.facet-track{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; height:14px; overflow:hidden; position:relative; }
.facet-fill{ height:100%; border-radius:999px; transition:width .4s ease; }
.facet-fill.f-identik{ background:var(--brick); }
.facet-fill.f-mirip{ background:#C29B2C; }
.facet-fill.f-beda{ background:var(--moss); }
.facet-fill.f-none{ background:repeating-linear-gradient(45deg,#DDD8CE 0 6px,#EDEAE3 6px 12px); }
.facet-val{ font-size:12px; color:var(--ink-2); text-align:right; line-height:1.3; }
.facet-val b{ color:var(--ink); }
.facet-val .lbl-none{ color:var(--ink-3); font-style:italic; }
.facet-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 2px; font-size:12px; color:var(--ink-2); }
.facet-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.d-red{ background:var(--brick); } .dot.d-yellow{ background:#C29B2C; }
.dot.d-green{ background:var(--moss); } .dot.d-gray{ background:#B8B1A5; }
.facet-block{ display:flex; flex-direction:column; gap:5px; padding:10px 0; border-bottom:1px dashed var(--border); }
.facet-block:last-child{ border-bottom:none; }
.facet-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.facet-status{ font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:2px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.facet-status.s-identik{ color:var(--brick); background:var(--brick-soft); border-color:var(--brick-border); }
.facet-status.s-mirip{ color:var(--gold); background:var(--gold-soft); border-color:var(--gold-border); }
.facet-status.s-beda{ color:var(--moss); background:var(--moss-soft); border-color:var(--moss-border); }
.facet-status.s-none{ color:var(--ink-3); background:var(--surface-2); border-color:var(--border); }
.facet-vals{ font-size:12px; color:var(--ink-3); line-height:1.55; }
.facet-vals b{ color:var(--ink-2); font-weight:700; }
.facet-track.dashed{ border-style:dashed; background:transparent; }
.ex-grid{ display:grid; gap:8px; margin-top:8px; }
.ex-btn{ text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:9px 12px; cursor:pointer; transition:border-color .13s ease, background .13s ease; }
.ex-btn:hover{ border-color:var(--teal-border); background:var(--teal-soft); }
.ex-btn .ex-l{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-ink); display:block; }
.ex-btn .ex-t{ font-size:12.5px; color:var(--ink-2); line-height:1.5; display:block; margin-top:2px; }

mark.hl{ background:#F5D97E; color:inherit; padding:0 2px; border-radius:3px; }

/* ---------- Accordion pembanding ---------- */
.acc{ border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden; }
.acc-item + .acc-item{ border-top:1px solid var(--border); }
.acc-head{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:#fff; border:none; padding:13px 16px; cursor:pointer;
  transition:background .12s ease;
}
.acc-head:hover{ background:#FBFAF7; }
.acc-rank{
  flex:none; width:28px; height:28px; border-radius:8px; background:var(--surface-2);
  color:var(--ink-2); font-size:12.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.acc-head.is-top .acc-rank{ background:var(--brick-soft); color:var(--brick); }
.acc-headtext{ flex:1; min-width:0; }
.acc-title{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.4; }
.acc-meta{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
.acc-score{ flex:none; text-align:right; }
.acc-score .n{ font-size:16px; font-weight:800; color:var(--teal-ink); font-variant-numeric:tabular-nums; }
.acc-caret{ flex:none; color:var(--ink-3); transition:transform .18s ease; }
.acc-head[aria-expanded="true"] .acc-caret{ transform:rotate(180deg); }
.acc-body{ display:none; padding:4px 16px 18px; background:#FDFCFA; border-top:1px dashed var(--border); }
.acc-body.open{ display:block; animation:fadeIn .22s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
.pair-vs{ display:grid; gap:10px; margin:12px 0 4px; }
.pair-quote{
  background:#fff; border:1px solid var(--border); border-left:4px solid var(--teal);
  border-radius:8px; padding:10px 13px; font-size:14.5px; line-height:1.65;
}
.pair-quote .who{ display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.pair-quote.q-b{ border-left-color:var(--border-2); }
.interp{
  margin:14px 0 0; background:var(--teal-soft); border:1px solid var(--teal-border);
  border-radius:8px; padding:11px 14px; font-size:13.5px; color:var(--teal-ink);
}
.interp b{ font-weight:800; }

/* ---------- Spanduk / banner ---------- */
.banner{
  display:flex; gap:12px; align-items:flex-start;
  border-radius:10px; padding:13px 16px; font-size:13px; line-height:1.6; margin-top:18px;
}
.banner svg{ flex:none; margin-top:2px; }
.banner-warn{ background:var(--gold-soft); border:1px solid var(--gold-border); color:#6E5310; }
.banner-flag{ background:var(--brick-soft); border:1px solid var(--brick-border); color:#7E332B; font-weight:600; }

/* ---------- Langkah analisis ---------- */
.steps{ border:1px solid var(--border); border-radius:10px; background:#fff; padding:18px 20px; }
.steps-title{ font-size:14px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.spinner{
  width:16px; height:16px; border-radius:50%; border:2.5px solid var(--teal-border);
  border-top-color:var(--teal); animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.steps ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.steps li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-3); transition:color .2s ease; }
.steps li .st-ico{
  width:20px; height:20px; border-radius:50%; flex:none; border:2px solid var(--border-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:#fff;
}
.steps li.active{ color:var(--teal-ink); font-weight:700; }
.steps li.active .st-ico{ border-color:var(--teal); border-top-color:transparent; animation:spin .7s linear infinite; }
.steps li.done{ color:var(--moss); }
.steps li.done .st-ico{ border-color:var(--moss); background:var(--moss); color:#fff; }

/* ---------- Header aplikasi ---------- */
.app-header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:12px; padding-bottom:12px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark svg{ width:60%; height:60%; }
.brand-mark{
  flex:none; width:42px; height:42px; border-radius:11px; background:linear-gradient(160deg,var(--teal),var(--teal-dark));
  color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.brand-name{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.brand-sub{ font-size:11.5px; color:var(--ink-3); font-weight:600; }
.header-right{ display:flex; align-items:center; gap:12px; min-width:0; }
.user-chip{ text-align:right; line-height:1.25; min-width:0; }
.user-chip .u-name{ font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.user-chip .u-role{ font-size:11.5px; color:var(--ink-3); font-weight:600; }

/* ---------- Halaman login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 16px;
  background:
    radial-gradient(900px 460px at 85% -10%, rgba(15,118,110,.08), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(143,110,20,.06), transparent 55%),
    var(--bg);
}
.login-card{ width:100%; max-width:440px; padding:30px 30px 24px; }
.login-brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.login-lede{ font-size:13.5px; color:var(--ink-2); margin-bottom:20px; }
.demo-box{ margin-top:20px; border:1px dashed var(--border-2); border-radius:10px; background:var(--surface-2); padding:14px 14px 8px; }
.demo-box h3{ font-size:12.5px; font-weight:800; color:var(--ink-2); margin:0 0 8px; }
.demo-row{
  width:100%; display:grid; grid-template-columns:86px 1fr auto; gap:4px 12px; align-items:center;
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 12px;
  margin-bottom:8px; cursor:pointer; text-align:left; font-size:12.5px; transition:border-color .13s ease, background .13s ease;
}
.demo-row:hover{ border-color:var(--teal-border); background:#FBFDFC; }
.demo-row .du{ font-weight:800; color:var(--teal-ink); }
.demo-row .dn{ color:var(--ink-2); font-weight:600; }
.demo-row .dp{ color:var(--ink-3); }
.demo-row .dc{ grid-column:1 / -1; color:var(--ink-3); font-size:11.5px; }

/* ---------- Navigasi admin ---------- */
.admin-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:22px 0 16px; }
.tabs{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:4px; gap:4px; }
.tab{
  border:none; background:transparent; cursor:pointer; border-radius:8px;
  font-size:13.5px; font-weight:700; color:var(--ink-2); padding:8px 16px;
  transition:background .14s ease, color .14s ease; min-height:38px;
}
.tab:hover{ color:var(--ink); }
.tab.active{ background:#fff; color:var(--teal-ink); box-shadow:0 1px 3px rgba(41,37,36,.12); }
.data-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; }
.stat-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.stat-label{ font-size:12px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.stat-value{ font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; }
.stat-value.v-teal{ color:var(--teal-ink); } .stat-value.v-gold{ color:var(--gold); }
.stat-value.v-moss{ color:var(--moss); } .stat-value.v-brick{ color:var(--brick); }
.stat-note{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filter-bar .input,.filter-bar .select-wrap{ flex:1; min-width:170px; }
.filter-bar .select-wrap{ max-width:230px; flex:none; }

/* ---------- Halaman tinjau ---------- */
.grid-review{ display:grid; grid-template-columns:1fr 330px; gap:18px; align-items:start; }
.review-side{ position:sticky; top:78px; display:flex; flex-direction:column; gap:14px; }
.review-side .card{ margin:0; }
.judul-besar{
  font-size:24px; font-weight:800; line-height:1.5; letter-spacing:-.015em; color:var(--ink);
  margin:6px 0 14px;
}
.meta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 18px; font-size:13.5px; }
.meta-grid .m-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.meta-grid .m-val{ font-weight:600; }
.section-label{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
.sugg-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sugg-list li{
  display:flex; gap:11px; background:#fff; border:1px solid var(--border);
  border-left:4px solid var(--teal); border-radius:8px; padding:11px 14px; font-size:13.5px; line-height:1.6;
}
.sugg-list .s-n{
  flex:none; width:22px; height:22px; border-radius:7px; background:var(--teal-soft); color:var(--teal-ink);
  font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:2px;
}
.log-list{ list-style:none; margin:0; padding:0; font-size:13px; }
.log-list li{ display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); }
.log-list li:last-child{ border-bottom:none; }
.log-when{ flex:none; width:150px; color:var(--ink-3); font-size:12px; padding-top:1px; }
.log-what{ color:var(--ink-2); }
.log-what b{ color:var(--ink); }
.decision-note{ margin-top:12px; }
.decide-btns{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.decide-btns .btn{ padding-left:8px; padding-right:8px; font-size:13px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:80; background:rgba(30,27,25,.5);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:fadeIn .18s ease;
}
.modal{
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg);
  width:100%; max-width:680px; max-height:92vh; display:flex; flex-direction:column;
  animation:popIn .2s ease;
}
@keyframes popIn{ from{ opacity:0; transform:scale(.97);} to{ opacity:1; transform:none;} }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 0; }
.modal-title{ font-size:17px; font-weight:800; margin:0; }
.modal-sub{ font-size:13px; color:var(--ink-2); margin:3px 0 0; }
.modal-x{
  flex:none; border:none; background:var(--surface-2); color:var(--ink-2); width:32px; height:32px;
  border-radius:8px; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.modal-x:hover{ background:var(--border); color:var(--ink); }
.modal-body{ padding:16px 22px 22px; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 22px 20px; }
.memo-pre{
  white-space:pre-wrap; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:16px 18px; font-family:var(--font); font-size:13px; line-height:1.7;
  max-height:340px; overflow-y:auto; color:var(--ink);
}
.pill-group{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---------- Toast ---------- */
#toast-root{ position:fixed; right:18px; bottom:18px; z-index:120; display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 36px)); }
.toast{
  background:var(--ink); color:#fff; border-radius:10px; padding:12px 16px; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-lg); display:flex; gap:10px; align-items:flex-start;
  animation:toastIn .22s ease;
}
.toast.t-ok{ background:var(--teal-dark); }
.toast.t-err{ background:var(--brick); }
.toast.t-warn{ background:#8F6E14; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ---------- Beragam ---------- */
.page-head{ margin:24px 0 18px; }
.page-head h1{ font-size:21px; font-weight:800; letter-spacing:-.015em; margin:0 0 3px; }
.page-head .lede{ font-size:13.5px; color:var(--ink-2); margin:0; }
.grid-student{ display:grid; grid-template-columns:400px 1fr; gap:18px; align-items:start; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.divider{ border:none; border-top:1px solid var(--border); margin:18px 0; }
.pagerow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.legend-strip{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:18px;
  font-size:13px; color:var(--ink-2); font-weight:600;
}
.legend-strip b{ font-variant-numeric:tabular-nums; }
.band-stats{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.band-row{ display:flex; align-items:center; gap:12px; padding:6px 0; font-size:13px; }
.band-range{ color:var(--ink-2); min-width:78px; }
.band-pct{ margin-left:auto; font-weight:700; color:var(--ink); }
.slider-row{ display:grid; grid-template-columns:210px 1fr 86px; gap:14px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--border); }
.slider-row:last-child{ border-bottom:none; }
.slider-name{ font-size:13.5px; font-weight:700; }
.slider-name small{ display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; }
.slider-val{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--teal-ink); }
input[type="range"]{ width:100%; accent-color:var(--teal); height:30px; cursor:pointer; }
.weight-input{ width:86px; text-align:right; font-weight:700; }
.weight-row{ display:grid; grid-template-columns:1fr 120px 96px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13.5px; }
.weight-row:last-child{ border-bottom:none; }
.weight-row .w-name b{ display:block; }
.weight-row .w-name small{ color:var(--ink-3); font-size:11.5px; }
.weight-row.locked{ color:var(--ink-3); }

footer.app-foot{
  margin-top:34px; border-top:1px solid var(--border); padding:18px 0 26px;
  font-size:12.5px; color:var(--ink-3); text-align:center;
}

/* ---------- Responsif ---------- */
@media (max-width:980px){
  .grid-student{ grid-template-columns:1fr; }
  .grid-review{ grid-template-columns:1fr; }
  .review-side{ position:static; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .card{ padding:18px 16px; }
  .score-big{ font-size:42px; }
  .facet-row{ grid-template-columns:1fr; gap:4px; }
  .facet-val{ text-align:left; }
  .header-inner{ flex-wrap:wrap; }
  .user-chip{ text-align:left; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .decide-btns{ grid-template-columns:1fr; }
  .slider-row{ grid-template-columns:1fr; gap:4px; }
  .slider-val{ text-align:left; }
  .brand-sub{ display:none; }
  .judul-besar{ font-size:19px; }
  .login-card{ padding:24px 20px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ================================================================
   LAPORAN CETAK / PDF  —  mengikuti format resmi PS PGSD FKIP UNS
   ================================================================ */
#print-area{ display:none; }
.letter{ font-family:"Cambria","Times New Roman",serif; color:#000; background:#fff;
  width:170mm; margin:0 auto; font-size:11.5pt; line-height:1.45; }
.letter-head{ margin-bottom:24px; }
/* Kop dilebarkan melampaui margin teks agar sebanding dengan format asli,
   yaitu kira-kira 10 mm dari tepi kertas. */
.letter-head .kop{ display:block; width:calc(100% + 16mm); margin-left:-8mm; height:auto; }
.letter-title{ text-align:center; font-weight:700; font-size:12.5pt; margin:0 0 22px; line-height:1.4; }
.letter-id{ margin-bottom:16px; }
.letter-id tr td{ vertical-align:top; padding:1px 0; }
.letter-id td:first-child{ width:42mm; }
.letter-id td:nth-child(2){ width:5mm; }
.letter-body{ text-align:justify; margin-bottom:14px; }
.letter-list{ margin:0 0 10px 0; padding-left:20px; }
.letter-list li{ margin-bottom:5px; text-align:justify; }
.letter-sign{ margin-top:34px; margin-left:52%; }
.letter-sign .gap{ height:26mm; }
.letter-sign .nm{ font-weight:700; }
@media print{
  @page{ size:A4; margin:14mm 18mm 18mm; }
  body > *{ display:none !important; }
  #print-area{ display:block !important; }
  .letter{ width:auto; }
}
</style>
</head>
<body>
<div id="toast-root" aria-live="polite" aria-atomic="false"></div>

<!-- ================= HALAMAN LOGIN ================= -->
<section id="view-login" class="login-wrap">
  <div class="login-card card">
    <div class="login-brand">
      <div class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7.5 12 4l9 3.5L12 11 3 7.5Z"/><path d="M3 12l9 3.5L21 12"/><path d="M3 16.5 12 20l9-3.5"/></svg></div>
      <div>
        <div class="brand-name" style="font-size:20px;">TitleScan</div>
        <div class="brand-sub">PGSD &middot; FKIP &middot; Universitas Sebelas Maret</div>
      </div>
    </div>
    <div class="field">
      <label for="login-user">Username</label>
      <input class="input" id="login-user" autocomplete="username">
    </div>
    <div class="field">
      <label for="login-pass">Password</label>
      <input class="input" id="login-pass" type="password" autocomplete="current-password">
    </div>
    <div id="login-error" class="field-error" hidden role="alert"></div>
    <button id="btn-login" class="btn btn-primary btn-block btn-lg">Masuk</button>
    <button id="btn-back-public" class="btn btn-ghost btn-block" style="margin-top:12px;">Kembali</button>
  </div>
</section>

<!-- ================= KERANGKA APLIKASI ================= -->
<div id="view-app" hidden>
  <header class="app-header">
    <div class="container header-inner">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7.5 12 4l9 3.5L12 11 3 7.5Z"/><path d="M3 12l9 3.5L21 12"/><path d="M3 16.5 12 20l9-3.5"/></svg></div>
        <div>
          <div class="brand-name">TitleScan</div>
          <div class="brand-sub">Smart Academic Title Similarity Scanner &middot; PGSD FKIP UNS</div>
        </div>
      </div>
      <div class="header-right">
        <div class="user-chip" id="hdr-chip" hidden>
          <div class="u-name" id="hdr-name"></div>
          <div class="u-role" id="hdr-role"></div>
        </div>
        <button id="btn-admin" class="btn btn-ghost btn-sm">Masuk sebagai Admin</button>
        <button id="btn-logout" class="btn btn-ghost btn-sm" hidden>Keluar</button>
      </div>
    </div>
  </header>

  <!-- ========== PERAN MAHASISWA ========== -->
  <section id="view-student" class="container" hidden>
    <div class="page-head">
      <h1>Pengajuan Judul Skripsi</h1>
      <p class="lede">Periksa kemiripan judul Anda terlebih dahulu, revisi bila perlu, lalu ajukan ke Komisi Skripsi.</p>
    </div>

    <div class="tabs" role="tablist" style="margin-bottom:18px;">
      <button class="tab active" id="tab-ajukan" role="tab" aria-selected="true" aria-controls="pane-ajukan">Ajukan Judul</button>
      <button class="tab" id="tab-status" role="tab" aria-selected="false" aria-controls="pane-status">Cek Status Ajuan</button>
    </div>

    <div id="pane-ajukan" role="tabpanel" aria-labelledby="tab-ajukan">

    <div class="grid-student">
      <!-- Formulir pengajuan -->
      <div class="card">
        <h2 class="card-title">Formulir Pengajuan Judul</h2>
        <p class="card-sub">Langkah 1: cek kemiripan sebanyak yang Anda mau. Langkah 2: ajukan bila sudah yakin.</p>
        <div class="field">
          <label for="f-nama">Nama lengkap <span style="color:var(--brick)">*</span></label>
          <input class="input" id="f-nama" autocomplete="name" placeholder="Tulis nama lengkap sesuai data akademik">
        </div>
        <div class="field">
          <label for="f-nim">NIM <span style="color:var(--brick)">*</span></label>
          <input class="input" id="f-nim" autocomplete="off" placeholder="mis. K7121045">
          <p class="hint">NIM dipakai untuk menelusuri status ajuan Anda nanti, jadi pastikan penulisannya benar.</p>
        </div>
        <div class="field">
          <label for="f-judul">Judul yang diajukan <span style="color:var(--brick)">*</span></label>
          <textarea class="textarea" id="f-judul" maxlength="250" rows="3" placeholder="Tulis judul skripsi Anda di sini..."></textarea>
          <div class="counter" id="cnt-judul">0/250</div>
        </div>
        <div class="field">
          <label for="f-rumusan">Rumusan masalah singkat (opsional)</label>
          <textarea class="textarea" id="f-rumusan" maxlength="500" rows="3" placeholder="Contoh: Apakah penerapan model X dapat meningkatkan hasil belajar siswa kelas V?"></textarea>
          <div class="counter" id="cnt-rumusan">0/500</div>
        </div>
        <div class="field">
          <label for="f-dosen">Pembimbing</label>
          <div class="select-wrap">
            <select class="select" id="f-dosen">
              <option value="">— Pilih dosen —</option>
            </select>
          </div>
        </div>
        <div class="btn-row">
          <button id="btn-cek" class="btn btn-outline">Cek Kemiripan</button>
          <button id="btn-ajukan" class="btn btn-primary" disabled>Ajukan ke Komisi Skripsi</button>
        </div>
        <p class="hint" id="hint-ajukan">Klik <b>Cek Kemiripan</b> terlebih dahulu; setelah hasil muncul, judul dapat diajukan resmi.</p>
      </div>

      <!-- Hasil analisis -->
      <div class="card" id="st-result-card">
        <h2 class="card-title">Hasil Analisis Kemiripan</h2>
        <p class="card-sub" id="st-result-sub">Belum ada analisis. Tulis judul lalu klik <b>Cek Kemiripan</b>.</p>
        <div id="st-analyzing" class="steps" hidden aria-live="polite">
          <div class="steps-title"><span class="spinner" aria-hidden="true"></span> Menganalisis judul…</div>
          <ol id="steps-list">
            <li><span class="st-ico" aria-hidden="true">1</span> Normalisasi teks</li>
            <li><span class="st-ico" aria-hidden="true">2</span> Ekspansi sinonim &amp; ekstraksi faset</li>
            <li><span class="st-ico" aria-hidden="true">3</span> Pembandingan dengan korpus judul</li>
            <li><span class="st-ico" aria-hidden="true">4</span> Penyusunan laporan kemiripan</li>
          </ol>
        </div>
        <div id="st-result" hidden></div>
      </div>
    </div>

    </div><!-- /pane-ajukan -->

    <div id="pane-status" role="tabpanel" aria-labelledby="tab-status" hidden>
      <div class="card">
        <h2 class="card-title">Cek Status Ajuan</h2>
        <p class="card-sub">Masukkan NIM yang Anda pakai saat mengajukan judul untuk melihat status dan catatan dari Komisi Skripsi.</p>
        <div class="field">
          <label for="s-nim">NIM</label>
          <input class="input" id="s-nim" autocomplete="off" placeholder="mis. K7121045">
        </div>
        <div class="btn-row">
          <button id="btn-cek-status" class="btn btn-primary">Tampilkan Status</button>
        </div>
      </div>
      <div class="card" style="margin-top:18px;">
      <h2 class="card-title">Riwayat Ajuan</h2>
      <p class="card-sub">Klik baris untuk melihat kembali hasil analisis lengkap beserta catatan Komisi Skripsi.</p>
      <div class="tbl-wrap">
        <table class="tbl" id="st-history-tbl">
          <thead>
            <tr>
              <th style="width:130px;">Tanggal</th>
              <th>Judul</th>
              <th style="width:90px;">Skor</th>
              <th style="width:150px;">Status</th>
              <th>Catatan Admin</th>
            </tr>
          </thead>
          <tbody id="st-history-body"></tbody>
        </table>
      </div>
      <div id="st-history-empty" class="empty-state" hidden>Belum ada ajuan atas NIM tersebut.</div>
      </div>
    </div><!-- /pane-status -->
  </section>

  <!-- ========== PERAN ADMIN ========== -->
  <section id="view-admin" class="container" hidden>
    <div class="admin-toolbar">
      <div class="tabs" role="tablist" aria-label="Navigasi admin">
        <button class="tab active" id="tab-queue" role="tab" aria-selected="true" aria-controls="adm-dashboard">Daftar Ajuan</button>
        <button class="tab" id="tab-settings" role="tab" aria-selected="false" aria-controls="adm-settings">Pengaturan Ambang</button>
      </div>
      <div class="data-actions">
        <button id="btn-export" class="btn btn-ghost btn-sm">Ekspor Data (JSON)</button>
        <button id="btn-import" class="btn btn-ghost btn-sm">Impor Data (JSON)</button>
        <button id="btn-reset" class="btn btn-ghost btn-sm">Reset Data Demo</button>
        <input type="file" id="file-import" accept=".json,application/json" hidden>
      </div>
    </div>

    <!-- Dasbor antrean -->
    <div id="adm-dashboard" role="tabpanel" aria-labelledby="tab-queue">
      <div class="stat-grid">
        <div class="stat-card">
          <div class="stat-label">Pengajuan Masuk</div>
          <div class="stat-value v-teal" id="kpi-total">0</div>
          <div class="stat-note">seluruh periode</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Menunggu Review</div>
          <div class="stat-value" id="kpi-wait">0</div>
          <div class="stat-note">butuh keputusan Anda</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Disetujui</div>
          <div class="stat-value v-moss" id="kpi-ok">0</div>
          <div class="stat-note">lanjut bimbingan</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Ditolak</div>
          <div class="stat-value v-brick" id="kpi-no">0</div>
          <div class="stat-note">tidak dilanjutkan</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Rata-rata Skor</div>
          <div class="stat-value v-gold" id="kpi-avg">0</div>
          <div class="stat-note">kemiripan tertinggi tiap judul</div>
        </div>
      </div>
      <div class="filter-bar">
        <div class="select-wrap">
          <select class="select" id="flt-status" aria-label="Filter status">
            <option value="">Semua status</option>
            <option value="menunggu">Menunggu Review</option>
            <option value="disetujui">Disetujui</option>
            <option value="revisi">Perlu Revisi</option>
            <option value="ditolak">Ditolak</option>
          </select>
        </div>
        <input class="input" id="flt-search" type="search" placeholder="Cari nama mahasiswa atau judul..." aria-label="Cari pengajuan">
      </div>
      <div class="tbl-wrap">
        <table class="tbl" id="adm-queue-tbl">
          <thead>
            <tr>
              <th style="width:150px;">Mahasiswa</th>
              <th>Judul</th>
              <th style="width:110px;">Tanggal</th>
              <th style="width:80px;">Skor</th>
              <th style="width:110px;">Risiko</th>
              <th style="width:140px;">Status</th>
              <th style="width:96px;"></th>
            </tr>
          </thead>
          <tbody id="adm-queue-body"></tbody>
        </table>
      </div>
      <div id="adm-queue-empty" class="empty-state" hidden>Tidak ada ajuan yang cocok dengan filter.</div>
    </div>

    <!-- Pengaturan ambang -->
    <div id="adm-settings" role="tabpanel" aria-labelledby="tab-settings" hidden>
      <div class="legend-strip" id="legend-strip" aria-live="polite"></div>
      <div class="card mb0">
        <h2 class="card-title">Ambang Kategori Kemiripan</h2>
        <p class="card-sub">Batas kategori dinyatakan langsung dalam persen kemiripan. Angka di kanan setiap baris menunjukkan berapa persen skripsi PGSD dalam korpus yang jatuh ke kategori tersebut, sebagai bahan pertimbangan saat menggeser batas.</p>
        <div class="slider-row">
          <div class="slider-name">Batas bawah &ldquo;Sedang&rdquo;<small>di bawah nilai ini dikategorikan Rendah</small></div>
          <input type="range" id="thr-c1" min="5" max="50" step="1" aria-label="Batas bawah kategori Sedang">
          <div class="slider-val" id="thr-c1-val">26</div>
        </div>
        <div class="slider-row">
          <div class="slider-name">Batas bawah &ldquo;Tinggi&rdquo;<small>mulai perlu diperhatikan</small></div>
          <input type="range" id="thr-c2" min="20" max="80" step="1" aria-label="Batas bawah kategori Tinggi">
          <div class="slider-val" id="thr-c2-val">51</div>
        </div>
        <div class="slider-row">
          <div class="slider-name">Batas bawah &ldquo;Sangat Tinggi&rdquo;<small>perlu pembedaan substansi</small></div>
          <input type="range" id="thr-c3" min="40" max="99" step="1" aria-label="Batas bawah kategori Sangat Tinggi">
          <div class="slider-val" id="thr-c3-val">76</div>
        </div>
        <div id="band-stats" class="band-stats" aria-live="polite"></div>
        <p class="hint" style="margin-top:14px;">Skor dihitung dari kesamaan variabel bebas dan variabel terikat sebagai inti, dimodulasi oleh mata pelajaran dan jenjang kelas. Bila salah satu variabel inti berbeda, skor turun tajam meskipun bagian lain sama. Desain penelitian (&ldquo;pengaruh&rdquo;, &ldquo;upaya meningkatkan&rdquo;) tidak ikut dihitung karena hampir seragam di seluruh skripsi PGSD sehingga tidak membedakan apa pun.</p>
      </div>
    </div>
  </section>

  <!-- ========== HALAMAN TINJAU (ADMIN) ========== -->
  <section id="view-review" class="container" hidden>
    <div class="page-head pagerow" style="justify-content:space-between;">
      <div>
        <button id="btn-review-back" class="btn btn-ghost btn-sm">&larr; Kembali ke Antrean</button>
      </div>
      <div id="rv-status-wrap"></div>
    </div>

    <div class="grid-review">
      <div class="review-main">
        <div class="card mt0">
          <div class="section-label">Judul yang Diajukan</div>
          <div class="judul-besar" id="rv-judul"></div>
          <div class="meta-grid" id="rv-meta"></div>
          <div id="rv-rumusan" style="margin-top:14px;"></div>
        </div>

        <div class="card">
          <h2 class="card-title">Skor Kemiripan Tertinggi</h2>
          <p class="card-sub">Dibandingkan terhadap seluruh korpus judul yang tersimpan.</p>
          <div id="rv-score"></div>
          <div id="rv-flag"></div>
        </div>

        <div class="card">
          <h2 class="card-title">10 Judul Termirip dari Korpus</h2>
          <p class="card-sub">Terurut menurun. Klik baris untuk membuka rincian per faset, kata kunci beririsan, dan interpretasi otomatis.</p>
          <div id="rv-pairs"></div>
        </div>

        <div class="card">
          <h2 class="card-title">Saran Diferensiasi</h2>
          <p class="card-sub">Dibangkitkan otomatis berbasis aturan dari faset yang berbenturan. Gunakan sebagai bahan diskusi, bukan vonis.</p>
          <ul class="sugg-list" id="rv-sugg"></ul>
        </div>

        <div class="card">
          <h2 class="card-title">Riwayat Tindakan</h2>
          <ul class="log-list" id="rv-logs"></ul>
        </div>

        <div class="banner banner-warn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>
          <div>Prototipe. Korpus pembanding berisi 3.662 judul skripsi S1 PGSD FKIP UNS (2007-2026) dari digilib UNS. Perhitungan masih memakai pencocokan leksikal dan kamus faset, belum model semantik, sehingga kemiripan makna yang diungkapkan dengan kata yang sama sekali berbeda masih dapat lolos. Lingkup perbandingan terbatas pada PGSD UNS: skor rendah berarti tidak mirip dengan judul PGSD UNS, bukan berarti orisinal secara nasional. Skor bersifat pendukung keputusan, bukan penentu.</div>
        </div>
      </div>

      <aside class="review-side">
        <div class="card">
          <h2 class="card-title">Panel Keputusan</h2>
          <p class="card-sub">Keputusan Anda dicatat beserta waktunya dan diteruskan ke mahasiswa.</p>
          <div class="decide-btns">
            <button class="btn btn-moss" data-decide="disetujui">Setujui</button>
            <button class="btn btn-gold" data-decide="revisi">Perlu Revisi</button>
            <button class="btn btn-danger" data-decide="ditolak">Tolak</button>
          </div>
          <div class="field decision-note">
            <label for="rv-note">Catatan untuk mahasiswa</label>
            <textarea class="textarea" id="rv-note" rows="4" maxlength="500" placeholder="Wajib diisi bila memilih Perlu Revisi atau Tolak. Contoh: ubah variabel terikat agar tidak berbenturan dengan judul tahun 2023..."></textarea>
            <div class="field-error" id="rv-note-error" hidden>Catatan wajib diisi bila memilih Perlu Revisi atau Tolak.</div>
          </div>
          <button id="btn-decide-save" class="btn btn-primary btn-block">Simpan Keputusan</button>
        </div>

        <div class="card">
          <h2 class="card-title">Kirim Hasil Analisis</h2>
          <p class="card-sub">Teruskan laporan yang sudah terformat rapi kepada mahasiswa, calon pembimbing, atau arsip prodi.</p>
          <button id="btn-forward" class="btn btn-outline btn-block">Buka Dialog Pengiriman</button>
        </div>
      </aside>
    </div>
  </section>

  <footer class="app-foot container">
    TitleScan v1.2 &middot; Prototipe akademik tanpa backend &middot; Seluruh data tersimpan di memori sesi ini saja &middot; Program Studi Pendidikan Guru Sekolah Dasar, FKIP, Universitas Sebelas Maret
  </footer>
</div>

<!-- ================= MODAL: KONFIRMASI PENGAJUAN RISIKO TINGGI ================= -->
<div class="modal-overlay" id="modal-risk" hidden role="dialog" aria-modal="true" aria-labelledby="risk-title">
  <div class="modal" style="max-width:520px;">
    <div class="modal-head">
      <div>
        <h2 class="modal-title" id="risk-title">Pengajuan berisiko ditolak</h2>
        <p class="modal-sub">Hasil cek kemiripan judul Anda</p>
      </div>
      <button class="modal-x" data-close="modal-risk" aria-label="Tutup dialog">&times;</button>
    </div>
    <div class="modal-body">
      <div id="risk-body"></div>
      <p style="font-size:13.5px; color:var(--ink-2);">Anda tetap boleh melanjutkan pengajuan bila memiliki alasan yang sah (misalnya ada perbedaan substansi yang tidak tertangkap sistem, atau arahan langsung dari pembimbing). Keputusan akhir akan dipertimbangkan oleh Komisi Skripsi.</p>
    </div>
    <div class="modal-foot">
      <button class="btn btn-ghost" data-close="modal-risk">Kembali Merevisi</button>
      <button class="btn btn-danger" id="btn-risk-submit">Tetap Ajukan</button>
    </div>
  </div>
</div>

<!-- ================= MODAL: KIRIM HASIL ANALISIS ================= -->
<div id="print-area" aria-hidden="true"></div>

<div class="modal-overlay" id="modal-forward" hidden role="dialog" aria-modal="true" aria-labelledby="fwd-title">
  <div class="modal" style="max-width:760px;">
    <div class="modal-head">
      <div>
        <h2 class="modal-title" id="fwd-title">Kirim Hasil Analisis</h2>
        <p class="modal-sub">Pratinjau laporan di bawah sudah terformat siap baca. Pilih penerima lalu kirim (simulasi), salin, unduh, atau buka di email.</p>
      </div>
      <button class="modal-x" data-close="modal-forward" aria-label="Tutup dialog">&times;</button>
    </div>
    <div class="modal-body">
      <div class="field">
        <div style="font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px;">Penerima</div>
        <div class="check-row"><input type="checkbox" id="fwd-to-mhs" checked><label for="fwd-to-mhs">Mahasiswa yang bersangkutan</label></div>
        <div class="check-row"><input type="checkbox" id="fwd-to-dosen"><label for="fwd-to-dosen">Calon Pembimbing</label></div>
        <div class="check-row"><input type="checkbox" id="fwd-to-arsip" checked><label for="fwd-to-arsip">Arsip Komisi Skripsi</label></div>
      </div>
      <div class="field">
        <div style="font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px;">Pratinjau Laporan</div>
        <pre class="memo-pre" id="fwd-preview"></pre>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn btn-ghost btn-sm" id="btn-fwd-copy">Salin Teks</button>
      <button class="btn btn-ghost btn-sm" id="btn-fwd-download">Unduh .txt</button>
      <button class="btn btn-ghost btn-sm" id="btn-fwd-pdf">Unduh PDF</button>
      <button class="btn btn-ghost btn-sm" id="btn-fwd-mail">Buka di Email</button>
      <button class="btn btn-primary btn-sm" id="btn-fwd-send">Kirim (Simulasi)</button>
    </div>
  </div>
</div>

<!-- ================= MODAL: DETAIL RIWAYAT MAHASISWA ================= -->
<div class="modal-overlay" id="modal-history" hidden role="dialog" aria-modal="true" aria-labelledby="hist-title">
  <div class="modal" style="max-width:820px;">
    <div class="modal-head">
      <div>
        <h2 class="modal-title" id="hist-title">Detail Pengajuan</h2>
        <p class="modal-sub" id="hist-sub"></p>
      </div>
      <button class="modal-x" data-close="modal-history" aria-label="Tutup dialog">&times;</button>
    </div>
    <div class="modal-body" id="hist-body"></div>
    <div class="modal-foot">
      <button class="btn btn-primary btn-sm" id="btn-hist-pdf">Unduh Laporan PDF</button>
    </div>
  </div>
</div>

<!-- ================= MODAL: KONFIRMASI RESET ================= -->
<div class="modal-overlay" id="modal-reset" hidden role="dialog" aria-modal="true" aria-labelledby="reset-title">
  <div class="modal" style="max-width:480px;">
    <div class="modal-head">
      <div>
        <h2 class="modal-title" id="reset-title">Reset data demo?</h2>
      </div>
      <button class="modal-x" data-close="modal-reset" aria-label="Tutup dialog">&times;</button>
    </div>
    <div class="modal-body">
      <p style="font-size:14px;">Seluruh pengajuan, keputusan, catatan, ambang, dan bobot akan dikembalikan ke kondisi awal (dua pengajuan contoh akan dibuat ulang). Tindakan ini tidak bisa dibatalkan.</p>
    </div>
    <div class="modal-foot">
      <button class="btn btn-ghost" data-close="modal-reset">Batal</button>
      <button class="btn btn-danger" id="btn-reset-confirm">Ya, Reset</button>
    </div>
  </div>

/* ============================================================
   Tambahan tema — kerangka situs di luar aplikasi
   (footer situs, halaman statis, daftar artikel)
   ============================================================ */
.ts-site-footer{
  border-top:1px solid var(--border); background:var(--surface);
  margin-top:24px;
}
.ts-site-footer-inner{
  max-width:1140px; margin:0 auto; padding:16px 20px;
  font-size:12.5px; color:var(--ink-3); font-weight:600;
}
.ts-page-main{ padding-top:28px; padding-bottom:48px; }
.ts-page-main .card + .card{ margin-top:18px; }
.ts-entry .entry-content{ color:var(--ink-2); }
.ts-entry .entry-content a{ color:var(--teal); font-weight:600; }
.ts-entry-thumb{ margin:14px 0 16px; }
.ts-entry-thumb img{ border-radius:var(--radius-sm); border:1px solid var(--border); }
.entry-content::after{ content:""; display:block; clear:both; }

/* Navigasi menu opsional di atas aplikasi (jika diisi dari wp-admin) */
.ts-menu-bar{
  background:var(--teal-dark);
}
.ts-menu-bar ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px;
  max-width:1140px; margin:0 auto; padding:0 20px;
}
.ts-menu-bar a{
  display:block; padding:10px 14px; color:rgba(255,255,255,.92);
  font-size:13px; font-weight:700; text-decoration:none; border-radius:8px;
}
.ts-menu-bar a:hover{ background:rgba(255,255,255,.12); }

/* Tampilan layar cetak tetap mengikuti gaya laporan aplikasi */
@media print{
  .ts-site-footer{ display:none; }
}

/* Wadah pratinjau laporan resmi di modal (format sama dengan PDF) */
.fwd-letter{
  max-height:440px; overflow:auto; background:#fff;
  border:1px solid var(--border); border-radius:10px; padding:22px 24px;
}