@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");
:root {
  color-scheme: light;
  --paper: #f5f3ec; --surface: #fffefa; --ink: #202b26; --muted: #69746d;
  --line: #d9ded5; --line-dark: #b9c1b7; --green: #285747; --green-dark: #1c4437;
  --green-soft: #e7efe8; --orange: #c56c45; --shadow: 0 20px 50px rgba(44,55,47,.06);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; background: var(--paper); color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 7% 14%,rgba(219,227,211,.45),transparent 28rem),var(--paper); }
button,input,textarea { font: inherit; } button { cursor: pointer; }
[hidden] { display:none !important; }
.page-shell { width: min(1160px,calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(110,124,111,.22); }
.brand { display:inline-flex; gap:11px; align-items:center; color:var(--ink); font-weight:700; font-size:16px; letter-spacing:-.045em; text-decoration:none; }
.brand-accent { color:var(--green); } .brand-mark { width:22px; display:flex; gap:3px; align-items:end; }
.brand-mark span { display:block; width:5px; border-radius:5px; background:var(--green); }
.brand-mark span:nth-child(1) { height:12px; opacity:.52; } .brand-mark span:nth-child(2) { height:19px; }
.brand-mark span:nth-child(3) { height:15px; opacity:.72; }
.top-link { color:var(--muted); text-decoration:none; font-size:12px; transition:color .18s ease; }
.top-link:hover { color:var(--green); } .top-link span { color:var(--orange); margin-left:4px; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:72px; align-items:end; padding:78px 0 52px; }
.eyebrow,.side-kicker { margin:0 0 18px; color:var(--green); text-transform:uppercase; font:500 10px/1.4 "DM Mono",monospace; letter-spacing:.14em; }
.eyebrow { display:flex; align-items:center; gap:9px; } .eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:20px; color:var(--ink); font:400 clamp(42px,5.7vw,72px)/.99 "Newsreader",Georgia,serif; letter-spacing:-.055em; }
h1 em { color:var(--green); font-weight:400; }
.intro-lede { max-width:590px; margin-bottom:0; color:#59655e; font-size:15px; line-height:1.75; }
.margin-note { padding:0 0 4px 20px; border-left:1px solid var(--line-dark); color:var(--muted); font:13px/1.6 "DM Mono",monospace; }
.note-rule { width:18px; height:2px; margin-bottom:16px; background:var(--orange); }
.margin-note p { margin:0 0 12px; } .margin-note strong { color:var(--ink); font-weight:500; }
.margin-note .note-small { max-width:170px; margin:0; font:12px/1.6 "DM Sans",sans-serif; }
.workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,.8fr); gap:22px; align-items:start; }
.workflow,.side-card { border:1px solid var(--line); border-radius:5px; background:rgba(255,254,250,.8); }
.workflow { padding:30px; box-shadow:var(--shadow); } .side-card { padding:28px; min-height:440px; overflow:hidden; }
.step-heading { display:flex; gap:15px; align-items:flex-start; margin-bottom:23px; }
.step-number { flex:none; padding-top:4px; color:var(--orange); font:500 11px/1.4 "DM Mono",monospace; }
.step-heading h2 { margin:0 0 5px; font-size:18px; letter-spacing:-.035em; }
.step-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.button { min-height:45px; display:inline-flex; justify-content:center; align-items:center; gap:18px; padding:0 17px; border:1px solid transparent; border-radius:3px; font-size:12px; font-weight:600; transition:background .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease; }
.button-primary { color:#fffefa; background:var(--green); } .button-primary:hover:not(:disabled) { background:var(--green-dark); }
.button-primary:disabled { cursor:not-allowed; opacity:.43; } .button-primary span:last-child { color:#d2a179; font-size:16px; }
.button-quiet { color:var(--green); border-color:var(--line-dark); background:transparent; } .button-quiet:hover { border-color:var(--green); background:var(--green-soft); }
 .field-group { display:grid; gap:7px; margin-bottom:16px; }
.field-group label { color:#57645b; font:500 10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.field-group input,.field-group textarea { width:100%; border:1px solid var(--line); border-radius:3px; outline:none; color:var(--ink); background:#fffefa; font-size:13px; line-height:1.65; transition:border-color .16s ease,box-shadow .16s ease; }
.field-group input { min-height:43px; padding:10px 12px; } .field-group textarea { min-height:188px; padding:12px; resize:vertical; }
.field-group input:focus,.field-group textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(40,87,71,.1); }
#abstract-count { color:#9aa49a; letter-spacing:0; text-transform:none; }
.side-kicker { margin-bottom:12px; color:#879187; }
.side-illustration { position:relative; height:175px; margin:8px 0 23px; background:linear-gradient(140deg,#f2f1e8,#e7eee5); overflow:hidden; }
.paper-sheet { position:absolute; width:126px; height:153px; border:1px solid #d2d9d0; background:#fffefa; box-shadow:0 10px 19px rgba(40,60,46,.08); }
.sheet-back { top:19px; left:calc(50% - 44px); transform:rotate(8deg); background:#f9f8f2; }
.sheet-front { top:11px; left:calc(50% - 77px); padding:23px 17px; transform:rotate(-5deg); }
.sheet-line { display:block; width:100%; height:3px; margin:9px 0; background:#e4e8df; }
.line-short { width:58%; height:5px; margin-bottom:15px; background:#355e4c; } .line-mid { width:74%; }
.sheet-highlight { position:absolute; top:80px; left:13px; width:74px; height:7px; background:#f2dfbc; }
.orbit-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--orange); }
.dot-one { top:35px; right:27%; } .dot-two { bottom:31px; left:22%; width:5px; height:5px; background:var(--green); }
.dot-three { right:18%; bottom:42px; width:4px; height:4px; background:#c2a46c; }
.side-card h3 { max-width:260px; margin-bottom:10px; font:400 25px/1.08 "Newsreader",Georgia,serif; letter-spacing:-.035em; }
.side-card>p:not(.side-kicker):not(.side-footnote) { margin-bottom:18px; color:var(--muted); font-size:12px; line-height:1.65; }
.side-divider { height:1px; margin:19px 0 15px; background:var(--line); }
.side-footnote { margin-bottom:0; color:#778278; font-size:11px; line-height:1.7; }
.status { margin-top:18px; font-size:12px; line-height:1.6; }
.status.error { padding:12px 14px; border-left:3px solid #914c42; color:#773d36; background:#f7ebe6; }
.status.loading { display:flex; gap:10px; align-items:center; color:var(--green); }
.spinner { width:15px; height:15px; border:2px solid #cedbd0; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.results { margin-top:30px; padding:34px; border:1px solid var(--line); border-radius:5px; background:rgba(255,254,250,.9); box-shadow:var(--shadow); }
.results-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.results-head .eyebrow { margin-bottom:11px; } .results-head h2 { margin-bottom:6px; font:400 38px/1 "Newsreader",Georgia,serif; letter-spacing:-.04em; }
.results-subtitle { margin:0; color:var(--muted); font-size:12px; }
.detected-summary { padding:13px 15px; border-top:1px solid #b8cabb; border-bottom:1px solid #b8cabb; color:var(--green-dark); background:#eff4ec; font-size:12px; }
.detected-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 27px; }
.sdg-card { min-height:108px; padding:15px; border:1px solid var(--line); border-radius:3px; background:var(--surface); }
.sdg-card-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:16px; }
.sdg-name { color:var(--green-dark); font:500 12px "DM Mono",monospace; } .sdg-score { color:var(--muted); font:11px "DM Mono",monospace; }
.score-track { height:3px; background:#e6e9e1; } .score-fill { height:100%; min-width:2px; background:var(--green); }
.threshold-label { display:flex; justify-content:space-between; gap:8px; margin-top:8px; color:#828c82; font-size:10px; }
.empty-detections { display:flex; gap:15px; align-items:center; margin:16px 0 27px; padding:21px; border:1px solid var(--line); }
.empty-detections>span { color:var(--orange); font:28px "Newsreader",Georgia,serif; }
.empty-detections h3 { margin:0 0 4px; font-size:13px; } .empty-detections p { margin:0; color:var(--muted); font-size:12px; }
.all-scores,.abstract-details { border-top:1px solid var(--line); } .abstract-details { border-bottom:1px solid var(--line); }
details>summary { min-height:57px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; color:var(--ink); font-size:12px; font-weight:600; }
details>summary::-webkit-details-marker { display:none; } details>summary::after { content:"+"; margin-left:auto; color:var(--orange); font:17px "DM Mono",monospace; }
details[open]>summary::after { content:"−"; } .summary-note { margin-left:auto; color:var(--muted); font-size:11px; font-weight:400; }
.score-table-wrap { overflow-x:auto; padding-bottom:14px; } table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
th { padding:10px; color:#7b867c; border-bottom:1px solid var(--line); font:500 10px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
td { padding:11px 10px; border-bottom:1px solid #edf0e9; color:#46524a; } tbody tr:last-child td { border-bottom:0; }
.table-score { width:min(270px,33vw); } .table-bar { display:flex; align-items:center; gap:10px; }
.table-bar-track { flex:1; height:3px; background:#e7eae3; } .table-bar-fill { height:100%; background:var(--green); }
.table-value { width:42px; text-align:right; font:11px "DM Mono",monospace; }
.status-tag { display:inline-block; padding:4px 7px; font-size:10px; }
.status-tag.detected { color:var(--green-dark); background:var(--green-soft); } .status-tag.not-detected { color:#727d73; background:#f0f1eb; }
.paper-result { padding:4px 0 18px; } .paper-result h3 { max-width:800px; margin-bottom:10px; font:400 23px/1.2 "Newsreader",Georgia,serif; }
.paper-result p { max-width:900px; margin-bottom:0; color:#5d685f; font-size:12px; line-height:1.8; }
.result-footnote { margin:15px 0 0; color:#808a80; font-size:10px; line-height:1.6; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:27px 0 35px; color:#858e83; font:10px "DM Mono",monospace; letter-spacing:.02em; }
@media (max-width:780px) {
 .page-shell { width:min(100% - 36px,620px); } .intro { grid-template-columns:1fr; gap:24px; padding:52px 0 35px; }
 .margin-note { max-width:340px; display:grid; grid-template-columns:20px 1fr; column-gap:11px; padding-left:0; border:0; }
 .margin-note .note-rule { grid-row:span 2; margin-top:5px; } .margin-note p { margin-bottom:4px; }
 .margin-note .note-small { grid-column:2; max-width:300px; } .workspace { grid-template-columns:1fr; }
 .side-card { min-height:unset; } .side-illustration { max-width:300px; } .detected-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
 .page-shell { width:calc(100% - 28px); } .topbar { height:64px; } .top-link { font-size:11px; }
 .intro { padding-top:42px; } h1 { font-size:45px; } .intro-lede { font-size:13px; }
 .workflow,.side-card { padding:21px; }
 .results-head { align-items:stretch; flex-direction:column; }
 .results-head .button { width:100%; } .results { padding:23px 18px; }
 .results-head h2 { font-size:32px; } .detected-grid { grid-template-columns:1fr; }
 .summary-note { display:none; } .footer { flex-direction:column; gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Direct title + abstract input flow. */
.paper-form { display:grid; gap:12px; }
.paper-form .field-group { margin-bottom:4px; }
.field-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.required-mark { color:var(--orange); }
.field-group input::placeholder,.field-group textarea::placeholder { color:#919c93; opacity:1; }
.form-actions { display:flex; gap:18px; align-items:center; justify-content:space-between; padding-top:8px; }
.form-actions p { max-width:230px; margin:0; font-size:11px; color:var(--muted); line-height:1.5; }
.paper-form .field-group textarea { min-height:225px; }
@media (max-width:520px) {
  .form-actions { flex-direction:column; align-items:stretch; }
  .form-actions p { max-width:none; }
  .form-actions .button { width:100%; }
}

/* Hindari submit native sebelum handler JavaScript terpasang. */
#classify-button:disabled { opacity: .55; cursor: not-allowed; }