/*
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.3.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; }
}

/* ================================================================
   v1.3 — penanda proses, pratinjau surat, dan penyesuaian ponsel
   ================================================================ */


/* Pratinjau surat di dalam dialog: tampil seperti kertas A4 mini */
.letter-preview{
  background:#fff; border:1px solid var(--border,#E0D9CF); border-radius:8px;
  padding:22px 24px; max-height:56vh; overflow:auto;
}
.letter-preview .letter{ width:auto; font-size:10.5pt; }
.letter-preview .letter-head .kop{ width:100%; margin-left:0; }
.letter-preview .letter-sign{ margin-left:48%; }
.letter-preview .letter-sign .gap{ height:18mm; }

/* ---------------- Kenyamanan di ponsel ---------------- */

/* Kotak diagnosis bila aplikasi gagal dimuat */
#ts-fatal{ padding:24px 16px; }
.ts-fatal-box{
  max-width:620px; margin:0 auto; padding:22px 24px; background:#fff;
  border:1px solid #E5B4AC; border-left:5px solid #A8432F; border-radius:12px;
  font-family:var(--font, system-ui, Arial, sans-serif); line-height:1.6;
}
.ts-fatal-box h2{ margin:0 0 10px; font-size:18px; color:#A8432F; }
.ts-fatal-box p{ margin:0 0 10px; font-size:14px; color:#3C3A37; }
.ts-fatal-box pre{
  margin:0 0 10px; padding:10px 12px; background:#FBF6F4; border-radius:8px;
  font-size:12.5px; white-space:pre-wrap; word-break:break-word; color:#5A3A33;
}
.ts-fatal-hint{ font-size:12.5px !important; color:#6B6660 !important; }

/* ================================================================
   v1.4.1 — Kaki halaman
   Sebelumnya footer memakai kelas .ts-site-footer yang tidak punya
   aturan gaya sama sekali, sehingga teksnya menempel di tepi kiri
   tanpa jarak dan tanpa pemisah. Sekarang dibuat sejajar dengan
   kepala halaman: ada garis pemisah, latar sendiri, teks di tengah,
   dan selalu menempel di dasar layar walau isinya pendek.
   ================================================================ */

html{ height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }

/* Isi halaman mengisi ruang tersisa agar footer terdorong ke bawah */
#view-app,
#view-login{ flex:1 0 auto; }

/* Halaman masuk tidak lagi memaksa setinggi layar penuh, cukup mengisi
   sisa ruang di antara kepala dan kaki halaman. */
.login-wrap{ min-height:0; }

.ts-site-footer{
  flex-shrink:0;
  margin-top:40px;
  background:var(--surface-2, #F6F3EE);
  border-top:1px solid var(--border);
}
.ts-site-footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:20px 24px 22px;
  text-align:center;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-3);
  letter-spacing:.01em;
}
.ts-site-footer-inner span{ display:inline-block; max-width:60ch; }

@media (max-width:640px){
  .ts-site-footer{ margin-top:28px; }
  .ts-site-footer-inner{ padding:16px 18px 20px; font-size:12px; }
}

/* Bilah admin WordPress menggeser seluruh halaman ke bawah */
body.admin-bar{ min-height:calc(100vh - 32px); }
@media screen and (max-width:782px){
  body.admin-bar{ min-height:calc(100vh - 46px); }
}

/* ================================================================
   v1.6 — LAPISAN PENYELARASAN VISUAL
   Nilai desain di sini sebagian diadopsi dari usulan tata rupa yang
   lebih matang (kepala berkaca, sudut lebih lunak, tipografi lebih
   tegas), tetapi ditulis ulang TANPA !important. Aturan ini berada
   paling akhir dengan kekhususan yang sepadan, jadi ia menang secara
   wajar dan masih bisa ditimpa nanti tanpa berkelahi.
   ================================================================ */

/* ---------- Kerangka ---------- */
.container{ max-width:1180px; padding:0 24px; }

/* ---------- Kepala halaman ---------- */
.app-header{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(203,216,212,.9);
  box-shadow:0 4px 22px rgba(7,31,27,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.header-inner{ min-height:76px; }
.brand-mark{
  width:42px; height:42px; border-radius:13px;
  background:linear-gradient(145deg, var(--teal), #0A514C);
  box-shadow:0 8px 20px rgba(11,107,99,.22);
}
.brand-name{ font-size:21px; letter-spacing:-.035em; }
.brand-sub{ color:#70807C; }

/* Kepala lengket tidak lagi menutupi isi saat berpindah tampilan */
html{ scroll-padding-top:92px; }
#view-student, #view-admin, #view-review{ scroll-margin-top:92px; }

/* ---------- Judul halaman ---------- */
.page-head{ padding:42px 0 24px; }
.page-head h1{ font-size:32px; letter-spacing:-.045em; }
.page-head .lede{ max-width:680px; font-size:15px; color:var(--ink-2); }

/* ---------- Tab ---------- */
.tabs{
  gap:5px; padding:5px; width:max-content;
  background:#EAF0EE; border:1px solid #DCE6E2; border-radius:13px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.025);
}
.tab{
  border:0; border-radius:9px; padding:9px 15px;
  color:#687773; font-weight:700;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tab.active{ background:#fff; color:var(--teal-ink); box-shadow:0 2px 8px rgba(7,31,27,.08); }

/* ---------- Kartu ---------- */
.card{
  border-color:#DFE7E4; border-radius:18px;
  box-shadow:0 1px 2px rgba(41,37,36,.04), 0 6px 20px rgba(41,37,36,.045);
  padding:25px 27px;
}
.card-title{ font-size:18px; letter-spacing:-.025em; }
.card-sub{ color:#66736F; }

/* ---------- Ruas masukan ---------- */
.field label{ color:#42534F; }
.input, .textarea, select.input{
  border-color:#D3DFDB; background:#FBFDFC;
  border-radius:12px; padding:12px 14px;
}
.textarea{ min-height:104px; }
.input:focus, .textarea:focus, select.input:focus{
  border-color:#2A8C83; background:#fff;
  box-shadow:0 0 0 4px rgba(11,107,99,.11);
}

/* ---------- Tombol ---------- */
.btn{ border-radius:11px; min-height:43px; }
.btn-primary{
  background:linear-gradient(135deg,#0B776E,#075C55);
  box-shadow:0 7px 16px rgba(11,107,99,.18);
}
.btn-primary:hover:not(:disabled){
  background:linear-gradient(135deg,#09685F,#064D48);
  transform:translateY(-1px);
}
.btn-ghost{ background:#fff; }

/* Penanda fokus yang terlihat, untuk pengguna papan ketik */
.btn:focus-visible, .tab:focus-visible, .input:focus-visible,
.textarea:focus-visible, .acc-head:focus-visible, select:focus-visible{
  outline:3px solid rgba(15,118,110,.30); outline-offset:2px;
}

/* ---------- Kolom hasil ---------- */
.grid-student{
  gap:22px; align-items:start;
  grid-template-columns:minmax(360px,.9fr) minmax(430px,1.1fr);
}
#st-result-card{ position:relative; overflow:hidden; }
#st-result-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#0B6B63,#74AAA3);
}
.score-flex{ gap:18px; align-items:center; padding:6px 0; }
.score-big{ font-size:64px; letter-spacing:-.06em; line-height:1; }
.score-big small{ font-size:21px; margin-left:3px; font-weight:700; }
.score-caption{ line-height:1.65; }

/* Kartu hasil saat masih kosong: ringkas, tidak menganga */
.result-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 22px; color:var(--ink-3);
}
.result-empty svg{ width:34px; height:34px; margin-bottom:12px; color:#C6D3CF; }
.result-empty b{ display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:4px; }

/* Keterangan selama korpus disiapkan di latar belakang */
.hint-siap{ display:flex; align-items:center; gap:8px; color:var(--teal-ink); font-weight:600; }
.hint-siap::before{
  content:''; width:13px; height:13px; flex:none; border-radius:50%;
  border:2px solid var(--teal-border); border-top-color:var(--teal);
  animation:spin .7s linear infinite;
}

/* ---------- Faset & tabel ---------- */
.facet-list{ gap:11px; }
.facet-row{ border-radius:10px; }
.tbl-wrap{ border-radius:13px; border-color:#DFE7E4; }
.tbl th{ background:#F2F6F4; color:#6C7B77; font-size:11.5px; letter-spacing:.06em; }
.tbl td{ padding:13px 14px; }
.tbl tbody tr.clickable{ transition:background .12s ease; }
.tbl tbody tr.clickable:hover{ background:#F6FAF8; }

/* ---------- Kartu angka & penyaring ---------- */
.stat-grid{ gap:14px; }
.stat-card{
  border-radius:16px; border-color:#DFE7E4; padding:19px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 2px rgba(41,37,36,.04), 0 6px 20px rgba(41,37,36,.045);
}
.stat-value{ font-size:30px; letter-spacing:-.045em; }
.stat-label{ color:#61706C; }
.filter-bar{
  background:#fff; border:1px solid #DFE7E4; border-radius:15px; padding:12px;
  box-shadow:0 1px 2px rgba(41,37,36,.04);
}

/* ---------- Tombol keputusan: pilihan, bukan tiga blok pekat ---------- */
.decide-btns{ gap:10px; }
.btn-choice{
  position:relative; font-weight:700; border:1.5px solid transparent;
  background:var(--surface-2); color:var(--ink-2);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.btn-choice:hover:not(:disabled){ background:#EDE9E1; color:var(--ink); }
.btn-choice.btn-moss.is-selected  { background:var(--moss);  color:#fff; border-color:var(--moss); }
.btn-choice.btn-gold.is-selected  { background:#A7862A;      color:#fff; border-color:#8F6E14; }
.btn-choice.btn-danger.is-selected{ background:var(--brick); color:#fff; border-color:var(--brick); }
.btn-choice.is-selected::after{ content:'\2713'; margin-left:8px; font-size:13px; font-weight:800; }

/* ---------- Dialog, pita, notifikasi ---------- */
.modal{ border-radius:18px; border:1px solid #DBE5E1; }
.banner{ border-radius:13px; }
.toast{ border-radius:12px; }

/* ---------- Halaman masuk ---------- */
.login-wrap{
  background:
    radial-gradient(circle at 50% 15%, rgba(11,107,99,.08), transparent 34%),
    linear-gradient(180deg,#F8FAF9,#EEF4F2);
}
.login-card{
  max-width:470px; padding:34px;
  border:1px solid #DCE6E2; border-radius:22px;
  box-shadow:0 22px 70px rgba(7,31,27,.12);
}
.login-brand{ margin-bottom:22px; }
.login-lede{ font-size:14px; color:#61706C; line-height:1.7; }

/* ---------- Kaki halaman ---------- */
.ts-foot-line{ white-space:nowrap; }

/* ================================================================
   Layar sedang dan kecil
   ================================================================ */
@media (max-width:900px){
  .grid-student{ grid-template-columns:1fr; }
  .page-head{ padding-top:30px; }
  .page-head h1{ font-size:28px; }
}

@media (max-width:640px){
  .container{ padding:0 15px; }
  .header-inner{ min-height:68px; }
  .brand-name{ font-size:19px; }
  .brand-sub{ display:none; }
  .page-head{ padding:26px 0 18px; }
  .card{ padding:20px; border-radius:15px; }
  .score-big{ font-size:52px; }

  /* Nama tetap terlihat, hanya barisan NIM yang disembunyikan agar tidak sempit */
  .user-chip .u-role{ display:none; }
  .user-chip .u-name{ max-width:120px; }

  /* Sasaran sentuh minimal 44px */
  .btn{ min-height:44px; }
  .btn-sm{ min-height:40px; }
  .tab{ min-height:44px; flex:1; white-space:nowrap; }
  .tabs{ width:100%; overflow-x:auto; }

  /* Tombol aksi melebar penuh agar terjangkau ibu jari */
  .btn-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .btn-row .btn{ width:100%; }

  /* 16px mencegah iOS memperbesar halaman saat kolom difokuskan */
  .input, .textarea, select.input{ font-size:16px; }

  /* Tabel panjang digulir mendatar, bukan memaksa halaman melebar */
  .tbl-wrap{ -webkit-overflow-scrolling:touch; }
  .tbl-wrap .tbl{ min-width:560px; }

  /* Dialog menempel ke dasar layar */
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal{ max-width:100%; margin:0; border-radius:14px 14px 0 0; max-height:92vh; }
  .modal-foot{ flex-wrap:wrap; gap:8px; position:sticky; bottom:0; background:var(--surface); }
  .modal-foot .btn{ flex:1 1 auto; }

  .login-card{ padding:24px 20px; border-radius:18px; }
  .letter-preview{ padding:14px; max-height:62vh; }
  .letter-preview .letter{ font-size:9.5pt; }

  .ts-foot-sep{ display:none; }
  .ts-foot-line{ display:block; margin-top:2px; white-space:normal; }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms; transition-duration:.01ms; }
  .btn-primary:hover:not(:disabled){ transform:none; }
}

/* ================================================================
   Penanda proses: logo TitleScan berkedip di tengah layar
   ================================================================ */
#busy-veil{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,249,247,.62);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease;
}
#busy-veil.on{ opacity:1; visibility:visible; }
.busy-logo{
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(145deg, var(--teal), #0A514C);
  box-shadow:0 10px 26px rgba(11,107,99,.24);
  animation:busy-kedip 1.1s ease-in-out infinite;
}
.busy-logo svg{ width:30px; height:30px; }
@keyframes busy-kedip{
  0%, 100% { opacity:1;   transform:scale(1);    }
  50%      { opacity:.38; transform:scale(.94);  }
}
@media (prefers-reduced-motion:reduce){
  .busy-logo{ animation:none; opacity:.85; }
}

/* ================================================================
   Rubrik kategori & aksi baris pada Daftar Ajuan
   ================================================================ */
.rubrik{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.rubrik-judul{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink); }
.rubrik-tabel{ width:100%; border-collapse:collapse; font-size:13px; }
.rubrik-tabel th{
  text-align:left; padding:9px 10px; background:#F2F6F4; color:#6C7B77;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:800;
  border-bottom:1px solid var(--border);
}
.rubrik-tabel td{
  padding:11px 10px; vertical-align:top; border-bottom:1px solid var(--border);
  color:var(--ink-2); line-height:1.6;
}
.rubrik-tabel tr:last-child td{ border-bottom:0; }
.rubrik-tabel td:nth-child(2){ white-space:nowrap; font-weight:700; color:var(--ink); }

.row-acts{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.act-hapus{ color:var(--brick); }
.act-hapus:hover:not(:disabled){ background:var(--brick-soft); border-color:var(--brick-border); }

@media (max-width:640px){
  .rubrik-tabel{ font-size:12px; }
  .rubrik-tabel th:nth-child(4), .rubrik-tabel td:nth-child(4){ display:none; }
  .row-acts{ justify-content:flex-start; }
}


/* ------------------------------------------------------------------
   Penyimpanan ambang kategori (panel Komisi Skripsi)
   ------------------------------------------------------------------ */
.ambang-simpan{
  margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--border-2);
}
.ambang-simpan .pagerow{ margin-top:8px; }
.hint-warn{ color:var(--brick); font-weight:600; }

/* ------------------------------------------------------------------
   Penanda peran komponen rubrik pada rincian pasangan judul
   ------------------------------------------------------------------ */
.chip-xs{
  font-size:10.5px; padding:1px 6px; margin-left:6px;
  vertical-align:middle; font-weight:600; letter-spacing:.2px;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--border);
  border-radius:999px; display:inline-block; white-space:nowrap;
}

.facet-why{
  margin-top:5px; font-size:11.5px; line-height:1.5;
  color:var(--ink-3); font-style:italic;
}

/* Komponen inti (variabel bebas & terikat) dibedakan: keduanya yang
   menentukan skor, sedangkan sisanya hanya memodulasi. */
.facet-block.is-inti{
  border-left:3px solid var(--teal, #1F6F6B);
  padding-left:10px;
}
.chip-xs.peran-inti{
  background:var(--teal-soft, #E6F2F1); color:var(--teal-ink, #14534F);
  border-color:var(--teal-border, #BFDEDB);
}