/* Online forms: public form, builder, submissions and admin (same navy / neon glass design as the rest of the site). */
.pill.draft { background: #7a86ad; }
.pill.changes { background: var(--orange); }
.pill.disabled { background: var(--red); }

/* ---------- public form ---------- */
.lf-page { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; color: #eaf1ff; }
.lf-page .gp { margin-bottom: 14px; }
.lf-banner { margin-bottom: 12px; }
.lf-head h1 { font: 800 clamp(26px, 4vw, 38px)/1.1 var(--font-d); margin: 4px 0 8px; color: #fff; text-shadow: 0 0 22px rgba(47, 139, 255, .55); }
.lf-org a { color: #7fd0ff; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.lf-desc { color: #c6d6ff; margin: 0 0 10px; max-width: 760px; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lf-chip2 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #dfe9ff;
  background: rgba(47, 139, 255, .16); border: 1px solid rgba(110, 180, 255, .45); }
.lf-chip2.orange { background: rgba(255, 138, 31, .2); border-color: rgba(255, 170, 80, .6); }
.lf-chip2.red { background: rgba(255, 54, 81, .2); border-color: rgba(255, 90, 110, .6); }
.lf-chip2.green { background: rgba(24, 201, 100, .18); border-color: rgba(60, 220, 130, .55); }
.lf-req-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(6, 13, 43, .45); border: 1px solid rgba(120, 160, 255, .3); }
.lf-req-box h4 { margin: 0 0 6px; color: #fff; display: flex; gap: 8px; align-items: center; }
.lf-req-box ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; }
.lf-req-box li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #dbe6ff; }
.lf-req-box li i { color: var(--green); margin-top: 3px; }
.lf-note { margin-bottom: 12px; }
.lf-note a { font-weight: 700; text-decoration: underline; }
.lf-login { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lf-login > i { font-size: 30px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 194, 26, .6)); }
.lf-login > div:not(.lf-login-b) { flex: 1; min-width: 220px; }
.lf-login p { margin: 2px 0 0; color: #c6d6ff; font-size: 14px; }
.lf-login-b { display: flex; gap: 8px; flex-wrap: wrap; }
.lf-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.lf-side { position: sticky; top: 78px; }
.lf-progress { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.lf-progress small { display: block; color: #a9bbea; font-size: 12.5px; }
.lf-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: background .4s;
  background: radial-gradient(closest-side, #0b1850 76%, transparent 78% 100%), conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(120, 160, 255, .2) 0); box-shadow: 0 0 18px rgba(25, 211, 255, .35); }
.lf-ring b { font: 800 16px var(--font-d); color: #fff; }
.lf-nav { display: grid; gap: 4px; margin-bottom: 12px; }
.lf-nav a { display: flex; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 10px; color: #dfe9ff; font-size: 14px; font-weight: 600; }
.lf-nav a:hover { background: rgba(47, 139, 255, .16); }
.lf-nav .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(47, 139, 255, .3); flex: none; }
.lf-nav small { color: #a9bbea; font-size: 12px; }
.lf-nav small.ok { color: var(--green); font-weight: 800; }
.lf-side-b { display: grid; gap: 8px; }
.lf-side-b small { text-align: center; }
.lf-form { padding: 18px; }
.lf-grid { border: 0; padding: 0; margin: 0; min-width: 0; }
.lf-grid[disabled] { opacity: .6; }
.lf-sec { margin: 10px 0 6px; padding: 10px 0 4px; border-top: 1px solid rgba(120, 160, 255, .25); scroll-margin-top: 90px; }
.lf-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.lf-sec h3 { margin: 0; font: 800 21px var(--font-d); color: #fff; display: flex; gap: 9px; align-items: center; }
.lf-sec h3 i { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(25, 211, 255, .7)); font-size: 17px; }
.lf-sec p { margin: 4px 0 0; color: #a9bbea; font-size: 14px; }
.lf-q { min-width: 0; }
.lf-q[hidden] { display: none; }
.lf-req { color: #ff6b81; margin-left: 2px; }
.lf-help { color: #93a7da; font-size: 12.5px; margin-top: 4px; }
.lf-err { color: #ff8095; font-size: 13px; font-weight: 600; min-height: 0; margin-top: 3px; }
.lf-q.bad input, .lf-q.bad select, .lf-q.bad textarea, .lf-q.bad .lf-opts, .lf-q.bad .lf-file { border-color: #ff5a6e !important; box-shadow: 0 0 0 3px rgba(255, 54, 81, .2); }
.lf-page .field input, .lf-page .field select, .lf-page .field textarea, .lf-dark .field input { background: rgba(6, 13, 43, .6); color: #fff; border-color: rgba(120, 160, 255, .4); }
.lf-page .field label.lbl { color: #c6d6ff; font-size: 13.5px; }
.lf-page input[type=date] { color-scheme: dark; }
.lf-opts { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 12px; border: 1px solid transparent; }
.lf-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; cursor: pointer; font-size: 14px; color: #eaf1ff;
  background: rgba(6, 13, 43, .55); border: 1px solid rgba(120, 160, 255, .4); transition: .2s; }
.lf-opt:hover { border-color: var(--cyan); }
.lf-opt input { accent-color: var(--cyan); width: 17px; height: 17px; }
.lf-opt:has(input:checked) { background: rgba(31, 107, 255, .35); border-color: #6fc8ff; box-shadow: 0 0 14px rgba(47, 139, 255, .45); }
.lf-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; cursor: pointer; background: rgba(24, 201, 100, .08); border: 1px solid rgba(60, 220, 130, .4); color: #eaf1ff; font-size: 14.5px; }
.lf-consent input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--green); flex: none; }
.lf-file { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1.5px dashed rgba(120, 160, 255, .5); background: rgba(6, 13, 43, .4); }
.lf-file small { color: #93a7da; font-size: 12px; flex-basis: 100%; }
.lf-file.busy { opacity: .6; pointer-events: none; }
.lf-file.busy::after { content: 'Uploading…'; color: var(--cyan); font-weight: 700; font-size: 13px; }
.lf-pick { cursor: pointer; }
.lf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 11px; border-radius: 10px; background: rgba(24, 201, 100, .18); border: 1px solid rgba(60, 220, 130, .5); font-size: 13.5px; max-width: 100%; }
.lf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-chip i { color: var(--green); }
.lf-x { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; flex: none; }
.lf-x:hover { background: var(--red); }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-privacy { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: #c6d6ff; background: rgba(25, 211, 255, .08); border: 1px solid rgba(25, 211, 255, .3); }
.lf-privacy i { color: var(--cyan); margin-top: 2px; }
.lf-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.lf-done { text-align: center; padding: 34px 18px; max-width: 760px; margin: 10px auto; }
.lf-done-ic { font-size: 64px; color: var(--green); filter: drop-shadow(0 0 22px rgba(24, 201, 100, .8)); animation: lfPop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes lfPop { from { transform: scale(.3); opacity: 0; } }
.lf-done h1 { font: 800 34px var(--font-d); margin: 8px 0; color: #fff; }
.lf-ref { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0; padding: 14px 22px; border-radius: 16px; background: rgba(6, 13, 43, .6); border: 1.5px solid rgba(25, 211, 255, .6); box-shadow: 0 0 26px rgba(25, 211, 255, .35); }
.lf-ref small { color: #a9bbea; text-transform: uppercase; letter-spacing: .6px; font-size: 11.5px; }
.lf-ref b { font: 800 26px/1 ui-monospace, Consolas, monospace; letter-spacing: 1px; color: #fff; }
.lf-ref.sm { padding: 4px 10px; margin: 4px 0; border-radius: 10px; box-shadow: none; }
.lf-ref.sm b { font-size: 15px; }
.lf-done-b { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.lf-status-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.lf-status-h h2 { margin: 2px 0; font: 800 24px var(--font-d); color: #fff; }
.lf-tl { list-style: none; margin: 10px 0; padding: 0 0 0 4px; }
.lf-tl li { position: relative; display: flex; gap: 12px; padding: 0 0 14px 0; }
.lf-tl li::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: rgba(120, 160, 255, .3); }
.lf-tl li:last-child::before { display: none; }
.lf-tl li > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; color: #fff; background: var(--electric); box-shadow: 0 0 12px rgba(47, 139, 255, .6); }
.lf-tl li[class*="status-approved"] > i { background: var(--green); }
.lf-tl li[class*="status-rejected"] > i { background: var(--red); }
.lf-tl li[class*="status-changes"] > i { background: var(--orange); }
.lf-tl li.internal > i { background: #7a86ad; box-shadow: none; }
.lf-tl small { display: block; color: #93a7da; font-size: 12px; }
.lf-tl p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }
.modal .lf-tl li::before { background: #d7e1f7; }
.modal .lf-tl small { color: #6c78a3; }
.lf-ans { display: grid; gap: 8px; }
.lf-a { padding: 9px 12px; border-radius: 12px; background: #f4f7ff; border: 1px solid #e1e8f8; }
.lf-a .k { font-size: 12.5px; font-weight: 700; color: #5a6895; margin-bottom: 3px; }
.lf-a .v { font-size: 14.5px; color: var(--ink); word-break: break-word; }
.lf-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #e3ecff; font-size: 13px; font-weight: 600; margin: 1px 2px 1px 0; }
.lf-filecard { display: inline-flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid #c8dafe; background: #fff; max-width: 100%; }
.lf-filecard img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.lf-filecard > i { font-size: 30px; color: var(--red); padding: 8px 12px; }
.lf-filecard span { display: grid; font-weight: 700; color: var(--blue); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.lf-filecard small { color: #6c78a3; font-weight: 500; }
.lf-modal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin: 10px 0; }
.lf-modal-grid h4 { margin: 0 0 8px; }

/* ---------- preview modal ---------- */
.modal.lf-pv-modal { max-width: 1240px; width: calc(100vw - 32px); padding: 14px; }
.lf-pv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lf-pv-top h3 { margin: 0; flex: 1; }
.lf-pv-dev { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #eef3ff; }
.lf-pv-dev button { border: 0; background: transparent; padding: 6px 11px; border-radius: 8px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.lf-pv-dev button.on { background: var(--blue); color: #fff; }
.lf-pv { background: radial-gradient(ellipse at top, #13256e, #060d2b 70%); border-radius: 14px; padding: 6px; max-height: 74vh; overflow: auto; }
.lf-pv .lf-page { margin: 0 auto; transition: max-width .3s; }
.lf-pv .lf-page.narrow .lf-layout { grid-template-columns: minmax(0, 1fr); }
.lf-pv .lf-page.narrow .lf-side { position: static; }
.lf-pv .lf-page.narrow .form-grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- builder ---------- */
.fb { color: #eaf1ff; }
.fb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; position: sticky; top: 8px; z-index: 5; }
.fb-title { display: grid; min-width: 0; flex: 1; }
.fb-title small { color: #93a7da; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.fb-title b { font: 800 22px var(--font-d); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-dirty { color: var(--gold); font-size: 12.5px; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; }
.fb-dirty[hidden] { display: none; }
.fb-dirty i { font-size: 8px; }
.fb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.fb-pal h4, .fb-insp h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; color: #fff; }
.fb-pal h4 i, .fb-insp h4 i { color: var(--cyan); }
.fb-pal p { font-size: 12.5px; margin: 0 0 8px; }
.fb-pal, .fb-insp { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow: auto; }
.fb-types { display: grid; gap: 6px; }
.fb-type { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: grab; text-align: left; font: 600 13.5px var(--font); color: #eaf1ff;
  background: rgba(6, 13, 43, .55); border: 1px solid rgba(120, 160, 255, .35); transition: .2s; }
.fb-type i { width: 18px; color: #6fc8ff; }
.fb-type:hover { border-color: var(--cyan); transform: translateX(3px); box-shadow: 0 0 14px rgba(25, 211, 255, .3); }
.fb-formhead { padding: 4px 4px 12px; border-bottom: 1px solid rgba(120, 160, 255, .25); margin-bottom: 10px; }
.fb-formhead h2 { margin: 0; font: 800 26px var(--font-d); color: #fff; }
.fb-formhead p { margin: 4px 0; color: #c6d6ff; font-size: 14px; }
.fb-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-height: 160px; }
.fb-item { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 6px; border-radius: 12px; cursor: pointer;
  background: rgba(6, 13, 43, .55); border: 1px solid rgba(120, 160, 255, .3); transition: border-color .2s, box-shadow .2s, transform .2s; }
.fb-item:hover { border-color: rgba(110, 200, 255, .7); }
.fb-item.on { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(25, 211, 255, .35), 0 0 22px rgba(25, 211, 255, .25); }
.fb-item.sec { background: linear-gradient(90deg, rgba(139, 61, 255, .32), rgba(31, 107, 255, .18)); border-color: rgba(190, 140, 255, .55); margin-top: 6px; }
.fb-item.sec b { font-family: var(--font-d); font-size: 17px; }
.fb-item.dragging { opacity: .4; }
.fb-item.drop-before::before, .fb-item.drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.fb-item.drop-before::before { top: -5px; }
.fb-item.drop-after::after { bottom: -5px; }
.fb-item .grow { min-width: 0; }
.fb-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.fb-item small { color: #93a7da; font-size: 12px; }
.fb-grip { color: #6c80b8; cursor: grab; padding: 0 4px; }
.fb-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(47, 139, 255, .25); color: #9fdcff; flex: none; }
.fb-acts { display: flex; gap: 3px; opacity: .55; transition: opacity .2s; }
.fb-item:hover .fb-acts, .fb-item.on .fb-acts { opacity: 1; }
.fb-acts button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(120, 160, 255, .35); background: rgba(255, 255, 255, .06); color: #dfe9ff; cursor: pointer; }
.fb-acts button:hover { background: var(--electric); }
.fb-acts button.red:hover { background: var(--red); }
.fb-empty { display: grid; place-items: center; gap: 8px; padding: 40px; border: 2px dashed rgba(120, 160, 255, .45); border-radius: 14px; color: #a9bbea; text-align: center; }
.fb-empty i { font-size: 28px; color: var(--cyan); }
.fb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.fb-form .full { grid-column: 1 / -1; }
.fb-form .field { margin-bottom: 9px; }
.fb-form .field label.lbl { color: #a9bbea; font-size: 12.5px; }
.fb-form .field label.lbl small { font-weight: 500; opacity: .8; }
.fb-form input, .fb-form select, .fb-form textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(120, 160, 255, .4); background: rgba(6, 13, 43, .6); color: #fff; font: inherit; font-size: 14px; }
.fb-form input[type=checkbox] { width: 17px; padding: 0; }
.fb-form input[type=date] { color-scheme: dark; margin-top: 5px; }
.fb-form textarea { min-height: 74px; resize: vertical; }
.fb-form .check { color: #dfe9ff; margin: 2px 0 8px; font-size: 13.5px; align-items: flex-start; }
.fb-form hr { grid-column: 1 / -1; border: 0; border-top: 1px solid rgba(120, 160, 255, .25); width: 100%; margin: 4px 0 10px; }
.fb-cond { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(139, 61, 255, .14); border: 1px solid rgba(190, 140, 255, .4); margin: 4px 0 10px; }
.fb-cond b { font-size: 13px; display: flex; gap: 6px; align-items: center; color: #e2ccff; }
.fb-cond p { margin: 0; font-size: 12.5px; }
.fb-adv { margin-bottom: 10px; color: #a9bbea; font-size: 13px; }
.fb-adv summary { cursor: pointer; margin-bottom: 6px; }
.fb-insp-b { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-tip { font-size: 12.5px; display: flex; gap: 7px; }
.fb-tip i { color: var(--green); margin-top: 2px; }
.fb-head-b { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ---------- organization forms list ---------- */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-top: 10px; }
.fl-empty { grid-column: 1 / -1; }
.fl-card { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(6, 13, 43, .55); border: 1px solid rgba(120, 160, 255, .35); min-width: 0; }
.fl-card:hover { border-color: rgba(110, 200, 255, .75); box-shadow: 0 0 24px rgba(47, 139, 255, .3); }
.fl-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: #fff; flex: none; box-shadow: 0 0 18px rgba(47, 139, 255, .45), inset 0 0 12px rgba(255, 255, 255, .25); }
.fl-b { min-width: 0; flex: 1; }
.fl-top { display: flex; gap: 5px; flex-wrap: wrap; }
.fl-card h4 { margin: 6px 0; font: 800 19px var(--font-d); color: #fff; }
.fl-warn { color: #ffb3bf; font-size: 13px; margin: 0 0 6px; }
.fl-stats { display: flex; gap: 12px; flex-wrap: wrap; color: #a9bbea; font-size: 13px; margin-bottom: 10px; }
.fl-stats b { color: #fff; }
.fl-btns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.fl-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fl-tpl { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 16px; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c1) 30%, transparent), rgba(6, 13, 43, .7)); border: 1px solid color-mix(in srgb, var(--c1) 60%, transparent); transition: .25s; }
.fl-tpl:hover { transform: translateY(-3px); box-shadow: 0 10px 26px color-mix(in srgb, var(--c1) 45%, transparent); }
.fl-tpl > i { font-size: 24px; color: var(--c1); filter: drop-shadow(0 0 8px var(--c1)); }
.fl-tpl b { font: 800 17px var(--font-d); }
.fl-tpl small { color: #c6d6ff; font-size: 12.5px; }
.fl-tpl.off { opacity: .55; }
.fl-tpls.admin .fl-tpl { cursor: default; }
.fl-tpls.admin .fl-btns { margin-top: 8px; }

/* ---------- analytics ---------- */
.fa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.fa-kpi { display: grid; gap: 2px; padding: 12px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 6px 18px rgba(6, 13, 43, .25); }
.fa-kpi i { font-size: 18px; opacity: .9; }
.fa-kpi b { font: 800 28px var(--font-d); }
.fa-kpi span { font-size: 12.5px; opacity: .92; }
.fa-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.fa-charts h4, .fa-choices + h4 { margin: 4px 0 6px; }
.fa-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fa-ch { padding: 10px; border-radius: 12px; background: #f4f7ff; border: 1px solid #e1e8f8; }
.panel .fa-ch { background: rgba(6, 13, 43, .5); border-color: rgba(120, 160, 255, .3); }
.fa-bar { display: grid; grid-template-columns: minmax(70px, 1fr) 2fr 26px; gap: 8px; align-items: center; font-size: 13px; margin-top: 5px; }
.fa-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-bar div { height: 9px; border-radius: 9px; background: #dfe7fb; overflow: hidden; }
.fa-bar div i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #19b6ff, #8b3dff); }

/* ---------- submissions ---------- */
.fs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fs-filters select, .fs-filters input { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(120, 160, 255, .4); background: rgba(6, 13, 43, .6); color: #fff; font: inherit; font-size: 14px; }
.fs-filters .js-q { flex: 1; min-width: 180px; }
.fs-filters input[type=date] { color-scheme: dark; }
.fs-date { display: inline-flex; gap: 6px; align-items: center; color: #a9bbea; font-size: 13px; }
.fs-chips, .fs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fs-chips .chip, .fs-tabs .chip { background: rgba(8, 20, 70, .7); color: #dfe9ff; border: 1px solid rgba(120, 160, 255, .4); cursor: pointer; }
.fs-chips .chip.on, .fs-tabs .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 14px rgba(31, 107, 255, .55); }
.fs-chips .chip b { margin-left: 4px; }
.tbl tr.fs-new td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.modal.fs-modal { max-width: 1100px; width: calc(100vw - 32px); }
.fs-rev-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fs-rev-h h3 { margin: 2px 0 4px; }
.fs-box { padding: 10px; border-radius: 12px; border: 1px solid #dbe3f4; background: #f8faff; margin-bottom: 10px; display: grid; gap: 7px; }
.fs-box h4 { margin: 0; display: flex; gap: 7px; align-items: center; font-size: 15px; }
.fs-box h4 small { font-weight: 500; color: #6c78a3; }
.fs-box select, .fs-box textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid #c8d4ee; font: inherit; font-size: 14px; }
.fs-box textarea { min-height: 62px; resize: vertical; }
.fs-box .btn { justify-self: start; }
.fs-box.internal { background: #f4f4f8; border-style: dashed; }

/* ---------- profile page list ---------- */
.pf-forms { display: grid; gap: 10px; }
.pf-form { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(6, 13, 43, .5); border: 1px solid rgba(120, 160, 255, .35); }
.pf-form:hover { border-color: rgba(110, 200, 255, .75); box-shadow: 0 0 24px rgba(47, 139, 255, .3); }
.pf-form h4 { margin: 0 0 4px; font: 800 19px var(--font-d); color: #fff; }
.pf-form p { margin: 0 0 4px; color: #c6d6ff; font-size: 14px; }
.pf-form .grow { min-width: 0; flex: 1; }
.pf-form-b { display: grid; gap: 4px; justify-items: end; text-align: right; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .fb-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .fb-pal { grid-column: 1 / -1; position: static; max-height: none; }
  .fb-types { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 860px) {
  .lf-layout { grid-template-columns: minmax(0, 1fr); }
  .lf-side { position: static; }
  .lf-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .fb-body { grid-template-columns: minmax(0, 1fr); }
  .fb-insp { position: static; max-height: none; }
  .fb-top { position: static; }
  .lf-modal-grid, .fa-charts { grid-template-columns: minmax(0, 1fr); }
  .fl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lf-page { padding: 12px 10px 30px; }
  .lf-page .form-grid, .fb-form { grid-template-columns: minmax(0, 1fr); }
  .lf-form { padding: 14px 12px; }
  .lf-actions .btn { flex: 1; justify-content: center; }
  .pf-form { flex-direction: column; align-items: flex-start; }
  .pf-form-b { justify-items: start; text-align: left; }
  .fb-btns { width: 100%; }
  .fb-btns .btn { flex: 1; justify-content: center; }
  .fb-item { flex-wrap: wrap; }
  .fb-item .grow { flex: 1 1 calc(100% - 80px); }
  .fb-acts { opacity: 1; width: 100%; justify-content: flex-end; }
  .fb-acts button { width: 34px; height: 32px; }
  .fa-bar { grid-template-columns: minmax(60px, 1fr) 1.4fr 24px; }
  .lf-ref b { font-size: 20px; }
}
@media print {
  .topbar, .footer, .lf-done-b, #ai-fab, .announce { display: none !important; }
  .lf-done { box-shadow: none; }
}