/* Document-specific visuals on the shared Studio welcome layout. */
:root { --ink:#20334b; --muted:#627286; --green:#35618f; --line:#dfe5ec; --paper:#fbfcfe; }
.status-dot { box-shadow:0 0 0 4px #e6edf7; }
.feature-icon { background:#eaf0f8; }
.button:hover { background:#edf2f9; }
.template-card:hover { border-color:#94acc9; }
.template-card.selected { background:#f0f5fc; }
.template-preview { background:#eef3fa; border-color:#dce5f0; }
.template-preview textarea { border-color:#cad6e5; }
.tools-panel { background:#f0f4f9; }
.limits-grid article { border-color:#b5c8df; }
.document-preview { min-width:0; border:1px solid var(--line); border-radius:16px; background:white; overflow:hidden; box-shadow:0 24px 65px -35px #9badc6; }
.document-toolbar { padding:18px; font-size:12px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.document-toolbar i { color:var(--green); margin-right:7px; }
.sample-label { background:#eff3f8; }
.paper-surround { background:#eaf0f7; padding:24px 34px; border-block:1px solid var(--line); }
.document-paper { background:white; padding:30px 32px 23px; box-shadow:0 6px 20px #20334b0c; }
.paper-topline { display:flex; justify-content:space-between; color:var(--green); font-size:7px; font-weight:600; letter-spacing:.15em; }
.document-paper h2 { font-size:29px; margin:23px 0 10px; line-height:1.18; letter-spacing:-.04em; }
.paper-subtitle { font-size:9px; color:var(--muted); }
.paper-rule { height:3px; width:38px; background:#799aba; margin:20px 0; }
.document-paper h3 { font-size:10px; margin:18px 0 9px; }
.document-paper p:not(.paper-subtitle) { color:var(--muted); font-size:10px; line-height:1.9; }
.paper-table { margin:12px 0 22px; font-size:9px; }
.paper-table div { display:grid; grid-template-columns:1fr 1.6fr; gap:10px; padding:10px; border-bottom:1px solid var(--line); }
.paper-table div:first-child { background:#f2f5fa; }
.paper-table span { color:var(--muted); }
.paper-note { padding:12px; border:1px solid #dce5ef; background:#f5f8fc; border-radius:5px; color:var(--green); font-size:9px; display:flex; align-items:center; gap:10px; line-height:1.6; }
.document-formats { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px; font-size:10px; }
.document-formats i { margin-right:5px; }.document-formats a { color:var(--muted); text-decoration:none; }
#document-sections { padding:0; margin:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
#document-sections li { font-size:11px; padding:8px 10px; background:white; border:1px solid #d9e2ee; border-radius:6px; }
.document-options { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:4px 0 18px; }
.document-options select { width:100%; min-width:0; padding:11px 8px; border:1px solid #cad6e5; background:white; border-radius:7px; color:var(--ink); font-size:12px; }
.document-options label { margin-bottom:8px; }
.selected-mode-note { font-size:11px; line-height:1.8; color:var(--muted); margin-bottom:20px; }
.mode-panel { margin-top:30px; display:grid; grid-template-columns:.75fr 1.25fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; }
.mode-buttons { padding:24px; background:#eef3fa; display:flex; flex-direction:column; gap:12px; }
.mode-buttons button { display:flex; align-items:center; gap:13px; text-align:left; border:1px solid var(--line); padding:19px 17px; border-radius:8px; background:white; color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; }
.mode-buttons button span { font-size:10px; color:var(--muted); }
.mode-buttons [aria-pressed=true] { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
#mode-preview { padding:30px; min-width:0; }
#mode-preview h3 { font-size:23px; line-height:1.25; font-weight:600; margin:0 0 14px; letter-spacing:-.03em; }
#mode-description { font-size:13px; color:var(--muted); line-height:1.8; }
#mode-steps { display:flex; list-style:none; padding:0; gap:12px; margin:24px 0; }
#mode-steps li { flex:1; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px 7px; border:1px solid #dce5ef; border-radius:8px; font-size:11px; background:#f7f9fc; }
#mode-steps li:not(:last-child)::after { content:'→'; position:absolute; right:-11px; color:var(--green); }
#mode-preview > a { display:inline-block; margin-top:19px; }
.file-chips { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 8px; }
.file-chips span { padding:8px 12px; background:white; border:1px solid var(--line); border-radius:7px; font-size:12px; font-weight:500; }
@media(max-width:1100px) { .paper-surround { padding:22px; }.document-paper { padding:25px; }.document-paper h2 { font-size:26px; } }
@media(max-width:760px) { .mode-panel { grid-template-columns:1fr; }.mode-buttons { padding:20px; }.mode-buttons button { padding:15px; }#mode-preview { padding:24px; }.paper-surround { padding:20px; }.document-paper { padding:23px; }.document-paper h2 { font-size:27px; } }
@media(max-width:360px) { .paper-surround { padding:14px; }.document-paper { padding:17px; }.document-paper h2 { font-size:23px; }.document-toolbar { font-size:10px; padding:14px; }.document-options { grid-template-columns:1fr; }#mode-steps { flex-direction:column; gap:15px; }#mode-steps li:not(:last-child)::after { content:'↓'; right:auto; bottom:-15px; } }