:root {
    --bg: #ffffff;
    --text: #6A6868;
    --line: #d9d9d9;
    --bg-surface: #ffffff;
    --bg-surface-alt: #fafafa;
    --bg-surface-input: #ffffff;
    --bg-surface-hover: #e6e6e6;
    --bg-content: rgba(255, 255, 255, 0.5);
    --text-heading: #202020;
    --text-sub: #3B3A3A;
    --text-mid: #555757;
    --text-note: #444444;
    --text-muted: #999;
    --text-code: #555;
    --bg-code: #f0f0f0;
    --bg-pre: #f6f6f6;
    --shadow-nav: 0px 3px 4px #DBDBDB;
    --field-bg: #000000;
    --field-text: #F7F5F5;
    --node-active-bg: #ffffff;
    --node-active-text: black;
    --receipt-selected-bg: #f0fafa;
    --toolbar-bg: #f9f9f9;
}

[data-theme="dark"] {
    --bg: #000000;
    --text: #a8a6a6;
    --line: #3a3a3e;
    --bg-surface: #222226;
    --bg-surface-alt: #1e1e22;
    --bg-surface-input: #2a2a2e;
    --bg-surface-hover: #3a3a3e;
    --bg-content: rgba(26, 26, 30, 0.85);
    --text-heading: #e0dede;
    --text-sub: #F2F2F2;
    --text-mid: #b0aeae;
    --text-note: #b5b5b5;
    --text-muted: #777;
    --text-code: #b0aeae;
    --bg-code: #2e2e32;
    --bg-pre: #252528;
    --shadow-nav: 0px 3px 4px rgba(0, 0, 0, 0.4);
    --field-bg: #0e0e10;
    --field-text: #e8e6e6;
    --node-active-bg: #2e2e32;
    --node-active-text: #e0dede;
    --receipt-selected-bg: #1a3030;
    --toolbar-bg: #252528;
}

/* Links */
a:link {
    color: var(--text-mid);
    text-decoration: underline;
}

/* visited link */
a:visited {
    color: var(--text-mid);
}

/* mouse over link */
a:hover {
    color: #027A7A;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: #F54927;
}

input[type=‘text’]:focus {
    outline: 0;
}

/* ── Button & input responsiveness ── */

button,
input,
select,
textarea {
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--line);
}

button {
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--text);
    transition: all 0.2s ease;
}

button:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    button,
    input,
    select,
    textarea {
        font-size: 14px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {

    button,
    input,
    select,
    textarea {
        font-size: 14px;
        padding: 8px 12px;
        min-height: 44px;
        min-width: 44px;
    }
}


/* page */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 768px) {
    body {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}


/* TOGGLE */

.toggle {
  border-radius: 15px;
  border: 1px solid var(--line);
  padding: 5px;
  color: #555757;
  cursor: pointer;
  display: table;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 768px) {
    .toggle {
        border-radius: 10px;
    }

    .toggle img {
        width: 40px !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .toggle img {
        width: 40px !important;
        height: auto !important;
    }
}

/* Backgrounds */
.bg-geometry {
    position: fixed;
    inset: 0;
    background: url("./images/spiragraph.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.bg-yantra {
    position: fixed;
    inset: 0;
    background: url("./images/torus-yantra.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.11;
    pointer-events: none;
    z-index: 0;
}

.bg-torus {
    position: fixed;
    inset: 0;
    background: url("./images/torus.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.bg-morph {
    position: fixed;
    inset: 0;
    background: url("./images/morph.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}

.bg-wave_2 {
    position: fixed;
    inset: 0;
    background: url("./images/wave_2.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.bg-shapes {
    position: fixed;
    inset: 0;
    background: url("./images/shapes.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.bg-draw {
    position: fixed;
    inset: 0;
    background: url("./images/draw.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}

.bg-api {
    position: fixed;
    inset: 0;
    background: url("./images/api.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.bg-cube {
    position: fixed;
    inset: 0;
    background: url("./images/cube.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.bg-matrix {
    position: fixed;
    inset: 0;
    background: url("./images/matrix.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.bg-FoL {
    position: fixed;
    inset: 0;
    background: url("./images/FoL.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Dark theme background image swaps */
[data-theme="dark"] .bg-geometry {
    background-image: url("./images/spiragraph_bk.jpg");
    opacity: 0.23;
}

[data-theme="dark"] .bg-yantra {
    background-image: url("./images/torus-yantra_bk.jpg");
    opacity: 0.18;
}

[data-theme="dark"] .bg-torus {
    background-image: url("./images/torus_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-morph {
    background-image: url("./images/morph_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-wave_2 {
    background-image: url("./images/wave_2_bk.jpg");
    opacity: 0.25;
}

[data-theme="dark"] .bg-shapes {
    background-image: url("./images/shapes_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-draw {
    background-image: url("./images/draw_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-api {
    background-image: url("./images/api_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-cube {
    background-image: url("./images/cube_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-matrix {
    background-image: url("./images/matrix_bk.jpg");
    opacity: 0.20;
}

[data-theme="dark"] .bg-FoL {
    background-image: url("./images/FoL_bk.jpg");
    opacity: 0.20;
}

/* Dark theme logo swap */
[data-theme="dark"] .logo {
  filter: invert(1) brightness(1.05);
  -webkit-filter: invert(1) brightness(1.05);
}

[data-theme="dark"] .toggle img {
  filter: invert(1) brightness(1.1);
  -webkit-filter: invert(1) brightness(1.1);
}

/* Page container */
.page {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 0px 0px;
    z-index: 1;
}

@media (max-width: 1100px) {
    .page {
        padding: 0 16px;
    }
}

@media (max-width: 768px) {
    .page {
        padding: 0 12px;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 0 8px;
    }
}

/* navigation */
.nav {
  border-radius: 25px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
  padding: 5px 5px;
  font-size: 14px;
  line-height: 1;
  vertical-align: baseline;
  background-color: var(--bg-surface);
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 768px) {
    .nav {
        border-radius: 15px;
        padding: 4px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .nav {
        border-radius: 10px;
        padding: 2px;
        font-size: 10px;
    }

    .nav td {
        padding: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav a {
        white-space: nowrap;
    }
}

.dropdown {
    position: relative;
}

.dropbtn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-mid);
  cursor: pointer;
  line-height: 1.2;
  vertical-align: middle;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  min-height: 20px;
}

@media (max-width: 480px) {
    .dropbtn {
        font-size: 10px;
        padding: 2px 4px;
    }
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-surface);
  min-width: 160px;
  z-index: 1000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid var(--line);
  top: 100%;
  left: 0;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}

.dropdown-content div {
  padding: 10px 10px;
  cursor: pointer;
  font-size: 13px;
}

.dropdown-content div:hover {
  background-color: var(--bg-surface-hover);
}

.dropdown-content div a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dropdown-content div a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .dropdown-content {
    min-width: 140px;
    font-size: 12px;
  }

  .dropdown-content div {
    padding: 8px 8px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .dropdown-content {
    min-width: 120px;
    position: fixed;
    left: auto;
    top: auto;
  }

  .dropdown-content div {
    padding: 8px 6px;
    font-size: 11px;
  }
}

/* Header */
.header {
    text-align: left;
    margin-bottom: 25px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.logo {
    display: block;
    margin: 0 auto 12px auto;
}

/* Form */
.box {
    border: 1px solid #787777;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
}

.textarea {
    width: 100%;
    min-height: 120px;
}

.button {
    margin-top: 10px;
    padding: 10px 10px;
    font-size: 14px;
    cursor: pointer;
}

.pre {
    background: var(--bg-pre);
    padding: 12px;
    overflow-x: auto;
    font-size: 14px;
}

.note {
    font-size: 14px;
    color: var(--text-note);
}

/* Text */

.strap {
    margin: 0;
    font-size: 17px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: #DBDBDB;
    color: var(--text-sub);
/*    color: var(--text-heading); */
}

.subtitle {
    margin: 0;
    font-size: 16px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--text-sub);
}

th,
td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Tables */

.table {
  border-radius: 25px;
  border-left: 0px solid var(--line);
  border-right: 0px solid var(--line);
  border-top: 0px solid var(--line);
  border-bottom: 0px solid var(--line);
  padding: 15px 15px;
  width: 100%;
  table-layout: auto;
  word-break: break-word;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table_white {
  background-color: var(--bg-surface);
  border-radius: 25px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 15px 15px;
  width: 100%;
  table-layout: auto;
  word-break: break-word;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 768px) {

    .table,
    .table_white {
        padding: 10px 10px;
        border-radius: 15px;
    }

    .table td,
    .table_white td {
        padding: 6px 4px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    .table,
    .table_white {
        padding: 8px 6px;
        border-radius: 10px;
    }

    .table td,
    .table_white td {
        padding: 4px 2px;
        font-size: 11px;
        word-break: break-word;
    }
}

.table_api {
  border-radius: 25px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 15px 15px;
  background: url("./images/api.jpg") center center no-repeat;
  background-size: contain;
  opacity: 0.2;
  border-collapse: separate;
  border-spacing: 0;
}

[data-theme="dark"] .table_api {
    background-image: url("./images/api_bk.jpg");
}

.field {
  background-color: var(--field-bg);
  border-radius: 25px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 15px 15px 15px 15px;
  font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
  color: var(--field-text);
  word-break: break-word;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
}

@media (max-width: 768px) {
    .field {
        padding: 10px 10px 10px 10px;
        border-radius: 15px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .field {
        padding: 10px 10px 10px 10px;
        border-radius: 10px;
        font-size: 11px;
    }
}

.api_field {
    border-radius: 25px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 15px 15px 15px 15px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--field-text);
    background: url("./images/api.jpg") center center no-repeat;
    background-size: contain;
    opacity: 0.1;
}

[data-theme="dark"] .api_field {
    background-image: url("./images/api_bk.jpg");
}

/* API Pipeline */

.pipeline {
  background-color: #000000;
  border-radius: 25px;
  border: 1px solid #787777;
  padding: 15px;
  margin: 10px 0;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 5px;
  gap: 5px;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
}

.node {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pipeline {
    gap: 3px;
    row-gap: 3px;
    padding: 8px;
  }

  .node {
    padding: 3px 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .pipeline {
    gap: 2px;
    row-gap: 2px;
    padding: 6px;
    justify-content: flex-start;
    margin: 8px 0;
  }

  .node {
    padding: 2px 4px;
    font-size: 10px;
  }

  .node code {
    font-size: 9px;
  }
}

.node.active {
    background: var(--node-active-bg);
    color: var(--node-active-text);
    font-size: 12px;
    white-space: preserve nowrap;
    white-space: nowrap;
    /* prevent internal text wrap */
}

.node.option {
    background: #969696;
    color: #000;
    font-size: 12px;
    white-space: preserve nowrap;
    white-space: nowrap;
    /* prevent internal text wrap */
}

.node.demo {
    background: #EBD8EB;
    color: #000;
    font-size: 12px;
    white-space: preserve nowrap;
    white-space: nowrap;
    /* prevent internal text wrap */
}

.node.extra {
    background: #969696;
    color: #fff;
    font-size: 12px;
    white-space: preserve nowrap;
    white-space: nowrap;
    /* prevent internal text wrap */
}

.node.muted {
    background: #cccccc;
    color: #888;
    font-size: 12px;
    white-space: preserve nowrap;
    white-space: nowrap;
    /* prevent internal text wrap */
}

.arrow {
  margin: 0 6px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .arrow {
    margin: 0 3px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .arrow {
    margin: 0 1px;
    font-size: 10px;
  }
}

.content {
  background: var(--bg-content);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 25px 25px;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .content {
    padding: 15px 15px;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 10px 10px;
    border-left: none;
    border-right: none;
  }
}

.content p {
  margin: 0 0 15px 0;
}

#textInput {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-heading);
    background: var(--bg-surface-input);
    line-height: 1.4;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
}

/* Buttons */

button.request_key {
    background: var(--bg-content);
    border-radius: 25px;
    border: 1px solid var(--line);
    padding: 20px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--text-mid);
    font-size: 14px;
    cursor: pointer;
}

button.email_button {
    background: var(--bg-content);
    border-radius: 5px;
    border: 1px solid var(--line);
    padding: 7px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--text-mid);
    font-size: 14px;
    cursor: pointer;
}

button.form_button {
    background: var(--bg-content);
    border-radius: 15px;
    border: 1px solid var(--line);
    padding: 10px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--text-mid);
    font-size: 14px;
    cursor: pointer;
}

.form_upload {
    background: var(--bg-content);
    border-radius: 15px;
    border: 1px solid var(--line);
    padding: 10px;
    font-family: "Liberation Sans", Tahoma, Verdana, sans-serif;
    color: var(--text-mid);
    font-size: 14px;
    cursor: pointer;
}

/* Status block */

.status {
    margin: 20px 0 10px 0;
    font-size: 14px;
}

.status .pending {
    margin-top: 20px;
}

/* Motto */

.motto {
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    font-family: "Poiret One", "Trajan Pro", serif;
    font-size: 16px;
    letter-spacing: 1.4px;
    color: #787777;
    white-space: nowrap;
}

/* Footer */

.footer {
    margin-top: 0px;
    text-align: right;
    font-size: 12px;
    color: #b5b5b5;
}

/* ── Ledger-specific styles ── */

.ledger-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--toolbar-bg);
    margin-bottom: 12px;
}

.ledger-toolbar label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 2px;
}

.ledger-toolbar select,
.ledger-toolbar input[type="text"] {
    font-family: inherit;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-surface-input);
    color: var(--text);
}

.ledger-toolbar select:focus,
.ledger-toolbar input[type="text"]:focus {
    outline: none;
    border-color: #027A7A;
}

.toolbar-btn {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-surface-input);
    color: var(--text);
    cursor: pointer;
}

.toolbar-btn:hover {
    border-color: #027A7A;
    color: #026161;
}

.toolbar-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--line);
    margin: 0 4px;
}

/* ── Main layout: sidebar + columns ── */

.ledger-workspace {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    min-height: 520px;
    background: var(--bg-surface);
}

/* ── Sidebar ── */

.ledger-sidebar {
    width: 220px;
    min-width: 180px;
    border-right: 1px solid var(--line);
    padding: 14px 12px;
    font-size: 13px;
    overflow-y: auto;
    background: var(--bg-surface-alt);
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: 15px;
}

.sidebar-section h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.sidebar-val {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: var(--text-heading);
    word-break: break-all;
}

.sidebar-val code {
    font-size: 12px;
    background: var(--bg-code);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ── Column container ── */

.ledger-columns {
    display: flex;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.ledger-column {
    min-width: 260px;
    max-width: 320px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    padding: 10px;
    flex-shrink: 0;
    position: relative;
}

.ledger-column:last-child {
    border-right: none;
}

.col-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

/* ── Resize handle between columns ── */

.col-resize {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
}

.col-resize:hover {
    background: var(--line);
}

/* ── Receipt card ── */

.receipt-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}

.receipt-card:hover {
    border-color: #027A7A;
}

.receipt-card.selected {
    border-color: #027A7A;
    background: var(--receipt-selected-bg);
}

.receipt-card.greyed {
    opacity: 0.45;
}

.receipt-card.fork-origin {
    border-left: 3px solid #027A7A;
}

.receipt-id {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-code);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.receipt-type-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-code);
    color: var(--text-code);
    margin-right: 4px;
}

.receipt-type-badge.fork {
    background: #e3f2fd;
    color: #1565c0;
}

.receipt-type-badge.compare {
    background: #fce4ec;
    color: #c62828;
}

.receipt-type-badge.coherence_eval {
    background: #f3e5f5;
    color: #6a1b9a;
}

/* Drift band dots */
.drift-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

.drift-dot.LOW {
    background: #4caf50;
}

.drift-dot.MODERATE {
    background: #ff9800;
}

.drift-dot.HIGH {
    background: #ff5722;
}

.drift-dot.EXTREME {
    background: #d32f2f;
}

/* ── Receipt detail drawer ── */

.receipt-drawer {
    display: none;
    margin-top: 6px;
    padding: 6px 8px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--text);
}

.receipt-drawer.open {
    display: block;
}

.drawer-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.drawer-label {
    color: var(--text-muted);
}

.drawer-val {
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
    max-width: 160px;
    text-align: right;
}

/* ── Preview panel (replaces sidebar when receipt selected) ── */

.preview-panel {
    display: none;
}

.preview-panel.visible {
    display: block;
}

/* ── Status / empty states ── */

.ledger-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-muted);
    font-size: 14px;
    padding: 40px;
    text-align: center;
}

.ledger-status {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    padding: 0 12px;
}

/* ── Error toast ── */

.ledger-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #c62828;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 100;
    display: none;
    max-width: 400px;
}

.ledger-toast.visible {
    display: block;
}

/* ── Responsive ── */

@media (max-width: 720px) {
    .ledger-workspace {
        flex-direction: column;
    }

    .ledger-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        max-height: 180px;
    }

    .ledger-column {
        min-width: 220px;
    }
}

/* ── Image responsiveness ── */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.logo {
    max-width: 100%;
    height: auto;
}

/* ── Table responsiveness ── */

table {
    width: 100%;
    border-collapse: collapse;
}

td,
th {
    word-break: break-word;
    padding: 4px;
}

/* ── Heading and text scales ── */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 1em 0 0.5em 0;
}

p {
    margin: 0.5em 0;
}

/* ── Content sections ── */
/* Note: .content is also defined above at line 797 with proper padding */

/* Header table specific styles */
.content > table:first-child {
  width: 100%;
}

.content > table:first-child td {
  vertical-align: middle;
}

.content > table:first-child td[align="left"] {
  text-align: left;
}

.content > table:first-child td[align="right"] {
  text-align: right;
  padding-right: 10px;
}

/* Logo alignment */
.content .logo {
  display: block;
  margin: 0;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .content .logo {
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .content .logo {
    max-width: 180px;
  }
}

.strap {
    font-size: 14px;
    margin: 12px 0;
    word-break: break-word;
}

.subtitle {
    font-size: 16px;
    margin: 16px 0 8px 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .page {
        padding: 16px 12px 12px;
    }

    .strap {
        font-size: 12px;
    }

    .subtitle {
        font-size: 14px;
        margin: 12px 0 6px 0;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    .motto {
        font-size: 12px;
        letter-spacing: 0.5px;
        white-space: normal;
    }

    td {
        padding: 3px;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 12px 8px 8px;
    }

    .logo {
        max-width: 200px !important;
    }

    .strap {
        font-size: 11px;
        margin: 8px 0;
    }

    .subtitle {
        font-size: 13px;
        margin: 10px 0 5px 0;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 14px;
    }

    p {
        font-size: 12px;
        margin: 8px 0;
    }

    .motto {
        font-size: 10px;
        letter-spacing: 0.2px;
        white-space: normal;
        word-break: break-word;
    }

    .footer {
        font-size: 10px;
        margin-top: 12px;
    }

    td {
        padding: 2px;
        font-size: 11px;
    }

    .nav td {
        padding: 2px 1px;
    }
}