:root{
  --brand:#0089CF;
  --brand-dark:#045A8E;
  --brand-tint:#E5F3FB;
  --ink:#0F2433;
  --ink-soft:#4C6478;
  --ink-mute:#8298A8;
  --bg:#EFF5F9;
  --surface:#FFFFFF;
  --border:#DCE7EE;
  --border-soft:#EAF1F5;
  --amber:#B4740F;
  --amber-bg:#FBF0DC;
  --amber-line:#EFCE8E;
  --success:#1C7A52;
  --success-bg:#E3F5EC;
  --danger:#B23A32;
  --danger-bg:#FBEAE8;
  --radius:10px;
  --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(15,36,51,0.06), 0 1px 1px rgba(15,36,51,0.04);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.page{max-width:820px;margin:0 auto;padding:0 20px 120px;}
.page-narrow{max-width:520px;padding-top:80px;text-align:center;}

.empty-state h2{font-family:'Sora',sans-serif;font-size:19px;margin-bottom:10px;}
.empty-state p{color:var(--ink-soft);font-size:14px;}

.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:820px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:14px;}
.logo{width:38px;height:38px;flex-shrink:0;}
.topbar-text h1{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;margin:0;color:var(--ink);}
.topbar-text p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}
.topbar-status{margin-left:auto;font-size:12px;font-weight:600;color:var(--brand-dark);background:var(--brand-tint);padding:5px 10px;border-radius:999px;}

.hero{padding:28px 0 8px;}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-dark);margin:0 0 6px;}
.hero h2{font-family:'Sora',sans-serif;font-weight:600;font-size:21px;line-height:1.35;margin:0 0 8px;color:var(--ink);max-width:600px;}
.hero p{font-size:13.5px;color:var(--ink-soft);margin:0;max-width:560px;line-height:1.6;}

.thread-card{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px 20px;display:flex;align-items:center;gap:18px;}
.thread-info{flex:1;min-width:0;}
.thread-info .label{font-size:12px;color:var(--ink-soft);}
.thread-info .num{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:17px;color:var(--ink);margin-top:2px;}
.thread-badge{flex-shrink:0;background:var(--brand-tint);border:1px solid var(--brand);color:var(--brand-dark);font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;white-space:nowrap;}

.notice{margin-top:18px;padding:12px 16px;border-radius:10px;font-size:13px;border:1px solid;}
.notice-info{background:var(--success-bg);border-color:var(--success);color:var(--success);}

.entry-list{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.entry-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;}
.entry-index{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-mute);width:20px;flex-shrink:0;}
.entry-titles{flex:1;min-width:0;}
.entry-titles .badan{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entry-titles .sub{font-size:12px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.pill-side{background:var(--brand-tint);color:var(--brand-dark);}
.chev{width:18px;height:18px;flex-shrink:0;color:var(--ink-mute);transition:transform 0.15s ease;}
.entry.open .chev{transform:rotate(180deg);}

.entry-body{display:none;padding:4px 16px 18px;border-top:1px solid var(--border-soft);}
.entry.open .entry-body{display:block;}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:14px;}
.field-grid .full{grid-column:1 / -1;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;font-weight:600;color:var(--ink-soft);}
.field label .req{color:var(--danger);margin-left:2px;}
.field label .opt{color:var(--ink-mute);font-weight:400;margin-left:4px;}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:9px 11px;width:100%;outline:none;
}
.field textarea{resize:vertical;min-height:56px;line-height:1.5;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);}
.field.required.empty input,.field.required.empty select{border-color:var(--danger);background:var(--danger-bg);}
.error-msg{font-size:11.5px;color:var(--danger);display:none;margin-top:2px;}
.field.required.empty .error-msg,.error-msg.show{display:block;}

.phone-row{display:flex;gap:8px;}
.phone-row select{flex:0 0 112px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
.phone-row input{flex:1;font-family:'IBM Plex Mono',monospace;}

.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 10px rgba(15,36,51,0.05);}
.bottom-bar-inner{max-width:820px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.bottom-status{font-size:12.5px;color:var(--ink-soft);}
.btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}

@media(max-width:640px){
  .field-grid{grid-template-columns:1fr;}
  .phone-row select{flex:0 0 96px;}
  .topbar-status{display:none;}
}