@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

    :root {
      --bg: #0e1117;
      --surface: #161b27;
      --card: #1c2333;
      --border: #2a3348;
      --accent: #f5a623;
      --accent2: #00d4ff;
      --success: #2ecc71;
      --danger: #e74c3c;
      --warn: #f39c12;
      --purple: #8b5cf6;
      --text: #d0d8f0;
      --muted: #5a6480;
      --mono: 'IBM Plex Mono', monospace;
      --sans: 'IBM Plex Sans', sans-serif;
    }

    body.light {
      --bg: #f4f6fb;
      --surface: #ffffff;
      --card: #eef1f8;
      --border: #d0d8e8;
      --text: #1a2340;
      --muted: #7a8aaa;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 14px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .logo-text {
      font-family: var(--mono);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .5px;
    }

    .logo-sub {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--mono);
      margin-top: 1px;
    }

    .hbadges {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .badge {
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 11px;
      font-family: var(--sans);
      font-weight: 600;
    }

    .bo {
      background: rgba(245, 166, 35, .15);
      color: var(--accent);
      border: 1px solid rgba(245, 166, 35, .3);
    }

    .bb {
      background: rgba(0, 212, 255, .12);
      color: var(--accent2);
      border: 1px solid rgba(0, 212, 255, .25);
    }

    .bg {
      background: rgba(46, 204, 113, .12);
      color: var(--success);
      border: 1px solid rgba(46, 204, 113, .3);
    }

    .bp {
      background: rgba(139, 92, 246, .12);
      color: var(--purple);
      border: 1px solid rgba(139, 92, 246, .3);
    }

    /* ── MAIN LAYOUT ── */
    .shell {
      display: flex;
      flex-direction: row-reverse;
      flex: 1;
      height: calc(100vh - 56px);
      overflow: hidden;
    }

    .sidebar {
      width: 224px;
      flex-shrink: 0;
      background: var(--surface);
      border-left: none;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      padding: 16px 0;
      overflow-y: auto;
    }
    
    html[dir="rtl"] .sidebar {
      border-right: none;
      border-left: 1px solid var(--border);
    }

    .nav-section {
      padding: 0 8px 16px;
    }

    .nav-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--muted);
      padding: 0 8px 6px;
      font-weight: 600;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 7px;
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      transition: all .15s;
      margin-bottom: 2px;
      user-select: none;
      text-decoration: none;
    }

    .nav-item:hover {
      background: var(--card);
      color: var(--text);
    }

    .nav-item.active {
      background: rgba(245, 166, 35, .12);
      color: var(--accent);
      font-weight: 500;
    }

    .nav-item .icon {
      font-size: 15px;
      width: 20px;
      text-align: center;
    }

    .nav-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 8px 16px;
    }

    .main {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .panel {
      display: none;
      flex-direction: column;
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }

    .panel.active {
      display: flex;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }

    .card-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .card-title {
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-body {
      padding: 18px;
    }

    .sdot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 6px;
    }

    .dot-ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
    .dot-warn { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
    .dot-idle { background: var(--muted); }

    /* ── DROP ZONE ── */
    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: 10px;
      padding: 40px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
      position: relative;
    }

    .drop-zone:hover,
    .drop-zone.drag-over {
      border-color: var(--accent);
      background: rgba(245, 166, 35, .05);
    }

    .drop-zone input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    .drop-icon { font-size: 32px; margin-bottom: 12px; display: block; filter: grayscale(0.3); }
    .drop-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
    .drop-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }

    .file-info {
      display: none;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text);
      margin-top: 12px;
    }
    .file-info .fn { color: var(--accent); font-weight: 600; }
    .file-info .meta { color: var(--muted); margin-top: 4px; }

    /* ── BUTTONS ── */
    .btn {
      padding: 8px 16px;
      border-radius: 7px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      font-family: var(--sans);
      transition: all .15s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-primary {
      background: var(--accent);
      color: #111;
      width: 100%;
      justify-content: center;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      margin-top: 10px;
    }

    .btn-primary:hover:not(:disabled) { background: #f0b43a; }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

    .btn-secondary {
      background: var(--border);
      color: var(--text);
      width: 100%;
      justify-content: center;
      padding: 10px;
      font-size: 13px;
      margin-top: 8px;
    }

    .btn-secondary:hover:not(:disabled) {
      background: #3a4560;
    }

    .btn-sm {
      padding: 5px 10px;
      font-size: 12px;
    }

    /* ── FORM FIELDS ── */
    .fc {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      padding: 8px 10px;
      font-size: 13px;
      font-family: var(--sans);
      transition: border-color .15s;
      width: 100%;
    }

    .fc:focus {
      outline: none;
      border-color: var(--accent);
    }

    .fg-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .fg-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--muted);
    }

    .coord-prefix-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .axis-y { color: var(--accent); }
    .axis-x { color: var(--accent2); }

    /* ── HINT ── */
    .hint {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.6;
      padding: 10px 14px;
      background: var(--bg);
      border-radius: 6px;
      border-right: 3px solid rgba(245,166,35,.4);
    }
    .hint strong { color: var(--accent); }

    /* ── PROGRESS ── */
    #progress-section { display: none; margin-top: 14px; }
    .progress-bar-wrap {
      background: var(--bg);
      border-radius: 4px;
      height: 5px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 4px;
      transition: width 0.4s ease;
      width: 0%;
    }
    .progress-text {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
    }

    /* ── LOG ── */
    .log-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px 12px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      max-height: 200px;
      overflow-y: auto;
      margin-top: 10px;
      display: none;
    }
    .log-box .log-line {
      padding: 1px 0;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .log-line.ok { color: var(--success); }
    .log-line.warn { color: var(--accent); }
    .log-line.err { color: var(--danger); }
    .log-line.info { color: var(--accent2); }

    .results-top {
      display: none;
    }

    .count-badge {
      font-family: var(--mono);
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 100px;
      background: rgba(46,204,113,0.12);
      border: 1px solid rgba(46,204,113,0.3);
      color: var(--success);
    }
    .export-btns { display: flex; gap: 8px; }
    .btn-export {
      padding: 6px 14px;
      border-radius: 6px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid;
      transition: all 0.2s;
      letter-spacing: 0.06em;
      background: transparent;
    }
    .btn-export.txt { border-color: rgba(245,166,35,.3); color: var(--accent); }
    .btn-export.csv { border-color: rgba(0,212,255,.25); color: var(--accent2); }
    .btn-export.xlsx { border-color: rgba(46,204,113,.3); color: var(--success); }
    .btn-export:hover { filter: brightness(1.3); }
    .btn-export:disabled { opacity: 0.3; cursor: not-allowed; }

    .tbl-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--mono);
      font-size: 12px;
    }
    th {
      background: var(--surface);
      padding: 9px 12px;
      text-align: right;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted);
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    th.num { text-align: center; }
    th.coord { color: var(--accent2); }
    th.coord.y { color: var(--accent); }
    td {
      padding: 7px 10px;
      border-bottom: 1px solid rgba(42, 51, 72, .5);
      color: var(--text);
      vertical-align: middle;
      text-align: right;
    }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: rgba(255, 255, 255, .02); }
    tbody tr.page-group-start td { border-top: 2px solid var(--border); }

    td.pt-num { color: var(--accent); font-weight: 600; text-align: center; }
    td.coord-val { font-weight: 600; letter-spacing: 0.02em; }
    td.coord-x { color: var(--accent2); }
    td.coord-y { color: var(--accent); }
    td.page-tag { color: var(--muted); font-size: 10px; text-align: center; }
    td.raw-val { color: var(--muted); font-size: 10px; }

    /* ── EMPTY STATE ── */
    .empty-state {
      text-align: center;
      padding: 60px 40px;
      color: var(--muted);
    }
    .empty-icon { font-size: 40px; margin-bottom: 16px; display: block; opacity: 0.4; }
    .empty-state p { font-size: 13px; line-height: 1.7; }

    /* ── DIVIDER ── */
    .divider { height: 1px; background: var(--border); margin: 14px 0; }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }