/* ===== PDFowo — Dark Graphite, balanced contrast ===== */
  :root {
    --bg: #181a1e;
    --desk: #202328;
    --card: #262a30;
    --text: #f1f2f4;
    --muted: #a1a5ad;
    --accent: #d2d4d8;
    --accent-text: #17181b;
    --border: #3a3e45;
    --error: #c5c7cc;
    --ok: #c5c7cc;
    --red: #8d9097;
  }

  html {
    background: var(--bg);
    color-scheme: dark;
  }

  body {
    background:
      radial-gradient(900px 420px at 50% -12%, rgba(255,255,255,.055), transparent 62%),
      linear-gradient(180deg, #1b1d21 0%, #181a1e 55%, #16181b 100%);
    color: var(--text);
  }

  body::before {
    background:
      linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.18), transparent 74%);
  }

  .topbar {
    background: rgba(31,33,37,.94);
    border-bottom: 1px solid #353940;
    box-shadow: 0 6px 22px rgba(0,0,0,.16);
  }

  .brand {
    color: #f4f4f5;
  }

  .topbar .local {
    color: #a5a9b1;
  }

  .hero h1, .hero .xh1 {
    color: #f4f5f7;
    background: none;
    -webkit-text-fill-color: #f4f5f7;
  }

  .hero p,
  .toolhead p,
  .viewhead p {
    color: #a5a9b1;
  }

  .tiles {
    gap: 18px;
  }

  .tile {
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)), #24272c;
    border: 1px solid #393d44;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }

  .tile::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  }

  .tile:hover {
    transform: translateY(-2px);
    border-color: #50545c;
    background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.006)), #282b31;
    box-shadow: 0 18px 38px rgba(0,0,0,.23);
  }

  .tile .art {
    height: 168px;
    background:
      radial-gradient(circle at 50% 35%, rgba(255,255,255,.035), transparent 48%),
      #202328;
    border-bottom-color: #393d44;
  }

  .tile h2 {
    color: #eceef1;
  }

  .tile:hover h2,
  .tile .cta,
  a {
    color: #e1e2e5;
  }

  .tile p,
  .tile li,
  .facts p {
    color: #9da2aa;
  }

  .tile li::before {
    background: #9b9fa6;
    box-shadow: none;
    opacity: 1;
  }

  .facts {
    border-top-color: #383c43;
  }

  .facts h3 {
    color: #eceef0;
  }

  .footer {
    background: #1d1f23;
    border-top-color: #34383f;
  }

  .footer .in {
    color: #92969f;
  }

  .card,
  .viewhead .vi {
    background: #26292f;
    border-color: #3a3e45;
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
  }

  input[type=text],
  input[type=number],
  .toolbar input[type=number] {
    background: #1d2024;
    color: #eceef1;
    border-color: #3c4047;
  }

  input[type=text]::placeholder,
  input[type=number]::placeholder {
    color: #777c85;
  }

  input[type=text]:focus,
  input[type=number]:focus {
    border-color: #858990;
    box-shadow: 0 0 0 3px rgba(255,255,255,.055);
  }

  .hint,
  .row .count,
  .actionbar .count {
    color: #959aa2;
  }

  .back {
    color: #9da1a9;
  }

  .back:hover {
    color: #f0f1f3;
  }

  .toolhead h1,
  .viewhead h1, .toolhead .xh1, .viewhead .xh1 {
    color: #f0f1f3;
  }

  button:not(.ghost):not(.tool) {
    background: linear-gradient(180deg, #eeeeef 0%, #d5d6d9 100%);
    color: #17181b;
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
  }

  button:not(.ghost):not(.tool):hover:not(:disabled) {
    background: linear-gradient(180deg, #f6f6f7 0%, #dcdde0 100%);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }

  #mfiles .ghost { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #mfiles .ghost svg { width: 13px; height: 13px; }
  .ephead button[data-a="del"] { display: inline-flex; align-items: center; gap: 6px; }
  .ephead button[data-a="del"] svg { width: 14px; height: 14px; }

  button.ghost,
  .ephead button,
  .mt .del {
    background: #2a2d32;
    color: #cfd2d7;
    border-color: #41454c;
    box-shadow: none;
  }

  button.ghost:hover:not(:disabled),
  .ephead button:hover:not(:disabled) {
    background: #32353b;
    color: #f0f1f3;
    border-color: #555960;
  }

  .dz {
    background:
      radial-gradient(circle at 50% 22%, rgba(255,255,255,.04), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)),
      #22252a;
    border-color: #545860;
    box-shadow: 0 18px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.02);
  }

  .dz:hover {
    border-color: #777b83;
  }

  .dz.over {
    background:
      radial-gradient(circle at 50% 25%, rgba(255,255,255,.07), transparent 52%),
      #272a30;
    border-color: #c3c5c9;
    box-shadow: 0 20px 46px rgba(0,0,0,.28);
  }

  .dz-title,
  .dz-file {
    color: #ecedef;
  }

  .dz-link {
    color: #d8dade;
  }

  .dz-art .dz-disc {
    fill: #1b1e22;
  }

  .dz-art .dz-paper {
    fill: #2c3036;
    stroke: #b2b5bb;
  }

  .dz-art .dz-fold {
    stroke: #b2b5bb;
  }

  .dz-art .dz-line {
    fill: #777b82;
  }

  .dz-art .dz-badge {
    fill: #666a71;
  }

  .dz-check circle {
    fill: #aeb1b6;
  }

  #grid,
  #mgrid {
    gap: 16px;
  }

  .thumb,
  .mt {
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)), #24272c;
    border-color: #3a3e45;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
  }

  .thumb:hover,
  .mt:hover {
    border-color: #555960;
  }

  .thumb.sel,
  .mt.lifted {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)), #2a2d33;
    border-color: #777b82;
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
  }

  .thumb .badge,
  .mt .pos {
    background: #777b82;
    color: #fff;
  }

  .mt {
    border-bottom-color: var(--c) !important;
  }

  .mt:hover .grip svg {
    fill: #d2d4d8;
  }

  .actionbar {
    border-top-color: #373b42;
    background: rgba(24,26,30,.84);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .workspace .toolbar,
  .appbar {
    background: rgba(34,37,42,.96);
    border-color: #363a41;
  }

  #etools {
    border-color: #40444b;
    background: #272a2f;
  }

  #etools .tool {
    color: #aeb2b9;
    background: transparent;
    border-color: #3b3f46;
  }

  #etools .tool:hover {
    background: #303339;
    color: #f0f1f3;
  }

  #etools .tool[aria-pressed="true"] {
    background: #d9dade;
    color: #17181b;
  }

  .zoom {
    border-color: #40444b;
    background: #272a2f;
  }

  .zoom span {
    color: #c7c9ce;
  }

  #estage {
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 38%),
      #202328;
  }

  .ewrap {
    box-shadow: 0 12px 30px rgba(0,0,0,.34);
  }

  #emsg {
    background: #e1e2e4;
    color: #17181b;
    box-shadow: 0 10px 28px rgba(0,0,0,.32);
  }

  #emsg.error,
  #emsg.ok {
    background: #303339;
    color: #e7e8ea;
    border: 1px solid #50545b;
  }

  .chip {
    background: #22252a;
    border-color: #3b3f46;
    border-left-color: var(--c);
  }

  .chip small {
    color: #858a93;
  }

  /* Do NOT alter the existing PDFowo logo/image. */