/* =============================================================
   Qadiyah Detective Archive
   Every public rule is scoped to the immersive detective pages.
   ============================================================= */

.qdetective-html {
    background: #0c0c0b;
    scroll-behavior: smooth;
}

body.qdetective-page {
    margin: 0 !important;
    min-width: 320px;
    background: #0c0c0b !important;
    color: #ede9df;
    overflow-x: hidden;
}

body.qdetective-page.admin-bar .qdetective-casebar { top: 32px; }

.qdetective-app,
.qdetective-app * {
    box-sizing: border-box;
}

.qdetective-app {
    --qd-ink: #242019;
    --qd-paper: #eee3c4;
    --qd-paper-light: #f7f0dc;
    --qd-paper-dark: #d7c69b;
    --qd-line: #9d8552;
    --qd-night: #0c0c0b;
    --qd-night-soft: #151512;
    --qd-panel: #1c1c18;
    --qd-panel-soft: #24241f;
    --qd-red: #9f302b;
    --qd-red-dark: #631916;
    --qd-gold: #d2a64b;
    --qd-blue: #3f6881;
    --qd-green: #4f8b68;
    --qd-muted: #aaa69d;
    --qd-border: rgba(239, 226, 194, .14);
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(circle at 88% 2%, rgba(159, 48, 43, .17), transparent 30rem),
        radial-gradient(circle at 12% 28%, rgba(210, 166, 75, .09), transparent 28rem),
        linear-gradient(180deg, #11110f 0%, #090a09 100%);
    color: #ede9df;
    font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    line-height: 1.65;
}

.qdetective-app button,
.qdetective-app input,
.qdetective-app textarea {
    font: inherit;
}

.qdetective-app button,
.qdetective-app a {
    -webkit-tap-highlight-color: transparent;
}

.qdetective-app a {
    color: inherit;
}

.qdetective-app [hidden] {
    display: none !important;
}

.qdetective-app :focus-visible {
    outline: 3px solid #f2c86a;
    outline-offset: 3px;
}

.qdetective-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.qdetective-skip {
    position: fixed;
    z-index: 10000;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    transform: translateY(-150%);
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: #111 !important;
    font-weight: 800;
    text-decoration: none !important;
}

.qdetective-skip:focus { transform: none; }

/* Shared identity and controls */
.qdetective-topbar {
    width: min(1240px, calc(100% - 40px));
    min-height: 84px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--qd-border);
}

.qdetective-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #f6f1e7 !important;
    text-decoration: none !important;
}

.qdetective-brand__mark {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(239, 196, 99, .52);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 166, 75, .15), transparent 68%);
}

.qdetective-brand__mark::before,
.qdetective-brand__mark::after,
.qdetective-brand__mark span::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--qd-gold);
}

.qdetective-brand__mark::before { width: 19px; height: 19px; }
.qdetective-brand__mark::after { width: 11px; height: 11px; border-style: dashed; }
.qdetective-brand__mark span::before { width: 3px; height: 3px; background: var(--qd-gold); }
.qdetective-brand__mark span::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    inset-inline-end: 3px;
    inset-block-end: 5px;
    border-radius: 2px;
    background: var(--qd-gold);
    transform: rotate(45deg);
}

.qdetective-brand__text { display: grid; line-height: 1.2; }
.qdetective-brand__text strong { font-size: 18px; font-weight: 900; }
.qdetective-brand__text small { margin-top: 4px; color: var(--qd-muted); font-size: 11px; letter-spacing: .4px; }

.qdetective-topnav { display: flex; align-items: center; gap: 8px; }
.qdetective-topnav a {
    padding: 9px 13px;
    border-radius: 9px;
    color: #c9c5bc !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}
.qdetective-topnav a:hover { background: rgba(255,255,255,.06); color: #fff !important; }

.qdetective-button {
    appearance: none;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.qdetective-button:hover { transform: translateY(-2px); }
.qdetective-button--primary {
    border-color: #be4c45;
    background: linear-gradient(180deg, #af3933, #84231f);
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(126, 29, 25, .36), inset 0 1px 0 rgba(255,255,255,.18);
}
.qdetective-button--ghost {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.045);
    color: #ddd8ce;
}
.qdetective-button--ghost:hover { border-color: rgba(210,166,75,.48); background: rgba(210,166,75,.08); }

.qdetective-eyebrow,
.qdetective-kicker {
    margin: 0;
    color: var(--qd-gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
}

.qdetective-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.qdetective-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--qd-red); box-shadow: 0 0 0 5px rgba(159,48,43,.14); }

/* Archive hero */
.qdetective-hero {
    width: min(1180px, calc(100% - 40px));
    min-height: 590px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    padding: 70px 0 80px;
}

.qdetective-hero__copy h1 {
    max-width: 720px;
    margin: 16px 0 20px;
    color: #f6f1e7;
    font-size: clamp(42px, 6.3vw, 82px);
    font-weight: 900;
    line-height: 1.13;
    letter-spacing: -2px;
}

.qdetective-hero__copy h1 em {
    display: block;
    color: var(--qd-gold);
    font-family: "Aref Ruqaa", Georgia, serif;
    font-style: normal;
    font-weight: 700;
}

.qdetective-hero__lead {
    max-width: 680px;
    margin: 0;
    color: #bbb7ae;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 2;
}

.qdetective-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.qdetective-local-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: #77746e; font-size: 12px; }

.qdetective-hero__visual { position: relative; min-height: 430px; perspective: 1000px; }
.qdetective-hero-file {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: min(340px, 82vw);
    height: 420px;
    border: 1px solid #80683a;
    border-radius: 6px 14px 14px 6px;
    background:
        linear-gradient(92deg, rgba(89,65,32,.26) 0 4%, transparent 4% 100%),
        repeating-linear-gradient(0deg, rgba(74,56,27,.035) 0 1px, transparent 1px 6px),
        #cbb279;
    box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.26);
    color: var(--qd-ink);
}
.qdetective-hero-file--back { transform: translate(-37%, -54%) rotate(10deg); opacity: .35; }
.qdetective-hero-file--middle { transform: translate(-47%, -51%) rotate(3deg); opacity: .62; }
.qdetective-hero-file--front { transform: translate(-55%, -48%) rotate(-5deg); padding: 54px 34px 28px; }
.qdetective-hero-file--back span,
.qdetective-hero-file--middle span { position: absolute; inset-inline-end: 26px; inset-block-end: 22px; font-size: 42px; font-weight: 900; opacity: .25; }
.qdetective-file-tab { position: absolute; inset-block-start: -28px; inset-inline-start: 20px; width: 105px; height: 30px; display: grid; place-items: center; border: 1px solid #80683a; border-bottom: 0; border-radius: 8px 8px 0 0; background: #cbb279; font-size: 12px; font-weight: 900; }
.qdetective-file-classified { display: inline-block; padding: 4px 9px; border: 2px solid var(--qd-red); color: var(--qd-red); font-size: 11px; font-weight: 900; transform: rotate(-3deg); }
.qdetective-hero-file--front > strong { display: block; margin-top: 38px; color: #3a3020; font-family: Georgia, serif; font-size: 95px; line-height: .8; }
.qdetective-hero-file--front > small { display: block; margin-top: 10px; font-size: 16px; font-weight: 900; }
.qdetective-file-lines { height: 64px; margin-top: 25px; border-block: 1px solid rgba(52,41,23,.38); background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(52,41,23,.24) 14px 15px); }
.qdetective-file-stamp { position: absolute; inset-inline-end: 26px; inset-block-end: 30px; padding: 7px 15px; border: 3px double var(--qd-red); border-radius: 5px; color: var(--qd-red); font-size: 14px; font-weight: 900; transform: rotate(8deg); }
.qdetective-file-glass { position: absolute; inset-inline-end: 36px; inset-block-start: 50px; width: 72px; height: 72px; border: 6px solid rgba(45,38,26,.8); border-radius: 50%; }
.qdetective-file-glass::after { content: ""; position: absolute; width: 45px; height: 7px; inset-inline-end: -33px; inset-block-end: -17px; border-radius: 8px; background: rgba(45,38,26,.8); transform: rotate(47deg); }
.qdetective-file-glass span { position: absolute; inset: 13px; border: 1px dashed rgba(45,38,26,.42); border-radius: 50%; }

/* Archive statistics */
.qdetective-stats {
    width: min(1120px, calc(100% - 40px));
    margin: -20px auto 85px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--qd-border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    box-shadow: 0 25px 70px rgba(0,0,0,.22);
}
.qdetective-stats article { min-height: 96px; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-inline-end: 1px solid var(--qd-border); }
.qdetective-stats article:last-child { border-inline-end: 0; }
.qdetective-stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(210,166,75,.28); border-radius: 50%; background: rgba(210,166,75,.07); color: var(--qd-gold); font-size: 20px; }
.qdetective-stats strong { display: block; color: #f6f1e7; font: 800 26px/1.1 Georgia, serif; }
.qdetective-stats small { display: block; margin-top: 5px; color: #85827b; font-size: 11px; }

/* Archive library */
.qdetective-library,
.qdetective-guide,
.qdetective-editorial-note {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.qdetective-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.qdetective-section-head h2,
.qdetective-guide h2 { margin: 4px 0 5px; color: #f4efe5; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; }
.qdetective-section-head > div > p:last-child { margin: 0; color: #87847d; font-size: 13px; }
.qdetective-result-count { display: flex; align-items: baseline; gap: 7px; color: #85817a; }
.qdetective-result-count strong { color: var(--qd-gold); font: 700 30px/1 Georgia, serif; }
.qdetective-result-count span { font-size: 11px; }

.qdetective-tools {
    margin-bottom: 26px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--qd-border);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}
.qdetective-search { min-width: min(100%, 360px); height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: #11110f; color: #74716b; }
.qdetective-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #eee9df; font-size: 13px; }
.qdetective-search input::placeholder { color: #625f59; }
.qdetective-search kbd { padding: 1px 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 4px; background: #24231f; color: #77736b; font: 11px/1.7 monospace; }
.qdetective-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.qdetective-filters button { padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #8f8b83; cursor: pointer; font-size: 11px; font-weight: 800; }
.qdetective-filters button:hover { color: #fff; }
.qdetective-filters button.is-active { border-color: rgba(210,166,75,.26); background: rgba(210,166,75,.09); color: #efc66c; }

.qdetective-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qdetective-case-card { min-width: 0; animation: qdetective-card-in .4s both; animation-delay: min(calc(var(--case-order) * 25ms), 350ms); }
@keyframes qdetective-card-in { from { opacity: 0; transform: translateY(14px); } }
.qdetective-case-card__link { min-height: 220px; display: grid; grid-template-columns: 142px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--qd-border); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); color: #e9e5dc !important; text-decoration: none !important; box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.qdetective-case-card__link:hover { transform: translateY(-3px); border-color: rgba(210,166,75,.36); background: rgba(255,255,255,.045); box-shadow: 0 16px 45px rgba(0,0,0,.22); }
.qdetective-case-card__cover { position: relative; min-height: 100%; overflow: hidden; border-inline-end: 1px solid #80683a; background: repeating-linear-gradient(0deg, rgba(61,47,25,.035) 0 1px, transparent 1px 5px), #b99b61; color: #312818; }
.qdetective-case-card:nth-child(6n+2) .qdetective-case-card__cover { background-color: #a69a78; }
.qdetective-case-card:nth-child(6n+3) .qdetective-case-card__cover { background-color: #b58562; }
.qdetective-case-card:nth-child(6n+4) .qdetective-case-card__cover { background-color: #9a9b80; }
.qdetective-case-card:nth-child(6n+5) .qdetective-case-card__cover { background-color: #b89d70; }
.qdetective-case-card:nth-child(6n+6) .qdetective-case-card__cover { background-color: #9e8570; }
.qdetective-case-card__tab { position: absolute; inset-block-start: 0; inset-inline-start: 12px; padding: 5px 9px; border: 1px solid rgba(49,40,24,.44); border-top: 0; border-radius: 0 0 5px 5px; font: 800 10px/1 monospace; }
.qdetective-case-card__seal { position: absolute; inset-block-start: 53px; inset-inline-start: 50%; width: 48px; height: 48px; display: grid; place-items: center; border: 2px double var(--qd-red); border-radius: 50%; color: var(--qd-red); font-family: serif; font-size: 22px; font-weight: 900; transform: translateX(50%) rotate(-8deg); opacity: .72; }
.qdetective-case-card__number { position: absolute; inset-inline-start: 17px; inset-block-end: 37px; font: 800 46px/.9 Georgia, serif; opacity: .8; }
.qdetective-case-card__barcode { position: absolute; inset-inline: 15px; inset-block-end: 15px; height: 12px; background: repeating-linear-gradient(90deg, #312818 0 1px, transparent 1px 3px, #312818 3px 5px, transparent 5px 8px); opacity: .48; }
.qdetective-case-card__body { min-width: 0; display: flex; flex-direction: column; padding: 18px 19px 15px; }
.qdetective-case-card__topline { min-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--qd-gold); font-size: 10px; font-weight: 900; }
.qdetective-badge { padding: 3px 7px; border-radius: 999px; font-size: 9px; white-space: nowrap; }
.qdetective-badge--part { border: 1px solid rgba(77,126,153,.4); background: rgba(63,104,129,.15); color: #88b4cd; }
.qdetective-badge--review { border: 1px solid rgba(210,166,75,.34); background: rgba(210,166,75,.09); color: #d9b96f; }
.qdetective-case-card__title { display: block; margin-top: 7px; color: #f3eee4; font-size: 18px; line-height: 1.45; }
.qdetective-case-card__synopsis { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #959189; font-size: 11.5px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.qdetective-case-card__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; color: #6f6c66; font-size: 9.5px; }
.qdetective-case-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.qdetective-case-card__meta i { color: #9b7f46; font-style: normal; }
.qdetective-case-card__progress { min-height: 30px; display: grid; grid-template-columns: auto minmax(45px, 1fr) auto; align-items: center; gap: 8px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 9px; color: #77736b; font-size: 9.5px; }
.qdetective-case-card__progressbar { height: 3px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.08); }
.qdetective-case-card__progressbar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--qd-gold); transition: width .35s ease; }
.qdetective-case-card[data-progress-state="completed"] .qdetective-case-card__progress { color: #7fba95; }
.qdetective-case-card[data-progress-state="completed"] .qdetective-case-card__progressbar i { background: var(--qd-green); }
.qdetective-empty { padding: 70px 20px; border: 1px dashed var(--qd-border); border-radius: 15px; text-align: center; }
.qdetective-empty > span { color: var(--qd-gold); font-size: 38px; }
.qdetective-empty h3 { margin: 8px 0 2px; color: #eee9df; }
.qdetective-empty p { margin: 0; color: #77736d; }

/* Guide and archive footer */
.qdetective-guide { margin-top: 100px; padding: 52px 0 80px; border-top: 1px solid var(--qd-border); }
.qdetective-guide > header { text-align: center; }
.qdetective-guide > div { margin-top: 35px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qdetective-guide article { position: relative; min-height: 220px; padding: 27px; overflow: hidden; border: 1px solid var(--qd-border); border-radius: 14px; background: rgba(255,255,255,.025); }
.qdetective-guide article > span { position: absolute; inset-inline-end: 16px; inset-block-start: 5px; color: rgba(210,166,75,.08); font: 800 72px/1 Georgia, serif; }
.qdetective-guide article > i { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(210,166,75,.24); border-radius: 50%; color: var(--qd-gold); font-size: 20px; font-style: normal; }
.qdetective-guide article h3 { margin: 22px 0 8px; color: #f0ece3; font-size: 18px; }
.qdetective-guide article p { margin: 0; color: #8b8881; font-size: 12px; line-height: 1.9; }
.qdetective-editorial-note { display: flex; gap: 14px; margin-bottom: 70px; padding: 18px 20px; border: 1px solid rgba(210,166,75,.19); border-radius: 12px; background: rgba(210,166,75,.045); color: #9b968b; }
.qdetective-editorial-note > span { color: var(--qd-gold); font-size: 23px; }
.qdetective-editorial-note strong { display: block; color: #d8c99d; font-size: 13px; }
.qdetective-editorial-note p { margin: 3px 0 0; font-size: 11px; }
.qdetective-footer { width: min(1240px, calc(100% - 40px)); min-height: 105px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--qd-border); color: #66635d; }
.qdetective-footer > div { display: flex; align-items: center; gap: 11px; }
.qdetective-footer p { margin: 0; font-size: 11px; }
.qdetective-footer strong, .qdetective-footer small { display: block; }
.qdetective-footer strong { color: #aaa59b; }
.qdetective-footer small { margin-top: 2px; }

/* =============================================================
   Case cover
   ============================================================= */
.qdetective-cover-screen { position: relative; min-height: 100vh; padding: 34px 18px 54px; display: grid; place-items: center; background: radial-gradient(circle at 50% 12%, rgba(81,64,37,.26), transparent 42rem); }
.qdetective-cover-back { position: absolute; inset-block-start: 28px; inset-inline-start: max(18px, calc((100vw - 1040px) / 2)); z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; color: #aaa59b !important; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.qdetective-cover-back:hover { background: rgba(255,255,255,.05); color: #fff !important; }
.qdetective-cover-stage { width: min(680px, 100%); padding-top: 45px; perspective: 1300px; }
.qdetective-cover-folder { position: relative; width: min(610px, 100%); margin: 0 auto; padding: 64px 48px 35px; border: 1px solid #846b3b; border-radius: 8px 15px 15px 8px; background: repeating-linear-gradient(0deg, rgba(56,43,22,.035) 0 1px, transparent 1px 6px), linear-gradient(145deg, #d4bb80, #b8995b); color: #2d2518; box-shadow: 0 35px 90px rgba(0,0,0,.66), inset 0 1px rgba(255,255,255,.32); transform: rotate(-.7deg); }
.qdetective-cover-folder::before { content: ""; position: absolute; inset-block-start: -28px; inset-inline-start: 32px; width: 160px; height: 29px; border: 1px solid #846b3b; border-bottom: 0; border-radius: 9px 9px 0 0; background: #ceb275; }
.qdetective-cover-folder::after { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 16px; width: 1px; background: rgba(76,57,28,.22); box-shadow: 4px 0 rgba(255,255,255,.13); }
.qdetective-cover-folder__tab { position: absolute; inset-block-start: -19px; inset-inline-start: 60px; z-index: 2; font: 800 11px/1 monospace; }
.qdetective-cover-folder__stamp { position: absolute; z-index: 2; padding: 5px 12px; border: 3px double currentColor; border-radius: 4px; font-size: 11px; font-weight: 900; opacity: .82; }
.qdetective-cover-folder__stamp--red { inset-block-start: 22px; inset-inline-end: 28px; color: var(--qd-red); transform: rotate(6deg); }
.qdetective-cover-folder__stamp--blue { inset-block-start: 26px; inset-inline-start: 35px; color: #365d75; transform: rotate(-6deg); }
.qdetective-cover-folder header { padding-bottom: 17px; border-bottom: 3px double rgba(44,36,22,.7); text-align: center; }
.qdetective-cover-folder header p { margin: 0; font-size: 9px; font-weight: 900; letter-spacing: 1px; opacity: .7; }
.qdetective-cover-folder header > span { display: block; margin-top: 14px; font: 800 11px/1 monospace; }
.qdetective-cover-folder h1 { margin: 8px 0 0; color: #251e13; font-family: "Aref Ruqaa", Georgia, serif; font-size: clamp(27px, 5vw, 43px); line-height: 1.35; }
.qdetective-cover-folder__summary { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 17px; margin: 20px 0; align-items: start; }
.qdetective-cover-folder__summary p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.85; }
.qdetective-cover-folder__photo { position: relative; width: 88px; height: 100px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(46,36,19,.48); background: repeating-linear-gradient(0deg, rgba(45,35,19,.1) 0 1px, transparent 1px 10px), rgba(255,255,255,.16); }
.qdetective-cover-folder__photo svg { width: 88px; height: 100px; padding: 5px; fill: none; stroke: rgba(39,48,45,.76); stroke-width: 1.3; stroke-linejoin: round; }
.qdetective-cover-folder__photo .qdetective-cover-plan__frame { stroke: rgba(61,48,27,.32); stroke-dasharray: 2 2; }.qdetective-cover-folder__photo .qdetective-cover-plan__solid { fill: rgba(47,62,59,.12); }.qdetective-cover-folder__photo .qdetective-cover-plan__accent { stroke: #812b26; stroke-width: 1.6; stroke-dasharray: 2 1; }
.qdetective-cover-folder__photo small { position: absolute; inset-inline: 4px; inset-block-end: 3px; padding: 2px 3px; background: rgba(204,180,126,.78); color: #463820; font: 900 6px/1 monospace; text-align: center; }
.qdetective-cover-folder__meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; border-block: 1px solid rgba(53,42,23,.28); }
.qdetective-cover-folder__meta > div { padding: 9px 10px; border-inline-end: 1px solid rgba(53,42,23,.22); }
.qdetective-cover-folder__meta > div:last-child { border-inline-end: 0; }
.qdetective-cover-folder__meta dt { font-size: 8px; font-weight: 900; opacity: .62; }
.qdetective-cover-folder__meta dd { margin: 3px 0 0; font-size: 10px; font-weight: 800; }
.qdetective-cover-folder__review { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 9px; border: 1px solid rgba(103,76,29,.3); border-radius: 5px; background: rgba(255,248,217,.26); font-size: 9px; }
.qdetective-button--seal { width: 100%; border-color: #6c1916; background: linear-gradient(180deg, #a73530, #761f1b); color: #fff; box-shadow: 0 4px 0 #571411, inset 0 1px rgba(255,255,255,.18); }
.qdetective-button--seal:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #571411, 0 12px 30px rgba(91,20,17,.25); }
.qdetective-cover-folder__notice { margin: 10px 0 0; text-align: center; font-size: 9px; opacity: .66; }
.qdetective-cover-folder__barcode { display: block; width: 210px; height: 19px; margin: 19px auto 0; background: repeating-linear-gradient(90deg, #302719 0 1px, transparent 1px 3px, #302719 3px 5px, transparent 5px 8px, #302719 8px 9px, transparent 9px 12px); opacity: .48; }

/* =============================================================
   Case workspace
   ============================================================= */
.qdetective-dossier { min-height: 100vh; background: #11110f; }
.qdetective-casebar { position: sticky; inset-block-start: 0; z-index: 80; min-height: 72px; display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(160px, 300px) auto auto; align-items: center; gap: 14px; padding: 8px max(16px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid rgba(159,48,43,.52); background: rgba(18,18,15,.94); box-shadow: 0 10px 35px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.qdetective-casebar__back { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--qd-border); border-radius: 9px; color: #b2ada3 !important; font-size: 17px; text-decoration: none !important; }
.qdetective-casebar__back:hover { border-color: rgba(210,166,75,.4); color: #fff !important; }
.qdetective-casebar__identity { min-width: 0; line-height: 1.25; }
.qdetective-casebar__identity span { display: block; color: var(--qd-gold); font: 800 9px/1.2 monospace; }
.qdetective-casebar__identity strong { display: block; margin-top: 3px; overflow: hidden; color: #eee9df; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.qdetective-casebar__progress { display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: 8px; }
.qdetective-casebar__progress > span { height: 3px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.09); }
.qdetective-casebar__progress i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, var(--qd-red), var(--qd-gold)); transition: width .35s ease; }
.qdetective-casebar__progress small { color: #77736c; font-size: 9px; white-space: nowrap; }
.qdetective-casebar__clock { min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.qdetective-casebar__clock small { display: block; color: #68655e; font-size: 8px; }
.qdetective-casebar__clock strong { display: block; margin-top: 2px; color: #e5d09a; font: 800 17px/1 monospace; letter-spacing: 1px; }
.qdetective-casebar__actions { display: flex; gap: 5px; }
.qdetective-casebar__actions button { min-width: 46px; height: 42px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid var(--qd-border); border-radius: 9px; background: rgba(255,255,255,.03); color: #b2aea6; cursor: pointer; }
.qdetective-casebar__actions button:hover { border-color: rgba(210,166,75,.35); background: rgba(210,166,75,.06); }
.qdetective-casebar__actions b { font-size: 10px; }
.qdetective-casebar__actions i { min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--qd-red); color: #fff; font-size: 8px; font-style: normal; }

.qdetective-workspace { width: min(1220px, calc(100% - 30px)); margin: 0 auto; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; align-items: start; padding: 30px 0 90px; }
.qdetective-case-nav { position: sticky; inset-block-start: 102px; padding: 16px 12px; border: 1px solid var(--qd-border); border-radius: 12px; background: rgba(255,255,255,.024); }
.qdetective-case-nav > p { margin: 2px 8px 12px; color: #6f6c65; font-size: 9px; font-weight: 900; letter-spacing: .4px; }
.qdetective-case-nav [role="tablist"] { display: grid; gap: 3px; }
.qdetective-case-nav [role="tab"] { width: 100%; min-height: 48px; display: grid; grid-template-columns: 24px 24px minmax(0,1fr) 15px; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #7f7b74; text-align: start; cursor: pointer; }
.qdetective-case-nav [role="tab"]:hover { background: rgba(255,255,255,.035); color: #c9c5bb; }
.qdetective-case-nav [role="tab"].is-active { border-color: rgba(210,166,75,.22); background: rgba(210,166,75,.07); color: #e6d39f; }
.qdetective-case-nav [role="tab"] > span { font: 800 8px/1 monospace; opacity: .55; }
.qdetective-case-nav [role="tab"] > i { font-size: 16px; font-style: normal; text-align: center; }
.qdetective-case-nav [role="tab"] > b { font-size: 11px; }
.qdetective-case-nav [role="tab"] > em { display: none; color: var(--qd-green); font-style: normal; }
.qdetective-case-nav [role="tab"].is-visited > em { display: block; }
.qdetective-nav-status { margin-top: 14px; padding: 12px 8px 3px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--qd-border); color: #6f6b64; font-size: 9px; }
.qdetective-nav-status strong { color: var(--qd-gold); }

.qdetective-case-content { min-width: 0; }
.qdetective-panel { animation: qdetective-panel-in .25s ease both; }
@keyframes qdetective-panel-in { from { opacity: 0; transform: translateY(7px); } }
.qdetective-panel-intro { min-height: 112px; display: flex; align-items: center; gap: 17px; margin-bottom: 14px; padding: 20px 25px; border: 1px solid var(--qd-border); border-radius: 12px; background: linear-gradient(135deg, rgba(210,166,75,.08), rgba(255,255,255,.018)); }
.qdetective-panel-intro > span { color: rgba(210,166,75,.36); font: 800 54px/1 Georgia, serif; }
.qdetective-panel-intro p { margin: 0; color: var(--qd-gold); font-size: 9px; font-weight: 900; }
.qdetective-panel-intro h2 { margin: 3px 0 0; color: #eee9df; font-size: clamp(20px, 3.2vw, 32px); line-height: 1.4; }
.qdetective-panel-intro--red { background: linear-gradient(135deg, rgba(159,48,43,.13), rgba(255,255,255,.018)); }
.qdetective-panel-intro--red > span, .qdetective-panel-intro--red p { color: #d56e67; }

.qdetective-sheet-section { position: relative; margin-bottom: 14px; padding: 27px 28px 31px; border: 1px solid #9b8350; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(85,66,32,.025) 0 1px, transparent 1px 6px), var(--qd-paper); color: var(--qd-ink); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.65); }
.qdetective-sheet-section::before { content: ""; position: absolute; inset-block: 20px; inset-inline-start: 12px; width: 8px; background: radial-gradient(circle, #17130f 0 3px, transparent 4px) center top / 8px 48px repeat-y; opacity: .78; }
.qdetective-sheet-section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 3px double rgba(52,42,25,.48); }
.qdetective-sheet-section > header span { min-width: 34px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(52,42,25,.42); border-radius: 4px; font: 800 10px/1 monospace; }
.qdetective-sheet-section h3 { margin: 0; color: #2b2317; font-family: "Aref Ruqaa", Georgia, serif; font-size: 22px; }
.qdetective-records { display: grid; gap: 7px; }
.qdetective-record { position: relative; min-width: 0; padding: 10px 12px; border-bottom: 1px dashed rgba(92,72,36,.28); }
.qdetective-record:last-child { border-bottom: 0; }
.qdetective-record > div { min-width: 0; }
.qdetective-record strong { display: block; margin-bottom: 3px; color: #79241f; font-size: 11px; }
.qdetective-record p { margin: 0; color: #332b20; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.qdetective-record--bullet { padding-inline-start: 27px; }
.qdetective-record--bullet::before { content: "▪"; position: absolute; inset-inline-start: 11px; color: var(--qd-red); }
.qdetective-record--markable { padding-inline-end: 46px; border: 1px solid rgba(92,72,36,.2); border-radius: 7px; background: rgba(255,255,255,.18); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.qdetective-record--markable:hover { transform: translateY(-1px); border-color: rgba(121,36,31,.42); background: rgba(255,255,255,.36); }
.qdetective-record--markable.is-marked { border-color: var(--qd-red); background: rgba(159,48,43,.08); box-shadow: inset 4px 0 var(--qd-red); }
.qdetective-record__check { position: absolute; inset-inline-end: 12px; inset-block-start: 12px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(61,48,26,.36); border-radius: 50%; color: transparent; font-size: 11px; }
.qdetective-record.is-marked .qdetective-record__check { border-color: var(--qd-red); background: var(--qd-red); color: #fff; }
.qdetective-mark-help { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid rgba(210,166,75,.18); border-radius: 8px; background: rgba(210,166,75,.045); color: #9c978b; font-size: 10px; }
.qdetective-mark-help span { color: var(--qd-gold); }

/* Investigation wall and scene diagrams */
.qdetective-link-board { position: relative; margin-bottom: 14px; overflow: hidden; border: 1px solid #8f7441; border-radius: 9px; background: repeating-linear-gradient(94deg, rgba(48,36,19,.035) 0 1px, transparent 1px 7px), linear-gradient(145deg, #cdb27b, #b89658); color: #2f271a; box-shadow: 0 16px 45px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.35); }
.qdetective-link-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 23%, rgba(62,43,15,.13) 0 1px, transparent 2px), radial-gradient(circle at 78% 70%, rgba(255,255,255,.11) 0 1px, transparent 2px); background-size: 31px 29px, 43px 37px; mix-blend-mode: multiply; }
.qdetective-link-board__header { position: relative; z-index: 3; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 22px; border-bottom: 3px double rgba(48,38,22,.45); background: rgba(238,220,174,.24); }
.qdetective-link-board__header > div span { display: block; color: #812b25; font: 900 8px/1 monospace; letter-spacing: .7px; }
.qdetective-link-board__header h3 { margin: 4px 0 0; font-family: "Aref Ruqaa", Georgia, serif; font-size: 24px; }
.qdetective-link-board__header p { max-width: 390px; margin: 0; padding-inline-start: 14px; border-inline-start: 2px solid rgba(119,39,34,.35); color: #66583d; font-size: 9.5px; line-height: 1.8; }
.qdetective-link-board__canvas { position: relative; min-height: 420px; display: grid; grid-template-columns: minmax(150px,1fr) 180px minmax(150px,1fr); align-items: center; gap: clamp(18px,4vw,56px); padding: 34px clamp(22px,4vw,48px); isolation: isolate; }
.qdetective-link-board__threads { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(35,20,12,.22)); }
.qdetective-link-board__threads line { fill: none; stroke: #8f2d28; stroke-width: 1.7; stroke-dasharray: 3 2; opacity: .75; vector-effect: non-scaling-stroke; animation: qdetective-thread-in .8s ease both; }
.qdetective-link-board__threads line.is-evidence { stroke: #3e6271; stroke-dasharray: none; opacity: .67; }
.qdetective-link-board__threads circle { fill: #a93631; stroke: #ead6a9; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qdetective-link-board__threads circle.is-evidence { fill: #3e6271; }
@keyframes qdetective-thread-in { from { stroke-dashoffset: 40; opacity: 0; } }
.qdetective-link-board__column { position: relative; z-index: 2; display: grid; gap: 11px; align-content: center; }
.qdetective-link-board__column > strong { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; color: #54462f; font-size: 9px; }
.qdetective-link-board__column > strong i { width: 8px; height: 8px; border-radius: 50%; background: #9d322d; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.qdetective-link-board__column--evidence > strong i { background: #426978; }
.qdetective-link-board__node { position: relative; min-height: 47px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(68,51,26,.32); background: #ede0bd; color: #3b3121; box-shadow: 0 5px 10px rgba(61,43,17,.12); font-size: 10px; font-weight: 800; line-height: 1.55; transform: rotate(.8deg); }
.qdetective-link-board__node:nth-of-type(even) { transform: rotate(-1deg); }
.qdetective-link-board__node::before { content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: 50%; width: 9px; height: 9px; border-radius: 50%; background: #9e312c; box-shadow: 0 2px 3px rgba(0,0,0,.38); }
.qdetective-link-board__column--evidence .qdetective-link-board__node { background: #dbe3df; }
.qdetective-link-board__column--evidence .qdetective-link-board__node::before { background: #426978; }
.qdetective-link-board__node b { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 900 8px/1 monospace; opacity: .7; }
.qdetective-link-board__origin { position: relative; z-index: 3; min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 15px; border: 1px solid #725827; background: repeating-linear-gradient(0deg, rgba(65,49,24,.05) 0 1px, transparent 1px 5px), #ead8aa; box-shadow: 0 13px 28px rgba(52,37,15,.26); text-align: center; transform: rotate(-1.2deg); }
.qdetective-link-board__origin::before, .qdetective-link-board__origin::after { content: ""; position: absolute; inset-block-start: -7px; width: 45px; height: 14px; background: rgba(235,220,175,.72); box-shadow: 0 1px 2px rgba(47,34,16,.12); transform: rotate(-8deg); }
.qdetective-link-board__origin::before { inset-inline-start: 10px; }.qdetective-link-board__origin::after { inset-inline-end: 10px; transform: rotate(7deg); }
.qdetective-link-board__origin > span { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 9px; border: 2px solid #8b302b; border-radius: 50%; color: #8b302b; font-size: 23px; }
.qdetective-link-board__origin small { color: #796846; font-size: 8px; font-weight: 900; }
.qdetective-link-board__origin strong { margin-top: 4px; color: #8b302b; font: 900 18px/1 monospace; }
.qdetective-link-board__origin p { margin: 9px 0 0; font-family: "Aref Ruqaa", Georgia, serif; font-size: 16px; font-weight: 800; line-height: 1.45; }
.qdetective-investigation-flow { position: relative; z-index: 3; margin: 0; padding: 14px 25px 17px; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(58,44,23,.3); background: rgba(239,222,180,.2); list-style: none; }
.qdetective-investigation-flow::before { content: ""; position: absolute; inset-inline: 10%; inset-block-start: 27px; height: 1px; background: rgba(72,53,25,.34); }
.qdetective-investigation-flow li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: #6c5c3e; font-size: 8px; font-weight: 900; }
.qdetective-investigation-flow span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #8e794d; border-radius: 50%; background: #c5a86d; font: 800 7px/1 monospace; }
.qdetective-investigation-flow .is-current { color: #842b26; }.qdetective-investigation-flow .is-current span { border-color: #842b26; background: #842b26; color: #fff; box-shadow: 0 0 0 4px rgba(132,43,38,.13); }

.qdetective-scene-blueprint { margin-bottom: 14px; overflow: hidden; border: 1px solid #55717d; border-radius: 9px; background: #e3e1d6; color: #1d3139; box-shadow: 0 14px 40px rgba(0,0,0,.24); }
.qdetective-scene-blueprint > header { min-height: 71px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 20px; border-bottom: 1px solid rgba(32,63,75,.36); background: linear-gradient(90deg, rgba(42,81,95,.1), transparent); }
.qdetective-scene-blueprint > header span { display: block; color: #9a322c; font: 900 8px/1 monospace; letter-spacing: .7px; }
.qdetective-scene-blueprint > header h3 { margin: 4px 0 0; font-family: "Aref Ruqaa", Georgia, serif; font-size: 23px; }
.qdetective-scene-blueprint > header > i { padding: 6px 9px; border: 1px solid rgba(37,70,81,.35); color: #365968; font: 800 8px/1 monospace; font-style: normal; white-space: nowrap; }
.qdetective-scene-blueprint__drawing { overflow-x: auto; scrollbar-color: #4e6973 transparent; }
.qdetective-scene-blueprint__drawing svg { display: block; width: 100%; min-width: 680px; height: auto; max-height: 490px; }
.qdetective-plan-paper { fill: #e8e7dc; }.qdetective-plan-grid { fill: none; stroke: rgba(39,79,94,.16); stroke-width: .7; }.qdetective-plan-grid--small { stroke: rgba(39,79,94,.06); stroke-width: .5; }
.qdetective-plan-frame { fill: none; stroke: #41616e; stroke-width: 1.2; }.qdetective-plan-arrow { fill: #9c332d; }.qdetective-plan-compass circle { fill: rgba(232,231,220,.8); stroke: #345764; }.qdetective-plan-compass path { fill: #345764; }.qdetective-plan-compass text { fill: #345764; font: 800 11px monospace; text-anchor: middle; }
.qdetective-plan-guide { fill: none; stroke: #6d858d; stroke-width: 1; stroke-dasharray: 7 7; }.qdetective-plan-rail { fill: none; stroke: #274b58; stroke-width: 5; }.qdetective-plan-sleeper { stroke: #5d737b; stroke-width: 2; }.qdetective-plan-boundary { stroke: #9c332d; stroke-width: 3; }
.qdetective-plan-transit g path, .qdetective-plan-transit g rect { fill: rgba(45,83,96,.1); stroke: #2f5664; stroke-width: 2; }.qdetective-plan-transit g circle { fill: #e8e7dc; stroke: #2f5664; stroke-width: 2; }
.qdetective-plan-route { fill: none !important; stroke: #9c332d !important; stroke-width: 2.3 !important; stroke-dasharray: 8 5; animation: qdetective-route 13s linear infinite; }.qdetective-plan-water { fill: none !important; stroke: #477486 !important; stroke-width: 1.5 !important; }
@keyframes qdetective-route { to { stroke-dashoffset: -130; } }
.qdetective-plan-vessel path { fill: none; stroke: #315966; stroke-width: 2; }.qdetective-plan-vessel > path:first-child { fill: rgba(48,91,106,.11); stroke-width: 3; }.qdetective-plan-vessel circle { fill: #e8e7dc; stroke: #315966; stroke-width: 2; }
.qdetective-plan-building > path { fill: none; stroke: #315966; stroke-width: 4; stroke-linejoin: round; }.qdetective-plan-building .qdetective-plan-door { stroke: #9c332d; stroke-width: 1.7; stroke-dasharray: 3 2; }.qdetective-plan-building rect, .qdetective-plan-building circle { fill: rgba(49,89,102,.08); stroke: #315966; stroke-width: 1.5; }.qdetective-plan-building .qdetective-plan-dimension { stroke: #6b858e; stroke-width: 1; }.qdetective-plan-building text { fill: #627b84; font: 800 9px monospace; text-anchor: middle; }
.qdetective-plan-field > path { fill: none; stroke: #436873; stroke-width: 1.5; }.qdetective-plan-field > path:nth-child(2), .qdetective-plan-field > path:nth-child(3) { stroke-dasharray: 4 3; opacity: .8; }.qdetective-plan-field circle { fill: rgba(50,91,104,.06); stroke: #315966; stroke-width: 1.5; }.qdetective-plan-crosshair { fill: none; stroke: #9c332d !important; stroke-width: 1 !important; stroke-dasharray: 4 4; }
.qdetective-plan-hotspot circle:first-child { fill: rgba(156,51,45,.08); stroke: #9c332d; stroke-width: 2; animation: qdetective-hotspot 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.qdetective-plan-hotspot circle:nth-child(2) { fill: #9c332d; }.qdetective-plan-hotspot text { fill: #9c332d; font: 900 12px monospace; text-anchor: middle; }
@keyframes qdetective-hotspot { 50% { transform: scale(1.22); opacity: .6; } }
.qdetective-plan-scale path { fill: none; stroke: #3d606c; }.qdetective-plan-scale text { fill: #4b6872; font: 800 8px monospace; }
.qdetective-scene-blueprint__legend { margin: 0; padding: 14px 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 18px; border-top: 1px solid rgba(32,63,75,.25); list-style: none; }
.qdetective-scene-blueprint__legend li { min-width: 0; display: flex; align-items: center; gap: 8px; color: #304852; font-size: 10px; font-weight: 700; line-height: 1.55; }
.qdetective-scene-blueprint__legend span { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border: 1px solid #9b342e; border-radius: 50%; color: #9b342e; font: 900 8px/1 monospace; }
.qdetective-scene-blueprint__note { margin: 0; padding: 9px 20px; display: flex; gap: 7px; border-top: 1px dashed rgba(38,69,80,.27); background: rgba(41,77,90,.06); color: #58717a; font-size: 8.5px; line-height: 1.7; }
.qdetective-scene-blueprint__note span { color: #9b342e; }

/* Reviewed, source-grounded visual reconstructions for the three-case pilot. */
.qdetective-case-map { margin-bottom: 16px; overflow: hidden; border: 1px solid #536f7b; border-radius: 10px; background: #e7e5d9; color: #203943; box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.qdetective-case-map__header { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 21px; border-bottom: 3px double rgba(37,72,84,.35); background: linear-gradient(110deg, rgba(49,91,106,.14), rgba(255,255,255,.24) 62%, rgba(146,47,42,.07)); }
.qdetective-case-map__header > div:first-child { min-width: 0; }
.qdetective-case-map__header > div:first-child > span { color: #98342e; font: 900 8px/1 monospace; letter-spacing: .7px; }
.qdetective-case-map__header h3 { margin: 4px 0 3px; font-family: "Aref Ruqaa", Georgia, serif; font-size: clamp(22px,3vw,30px); line-height: 1.2; }
.qdetective-case-map__header p { max-width: 650px; margin: 0; color: #536a73; font-size: 10px; line-height: 1.8; }
.qdetective-case-map__status { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(42,92,72,.33); border-radius: 7px; background: rgba(223,239,226,.55); color: #315f4a; }
.qdetective-case-map__status i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-style: normal; }
.qdetective-case-map__status span { font-size: 8px; font-weight: 900; white-space: nowrap; }.qdetective-case-map__status small { display: block; margin-top: 3px; color: #61776c; font-size: 6px; }
.qdetective-case-map__workspace { display: grid; grid-template-columns: minmax(0,1.72fr) minmax(220px,.72fr); min-height: 505px; }
.qdetective-case-map__stage-scroll { min-width: 0; overflow: auto; border-inline-end: 1px solid rgba(37,72,84,.25); scrollbar-color: #54727e transparent; }
.qdetective-case-map__surface { position: relative; width: 100%; min-width: 690px; min-height: 505px; isolation: isolate; background-color: #e9e8dd; background-image: linear-gradient(rgba(45,85,99,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(45,85,99,.09) 1px, transparent 1px), linear-gradient(rgba(45,85,99,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(45,85,99,.035) 1px, transparent 1px), radial-gradient(circle at 75% 20%, rgba(255,255,255,.5), transparent 42%); background-size: 32px 32px,32px 32px,8px 8px,8px 8px,100% 100%; }
.qdetective-case-map__surface::after { content: "CASE RECONSTRUCTION / NOT TO SCALE"; position: absolute; z-index: 0; inset-inline-start: 22px; inset-block-end: 13px; color: rgba(38,72,84,.37); font: 800 7px/1 monospace; letter-spacing: 1px; }
.qdetective-case-map__routes { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qdetective-case-map__routes path { fill: none; stroke: #9a342e; stroke-width: 2; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px rgba(255,255,255,.8)); animation: qdetective-route 13s linear infinite; }
.qdetective-case-map__routes circle { fill: #9a342e; stroke: #e9e8dd; stroke-width: 2; vector-effect: non-scaling-stroke; }
.qdetective-case-map__north { position: absolute; z-index: 1; inset-block-start: 18px; inset-inline-end: 20px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(43,78,90,.55); border-radius: 50%; color: #315764; }
.qdetective-case-map__north::before,.qdetective-case-map__north::after { content: ""; position: absolute; background: currentColor; opacity: .55; }.qdetective-case-map__north::before { width: 1px; height: 54px; }.qdetective-case-map__north::after { width: 54px; height: 1px; }
.qdetective-case-map__north b { position: absolute; inset-block-start: -15px; font-size: 8px; }.qdetective-case-map__north i { width: 0; height: 0; border-inline: 5px solid transparent; border-block-end: 17px solid currentColor; transform: translateY(-7px); }
.qdetective-case-map__zone { position: absolute; z-index: 2; left: var(--qd-x); top: var(--qd-y); width: var(--qd-w); height: var(--qd-h); min-width: 95px; min-height: 70px; display: flex; flex-direction: column; padding: 8px; border: 2px solid #446773; background: rgba(232,232,220,.88); box-shadow: inset 0 0 0 3px rgba(255,255,255,.36), 3px 4px 0 rgba(46,75,84,.09); transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.qdetective-case-map__zone::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(52,91,103,.24); pointer-events: none; }
.qdetective-case-map__zone--path { border-style: dashed; border-color: #9a342e; background: repeating-linear-gradient(135deg,rgba(154,52,46,.07) 0 7px,transparent 7px 14px),rgba(236,229,214,.85); }
.qdetective-case-map__zone--seat { border-radius: 18px 18px 5px 5px; border-color: #4c6d79; }
.qdetective-case-map__zone--vehicle { border-radius: 25px 7px 7px 25px; }
.qdetective-case-map__zone--room { border-width: 3px; }
.qdetective-case-map__zone > header { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 7px; }
.qdetective-case-map__zone > header small { color: #8b312d; font: 800 6px/1 monospace; }.qdetective-case-map__zone > header strong { font-size: 9.5px; line-height: 1.4; text-align: end; }
.qdetective-case-map__actors { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.qdetective-case-map__actors span { max-width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid rgba(43,70,79,.35); border-radius: 999px; background: #f1e4bd; color: #3b3424; font-size: 7px; font-weight: 900; line-height: 1.2; transition: opacity .2s ease, box-shadow .2s ease; }.qdetective-case-map__actors i { color: #9c342e; font-size: 6px; font-style: normal; }
.qdetective-case-map__pins { position: absolute; z-index: 4; inset-inline-start: calc(100% - 15px); inset-block-start: 23px; display: grid; gap: 4px; }
.qdetective-case-map__pins button { width: max-content; max-width: 130px; min-height: 25px; display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border: 1px solid #8d302b; border-radius: 999px; background: #f4e9cc; color: #6f2925; box-shadow: 0 3px 7px rgba(65,42,29,.2); cursor: pointer; font-size: 6.5px; font-weight: 900; text-align: start; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.qdetective-case-map__pins button span { flex: 0 0 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #99352f; color: #fff; font-size: 9px; }
.qdetective-case-map__pins button:hover,.qdetective-case-map__pins button:focus-visible { transform: translateX(-3px); outline: 2px solid rgba(154,52,46,.3); outline-offset: 2px; }
.qdetective-case-map__evidence { min-width: 0; display: flex; flex-direction: column; background: repeating-linear-gradient(0deg,rgba(50,72,79,.025) 0 1px,transparent 1px 6px),#d9d6c8; }
.qdetective-case-map__evidence > header { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid rgba(39,70,81,.22); color: #5a7179; font-size: 8px; font-weight: 900; }
.qdetective-case-map__evidence > header button { padding: 4px 7px; border: 1px solid #96342e; border-radius: 999px; background: transparent; color: #96342e; cursor: pointer; font-size: 7px; }
.qdetective-case-map__evidence > div { display: grid; gap: 7px; padding: 9px; overflow: auto; }
.qdetective-case-map__evidence-card { width: 100%; min-height: 58px; display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 1px 8px; align-content: center; padding: 8px; border: 1px solid rgba(50,75,83,.25); border-radius: 5px; background: rgba(245,240,219,.72); color: #263f48; cursor: pointer; text-align: start; box-shadow: 0 3px 7px rgba(47,62,64,.06); transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.qdetective-case-map__evidence-card > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #9a342e; border-radius: 50%; color: #9a342e; font: 900 7px/1 monospace; }.qdetective-case-map__evidence-card strong { font-size: 8px; }.qdetective-case-map__evidence-card small { color: #64787e; font-size: 6.8px; line-height: 1.5; }
.qdetective-case-map__evidence-card:hover,.qdetective-case-map__evidence-card:focus-visible { transform: translateY(-1px); border-color: #9a342e; outline: none; box-shadow: 0 6px 15px rgba(65,55,40,.14); }
.qdetective-case-map.has-focus [data-qdetective-plan-item] { opacity: .18; }
.qdetective-case-map.has-focus [data-qdetective-plan-item].is-plan-focused { opacity: 1; box-shadow: 0 0 0 3px rgba(157,53,47,.19), 0 8px 22px rgba(63,49,34,.17); }
.qdetective-case-map.has-focus .qdetective-case-map__zone.is-plan-focused { z-index: 3; transform: scale(1.025); border-color: #9d352f; }
.qdetective-case-map.has-focus .qdetective-case-map__evidence-card.is-plan-focused { transform: translateX(-3px); }
.qdetective-case-map__unplaced { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 15px; border-top: 1px solid rgba(44,75,85,.2); background: #d8d4c3; color: #405d66; }
.qdetective-case-map__unplaced > strong { margin-inline-end: 6px; font-size: 8px; }.qdetective-case-map__unplaced > span { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(62,87,94,.28); border-radius: 999px; background: #eee3c3; color: #423a29; font-size: 7.5px; font-weight: 900; }.qdetective-case-map__unplaced small { color: #766e5c; font-size: 6px; font-weight: 600; }
.qdetective-case-map__timeline { position: relative; margin: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 0; padding: 13px 15px; border-top: 1px solid rgba(43,75,86,.22); border-bottom: 1px solid rgba(43,75,86,.22); background: #d0cebf; list-style: none; }
.qdetective-case-map__timeline::before { content: ""; position: absolute; inset-inline: 55px; inset-block-start: 30px; height: 1px; background: #8e332e; opacity: .38; }
.qdetective-case-map__timeline li { position: relative; z-index: 1; }.qdetective-case-map__timeline button { width: 100%; display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; color: #2f4a53; cursor: pointer; }.qdetective-case-map__timeline span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #8e332e; border-radius: 50%; background: #e6e2d2; color: #8e332e; font: 900 7px/1 monospace; }.qdetective-case-map__timeline small { color: #8b312d; font-size: 6.5px; }.qdetective-case-map__timeline strong { font-size: 8px; }
.qdetective-case-map__timeline button.is-plan-trigger,.qdetective-case-map__questions button.is-plan-trigger { color: #8d302b; }
.qdetective-case-map__timeline button.is-plan-trigger span { background: #91332e; color: #fff; }
.qdetective-case-map__questions { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 10px; padding: 14px 16px; background: #eee9d9; }
.qdetective-case-map__questions > header { display: flex; align-items: center; gap: 9px; }.qdetective-case-map__questions > header > span { flex: 0 0 39px; height: 39px; display: grid; place-items: center; border: 2px solid #96342e; border-radius: 50%; color: #96342e; font-family: "Aref Ruqaa",serif; font-size: 23px; }.qdetective-case-map__questions header strong { display: block; font-size: 9px; }.qdetective-case-map__questions header small { display: block; margin-top: 3px; color: #6e7978; font-size: 6.5px; line-height: 1.4; }
.qdetective-case-map__questions > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 6px; }.qdetective-case-map__questions button { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 45px; padding: 8px 10px; border: 1px dashed rgba(54,83,91,.38); background: rgba(255,255,255,.3); color: #334d55; cursor: pointer; font-size: 7.5px; font-weight: 800; line-height: 1.55; text-align: start; }.qdetective-case-map__questions button:hover,.qdetective-case-map__questions button:focus-visible { border-color: #96342e; outline: none; }.qdetective-case-map__questions button span { color: #96342e; font-size: 13px; }
.qdetective-case-map__note { margin: 0; display: flex; gap: 7px; padding: 9px 16px; border-top: 1px dashed rgba(43,74,84,.25); background: rgba(41,77,90,.06); color: #5b7279; font-size: 8px; line-height: 1.7; }.qdetective-case-map__note span { color: #98342e; }

.qdetective-sheet-section--suspects .qdetective-records { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.qdetective-record--suspects { min-height: 205px; display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 15px; padding: 14px !important; padding-inline-end: 44px !important; border: 1px solid rgba(75,57,31,.29); background: rgba(255,255,255,.22); }
.qdetective-record__mug { position: relative; width: 88px; height: 112px; display: grid; place-items: end center; overflow: hidden; border: 1px solid rgba(55,43,25,.48); background: repeating-linear-gradient(0deg, rgba(54,42,24,.13) 0 1px, transparent 1px 14px), linear-gradient(#c7b98f,#e5d9b4); box-shadow: 3px 4px 0 rgba(70,51,25,.12); }
.qdetective-record__mug::before { content: "ID / PERSON"; position: absolute; inset-block-start: 5px; inset-inline-start: 6px; z-index: 1; color: rgba(49,39,23,.65); font: 700 6px/1 monospace; }.qdetective-record__mug svg { width: 77px; height: 83px; fill: rgba(48,42,31,.72); }.qdetective-record__mug i { position: absolute; inset-inline: 5px; inset-block-end: 5px; height: 9px; background: repeating-linear-gradient(90deg,#382f20 0 1px,transparent 1px 3px); opacity: .65; }
.qdetective-record--suspects strong { font-family: "Aref Ruqaa", Georgia, serif; font-size: 16px; }.qdetective-record--suspects p { font-size: 10.5px; line-height: 1.75; }
.qdetective-sheet-section--evidence .qdetective-records { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.qdetective-record--evidence { min-height: 95px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px; padding: 13px 14px !important; padding-inline-end: 44px !important; border: 1px solid rgba(75,57,31,.27); background: rgba(255,255,255,.25); }.qdetective-record__evidence-mark { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #812d28; border-radius: 50%; color: #812d28; font-size: 19px; }.qdetective-record--evidence strong { color: #365e6d; }.qdetective-record--evidence p { font-size: 10.5px; line-height: 1.7; }

/* Accusation and verdict */
.qdetective-accusation { padding: 28px; border: 1px solid var(--qd-border); border-radius: 13px; background: rgba(255,255,255,.027); }
.qdetective-cliffhanger-note { display: flex; gap: 12px; margin-bottom: 20px; padding: 13px; border: 1px solid rgba(63,104,129,.36); border-radius: 9px; background: rgba(63,104,129,.1); }
.qdetective-cliffhanger-note > span { color: #87b6d0; font-size: 24px; }
.qdetective-cliffhanger-note strong { display: block; color: #b7d6e7; font-size: 12px; }
.qdetective-cliffhanger-note p { margin: 3px 0 0; color: #859ca8; font-size: 10px; }
.qdetective-theory-field { display: block; }
.qdetective-theory-field > span { display: block; color: #f0ebe1; font-size: 14px; font-weight: 900; }
.qdetective-theory-field > small { display: block; margin: 4px 0 10px; color: #77736c; font-size: 10px; }
.qdetective-theory-field textarea,
.qdetective-drawer textarea { width: 100%; resize: vertical; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: 0; background: #12120f; color: #e5dfd4; padding: 14px; line-height: 1.9; caret-color: var(--qd-gold); }
.qdetective-theory-field textarea:focus,
.qdetective-drawer textarea:focus { border-color: rgba(210,166,75,.52); box-shadow: 0 0 0 3px rgba(210,166,75,.08); }
.qdetective-theory-field > i { display: block; margin-top: 4px; color: #67645d; font-size: 9px; font-style: normal; text-align: end; }
.qdetective-confidence { margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; }
.qdetective-confidence legend { grid-column: 1 / -1; margin-bottom: 6px; color: #aba69d; font-size: 10px; font-weight: 900; }
.qdetective-confidence label { position: relative; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--qd-border); border-radius: 9px; background: rgba(255,255,255,.022); color: #8e8a82; cursor: pointer; }
.qdetective-confidence input { position: absolute; opacity: 0; }
.qdetective-confidence label:has(input:checked) { border-color: rgba(210,166,75,.48); background: rgba(210,166,75,.08); color: #e6ca8a; }
.qdetective-confidence label:has(input:focus-visible) { outline: 3px solid #e2ba68; outline-offset: 3px; }
.qdetective-confidence label span { font-size: 20px; }
.qdetective-confidence label b { font-size: 10px; }
.qdetective-form-error { margin: 0 0 10px; padding: 9px 11px; border: 1px solid rgba(201,72,64,.4); border-radius: 7px; background: rgba(159,48,43,.1); color: #e49b96; font-size: 10px; }
.qdetective-button--accuse { width: 100%; border-color: #b94640; background: linear-gradient(180deg, #a93631, #79201c); color: #fff; box-shadow: 0 4px 0 #561511; }
.qdetective-button--accuse[disabled] { opacity: .55; cursor: wait; transform: none; }
.qdetective-accusation__security { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 0; color: #625f59; font-size: 9px; text-align: center; }

.qdetective-verdict { overflow: hidden; border: 1px solid #9b8350; border-radius: 10px; background: var(--qd-paper); color: var(--qd-ink); box-shadow: 0 25px 65px rgba(0,0,0,.35); }
.qdetective-verdict__head { padding: 35px 25px 28px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(159,48,43,.12), transparent 17rem), var(--qd-paper-light); border-bottom: 1px solid var(--qd-line); }
.qdetective-verdict__stamp { display: inline-block; padding: 7px 22px; border: 4px double var(--qd-red); border-radius: 6px; color: var(--qd-red); font-family: "Aref Ruqaa", Georgia, serif; font-size: 21px; font-weight: 900; transform: rotate(-3deg); }
.qdetective-verdict__head h2 { margin: 17px 0 5px; color: #2c2417; font-size: 27px; }
.qdetective-verdict__head p { margin: 0; color: #746446; font-size: 11px; }
.qdetective-verdict__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 15px; margin-top: 13px; color: #6a5b40; font-size: 10px; }
.qdetective-verdict__theory { margin: 22px; padding: 15px; border: 1px dashed var(--qd-line); border-radius: 7px; background: rgba(255,255,255,.28); }
.qdetective-verdict__theory strong { display: block; margin-bottom: 6px; color: var(--qd-red); font-size: 11px; }
.qdetective-verdict__theory p { margin: 0; white-space: pre-wrap; font-size: 12px; line-height: 1.9; }
.qdetective-verdict__section { margin: 0 22px; padding: 22px 0; border-bottom: 1px dashed rgba(87,68,34,.3); }
.qdetective-verdict__section:last-of-type { border-bottom: 0; }
.qdetective-verdict__section h3 { margin: 0 0 12px; color: var(--qd-red); font-family: "Aref Ruqaa", Georgia, serif; font-size: 20px; }
.qdetective-verdict__section p { margin: 0 0 9px; font-size: 12px; line-height: 1.95; }
.qdetective-self-review { margin: 5px 22px 22px; padding: 17px; border: 1px solid var(--qd-line); border-radius: 8px; background: #e3d5ad; }
.qdetective-self-review h3 { margin: 0; font-size: 15px; }
.qdetective-self-review p { margin: 3px 0 12px; color: #6d5e43; font-size: 10px; }
.qdetective-self-review div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qdetective-self-review button { padding: 9px 6px; border: 1px solid #9b8350; border-radius: 7px; background: rgba(255,255,255,.4); color: #3b3020; cursor: pointer; font-size: 10px; font-weight: 900; }
.qdetective-self-review button:hover,
.qdetective-self-review button.is-selected { border-color: var(--qd-red); background: var(--qd-red); color: #fff; }
.qdetective-verdict__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 20px; border-top: 1px solid var(--qd-line); background: #dfcfaa; }
.qdetective-verdict__actions a { padding: 9px 15px; border: 1px solid #8c7446; border-radius: 7px; background: rgba(255,255,255,.35); color: #342a1b !important; font-size: 10px; font-weight: 900; text-decoration: none !important; }
.qdetective-verdict__actions a.qdetective-verdict__next { border-color: var(--qd-red); background: var(--qd-red); color: #fff !important; }

.qdetective-mobile-tabs { display: none; }

/* Drawers, modal, effects */
.qdetective-drawer,
.qdetective-modal { position: fixed; inset: 0; z-index: 300; }
.qdetective-drawer__backdrop,
.qdetective-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.qdetective-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(430px, 94vw); padding: 25px; overflow-y: auto; border-inline-start: 1px solid rgba(210,166,75,.25); background: #1a1915; color: #e8e2d7; box-shadow: -20px 0 60px rgba(0,0,0,.4); animation: qdetective-drawer-in .25s ease both; }
@keyframes qdetective-drawer-in { from { transform: translateX(-100%); } }
[dir="ltr"] .qdetective-drawer__panel { animation-name: qdetective-drawer-in-ltr; }
@keyframes qdetective-drawer-in-ltr { from { transform: translateX(100%); } }
.qdetective-drawer__panel > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--qd-border); }
.qdetective-drawer__panel > header span { color: var(--qd-gold); font-size: 9px; font-weight: 900; }
.qdetective-drawer__panel h2 { margin: 2px 0 0; font-family: "Aref Ruqaa", Georgia, serif; font-size: 28px; }
.qdetective-drawer__panel > header button { width: 35px; height: 35px; border: 1px solid var(--qd-border); border-radius: 8px; background: transparent; color: #aaa59c; cursor: pointer; font-size: 22px; }
.qdetective-drawer__panel > p { color: #7f7b73; font-size: 10px; }
.qdetective-drawer__panel textarea { min-height: 300px; }
.qdetective-drawer__panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #68645e; font-size: 9px; }
.qdetective-drawer__panel > footer button { padding: 7px 10px; border: 1px solid var(--qd-border); border-radius: 7px; background: rgba(255,255,255,.04); color: #c2bdb4; cursor: pointer; font-size: 10px; }
.qdetective-envelopes { display: grid; gap: 9px; margin-top: 18px; }
.qdetective-envelopes > button { width: 100%; min-height: 105px; padding: 16px; border: 1px solid #846c3e; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(61,47,25,.035) 0 1px, transparent 1px 5px), #c8ad72; color: #302718; text-align: start; cursor: pointer; }
.qdetective-envelopes > button:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(0,0,0,.2); }
.qdetective-envelope__closed { display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
.qdetective-envelope__closed i { grid-row: 1 / 3; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(51,40,22,.35); border-radius: 50%; font-size: 20px; font-style: normal; }
.qdetective-envelope__closed b { font-size: 12px; }
.qdetective-envelope__closed small { opacity: .68; font-size: 9px; }
.qdetective-envelope__open { display: block; font-size: 12px; line-height: 1.9; }
.qdetective-envelopes > button.is-open { background: var(--qd-paper-light); cursor: default; }

.qdetective-modal { display: grid; place-items: center; padding: 18px; }
.qdetective-modal > section { position: relative; width: min(450px, 100%); padding: 30px; border: 1px solid #9b8350; border-radius: 10px; background: var(--qd-paper); color: var(--qd-ink); text-align: center; box-shadow: 0 35px 100px rgba(0,0,0,.7); animation: qdetective-modal-in .22s ease both; }
@keyframes qdetective-modal-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.qdetective-modal__seal { width: 57px; height: 57px; display: grid; place-items: center; margin: 0 auto 10px; border: 3px double var(--qd-red); border-radius: 50%; color: var(--qd-red); font: 900 23px/1 serif; transform: rotate(-5deg); }
.qdetective-modal > section > p:first-of-type { margin: 0; color: var(--qd-red); font-size: 9px; font-weight: 900; }
.qdetective-modal h2 { margin: 5px 0 8px; font-family: "Aref Ruqaa", Georgia, serif; font-size: 25px; }
.qdetective-modal h2 + p { margin: 0; color: #6d5e43; font-size: 11px; line-height: 1.85; }
.qdetective-modal section > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7px; margin-top: 20px; }
.qdetective-modal section button { min-height: 41px; border: 1px solid #917747; border-radius: 7px; background: transparent; color: #342a1b; cursor: pointer; font-weight: 900; font-size: 10px; }
.qdetective-modal section button:last-child { border-color: var(--qd-red); background: var(--qd-red); color: #fff; }
.qdetective-stamp-effect { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(0,0,0,.8); }
.qdetective-stamp-effect span { padding: 15px 37px; border: 7px double #cc4941; border-radius: 10px; color: #d5524a; font-family: "Aref Ruqaa", Georgia, serif; font-size: clamp(30px, 8vw, 58px); font-weight: 900; transform: rotate(-7deg); animation: qdetective-stamp .65s cubic-bezier(.2,1.35,.3,1) both; }
@keyframes qdetective-stamp { from { opacity: 0; transform: scale(3) rotate(-20deg); } 65% { opacity: 1; transform: scale(.9) rotate(-5deg); } }
.qdetective-toast { position: fixed; z-index: 600; inset-inline-start: 50%; inset-block-end: 25px; transform: translateX(50%); max-width: min(90vw, 420px); padding: 10px 15px; border: 1px solid rgba(210,166,75,.3); border-radius: 999px; background: #26231b; color: #e6d7b4; box-shadow: 0 10px 35px rgba(0,0,0,.4); font-size: 10px; font-weight: 800; text-align: center; }
.qdetective-noscript { position: fixed; z-index: 1000; inset-inline: 20px; inset-block-end: 20px; padding: 12px; border-radius: 8px; background: #8e2a25; color: #fff; text-align: center; }

/* Responsive */
@media (max-width: 1000px) {
    .qdetective-hero { grid-template-columns: 1fr minmax(300px,.7fr); }
    .qdetective-stats { grid-template-columns: repeat(2, 1fr); }
    .qdetective-stats article:nth-child(2) { border-inline-end: 0; }
    .qdetective-stats article:nth-child(-n+2) { border-bottom: 1px solid var(--qd-border); }
    .qdetective-casebar { grid-template-columns: auto minmax(130px, 1fr) minmax(100px, 180px) auto auto; }
    .qdetective-workspace { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 800px) {
    body.qdetective-page.admin-bar .qdetective-casebar { top: 46px; }
    .qdetective-topbar { width: calc(100% - 24px); min-height: 68px; }
    .qdetective-topnav a:last-child { display: none; }
    .qdetective-hero { width: calc(100% - 28px); grid-template-columns: 1fr; padding: 55px 0 20px; text-align: center; }
    .qdetective-hero__copy h1 { margin-inline: auto; font-size: clamp(39px, 12vw, 65px); letter-spacing: -1px; }
    .qdetective-hero__lead { margin-inline: auto; }
    .qdetective-eyebrow, .qdetective-hero__actions, .qdetective-local-note { justify-content: center; }
    .qdetective-hero__visual { min-height: 390px; }
    .qdetective-hero-file { width: 285px; height: 365px; }
    .qdetective-hero-file--front { padding: 50px 27px 24px; }
    .qdetective-hero-file--front > strong { font-size: 76px; }
    .qdetective-stats { width: calc(100% - 28px); margin: 15px auto 65px; }
    .qdetective-library, .qdetective-guide, .qdetective-editorial-note { width: calc(100% - 28px); }
    .qdetective-tools { align-items: stretch; flex-direction: column; }
    .qdetective-search { min-width: 100%; }
    .qdetective-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .qdetective-filters button { flex: 0 0 auto; }
    .qdetective-case-grid { grid-template-columns: 1fr; }
    .qdetective-guide > div { grid-template-columns: 1fr; }
    .qdetective-footer { width: calc(100% - 28px); }
    .qdetective-cover-screen { padding-inline: 10px; }
    .qdetective-cover-folder { padding: 62px 32px 30px; }
    .qdetective-casebar { min-height: 64px; grid-template-columns: auto minmax(100px, 1fr) auto auto; gap: 7px; padding-inline: 9px; }
    .qdetective-casebar__progress { display: none; }
    .qdetective-casebar__actions b { display: none; }
    .qdetective-casebar__actions button { padding-inline: 7px; }
    .qdetective-workspace { width: calc(100% - 20px); display: block; padding: 18px 0 90px; }
    .qdetective-case-nav { display: none; }
    .qdetective-mobile-tabs { position: fixed; z-index: 100; inset-inline: 8px; inset-block-end: calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); min-height: 58px; padding: 5px; border: 1px solid rgba(210,166,75,.19); border-radius: 13px; background: rgba(20,20,17,.95); box-shadow: 0 12px 45px rgba(0,0,0,.55); backdrop-filter: blur(15px); }
    .qdetective-mobile-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 8px; background: transparent; color: #736f68; cursor: pointer; }
    .qdetective-mobile-tabs button.is-active { background: rgba(210,166,75,.09); color: #edcf8c; }
    .qdetective-mobile-tabs i { font-size: 16px; font-style: normal; }
    .qdetective-mobile-tabs span { font-size: 8px; font-weight: 800; }
    .qdetective-sheet-section { padding: 22px 17px 26px 27px; }
    .qdetective-link-board__canvas { min-height: 390px; grid-template-columns: minmax(125px,1fr) 145px minmax(125px,1fr); gap: 18px; padding: 27px 20px; }
    .qdetective-link-board__origin { min-height: 180px; padding-inline: 10px; }
    .qdetective-link-board__node { font-size: 9px; }
    .qdetective-scene-blueprint__drawing svg { min-width: 640px; }
    .qdetective-case-map__header { align-items: flex-start; }
    .qdetective-case-map__workspace { grid-template-columns: 1fr; }
    .qdetective-case-map__stage-scroll { border-inline-end: 0; border-bottom: 1px solid rgba(37,72,84,.25); }
    .qdetective-case-map__evidence > div { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 310px; }
    .qdetective-case-map__questions { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .qdetective-topnav a { font-size: 11px; }
    .qdetective-brand__text small { display: none; }
    .qdetective-hero { min-height: auto; }
    .qdetective-hero__actions { display: grid; grid-template-columns: 1fr; }
    .qdetective-button { width: 100%; }
    .qdetective-stats article { min-height: 82px; padding: 13px; }
    .qdetective-stat-icon { width: 35px; height: 35px; font-size: 16px; }
    .qdetective-stats strong { font-size: 21px; }
    .qdetective-section-head { align-items: start; }
    .qdetective-section-head > div > p:last-child { display: none; }
    .qdetective-case-card__link { grid-template-columns: 104px minmax(0,1fr); min-height: 205px; }
    .qdetective-case-card__seal { width: 39px; height: 39px; inset-block-start: 50px; }
    .qdetective-case-card__number { font-size: 37px; }
    .qdetective-case-card__body { padding: 14px 13px 12px; }
    .qdetective-case-card__title { font-size: 15px; }
    .qdetective-case-card__synopsis { -webkit-line-clamp: 4; font-size: 10.5px; }
    .qdetective-case-card__meta { gap: 7px; }
    .qdetective-guide { margin-top: 70px; }
    .qdetective-footer { padding: 20px 0; justify-content: center; text-align: center; }
    .qdetective-footer > p { display: none; }
    .qdetective-cover-folder { padding-inline: 22px; }
    .qdetective-cover-folder__stamp--blue { display: none; }
    .qdetective-cover-folder__summary { grid-template-columns: 65px minmax(0,1fr); gap: 11px; }
    .qdetective-cover-folder__photo { width: 65px; height: 82px; }
    .qdetective-cover-folder__photo svg { width: 65px; height: 82px; padding: 3px; }
    .qdetective-cover-folder__photo small { font-size: 5px; }
    .qdetective-cover-folder__summary p { font-size: 10.5px; }
    .qdetective-cover-folder__meta { grid-template-columns: 1fr; }
    .qdetective-cover-folder__meta > div { display: flex; justify-content: space-between; gap: 10px; border-inline-end: 0; border-bottom: 1px solid rgba(53,42,23,.16); }
    .qdetective-cover-folder__meta > div:last-child { border-bottom: 0; }
    .qdetective-casebar__identity strong { max-width: 120px; }
    .qdetective-casebar__clock small { display: none; }
    .qdetective-panel-intro { min-height: 92px; padding: 15px; }
    .qdetective-panel-intro > span { font-size: 40px; }
    .qdetective-panel-intro h2 { font-size: 18px; }
    .qdetective-sheet-section h3 { font-size: 18px; }
    .qdetective-record p { font-size: 11.5px; }
    .qdetective-link-board__header { display: block; padding: 14px 15px; }
    .qdetective-link-board__header h3 { font-size: 20px; }
    .qdetective-link-board__header p { margin-top: 8px; padding-inline-start: 0; border-inline-start: 0; font-size: 8px; }
    .qdetective-link-board__canvas { min-height: 360px; grid-template-columns: minmax(0,1fr) 88px minmax(0,1fr); gap: 7px; padding: 22px 8px; }
    .qdetective-link-board__column { gap: 8px; }
    .qdetective-link-board__column > strong { font-size: 7px; }
    .qdetective-link-board__node { min-height: 43px; gap: 4px; padding: 6px; font-size: 7.5px; line-height: 1.4; }
    .qdetective-link-board__node b { display: none; }
    .qdetective-link-board__origin { min-height: 145px; padding: 12px 6px; }
    .qdetective-link-board__origin::before, .qdetective-link-board__origin::after { width: 27px; }
    .qdetective-link-board__origin > span { width: 35px; height: 35px; font-size: 17px; }
    .qdetective-link-board__origin strong { font-size: 13px; }
    .qdetective-link-board__origin p { font-size: 11px; }
    .qdetective-investigation-flow { padding-inline: 8px; }
    .qdetective-investigation-flow li { font-size: 6.5px; }
    .qdetective-investigation-flow span { width: 22px; height: 22px; }
    .qdetective-investigation-flow::before { inset-block-start: 25px; }
    .qdetective-scene-blueprint > header { padding: 12px 14px; }
    .qdetective-scene-blueprint > header h3 { font-size: 19px; }
    .qdetective-scene-blueprint > header > i { display: none; }
    .qdetective-scene-blueprint__drawing svg { min-width: 600px; }
    .qdetective-scene-blueprint__legend { grid-template-columns: 1fr; padding: 12px 14px; }
    .qdetective-case-map__header { display: block; padding: 14px; }
    .qdetective-case-map__header h3 { font-size: 21px; }
    .qdetective-case-map__status { width: max-content; margin-top: 9px; }
    .qdetective-case-map__surface { min-width: 640px; min-height: 470px; }
    .qdetective-case-map__evidence > div { grid-template-columns: 1fr; max-height: 340px; }
    .qdetective-case-map__timeline { display: flex; overflow-x: auto; }
    .qdetective-case-map__timeline li { flex: 0 0 135px; }
    .qdetective-case-map__questions > div { grid-template-columns: 1fr; }
    .qdetective-case-map__unplaced > strong { flex-basis: 100%; }
    .qdetective-sheet-section--suspects .qdetective-records,
    .qdetective-sheet-section--evidence .qdetective-records { grid-template-columns: 1fr; }
    .qdetective-record--suspects { min-height: 155px; grid-template-columns: 70px minmax(0,1fr); gap: 10px; padding: 11px !important; padding-inline-end: 40px !important; }
    .qdetective-record__mug { width: 70px; height: 92px; }
    .qdetective-record__mug svg { width: 60px; height: 69px; }
    .qdetective-accusation { padding: 18px 13px; }
    .qdetective-confidence { grid-template-columns: 1fr; }
    .qdetective-confidence label { min-height: 52px; flex-direction: row; }
    .qdetective-verdict__theory, .qdetective-verdict__section, .qdetective-self-review { margin-inline: 13px; }
    .qdetective-self-review div { grid-template-columns: 1fr; }
    .qdetective-modal > section { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .qdetective-html { scroll-behavior: auto; }
    .qdetective-app *,
    .qdetective-app *::before,
    .qdetective-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .qdetective-casebar,
    .qdetective-case-nav,
    .qdetective-mobile-tabs,
    .qdetective-drawer,
    .qdetective-modal { display: none !important; }
    .qdetective-workspace { display: block; width: 100%; }
    .qdetective-panel[hidden] { display: block !important; }
    .qdetective-app { background: #fff; }
}