:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --bg:#060a0c; --panel:#0b1213; --panel-2:#0e1718; --line:#213736; --soft:#72918b; --ink:#e0f8e8; --green:#75ffae; --green-dim:#1c714b; --amber:#ffcf70; --red:#ff7474; }
* { box-sizing:border-box; letter-spacing:0; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:linear-gradient(rgba(117,255,174,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(117,255,174,.025) 1px,transparent 1px),var(--bg); background-size:28px 28px; }
button,input,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } [hidden] { display:none!important; }
.app-bar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid var(--line); background:rgba(6,10,12,.91); } .brand { color:var(--green); text-decoration:none; font-size:13px; font-weight:800; } .app-bar p { margin:0; color:var(--soft); font-size:11px; }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; background:var(--green); box-shadow:0 0 12px var(--green); }
.app-shell { width:min(1140px,calc(100% - 40px)); margin:52px auto 28px; } .masthead { max-width:680px; margin-bottom:38px; } .kicker,.step-label,.screen-label { margin:0 0 10px; color:var(--green); font-size:11px; font-weight:800; } .masthead h1 { margin:0; font-size:clamp(40px,7vw,76px); line-height:.92; } .masthead h1 span { color:var(--green); } .masthead > p:last-child { margin:18px 0 0; color:var(--soft); font-family:system-ui,sans-serif; font-size:15px; line-height:1.55; }
.mode-tabs { display:flex; gap:5px; margin-bottom:14px; border-bottom:1px solid var(--line); } .mode-tab { min-height:46px; padding:0 20px; border:0; border-bottom:2px solid transparent; color:var(--soft); background:transparent; cursor:pointer; } .mode-tab span { color:var(--green-dim); margin-right:8px; } .mode-tab.is-active { color:var(--green); border-color:var(--green); } .mode-tab.is-active span { color:var(--green); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.92fr); min-height:596px; border:1px solid var(--line); background:rgba(11,18,19,.94); } .control-pane,.output-pane { min-width:0; padding:34px; } .control-pane { display:flex; flex-direction:column; gap:23px; } .output-pane { border-left:1px solid var(--line); background:var(--panel-2); } .pane-heading h2 { margin:0; font-size:27px; }
.field-group { display:grid; gap:9px; min-width:0; padding:0; margin:0; border:0; } .field-label-row { display:flex; justify-content:space-between; gap:12px; } .field-group label,.field-group legend { color:#bfe4cb; font-size:13px; font-weight:800; } .field-label-row span { color:var(--soft); font-size:11px; }
.kind-control { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); } .kind-control label { display:grid; } .kind-control input { position:absolute; opacity:0; } .kind-control span { display:grid; place-items:center; min-height:43px; color:var(--soft); cursor:pointer; } .kind-control input:checked + span { color:var(--green); background:rgba(117,255,174,.09); outline:1px solid var(--green-dim); }
textarea { width:100%; min-height:148px; padding:13px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:#070e0f; line-height:1.55; resize:vertical; outline:none; } textarea:focus,input:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.file-control { min-height:75px; display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px dashed #35544e; background:#07100f; cursor:pointer; } .file-control.large { min-height:132px; } .file-control:hover { border-color:var(--green); } .file-control input { position:absolute; width:1px; height:1px; opacity:0; } .file-icon { display:grid; flex:0 0 35px; width:35px; height:35px; place-items:center; border:1px solid var(--green-dim); color:var(--green); font-size:22px; } .file-control span:last-child { min-width:0; display:grid; gap:5px; } .file-control strong { overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .file-control small { color:var(--soft); font-size:11px; }
.primary-button,.secondary-button { min-height:45px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 17px; border-radius:0; font-weight:800; text-decoration:none; cursor:pointer; } .primary-button { border:1px solid var(--green); color:#06100b; background:var(--green); } .primary-button:hover { background:#b9ffd2; } .secondary-button { border:1px solid #42655d; color:#bfe4cb; background:transparent; } .secondary-button:hover { border-color:var(--green); color:var(--green); } button:disabled { cursor:wait; opacity:.58; }
.operation-status { min-height:18px; margin:-9px 0 0; color:var(--green); font-size:12px; line-height:1.5; } .operation-status.is-error { color:var(--red); } .transfer-note { margin:0; padding-top:17px; border-top:1px solid var(--line); color:var(--soft); font-family:system-ui,sans-serif; font-size:12px; line-height:1.55; }
.screen-label { padding-bottom:12px; border-bottom:1px solid var(--line); } .preview-stage { position:relative; display:grid; min-height:358px; place-items:center; margin-top:17px; overflow:hidden; border:1px solid #1c3430; background:#050a0b; } .preview-stage.empty { background:repeating-linear-gradient(0deg,#060d0e 0,#060d0e 2px,#07100f 2px,#07100f 4px); } .preview-stage p { color:#44665c; font-size:12px; } .preview-stage img { display:block; width:100%; height:100%; max-height:480px; object-fit:contain; } .output-details,.decoded-result { display:grid; gap:14px; margin-top:18px; } .result-line { display:flex; justify-content:space-between; gap:10px; padding-bottom:9px; border-bottom:1px solid var(--line); color:var(--soft); font-size:11px; } .result-line strong { color:var(--ink); font-size:11px; text-align:right; } .output-actions { display:flex; gap:8px; } .output-actions > * { flex:1; }
.verified-line { color:var(--green); font-size:12px; } pre { max-height:180px; margin:0; padding:14px; overflow:auto; border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; color:#caffda; background:#07100f; font:13px/1.6 ui-monospace,monospace; } #decoded-image { display:block; width:100%; max-height:250px; object-fit:contain; border:1px solid var(--line); background:#07100f; }
footer { display:flex; justify-content:space-between; width:min(1140px,calc(100% - 40px)); margin:0 auto 32px; color:#52766b; font-size:10px; } footer span { color:#325147; }
@media (max-width:800px) { .app-bar{padding:0 20px}.app-shell{width:min(100% - 24px,620px);margin-top:30px}.masthead{margin-bottom:27px}.workspace{grid-template-columns:1fr;min-height:0}.output-pane{border-top:1px solid var(--line);border-left:0}.control-pane,.output-pane{padding:23px}.preview-stage{min-height:min(85vw,440px)}footer{width:calc(100% - 24px);gap:10px;line-height:1.5}.app-bar p{font-size:9px}.output-actions{flex-direction:column;} }