*{box-sizing:border-box} :root{--purple:#6d36d6;--ink:#251d32;--muted:#8c8497;--line:#e9e4ef;--bg:#faf9fc}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,system-ui,sans-serif}.page{max-width:1240px;margin:auto;padding:0 42px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#8e5af0,#592bb8);color:#fff;font-size:24px;font-weight:800;box-shadow:0 6px 14px #6d36d62b}.brand b{display:block;letter-spacing:1.4px;font-size:16px}.brand small{display:block;color:var(--purple);font-weight:800;font-size:9px;letter-spacing:3px;margin-top:3px}.top-tagline{color:#898194;font-size:12px;display:flex;align-items:center;gap:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:#48c99a}main{width:100%;max-width:1020px;margin:0 auto}.intro{padding:24px 0 20px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--purple);font-size:10px;font-weight:800;letter-spacing:1.5px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--purple)}h1{font-size:36px;line-height:1.22;letter-spacing:-1.3px;margin:16px 0 10px;font-weight:800}h1 em{font-style:normal;color:var(--purple)}.intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.translator{background:#fff;border:1px solid #e7e1ed;border-radius:18px;overflow:hidden;box-shadow:0 10px 36px #2e15510a}.language-bar{display:grid;grid-template-columns:1fr 54px 1fr;align-items:center;gap:10px;padding:17px 24px;background:#fdfcff;border-bottom:1px solid var(--line)}.language-bar label{display:flex;align-items:center;gap:14px;min-width:0}.language-bar small{font-size:9px;letter-spacing:1px;font-weight:800;color:#aaa2b4}.language-bar select{min-width:0;max-width:100%;border:0;background:transparent;color:#332a40;font:700 13px Inter,sans-serif;outline:none;cursor:pointer}.swap{width:36px;height:36px;border:1px solid #e6def2;border-radius:11px;background:#fff;color:var(--purple);font-size:22px;justify-self:center}.swap:hover{background:#f2edff}.panels{display:grid;grid-template-columns:1fr 1fr}.panel{padding:22px 24px 14px;min-width:0}.panel:first-child{border-right:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:center;color:#a49cad;font-size:9px;letter-spacing:1.1px}.panel-heading b{font-size:9px}.panel-heading span:last-child{letter-spacing:0;font-weight:500}.panel-heading #resultLanguage{color:var(--purple);font-weight:800;letter-spacing:.6px}textarea{width:100%;height:155px;display:block;resize:vertical;border:0;outline:0;background:transparent;padding:19px 0 8px;color:#332b40;font:16px/1.6 Inter,sans-serif}textarea::placeholder{color:#c1bbc9}.result-text{min-height:172px;padding:19px 0 8px;font-size:16px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.result-text.empty{font-size:14px;color:#c1bbc9}.tools{display:flex;align-items:center;gap:12px;min-height:28px}.tools button{border:0;background:transparent;padding:5px 0;color:#8d8598;font-size:12px}.tools button:hover:not(:disabled){color:var(--purple)}.tools button:disabled{opacity:.4;cursor:not-allowed}.grow{flex:1}.hint{font-size:10px;color:#aaa2b2}.translator-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:#fdfcff;border-top:1px solid var(--line)}.translator-footer>span{font-size:10px;color:#a29aaa}.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 18px;background:linear-gradient(120deg,#7a45df,#5d2abd);color:#fff;border:0;border-radius:10px;font:700 12px Inter,sans-serif;box-shadow:0 5px 12px #6d36d62b}.primary:hover{filter:brightness(1.06)}#message{font-size:11px;color:var(--purple);padding:0 24px}#message:not(:empty){padding-bottom:14px}footer{margin-top:auto;padding:30px 0 20px;display:flex;justify-content:space-between;gap:14px;color:#a7a0af;font-size:10px}button{cursor:pointer}@media(max-width:760px){.page{padding:0 16px}.topbar{height:68px}.brand-mark{width:35px;height:35px;font-size:20px}.top-tagline{font-size:10px;gap:6px}.intro{padding:18px 0 16px}h1{font-size:29px}.intro p{font-size:12px}.language-bar{padding:14px 12px;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:5px}.language-bar label{display:grid;gap:7px}.language-bar select{font-size:11px;width:100%}.swap{width:32px;height:32px}.panels{grid-template-columns:1fr}.panel{padding:18px 16px 11px}.panel:first-child{border-right:0;border-bottom:1px solid var(--line)}textarea{height:105px;font-size:15px}.result-text{min-height:100px;font-size:15px}.translator-footer{padding:14px;align-items:center}.translator-footer>span{max-width:130px;line-height:1.5}.primary{padding:12px 13px;gap:10px}footer{flex-direction:column;font-size:9px;padding:24px 0 17px}}
/* Warna status hasil terjemahan */
.result-text.result-valid {
  color: #171717;
}
.result-text.result-missing,
.result-text.result-error {
  color: #dc2626;
}
.result-text.result-loading {
  color: #817b8d;
}