/* Dareecha online tools (image, PDF and developer tools); uses the site's Sabz tokens */
.wt-nav { position: relative; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin: 6px 0 14px; scrollbar-width: thin; }
.wt-nav a { flex: none; border: 1px solid var(--g-line); border-radius: 999px; padding: 6px 13px; font-size: .86rem; font-weight: 600; color: var(--g-ink); text-decoration: none; background: var(--g-bg); white-space: nowrap; }
.wt-nav a:hover { border-color: var(--g-accent); }
.wt-nav a.is-on { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }
.wt-app { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin: 8px 0 28px; }
.wt-app.is-wide { grid-template-columns: minmax(0, 1fr); }
.wt-card { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 18px; padding: 18px 20px; margin-bottom: 16px; }
.wt-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; }
.wt-sticky { position: sticky; top: 90px; }
.wt-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 170px; padding: 22px; border: 2px dashed var(--g-line); border-radius: 16px; background: var(--g-surface); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.wt-drop:hover, .wt-drop.is-over { border-color: var(--g-accent); background: var(--g-accent-soft); }
.wt-drop:focus-within { outline: 3px solid #e9a23b; outline-offset: 2px; }
.wt-drop strong { font-size: 1.05rem; }
.wt-drop small { color: var(--g-ink-3); }
.wt-drop .wt-drop-btn { background: var(--g-accent); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; }
.wt-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.wt-drop.is-compact { min-height: 0; flex-direction: row; padding: 12px; }
.wt-field { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 600; margin-bottom: 12px; }
.wt-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .wt-field select, .wt-field textarea, .wt-input { font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg); color: var(--g-ink); width: 100%; }
.wt-field input[type=color] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg); }
.wt-field input[type=range] { accent-color: var(--g-accent); }
.wt-field small { font-weight: 400; color: var(--g-ink-3); }
.wt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wt-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wt-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin: 4px 0 10px; }
.wt-check input { accent-color: var(--g-accent); width: 18px; height: 18px; }
.wt-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wt-opt { border: 1px solid var(--g-line); background: var(--g-bg); color: var(--g-ink); border-radius: 10px; padding: 7px 11px; font-size: .84rem; cursor: pointer; }
.wt-opt.is-on { border-color: var(--g-accent); background: var(--g-accent-soft); color: var(--g-accent); font-weight: 700; }
.wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--g-line); background: var(--g-bg); color: var(--g-ink); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; }
.wt-btn:hover { border-color: var(--g-accent); }
.wt-btn:disabled { opacity: .5; cursor: not-allowed; }
.wt-btn-primary { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }
.wt-btn-primary:hover { color: #fff; filter: brightness(1.08); }
.wt-btn-block { width: 100%; padding: 12px; font-size: 1rem; }
.wt-btn-sm { padding: 5px 11px; font-size: .8rem; }
.wt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wt-status { font-size: .88rem; margin: 10px 0 0; min-height: 1.3em; }
.wt-status.is-error { color: #b4441b; font-weight: 600; }
.wt-status.is-good { color: #127a4b; font-weight: 600; }
.wt-note { font-size: .78rem; color: var(--g-ink-3); margin: 12px 0 0; }
.wt-hidden { display: none !important; }

/* File lists */
.wt-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.wt-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-bg); }
.wt-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--g-surface); display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: var(--g-ink-3); }
.wt-item-name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-item-meta { font-size: .8rem; color: var(--g-ink-3); }
.wt-item-meta .wt-good { color: #127a4b; font-weight: 700; }
.wt-item-meta .wt-bad { color: #b4441b; font-weight: 700; }
.wt-item-side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wt-item-range { width: 120px; font: inherit; font-size: .82rem; padding: 5px 8px; border: 1px solid var(--g-line); border-radius: 8px; background: var(--g-bg); color: var(--g-ink); }
.wt-icon-btn { border: 1px solid var(--g-line); background: var(--g-bg); color: var(--g-ink); border-radius: 8px; width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; font-size: .9rem; }
.wt-icon-btn:hover { border-color: var(--g-accent); }
.wt-meta-list { margin: 6px 0 0; padding: 0; list-style: none; font-size: .8rem; }
.wt-meta-list li { padding: 1px 0; }
.wt-meta-warn { color: #b4441b; font-weight: 700; }

/* Page grid (PDF) */
.wt-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 12px 0; }
.wt-page { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg); color: var(--g-ink); cursor: pointer; font-size: .8rem; font-weight: 700; }
.wt-page .wt-sheet { display: block; width: 30px; height: 40px; border: 2px solid currentColor; border-radius: 3px; opacity: .55; transition: transform .2s; position: relative; }
.wt-page .wt-sheet::after { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; }
.wt-page .wt-sheet.is-land { width: 40px; height: 30px; }
.wt-page.is-on { border-color: var(--g-accent); background: var(--g-accent-soft); color: var(--g-accent); }
.wt-page.is-del { border-color: #b4441b; color: #b4441b; text-decoration: line-through; opacity: .7; }
.wt-page small { font-weight: 500; font-size: .68rem; color: var(--g-ink-3); }

/* Image preview and cropper */
.wt-preview { display: grid; place-items: center; min-height: 180px; border-radius: 14px; background: repeating-conic-gradient(var(--g-surface) 0% 25%, var(--g-bg) 0% 50%) 50% / 18px 18px; padding: 10px; }
.wt-preview img { max-width: 100%; max-height: 360px; display: block; }
.wt-crop { position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; line-height: 0; }
.wt-crop img { max-width: 100%; max-height: 62vh; display: block; }
.wt-crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); outline: 1px solid rgba(0, 0, 0, .4); cursor: move; }
.wt-crop-box::before, .wt-crop-box::after { content: ""; position: absolute; inset: 33.33% 0; border-top: 1px solid rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .5); pointer-events: none; }
.wt-crop-box::after { inset: 0 33.33%; border: 0; border-left: 1px solid rgba(255, 255, 255, .5); border-right: 1px solid rgba(255, 255, 255, .5); }
.wt-crop-h { position: absolute; width: 18px; height: 18px; background: #fff; border: 2px solid var(--g-accent); border-radius: 50%; margin: -9px 0 0 -9px; z-index: 1; }
.wt-crop-wrap { text-align: center; background: var(--g-surface); border-radius: 14px; padding: 12px; overflow: hidden; }

/* Developer tools */
.wt-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .86rem; line-height: 1.5; }
textarea.wt-code { min-height: 220px; resize: vertical; white-space: pre; tab-size: 2; }
.wt-out { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; word-break: break-all; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 10px; padding: 12px; min-height: 48px; margin: 0; }
.wt-kv { width: 100%; border-collapse: collapse; font-size: .86rem; }
.wt-kv th, .wt-kv td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--g-line); vertical-align: top; }
.wt-kv th { width: 34%; font-weight: 700; color: var(--g-ink-2); }
.wt-kv td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.wt-copy { margin-left: 6px; }
.wt-hl { background: rgba(233, 162, 59, .45); border-radius: 3px; }
.wt-hl:nth-of-type(even) { background: rgba(11, 110, 79, .28); }
.wt-swatch { width: 100%; height: 90px; border-radius: 12px; border: 1px solid var(--g-line); margin-bottom: 12px; }
.wt-shades { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin: 8px 0 12px; }
.wt-shades button { height: 34px; border: 0; border-radius: 6px; cursor: pointer; }
.wt-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.wt-badge.is-pass { background: #d8f3e6; color: #0b5d3b; }
.wt-badge.is-fail { background: #fbe3d8; color: #8f3413; }

/* Converters and calculators */
.wt-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.wt-big { font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin: 6px 0; }
.wt-big small { font-size: 1rem; font-weight: 600; color: var(--g-ink-2); }
.wt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.wt-stat { border: 1px solid var(--g-line); border-radius: 12px; padding: 10px 12px; background: var(--g-surface); }
.wt-stat span { display: block; font-size: .78rem; color: var(--g-ink-3); }
.wt-stat strong { font-size: 1.15rem; }
.wt-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; margin: 10px 0; }
.wt-count div { border: 1px solid var(--g-line); border-radius: 14px; padding: 14px 6px; background: var(--g-surface); }
.wt-count strong { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }
.wt-count span { font-size: .8rem; color: var(--g-ink-3); }
.wt-src { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--g-ink-3); border: 1px solid var(--g-line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* Invoice */
.wt-inv-items { width: 100%; border-collapse: collapse; font-size: .88rem; }
.wt-inv-items th { text-align: left; font-size: .78rem; color: var(--g-ink-3); padding: 4px; }
.wt-inv-items td { padding: 3px; vertical-align: top; }
.wt-inv-items input { width: 100%; font: inherit; padding: 7px 8px; border: 1px solid var(--g-line); border-radius: 8px; background: var(--g-bg); color: var(--g-ink); }
.wt-inv-items .wt-num { width: 90px; }
.wt-inv-items td.wt-amt { text-align: right; white-space: nowrap; padding-top: 10px; font-weight: 600; }
.wt-paper { background: #fff; color: #1f2937; border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 26px; font-size: .8rem; aspect-ratio: 210 / 297; overflow: hidden; }
.wt-paper h3 { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--wt-inv-accent, #0b6e4f); text-transform: uppercase; letter-spacing: .04em; }
.wt-paper table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.wt-paper th { background: var(--wt-inv-accent, #0b6e4f); color: #fff; text-align: left; padding: 4px 6px; font-size: .72rem; }
.wt-paper td { padding: 4px 6px; border-bottom: 1px solid #e5e7eb; }
.wt-paper .r { text-align: right; }
.wt-paper .wt-paper-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.wt-paper img { max-width: 110px; max-height: 60px; }
.wt-paper .wt-tot td { border: 0; padding: 2px 6px; }
.wt-paper .wt-grand td { font-weight: 800; font-size: .9rem; border-top: 2px solid #1f2937; }
.wt-paper .muted { color: #6b7280; }
@media print {
    body * { visibility: hidden; }
    #wt-paper, #wt-paper * { visibility: visible; }
    #wt-paper { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; aspect-ratio: auto; border-radius: 0; font-size: 11pt; }
}

/* Hub */
.wt-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 26px; }
.wt-promise { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--g-ink-2); margin: 0 0 6px; padding: 0; list-style: none; }
.wt-promise li::before { content: "✓ "; color: var(--g-accent); font-weight: 800; }

.wt-app button:focus-visible, .wt-app input:focus-visible, .wt-app select:focus-visible, .wt-app textarea:focus-visible { outline: 3px solid #e9a23b; outline-offset: 1px; }
[data-bs-theme=dark] .wt-status.is-good, [data-bs-theme=dark] .wt-item-meta .wt-good { color: #5fd39a; }
[data-bs-theme=dark] .wt-status.is-error, [data-bs-theme=dark] .wt-item-meta .wt-bad, [data-bs-theme=dark] .wt-meta-warn { color: #f08a5d; }
[data-bs-theme=dark] .wt-badge.is-pass { background: #0f3b2a; color: #9be7c2; }
[data-bs-theme=dark] .wt-badge.is-fail { background: #4a2112; color: #f6b799; }
@media (max-width: 991px) {
    .wt-app { grid-template-columns: 1fr; }
    .wt-sticky { position: static; }
}
@media (max-width: 575px) {
    .wt-row, .wt-row3 { grid-template-columns: 1fr 1fr; }
    .wt-item { grid-template-columns: 44px minmax(0, 1fr); }
    .wt-thumb { width: 44px; height: 44px; }
    .wt-item-side { grid-column: 1 / -1; justify-content: flex-start; }
    .wt-shades { grid-template-columns: repeat(6, 1fr); }
}