:root {
  --ink: #072146;
  --muted: #526775;
  --green: #004481;
  --mint: #eaf9fa;
  --line: #cddde7;
  --orange: #1973b8;
}

body { background: #f4f7f8; }
header { background: rgba(255, 255, 255, .96); border-bottom-color: #cddde7; }
.brand strong { color: #072146; letter-spacing: .025em; }
.brand small { color: #526775; }
.mark {
  width: 50px;
  height: 38px;
  border-radius: 3px;
  background: linear-gradient(135deg, #004481, #1464a5);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
}
.privacy { color: #004481; background: #eaf9fa; }
.pulse { background: #2dcccd; box-shadow: 0 0 0 4px #d4f4f4; }
.primary {
  color: #fff;
  background: linear-gradient(135deg, #1464a5, #1973b8);
  box-shadow: 0 8px 22px rgba(25, 115, 184, .24);
}
.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #004481, #1464a5);
  transform: translateY(-1px);
}
.intro-actions {
  min-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-location {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #526775;
  font-size: 10px;
  font-weight: 800;
}
.upload-location select {
  height: 36px;
  border: 1px solid #8ab6d4;
  border-radius: 8px;
  background: #fff;
  color: #004481;
  padding: 6px 9px;
  font-size: 11px;
}
.paste-capture { color: #004481; }
.paste-capture kbd {
  margin-left: 8px;
  border: 1px solid #b9cbd6;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f4f7f8;
  padding: 2px 5px;
  color: #526775;
  font-size: 9px;
}
.ghost:hover:not(:disabled),
.toolbar button:hover:not(:disabled),
.panel-head button:hover:not(:disabled),
.page-actions button:hover:not(:disabled),
.organizer-toolbar button:hover:not(:disabled) {
  color: #004481;
  background: #eaf3f8;
  border-color: #1973b8;
}
.danger { color: #b92f2f; }
.danger:hover:not(:disabled) {
  color: #9b2020 !important;
  background: #fff4f4 !important;
  border-color: #e0a4a4 !important;
}
.eyebrow { color: #1464a5; }
h1 em { color: #004481; }
.status { background: #f4fbfc; border-color: #bfe5e7; }
.status span { color: #004481; border-right-color: #bfe5e7; }
.status p { color: #526775; }
.dropzone { background: rgba(255, 255, 255, .82); border-color: #8ab6d4; }
.dropzone:hover { background: #fff; border-color: #1973b8; }
.file-icon { background: linear-gradient(145deg, #004481, #1973b8); }
.workspace {
  border-color: #cddde7;
  box-shadow: 0 15px 50px rgba(7, 33, 70, .09);
}
.pages-panel,
.properties { background: #f6f9fb; }
.pages-sticky {
  background: linear-gradient(180deg, #f7fbfd 0%, rgba(247, 251, 253, .97) 100%);
  border-bottom-color: #cddde7;
  box-shadow: 0 5px 15px rgba(7, 33, 70, .05);
}
.panel-head small { color: #004481; font-weight: 900; }
.panel-head strong { color: #072146; }
.panel-head button,
.toolbar button { color: #004481; }
.panel-buttons .organize-open {
  color: #004481;
  background: #eaf3f8;
  border-color: #8ab6d4;
}
.page-card img { background: #edf3f6; }
.page-card.active {
  border-color: #1973b8;
  box-shadow: 0 5px 16px rgba(25, 115, 184, .22);
}
.page-card.drop-target {
  border-color: #2dcccd;
  box-shadow: 0 0 0 3px rgba(45, 204, 205, .20);
}
.page-number {
  background: #004481;
  box-shadow: 0 2px 7px rgba(7, 33, 70, .25);
}
.page-actions button { color: #004481; }
.editor { background: #dfeaf1; }
.editor-controls {
  background: #fff;
  border-top: 4px solid #004481;
  box-shadow: 0 4px 15px rgba(7, 33, 70, .1);
}
.toolbar b,
.resize-handle { background: #1973b8; }
.toolbar .tool-active {
  color: #004481;
  background: #dceefa;
  border-color: #1973b8;
  box-shadow: inset 0 0 0 1px rgba(25, 115, 184, .14);
}
.toolbar .cell-tool { color: #004481; border-color: #8ab6d4; }
.paper { box-shadow: 0 12px 40px rgba(7, 33, 70, .24); }
.paper > img,
.page-card img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.placement-selection {
  background: rgba(25, 115, 184, .08);
  border-color: #1973b8;
}
.detected-box {
  background: rgba(25, 115, 184, .08);
  border-color: #1973b8;
}
.detected-box:hover,
.detected-box:focus-visible {
  background: rgba(45, 204, 205, .2);
  border-color: #004481;
}
.text-edit-wrapper {
  outline: 2px dashed transparent;
  outline-offset: 2px;
}
.text-edit-wrapper:focus-within {
  outline-color: #1973b8;
}
.text-properties-bar {
  background: #eef6fa;
  border-bottom-color: #b7cfde;
}
.text-properties-bar > strong { color: #004481; }
.text-properties-bar input:focus,
.text-properties-bar select:focus,
.edit-box input:focus,
.form-group input:focus,
.filename-field input:focus {
  border-color: #1973b8;
  outline: 2px solid rgba(25, 115, 184, .18);
}
.properties h2,
.form-group > strong { color: #004481; }
.canvas-wrap .ocr-note {
  color: #526775;
  background: rgba(255, 255, 255, .68);
  border-left: 3px solid #2dcccd;
  padding: 8px 10px;
  text-align: left;
}
.organizer-overlay { background: #eef4f7; }
.organizer-topbar {
  color: #fff;
  background: linear-gradient(100deg, #072146 0%, #004481 68%, #1464a5 100%);
  border-bottom: 0;
  box-shadow: 0 5px 24px rgba(7, 33, 70, .24);
}
.organizer-topbar span,
.organizer-topbar p { color: #d9eef7; }
.organizer-toolbar button {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
}
.organizer-toolbar button:hover:not(:disabled) {
  color: #004481;
  background: #fff;
  border-color: #fff;
}
.organizer-toolbar .organizer-close {
  color: #072146;
  background: #2dcccd;
  border-color: #2dcccd;
}
.organizer-toolbar .organizer-close:hover:not(:disabled) {
  color: #072146;
  background: #6fdfe0;
  border-color: #6fdfe0;
}
footer {
  background: #072146;
  box-shadow: 0 -6px 22px rgba(7, 33, 70, .18);
}
footer strong { letter-spacing: .025em; }
footer small { color: #c7d8e2; }
.filename-field input { border-color: #7893a4; }
.download {
  color: #072146;
  background: linear-gradient(135deg, #2dcccd, #19aeb1);
}
.download:hover:not(:disabled) {
  color: #072146;
  background: linear-gradient(135deg, #6fdfe0, #2dcccd);
}
@media (max-width: 720px) {
  .intro-actions {
    min-width: 0;
    width: 100%;
    margin-top: 22px;
  }
  .intro-actions .upload { margin-top: 0; }
  .paste-capture { width: 100%; }
}
.import-helper {
  position: fixed;
  top: 84px;
  right: 18px;
  z-index: 40;
  width: min(310px, calc(100vw - 36px));
  padding: 13px;
  border: 1px solid #b7cfde;
  border-top: 4px solid #2dcccd;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 28px rgba(7, 33, 70, .18);
  color: #072146;
}
.import-helper > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
}
.import-helper label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.import-helper label span {
  color: #526775;
  font-size: 9px;
  font-weight: 800;
}
.import-helper select {
  width: 100%;
  height: 34px;
  border: 1px solid #8ab6d4;
  border-radius: 7px;
  background: #fff;
  padding: 5px 7px;
  color: #004481;
  font-size: 10px;
}
.import-helper button {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  background: #1973b8;
  padding: 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.import-helper button:hover { background: #004481; }
.import-helper kbd {
  margin-left: 5px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 8px;
}
.import-helper-status {
  display: block;
  margin-top: 7px;
  color: #526775;
  font-size: 9px;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .import-helper {
    top: auto;
    right: 10px;
    bottom: 12px;
    width: min(330px, calc(100vw - 20px));
  }
}
header {
  height: 54px;
  padding: 0 2.5vw;
}
.mark {
  width: 42px;
  height: 32px;
  font-size: 10px;
}
.brand strong { font-size: 15px; }
.brand small {
  margin-top: 2px;
  font-size: 9px;
}
.privacy {
  padding: 6px 12px;
  font-size: 10px;
}
.ghost {
  padding: 7px 10px;
  font-size: 10px;
}
.editor-controls { top: 54px; }
footer {
  min-height: 66px;
  padding: 5px 2.5vw;
}
.footer-summary { gap: 2px; }
.footer-summary strong { font-size: 10px; }
.footer-summary small { font-size: 8px; }
.download-controls { gap: 9px; }
.filename-field {
  min-width: 230px;
  gap: 2px;
}
.filename-field > span { font-size: 8px; }
.filename-field input { height: 30px; }
.filename-field small { display: none; }
.download { padding: 10px 16px; }
.download span { font-size: 15px; }
main { padding-bottom: 78px; }
.import-helper { top: 66px; }
@media (max-width: 720px) {
  header { height: 50px; }
  .mark {
    width: 39px;
    height: 30px;
  }
  .editor-controls { top: 50px; }
  footer {
    min-height: 62px;
    padding: 5px 12px;
  }
  main { padding-bottom: 72px; }
}