*{box-sizing:border-box}body{margin:0;background:#071019;color:#f5f8fb;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}.app{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.side{background:#09131d;border-inline-end:1px solid #20384c;padding:18px;position:sticky;top:0;height:100vh}.brand{font-weight:900;font-size:19px;margin-bottom:18px}.brand small{display:block;color:#819bad;font-size:11px}.nav button,.btn{width:100%;border:1px solid #244158;background:#102231;color:#f5f8fb;border-radius:12px;padding:11px 13px;margin:4px 0;text-align:start;cursor:pointer}.nav button.active,.primary{background:linear-gradient(135deg,#6ee7c7,#78b9ff)!important;color:#06141c!important;border-color:transparent!important;font-weight:850}.main{padding:18px;max-width:1180px;width:100%;margin:auto}.top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.row{display:flex;gap:8px;flex-wrap:wrap}.row .btn,.top .btn{width:auto}.view{display:none}.view.active{display:block}.card,.hero{background:linear-gradient(180deg,#0e1a27,#0b1722);border:1px solid #1b3347;border-radius:20px;padding:20px;margin-bottom:14px}.hero{padding:30px}.hero h1{font-size:40px;line-height:1.08;margin:8px 0}.muted{color:#8fa6b7}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{margin:11px 0}.label{display:block;font-size:12px;font-weight:800;color:#9db1c0;margin-bottom:6px}input,textarea,select{width:100%;padding:12px 13px;border-radius:12px;border:1px solid #274157;background:#08131d;color:#fff;font:inherit;outline:none}textarea{min-height:120px;resize:vertical}.out{white-space:pre-wrap;min-height:170px;background:#08131d;border:1px solid #173047;border-radius:14px;padding:15px;line-height:1.72;margin-top:10px}.status{font-size:12px;color:#8fa6b7;margin-top:8px}.preview{min-height:320px;border:1px dashed #2b4b62;border-radius:16px;background:#07131d;display:grid;place-items:center;overflow:hidden}.preview img{max-width:100%;max-height:620px;object-fit:contain}.menu{display:none}.pill{border:1px solid #274157;border-radius:999px;padding:6px 10px;color:#9fb3c0;font-size:12px}
input,textarea,.out{direction:auto;unicode-bidi:plaintext;text-align:start}.brand{direction:ltr;text-align:start}html[dir=rtl] .hero,html[dir=rtl] .card{text-align:right}html[dir=rtl] .row{flex-direction:row-reverse}html[dir=rtl] .top .row:first-child{flex-direction:row}html[dir=rtl] select{text-align:right}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{position:fixed;z-index:30;width:240px;transform:translateX(-110%);transition:.2s}.side.open{transform:none}.menu{display:inline-block}.main{padding:13px}.grid{grid-template-columns:1fr}.hero h1{font-size:31px}html[dir=rtl] .side{transform:translateX(110%)}html[dir=rtl] .side.open{transform:none}}