:root { --ink:#14211f; --muted:#71807d; --line:#d4dfdb; --paper:#eef2f0; --white:#ffffff; --teal:#08786b; --red:#cf2727; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans SC",sans-serif; }
.app-shell { display:grid; min-height:100vh; max-width:780px; margin:auto; padding:20px; place-items:center; }
.converter-wrap { width:100%; padding:16px; border:1px solid #dce5e2; background:#f8faf9; box-shadow:0 10px 30px #18362d0b; }
.workspace-bar { display:flex; align-items:center; justify-content:space-between; height:26px; margin-bottom:15px; color:#60706d; font:500 12px/1 "DM Mono","Noto Sans SC",monospace; letter-spacing:.06em; }
.window-button { display:grid; width:28px; height:28px; padding:0; border:1px solid #b9cfca; background:var(--white); color:var(--teal); place-items:center; cursor:pointer; font:500 17px/1 "DM Mono",monospace; }.window-button:hover { border-color:var(--teal); background:#e8f3f0; }
.converter-title { margin:0 0 7px; font-size:14px; line-height:1.5; font-weight:400; }
.converter { display:grid; width:100%; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:stretch; }
.panel { position:relative; padding:12px; border:1px solid var(--line); background:var(--white); }.input-panel { border-top:3px solid #61726f; }.output-panel { border-top:3px solid var(--teal); }
.text-converter { font-size:14px; }.text-converter .panel { min-height:98px; }.text-converter textarea { height:70px; font:400 14px/1.65 "DM Mono","Noto Sans SC",monospace; }
textarea { display:block; width:100%; resize:vertical; border:0; outline:0; background:transparent; color:var(--ink); font:400 15px/1.65 "DM Mono","Noto Sans SC",monospace; }.output-panel textarea { color:#075f55; }
.conversion-arrow { display:grid; place-items:center; color:var(--teal); font:400 19px/1 "DM Mono",monospace; }.text-converter .conversion-arrow { font-size:14px; }
.icon-button { position:absolute; z-index:1; top:8px; right:8px; display:grid; width:25px; height:25px; padding:0; border:0; place-items:center; cursor:pointer; font:400 16px/1 "DM Mono",monospace; }.clear-button { color:#80908c; background:transparent; }.clear-button:hover { color:var(--ink); }.copy-button { color:#fff; background:var(--teal); }.copy-button:disabled { cursor:default; opacity:0; }.copy-button:not(:disabled):hover { background:#056155; }
.calculator-section { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }.calculation-panel { min-height:132px; }.calculation-panel textarea { height:104px; }.calculation-output { min-height:104px; padding:2px 40px 2px 0; color:#075f55; font:400 15px/1.65 "DM Mono","Noto Sans SC",monospace; white-space:pre-wrap; word-break:break-word; cursor:copy; outline:none; }.calculation-output:focus { box-shadow:inset 0 -1px 0 var(--teal); }.calculation-line { min-height:1.65em; }.remaining-alert { color:var(--red); font-weight:600; }
.toast { position:fixed; z-index:3; left:50%; bottom:18px; transform:translate(-50%,12px); padding:7px 12px; color:#fff; background:#172624; font-size:12px; opacity:0; transition:.16s ease; pointer-events:none; }.toast.is-visible { transform:translate(-50%,0); opacity:1; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
body.popup-mode .app-shell { max-width:none; padding:12px; place-items:start; } body.popup-mode .converter-wrap { padding:12px; box-shadow:none; } body.popup-mode .window-button { display:none; }
@media (max-width:640px) { .app-shell { padding:10px; place-items:start; }.converter-wrap { min-width:580px; padding:12px; }.calculator-section { margin-top:16px; }.text-converter .panel { min-height:98px; }.text-converter textarea { height:70px; }.calculation-panel { min-height:132px; }.calculation-panel textarea,.calculation-output { min-height:104px; height:104px; } }