.quests {
        display: grid;
        gap: 10px;
        align-content: start;
      }

      .quest {
        border: 1px solid rgba(103, 205, 255, 0.22);
        border-radius: 10px;
        padding: 10px;
        background: rgba(17, 33, 67, 0.6);
        line-height: 1.2;
      }

      .quest.urgent {
        color: var(--urgent);
      }
      .quest.done {
        color: var(--ok);
      }

      .quests-shell {
        position: relative;
        height: 100%;
        border: 1px solid rgba(103, 205, 255, 0.2);
        border-radius: 12px;
        background: linear-gradient(
          180deg,
          rgba(9, 20, 42, 0.82),
          rgba(8, 18, 38, 0.78)
        );
        padding: 10px 10px 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .quests-header {
        font-family: "Orbitron", sans-serif;
        font-size: 0.86rem;
        letter-spacing: 0.55px;
        color: var(--accent);
        text-transform: uppercase;
        text-shadow: 0 0 10px rgba(67, 217, 255, 0.35);
        padding: 2px 2px 0;
        position: relative;
        z-index: 1;
      }

      .quests-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: relative;
        z-index: 1;
      }

      .quests-heading-wrap {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .quests-kicker {
        color: rgba(138, 211, 255, 0.72);
        font-family: "Orbitron", sans-serif;
        font-size: 0.52rem;
        letter-spacing: 0.42px;
        text-transform: uppercase;
        text-shadow: 0 0 10px rgba(67, 217, 255, 0.16);
      }

      .quests-top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .archive-open-btn {
        min-width: 98px;
        height: 40px;
        border: 1px solid rgba(255, 215, 109, 0.42);
        border-radius: 10px;
        background: linear-gradient(
          160deg,
          rgba(44, 36, 18, 0.88),
          rgba(24, 22, 14, 0.86)
        );
        color: #ffe08d;
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.48px;
        text-transform: uppercase;
        margin-top: 10px;
      }

      .penalty-note {
        margin-top: 2px;
        font-size: 0.64rem;
        color: rgba(255, 191, 132, 0.92);
        text-shadow: 0 0 8px rgba(255, 143, 64, 0.28);
        letter-spacing: 0.2px;
        position: relative;
        z-index: 1;
      }

      .quest-board-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        position: relative;
        z-index: 1;
      }

      .quest-board-chip {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 999px;
        padding: 4px 9px;
        background: rgba(10, 23, 44, 0.68);
        color: rgba(199, 232, 255, 0.86);
        font-family: "Orbitron", sans-serif;
        font-size: 0.54rem;
        letter-spacing: 0.28px;
        text-transform: uppercase;
      }

      .threat-forecast {
        margin-top: 4px;
        border: 1px solid rgba(255, 176, 96, 0.26);
        border-radius: 10px;
        background:
          radial-gradient(circle at 84% 18%, rgba(255, 176, 96, 0.05), transparent 32%),
          linear-gradient(160deg, rgba(32, 24, 18, 0.58), rgba(16, 20, 36, 0.6));
        padding: 9px 10px;
        display: grid;
        gap: 6px;
        position: relative;
        z-index: 1;
      }

      .threat-forecast-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .threat-forecast-head-side {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .threat-forecast-title {
        font-family: "Orbitron", sans-serif;
        font-size: 0.66rem;
        letter-spacing: 0.38px;
        color: #ffd7a9;
        text-transform: uppercase;
      }

      .threat-forecast-state {
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.3px;
        color: #ffd7a9;
      }

      .threat-forecast-state.danger {
        color: #ffb2bc;
      }

      .threat-forecast-toggle {
        width: 22px;
        height: 22px;
        border: 1px solid rgba(255, 176, 96, 0.24);
        border-radius: 999px;
        background: rgba(52, 28, 14, 0.5);
        color: #ffd7a9;
        display: grid;
        place-items: center;
        font-size: 0.7rem;
        line-height: 1;
      }

      .threat-forecast-toggle span {
        transition: transform 180ms ease;
      }

      .threat-forecast-toggle.open span {
        transform: rotate(180deg);
      }

      .threat-forecast-meta {
        color: rgba(255, 214, 171, 0.74);
        font-size: 0.56rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.2px;
      }

      .threat-forecast-detail[hidden] {
        display: none;
      }

      .threat-forecast-detail {
        display: grid;
        gap: 6px;
        margin-top: 2px;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 176, 96, 0.12);
      }

      .threat-forecast-note {
        color: rgba(255, 228, 198, 0.86);
        font-size: 0.66rem;
        line-height: 1.3;
        margin: 0;
      }

      .threat-forecast-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .threat-tag {
        border: 1px solid rgba(255, 176, 96, 0.2);
        border-radius: 999px;
        padding: 4px 8px;
        color: #ffd7a9;
        font-size: 0.56rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.2px;
        background: rgba(52, 28, 14, 0.54);
      }

      .threat-forecast-meta {
        margin: 0;
      }

      .threat-forecast-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 1px;
      }

      .threat-forecast-btn {
        border: 1px solid rgba(255, 176, 96, 0.34);
        border-radius: 999px;
        background: rgba(54, 31, 16, 0.72);
        color: #ffe5bf;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.24px;
        padding: 6px 10px;
        text-transform: uppercase;
      }

      .threat-forecast-btn:disabled {
        opacity: 0.54;
      }

      .quest-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        z-index: 1;
      }

      .quest-sort {
        border: 1px solid rgba(103, 205, 255, 0.32);
        border-radius: 8px;
        background: rgba(10, 24, 48, 0.82);
        color: #d9ecff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.64rem;
        letter-spacing: 0.2px;
        padding: 5px 8px;
        outline: none;
        min-width: 92px;
      }

      .focus-quest {
        border: 1px solid rgba(103, 205, 255, 0.16);
        border-radius: 10px;
        background:
          radial-gradient(circle at 84% 18%, rgba(103, 205, 255, 0.05), transparent 32%),
          linear-gradient(160deg, rgba(20, 28, 40, 0.56), rgba(14, 18, 30, 0.58));
        padding: 9px 10px;
        display: grid;
        gap: 6px;
        position: relative;
        z-index: 1;
      }

      .focus-quest-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .focus-quest-head-side {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .focus-quest-toggle {
        width: 22px;
        height: 22px;
        border: 1px solid rgba(115, 190, 255, 0.24);
        border-radius: 999px;
        background: rgba(18, 34, 58, 0.52);
        color: #cfeaff;
        display: grid;
        place-items: center;
        font-size: 0.7rem;
        line-height: 1;
      }

      .focus-quest-toggle span {
        transition: transform 180ms ease;
      }

      .focus-quest-toggle.open span {
        transform: rotate(180deg);
      }

      .focus-quest-btn {
        border: 1px solid rgba(115, 190, 255, 0.32);
        border-radius: 999px;
        background: rgba(14, 30, 57, 0.76);
        color: #dff0ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.24px;
        padding: 6px 10px;
        text-transform: uppercase;
      }

      .focus-quest-btn.ghost {
        border-color: rgba(154, 184, 220, 0.22);
        color: rgba(212, 228, 246, 0.82);
        background: rgba(15, 24, 38, 0.52);
      }

      .focus-quest-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .focus-quest-title {
        font-family: "Orbitron", sans-serif;
        font-size: 0.66rem;
        letter-spacing: 0.38px;
        color: #cfeaff;
        text-transform: uppercase;
      }

      .focus-quest-state {
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.3px;
        color: #cfeaff;
      }

      .focus-quest-detail[hidden] {
        display: none;
      }

      .focus-quest-detail {
        display: grid;
        gap: 6px;
        margin-top: 2px;
        padding-top: 7px;
        border-top: 1px solid rgba(103, 205, 255, 0.12);
      }

      .focus-quest-note {
        color: rgba(217, 236, 255, 0.82);
        font-size: 0.66rem;
        line-height: 1.3;
        margin: 0;
      }

      .focus-quest-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .focus-tag {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 999px;
        padding: 4px 8px;
        color: #cfeaff;
        font-size: 0.56rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.2px;
        background: rgba(22, 30, 44, 0.52);
      }

      .quest-item.filtered-out {
        display: none;
      }

      .quest-list {
        height: 100%;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 2px 2px 78px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        z-index: 1;
      }

      .quest-empty {
        color: rgba(217, 236, 255, 0.6);
        font-style: italic;
        font-size: 0.8rem;
        padding: 8px 6px;
      }

      .quest-item {
        border: 1px solid rgba(103, 205, 255, 0.24);
        border-radius: 10px;
        background:
          linear-gradient(90deg, rgba(67, 217, 255, 0.08), transparent 14%),
          linear-gradient(160deg, rgba(9, 20, 41, 0.9), rgba(6, 13, 28, 0.92));
        box-shadow:
          0 0 14px rgba(67, 217, 255, 0.05),
          inset 0 0 18px rgba(67, 217, 255, 0.03);
        padding: 11px 12px;
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 0;
        overflow: hidden;
        touch-action: manipulation;
      }

      .quest-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(76, 226, 255, 0.14), transparent 18%),
          linear-gradient(180deg, rgba(122, 202, 255, 0.08), transparent 34%);
        pointer-events: none;
      }

      .quest-item::after {
        content: "ISSUED";
        position: absolute;
        top: 8px;
        right: 10px;
        border: 1px solid rgba(103, 205, 255, 0.28);
        border-radius: 999px;
        padding: 2px 7px;
        background: rgba(8, 18, 36, 0.88);
        color: rgba(188, 227, 255, 0.84);
        font-family: "Orbitron", sans-serif;
        font-size: 0.5rem;
        letter-spacing: 0.28px;
        text-transform: uppercase;
        pointer-events: none;
      }

      .quest-item.menu-open {
        z-index: 5;
        overflow: visible;
      }

      .quest-item.boss-target {
        border-color: rgba(255, 192, 83, 0.52);
        box-shadow:
          0 0 18px rgba(255, 192, 83, 0.12),
          inset 0 0 16px rgba(255, 192, 83, 0.05);
        background:
          linear-gradient(90deg, rgba(255, 198, 89, 0.12), transparent 16%),
          linear-gradient(160deg, rgba(36, 26, 10, 0.9), rgba(15, 14, 22, 0.94));
      }

      .quest-item.threat-primary {
        border-color: rgba(255, 156, 112, 0.52);
        box-shadow:
          0 0 18px rgba(255, 156, 112, 0.16),
          inset 0 0 12px rgba(255, 156, 112, 0.08);
        background:
          linear-gradient(90deg, rgba(255, 120, 88, 0.14), transparent 16%),
          linear-gradient(160deg, rgba(44, 20, 18, 0.92), rgba(18, 15, 26, 0.94));
      }

      .quest-item.focus-target {
        border-color: rgba(115, 190, 255, 0.48);
        box-shadow:
          0 0 20px rgba(115, 190, 255, 0.18),
          inset 0 0 14px rgba(115, 190, 255, 0.08);
        background:
          linear-gradient(90deg, rgba(115, 190, 255, 0.16), transparent 16%),
          radial-gradient(circle at 84% 18%, rgba(115, 190, 255, 0.12), transparent 34%),
          linear-gradient(160deg, rgba(10, 28, 58, 0.92), rgba(7, 17, 34, 0.94));
      }

      .quest-item.focus-target .name {
        color: #f2f8ff;
        text-shadow: 0 0 10px rgba(115, 190, 255, 0.2);
      }

      .quest-item.focus-target .quest-left {
        color: #8fd2ff;
      }

      .quest-left {
        color: rgba(179, 206, 236, 0.7);
        display: grid;
        justify-items: center;
        gap: 6px;
        font-size: 1rem;
        min-width: 18px;
      }

      .quest-sigil {
        color: #8ad8ff;
        font-size: 0.94rem;
        text-shadow: 0 0 10px rgba(67, 217, 255, 0.3);
      }

      .quest-rail {
        width: 1px;
        height: 40px;
        background: linear-gradient(180deg, rgba(110, 217, 255, 0.82), rgba(110, 217, 255, 0.08));
      }

      .quest-main {
        min-width: 0;
        display: grid;
        gap: 5px;
      }

      .quest-main-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-right: 58px;
      }

      .quest-directive,
      .quest-rank {
        margin: 0;
        font-family: "Orbitron", sans-serif;
        font-size: 0.5rem;
        letter-spacing: 0.34px;
        text-transform: uppercase;
      }

      .quest-directive {
        color: rgba(145, 214, 255, 0.72);
      }

      .quest-rank {
        color: rgba(255, 221, 149, 0.84);
      }

      .quest-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
      }

      .quest-item .name {
        color: #e9f6ff;
        font-weight: 700;
        font-size: 0.98rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .quest-badge {
        display: inline-block;
        width: fit-content;
        border: 1px solid rgba(255, 126, 92, 0.45);
        border-radius: 8px;
        padding: 2px 8px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.64rem;
        letter-spacing: 0.35px;
        color: #ff7e5c;
        background: rgba(57, 26, 18, 0.55);
        text-transform: uppercase;
      }

      .session-quality-badge {
        display: inline-block;
        width: fit-content;
        border: 1px solid rgba(109, 221, 255, 0.36);
        border-radius: 8px;
        padding: 2px 8px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.28px;
        color: #aeeaff;
        background: rgba(14, 44, 68, 0.52);
        text-transform: uppercase;
      }

      .project-track-badge {
        display: inline-block;
        width: fit-content;
        border: 1px solid rgba(173, 145, 255, 0.34);
        border-radius: 8px;
        padding: 2px 8px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.28px;
        color: #dccfff;
        background: rgba(36, 23, 68, 0.54);
        text-transform: uppercase;
      }

      .quest-category {
        display: inline-block;
        width: fit-content;
        border: 1px solid rgba(143, 188, 255, 0.32);
        border-radius: 8px;
        padding: 2px 8px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.28px;
        color: rgba(214, 233, 255, 0.9);
        background: rgba(17, 36, 63, 0.56);
        text-transform: uppercase;
      }

      .session-quality-help {
        color: rgba(176, 228, 255, 0.78);
      }

      .quest-stats {
        text-align: left;
        min-width: 62px;
        display: grid;
        gap: 4px;
        justify-items: start;
        padding: 5px 8px;
        border: 1px solid rgba(103, 205, 255, 0.12);
        border-radius: 9px;
        background: rgba(8, 17, 32, 0.66);
      }

      .quest-reps {
        color: #eef8ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.78rem;
        line-height: 1;
      }

      .quest-xp {
        margin-top: 2px;
        color: #67b7ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.64rem;
        letter-spacing: 0.3px;
      }

      .quest-actions-mini {
        display: flex;
        gap: 7px;
        justify-content: flex-end;
        align-items: center;
        position: relative;
      }

      .quest-act {
        border: 1px solid rgba(106, 190, 255, 0.32);
        border-radius: 8px;
        background: linear-gradient(160deg, rgba(12, 28, 54, 0.92), rgba(8, 18, 34, 0.94));
        color: #dceeff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.6rem;
        letter-spacing: 0.42px;
        padding: 7px 10px;
        min-width: 74px;
        box-shadow:
          0 0 10px rgba(96, 179, 255, 0.14),
          inset 0 0 8px rgba(96, 179, 255, 0.08);
        text-transform: uppercase;
      }

      .quest-act.is-complete {
        border-color: rgba(122, 247, 107, 0.5);
        color: #8dff9a;
        box-shadow:
          0 0 12px rgba(122, 247, 107, 0.25),
          inset 0 0 8px rgba(122, 247, 107, 0.1);
      }

      .quest-act.delete {
        border-color: rgba(255, 110, 88, 0.5);
        color: #ff9f89;
        box-shadow:
          0 0 12px rgba(255, 110, 88, 0.22),
          inset 0 0 8px rgba(255, 110, 88, 0.1);
        min-width: 42px;
        padding-left: 0;
        padding-right: 0;
        font-size: 0.82rem;
      }

      .quest-menu {
        position: relative;
      }

      .quest-menu-toggle {
        width: 36px;
        height: 30px;
        border: 1px solid rgba(143, 188, 255, 0.4);
        border-radius: 9px;
        background: rgba(12, 24, 48, 0.78);
        color: #cde4ff;
        font-size: 1rem;
        line-height: 1;
        box-shadow:
          0 0 10px rgba(96, 179, 255, 0.16),
          inset 0 0 8px rgba(96, 179, 255, 0.08);
      }

      .quest-menu-pop {
        position: absolute;
        right: 0;
        bottom: 34px;
        display: none;
        gap: 6px;
        padding: 6px;
        border: 1px solid rgba(143, 188, 255, 0.42);
        border-radius: 10px;
        background: rgba(10, 20, 40, 0.95);
        box-shadow: 0 0 14px rgba(67, 217, 255, 0.2);
        z-index: 3;
      }

      .quest-item.menu-open .quest-menu-pop {
        display: flex;
      }

      .quest-item.menu-open-down .quest-menu-pop {
        top: 34px;
        bottom: auto;
      }

      .quest-menu-act {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(143, 188, 255, 0.45);
        border-radius: 8px;
        background: rgba(12, 24, 48, 0.82);
        color: #d5e9ff;
        font-size: 0.86rem;
        line-height: 1;
        display: grid;
        place-items: center;
      }

      .quest-menu-act.archive {
        border-color: rgba(255, 215, 109, 0.5);
        color: #ffe08d;
      }

      .quest-menu-act.reorder {
        border-color: rgba(134, 214, 255, 0.52);
        color: #d4f2ff;
      }

      .quest-menu-act.quality {
        border-color: rgba(109, 221, 255, 0.46);
        color: #aeeaff;
      }

      .quest-menu-act.focus-active {
        border-color: rgba(255, 215, 109, 0.7);
        color: #ffe08d;
        background: rgba(64, 46, 14, 0.88);
        box-shadow:
          0 0 12px rgba(255, 215, 109, 0.24),
          inset 0 0 8px rgba(255, 215, 109, 0.1);
      }

      .quest-menu-act.delete {
        border-color: rgba(255, 110, 88, 0.55);
        color: #ff9f89;
      }

      .quest-item.completed {
        border-color: rgba(122, 247, 107, 0.45);
        background:
          linear-gradient(90deg, rgba(122, 247, 107, 0.12), transparent 16%),
          linear-gradient(160deg, rgba(14, 32, 24, 0.88), rgba(9, 18, 22, 0.92));
        box-shadow:
          0 0 14px rgba(122, 247, 107, 0.08),
          inset 0 0 10px rgba(122, 247, 107, 0.04);
      }

      .quest-item.completed .name {
        text-decoration: line-through;
        color: #b7d7c0;
      }

      .quest-item.completed::after {
        content: "CLEARED";
        border-color: rgba(122, 247, 107, 0.38);
        color: #aaffaf;
      }

      .quest-item.focus-target::after {
        content: "FOCUS";
        border-color: rgba(115, 190, 255, 0.36);
        color: #b8deff;
      }

      .quest-item.boss-target::after {
        content: "BOSS";
        border-color: rgba(255, 192, 83, 0.38);
        color: #ffe3a0;
      }

      .quest-item.threat-primary::after {
        content: "THREAT";
        border-color: rgba(255, 156, 112, 0.38);
        color: #ffc0aa;
      }

      .quest-item.attr-agi .quest-badge {
        color: #7cf88d;
        border-color: rgba(124, 248, 141, 0.42);
        background: rgba(20, 54, 32, 0.55);
      }

      .quest-item.attr-int .quest-badge {
        color: #bf9dff;
        border-color: rgba(191, 157, 255, 0.42);
        background: rgba(35, 22, 61, 0.55);
      }

      .quest-item.attr-per .quest-badge {
        color: #8de8ff;
        border-color: rgba(141, 232, 255, 0.42);
        background: rgba(16, 43, 58, 0.55);
      }

      .quest-item.attr-vit .quest-badge {
        color: #ff9d7b;
        border-color: rgba(255, 157, 123, 0.42);
        background: rgba(57, 28, 20, 0.55);
      }

      .quest-item.cat-health .quest-category {
        color: #ffb7a0;
        border-color: rgba(255, 157, 123, 0.36);
        background: rgba(60, 30, 24, 0.55);
      }

      .quest-item.cat-study .quest-category {
        color: #c8b0ff;
        border-color: rgba(191, 157, 255, 0.34);
        background: rgba(35, 24, 62, 0.55);
      }

      .quest-item.cat-work .quest-category {
        color: #8ddcff;
        border-color: rgba(141, 232, 255, 0.34);
        background: rgba(17, 42, 58, 0.55);
      }

      .quest-item.cat-selfcare .quest-category {
        color: #ffe08d;
        border-color: rgba(255, 224, 141, 0.34);
        background: rgba(57, 48, 18, 0.55);
      }

      .add-quest-btn {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 10px;
        min-width: 124px;
        height: 44px;
        border: 1px solid rgba(103, 205, 255, 0.45);
        border-radius: 10px;
        background: linear-gradient(
          160deg,
          rgba(16, 36, 72, 0.9),
          rgba(10, 24, 52, 0.9)
        );
        color: var(--accent);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-family: "Orbitron", sans-serif;
        font-size: 0.68rem;
        letter-spacing: 0.65px;
        text-transform: uppercase;
        line-height: 1;
        display: grid;
        place-items: center;
        box-shadow:
          0 0 20px rgba(67, 217, 255, 0.35),
          inset 0 0 10px rgba(67, 217, 255, 0.12);
        text-shadow: 0 0 8px rgba(67, 217, 255, 0.35);
        z-index: 1;
      }

      .archive-open-btn,
      .add-quest-btn,
      .quest-sort {
        clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
      }

      #quests.view.active {
        transform: none;
      }

      .quest-modal {
        position: absolute;
        inset: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(3, 8, 20, 0.52);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 5;
        overflow-y: auto;
        scrollbar-width: none;
      }

      .quest-modal::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .quest-modal.open {
        display: flex;
      }

      .archive-modal {
        position: absolute;
        inset: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(3, 8, 20, 0.56);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 6;
        overflow-y: auto;
        scrollbar-width: none;
      }

      .archive-modal::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .archive-modal.open {
        display: flex;
      }

      .archive-panel {
        width: 100%;
        max-width: 520px;
        max-height: calc(100dvh - 20px);
        border: 1px solid rgba(115, 190, 255, 0.52);
        border-radius: 18px;
        background: linear-gradient(
          165deg,
          rgba(8, 16, 34, 0.9),
          rgba(3, 10, 22, 0.9)
        );
        box-shadow:
          0 0 14px rgba(67, 217, 255, 0.08),
          inset 0 0 10px rgba(67, 217, 255, 0.04);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr;
      }

      .archive-panel-head {
        padding: 15px 16px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid rgba(103, 205, 255, 0.18);
      }

      .archive-panel-title {
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        color: #e9f5ff;
      }

      .archive-panel-meta {
        margin-top: 4px;
        color: rgba(171, 200, 232, 0.76);
        font-size: 0.62rem;
        font-family: "Orbitron", sans-serif;
      }

      .archive-panel-close {
        border: 1px solid rgba(143, 188, 255, 0.45);
        border-radius: 9px;
        background: rgba(12, 24, 48, 0.78);
        color: #d7ebff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.6rem;
        letter-spacing: 0.28px;
        padding: 8px 10px;
      }

      .quest-panel {
        width: 100%;
        max-width: 440px;
        max-height: calc(100dvh - 20px);
        border: 1px solid rgba(187, 223, 255, 0.55);
        border-radius: 16px;
        background: linear-gradient(
          165deg,
          rgba(15, 27, 56, 0.93),
          rgba(8, 18, 38, 0.95)
        );
        box-shadow:
          0 0 28px rgba(67, 217, 255, 0.18),
          inset 0 0 14px rgba(67, 217, 255, 0.08);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      .quest-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(103, 205, 255, 0.18);
        font-family: "Orbitron", sans-serif;
        color: #eef6ff;
        font-size: 1.08rem;
        letter-spacing: 0.4px;
      }

      .quest-head .icon {
        color: var(--accent);
        font-size: 1.2rem;
        text-shadow: 0 0 8px rgba(67, 217, 255, 0.45);
      }

      .q-ai-btn {
        margin-left: auto;
        border: 1px solid rgba(103, 205, 255, 0.24);
        border-radius: 999px;
        background: rgba(13, 28, 56, 0.58);
        color: #def3ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.22px;
        padding: 6px 10px;
      }

      .q-ai-btn[disabled] {
        opacity: 0.7;
      }

      .quest-body {
        padding: 14px 16px 12px;
        display: grid;
        gap: 14px;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: none;
      }

      .quest-body::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .q-ai-note {
        color: rgba(191, 223, 250, 0.82);
        font-size: 0.64rem;
        line-height: 1.35;
      }

      .q-ai-note.error {
        color: rgba(255, 184, 184, 0.94);
      }

      .q-ai-note.ready {
        color: rgba(168, 255, 188, 0.94);
      }

      .q-mode {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .q-mode-btn {
        border: 1px solid rgba(103, 205, 255, 0.35);
        border-radius: 9px;
        background: rgba(11, 24, 48, 0.76);
        color: #c5dcf8;
        font-family: "Orbitron", sans-serif;
        font-size: 0.67rem;
        letter-spacing: 0.35px;
        padding: 7px 6px;
        text-transform: uppercase;
      }

      .q-mode-btn.active {
        color: #ebf7ff;
        border-color: rgba(103, 205, 255, 0.7);
        box-shadow: 0 0 10px rgba(67, 217, 255, 0.28);
        background: rgba(20, 42, 80, 0.84);
      }

      .task-form {
        display: none;
        gap: 14px;
        align-content: start;
      }

      .task-form.active {
        display: grid;
      }

      .q-label {
        display: block;
        color: #dde9ff;
        font-size: 0.78rem;
        letter-spacing: 0.45px;
        margin-bottom: 6px;
      }

      .q-input-wrap {
        border: 1px solid rgba(70, 126, 255, 0.45);
        border-radius: 12px;
        background: rgba(9, 21, 44, 0.82);
        display: grid;
        grid-template-columns: 24px 1fr;
        align-items: center;
        gap: 8px;
        padding: 10px 11px;
        box-shadow: inset 0 0 10px rgba(61, 126, 255, 0.15);
      }

      .q-input-wrap.with-unit {
        grid-template-columns: 24px 1fr auto;
      }

      .q-input-wrap .q-icon {
        color: #42beff;
        font-size: 0.95rem;
        text-align: center;
      }

      .q-input {
        border: 0;
        background: transparent;
        color: #e5f1ff;
        font:
          600 0.82rem "Rajdhani",
          sans-serif;
        outline: none;
        min-width: 0;
      }

      .q-input::placeholder {
        color: rgba(219, 230, 248, 0.42);
      }

      .q-unit {
        border: 1px solid rgba(103, 205, 255, 0.35);
        border-radius: 8px;
        background: rgba(16, 36, 72, 0.78);
        color: #dcecff;
        font:
          700 0.68rem "Orbitron",
          sans-serif;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        outline: none;
        padding: 4px 7px;
      }

      .q-input.invalid {
        box-shadow: 0 0 0 1px rgba(255, 110, 88, 0.65);
        border-radius: 6px;
      }

      .q-count {
        margin-top: 4px;
        text-align: right;
        color: rgba(219, 230, 248, 0.58);
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.35px;
      }

      .template-block {
        display: grid;
        gap: 7px;
      }

      .template-label {
        color: rgba(171, 209, 239, 0.72);
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.28px;
        text-transform: uppercase;
      }

      .template-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .template-pack-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .template-pack-btn {
        border: 1px solid rgba(103, 205, 255, 0.16);
        border-radius: 999px;
        background: rgba(9, 22, 44, 0.72);
        color: rgba(205, 228, 246, 0.78);
        font-family: "Orbitron", sans-serif;
        font-size: 0.5rem;
        letter-spacing: 0.2px;
        padding: 5px 8px;
        text-transform: uppercase;
      }

      .template-pack-btn.active {
        border-color: rgba(103, 205, 255, 0.34);
        background: rgba(16, 36, 70, 0.84);
        color: #dff1ff;
      }

      .template-btn {
        border: 1px solid rgba(103, 205, 255, 0.22);
        border-radius: 8px;
        background: rgba(12, 28, 54, 0.76);
        color: #d9ecff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.2px;
        padding: 6px 9px;
        text-transform: uppercase;
      }

      .template-btn[hidden] {
        display: none;
      }

      .project-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid rgba(103, 205, 255, 0.14);
        border-radius: 10px;
        background: rgba(8, 20, 40, 0.54);
      }

      .project-toggle-label {
        color: rgba(211, 231, 248, 0.86);
        font-family: "Orbitron", sans-serif;
        font-size: 0.6rem;
        letter-spacing: 0.24px;
        text-transform: uppercase;
      }

      .project-toggle-btn {
        min-width: 64px;
        border: 1px solid rgba(103, 205, 255, 0.24);
        border-radius: 999px;
        background: rgba(10, 24, 48, 0.82);
        color: #d9ecff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.22px;
        padding: 6px 10px;
        text-transform: uppercase;
      }

      .project-toggle-btn.active {
        border-color: rgba(191, 157, 255, 0.42);
        background: rgba(36, 23, 62, 0.84);
        color: #f0e7ff;
      }

      .project-stage-row[hidden] {
        display: none;
      }

      .project-stage-badge {
        border: 1px solid rgba(103, 205, 255, 0.26);
        border-radius: 999px;
        padding: 4px 8px;
        background: rgba(16, 31, 56, 0.62);
        color: #bfe4ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.5rem;
        letter-spacing: 0.2px;
        text-transform: uppercase;
      }

      .quest-kind-badge {
        border: 1px solid rgba(191, 157, 255, 0.3);
        border-radius: 999px;
        padding: 4px 8px;
        background: rgba(34, 21, 58, 0.62);
        color: #d9c7ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.52rem;
        letter-spacing: 0.22px;
        text-transform: uppercase;
      }

      .quest-menu-act.project {
        border-color: rgba(191, 157, 255, 0.34);
        color: #d9c7ff;
      }

      .q-xp {
        margin-top: 4px;
        color: #7af76b;
        font-family: "Orbitron", sans-serif;
        font-size: 0.64rem;
        letter-spacing: 0.35px;
        text-shadow: 0 0 8px rgba(122, 247, 107, 0.35);
      }

      .q-select-wrap {
        border: 1px solid rgba(255, 108, 78, 0.45);
        border-radius: 12px;
        background: rgba(48, 22, 14, 0.5);
        display: grid;
        grid-template-columns: 24px 1fr 16px;
        align-items: center;
        gap: 8px;
        padding: 10px 11px;
        transition:
          border-color 120ms ease,
          box-shadow 120ms ease,
          background 120ms ease;
      }

      .q-select-wrap .q-icon {
        color: #ff6d4a;
        font-size: 0.95rem;
        text-align: center;
        text-shadow: 0 0 7px rgba(255, 109, 74, 0.45);
      }

      .q-select {
        border: 0;
        background: transparent;
        color: #ff875f;
        font:
          700 0.84rem "Rajdhani",
          sans-serif;
        outline: none;
        appearance: none;
        min-width: 0;
        cursor: pointer;
        text-shadow: 0 0 8px rgba(255, 135, 95, 0.2);
      }

      .q-select option {
        background: #111c3b;
        color: #e9f3ff;
        font-weight: 700;
      }

      .q-caret {
        color: rgba(248, 220, 210, 0.9);
        font-size: 0.72rem;
        text-align: center;
        pointer-events: none;
      }

      .q-select-wrap.attr-str {
        border-color: rgba(255, 106, 76, 0.62);
        background: rgba(56, 20, 12, 0.56);
        box-shadow: inset 0 0 10px rgba(255, 106, 76, 0.14);
      }

      .q-select-wrap.attr-vit {
        border-color: rgba(255, 125, 94, 0.62);
        background: rgba(59, 26, 15, 0.54);
        box-shadow: inset 0 0 10px rgba(255, 125, 94, 0.14);
      }

      .q-select-wrap.attr-agi {
        border-color: rgba(66, 190, 255, 0.62);
        background: rgba(14, 33, 58, 0.56);
        box-shadow: inset 0 0 10px rgba(66, 190, 255, 0.14);
      }

      .q-select-wrap.attr-int {
        border-color: rgba(173, 122, 255, 0.62);
        background: rgba(34, 20, 54, 0.56);
        box-shadow: inset 0 0 10px rgba(173, 122, 255, 0.14);
      }

      .q-select-wrap.attr-per {
        border-color: rgba(122, 247, 107, 0.62);
        background: rgba(20, 41, 26, 0.56);
        box-shadow: inset 0 0 10px rgba(122, 247, 107, 0.14);
      }

      .q-preview {
        border: 1px solid rgba(255, 130, 68, 0.5);
        border-radius: 12px;
        background: rgba(60, 28, 14, 0.55);
        color: rgba(255, 211, 177, 0.85);
        font-size: 0.8rem;
        font-style: italic;
        line-height: 1.3;
        padding: 11px 12px;
      }

      .q-preview .q-icon {
        margin-right: 6px;
        color: #ff935b;
        font-style: normal;
      }

      .q-help {
        margin-top: 5px;
        color: rgba(191, 214, 239, 0.72);
        font-size: 0.66rem;
        line-height: 1.25;
      }

      .xp-presets {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-top: 7px;
      }

      .xp-locked {
        opacity: 0.58;
      }

      .xp-preset-btn {
        border: 1px solid rgba(143, 188, 255, 0.42);
        border-radius: 999px;
        background: rgba(12, 24, 48, 0.78);
        color: #d7ebff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.28px;
        padding: 6px 10px;
      }

      .xp-preset-btn.active {
        border-color: rgba(115, 190, 255, 0.82);
        background: rgba(32, 76, 130, 0.78);
        color: #f4fbff;
        box-shadow: 0 0 10px rgba(67, 217, 255, 0.22);
      }

      .quest-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 16px 14px;
        border-top: 1px solid rgba(103, 205, 255, 0.18);
      }

      .q-btn {
        border-radius: 10px;
        border: 1px solid rgba(173, 207, 255, 0.5);
        background: rgba(12, 20, 40, 0.62);
        color: #f1f6ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.82rem;
        padding: 10px 0;
      }

      .q-btn.primary {
        border-color: rgba(115, 190, 255, 0.8);
        background: linear-gradient(160deg, rgba(78, 166, 255, 0.8), rgba(95, 196, 255, 0.78));
        color: #f7fbff;
      }

      .edit-modal {
        position: absolute;
        inset: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(3, 8, 20, 0.56);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 6;
        overflow-y: auto;
        scrollbar-width: none;
      }

      .edit-modal::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .edit-modal.open {
        display: flex;
      }

      .edit-panel {
        width: 100%;
        max-width: 440px;
        max-height: calc(100dvh - 20px);
        border: 1px solid rgba(115, 190, 255, 0.52);
        border-radius: 18px;
        background: linear-gradient(
          165deg,
          rgba(8, 16, 34, 0.84),
          rgba(3, 10, 22, 0.86)
        );
        box-shadow:
          0 0 14px rgba(67, 217, 255, 0.08),
          inset 0 0 10px rgba(67, 217, 255, 0.04);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      .edit-panel.reminder-on {
        max-height: calc(100dvh - 10px);
      }

      .edit-head {
        padding: 15px 16px;
        font-family: "Orbitron", sans-serif;
        font-size: 1.16rem;
        color: #e9f5ff;
        text-align: center;
        border-bottom: 1px solid rgba(103, 205, 255, 0.18);
      }

      .edit-body {
        padding: 14px 16px 12px;
        display: grid;
        gap: 12px;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: none;
      }

      .edit-body::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .e-label {
        color: rgba(219, 236, 255, 0.78);
        font-size: 0.8rem;
        margin-bottom: 6px;
      }

      .e-input {
        width: 100%;
        border: 1px solid rgba(70, 126, 255, 0.45);
        border-radius: 12px;
        background: rgba(7, 20, 45, 0.85);
        color: #e7f3ff;
        font:
          600 0.88rem "Rajdhani",
          sans-serif;
        padding: 11px 12px;
        outline: none;
      }

      .e-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #dbeeff;
        font-size: 0.82rem;
      }

      .e-toggle {
        width: 60px;
        height: 32px;
        border-radius: 999px;
        border: 1px solid rgba(103, 205, 255, 0.35);
        background: rgba(26, 47, 77, 0.8);
        position: relative;
        transition: background 120ms ease;
      }

      .e-toggle::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #5eb6ff;
        box-shadow: 0 0 8px rgba(94, 182, 255, 0.45);
        transition: transform 120ms ease;
      }

      .e-toggle.on {
        background: rgba(58, 120, 182, 0.8);
      }

      .e-toggle.on::after {
        transform: translateX(27px);
      }

      .e-time {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
      }

      .e-time-stack {
        display: grid;
        gap: 10px;
      }

      .e-time-group {
        display: grid;
        gap: 7px;
      }

      .e-time-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .e-time-tag {
        color: rgba(219, 236, 255, 0.82);
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }

      .e-time-rich {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }

      .e-time-select {
        border: 1px solid rgba(70, 126, 255, 0.45);
        border-radius: 10px;
        background: rgba(7, 20, 45, 0.85);
        color: #e7f3ff;
        font:
          700 0.8rem "Rajdhani",
          sans-serif;
        padding: 9px 8px;
        outline: none;
        cursor: pointer;
      }

      .e-presets {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
      }

      .e-mode {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .e-mode-btn {
        border: 1px solid rgba(143, 188, 255, 0.36);
        border-radius: 999px;
        background: rgba(12, 24, 48, 0.58);
        color: #cfe6ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.28px;
        padding: 7px 12px;
      }

      .e-mode-btn.active {
        border-color: rgba(115, 190, 255, 0.82);
        background: rgba(26, 64, 112, 0.75);
        color: #eff8ff;
        box-shadow: 0 0 12px rgba(67, 217, 255, 0.22);
      }

      .e-secondary-time.hidden {
        display: none;
      }

      .e-preset {
        border: 1px solid rgba(143, 188, 255, 0.45);
        border-radius: 9px;
        background: rgba(12, 24, 48, 0.78);
        color: #d7ebff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.3px;
        padding: 5px 8px;
      }

      .e-clear {
        border: 1px solid rgba(173, 207, 255, 0.45);
        border-radius: 10px;
        background: rgba(10, 20, 40, 0.75);
        color: #dbeeff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.72rem;
        padding: 0 14px;
      }

      .e-days {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .e-day {
        border: 1px solid rgba(117, 156, 206, 0.5);
        border-radius: 11px;
        background: rgba(20, 41, 73, 0.65);
        color: #c2daf7;
        font-family: "Orbitron", sans-serif;
        font-size: 0.66rem;
        padding: 6px 10px;
        min-width: 44px;
      }

      .e-day.active {
        border-color: rgba(115, 190, 255, 0.82);
        color: #ebf7ff;
        box-shadow: 0 0 10px rgba(67, 217, 255, 0.28);
      }

      .e-help {
        color: rgba(219, 236, 255, 0.62);
        font-size: 0.72rem;
        line-height: 1.3;
      }

      .e-reminder-block {
        display: grid;
        gap: 12px;
      }

      .e-reminder-block.hidden {
        display: none;
      }

      .session-complete-panel {
        max-width: min(420px, calc(100vw - 24px));
      }

      .session-complete-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .session-complete-chip {
        border: 1px solid rgba(103, 205, 255, 0.28);
        border-radius: 999px;
        padding: 5px 10px;
        background: rgba(12, 24, 48, 0.6);
        color: rgba(220, 239, 255, 0.9);
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.28px;
        text-transform: uppercase;
      }

      .e-textarea {
        width: 100%;
        min-height: 74px;
        border: 1px solid rgba(70, 126, 255, 0.45);
        border-radius: 12px;
        background: rgba(7, 20, 45, 0.85);
        color: #e7f3ff;
        font:
          600 0.82rem "Rajdhani",
          sans-serif;
        padding: 10px 12px;
        resize: none;
        outline: none;
      }

      .e-count {
        text-align: right;
        color: rgba(219, 236, 255, 0.62);
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        margin-top: 4px;
      }

      .edit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 16px 14px;
        border-top: 1px solid rgba(103, 205, 255, 0.18);
        background: rgba(6, 14, 30, 0.96);
        position: sticky;
        bottom: 0;
      }

      .nav {
        border-top: 1px solid rgba(103, 205, 255, 0.25);
        background: rgba(7, 16, 36, 0.95);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        z-index: 20;
      }

      .app.edit-open .nav {
        display: none;
      }

      .system-gate {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(5, 10, 20, 0.78);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 40;
      }

      .system-gate.open {
        display: flex;
      }

      .system-gate.danger .system-gate-panel {
        border-color: rgba(255, 132, 132, 0.24);
        background: linear-gradient(165deg, rgba(28, 12, 18, 0.88), rgba(10, 10, 20, 0.92));
        box-shadow:
          inset 0 0 12px rgba(255, 112, 112, 0.05),
          0 0 14px rgba(255, 112, 112, 0.08);
      }

      .system-gate.danger .system-gate-title {
        color: rgba(255, 232, 232, 0.96);
      }

      .system-gate.danger .system-gate-btn.primary {
        border-color: rgba(255, 142, 142, 0.34);
        background: linear-gradient(160deg, rgba(140, 42, 56, 0.86), rgba(196, 70, 88, 0.8));
      }

      .system-gate-panel {
        width: min(100%, 420px);
        border: 1px solid rgba(103, 205, 255, 0.2);
        border-radius: 18px;
        background: linear-gradient(165deg, rgba(10, 20, 38, 0.88), rgba(6, 12, 24, 0.9));
        box-shadow:
          inset 0 0 12px rgba(67, 217, 255, 0.04),
          0 0 14px rgba(67, 217, 255, 0.08);
        padding: 18px 16px;
        display: grid;
        gap: 12px;
        text-align: center;
      }

      .system-gate-title {
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        letter-spacing: 0.55px;
        color: #dcefff;
        text-transform: uppercase;
      }

      .system-gate-note {
        color: rgba(205, 225, 245, 0.82);
        font-size: 0.8rem;
        line-height: 1.45;
      }

      .system-gate-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .system-gate-btn {
        border: 1px solid rgba(103, 205, 255, 0.22);
        border-radius: 12px;
        background: rgba(12, 24, 46, 0.62);
        color: #eff8ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.74rem;
        padding: 11px 8px;
      }

      .system-gate-btn.primary {
        border-color: rgba(115, 190, 255, 0.42);
        background: linear-gradient(160deg, rgba(78, 166, 255, 0.82), rgba(95, 196, 255, 0.78));
      }

      .tab {
        border: 1px solid rgba(103, 205, 255, 0.3);
        border-radius: 10px;
        background: rgba(12, 27, 57, 0.8);
        color: var(--muted);
        text-decoration: none;
        font-family: "Orbitron", sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        display: grid;
        place-items: center;
        min-height: 44px;
      }

      .nav-icon {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 6px rgba(67, 217, 255, 0.25));
      }

      .tab.active .nav-icon {
        filter: drop-shadow(0 0 8px rgba(67, 217, 255, 0.45));
      }

      .tab.active {
        color: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 8px rgba(67, 217, 255, 0.08);
      }

      @media (max-width: 640px) {
        .quests-shell {
          padding: 8px 8px 6px;
          gap: 6px;
        }

        .quests-kicker {
          font-size: 0.48rem;
        }

        .quests-header {
          font-size: 0.76rem;
        }

        .quest-board-chip {
          font-size: 0.5rem;
          padding: 4px 8px;
        }

        .add-quest-btn,
        .quest-sort,
        .q-btn,
        .job-trial-btn,
        .system-gate-btn {
          font-size: 0.56rem;
        }

        .penalty-note,
        .threat-forecast-note,
        .focus-quest-note {
          font-size: 0.6rem;
        }

        .threat-forecast,
        .focus-quest {
          padding: 8px 9px;
          gap: 5px;
          border-color: rgba(103, 205, 255, 0.12);
          background:
            linear-gradient(160deg, rgba(15, 22, 34, 0.66), rgba(11, 16, 28, 0.7));
          box-shadow: none;
        }

        .threat-forecast {
          border-color: rgba(255, 176, 96, 0.16);
        }

        .threat-forecast-meta,
        .threat-forecast-btn,
        .focus-quest-btn {
          font-size: 0.52rem;
        }

        .threat-tag,
        .focus-tag {
          padding: 3px 7px;
        }

        .quest-item {
          border-color: rgba(103, 205, 255, 0.28);
          box-shadow:
            0 0 8px rgba(67, 217, 255, 0.04),
            inset 0 0 6px rgba(67, 217, 255, 0.02);
        }

        .quest-item.boss-target,
        .quest-item.threat-primary,
        .quest-item.focus-target {
          box-shadow:
            0 0 10px rgba(115, 190, 255, 0.08),
            inset 0 0 6px rgba(115, 190, 255, 0.04);
        }

        .quest-item.boss-target {
          border-color: rgba(255, 192, 83, 0.42);
        }

        .quest-item.threat-primary {
          border-color: rgba(255, 156, 112, 0.4);
        }

        .quest-item.focus-target {
          border-color: rgba(115, 190, 255, 0.4);
          background: linear-gradient(
            160deg,
            rgba(13, 31, 59, 0.74),
            rgba(10, 24, 49, 0.72)
          );
        }

        .threat-forecast-title,
        .focus-quest-title {
          font-size: 0.62rem;
        }

        .threat-forecast-state,
        .focus-quest-state,
        .threat-tag,
        .focus-tag {
          font-size: 0.52rem;
        }

        .quest-list {
          padding: 2px 2px 70px;
          gap: 7px;
        }

        .quest-empty {
          font-size: 0.72rem;
        }

        .quest-item {
          border-radius: 12px;
          padding: 8px 9px;
          gap: 6px;
        }

        .quest-item::after {
          top: 7px;
          right: 8px;
          font-size: 0.46rem;
          padding: 2px 6px;
        }

        .quest-left {
          gap: 5px;
          min-width: 14px;
        }

        .quest-rail {
          height: 32px;
        }

        .quest-main-head {
          padding-right: 46px;
          gap: 5px;
          align-items: center;
        }

        .quest-directive,
        .quest-rank {
          font-size: 0.39rem;
          letter-spacing: 0.12px;
          white-space: nowrap;
        }

        .quest-item .name {
          font-size: 0.9rem;
          line-height: 1.12;
        }

        .quest-badges {
          gap: 4px;
        }

        .quest-badge,
        .quest-category {
          font-size: 0.48rem;
          padding: 2px 6px;
          letter-spacing: 0.16px;
        }

        .quest-reps {
          font-size: 0.66rem;
        }

        .quest-xp {
          font-size: 0.49rem;
          letter-spacing: 0.16px;
        }

        .quest-stats {
          min-width: 50px;
          padding: 4px 5px;
        }

        .quest-act {
          min-width: 64px;
          padding: 6px 8px;
          font-size: 0.54rem;
          letter-spacing: 0.22px;
        }

        .quest-menu-toggle {
          width: 32px;
          height: 28px;
        }

        .quest-menu-act {
          font-size: 0.56rem;
        }

        .quest-panel,
        .edit-panel,
        .system-gate-panel {
          width: min(100%, 100%);
          border-radius: 14px;
        }

        .quest-head,
        .edit-head {
          font-size: 0.92rem;
        }

        .q-ai-btn {
          font-size: 0.54rem;
          padding: 5px 8px;
        }

        .q-ai-note {
          font-size: 0.58rem;
        }

        .q-label,
        .e-label {
          font-size: 0.68rem;
        }

        .q-input,
        .q-select,
        .q-unit,
        .e-input,
        .e-select,
        .e-textarea {
          font-size: 0.84rem;
        }

        .nav {
          gap: 8px;
          padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        }

        .tab {
          min-height: 40px;
        }

        .nav-icon {
          width: 20px;
          height: 20px;
        }
      }