@font-face { font-family: "Protocol PDF"; src: url("../assets/fonts/LiberationSans-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Protocol PDF"; src: url("../assets/fonts/LiberationSans-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --graphite-950: #15181c;
  --graphite-900: #20242a;
  --graphite-850: #292e35;
  --graphite-800: #323840;
  --graphite-700: #48515c;
  --graphite-600: #626d79;
  --graphite-500: #7c8793;
  --graphite-300: #c8ced5;
  --graphite-200: #dce1e6;
  --graphite-150: #e8ebee;
  --graphite-100: #f1f3f5;
  --graphite-50: #f7f8f9;
  --yellow-600: #8a6500;
  --yellow-500: #f2bd18;
  --yellow-400: #ffd33d;
  --yellow-300: #ffe171;
  --yellow-100: #fff5cc;
  --yellow-50: #fffbeb;
  --ink: #1b1f24;
  --ink-soft: #4d5661;
  --muted: #707a86;
  --line: #dde2e7;
  --line-strong: #c8cfd6;
  --surface: #ffffff;
  --surface-soft: #f7f8f9;
  --canvas: #e7eaed;
  --danger: #b42318;
  --danger-dark: #8f1c14;
  --danger-soft: #fff1f0;
  --success: #18794e;
  --success-soft: #eaf8f1;
  --info: #2b65b1;
  --info-soft: #edf5ff;
  --sidebar-width: 276px;
  --header-height: 72px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(15, 20, 27, .06), 0 1px 5px rgba(15, 20, 27, .04);
  --shadow-md: 0 10px 30px rgba(15, 20, 27, .10), 0 2px 8px rgba(15, 20, 27, .05);
  --shadow-lg: 0 24px 70px rgba(15, 20, 27, .22), 0 5px 18px rgba(15, 20, 27, .08);
  --focus-ring: 0 0 0 3px rgba(242, 189, 24, .34);
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface-soft); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--surface-soft); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.workspace-open { overflow: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input[type="checkbox"], input[type="file"] { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.noscript { position: fixed; inset: 0 0 auto; z-index: 9999; padding: 14px 20px; color: #fff; background: var(--danger); text-align: center; font-weight: 700; }

.session-loader { display: grid; min-height: 100vh; align-content: center; justify-content: center; grid-template-columns: auto auto auto; align-items: center; gap: 16px; padding: 24px; background: var(--graphite-900); color: #fff; }
.loader-brand, .brand-logo { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; color: var(--graphite-950); background: var(--yellow-400); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.loader-brand { width: 54px; height: 54px; border-radius: 15px; }
.loader-brand svg, .brand-logo svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.loader-brand svg { width: 34px; height: 34px; }
.loader-copy { display: grid; gap: 2px; }
.loader-copy strong { font-size: 17px; }
.loader-copy span { color: #aeb6bf; font-size: 13px; }
.spinner { width: 21px; height: 21px; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--yellow-400); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Authentication */
.auth-view { display: grid; min-height: 100vh; grid-template-columns: minmax(390px, 1.03fr) minmax(420px, .97fr); background: var(--surface); }
.auth-showcase { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4.5vw, 72px); color: #fff; background: var(--graphite-900); }
.auth-showcase::before { position: absolute; top: -15%; right: -20%; width: min(54vw, 720px); aspect-ratio: 1; content: ""; border: 1px solid rgba(255,211,61,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,211,61,.025), 0 0 0 140px rgba(255,211,61,.02); pointer-events: none; }
.auth-showcase::after { position: absolute; right: 0; bottom: 10%; width: 43%; height: 4px; content: ""; background: var(--yellow-400); opacity: .85; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.brand-logo-large { width: 51px; height: 51px; border-radius: 14px; }
.auth-brand > span:last-child { display: grid; gap: 0; }
.auth-brand strong { font-size: 20px; line-height: 1.1; letter-spacing: .08em; }
.auth-brand small { color: #bdc4cc; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.auth-promise { position: relative; z-index: 1; max-width: 660px; margin: 70px 0; }
.overline { margin: 0 0 8px; color: var(--yellow-600); font-size: 11px; font-weight: 800; letter-spacing: .115em; text-transform: uppercase; }
.overline-on-dark { color: var(--yellow-400); }
.auth-promise h1 { max-width: 620px; margin-bottom: 23px; font-size: clamp(40px, 5vw, 70px); line-height: 1.03; letter-spacing: -.05em; }
.auth-promise > p:not(.overline) { max-width: 600px; color: #c9cfd6; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; }
.auth-features { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.auth-features li { display: flex; align-items: center; gap: 11px; color: #e4e7ea; }
.auth-features li span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; color: var(--graphite-950); background: var(--yellow-400); border-radius: 7px; font-weight: 900; }
.auth-security { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 0; color: #aeb6bf; font-size: 12px; }
.auth-security span { color: #46c487; font-size: 10px; }
.auth-panel { display: grid; min-height: 100vh; place-items: center; padding: clamp(28px, 6vw, 90px); overflow-y: auto; background: linear-gradient(135deg, #fff 0%, #fff 68%, #faf7ea 100%); }
.auth-card { width: min(100%, 440px); }
.auth-card h2 { margin-bottom: 8px; font-size: clamp(30px, 3vw, 39px); line-height: 1.1; letter-spacing: -.035em; }
.supporting-copy { margin-bottom: 27px; color: var(--muted); line-height: 1.65; }
.mobile-auth-brand { display: none; align-items: center; gap: 11px; margin-bottom: 42px; }
.stack-form { display: grid; gap: 18px; }
.form-field { display: grid; gap: 7px; min-width: 0; }
.form-field label { color: #343b44; font-size: 13px; font-weight: 750; }
.form-field label span { color: var(--muted); font-weight: 500; }
.form-field small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.form-field textarea { min-height: 80px; resize: vertical; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--graphite-500); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--yellow-600); box-shadow: var(--focus-ring); }
.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,24,.1); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-button, .back-link { width: fit-content; padding: 0; color: #5e4800; background: transparent; border: 0; font-size: 12px; font-weight: 750; text-decoration: underline; text-decoration-color: #e2c35c; text-underline-offset: 3px; }
.text-button:hover, .back-link:hover { color: var(--graphite-950); text-decoration-color: currentColor; }
.text-button:focus-visible, .back-link:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 4px; border-radius: 2px; }
.text-button-centered { justify-self: center; }
.back-link { margin-bottom: 36px; text-decoration: none; }
.auth-switch { display: grid; gap: 11px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); text-align: center; }
.auth-switch > span { color: var(--muted); font-size: 12px; }
.activation-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 24px; color: var(--graphite-950); background: var(--yellow-400); border-radius: 15px; font-size: 25px; font-weight: 900; box-shadow: 0 8px 18px rgba(215,159,0,.18); }
.code-field input { height: 63px; font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800; letter-spacing: .34em; text-align: center; }
.form-message { margin: 0; padding: 11px 13px; color: var(--danger-dark); background: var(--danger-soft); border: 1px solid #ffd1cd; border-radius: var(--radius-sm); font-size: 12px; }
.form-message.is-success { color: var(--success); background: var(--success-soft); border-color: #bfe8d3; }

/* Buttons and controls */
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform .1s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .icon-button:focus-visible, .tool-button:focus-visible, .nav-item:focus-visible, .filter-toggle:focus-visible, .account-button:focus-visible, .favorite-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.button:disabled, .button.is-busy, .icon-button:disabled, .tool-button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.button-primary { color: var(--graphite-950); background: var(--yellow-400); border-color: var(--yellow-500); box-shadow: 0 3px 9px rgba(215,159,0,.14); }
.button-primary:hover { background: #ffca1f; border-color: #e6ac00; }
.button-secondary { color: var(--ink); background: #fff; border-color: var(--line-strong); }
.button-secondary:hover { background: var(--graphite-50); border-color: var(--graphite-500); }
.button-ghost { color: var(--ink-soft); background: transparent; border-color: transparent; }
.button-ghost:hover { color: var(--ink); background: var(--graphite-100); }
.button-secondary-on-dark { color: #fff; background: var(--graphite-800); border-color: #4c545e; }
.button-secondary-on-dark:hover { background: #3c434c; border-color: #68727d; }
.button-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: var(--danger-dark); }
.button-danger-ghost { color: var(--danger); background: #fff; border-color: #f2b8b4; }
.button-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }
.button-block { width: 100%; }
.button-compact { min-height: 39px; padding: 8px 13px; font-size: 12px; }
.button-loader { display: none; width: 16px; height: 16px; border: 2px solid rgba(26,29,33,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .75s linear infinite; }
.button.is-loading .button-loader, .button.is-busy .button-loader { display: block; }
.icon-button { display: inline-grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; padding: 0; color: var(--graphite-700); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 22px; line-height: 1; }
.icon-button:hover { color: var(--ink); background: var(--graphite-100); }
.icon-button-dark { color: #d9dde1; border-color: #4b535d; }
.icon-button-dark:hover { color: #fff; background: var(--graphite-800); }
.tool-button { display: inline-grid; min-width: 38px; height: 38px; place-items: center; padding: 0 10px; color: #fff; background: var(--graphite-800); border: 1px solid #4b535d; border-radius: 7px; font-size: 18px; font-weight: 800; }
.tool-button:hover { background: #3b424b; border-color: #68727d; }
.tool-button-wide { min-width: 72px; font-size: 11px; }

/* Application shell */
.app-shell { min-height: 100vh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar-width); flex-direction: column; color: #e9ecef; background: var(--graphite-900); border-right: 1px solid #333941; }
.sidebar-brand { display: flex; min-height: var(--header-height); align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1px solid #343a42; }
.sidebar-brand-copy { display: grid; flex: 1; line-height: 1.1; }
.sidebar-brand-copy strong { font-size: 17px; letter-spacing: .075em; }
.sidebar-brand-copy small { margin-top: 4px; color: #9ea7b1; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-close { display: none; color: #d7dce1; }
.sidebar-nav { flex: 1; padding: 22px 13px; overflow-y: auto; overscroll-behavior: contain; }
.nav-label { margin: 17px 11px 8px; color: #7f8994; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.nav-item { position: relative; display: flex; width: 100%; min-height: 45px; align-items: center; gap: 11px; margin: 3px 0; padding: 9px 11px; color: #c8ced4; background: transparent; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 650; text-align: left; }
.nav-item:hover { color: #fff; background: #2b3037; }
.nav-item.is-active { color: var(--graphite-950); background: var(--yellow-400); border-color: var(--yellow-500); font-weight: 800; }
.nav-item.is-active::before { position: absolute; left: -13px; width: 4px; height: 26px; content: ""; background: var(--yellow-400); border-radius: 0 4px 4px 0; }
.nav-icon { display: grid; width: 24px; flex: 0 0 auto; place-items: center; font-size: 18px; line-height: 1; }
.nav-count { min-width: 22px; margin-left: auto; padding: 2px 7px; color: var(--graphite-950); background: var(--yellow-400); border-radius: 999px; font-size: 10px; font-weight: 900; text-align: center; }
.nav-item.is-active .nav-count { color: #fff; background: var(--graphite-900); }
.nav-sublist { display: grid; gap: 2px; margin: 2px 0 7px 35px; padding-left: 10px; border-left: 1px solid #3b424b; }
.nav-sublist:empty { display: none; }
.nav-sublist button { min-height: 34px; padding: 6px 8px; overflow: hidden; color: #8f99a4; background: transparent; border: 0; border-radius: 6px; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.nav-sublist button:hover { color: #fff; background: #2b3037; }
.admin-navigation { margin-top: 20px; padding-top: 2px; border-top: 1px solid #333941; }
.sidebar-footer { position: relative; padding: 12px; border-top: 1px solid #343a42; }
.account-button { display: flex; width: 100%; min-height: 55px; align-items: center; gap: 10px; padding: 7px; color: #fff; background: transparent; border: 1px solid transparent; border-radius: 9px; text-align: left; }
.account-button:hover { background: #2b3037; }
.account-avatar { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; color: var(--graphite-950); background: var(--yellow-400); border-radius: 9px; font-size: 11px; font-weight: 900; }
.account-copy { display: grid; min-width: 0; flex: 1; }
.account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { margin-top: 2px; color: #99a3ad; font-size: 10px; }
.account-menu { position: absolute; right: 13px; bottom: 77px; left: 13px; z-index: 5; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
.account-menu button { display: block; width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ink); background: transparent; border: 0; border-radius: 7px; font-size: 12px; font-weight: 650; text-align: left; }
.account-menu button:hover { background: var(--graphite-100); }
.account-menu #logout-button { color: var(--danger); }
.app-surface { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-header { position: sticky; top: 0; z-index: 30; display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: 20px; padding: 11px clamp(20px, 3vw, 42px); background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.menu-toggle { display: none; }
.menu-toggle span { display: block; width: 18px; height: 2px; margin: 2px 0; background: currentColor; border-radius: 4px; }
.header-title { display: grid; }
.header-title span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.header-title strong { font-size: 17px; letter-spacing: -.015em; }
.header-actions { display: flex; align-items: center; gap: 13px; }
.sync-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 650; }
.sync-state i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(24,121,78,.1); }
.sync-state.is-saving i, .sync-state.sync-saving i, .sync-state.sync-syncing i { background: var(--yellow-600); animation: pulse 1s ease infinite; }
.sync-state.is-error, .sync-state.sync-error { color: var(--danger); }
.sync-state.is-error i, .sync-state.sync-error i { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }
.app-main { width: min(100%, 1560px); margin: 0 auto; padding: 40px clamp(20px, 4vw, 58px) 70px; }
.content-view { animation: viewIn .17s ease-out; }
@keyframes viewIn { from { opacity: .25; transform: translateY(4px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.page-heading h1 { margin: 0 0 8px; font-size: clamp(30px, 3.2vw, 45px); line-height: 1.05; letter-spacing: -.045em; }
.page-heading p:not(.overline) { max-width: 680px; margin: 0; color: var(--muted); }
.compact-heading { align-items: center; margin-bottom: 26px; }
.compact-heading h1 { font-size: clamp(29px, 2.7vw, 39px); }

/* Dashboard and lists */
.filter-bar, .list-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; gap: 10px; margin-bottom: 28px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.search-control { display: flex; min-width: 0; min-height: 45px; align-items: center; gap: 10px; padding: 0 13px; background: var(--graphite-50); border: 1px solid transparent; border-radius: 8px; }
.search-control:focus-within { background: #fff; border-color: var(--yellow-600); box-shadow: var(--focus-ring); }
.search-control > span:first-child { color: var(--graphite-500); font-size: 20px; }
.search-control input { width: 100%; min-width: 0; height: 42px; padding: 0; background: transparent; border: 0; outline: none; cursor: text; }
.select-control select { width: 100%; min-width: 190px; min-height: 45px; padding: 8px 37px 8px 12px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; font-size: 12px; font-weight: 650; }
.select-control select:focus { border-color: var(--yellow-600); box-shadow: var(--focus-ring); }
.filter-toggle { display: inline-flex; min-height: 45px; align-items: center; gap: 7px; padding: 8px 14px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 750; }
.filter-toggle:hover, .filter-toggle[aria-pressed="true"] { color: var(--ink); background: var(--yellow-100); border-color: var(--yellow-500); }
.filter-toggle span { color: var(--yellow-600); font-size: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.result-count { color: var(--muted); font-size: 11px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.template-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 215px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.template-card:hover { transform: translateY(-2px); border-color: #b6bdc4; box-shadow: var(--shadow-md); }
.template-preview { position: relative; display: grid; min-height: 100%; place-items: center; overflow: hidden; color: #616b76; background: linear-gradient(145deg, #e6e9ec, #f7f8f9); border-right: 1px solid var(--line); }
.template-preview::before { width: 67px; height: 93px; content: ""; background: #fff; border: 1px solid #c5ccd3; border-radius: 3px; box-shadow: 0 8px 18px rgba(21,24,28,.12); }
.template-preview::after { position: absolute; width: 41px; height: 2px; content: ""; background: #d2d7dc; box-shadow: 0 9px 0 #d2d7dc, 0 18px 0 #d2d7dc, 0 27px 0 #d2d7dc; }
.template-preview > span { position: absolute; bottom: 25px; z-index: 1; padding: 3px 5px; color: #fff; background: var(--danger); border-radius: 3px; font-size: 8px; font-weight: 900; }
.template-preview img, .template-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.template-card-body { display: flex; min-width: 0; flex-direction: column; padding: 21px 18px 17px; }
.template-category, .record-label { color: var(--yellow-600); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.template-card h3 { margin: 6px 0 8px; overflow: hidden; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; text-overflow: ellipsis; }
.template-card p { display: -webkit-box; min-height: 34px; margin: 0 0 15px; overflow: hidden; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-card .button { margin-top: auto; }
.favorite-button { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; width: 44px; height: 44px; min-width: 44px; min-height: 44px; place-items: center; padding: 0; color: #6e7781; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); font-size: 19px; }
.favorite-button:hover, .favorite-button[aria-pressed="true"] { color: #8a6500; background: var(--yellow-100); border-color: var(--yellow-500); }
.cards-loading { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.cards-loading > span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; text-align: center; }
.template-card-skeleton { min-height: 215px; background: linear-gradient(100deg, #ebeef0 20%, #f6f7f8 38%, #ebeef0 56%); background-size: 300% 100%; border: 1px solid #e3e6e9; border-radius: var(--radius-lg); animation: shimmer 1.25s infinite; }
@keyframes shimmer { to { background-position-x: -150%; } }
.empty-state { display: grid; min-height: 330px; place-content: center; justify-items: center; padding: 40px 20px; color: var(--muted); background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; }
.empty-state-icon { display: grid; width: 56px; height: 56px; place-items: center; margin-bottom: 16px; color: var(--graphite-700); background: var(--graphite-100); border-radius: 15px; font-size: 26px; }
.empty-state h2 { margin-bottom: 7px; color: var(--ink); font-size: 19px; }
.empty-state p { max-width: 420px; margin-bottom: 18px; font-size: 12px; }
.empty-state-error .empty-state-icon { color: var(--danger); background: var(--danger-soft); }
.history-toolbar { grid-template-columns: minmax(260px, 1fr) auto auto; }
.list-toolbar:not(.history-toolbar):not(.manage-toolbar) { grid-template-columns: minmax(260px, 1fr); }
.record-list, .manage-template-list { display: grid; gap: 9px; }
.record-row, .manage-template-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 86px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.record-row:hover, .manage-template-row:hover { border-color: #bcc3ca; }
.record-icon { display: grid; width: 45px; height: 55px; place-items: end center; padding-bottom: 6px; color: #fff; background: linear-gradient(145deg, #f04c45, #b42318); border-radius: 5px; font-size: 8px; font-weight: 900; box-shadow: 0 5px 12px rgba(180,35,24,.14); }
.record-main { min-width: 0; }
.record-main h3 { margin: 3px 0 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.record-main p { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-badge { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 9px; color: var(--info); background: var(--info-soft); border-radius: 999px; font-size: 9px; font-weight: 800; }
.status-badge.is-draft { color: #805b00; background: var(--yellow-100); }
.status-badge.is-complete { color: var(--success); background: var(--success-soft); }
.status-badge.is-archived { color: var(--muted); background: var(--graphite-100); }
.record-actions { display: flex; align-items: center; gap: 7px; }
.row-loading { min-height: 100px; padding: 35px; color: var(--muted); text-align: center; }
.admin-panel { margin-bottom: 22px; }

/* Dialogs */
.dialog { position: fixed; inset: 0; max-width: none; max-height: none; margin: auto; padding: 0; background: transparent; border: 0; overflow: visible; }
.dialog::backdrop { background: rgba(17,20,24,.68); backdrop-filter: blur(3px); }
.dialog-frame { display: flex; max-height: min(88dvh, 900px); flex-direction: column; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dialog-small { width: min(470px, calc(100vw - 28px)); }
.dialog-medium { width: min(620px, calc(100vw - 28px)); }
.dialog-large { width: min(940px, calc(100vw - 28px)); }
.dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 23px; background: #fff; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.dialog-header .overline { margin-bottom: 4px; }
.dialog-body { flex: 1; padding: 23px; overflow-y: auto; overscroll-behavior: contain; }
.dialog-intro { margin-bottom: 21px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.dialog-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 23px; background: var(--graphite-50); border-top: 1px solid var(--line); }
.file-dropzone { display: grid; min-height: 150px; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 22px; background: var(--graphite-50); border: 1px dashed #aeb6be; border-radius: var(--radius-md); transition: background .15s ease, border-color .15s ease; }
.file-dropzone:hover, .file-dropzone.is-dragover { background: var(--yellow-50); border-color: var(--yellow-600); }
.file-dropzone-icon { display: grid; width: 45px; height: 45px; grid-row: 1 / span 2; place-items: center; color: var(--graphite-950); background: var(--yellow-400); border-radius: 12px; font-size: 21px; font-weight: 900; }
.file-dropzone > span:nth-child(2) { display: grid; }
.file-dropzone strong { font-size: 13px; }
.file-dropzone small { color: var(--muted); font-size: 11px; }
.file-name { grid-column: 2; color: var(--muted); font-size: 10px; }
.upload-progress { display: grid; gap: 7px; }
.progress-track { height: 7px; overflow: hidden; background: #e4e7ea; border-radius: 999px; }
.progress-track > span { display: block; width: 0; height: 100%; background: var(--yellow-500); border-radius: inherit; transition: width .2s ease; }
.upload-progress > span { color: var(--muted); font-size: 10px; }
.manage-toolbar { grid-template-columns: minmax(260px, 1fr) auto; }

/* Opening progress */
.operation-progress-frame { width: min(720px, calc(100vw - 28px)); }
.operation-progress-header { align-items: flex-start; }
.operation-state-badge { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 10px; color: var(--info); background: var(--info-soft); border: 1px solid #cde1fb; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.operation-state-badge[data-state="success"] { color: var(--success); background: var(--success-soft); border-color: #bee7d1; }
.operation-state-badge[data-state="error"] { color: var(--danger); background: var(--danger-soft); border-color: #f3c4bf; }
.operation-progress-body { display: grid; gap: 17px; }
.operation-progress-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 13px; }
.operation-progress-lead strong { display: block; margin: 1px 0 4px; color: var(--ink); font-size: 14px; }
.operation-progress-lead p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.operation-spinner { width: 27px; height: 27px; border: 3px solid var(--graphite-200); border-top-color: var(--yellow-500); border-radius: 50%; animation: spin .75s linear infinite; }
.operation-progress-frame[data-finished="true"] .operation-spinner { animation: none; border-color: #bee7d1; background: var(--success-soft); }
.operation-progress-frame[data-error="true"] .operation-spinner { animation: none; border-color: #f3c4bf; background: var(--danger-soft); }
.operation-progress-track { height: 8px; }
.operation-step-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.operation-step { display: grid; min-height: 42px; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; color: var(--muted); background: var(--graphite-50); border: 1px solid var(--line); border-radius: 10px; }
.operation-step-marker { display: grid; width: 25px; height: 25px; place-items: center; background: var(--graphite-150); border-radius: 50%; font-size: 11px; font-weight: 900; }
.operation-step-copy { display: grid; min-width: 0; gap: 1px; }
.operation-step-copy strong { overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.operation-step-copy span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.operation-step-state { font-size: 9px; font-weight: 800; white-space: nowrap; }
.operation-step[data-status="current"] { color: var(--yellow-600); background: var(--yellow-50); border-color: #ead58a; }
.operation-step[data-status="current"] .operation-step-marker { color: var(--graphite-950); background: var(--yellow-400); }
.operation-step[data-status="success"] { color: var(--success); background: var(--success-soft); border-color: #c8e9d8; }
.operation-step[data-status="success"] .operation-step-marker { color: #fff; background: var(--success); }
.operation-step[data-status="warning"] { color: var(--yellow-600); background: var(--yellow-50); border-color: #ead58a; }
.operation-step[data-status="warning"] .operation-step-marker { color: var(--graphite-950); background: var(--yellow-400); }
.operation-step[data-status="error"] { color: var(--danger); background: var(--danger-soft); border-color: #f0c8c4; }
.operation-step[data-status="error"] .operation-step-marker { color: #fff; background: var(--danger); }
.operation-step[data-status="skipped"] { opacity: .67; }
.operation-console { min-height: 130px; overflow: hidden; color: #dce3ea; background: var(--graphite-900); border: 1px solid #343b43; border-radius: 12px; }
.operation-console > header { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 7px 12px; background: #282d34; border-bottom: 1px solid #3a4149; }
.operation-console > header > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.operation-console h3 { margin: 0; color: #f1f4f6; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.operation-console .button { min-height: 29px; padding: 5px 9px; color: #edf0f3; background: transparent; border-color: #59626d; font-size: 9px; }
.console-light { width: 8px; height: 8px; flex: 0 0 auto; background: #46c487; border-radius: 50%; box-shadow: 0 0 0 3px rgba(70,196,135,.12); }
.operation-progress-frame[data-error="true"] .console-light { background: #ff6f64; box-shadow: 0 0 0 3px rgba(255,111,100,.12); }
.operation-console-log { max-height: 150px; min-height: 88px; overflow: auto; padding: 10px 12px; outline: none; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overscroll-behavior: contain; }
.operation-console-log:focus-visible { box-shadow: inset var(--focus-ring); }
.operation-log-line { display: grid; grid-template-columns: 48px 52px minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.operation-log-time { color: #8e99a5; }
.operation-log-level { color: #7fb4f2; font-weight: 800; }
.operation-log-line[data-level="success"] .operation-log-level { color: #6ed8a5; }
.operation-log-line[data-level="warning"] .operation-log-level { color: #f2c94c; }
.operation-log-line[data-level="error"] .operation-log-level { color: #ff8c84; }
.operation-log-message { min-width: 0; overflow-wrap: anywhere; }
.operation-error { margin: 0; padding: 11px 12px; color: var(--danger-dark); background: var(--danger-soft); border: 1px solid #f0c8c4; border-radius: 9px; font-size: 11px; line-height: 1.55; }
.operation-progress-footer { justify-content: space-between; }
.operation-progress-footer > span { color: var(--muted); font-size: 10px; }

/* Template designer */
.fullscreen-workspace { position: fixed; inset: 0; z-index: 200; background: #fff; }
.designer-view { display: grid; grid-template-rows: auto minmax(0, 1fr); color: #fff; background: var(--graphite-950); }
.workspace-toolbar { display: grid; min-height: 68px; grid-template-columns: minmax(280px, 1fr) auto minmax(360px, 1fr); align-items: center; gap: 18px; padding: 9px 14px; background: var(--graphite-900); border-bottom: 1px solid #3a414a; box-shadow: 0 7px 20px rgba(0,0,0,.17); }
.workspace-toolbar-start, .workspace-toolbar-actions, .workspace-toolbar-center { display: flex; min-width: 0; align-items: center; gap: 8px; }
.workspace-toolbar-center { justify-self: center; }
.workspace-toolbar-actions { justify-self: end; }
.workspace-title { display: grid; min-width: 0; padding-left: 4px; }
.workspace-title span { color: #939da7; font-size: 9px; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; }
.workspace-title strong { max-width: 230px; overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-save-state { color: #919ba5; font-size: 9px; white-space: nowrap; }
.workspace-save-state.is-dirty, .designer-save-state.is-dirty, #designer-save-state.is-dirty { padding: 3px 7px; color: var(--yellow-300); background: rgba(255, 211, 61, .1); border-radius: 999px; font-weight: 800; }
.page-indicator { min-width: 58px; color: #cdd2d8; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.toolbar-separator { width: 1px; height: 27px; margin: 0 4px; background: #49515a; }
.designer-layout { display: grid; min-height: 0; grid-template-columns: 98px minmax(360px, 1fr) 340px; }
.designer-view.inspector-collapsed .designer-layout { grid-template-columns: 98px minmax(360px, 1fr); }
.designer-view.inspector-collapsed .designer-inspector { display: none; }
.thumbnail-rail { min-width: 0; overflow-y: auto; color: #d6dbe0; background: #24292f; border-right: 1px solid #3a4149; }
.rail-label { position: sticky; top: 0; z-index: 2; padding: 12px 8px 8px; color: #8e98a3; background: #24292f; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.thumbnail-list { display: grid; gap: 10px; padding: 5px 9px 18px; }
.thumbnail-button { display: grid; gap: 5px; padding: 5px; color: #9da6b0; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 9px; text-align: center; }
.thumbnail-button:hover { color: #fff; background: #30363d; }
.thumbnail-button.is-active { color: var(--yellow-400); background: #30363d; border-color: var(--yellow-500); }
.thumbnail-canvas { display: block; aspect-ratio: 1 / 1.414; overflow: hidden; background: #fff; border-radius: 2px; box-shadow: 0 3px 9px rgba(0,0,0,.28); }
.thumbnail-canvas canvas { width: 100%; height: 100%; object-fit: cover; }
.thumbnail-button small { font-size: 9px; }
.designer-canvas-host { position: relative; display: grid; min-width: 0; min-height: 0; place-items: start center; overflow: auto; padding: 35px 45px 70px; background-color: #41474e; background-image: linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.018) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.018) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.018) 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; background-size: 12px 12px; outline: none; overscroll-behavior: contain; }
.designer-canvas-host:focus-visible { box-shadow: inset 0 0 0 3px var(--yellow-500); }
.document-stage { position: relative; flex: 0 0 auto; min-width: 420px; min-height: 594px; background: #fff; box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.25); transform-origin: top center; }
.document-stage > canvas { width: 100%; height: 100%; }
.field-overlay { position: absolute; inset: 0; overflow: hidden; }
.designer-field { position: absolute; display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; color: #17202c; background: rgba(255,211,61,.20); border: 1px dashed #c68e00; cursor: move; font-family: "Protocol PDF", Arial, sans-serif; touch-action: none; white-space: normal; }
.designer-field > span { display: block; width: 100%; overflow: hidden; overflow-wrap: anywhere; }
.designer-field:hover { background: rgba(255,211,61,.30); border-style: solid; }
.designer-field.is-selected { z-index: 3; background: rgba(255,211,61,.33); border: 2px solid var(--yellow-600); box-shadow: 0 0 0 3px rgba(255,211,61,.25); }
.designer-field.is-required::after { position: absolute; top: -5px; right: -5px; width: 9px; height: 9px; content: ""; background: var(--danger); border: 2px solid #fff; border-radius: 50%; }
.designer-field-label { position: absolute; bottom: calc(100% + 3px); left: -1px; max-width: 180px; padding: 2px 5px; overflow: hidden; color: var(--graphite-950); background: var(--yellow-400); border-radius: 3px 3px 3px 0; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.designer-field-handle { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: #fff; border: 2px solid var(--yellow-600); border-radius: 2px; cursor: nwse-resize; }
.canvas-loading { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-content: center; justify-items: center; gap: 12px; color: #e1e5e8; background: rgba(50,56,64,.83); font-size: 11px; }
.canvas-help { position: fixed; bottom: 15px; left: calc(var(--sidebar-width) + 50%); z-index: 2; margin: 0; padding: 7px 11px; color: #e3e7ea; background: rgba(25,28,32,.88); border-radius: 7px; font-size: 9px; pointer-events: none; transform: translateX(-50%); }
.designer-inspector { min-width: 0; overflow-y: auto; color: var(--ink); background: #fff; border-left: 1px solid var(--line); overscroll-behavior: contain; }
.inspector-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.inspector-header span { color: var(--yellow-600); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inspector-header h2 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.02em; }
.inspector-empty { display: grid; min-height: 430px; align-content: center; justify-items: center; padding: 35px 24px; color: var(--muted); text-align: center; }
.inspector-empty > span { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 13px; color: #806000; background: var(--yellow-100); border-radius: 14px; font-size: 23px; }
.inspector-empty strong { color: var(--ink); }
.inspector-empty p { max-width: 240px; margin: 7px 0 0; font-size: 11px; line-height: 1.55; }
.inspector-form { display: grid; gap: 17px; padding: 18px 18px 28px; }
.inspector-form .form-field input, .inspector-form .form-field select, .inspector-form .form-field textarea { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.form-grid-two, .form-grid-three { display: grid; gap: 9px; }
.form-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-inputs .form-field label { font-size: 10px; }
.compact-inputs input { text-align: center; }
.position-help { display: block; margin-top: -7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.toggle-list { display: grid; gap: 8px; }
.check-control { display: flex; min-height: 53px; align-items: flex-start; gap: 10px; padding: 10px; background: var(--graphite-50); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.check-control:hover { border-color: #b5bdc5; }
.check-control input { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--yellow-600); }
.check-control span { display: grid; }
.check-control strong { font-size: 11px; }
.check-control small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.conditional-field { padding: 12px; background: var(--yellow-50); border: 1px solid #f4dfa0; border-radius: 10px; }
.inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }

/* Fill workflow */
.fill-view { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--surface-soft); }
.fill-header { display: grid; min-height: 73px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px max(18px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid var(--line); }
.fill-heading { min-width: 0; }
.fill-heading span { display: block; overflow: hidden; color: var(--yellow-600); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fill-heading h1 { margin: 2px 0 0; overflow: hidden; font-size: 18px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.fill-save-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.fill-save-state i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; }
.fill-progress { display: grid; gap: 9px; padding: 13px max(20px, calc((100vw - 790px) / 2)); background: #fff; border-bottom: 1px solid var(--line); }
.fill-progress-copy { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; }
.fill-progress-copy strong { color: var(--ink-soft); }
.fill-progress-copy span { color: var(--muted); }
.fill-main { min-height: 0; overflow-y: auto; padding: 30px 18px 55px; overscroll-behavior: contain; }
.fill-form { width: min(100%, 750px); margin: 0 auto; }
.generated-form-fields { display: grid; gap: 16px; }
.fill-section-heading { margin: 6px 0 1px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.fill-section-heading h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.025em; }
.fill-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.fill-field { display: grid; gap: 7px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.fill-field:focus-within { border-color: var(--yellow-500); box-shadow: var(--focus-ring); }
.fill-field > label { font-size: 13px; font-weight: 800; }
.fill-field > label .required-mark { margin-left: 3px; color: var(--danger); }
.fill-field input:not([type="checkbox"]):not([type="radio"]), .fill-field select, .fill-field textarea { width: 100%; min-height: 52px; padding: 11px 13px; background: var(--graphite-50); border: 1px solid var(--line-strong); border-radius: 8px; outline: none; font-size: 16px; }
.fill-field textarea { min-height: 112px; resize: vertical; }
.fill-field input:focus, .fill-field select:focus, .fill-field textarea:focus { background: #fff; border-color: var(--yellow-600); }
.field-help { color: var(--muted); font-size: 10px; }
.field-error { margin: 0; color: var(--danger); font-size: 10px; font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice-button { min-height: 52px; padding: 9px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-weight: 750; }
.choice-button:hover, .choice-button[aria-pressed="true"], .choice-button[aria-checked="true"] { color: var(--graphite-950); background: var(--yellow-100); border-color: var(--yellow-600); }
.fill-checkbox { display: flex; min-height: 58px; align-items: center; gap: 13px; padding: 12px 14px; background: var(--graphite-50); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.fill-checkbox input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--yellow-600); }
.fill-checkbox span { font-size: 15px; font-weight: 800; }
.remember-control { display: flex; width: fit-content; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; cursor: pointer; }
.remember-control input { width: 18px; height: 18px; accent-color: var(--yellow-600); }
.calculated-value { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 13px; color: var(--info); background: var(--info-soft); border: 1px solid #cde1fb; border-radius: 8px; }
.calculated-value strong { font-size: 20px; }
.fill-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px max(18px, calc((100vw - 830px) / 2)) max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 25px rgba(20,24,29,.06); }
.fill-footer-secondary, .fill-footer-navigation { display: flex; align-items: center; gap: 8px; }

/* PDF preview and feedback */
.preview-dialog { width: 100vw; height: 100dvh; margin: 0; }
.dialog-fullscreen { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
.preview-header { min-height: 68px; color: #fff; background: var(--graphite-900); border-bottom-color: #3c434c; }
.preview-header h2 { color: #fff; }
.preview-actions { display: flex; align-items: center; gap: 8px; }
.preview-actions .icon-button { color: #fff; }
.preview-actions .icon-button:hover { background: var(--graphite-800); }
.preview-toolbar { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 51px; padding: 7px; color: #fff; background: #2c3239; border-bottom: 1px solid #444c55; }
.preview-toolbar strong { min-width: 64px; font-size: 11px; text-align: center; }
.pdf-preview-pages { display: grid; flex: 1; align-content: start; justify-items: center; gap: 24px; overflow: auto; padding: 30px 24px 60px; background: #565d65; overscroll-behavior: contain; }
.pdf-preview-page { background: #fff; box-shadow: 0 15px 42px rgba(0,0,0,.35); }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 500; display: grid; gap: 8px; width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.dialog-toast-region { position: fixed; inset: auto 20px 20px auto; z-index: 10; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 13px 14px; color: #fff; background: var(--graphite-900); border-left: 4px solid var(--yellow-400); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 12px; pointer-events: auto; animation: toastIn .18s ease-out; }
.toast.is-success, .toast.toast-success { border-left-color: #46c487; }
.toast.is-error, .toast.toast-error { border-left-color: #ff5c52; }
.toast button { color: #fff; background: transparent; border: 0; }
.pending-request { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.pending-request span { color: var(--muted); font-size: 11px; text-align: right; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.drawer-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(17,20,24,.6); backdrop-filter: blur(2px); }

@media (max-width: 1280px) {
  .template-grid, .cards-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-toolbar { grid-template-columns: minmax(240px, 1fr) auto minmax(300px, 1fr); gap: 10px; }
  .workspace-save-state { display: none; }
  .designer-layout { grid-template-columns: 86px minmax(350px, 1fr) 310px; }
  .designer-view.inspector-collapsed .designer-layout { grid-template-columns: 86px minmax(350px, 1fr); }
  .workspace-toolbar .button { min-height: 40px; padding-inline: 11px; font-size: 11px; }
}

@media (max-width: 1020px) {
  .app-sidebar { transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .app-sidebar.is-open, body.drawer-open .app-sidebar { transform: translateX(0); }
  .drawer-backdrop.is-open, body.drawer-open .drawer-backdrop { display: block !important; }
  .sidebar-close, .menu-toggle { display: inline-grid; }
  .app-surface { margin-left: 0; }
  .canvas-help { left: 50%; }
  .workspace-toolbar { grid-template-columns: minmax(220px, 1fr) auto; }
  .workspace-toolbar-center { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .designer-layout { grid-template-columns: 78px minmax(330px, 1fr) 290px; }
  .designer-view.inspector-collapsed .designer-layout { grid-template-columns: 78px minmax(330px, 1fr); }
  .designer-canvas-host { padding: 28px 30px 65px; }
  .record-row, .manage-template-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .record-row .status-badge, .manage-template-row .status-badge { display: none; }
}

@media (max-width: 820px) {
  .auth-view { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-panel { min-height: 100dvh; padding: 28px 22px 45px; align-content: center; }
  .mobile-auth-brand { display: flex; }
  .app-header { padding: 10px 14px; }
  .app-main { padding: 27px 14px 55px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 33px; }
  .filter-bar, .history-toolbar { grid-template-columns: 1fr 1fr; }
  .filter-bar .search-control, .history-toolbar .search-control { grid-column: 1 / -1; }
  .template-card { grid-template-columns: 100px minmax(0, 1fr); }
  .designer-view { overflow: auto; }
  .workspace-toolbar { position: sticky; top: 0; z-index: 10; grid-template-columns: minmax(190px, 1fr) auto; }
  .workspace-toolbar-actions .button:not(#designer-publish):not(#designer-add-field) { display: none; }
  .designer-layout, .designer-view.inspector-collapsed .designer-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(560px, 1fr) auto; overflow: visible; }
  .thumbnail-rail { display: block; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #3a4149; }
  .rail-label { display: none; }
  .thumbnail-list { display: flex; padding: 8px 10px; }
  .thumbnail-button { width: 65px; flex: 0 0 auto; }
  .designer-canvas-host { min-height: 560px; }
  .designer-inspector { max-height: none; border-top: 1px solid var(--line); border-left: 0; }
  .designer-view.inspector-collapsed .designer-inspector { display: none; }
  .canvas-help { position: absolute; }
  .fill-main { padding-top: 21px; }
  .dialog-large { width: calc(100vw - 18px); }
}

@media (max-width: 620px) {
  .protocols-page input, .protocols-page select, .protocols-page textarea { font-size: 16px; }
  .session-loader { grid-template-columns: auto auto; }
  .session-loader > .spinner { grid-column: 1 / -1; justify-self: center; }
  .auth-panel { place-items: start stretch; }
  .auth-card { margin: auto; }
  .mobile-auth-brand { margin-bottom: 34px; }
  .header-title span, .sync-state { display: none; }
  .header-title strong { font-size: 15px; }
  .header-actions .button { width: 42px; min-height: 42px; padding: 0; overflow: hidden; font-size: 0; }
  .header-actions .button span { font-size: 19px; }
  .page-heading { display: block; margin-bottom: 21px; }
  .page-heading .button { width: 100%; margin-top: 16px; }
  .page-heading h1 { font-size: 30px; }
  .filter-bar, .list-toolbar, .history-toolbar, .manage-toolbar { grid-template-columns: 1fr; padding: 8px; }
  .filter-bar .search-control, .history-toolbar .search-control { grid-column: 1; }
  .select-control select { min-width: 0; }
  .template-grid, .cards-loading { grid-template-columns: 1fr; }
  .template-card { min-height: 185px; grid-template-columns: 96px minmax(0, 1fr); }
  .template-card-body { padding: 17px 14px 14px; }
  .empty-state { min-height: 280px; }
  .record-row, .manage-template-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .record-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 9px; border-top: 1px solid var(--line); }
  .record-actions .button { flex: 1; }
  .dialog { margin: 0; }
  .dialog-frame:not(.dialog-small) { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .dialog-header, .dialog-body { padding: 17px; }
  .dialog-footer { padding: 11px 13px max(11px, env(safe-area-inset-bottom)); }
  .dialog-footer .button { flex: 1; }
  .operation-progress-header { align-items: center; }
  .operation-progress-body { align-content: start; gap: 14px; }
  .operation-step { grid-template-columns: 27px minmax(0, 1fr); }
  .operation-step-state { display: none; }
  .operation-console { min-height: 150px; }
  .operation-console-log { max-height: min(26dvh, 190px); }
  .operation-progress-footer > span { max-width: 58%; }
  .operation-progress-footer .button { flex: 0 0 auto; }
  .file-dropzone { grid-template-columns: 1fr; justify-items: center; min-height: 175px; text-align: center; }
  .file-dropzone-icon { grid-row: auto; }
  .file-name { grid-column: auto; }
  .workspace-toolbar { gap: 7px; padding: 8px; }
  .workspace-title span { display: none; }
  .workspace-title strong { max-width: 145px; }
  .workspace-toolbar-actions #designer-add-field { display: inline-flex; width: 42px; padding: 0; overflow: hidden; font-size: 0; }
  .workspace-toolbar-actions #designer-add-field span { font-size: 19px; }
  .workspace-toolbar-center { width: 100%; justify-content: center; }
  .designer-layout, .designer-view.inspector-collapsed .designer-layout { grid-template-rows: auto minmax(490px, 1fr) auto; }
  .designer-canvas-host { min-height: 490px; padding: 18px 12px 58px; }
  .document-stage { min-width: 330px; min-height: 466px; }
  .canvas-help { right: 10px; bottom: 9px; left: 10px; text-align: center; transform: none; }
  .designer-inspector { max-height: 64dvh; }
  .inspector-form { padding-bottom: 38px; }
  .fill-view { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .fill-header { min-height: 65px; padding-inline: 10px; }
  .fill-heading h1 { font-size: 15px; }
  .fill-save-state { font-size: 0; }
  .fill-save-state i { width: 9px; height: 9px; }
  .fill-progress { padding: 11px 14px; }
  .fill-main { padding: 17px 11px 35px; }
  .fill-field { padding: 15px 13px; }
  .fill-footer { display: grid; gap: 8px; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
  .fill-footer-secondary, .fill-footer-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fill-footer .button { min-height: 44px; padding-inline: 8px; font-size: 11px; }
  .fill-footer-navigation #fill-finish { grid-column: 1 / -1; }
  .preview-header { padding: 10px 12px; }
  .preview-header .overline { display: none; }
  .preview-header h2 { max-width: 130px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .preview-actions .button { width: 42px; padding: 0; overflow: hidden; font-size: 0; }
  .preview-actions #pdf-preview-download::before { content: "↓"; font-size: 20px; }
  .preview-actions #pdf-preview-edit::before { content: "✎"; font-size: 16px; }
  .preview-actions #pdf-preview-layout-edit { display: none !important; }
  .pdf-preview-pages { padding: 16px 8px 40px; }
  .toast-region { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .operation-spinner { animation-duration: 1.5s; }
}

@media (max-width: 390px) {
  .auth-panel { padding-inline: 17px; }
  .auth-card h2 { font-size: 29px; }
  .code-field input { font-size: 24px; letter-spacing: .28em; }
  .app-main { padding-inline: 10px; }
  .template-card { grid-template-columns: 82px minmax(0, 1fr); }
  .template-preview::before { width: 55px; height: 78px; }
  .template-card h3 { font-size: 15px; }
  .template-card p { margin-bottom: 10px; }
  .form-grid-two, .form-grid-three { grid-template-columns: 1fr; }
  .compact-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inspector-actions { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .nav-item, .account-button { min-height: 48px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  .tool-button { min-width: 42px; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body > * { display: none !important; }
}