.auth-row {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 14px;
        background:
          radial-gradient(
            circle at 20% 15%,
            rgba(67, 217, 255, 0.05),
            transparent 45%
          ),
          linear-gradient(160deg, rgba(12, 29, 58, 0.68), rgba(8, 20, 44, 0.7));
        box-shadow:
          inset 0 0 10px rgba(67, 217, 255, 0.04),
          0 0 10px rgba(67, 217, 255, 0.04);
        padding: 12px;
        display: grid;
        gap: 9px;
        justify-items: center;
        text-align: center;
        width: 100%;
      }

      .auth-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
      }

      .auth-btn {
        border: 1px solid rgba(115, 190, 255, 0.55);
        border-radius: 9px;
        background: rgba(10, 23, 47, 0.66);
        color: #def0ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.7rem;
        padding: 9px 6px;
        letter-spacing: 0.35px;
        min-width: 120px;
        box-shadow:
          0 0 8px rgba(67, 217, 255, 0.04),
          inset 0 0 6px rgba(67, 217, 255, 0.03);
      }

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

      .auth-btn.danger {
        border-color: rgba(255, 130, 130, 0.34);
        background: rgba(58, 16, 24, 0.38);
        color: rgba(255, 232, 232, 0.94);
      }

      .auth-status {
        color: rgba(201, 223, 247, 0.82);
        font-size: 0.72rem;
        text-align: center;
      }

      .auth-sync {
        color: rgba(153, 255, 199, 0.82);
        font-size: 0.66rem;
        text-align: center;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.25px;
      }

      .auth-note {
        color: rgba(171, 200, 232, 0.72);
        font-size: 0.64rem;
        text-align: center;
        line-height: 1.25;
      }

      .achievements-page {
        position: relative;
        overflow: hidden;
      }

      .achievements-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 18% 0%, rgba(76, 194, 255, 0.08), transparent 30%),
          radial-gradient(circle at 82% 12%, rgba(139, 156, 255, 0.06), transparent 24%),
          repeating-linear-gradient(
            180deg,
            rgba(163, 199, 255, 0.02) 0,
            rgba(163, 199, 255, 0.02) 1px,
            transparent 1px,
            transparent 13px
          );
        pointer-events: none;
      }

      .achievements-page-head {
        position: relative;
        z-index: 1;
        border: 1px solid rgba(103, 205, 255, 0.22);
        border-radius: 14px;
        background:
          radial-gradient(circle at 85% 14%, rgba(92, 114, 255, 0.08), transparent 30%),
          linear-gradient(160deg, rgba(11, 26, 52, 0.78), rgba(8, 19, 40, 0.82));
        box-shadow:
          inset 0 0 12px rgba(67, 217, 255, 0.04),
          0 0 12px rgba(67, 217, 255, 0.03);
        padding: 12px;
        display: grid;
        gap: 10px;
      }

      .achievements-page-kicker,
      .archive-section-kicker {
        font-family: "Orbitron", sans-serif;
        font-size: 0.54rem;
        letter-spacing: 0.38px;
        text-transform: uppercase;
        color: rgba(171, 200, 232, 0.72);
      }

      .achievements-page-title {
        margin-top: 2px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.96rem;
        line-height: 1.2;
        letter-spacing: 0.72px;
        text-transform: uppercase;
        color: #e8f4ff;
        text-shadow: 0 0 14px rgba(84, 187, 255, 0.16);
      }

      .achievements-page-note {
        margin-top: 5px;
        color: rgba(201, 223, 247, 0.84);
        font-size: 0.68rem;
        line-height: 1.45;
        max-width: 32rem;
      }

      .achievements-page-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .achievements-page-chip {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 999px;
        background: rgba(10, 23, 47, 0.6);
        padding: 5px 9px;
        color: rgba(210, 233, 255, 0.88);
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.28px;
        text-transform: uppercase;
      }

      .shadow-army-block {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background:
          radial-gradient(
            circle at 84% 18%,
            rgba(90, 104, 255, 0.05),
            transparent 32%
          ),
          linear-gradient(160deg, rgba(12, 29, 58, 0.66), rgba(8, 20, 44, 0.68));
        padding: 10px;
        display: grid;
        gap: 8px;
        min-height: 0;
        position: relative;
        z-index: 1;
      }

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

      .shadow-army-head > div {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .shadow-army-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .shadow-army-meta {
        color: rgba(171, 255, 205, 0.82);
        font-size: 0.64rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.28px;
      }

      .shadow-army-toggle,
      .weekly-review-toggle,
      .end-of-day-toggle {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 0.7rem;
        line-height: 1;
      }

      .shadow-army-toggle {
        border: 1px solid rgba(171, 255, 205, 0.2);
        background: rgba(18, 39, 30, 0.54);
        color: #bcffd1;
      }

      .weekly-review-toggle {
        border: 1px solid rgba(103, 205, 255, 0.22);
        background: rgba(18, 37, 49, 0.54);
        color: #c7ecff;
      }

      .end-of-day-toggle {
        border: 1px solid rgba(255, 126, 94, 0.22);
        background: rgba(51, 28, 20, 0.54);
        color: #ffcfbe;
      }

      .shadow-army-toggle span,
      .weekly-review-toggle span,
      .end-of-day-toggle span {
        transition: transform 180ms ease;
      }

      .shadow-army-toggle.open span,
      .weekly-review-toggle.open span,
      .end-of-day-toggle.open span {
        transform: rotate(180deg);
      }

      .shadow-army-detail,
      .weekly-review-detail,
      .end-of-day-detail {
        display: grid;
        gap: 8px;
        margin-top: 2px;
        padding-top: 8px;
      }

      .shadow-army-detail {
        border-top: 1px solid rgba(171, 255, 205, 0.12);
      }

      .weekly-review-detail {
        border-top: 1px solid rgba(103, 205, 255, 0.12);
      }

      .end-of-day-detail {
        border-top: 1px solid rgba(255, 126, 94, 0.12);
      }

      .shadow-army-detail[hidden],
      .weekly-review-detail[hidden],
      .end-of-day-detail[hidden] {
        display: none;
      }

      .shadow-army-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .weekly-review-block {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background:
          radial-gradient(
            circle at 18% 16%,
            rgba(67, 217, 255, 0.08),
            transparent 36%
          ),
          linear-gradient(160deg, rgba(12, 29, 58, 0.68), rgba(8, 20, 44, 0.72));
        padding: 10px;
        display: grid;
        gap: 9px;
        position: relative;
        z-index: 1;
      }

      .weekly-review-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .weekly-review-head-side,
      .end-of-day-head-side {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .weekly-review-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .weekly-review-meta,
      .weekly-review-window {
        color: rgba(171, 200, 232, 0.76);
        font-size: 0.62rem;
        line-height: 1.3;
      }

      .weekly-review-window {
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.25px;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .weekly-review-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .weekly-review-item {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(9, 22, 47, 0.6);
        display: grid;
        gap: 5px;
      }

      .weekly-review-item.dominant {
        border-color: rgba(122, 247, 107, 0.28);
        background:
          radial-gradient(circle at 88% 16%, rgba(122, 247, 107, 0.08), transparent 34%),
          rgba(18, 36, 31, 0.72);
      }

      .weekly-review-label {
        color: rgba(143, 207, 255, 0.82);
        font-size: 0.58rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.35px;
        text-transform: uppercase;
      }

      .weekly-review-value {
        color: #dfefff;
        font-size: 0.66rem;
        line-height: 1.45;
      }

      .end-of-day-block {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background:
          radial-gradient(
            circle at 80% 14%,
            rgba(255, 126, 94, 0.08),
            transparent 34%
          ),
          linear-gradient(160deg, rgba(12, 29, 58, 0.68), rgba(8, 20, 44, 0.72));
        padding: 10px;
        display: grid;
        gap: 9px;
        position: relative;
        z-index: 1;
      }

      .end-of-day-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .end-of-day-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .end-of-day-meta,
      .end-of-day-window {
        color: rgba(171, 200, 232, 0.76);
        font-size: 0.62rem;
        line-height: 1.3;
      }

      .end-of-day-window {
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.25px;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .end-of-day-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .end-of-day-report {
        border: 1px solid rgba(103, 205, 255, 0.16);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(10, 22, 47, 0.55);
        display: grid;
        gap: 4px;
      }

      .end-of-day-status {
        color: #eef7ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.32px;
        text-transform: uppercase;
      }

      .end-of-day-note {
        color: rgba(215, 233, 252, 0.82);
        font-size: 0.62rem;
        line-height: 1.35;
      }

      .end-of-day-item {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(9, 22, 47, 0.6);
        display: grid;
        gap: 5px;
      }

      .end-of-day-item.risk {
        border-color: rgba(255, 126, 94, 0.28);
        background:
          radial-gradient(circle at 88% 16%, rgba(255, 126, 94, 0.08), transparent 34%),
          rgba(43, 24, 24, 0.7);
      }

      .end-of-day-label {
        color: rgba(143, 207, 255, 0.82);
        font-size: 0.58rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.35px;
        text-transform: uppercase;
      }

      .end-of-day-value {
        color: #dfefff;
        font-size: 0.66rem;
        line-height: 1.45;
      }

      .milestone-rewards-block {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background:
          radial-gradient(
            circle at 78% 12%,
            rgba(255, 215, 109, 0.08),
            transparent 34%
          ),
          linear-gradient(160deg, rgba(12, 29, 58, 0.68), rgba(8, 20, 44, 0.72));
        padding: 10px;
        display: grid;
        gap: 8px;
        position: relative;
        z-index: 1;
      }

      .milestone-rewards-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .milestone-rewards-head > div {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .milestone-rewards-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .milestone-rewards-meta {
        color: rgba(255, 227, 162, 0.84);
        font-size: 0.62rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.28px;
      }

      .milestone-rewards-toggle {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 211, 117, 0.22);
        border-radius: 999px;
        background: rgba(48, 33, 14, 0.54);
        color: #ffe2a3;
        display: grid;
        place-items: center;
        font-size: 0.7rem;
        line-height: 1;
      }

      .milestone-rewards-toggle span {
        transition: transform 180ms ease;
      }

      .milestone-rewards-toggle.open span {
        transform: rotate(180deg);
      }

      .milestone-rewards-detail {
        display: grid;
        gap: 7px;
        margin-top: 2px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 211, 117, 0.12);
      }

      .milestone-rewards-detail[hidden] {
        display: none;
      }

      .milestone-rewards-list {
        display: grid;
        gap: 7px;
      }

      .milestone-reward-item {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(9, 22, 47, 0.58);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
      }

      .milestone-reward-item.unlocked {
        border-color: rgba(255, 215, 109, 0.4);
        background:
          radial-gradient(circle at 18% 18%, rgba(255, 215, 109, 0.1), transparent 34%),
          rgba(38, 33, 20, 0.74);
        box-shadow: 0 0 10px rgba(255, 215, 109, 0.08);
      }

      .milestone-reward-item.near-unlock:not(.unlocked) {
        border-color: rgba(130, 208, 255, 0.34);
        background:
          radial-gradient(circle at 18% 18%, rgba(103, 205, 255, 0.08), transparent 34%),
          rgba(16, 29, 52, 0.72);
        box-shadow: 0 0 10px rgba(103, 205, 255, 0.07);
      }

      .milestone-reward-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 1px solid rgba(103, 205, 255, 0.35);
        display: grid;
        place-items: center;
        color: #a7d5ff;
        font-size: 0.78rem;
        background: rgba(12, 27, 57, 0.82);
      }

      .milestone-reward-item.unlocked .milestone-reward-icon {
        border-color: rgba(255, 215, 109, 0.42);
        color: #ffe7a0;
        background: rgba(65, 51, 24, 0.88);
      }

      .milestone-reward-main,
      .milestone-reward-side {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .milestone-reward-name {
        color: #dfefff;
        font-size: 0.72rem;
        font-family: "Orbitron", sans-serif;
      }

      .milestone-reward-type {
        color: rgba(255, 227, 162, 0.82);
        font-size: 0.58rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.28px;
        text-transform: uppercase;
      }

      .milestone-reward-rule,
      .milestone-reward-progress {
        color: rgba(184, 208, 235, 0.82);
        font-size: 0.62rem;
        line-height: 1.25;
      }

      .milestone-reward-side {
        text-align: right;
      }

      .milestone-reward-status {
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.32px;
        color: #ff9f9f;
      }

      .milestone-reward-item.unlocked .milestone-reward-status {
        color: #ffe7a0;
      }

      .milestone-reward-item.near-unlock:not(.unlocked) .milestone-reward-status {
        color: #a9dcff;
      }

      .shadow-card.near-unlock:not(.awakened) {
        border-color: rgba(124, 183, 255, 0.34);
        background:
          radial-gradient(circle at 82% 18%, rgba(124, 183, 255, 0.08), transparent 34%),
          rgba(16, 26, 50, 0.72);
        box-shadow: 0 0 10px rgba(124, 183, 255, 0.08);
      }

      .shadow-card.near-unlock:not(.awakened) .shadow-state {
        color: #9fd7ff;
      }

      .archive-history-list {
        display: grid;
        gap: 7px;
      }

      .archive-history-item {
        border: 1px solid rgba(103, 205, 255, 0.18);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(9, 22, 47, 0.58);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
      }

      .archive-history-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 1px solid rgba(103, 205, 255, 0.35);
        display: grid;
        place-items: center;
        color: #a7d5ff;
        font-size: 0.76rem;
        background: rgba(12, 27, 57, 0.82);
      }

      .archive-history-main {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .archive-history-name {
        color: #dfefff;
        font-size: 0.72rem;
        font-family: "Orbitron", sans-serif;
      }

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

      .archive-history-note {
        color: rgba(184, 208, 235, 0.82);
        font-size: 0.62rem;
        line-height: 1.3;
      }

      .archive-history-actions {
        display: grid;
        gap: 6px;
        justify-items: end;
      }

      .archive-history-btn {
        border: 1px solid rgba(115, 190, 255, 0.42);
        border-radius: 8px;
        background: rgba(12, 24, 48, 0.78);
        color: #d7ebff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.28px;
        padding: 6px 8px;
        min-width: 70px;
      }

      .archive-history-btn.danger {
        border-color: rgba(255, 110, 88, 0.5);
        color: #ffb0a1;
      }

      .shadow-card {
        --shadow-glow: rgba(149, 132, 255, 0.42);
        --shadow-glow-soft: rgba(149, 132, 255, 0.18);
        --shadow-accent: rgba(208, 188, 255, 0.92);
        --shadow-accent-soft: rgba(208, 188, 255, 0.72);
        border: 1px solid rgba(103, 205, 255, 0.2);
        border-radius: 0;
        padding: 9px;
        background: rgba(9, 22, 47, 0.72);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
        position: relative;
        overflow: hidden;
        clip-path: polygon(
          0 12px,
          12px 0,
          calc(100% - 18px) 0,
          100% 18px,
          100% calc(100% - 12px),
          calc(100% - 12px) 100%,
          16px 100%,
          0 calc(100% - 16px)
        );
      }

      .shadow-card.awakened {
        border-color: rgba(122, 247, 107, 0.42);
        background:
          radial-gradient(circle at 20% 20%, rgba(122, 247, 107, 0.12), transparent 34%),
          rgba(20, 42, 28, 0.74);
        box-shadow: 0 0 10px rgba(122, 247, 107, 0.14);
      }

      .shadow-card.summoned {
        border-color: var(--shadow-glow);
        background:
          radial-gradient(circle at 50% 50%, rgba(96, 82, 180, 0.14), transparent 42%),
          linear-gradient(180deg, rgba(6, 10, 20, 0.98), rgba(8, 16, 30, 0.97), rgba(10, 22, 38, 0.95));
        box-shadow:
          inset 0 0 26px rgba(0, 0, 0, 0.58),
          inset 0 0 18px var(--shadow-glow-soft),
          0 0 12px var(--shadow-glow);
      }

      .shadow-card.summoned::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 18% 50%, rgba(22, 14, 44, 0.5), transparent 22%),
          radial-gradient(circle at 82% 48%, rgba(22, 14, 44, 0.5), transparent 22%);
        opacity: 0.78;
        pointer-events: none;
      }

      .shadow-echo {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 118px;
        height: 92px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 14px var(--shadow-glow-soft));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo {
        opacity: 0.94;
        transform: translate(-50%, -50%) scale(1);
      }

      .shadow-echo-igris {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 96px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(120, 8, 8, 0.28));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-igris {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .igris-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 112px;
        height: 108px;
        transform: translate(-50%, -50%);
      }

      .igris-helmet {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 72px;
        height: 98px;
        transform: translate(-50%, -50%);
        background: #0d0d0d;
        clip-path: polygon(
          50% 0%,
          55% 10%,
          65% 15%,
          75% 15%,
          90% 25%,
          95% 40%,
          80% 50%,
          90% 65%,
          75% 75%,
          65% 70%,
          50% 100%,
          35% 70%,
          25% 75%,
          10% 65%,
          20% 50%,
          5% 40%,
          10% 25%,
          25% 15%,
          35% 15%,
          45% 10%
        );
        z-index: 2;
        border: 2px solid #330000;
        box-shadow:
          inset 0 0 24px #300,
          0 0 12px rgba(170, 0, 0, 0.58);
      }

      .igris-helmet::after {
        content: "";
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background: linear-gradient(180deg, transparent, #330000, transparent);
        z-index: 2;
      }

      .igris-eyes-container {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 18px;
        z-index: 3;
        transform: translateY(-8px);
      }

      .igris-eye {
        width: 18px;
        height: 4px;
        background: #ff1100;
        box-shadow:
          0 0 10px #ff1100,
          0 0 18px #4d0000;
        border-radius: 60% 60% 20% 20%;
        filter: blur(0.8px);
        opacity: 0.9;
      }

      .shadow-echo-face {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        border-radius: 52% 52% 46% 46%;
        background: linear-gradient(180deg, rgba(10, 8, 20, 0.98), rgba(34, 19, 58, 0.74));
        box-shadow:
          0 0 14px var(--shadow-glow),
          inset 0 -6px 10px rgba(87, 58, 148, 0.32);
      }

      .shadow-echo-face::before,
      .shadow-echo-face::after {
        content: "";
        position: absolute;
        top: -6px;
        width: 8px;
        height: 14px;
        background: linear-gradient(180deg, rgba(12, 8, 26, 0.98), rgba(74, 42, 132, 0.58));
        box-shadow: 0 0 10px var(--shadow-glow-soft);
      }

      .shadow-echo-face::before {
        left: 4px;
        border-radius: 90% 20% 60% 20%;
        transform: rotate(-18deg);
      }

      .shadow-echo-face::after {
        right: 4px;
        border-radius: 20% 90% 20% 60%;
        transform: rotate(18deg);
      }

      .shadow-eye {
        position: absolute;
        top: 12px;
        width: 8px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--shadow-accent), transparent);
        border-radius: 999px;
        box-shadow: 0 0 8px var(--shadow-glow);
      }

      .shadow-eye.left {
        left: 5px;
        transform: rotate(-12deg);
      }

      .shadow-eye.right {
        right: 5px;
        transform: rotate(12deg);
      }

      .shadow-smoke {
        position: absolute;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(22, 16, 40, 0.82), transparent 68%);
        filter: blur(8px);
        opacity: 0.92;
        pointer-events: none;
      }

      .shadow-smoke-a {
        left: 50%;
        top: 50%;
        width: 138px;
        height: 54px;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 24px var(--shadow-glow-soft);
      }

      .shadow-smoke-b {
        left: 18%;
        top: 54%;
        width: 86px;
        height: 38px;
        transform: rotate(-18deg);
      }

      .shadow-smoke-c {
        right: 18%;
        top: 48%;
        width: 92px;
        height: 42px;
        transform: rotate(18deg);
      }

      .shadow-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 1px solid rgba(103, 205, 255, 0.35);
        display: grid;
        place-items: center;
        color: #a7d5ff;
        font-size: 0.8rem;
        background: rgba(12, 27, 57, 0.82);
      }

      .shadow-card.awakened .shadow-icon {
        color: #d7ffd8;
        border-color: rgba(122, 247, 107, 0.42);
        background: rgba(24, 58, 30, 0.82);
      }

      .shadow-main {
        min-width: 0;
        position: relative;
        z-index: 1;
      }

      .shadow-card.summoned .shadow-main,
      .shadow-card.summoned .shadow-side,
      .shadow-card.summoned .shadow-icon {
        backdrop-filter: blur(0.6px);
        z-index: 1;
      }

      .shadow-card.shadow-igris .shadow-echo-face,
      .shadow-card.shadow-igris .shadow-smoke,
      .shadow-card.shadow-igris .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-igris.summoned {
        background:
          radial-gradient(circle at 50% 48%, rgba(160, 20, 32, 0.1), transparent 34%),
          radial-gradient(circle at 22% 66%, rgba(92, 0, 0, 0.07), transparent 18%),
          radial-gradient(circle at 80% 28%, rgba(122, 18, 34, 0.05), transparent 16%),
          linear-gradient(180deg, rgba(6, 2, 8, 0.98), rgba(12, 4, 12, 0.97), rgba(16, 8, 18, 0.95));
        box-shadow:
          inset 0 0 30px rgba(0, 0, 0, 0.74),
          inset 0 0 16px rgba(92, 0, 0, 0.14),
          0 0 12px rgba(120, 8, 8, 0.14);
      }

      .shadow-echo-iron {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 156px;
        height: 104px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(0, 242, 255, 0.2));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-iron {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .iron-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 144px;
        height: 112px;
        transform: translate(-50%, -50%);
      }

      .iron-helmet {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 126px;
        height: 102px;
        transform: translate(-50%, -50%);
        background: linear-gradient(145deg, #050a14 0%, #000 100%);
        clip-path: polygon(
          15% 25%,
          25% 0%,
          35% 20%,
          50% 15%,
          65% 20%,
          75% 0%,
          85% 25%,
          100% 45%,
          90% 85%,
          70% 95%,
          50% 100%,
          30% 95%,
          10% 85%,
          0% 45%
        );
        z-index: 2;
        border: 2px solid #004466;
        box-shadow:
          inset 0 0 34px #002233,
          0 0 14px rgba(0, 242, 255, 0.12);
      }

      .iron-helmet::after {
        content: "";
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 58px;
        background: repeating-linear-gradient(
          180deg,
          rgba(0, 242, 255, 0.2) 0,
          rgba(0, 242, 255, 0.2) 2px,
          transparent 2px,
          transparent 10px
        );
        opacity: 0.2;
        z-index: 2;
      }

      .iron-eyes-container {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 28px;
        z-index: 3;
        transform: translateY(-4px);
      }

      .iron-eye {
        width: 28px;
        height: 7px;
        background: #00f2ff;
        box-shadow:
          0 0 12px #00f2ff,
          0 0 24px #0044ff;
        clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
        filter: blur(0.6px);
        opacity: 0.9;
      }

      .shadow-card.shadow-iron .shadow-echo-face,
      .shadow-card.shadow-iron .shadow-smoke,
      .shadow-card.shadow-iron .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-iron.summoned {
        background:
          radial-gradient(circle at 50% 48%, rgba(0, 242, 255, 0.1), transparent 34%),
          radial-gradient(circle at 22% 64%, rgba(0, 68, 255, 0.08), transparent 20%),
          radial-gradient(circle at 78% 30%, rgba(0, 242, 255, 0.06), transparent 18%),
          linear-gradient(180deg, rgba(6, 10, 20, 0.98), rgba(8, 16, 30, 0.97), rgba(10, 22, 38, 0.95));
      }

      .shadow-echo-tank {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 164px;
        height: 108px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(0, 234, 255, 0.18));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-tank {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .tank-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 116px;
        transform: translate(-50%, -50%);
      }

      .tank-head {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 136px;
        height: 104px;
        transform: translate(-50%, -50%);
        background: #080810;
        clip-path: polygon(
          32% 10%,
          38% 4%,
          44% 12%,
          56% 12%,
          62% 4%,
          68% 10%,
          92% 24%,
          100% 58%,
          86% 90%,
          50% 100%,
          14% 90%,
          0% 58%,
          8% 24%
        );
        z-index: 2;
        box-shadow:
          inset 0 0 36px #001a33,
          0 0 16px rgba(0, 234, 255, 0.12);
        border: 1px solid rgba(0, 85, 255, 0.2);
      }

      .tank-eyes-container {
        position: absolute;
        top: 34%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 34px;
        z-index: 3;
      }

      .tank-eye {
        width: 28px;
        height: 14px;
        background: #00eaff;
        box-shadow:
          0 0 14px #00eaff,
          0 0 26px #0044ff;
        clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 70%);
        filter: blur(0.55px);
      }

      .tank-eye.right {
        transform: scaleX(-1);
      }

      .tank-snout-glow {
        position: absolute;
        bottom: 16%;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 8px;
        background: #00eaff;
        filter: blur(7px);
        opacity: 0.34;
        z-index: 3;
      }

      .shadow-card.shadow-tank .shadow-echo-face,
      .shadow-card.shadow-tank .shadow-smoke,
      .shadow-card.shadow-tank .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-tank.summoned {
        background:
          radial-gradient(circle at 50% 54%, rgba(0, 234, 255, 0.1), transparent 34%),
          radial-gradient(circle at 18% 62%, rgba(0, 68, 255, 0.07), transparent 20%),
          radial-gradient(circle at 82% 34%, rgba(0, 234, 255, 0.06), transparent 16%),
          linear-gradient(180deg, rgba(6, 10, 20, 0.98), rgba(8, 16, 30, 0.97), rgba(10, 22, 38, 0.95));
      }

      .shadow-echo-tusk {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 154px;
        height: 110px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(212, 0, 255, 0.18));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-tusk {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .tusk-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 122px;
        height: 112px;
        transform: translate(-50%, -50%);
      }

      .tusk-head {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 104px;
        transform: translate(-50%, -50%);
        background: #0a0510;
        clip-path: polygon(
          20% 15%,
          50% 0%,
          80% 15%,
          85% 30%,
          95% 45%,
          80% 50%,
          100% 70%,
          85% 75%,
          50% 100%,
          15% 75%,
          0% 70%,
          20% 50%,
          5% 45%,
          15% 30%
        );
        z-index: 2;
        box-shadow: inset 0 0 28px #1a0033;
        border-bottom: 3px solid #4b0082;
      }

      .tusk-eyes-container {
        position: absolute;
        top: 38%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 16px;
        z-index: 3;
      }

      .tusk-eye {
        width: 22px;
        height: 4px;
        background: #d400ff;
        box-shadow:
          0 0 10px #d400ff,
          0 0 18px #1a0033;
        clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
        filter: blur(0.7px);
      }

      .tusk-eye.right {
        transform: scaleX(-1);
      }

      .tusk-beads {
        position: absolute;
        bottom: 10%;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 7px;
        z-index: 4;
      }

      .tusk-bead {
        width: 8px;
        height: 8px;
        background: #ff0044;
        border-radius: 50%;
        box-shadow:
          0 0 8px #ff0044,
          0 0 14px #4b0082;
        opacity: 0.85;
      }

      .shadow-card.shadow-tusk .shadow-echo-face,
      .shadow-card.shadow-tusk .shadow-smoke,
      .shadow-card.shadow-tusk .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-tusk.summoned {
        background:
          linear-gradient(180deg, rgba(5, 2, 8, 0.98), rgba(14, 6, 20, 0.97)),
          radial-gradient(circle at 50% 50%, rgba(212, 0, 255, 0.08), transparent 58%);
        box-shadow:
          inset 0 0 30px rgba(0, 0, 0, 0.72),
          inset 0 0 18px rgba(75, 0, 130, 0.22),
          0 0 12px rgba(212, 0, 255, 0.14);
      }

      .shadow-echo-beru {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 112px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(204, 0, 255, 0.18));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-beru {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .beru-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 118px;
        height: 132px;
        transform: translate(-50%, -50%);
      }

      .beru-exoskeleton {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 128px;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, #09050f 0%, #000 48%, #0a0611 100%);
        clip-path: polygon(
          20% 15%,
          35% 5%,
          50% 12%,
          55% 12%,
          65% 5%,
          80% 15%,
          95% 40%,
          85% 70%,
          65% 85%,
          60% 95%,
          55% 90%,
          50% 100%,
          45% 90%,
          40% 95%,
          35% 85%,
          15% 70%,
          5% 40%
        );
        z-index: 2;
        border: 1px solid #2a0052;
        box-shadow:
          inset 0 0 28px rgba(26, 0, 51, 0.92),
          0 0 16px rgba(42, 0, 82, 0.18);
      }

      .beru-eyes {
        position: absolute;
        top: 38%;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 3;
      }

      .beru-eye {
        width: 34px;
        height: 16px;
        background: radial-gradient(circle at 30% 30%, #00f2ff 0%, #7000ff 70%);
        clip-path: polygon(10% 0%, 100% 30%, 90% 100%, 0% 70%);
        box-shadow: 0 0 18px rgba(0, 242, 255, 0.95);
        filter: contrast(1.2);
      }

      .beru-eye.right {
        transform: scaleX(-1);
      }

      .beru-antenna {
        position: absolute;
        width: 2px;
        height: 56px;
        background: linear-gradient(to top, #7000ff, transparent);
        top: -32px;
        transform-origin: bottom;
        z-index: 1;
      }

      .beru-antenna.ant-l {
        left: 31%;
        transform: rotate(-35deg);
      }

      .beru-antenna.ant-r {
        right: 31%;
        transform: rotate(35deg);
      }

      .beru-mandible-detail {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 12px;
        background: #7000ff;
        filter: blur(10px);
        opacity: 0.2;
        z-index: 1;
      }

      .shadow-card.shadow-beru .shadow-echo-face,
      .shadow-card.shadow-beru .shadow-smoke,
      .shadow-card.shadow-beru .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-beru.summoned {
        background:
          linear-gradient(180deg, rgba(2, 1, 4, 0.98), rgba(9, 4, 14, 0.97)),
          radial-gradient(circle at 50% 50%, rgba(204, 0, 255, 0.08), transparent 58%);
        box-shadow:
          inset 0 0 30px rgba(0, 0, 0, 0.74),
          inset 0 0 18px rgba(48, 16, 80, 0.24),
          0 0 12px rgba(204, 0, 255, 0.14);
      }

      .shadow-echo-bellion {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 156px;
        height: 114px;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          filter 180ms ease;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(157, 0, 255, 0.18));
        z-index: 0;
      }

      .shadow-card.summoned .shadow-echo-bellion {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(1);
      }

      .bellion-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 126px;
        height: 116px;
        transform: translate(-50%, -50%);
      }

      .bellion-helmet {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 102px;
        height: 110px;
        transform: translate(-50%, -50%);
        background: linear-gradient(180deg, #0a0015 0%, #000 100%);
        clip-path: polygon(
          50% 15%,
          55% 5%,
          70% 0%,
          75% 15%,
          95% 10%,
          90% 35%,
          80% 55%,
          50% 100%,
          20% 55%,
          10% 35%,
          5% 10%,
          25% 15%,
          30% 0%,
          45% 5%
        );
        z-index: 2;
        box-shadow: inset 0 0 28px #2a0052;
        border: 1px solid #4b0082;
      }

      .bellion-eyes-container {
        position: absolute;
        top: 35%;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 12px;
        z-index: 3;
      }

      .bellion-eye {
        width: 24px;
        height: 4px;
        background: #9d00ff;
        box-shadow:
          0 0 10px #9d00ff,
          0 0 18px #2a0052;
        clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 100%);
        filter: blur(0.7px);
      }

      .bellion-eye.right {
        transform: scaleX(-1);
      }

      .bellion-visor-line {
        position: absolute;
        top: 24%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 54px;
        background: linear-gradient(180deg, transparent, #4b0082, transparent);
        z-index: 3;
        opacity: 0.5;
      }

      .bellion-wing-glow {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 118px;
        height: 34px;
        background: radial-gradient(ellipse, rgba(157, 0, 255, 0.14), transparent);
        z-index: 1;
      }

      .shadow-card.shadow-bellion .shadow-echo-face,
      .shadow-card.shadow-bellion .shadow-smoke,
      .shadow-card.shadow-bellion .shadow-eye {
        display: none;
      }

      .shadow-card.shadow-bellion.summoned {
        background:
          linear-gradient(180deg, rgba(2, 0, 5, 0.98), rgba(10, 3, 16, 0.97)),
          radial-gradient(circle at 50% 50%, rgba(157, 0, 255, 0.08), transparent 58%);
        box-shadow:
          inset 0 0 30px rgba(0, 0, 0, 0.74),
          inset 0 0 18px rgba(75, 0, 130, 0.2),
          0 0 12px rgba(157, 0, 255, 0.14);
      }


      .shadow-name {
        color: #dfefff;
        font-size: 0.72rem;
        font-family: "Orbitron", sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .shadow-rule {
        margin-top: 2px;
        color: rgba(184, 208, 235, 0.8);
        font-size: 0.62rem;
        line-height: 1.2;
      }

      .shadow-state {
        font-family: "Orbitron", sans-serif;
        font-size: 0.58rem;
        color: #ff9f9f;
        letter-spacing: 0.3px;
      }

      .shadow-card.awakened .shadow-state {
        color: #9effb8;
      }

      .shadow-card.summoned .shadow-state {
        color: var(--shadow-accent);
        text-shadow: 0 0 10px var(--shadow-glow);
      }

      .shadow-side {
        display: grid;
        gap: 6px;
        justify-items: end;
        position: relative;
        z-index: 1;
      }

      .shadow-action-btn {
        border: 1px solid rgba(126, 160, 255, 0.34);
        border-radius: 8px;
        background: rgba(14, 24, 49, 0.82);
        color: #d7e7ff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.54rem;
        letter-spacing: 0.3px;
        padding: 5px 8px;
      }

      .shadow-action-btn.active {
        border-color: var(--shadow-glow);
        background: rgba(26, 22, 60, 0.92);
        color: var(--shadow-accent);
        box-shadow: 0 0 10px var(--shadow-glow-soft);
      }

      @media (max-width: 900px) {
        .shadow-army-grid {
          grid-template-columns: 1fr;
        }
      }

      .achievements-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .achievements-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .achievements-meta {
        margin-top: 3px;
        color: rgba(171, 200, 232, 0.74);
        font-size: 0.62rem;
        line-height: 1.3;
      }

      .achievements-list {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background: linear-gradient(
          160deg,
          rgba(12, 29, 58, 0.66),
          rgba(8, 20, 44, 0.68)
        );
        padding: 8px;
        display: grid;
        gap: 7px;
        min-height: 0;
        position: relative;
        z-index: 1;
      }

      .shadow-army-block::before,
      .weekly-review-block::before,
      .end-of-day-block::before,
      .milestone-rewards-block::before,
      .achievements-list::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          linear-gradient(90deg, rgba(90, 156, 255, 0.06), transparent 28%),
          repeating-linear-gradient(
            180deg,
            rgba(163, 199, 255, 0.02) 0,
            rgba(163, 199, 255, 0.02) 1px,
            transparent 1px,
            transparent 14px
          );
        pointer-events: none;
      }

      .shadow-army-head,
      .weekly-review-head,
      .end-of-day-head,
      .milestone-rewards-head,
      .achievements-head {
        position: relative;
        z-index: 1;
      }

      .archive-section-kicker {
        margin-bottom: 3px;
      }

      .achievements-items {
        display: grid;
        gap: 7px;
      }

      .achievement-item {
        border: 1px solid rgba(103, 205, 255, 0.2);
        border-radius: 10px;
        padding: 8px 9px;
        background: rgba(9, 22, 47, 0.58);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
      }

      .achievement-icon {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        border: 1px solid rgba(103, 205, 255, 0.35);
        display: grid;
        place-items: center;
        color: #8fcfff;
        font-size: 0.76rem;
        background: rgba(12, 27, 57, 0.8);
      }

      .achievement-main {
        min-width: 0;
      }

      .achievement-name {
        color: #dfefff;
        font-size: 0.72rem;
        font-family: "Orbitron", sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .achievement-rule {
        margin-top: 2px;
        color: rgba(184, 208, 235, 0.82);
        font-size: 0.62rem;
        line-height: 1.2;
      }

      .achievement-state {
        font-family: "Orbitron", sans-serif;
        font-size: 0.6rem;
        color: #ff9f9f;
        letter-spacing: 0.35px;
      }

      .achievement-item.unlocked {
        border-color: rgba(122, 247, 107, 0.45);
        background: rgba(22, 56, 28, 0.56);
        box-shadow: 0 0 8px rgba(122, 247, 107, 0.05);
      }

      .achievement-item.unlocked .achievement-icon {
        color: #c9ffb9;
        border-color: rgba(122, 247, 107, 0.45);
        background: rgba(29, 72, 35, 0.82);
      }

      .achievement-item.unlocked .achievement-state {
        color: #9effb8;
      }

      .achievement-empty {
        border: 1px dashed rgba(103, 205, 255, 0.22);
        border-radius: 10px;
        padding: 12px 10px;
        background: rgba(9, 22, 47, 0.46);
        display: grid;
        gap: 5px;
        text-align: center;
      }

      .achievement-empty-title {
        color: #dfefff;
        font-size: 0.7rem;
        font-family: "Orbitron", sans-serif;
      }

      .achievement-empty-note {
        color: rgba(184, 208, 235, 0.8);
        font-size: 0.62rem;
        line-height: 1.35;
      }

      @media (max-width: 640px) {
        .achievements-page {
          gap: 8px;
        }

        .auth-row,
        .shadow-army-block,
        .weekly-review-block,
        .end-of-day-block,
        .milestone-rewards-block,
        .achievements-list {
          padding: 8px;
        }

        .auth-actions {
          gap: 6px;
        }

        .auth-btn {
          min-width: 104px;
          font-size: 0.62rem;
          padding: 8px 6px;
        }

        .auth-status,
        .auth-sync,
        .shadow-army-meta,
        .weekly-review-meta,
        .weekly-review-window,
        .end-of-day-meta,
        .end-of-day-window,
        .end-of-day-note,
        .milestone-rewards-meta,
        .shadow-rule,
        .weekly-review-value,
        .end-of-day-value,
        .archive-history-note,
        .milestone-reward-rule,
        .milestone-reward-progress,
        .achievement-rule,
        .achievement-empty-note {
          font-size: 0.58rem;
        }

        .shadow-army-title,
        .weekly-review-title,
        .end-of-day-title,
        .milestone-rewards-title,
        .archive-history-name,
        .milestone-reward-name,
        .achievement-name,
        .achievements-title,
        .achievement-empty-title {
          font-size: 0.68rem;
        }

        .shadow-card,
        .weekly-review-item,
        .end-of-day-report,
        .end-of-day-item,
        .milestone-reward-item,
        .archive-history-item,
        .achievement-item {
          padding: 7px 8px;
          gap: 7px;
        }

        .weekly-review-grid {
          grid-template-columns: 1fr;
        }

        .end-of-day-grid {
          grid-template-columns: 1fr;
        }

        .shadow-icon,
        .milestone-reward-icon,
        .archive-history-icon,
        .achievement-icon {
          width: 20px;
          height: 20px;
          font-size: 0.68rem;
        }

        .achievement-state,
        .shadow-state,
        .milestone-reward-status {
          font-size: 0.54rem;
        }
      }