:root{--font:'Manrope','Segoe UI',sans-serif;--ink:#0f172a;--muted:#64748b;--line:#dbe4ef;--line-strong:#c7d3e2;--surface:#ffffff;--surface-soft:#f8fafc;--accent:#0f766e;--accent-ink:#0b5f58}*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,#f8fbfa,#edf3f8)}.doc-page{max-width:1120px;margin:0 auto;padding:20px}.doc-head h1{margin:0;font-size:clamp(1.35rem, 2.4vw, 2rem);letter-spacing:-.02em}.doc-head p{margin:6px 0 14px;color:var(--muted)}.doc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.doc-meta input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;transition:border-color .2s,box-shadow .2s}.doc-grid textarea:focus-visible,.doc-meta input:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.14)}.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.doc-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 22px rgba(15,23,42,.05);padding:10px}.doc-card h2{margin:0 0 8px;font-size:.94rem;color:#334155}.doc-card textarea{width:100%;min-height:130px;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical;line-height:1.48}.doc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.doc-btn{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:9px 12px;font:inherit;font-weight:700;cursor:pointer;transition:transform .12s,border-color .2s,background-color .2s,box-shadow .2s}.doc-btn:hover{border-color:var(--line-strong);background:var(--surface-soft)}.doc-btn:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.14)}.doc-btn:active{transform:translateY(1px)}.doc-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.doc-btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}.doc-preview{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 12px 24px rgba(15,23,42,.05);padding:12px;white-space:pre-wrap;line-height:1.58}@media (max-width:960px){.doc-page{padding:16px}.doc-grid,.doc-meta{grid-template-columns:1fr}.doc-btn{min-height:44px;padding:10px 14px}}