/* Shared visual system. Loaded after the original component styles. */
/*:root {
  --ink: #182d3f; --muted: #647582; --navy: #152b3c; --accent: #237568;
  --line: #dfe6e9; --canvas: #f5f7f8; --surface: #fff;
  --radius: 14px; --shadow: 0 4px 20px #172e3e04;
}*/
:root {
  --ink: #182d3f; --muted: #647582; --navy: rgb(34,109,234); --accent: rgb(254,168,0);
  --line: #dfe6e9; --canvas: #f5f7f8; --surface: #fff;
  --radius: 14px; --shadow: 0 4px 20px #172e3e04;
}
body, .kufam, .profileWrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
body { background: rgba(23,90,203,0.05); font-size: 14px; line-height: 1.55; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgb(23,90,203); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -1.4px; font-weight: 650; margin-bottom: 14px; }
h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.5px; font-weight: 650; margin-bottom: 0; }
h3 { font-size: 18px; font-weight: 600; }
.ui-icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 650; letter-spacing: -1px; color: inherit; }
.brand-mark { width: 35px; display: flex; color: #8ec7bb; }
.brand-mark svg { width: 100%; }
.brand-dot { color: #8ec7bb; }
.sidebar { width: 248px; position: fixed; inset: 0 auto 0 0; background: var(--navy); color: #f3f7f9; display: flex; flex-direction: column; padding: 32px 18px 18px; z-index: 100; }
.sidebar > .brand { margin: 0 14px 54px; }
.nav-caption { margin: 0 16px 14px; color: #92a8b6; font-size: 10px; letter-spacing: 1.8px; font-weight: 600; }
#app-menu { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
#app-menu .item { border: 1px solid transparent; border-radius: 8px; background: transparent; color: #adbec9; display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px 16px; min-height: 48px; font-weight: 500; }
#app-menu .item:hover { color: #fff; background: #ffffff08; }
#app-menu .item.active { color: #fff; background: #ffffff0e; border-color: #ffffff0d; box-shadow: inset 3px 0 #83bdae; }
#app-menu .item.active .ui-icon { color: #8ec7bb; }
#app-menu .item[data-page="add"] { margin-bottom: 25px; }
.sidebar-note { margin: auto 14px 28px; padding-top: 40px; }
.sidebar-note p { font-size: 19px; line-height: 1.5; font-weight: 500; color: #dce7ec; }
.sidebar-note > span:last-child { display: block; color: #92a8b6; font-size: 11px; max-width: 160px; }
.sidebar-account { display: flex; align-items: center; gap: 10px; border-top: 1px solid #ffffff12; padding: 20px 8px 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(23,90,203); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 1px solid #cfdedb; flex-shrink: 0; }
.sidebar-account > div { flex: 1; min-width: 0; }
.sidebar-account strong, .sidebar-account span:not(.avatar) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { font-size: 12px; font-weight: 500; }
.sidebar-account span:not(.avatar) { font-size: 10px; color: #9db2bf; margin-top: 3px; }
.sidebar-account a { color: #a4b8c5; padding: 6px; }
.workspace-bar { margin-left: 248px; height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 42px; background: #fff; }
.workspace-label { color: var(--muted); font-size: 12px; }
.workspace-label > span { color: #bbc7ce; margin: 0 14px; }
.workspace-label strong { color: var(--ink); font-weight: 500; }
.workspace-account { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.mobile-brand, .mobile-logout { display: none; }
.authenticated #main-content { margin-left: 248px; }
.appPages { width: 100%; height: auto; overflow: visible; position: static; max-width: 1400px; margin: auto; padding: 40px 42px; }
.appPages > .page { display: none; position: static; width: auto; height: auto; background: none; overflow: visible; padding: 0; transition: none; }
.appPages > .page.active { display: block; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.page-heading p { color: var(--muted); font-size: 14px; margin-bottom: 0; max-width: 540px; }
.page-heading > .button { flex-shrink: 0; }
.button, .submitButton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, box-shadow .15s; text-decoration: none; }
.blueButton, .submitButton { background: var(--navy); border: 1px solid var(--navy); color: white; }
.blueButton:hover, .submitButton:hover { background: #274658; color: #fff; box-shadow: 0 3px 10px #152b3c14; }
.whiteButton { color: var(--ink); border: 1px solid #ced9df; background: #fff; }
.whiteButton:hover { background: #f2f6f7; }
.button .iconWrap { margin: 0; }
.submitButton .icon { width: 19px; }
.text-button { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; }
.text-button:hover { text-decoration: underline; }
.text-button .ui-icon { width: 17px; height: 17px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 30px; }
.stat-card { display: flex; position: relative; align-items: flex-start; gap: 15px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-icon { padding: 10px; background: rgba(23,90,203,0.1); border-radius: 10px; color: rgb(23,90,203); }
.stat-card > div > span { color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; font-size: 32px; line-height: 1.3; margin: 8px 0 21px; font-weight: 600; letter-spacing: -1px; }
.stat-detail { position: absolute; bottom: 18px; left: 24px; font-size: 10px; color: #72818d; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,1fr); gap: 24px; }
.surface { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 25px 26px; border-bottom: 1px solid #edf0f2; }
.section-heading h2 { font-size: 19px; }
.recent-list { padding: 8px 24px; }
.recent-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 0; text-align: left; border: 0; border-bottom: 1px solid #edf0f2; background: transparent; }
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: #f8fafb; }
.document-symbol { background: rgba(23,90,203,0.1); border: 1px solid rgba(23,90,203,0.2); color: rgb(23,90,203); padding: 10px; border-radius: 9px; }
.recent-info { flex: 1; min-width: 0; }
.recent-info strong { display: block; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.recent-info > span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.recent-row > .ui-icon { color: #8a9ba7; width: 17px; }
.guide-card { background: rgba(34, 109, 234,0.1); border: 1px solid #dce7e3; border-radius: var(--radius); padding: 28px; }
.guide-card h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
.guide-card p { font-size: 12px; line-height: 1.8; color: rgb(34,109,234); }
.guide-card ol { list-style: none; padding: 8px 0; margin: 0; }
.guide-card li { font-size: 11px; display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.guide-card li span { color: rgb(34,109,234); font-size: 14px; font-weight:700;border-bottom: 1px solid #abc5bb; padding-bottom: 3px; }
.workspace-footnote { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; color: #7b8b96; margin: 30px 0 4px; }
.workspace-footnote .ui-icon { width: 16px; height: 16px; }
.empty-panel { text-align: center; padding: 42px 24px; }
.empty-panel p { max-width: 350px; margin: 10px auto 20px; font-size: 13px; color: var(--muted); line-height: 1.8; }
.empty-icon { display: inline-flex; padding: 18px; color: rgba(23,90,203,1); background: rgba(23,90,203,0.1); border-radius: 16px; margin-bottom: 20px; }
.empty-icon .ui-icon { width: 30px; height: 30px; }
.empty-panel h3 { margin-bottom: 0; }
.notification-empty { padding: 65px 24px; }
.notification-empty p { max-width: 420px; }
.status-pill { display: inline-block; color: rgba(23,90,203,1); background: rgba(23,90,230,0.1); border: 1px solid #dbe5df; padding: 6px 12px; border-radius: 20px; font-size: 11px; }
.appPageTitle { background: none; padding: 0; color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.7px; line-height: 1.3; margin: 0 0 10px; }
.appPageDescription { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 640px; }
.buttonsList { background: transparent; padding: 16px 0; }
.buttonsList .list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 8px; }
.buttonsList .listWrap .listItem { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 0; box-shadow: var(--shadow); cursor: pointer; min-width: 0; }
.buttonsList .listWrap .listItem:hover { border-color: #aabdb6; background: #fbfdfc; }
.buttonsList .listWrap .listItem .iconWrap { width: 42px; border-radius: 10px; }
.buttonsList .listWrap .listItem .iconWrap img { width: 24px; }
.buttonsList .listWrap .listItem .iconWrap .iconBackground { opacity: .08; }
.buttonsList .listWrap .listItem .textWrap { padding-left: 3px; }
.buttonsList .listWrap .listItem .textWrap .text { font-size: 14px; font-weight: 550; }
.buttonsList .listWrap .listItem .textWrap .note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.buttonsList .listWrap .listItem .arrow { width: 13px; opacity: .5; }
.structoryWrap .mainAreas { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; gap: 14px; margin: 24px 0 8px; }
.structoryWrap .mainAreas .area + .area { border-left: 1px solid var(--line); }
.structoryWrap .area .name { font-size: 11px; color: var(--muted); }
.structoryWrap .area .text { color: var(--muted); font-size: 11px; }
.structoryPage .back { padding: 10px 0 0; }
.structoryPage .back img { width: 30px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.structoryWrap .documentRow { border-color: var(--line); border-radius: 10px; padding: 18px; cursor: pointer; }
.structoryWrap .documentRow:hover { border-color: #aabdb6; }
.structoryWrap .documentRow .infoWrap { min-width: 0; overflow-wrap: anywhere; }
.structoryWrap .documentRow .infoWrap .tags .tag { background: #f3f6f7; border: 0; color: var(--muted); padding: 5px 9px; border-radius: 5px; }
.addDocuments { max-width: 920px; margin: auto; }
.addDocuments .padded { padding: 26px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.addDocuments .scannerActions { margin-top: 0; }
.addDocuments .scannerActions .button { flex: initial; }
.addDocuments .inputTitle { font-size: 13px; margin-bottom: 9px; }
.addDocuments .inputWrap { margin-top: 22px; }
.addDocuments .inputWrap input, .addDocuments .inputWrap select, .addDocuments .inputWrap textarea, .profileWrap .addWrap input { padding: 12px; border: 1px solid #ced9df; background: #fcfdfd; border-radius: 8px; min-height: 46px; }
.addDocuments .inputWrap textarea { min-height: 110px; resize: vertical; }
.addDocuments .inputWrap input:focus, .addDocuments .inputWrap select:focus, .addDocuments .inputWrap textarea:focus, .profileWrap .addWrap input:focus { background: white; border-color: rgba(23,90,203,0.2); box-shadow: 0 0 0 3px rgba(0,0,0,0.4); }
.addDocuments .inputWrap .checkboxInputs input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; accent-color: var(--accent); }
.structoryWrapAdd { border-color: var(--line); border-radius: 10px; }
.structoryWrapAdd .buttonsList { padding: 12px; }
.structoryWrapAdd .mainAreas { border: 0; border-bottom: 1px solid var(--line); margin: 0; border-radius: 0; }
.structoryWrapAdd .listItem { padding: 12px !important; }
.structory2Chosen .structoryPages { margin-top: 0; }
.structory2Chosen #structory-pages2 .buttonsList { overflow: hidden; }
.structoryWrapAdd .back { padding-left: 12px; }
.addDocuments .submitButton { width: 100%; margin-top: 28px; }
.upload-intro { display: flex; align-items: center; gap: 16px; padding: 22px; margin-bottom: 20px; border: 1px dashed #c8d8d5; border-radius: 10px; background: rgba(23,90,203,0.1); }
.upload-intro > .ui-icon { color: rgb(23,90,203); width: 30px; height: 30px; }
.upload-intro strong { font-size: 14px; font-weight: 600; }
.upload-intro p { font-size: 12px; color: var(--muted); margin: 5px 0 0; }
#pagesWrap:not(:empty) { margin-bottom: 24px; }
.profileWrap .profilePage { padding: 0; }
.profileWrap .profileSubtitle { color: var(--muted); font-size: 14px; }
.profileWrap .profileHeader { margin-bottom: 28px; }
.profileWrap .profileGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.profileWrap .profileCard { padding: 25px; border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.profileWrap .cardHeader > div { min-width: 0; overflow-wrap: anywhere; }
.profileWrap .cardTitle { font-size: 16px; }
.profileWrap .cardSubtitle { color: var(--muted); font-size: 12px; }
.profileWrap .cardIcon { background: rgba(23,90,203,0.1); color: rgba(23,90,203,1); }
.profileWrap .profileTag { background: #f4f7f8; border-color: var(--line); color: var(--ink); }
.profileWrap .addWrap button { background: var(--navy); min-height: 46px; }
.profileWrap .submitButton { margin-top: 26px; min-width: 185px; }
.profile-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
.lightbox { z-index: 5000; background: #0f253d66; backdrop-filter: blur(5px); }
.lightbox .lightboxContent { min-width: 0; width: min(90vw,680px); max-width: 90vw; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 100px #0d233c33; }
.lightboxContent > img { max-height: 120px; margin-top: 20px; }
#document-view-lightbox .imageWrap { padding: 18px; }
#document-view-lightbox .image { border-radius: 6px; }
.loading-content { width: 240px !important; padding: 30px; text-align: center; }
.loading-content p { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.loading-spinner { display: block; margin: auto; width: 28px; height: 28px; border: 2px solid #dce6e2; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skip-link { position: fixed; left: 15px; top: -70px; z-index: 6000; background: white; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.skip-link:focus { top: 15px; }
/* Login */
.auth-layout { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-story { background: var(--navy); color: #fff; padding: 42px 60px 30px; display: flex; flex-direction: column; overflow: hidden; }
.auth-story-content { max-width: 480px; margin: auto; padding-top: 56px; width: 100%; }
.auth-story h1 { font-size: clamp(38px,4vw,58px); font-weight: 550; line-height: 1.13; letter-spacing: -2px; }
.auth-story h1 > span { color: rgba(254,168,0,1); }
.auth-story-content > p { max-width: 360px; color: #b0c0cb; font-size: 14px; line-height: 1.9; }
.auth-story-footer { font-size: 9px; letter-spacing: 1.9px; color: #8ca6b4; margin-top: 30px; }
.archive-illustration { position: relative; height: 245px; width: 290px; margin: 38px auto 0; }
.archive-sheet { position: absolute; width: 168px; height: 208px; border: 1px solid #ffffff28; border-radius: 12px; }
.sheet-back { background: var(--accent); transform: rotate(-12deg); top: 4px; left: 33px; }
.sheet-front { background: #f5f7f5; transform: rotate(7deg); left: 76px; padding: 22px; color: #416b63; }
.sheet-symbol .ui-icon { width: 29px; height: 29px; margin-bottom: 20px; }
.sheet-line { display: block; height: 5px; width: 100%; background: #d1dcd7; border-radius: 3px; margin: 9px 0; }
.sheet-line.short { width: 65%; }
.sheet-divider { height: 1px; background: #e0e7e3; margin: 18px 0; }
.sheet-check { display: flex; position: absolute; bottom: -10px; right: -12px; padding: 10px; background: #73a58f; border: 5px solid var(--navy); border-radius: 50%; color: white; }
.archive-caption { position: absolute; bottom: 4px; left: 0; display: flex; gap: 10px; align-items: center; font-size: 11px; background: #203c4d; border: 1px solid #ffffff17; border-radius: 8px; padding: 14px 20px; box-shadow: 0 12px 24px #00000012; }
.archive-caption .ui-icon { width: 17px; height: 17px; color: #96bfb2; }
.auth-form-section { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 48px 32px; background: #fbfcfc; }
.auth-form-wrap { width: 100%; max-width: 370px; margin: auto; }
.auth-form-wrap h2 { font-size: 29px; letter-spacing: -1px; margin-bottom: 12px; }
.auth-intro { color: var(--muted); font-size: 13px; margin-bottom: 36px; }
.auth-form-wrap label { display: block; font-size: 12px; font-weight: 600; margin: 22px 0 9px; }
.auth-form-wrap input:not([type="hidden"]) { width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid #cfd9de; background: white; border-radius: 8px; font-size: 13px; }
.auth-form-wrap input::placeholder { color: #87969f; }
.auth-form-wrap input:focus { outline: 2px solid rgb(23,90,203); outline-offset: 2px; }
.password-field { position: relative; }
.password-field input { padding-right: 80px !important; }
.password-field button { position: absolute; right: 5px; top: 5px; min-height: 40px; padding: 0 12px; background: transparent; color: #637983; font-size: 11px; border: 0; border-radius: 5px; }
#login-submit { width: 100%; justify-content: space-between; margin-top: 28px; min-height: 50px; }
#login-submit:disabled { opacity: .6; cursor: wait; }
.auth-note { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 32px; color: #748c85; }
.auth-note p { margin: 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
.registration-note { color: var(--muted); font-size: 11px; text-align: center; line-height: 1.8; margin: 30px 0 0; }
.auth-copyright { font-size: 10px; color: #84929c; margin-top: 50px; }
.form-error { background: #fff1f0; color: #a33d38; padding: 12px; border: 1px solid #f2d5d1; border-radius: 8px; font-size: 12px; margin: 18px 0 0; }
@media (min-width: 1500px) { .auth-story { padding-left: 100px; padding-right: 100px; } }
@media (max-width: 1150px) {
  .sidebar { width: 218px; }
  .workspace-bar, .authenticated #main-content { margin-left: 218px; }
  .appPages { padding: 30px 26px; }
  .workspace-bar { padding: 0 26px; }
  .stat-card { padding: 20px 16px; gap: 10px; }
  .stat-icon { padding: 8px; }
  .stat-detail { left: 16px; }
  .dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .guide-card ol { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .profileWrap .profileGrid { grid-template-columns: minmax(0,1fr); }
  .auth-story { padding: 36px; }
}
@media (max-width: 760px) {
  .sidebar { inset: auto 0 0; width: 100%; padding: 7px 8px max(7px,env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); z-index: 3000; }
  .sidebar > .brand, .nav-caption, .sidebar-note, .sidebar-account { display: none; }
  #app-menu { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; }
  #app-menu .item { flex-direction: column; padding: 8px 2px; gap: 5px; color: #74828c; font-size: 9px; line-height: 1.3; min-width: 0; border: 0; border-radius: 8px; }
  #app-menu .item .ui-icon { width: 21px; height: 21px; }
  #app-menu .item[data-page="add"] { margin-bottom: 0; }
  #app-menu .item.active { background: rgba(23,90,203,0.2); color: var(--ink); box-shadow: none; }
  #app-menu .item.active .ui-icon { color: rgb(23,90,203); }
  #app-menu .item:hover { color: rgb(23,90,203); background: rgba(23,90,203,0.2); }
  .workspace-bar, .authenticated #main-content { margin-left: 0; }
  .workspace-bar { padding: 0 22px; height: 70px; }
  .mobile-brand { display: inline-flex; font-size: 23px; }
  .mobile-brand .brand-mark { color: #40796c; width: 29px; }
  .mobile-logout { display: block; color: var(--muted); padding: 7px; }
  .mobile-logout .ui-icon { width: 18px; height: 18px; }
  .workspace-label, .account-label { display: none; }
  .workspace-account { gap: 6px; }
  .appPages { padding: 28px 20px calc(108px + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
  .page-heading .appPageTitle { font-size: 24px; }
  .page-heading p { font-size: 13px; }
  .page-heading > .button { min-height: 43px; font-size: 12px; }
  .stat-grid { gap: 8px; margin-bottom: 22px; }
  .stat-card { display: block; padding: 14px 11px; }
  .stat-icon { display: inline-flex; padding: 7px; margin-bottom: 10px; }
  .stat-icon .ui-icon { width: 18px; height: 18px; }
  .stat-card > div > span { display: block; font-size: 10px; min-height: 32px; }
  .stat-card strong { font-size: 27px; margin: 6px 0 0; }
  .stat-detail { display: none; }
  .section-heading { padding: 20px; gap: 10px; }
  .section-heading h2 { font-size: 18px; }
  .section-heading .text-button { font-size: 10px; gap: 5px; }
  .recent-list { padding: 5px 18px; }
  .guide-card { padding: 24px; }
  .guide-card ol { display: block; }
  .workspace-footnote { align-items: flex-start; font-size: 10px; text-align: center; }
  .buttonsList .list { grid-template-columns: 1fr; gap: 9px; }
  .buttonsList .listWrap .listItem { padding: 16px; }
  .appPageTitle { font-size: 24px; font-weight: 550; letter-spacing: -.4px; margin-bottom: 8px; }
  .appPageDescription { font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
  .addDocuments .padded { padding: 18px; }
  .upload-intro { padding: 16px; }
  .upload-intro p { font-size: 11px; }
  .addDocuments .scannerActions .button { width: 100%; }
  .addDocuments .inputWrap .twoSelects { gap: 10px; }
  .profileWrap .profileCard { padding: 20px; }
  .profileWrap .submitButton { width: 100%; }
  .structoryWrap .mainAreas { padding: 12px 8px; gap: 8px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { padding: 26px; }
  .auth-story-content { padding-top: 35px; max-width: none; }
  .auth-story h1 { font-size: 36px; letter-spacing: -1.4px; }
  .auth-story-content > p { font-size: 12px; margin-bottom: 0; }
  .archive-illustration, .auth-story-footer { display: none; }
  .auth-form-section { padding: 36px 26px 24px; }
  .auth-form-wrap { max-width: 440px; }
  .auth-form-wrap h2 { font-size: 27px; }
  .auth-intro { margin-bottom: 26px; }
  .auth-copyright { margin-top: 35px; }
}
/* Keep login focused and within normal phone/laptop viewports. Content may
   grow naturally for zoom, a software keyboard, or unusually long errors. */
@media (min-width: 761px) and (max-height: 850px) {
  .auth-story { padding-top: 28px; padding-bottom: 24px; }
  .auth-story-content { padding-top: 24px; }
  .auth-story h1 { font-size: clamp(32px, 3.6vw, 48px); }
  .archive-illustration { height: 195px; margin-top: 20px; transform: scale(.8); transform-origin: top center; margin-bottom: -30px; }
  .auth-story-footer { margin-top: 16px; }
  .auth-form-section { padding: 28px 36px 20px; }
  .auth-intro { margin-bottom: 22px; }
  .auth-note { margin-top: 22px; padding-top: 18px; }
  .registration-note { margin-top: 18px; }
  .auth-copyright { margin-top: 24px; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .archive-illustration, .auth-note { display: none; }
  .auth-story-content { padding-top: 16px; }
  .auth-form-wrap label { margin-top: 14px; }
  .auth-copyright { margin-top: 16px; }
}
@media (max-width: 760px) {
  .public-page { background: var(--navy); }
  .auth-layout { background: var(--navy); grid-template-rows: auto 1fr; padding-bottom: env(safe-area-inset-bottom); }
  .auth-story { padding: max(22px, env(safe-area-inset-top)) 26px 22px; align-items: center; }
  .auth-story-content { display: none; }
  .auth-story .brand { font-size: 26px; }
  .auth-form-section { align-self: center; margin: 0 20px 24px; padding: 30px 26px 20px; border: 1px solid #ffffff12; border-radius: 20px; box-shadow: 0 20px 60px #09192326; }
  .auth-form-wrap { max-width: 370px; }
  .auth-form-wrap h2 { font-size: clamp(23px, 6vw, 29px); }
  .auth-form-wrap input:not([type="hidden"]) { font-size: 16px; }
  .auth-intro { margin-bottom: 24px; }
  .auth-note { display: none; }
  .registration-note { margin-top: 22px; font-size: 10px; }
  .auth-copyright { margin-top: 20px; font-size: 9px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .auth-story { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; }
  .auth-form-section { padding: 22px 20px 18px; margin: 0 16px 16px; border-radius: 16px; }
  .auth-form-wrap h2 { margin-bottom: 8px; }
  .auth-intro { margin-bottom: 16px; font-size: 12px; }
  .auth-form-wrap label { margin: 14px 0 6px; }
  .auth-form-wrap input:not([type="hidden"]) { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  #login-submit { min-height: 46px; margin-top: 20px; }
  .registration-note { margin-top: 16px; }
  .auth-copyright { display: none; }
  .auth-form-wrap .form-error { padding: 8px 10px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Documents can be scanned pages, uploaded files, or saved links. */
[hidden] { display: none !important; }
.source-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.source-option { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.source-option strong { font-size: 14px; }
.source-option span { font-size: 11px; color: var(--muted); }
.source-option.active { border-color: var(--accent); background: rgba(23,90,203,0.1); box-shadow: 0 0 0 1px var(--accent); }
.source-option .ui-icon { color: var(--accent); }
.source-panel { margin-bottom: 20px; }
.source-hint { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin: 12px 0; }
#add-url { width: 100%; border: 1px solid #ced9df; border-radius: 8px; min-height: 46px; padding: 12px; margin-top: 8px; }
.addDocuments .scannerActions { flex-wrap: wrap; gap: 10px; }
.attachment-name, .saved-url { overflow-wrap: anywhere; }
.attachment-name { display: block; font-size: 12px; }
.attachment-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.remove-attachment { color: #a44842; }
.file-format { display: flex; align-items: center; justify-content: center; min-height: 120px; background: #edf3f5; color: #426779; font-weight: 700; letter-spacing: 1px; }
.lightbox .document-view-content { width: min(94vw,1000px); max-width: 94vw; max-height: 90dvh; overflow-y: auto; }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.viewer-header h2 { overflow-wrap: anywhere; min-width: 0; }
.viewer-header button { flex-shrink: 0; }
.document-view-content > .images { padding: 22px; }
.viewer-attachment + .viewer-attachment { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.viewer-attachment h3 { overflow-wrap: anywhere; margin-bottom: 12px; }
.viewer-attachment .image { margin-top: 18px; }
.pdf-preview { display: block; width: 100%; height: 65vh; border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; background: #f4f6f8; }
.document-note { white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--line); margin: 22px 0 0; padding-top: 18px; }
@media(max-width:520px) {
  .source-options { gap: 8px; }
  .source-option { padding: 12px 8px; }
  .source-option strong { font-size: 12px; }
  .source-option span { font-size: 10px; }
  .viewer-header, .document-view-content > .images { padding: 16px; }
  .viewer-header h2 { font-size: 16px; }
}

.profileField + .profileField { margin-top: 18px; }
.profileField label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.profileField input { width: 100%; min-height: 46px; padding: 12px; border: 1px solid #ced9df; border-radius: 8px; background: #fcfdfd; }
.profileField p { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 760px) { .profileField input { font-size: 16px; } }

/* Two-level taxonomy: solid area accents, configurable translucent topic tiles. */
.classification-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.classification-section h2 { font-size: 18px; letter-spacing: -.3px; }
.taxonomy-heading { margin: 20px 0 12px; font-size: 14px; font-weight: 600; }
.taxonomy-search, .archive-toolbar input { width: 100%; border: 1px solid #ced9df; border-radius: 8px; padding: 12px 14px; min-height: 44px; background: #fff; font-size: 13px; }
.taxonomy-search { margin-bottom: 16px; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 12px; }
.taxonomy-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 138px; text-align: left; padding: 18px; border: 1px solid rgba(var(--area-rgb),.24); border-top: 3px solid var(--area-color); border-radius: 10px; background: rgba(var(--area-rgb),var(--topic-opacity)); color: var(--ink); transition: box-shadow .15s, border-color .15s; }
.taxonomy-card:hover { border-color: var(--area-color); box-shadow: 0 3px 10px #152b3c0c; }
.taxonomy-card:focus-visible { outline-color: var(--area-color); }
.taxonomy-card.selected { box-shadow: 0 0 0 2px var(--area-color); }
.taxonomy-card.selected::after { content: '✓'; position: absolute; right: 12px; top: 9px; color: var(--area-color); font-weight: 700; }
.taxonomy-card strong { font-size: 13px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.taxonomy-card-note { font-size: 11px; color: #455662; line-height: 1.6; overflow-wrap: anywhere; }
.taxonomy-symbol { width: 25px; height: 25px; display: block; background: var(--area-color); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.taxonomy-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 16px 18px; border: 1px solid rgba(var(--area-rgb),.3); border-left: 4px solid var(--area-color); background: rgba(var(--area-rgb),.07); border-radius: 10px; }
.selection-label { display: flex; flex-direction: column; flex: 1; min-width: 140px; gap: 3px; }
.selection-label strong { font-size: 14px; font-weight: 600; }
.selection-label span { font-size: 12px; color: #455662; }
.taxonomy-empty { text-align: center; padding: 24px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; }
.classification-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.classification-field { min-width: 0; }
.classification-field label, .filter-field { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.classification-field select, .classification-field input, .filter-field select { display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 11px 12px; min-height: 44px; border: 1px solid #ced9df; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 400; }
.classification-field input { background: #f7faf9; border-color: #adc7be; }
.document-extra-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.document-extra-fields .inputTitle { display: block; }
.archive-taxonomy { padding: 24px; }
.archive-taxonomy .taxonomy-heading { margin-top: 0; }
.archive-taxonomy .taxonomy-selection:not([hidden]) + .taxonomy-heading { margin-top: 20px; }
.archive-toolbar { display: flex; align-items: flex-end; gap: 20px; margin: 26px 0 16px; }
.archive-toolbar label { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.archive-toolbar input { display: block; margin-top: 8px; font-weight: 400; }
.archive-toolbar button { flex-shrink: 0; min-height: 44px; }
#document-filter-panel { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 16px; }
#document-filter-panel summary { cursor: pointer; font-size: 13px; font-weight: 500; }
#document-tag-filters { grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
.classified-document { --area-color: #687887; --area-rgb: 104,120,135; --topic-opacity: .08; width: 100%; display: flex; align-items: center; text-align: left; gap: 16px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--area-color); border-radius: 10px; padding: 18px; margin-bottom: 12px; }
.classified-document:hover { border-color: var(--area-color); }
.document-format { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; height: 44px; border-radius: 8px; background: rgba(var(--area-rgb),var(--topic-opacity)); color: var(--ink); font-size: 9px; font-weight: 600; }
.classified-document-info { flex: 1; min-width: 0; }
.classified-document-info > strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.document-path { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.classified-document-date { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.document-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.document-tag-chips:empty { display: none; }
.document-tag-chips > span { padding: 3px 8px; background: rgba(var(--area-rgb),.08); border: 1px solid rgba(var(--area-rgb),.15); border-radius: 6px; font-size: 10px; overflow-wrap: anywhere; }
.document-metadata { padding: 16px; margin-bottom: 22px; background: rgba(var(--area-rgb,104,120,135),.06); border: 1px solid var(--line); border-radius: 10px; }
.document-location { margin: 0; font-size: 13px; font-weight: 600; }
.metadata-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 16px 0 0; }
.metadata-grid dt { font-size: 11px; color: var(--muted); }
.metadata-grid dd { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
@media(max-width:760px) {
  .taxonomy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .taxonomy-card { min-height: 130px; padding: 13px; }
  .taxonomy-card strong { font-size: 12px; }
  .taxonomy-card-note { font-size: 10px; }
  .taxonomy-symbol { width: 22px; height: 22px; }
  .taxonomy-selection { padding: 14px; gap: 6px 12px; }
  .selection-label { flex-basis: 100%; }
  .classification-section h2 { font-size: 16px; }
  .classification-fields { gap: 16px; grid-template-columns: 1fr; }
  .classification-field select, .classification-field input, .filter-field select, .taxonomy-search, .archive-toolbar input { font-size: 16px; }
  .archive-taxonomy { padding: 16px; }
  .archive-toolbar { gap: 12px; }
  .classified-document { gap: 10px; padding: 14px; flex-wrap: wrap; }
  .classified-document-date { flex-basis: 100%; padding-left: 54px; }
  .metadata-grid { grid-template-columns: 1fr; }
}

/* Apply the top safe area once, outside every page. Native wrappers can supply
   --native-top-inset in CSS pixels; set it to 0px if the WebView is already inset. */
:root {
  --app-safe-top: var(--native-top-inset, env(safe-area-inset-top, 0px));
}
body { padding-top: var(--app-safe-top); }
.auth-layout {
  min-height: calc(100vh - var(--app-safe-top));
  min-height: calc(100dvh - var(--app-safe-top));
}
@media (min-width: 761px) {
  .sidebar { top: var(--app-safe-top); }
}
/* The page wrapper owns the inset; login only adds its normal visual spacing. */
@media (max-width: 760px) {
  .auth-story { padding-top: 22px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .auth-story { padding-top: 14px; }
}
.lightbox .lightboxContent {
  top: calc(50% + var(--app-safe-top) / 2);
  max-height: min(80%, calc(100dvh - var(--app-safe-top) - 32px));
}
.lightbox .document-view-content {
  max-height: min(90dvh, calc(100dvh - var(--app-safe-top) - 32px));
}
.skip-link:focus { top: calc(15px + var(--app-safe-top)); }