:root{--navy: #0b132b;--cyan: #00d1ff;--lynx: #008cba;--light: #e2e8f0;--white: #ffffff;--accent: var(--lynx);--accent-soft: var(--cyan);--bg: #f4f6f9;--panel: #ffffff;--border: #e2e5ea;--text: #1f2733;--muted: #6b7480;--danger: #c0392b;--radius: 8px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--navy);color:var(--light);border-bottom:3px solid var(--cyan);flex-wrap:wrap}.brand-logo{width:34px;height:34px;object-fit:contain}.brand{display:flex;flex-direction:column;line-height:1.1}.topbar h1{font-size:17px;margin:0;color:var(--white);white-space:nowrap;letter-spacing:.3px}.topbar .badge{font-size:11px;color:#9fb3c8}.topbar .spacer{flex:1}.topbar .actions{display:flex;gap:8px;flex-wrap:wrap}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.editor-pane{overflow-y:auto;padding:16px;border-right:1px solid var(--border)}.preview-pane{overflow:hidden;background:#525659;display:flex;flex-direction:column}.preview-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#3a3d40;color:#fff}.preview-toolbar .spacer{flex:1}.preview-frame{flex:1;min-height:0}.preview-frame iframe{border:0;width:100%;height:100%}.appfoot{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px;background:var(--navy);color:#9fb3c8;font-size:12px}.appfoot img{width:18px;height:18px;object-fit:contain}.appfoot strong{color:var(--cyan);font-weight:600}@media (max-width: 900px){.layout{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.editor-pane{border-right:none;border-bottom:1px solid var(--border)}}.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:6px 12px;border-radius:var(--radius);font-size:13px}.btn:hover{border-color:var(--accent-soft)}.btn-primary{background:var(--lynx);color:#fff;border-color:var(--lynx)}.btn-primary:hover{background:#0b132b;border-color:#0b132b}.btn-ghost{background:transparent}.btn-ai{background:#e9fbff;color:#0079a3;border-color:#b8ecf9;font-size:12px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px}.btn-ai:hover{background:#d6f5fd}.btn-ai:disabled{opacity:.6;cursor:progress}.btn-danger{color:var(--danger);border-color:#f0c8c2;background:#fdf3f1}.btn-sm{font-size:12px;padding:3px 8px}.topbar .btn{background:#ffffff14;color:var(--light);border-color:#ffffff2e}.topbar .btn:hover{background:#ffffff29;border-color:var(--cyan)}.topbar .btn-primary{background:var(--cyan);color:#06222e;border-color:var(--cyan);font-weight:600}.topbar .btn-primary:hover{background:#38dcff}.section-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.section-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;color:var(--navy)}.section-head:hover{background:#fafbfc}.section-head .chev{color:var(--muted);transition:transform .15s}.section-head.open .chev{transform:rotate(90deg)}.section-body{padding:4px 12px 14px;border-top:1px solid var(--border)}.field{margin-bottom:10px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}.field input,.field textarea,.field select{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff}.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-soft)}.field textarea{resize:vertical;min-height:64px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item-card{border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:10px;background:#fcfcfd}.item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.item-head .grow{flex:1}.list-line{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px}.list-line input,.list-line textarea{flex:1}.field-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.hint{font-size:12px;color:var(--muted);margin:2px 0 0}.error-text{color:var(--danger);font-size:12px;margin-top:4px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b132b8c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{background:var(--panel);border-radius:10px;width:100%;max-width:480px;padding:18px 20px;box-shadow:0 12px 40px #0000004d}.modal h2{margin:0 0 12px;font-size:16px;color:var(--navy)}.modal .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}.modal-wide{max-width:760px}.badge{font-size:11px;color:var(--muted)}.status-list{list-style:none;padding:0;margin:6px 0 0;font-size:14px}.status-list li{padding:5px 0;border-bottom:1px solid var(--border)}.status-list b{color:var(--navy)}.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}@media (max-width: 560px){.plans{grid-template-columns:1fr}}.plan{border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;background:#fcfdff}.plan-hl{border-color:var(--cyan);box-shadow:0 0 0 2px #00d1ff2e}.plan-name{font-weight:600;color:var(--navy)}.plan-price{font-size:22px;font-weight:700;color:var(--lynx)}.plan-desc{font-size:12.5px;color:var(--muted);flex:1}.plan .btn{margin-top:6px}