:root { --ink:#17213b; --muted:#687089; --blue:#3157d5; --pale:#f3f6fc; --line:#dce2ef; --white:#fff; --danger:#a82e3b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--pale); font:16px/1.5 Inter,Segoe UI,Arial,sans-serif; }
.topbar { min-height:70px; padding:0 max(24px,calc((100% - 1120px)/2)); display:flex; justify-content:space-between; align-items:center; background:var(--white); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-weight:750; text-decoration:none; }
nav { display:flex; gap:8px; align-items:center; } nav a { color:var(--muted); padding:8px 12px; text-decoration:none; border-radius:8px; } nav a:hover { background:var(--pale); color:var(--blue); }
.shell { width:min(1120px,calc(100% - 32px)); margin:52px auto; }
.hero { max-width:760px; margin-bottom:28px; } .hero h1 { margin:4px 0 8px; font-size:clamp(2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.04em; } .hero p:last-child { color:var(--muted); }
.eyebrow { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.14em; }
.card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,4vw,38px); box-shadow:0 16px 50px rgba(27,42,83,.07); } .narrow { max-width:700px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); } .full { grid-column:1/-1; }
label { display:block; margin:0 0 7px; font-weight:700; }
input,select,textarea { width:100%; color:var(--ink); background:#fff; border:1px solid #cbd3e3; border-radius:9px; padding:11px 12px; font:inherit; } input:focus,select:focus,textarea:focus { outline:3px solid #dbe4ff; border-color:var(--blue); } textarea { resize:vertical; }
button { margin-top:26px; border:0; border-radius:9px; padding:12px 18px; color:#fff; background:var(--blue); font:700 1rem inherit; cursor:pointer; } button:disabled { opacity:.5; cursor:not-allowed; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.field-label-row label { margin:0; overflow-wrap:anywhere; }
.copy-field-button { flex:none; margin:0; padding:4px 9px; color:var(--blue); background:#e8edff; font-size:.75rem; line-height:1.25; }
.copy-field-button:hover { background:#dbe4ff; }
.rich-editor { overflow:hidden; border:1px solid #cbd3e3; border-radius:9px; background:#fff; }
.rich-editor:focus-within { outline:3px solid #dbe4ff; border-color:var(--blue); }
.rich-editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; background:#f3f6fc; border-bottom:1px solid var(--line); }
.rich-editor-toolbar button,.rich-editor-toolbar select,.rich-editor-toolbar input { width:auto; min-height:32px; margin:0; padding:5px 8px; border:1px solid #cbd3e3; border-radius:6px; }
.rich-editor-button { min-width:34px; color:var(--ink); background:#fff; font-size:.85rem; }
.rich-editor-button:hover { color:var(--blue); background:#e8edff; }
.rich-editor-select { color:var(--ink); background:#fff; font-size:.85rem; }
.rich-editor-font { width:150px !important; color:var(--ink); background:#fff; font-size:.85rem; }
.rich-editor-color { width:38px !important; padding:3px !important; cursor:pointer; }
.rich-text-input { min-height:190px; max-height:520px; overflow:auto; padding:14px; color:var(--ink); background:#fff; outline:0; }
.rich-text-input:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.rich-text-input p { margin:0 0 10px; }
.rich-text-input p:last-child { margin-bottom:0; }
.status.warning { position:fixed; z-index:20; top:82px; right:20px; max-width:min(520px,calc(100% - 40px)); margin:0; color:#73510d; background:#fff5d9; border:1px solid #efd58c; box-shadow:0 10px 30px rgba(27,42,83,.18); }
.nav-button,.secondary-button,.danger-button { margin-top:0; }
.nav-button { color:var(--muted); background:transparent; padding:8px 12px; }
.secondary-button { color:var(--blue); background:#e8edff; }
.danger-button { color:#fff; background:var(--danger); padding:8px 12px; }
.form-actions { display:flex; align-items:center; gap:10px; } .form-actions .secondary-button { margin-top:26px; }
.action-button { margin-right:8px; }
.template-library-card { margin-top:28px; } .template-library-card h2 { margin:2px 0 0; }
.bank-row { background:#f7f9fd; font-weight:700; } .document-row td:first-child { padding-left:34px; }
.auth-card { margin:8vh auto 0; } .auth-card h1 { margin-top:0; font-size:2.3rem; }
.notice-card { max-width:800px; } .notice-card li { margin:8px 0; } .notice-actions { flex-wrap:wrap; } .notice-actions button { margin-top:10px; }
.captcha-row { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:20px; }
.captcha-question { margin:0; font-size:1.15rem; font-weight:800; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }
.narrow-input { max-width:520px; }
.field-list-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; } .field-list-header h2 { margin:0; }
.template-field-row { display:grid; grid-template-columns:1.1fr .8fr 1.4fr auto; gap:14px; align-items:end; padding:16px 0; border-bottom:1px solid var(--line); }
.template-field-row .remove-field { margin-bottom:1px; }
#field-template-form > h2 { margin-top:0; }
#template-name[readonly] { color:var(--muted); background:#f3f6fc; cursor:not-allowed; }
.template-name-cell { font-weight:700; overflow-wrap:anywhere; }
.template-actions { width:190px; white-space:nowrap; }
.template-actions .action-button { margin-top:0; }
.remove-field { align-self:end; padding:8px 12px; }
.backup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.backup-card h2 { margin-top:0; } .backup-card .form-actions { flex-wrap:wrap; }
.button-link { display:inline-block; border-radius:9px; padding:12px 18px; font-weight:700; text-decoration:none; }
.backup-notice { margin-top:22px; padding:16px 18px; color:#505a73; background:#e8edff; border-radius:10px; }
hr { margin:30px 0; border:0; border-top:1px solid var(--line); } .hint,.empty { color:var(--muted); } code { background:#edf1fa; padding:2px 5px; border-radius:4px; }
.status { margin-top:20px; padding:12px 14px; color:#24643e; background:#eaf8f0; border-radius:9px; } .status.error { color:var(--danger); background:#fff0f1; }
.log-toolbar { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:20px; } .log-toolbar > div { width:min(320px,100%); } .log-action { margin:2px 4px 2px 0; padding:7px 10px; white-space:nowrap; } .generate-log-button { color:#fff; background:var(--blue); } .sort-button { margin:0; padding:0; color:var(--muted); background:transparent; font:inherit; text-transform:inherit; letter-spacing:inherit; } .sort-button:hover { color:var(--blue); } .error-card h1 { margin-top:0; }
#new-bank-wrap { margin-top:18px; } #document { margin-top:2px; } form > label:not(:first-child) { margin-top:20px; }
@media(max-width:760px) { .grid,.grid.three,.template-field-row,.backup-grid { grid-template-columns:1fr; } .topbar { padding:12px 16px; align-items:flex-start; gap:10px; } nav { flex-wrap:wrap; justify-content:flex-end; } .brand { font-size:.92rem; } .shell { margin:34px auto; } }