/* ============================================================
   NO-TRUST HASH GENERATOR — hashgen.css  v3.0.0

   ── New in v3 ─────────────────────────────────────────────────
   [NEW] Format toggle bar      (.nt-format-row / .nt-fmt-btn)
   [NEW] HMAC section           (.nt-hmac-wrap)
   [NEW] Input history dropdown (.nt-history-wrap / .nt-history-list)
   [NEW] Share button           (.nt-gen-toolbar)
   [NEW] Entropy meter          (.nt-entropy-wrap)
   [NEW] Password warning       (.nt-pw-warning)
   [NEW] Ghost button variant   (.nt-btn-ghost / .nt-btn-xs)
   [NEW] Admin settings styles  (inlined via PHP — not here)
   ──────────────────────────────────────────────────────────────
   All v2 sections preserved and clearly labelled.
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
.nt-hashgen-wrap {
    /* ── Greens ───────────────────────────────────────────── */
    --nt-green:          #00ff00;
    --nt-green-dim:      #00cc00;
    --nt-green-faint:    rgba(0, 255, 0, 0.06);
    --nt-green-glow:     rgba(0, 255, 0, 0.22);
    --nt-green-glow-hi:  rgba(0, 255, 0, 0.45);

    /* ── Semantic ─────────────────────────────────────────── */
    --nt-match:          #00ff88;
    --nt-match-glow:     rgba(0, 255, 136, 0.25);
    --nt-nomatch:        #ff4455;
    --nt-nomatch-glow:   rgba(255, 68, 85, 0.25);
    --nt-warn:           #ffcc00;
    --nt-warn-glow:      rgba(255, 204, 0, 0.2);
    --nt-error:          #ff4444;
    --nt-error-glow:     rgba(255, 68, 68, 0.22);

    /* ── Entropy colours ──────────────────────────────────── */
    --nt-e0: #ff3333;   /* Very Weak  */
    --nt-e1: #ff8800;   /* Weak       */
    --nt-e2: #ffcc00;   /* Fair       */
    --nt-e3: #88ff00;   /* Strong     */
    --nt-e4: #00ff88;   /* Very Strong*/

    /* ── Text ─────────────────────────────────────────────── */
    --nt-text:           #e5ffe5;
    --nt-text-dim:       #8cff8c;
    --nt-text-muted:     #4a8a4a;

    /* ── Backgrounds ──────────────────────────────────────── */
    --nt-bg:             #050505;
    --nt-bg-input:       #020402;
    --nt-bg-row:         #030603;
    --nt-bg-tab-active:  rgba(0, 255, 0, 0.08);

    /* ── Borders ──────────────────────────────────────────── */
    --nt-border:         #0a6a0a;
    --nt-border-hi:      #00ff00;

    /* ── Typography ───────────────────────────────────────── */
    --nt-font-ui:   system-ui, -apple-system, "Segoe UI", BlinkMacSystemFont, sans-serif;
    --nt-font-mono: "Fira Code", Consolas, "Courier New", monospace;

    /* ── Shape ────────────────────────────────────────────── */
    --nt-radius:    8px;
    --nt-radius-sm: 5px;
}

/* ============================================================
   BASE WRAPPER
   ============================================================ */
.nt-hashgen-wrap {
    max-width: 900px;
    margin: 40px auto;
    padding: 28px 24px 32px;
    background: var(--nt-bg);
    border-radius: var(--nt-radius);
    border: 1px solid var(--nt-green);
    box-shadow: 0 0 20px var(--nt-green-glow), inset 0 0 60px rgba(0,255,0,0.02);
    color: var(--nt-text);
    font-family: var(--nt-font-ui);
    box-sizing: border-box;
    /* Start invisible; JS adds nt-fade-in */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.nt-hashgen-wrap.nt-fade-in { opacity: 1; transform: translateY(0); }

/* ============================================================
   HEADER
   ============================================================ */
.nt-hashgen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--nt-border);
}
.nt-logo-block { display: flex; align-items: center; gap: 14px; }
.nt-logo-img {
    width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.nt-logo-img:hover {
    transform: scale(1.07);
    filter: drop-shadow(0 0 14px var(--nt-green));
}
.nt-site-name {
    font-size: 1rem; font-weight: 700; color: var(--nt-green);
    letter-spacing: 0.04em; text-shadow: 0 0 8px var(--nt-green-glow);
}
.nt-version { font-size: 0.78rem; color: var(--nt-text-dim); margin-top: 3px; opacity: 0.8; }
.nt-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nt-security-badge {
    font-size: 0.72rem; color: var(--nt-text-dim);
    border: 1px solid var(--nt-border); border-radius: 999px;
    padding: 4px 10px; white-space: nowrap; opacity: 0.85; cursor: default;
}

/* ============================================================
   TAB BAR
   ============================================================ */
.nt-tabs {
    display: flex; gap: 4px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--nt-border);
}
.nt-tab {
    position: relative; bottom: -1px;
    padding: 9px 20px;
    background: transparent;
    border: 1px solid transparent; border-bottom: none;
    border-radius: var(--nt-radius-sm) var(--nt-radius-sm) 0 0;
    color: var(--nt-text-muted);
    font-family: var(--nt-font-ui); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; letter-spacing: 0.02em;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nt-tab:hover { color: var(--nt-text-dim); background: var(--nt-green-faint); }
.nt-tab.nt-tab-active {
    color: var(--nt-green); background: var(--nt-bg-tab-active);
    border-color: var(--nt-border); border-bottom-color: var(--nt-bg);
    text-shadow: 0 0 8px var(--nt-green-glow);
}
.nt-tab-panel { display: none; }
.nt-tab-panel.nt-panel-active { display: block; animation: ntPanelIn 0.2s ease-out; }
@keyframes ntPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nt-panel-intro {
    font-size: 0.85rem; color: var(--nt-text-muted); margin: 0 0 18px;
    line-height: 1.6; border-left: 2px solid var(--nt-border); padding-left: 12px;
}
.nt-panel-intro strong { color: var(--nt-text-dim); }

/* ============================================================
   LABELS & HINTS
   ============================================================ */
.nt-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.88rem; font-weight: 600; color: var(--nt-text-dim);
    margin-bottom: 7px; letter-spacing: 0.02em;
}
.nt-hint { font-size: 0.72rem; font-weight: 400; color: var(--nt-text-muted); }

/* ============================================================
   INPUTS
   ============================================================ */
.nt-input,
.nt-input-single {
    width: 100%; padding: 11px 13px;
    border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-border);
    background: var(--nt-bg-input); color: var(--nt-text);
    font-family: var(--nt-font-mono); font-size: 0.9rem; line-height: 1.5;
    box-sizing: border-box;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.nt-input { resize: vertical; }
.nt-input:focus, .nt-input-single:focus {
    outline: none; border-color: var(--nt-green);
    box-shadow: 0 0 12px var(--nt-green-glow); background: #010301;
}
.nt-input::placeholder, .nt-input-single::placeholder {
    color: var(--nt-text-muted); opacity: 0.55;
}
.nt-select {
    width: 100%; padding: 9px 12px;
    border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-border);
    background: var(--nt-bg-input); color: var(--nt-text);
    font-family: var(--nt-font-ui); font-size: 0.88rem; box-sizing: border-box; cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nt-select:focus { outline: none; border-color: var(--nt-green); box-shadow: 0 0 10px var(--nt-green-glow); }

/* ============================================================
   BUTTONS
   ============================================================ */
.nt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-green);
    cursor: pointer; font-family: var(--nt-font-ui); font-size: 0.88rem;
    font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.08s, opacity 0.15s;
}
.nt-btn:disabled { opacity: 0.32; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Primary */
.nt-btn-primary { background: var(--nt-green); color: #011001; }
.nt-btn-primary:not(:disabled):hover {
    background: #22ff22; box-shadow: 0 0 18px var(--nt-green-glow-hi); transform: translateY(-1px);
}
.nt-btn-primary:not(:disabled):active { transform: translateY(0); box-shadow: 0 0 8px var(--nt-green-glow); }

/* Secondary */
.nt-btn-secondary { background: var(--nt-green-faint); color: var(--nt-text-dim); }
.nt-btn-secondary:not(:disabled):hover {
    background: rgba(0,255,0,0.12); box-shadow: 0 0 10px var(--nt-green-glow); transform: translateY(-1px);
}

/* [NEW] Ghost — used for History / Share toolbar buttons */
.nt-btn-ghost {
    background: transparent; border-color: transparent; color: var(--nt-text-muted);
}
.nt-btn-ghost:not(:disabled):hover { color: var(--nt-text-dim); background: var(--nt-green-faint); border-color: var(--nt-border); }

/* [NEW] Extra-small size */
.nt-btn-xs { padding: 4px 10px; font-size: 0.78rem; font-weight: 500; }

/* Small — per-row copy button */
.nt-btn-sm { padding: 4px 12px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; }

/* Button rows */
.nt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nt-btn-row-bottom { margin-top: 16px; justify-content: flex-end; }

/* ============================================================
   [NEW] GENERATE TAB TOOLBAR (History + Share)
   ============================================================ */
.nt-gen-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    min-height: 28px;
}

/* ── History dropdown ───────────────────────────────────── */
.nt-history-wrap { position: relative; }

.nt-history-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    max-width: 480px;
    background: #0a110a;
    border: 1px solid var(--nt-green);
    border-radius: var(--nt-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 12px var(--nt-green-glow);
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow: hidden;
}

.nt-history-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.nt-history-item:hover,
.nt-history-item:focus { background: var(--nt-green-faint); outline: none; }

.nt-history-text {
    font-family: var(--nt-font-mono);
    font-size: 0.8rem;
    color: var(--nt-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.nt-history-age {
    font-size: 0.72rem;
    color: var(--nt-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.nt-history-clear {
    display: block;
    padding: 7px 14px;
    font-size: 0.78rem;
    color: var(--nt-error);
    cursor: pointer;
    border-top: 1px solid var(--nt-border);
    text-align: center;
    transition: background 0.15s;
}
.nt-history-clear:hover { background: rgba(255,68,68,0.08); }

/* ============================================================
   [NEW] ENTROPY METER
   ============================================================ */
.nt-entropy-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    height: 18px;
}
.nt-entropy-label {
    font-size: 0.72rem;
    color: var(--nt-text-muted);
    white-space: nowrap;
    width: 52px;
    flex-shrink: 0;
}
.nt-entropy-track {
    flex: 1;
    height: 6px;
    background: #0a120a;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #0a2a0a;
}
.nt-entropy-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}
/* Colour levels added by JS class */
.nt-entropy-bar.nt-entropy-0 { background: var(--nt-e0); box-shadow: 0 0 6px rgba(255,51,51,0.5); }
.nt-entropy-bar.nt-entropy-1 { background: var(--nt-e1); box-shadow: 0 0 6px rgba(255,136,0,0.5); }
.nt-entropy-bar.nt-entropy-2 { background: var(--nt-e2); box-shadow: 0 0 6px rgba(255,204,0,0.5); }
.nt-entropy-bar.nt-entropy-3 { background: var(--nt-e3); box-shadow: 0 0 6px rgba(136,255,0,0.5); }
.nt-entropy-bar.nt-entropy-4 { background: var(--nt-e4); box-shadow: 0 0 6px rgba(0,255,136,0.5); }

.nt-entropy-tag {
    font-size: 0.72rem;
    color: var(--nt-text-muted);
    white-space: nowrap;
    min-width: 160px;
    flex-shrink: 0;
}

/* ============================================================
   [NEW] PASSWORD WARNING BANNER
   ============================================================ */
.nt-pw-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 204, 0, 0.06);
    border: 1px solid var(--nt-warn);
    border-radius: var(--nt-radius-sm);
    box-shadow: 0 0 8px var(--nt-warn-glow);
    animation: ntPanelIn 0.2s ease-out;
}
.nt-pw-warning-icon { font-size: 1rem; flex-shrink: 0; color: var(--nt-warn); }
.nt-pw-warning-text { font-size: 0.82rem; color: var(--nt-warn); line-height: 1.5; flex: 1; }
.nt-pw-warning-text strong { font-weight: 700; }
.nt-pw-dismiss {
    background: transparent; border: none; color: var(--nt-warn);
    font-size: 0.9rem; cursor: pointer; padding: 0 2px; flex-shrink: 0;
    opacity: 0.7; transition: opacity 0.15s;
}
.nt-pw-dismiss:hover { opacity: 1; }

/* ============================================================
   [NEW] HMAC MODE
   ============================================================ */
.nt-hmac-wrap {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--nt-bg-row);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-sm);
}
.nt-hmac-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nt-text-dim);
    cursor: pointer;
    user-select: none;
}
.nt-hmac-toggle-label input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: var(--nt-green); cursor: pointer;
}
.nt-hmac-key-wrap { margin-top: 2px; }

/* ============================================================
   [NEW] FORMAT TOGGLE
   ============================================================ */
.nt-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.nt-format-label {
    font-size: 0.78rem;
    color: var(--nt-text-muted);
    white-space: nowrap;
}
.nt-format-btns {
    display: flex;
    gap: 0;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-sm);
    overflow: hidden;
}
.nt-fmt-btn {
    padding: 4px 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--nt-border);
    color: var(--nt-text-muted);
    font-family: var(--nt-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.nt-fmt-btn:last-child { border-right: none; }
.nt-fmt-btn:hover { background: var(--nt-green-faint); color: var(--nt-text-dim); }
.nt-fmt-btn.nt-fmt-active {
    background: var(--nt-green);
    color: #011001;
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.nt-status {
    min-height: 20px; font-size: 0.82rem;
    margin-top: 10px; padding: 0 4px;
    opacity: 0; transition: opacity 0.25s;
}
.nt-status.nt-status-visible { opacity: 1; }
.nt-status.nt-status-ok      { color: var(--nt-text-dim); }
.nt-status.nt-status-error   { color: var(--nt-error); }

/* ============================================================
   HASH RESULTS GRID
   ============================================================ */
.nt-hash-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.nt-hash-row {
    background: var(--nt-bg-row); border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius); padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nt-hash-row:focus-within { border-color: var(--nt-green); box-shadow: 0 0 8px var(--nt-green-glow); }
.nt-hash-row.nt-row-error  { border-color: var(--nt-error); box-shadow: 0 0 6px var(--nt-error-glow); }

.nt-hash-row-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.nt-hash-label {
    font-size: 0.74rem; font-weight: 700; color: var(--nt-green-dim);
    text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--nt-font-mono);
}
.nt-hash-input {
    width: 100%; padding: 7px 10px;
    border-radius: var(--nt-radius-sm); border: 1px solid #0a3a0a;
    background: #010101; color: var(--nt-green);
    font-family: var(--nt-font-mono); font-size: 0.82rem; letter-spacing: 0.03em;
    box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: text; transition: border-color 0.2s;
}
.nt-hash-input:focus { outline: none; border-color: var(--nt-green); }
.nt-hash-input::placeholder { color: var(--nt-text-muted); font-style: italic; letter-spacing: 0; opacity: 0.45; }

/* ============================================================
   VERIFY TAB
   ============================================================ */
.nt-verify-result {
    display: none; margin-top: 18px; padding: 14px 18px;
    border-radius: var(--nt-radius); font-size: 1.05rem; font-weight: 700;
    letter-spacing: 0.04em; text-align: center;
}
.nt-verify-result.nt-vr-visible { display: block; animation: ntPanelIn 0.2s ease-out; }
.nt-verify-result.nt-vr-match {
    background: rgba(0,255,136,0.08); border: 1px solid var(--nt-match);
    color: var(--nt-match); box-shadow: 0 0 14px var(--nt-match-glow);
    text-shadow: 0 0 10px var(--nt-match-glow);
}
.nt-verify-result.nt-vr-nomatch {
    background: rgba(255,68,85,0.08); border: 1px solid var(--nt-nomatch);
    color: var(--nt-nomatch); box-shadow: 0 0 14px var(--nt-nomatch-glow);
}
.nt-verify-result.nt-vr-warn {
    background: rgba(255,204,0,0.07); border: 1px solid var(--nt-warn);
    color: var(--nt-warn); box-shadow: 0 0 10px var(--nt-warn-glow);
    font-size: 0.9rem; font-weight: 500; text-align: left;
}
.nt-verify-detail {
    margin-top: 12px; background: var(--nt-bg-row);
    border: 1px solid var(--nt-border); border-radius: var(--nt-radius); padding: 12px 14px;
}
.nt-detail-heading {
    font-size: 0.75rem; font-weight: 700; color: var(--nt-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.nt-detail-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 5px 0; border-bottom: 1px solid #0a1a0a; font-size: 0.82rem;
}
.nt-detail-row:last-child { border-bottom: none; }
.nt-detail-label {
    flex-shrink: 0; width: 90px; font-weight: 700; color: var(--nt-green-dim);
    font-family: var(--nt-font-mono); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.nt-detail-hash { font-family: var(--nt-font-mono); color: var(--nt-text-muted); word-break: break-all; line-height: 1.5; font-size: 0.8rem; }
.nt-detail-row.nt-detail-match .nt-detail-hash { color: var(--nt-match); text-shadow: 0 0 6px var(--nt-match-glow); }
.nt-detail-row.nt-detail-match .nt-detail-label { color: var(--nt-match); }

/* ============================================================
   FILE HASH TAB
   ============================================================ */
.nt-dropzone {
    position: relative; border: 2px dashed var(--nt-border);
    border-radius: var(--nt-radius); background: var(--nt-bg-row);
    padding: 36px 24px; text-align: center; cursor: pointer; outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.nt-dropzone input[type="file"] { position: absolute; top: -9999px; left: -9999px; opacity: 0; pointer-events: none; }
.nt-dropzone:hover, .nt-dropzone:focus {
    border-color: var(--nt-green-dim); background: rgba(0,255,0,0.03); box-shadow: 0 0 12px var(--nt-green-glow);
}
.nt-dropzone.nt-dropzone-over {
    border-color: var(--nt-green); background: rgba(0,255,0,0.07); box-shadow: 0 0 20px var(--nt-green-glow-hi);
}
.nt-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.nt-dropzone-icon { font-size: 2.4rem; line-height: 1; }
.nt-dropzone-text { font-size: 1rem; font-weight: 600; color: var(--nt-text-dim); }
.nt-dropzone-sub  { font-size: 0.8rem; color: var(--nt-text-muted); }

.nt-file-info {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 12px; padding: 10px 14px;
    background: var(--nt-bg-row); border: 1px solid var(--nt-border); border-radius: var(--nt-radius-sm);
    font-size: 0.84rem;
}
.nt-file-name { font-family: var(--nt-font-mono); color: var(--nt-text); font-weight: 600; word-break: break-all; }
.nt-file-size, .nt-file-type { color: var(--nt-text-muted); white-space: nowrap; font-size: 0.8rem; }
.nt-file-size::before, .nt-file-type::before { content: "•"; margin-right: 10px; }

.nt-progress-wrap {
    position: relative; margin-top: 12px; height: 20px;
    background: #020402; border: 1px solid var(--nt-border);
    border-radius: 999px; overflow: hidden;
}
.nt-progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--nt-green-dim), var(--nt-green));
    border-radius: 999px; box-shadow: 0 0 10px var(--nt-green-glow);
    transition: width 0.15s ease;
}
.nt-progress-pct {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.72rem; font-weight: 700; color: var(--nt-bg);
    mix-blend-mode: difference; pointer-events: none;
}

/* ============================================================
   TOAST
   ============================================================ */
#nt-toast {
    position: fixed; bottom: 28px; right: 28px;
    background: var(--nt-green); color: #011001;
    padding: 10px 18px; border-radius: var(--nt-radius);
    font-family: var(--nt-font-ui); font-size: 0.85rem; font-weight: 600;
    box-shadow: 0 0 18px var(--nt-green-glow-hi);
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s; z-index: 99999; max-width: 300px;
}
#nt-toast.nt-toast-show  { opacity: 1; transform: translateY(0); }
#nt-toast.nt-toast-error { background: var(--nt-error); box-shadow: 0 0 14px var(--nt-error-glow); color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.nt-footer { margin-top: 30px; text-align: center; font-size: 0.82rem; color: var(--nt-text-dim); opacity: 0.7; }
.nt-footer-badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--nt-border); background: var(--nt-green-faint); letter-spacing: 0.02em;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.nt-dark { background-color: #010101 !important; color: var(--nt-text) !important; }
body.nt-dark .nt-hashgen-wrap {
    background: #020202;
    box-shadow: 0 0 26px var(--nt-green-glow), inset 0 0 80px rgba(0,255,0,0.03);
}
body.nt-dark .nt-tab.nt-tab-active   { border-bottom-color: #020202; }
body.nt-dark .nt-hash-row,
body.nt-dark .nt-hmac-wrap,
body.nt-dark .nt-verify-detail,
body.nt-dark .nt-file-info,
body.nt-dark .nt-dropzone,
body.nt-dark .nt-history-list        { background: #020202; }
body.nt-dark .nt-input,
body.nt-dark .nt-input-single,
body.nt-dark .nt-select              { background: #010101; }
body.nt-dark .nt-hash-input,
body.nt-dark .nt-progress-wrap,
body.nt-dark .nt-entropy-track       { background: #000; }

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media ( max-width: 768px ) {
    .nt-hashgen-wrap { max-width: 100%; margin: 20px 12px; }
    .nt-security-badge { display: none; }
    .nt-entropy-tag { display: none; } /* save space; bar colour is enough */
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media ( max-width: 540px ) {
    .nt-hashgen-wrap   { margin: 10px 4px; padding: 16px 12px 20px; }
    .nt-hashgen-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nt-header-right   { width: 100%; justify-content: flex-end; }
    .nt-logo-img       { width: 52px; height: 52px; }

    /* Stack tabs vertically */
    .nt-tabs { flex-direction: column; border-bottom: none; gap: 6px; }
    .nt-tab  { border: 1px solid var(--nt-border); border-radius: var(--nt-radius-sm); text-align: center; bottom: 0; }
    .nt-tab.nt-tab-active { border-color: var(--nt-green); border-bottom-color: var(--nt-green); }

    /* Full-width bottom actions */
    .nt-btn-row-bottom { justify-content: stretch; }
    .nt-btn-row-bottom .nt-btn { flex: 1; }

    /* History list full width */
    .nt-history-list { min-width: 0; width: calc(100vw - 40px); left: 0; right: 0; }

    /* File info stacks */
    .nt-file-info { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nt-file-size::before, .nt-file-type::before { display: none; }

    /* Verify detail wraps */
    .nt-detail-row { flex-direction: column; gap: 2px; }
    .nt-detail-label { width: auto; }

    /* Format row wraps */
    .nt-format-row { flex-wrap: wrap; }

    /* Toast full width */
    #nt-toast { left: 12px; right: 12px; bottom: 14px; text-align: center; max-width: none; }
}