:root {
        --navy: #0d1b2a;
        --navy2: #12283f;
        --teal: #0e7490;
        --sea: #4a9b8e;
        --gold: #c9a84c;
        --copper: #a0633a;
        --cream: #f4efe6;
        --mist: #e8f4f8;
        --line: rgba(74, 155, 142, 0.22);
        --card: rgba(255, 255, 255, 0.025);
        --fdisp: "Barlow Condensed", sans-serif;
        --fbody: "Inter", sans-serif;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--navy);
        color: var(--cream);
        font-family: var(--fbody);
        -webkit-font-smoothing: antialiased;
        line-height: 1.6;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
        color: inherit;
      }
      ::selection {
        background: var(--gold);
        color: var(--navy);
      }

      /* boot loading screen */
      #boot {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.5s ease 0.5s;
      }
      #boot .bt-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1);
      }
      #boot .bt-mark {
        position: relative;
        width: 110px;
        height: 110px;
      }
      #boot .bt-logo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border: 3px solid var(--gold);
        border-radius: 12px;
        padding: 4px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        display: block;
      }
      #boot .bt-ring {
        position: absolute;
        inset: -14px;
        border: 2px solid rgba(201, 168, 76, 0.16);
        border-top-color: var(--gold);
        border-radius: 50%;
        animation: btspin 1s linear infinite;
      }
      #boot .bt-name {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.34em;
        text-transform: uppercase;
        color: var(--cream);
        opacity: 0.9;
      }
      #boot .bt-sub {
        font-size: 11px;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--gold);
        opacity: 0.8;
        margin-top: -10px;
      }
      @keyframes btspin {
        to {
          transform: rotate(360deg);
        }
      }
      #boot.boot-done {
        opacity: 0;
        pointer-events: none;
      }
      #boot.boot-done .bt-stack {
        transform: translate(calc(-50vw + 66px), calc(-50vh + 60px)) scale(0.45);
      }
      #boot.boot-done .bt-ring,
      #boot.boot-done .bt-name,
      #boot.boot-done .bt-sub {
        opacity: 0;
        transition: opacity 0.22s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        #boot,
        #boot .bt-stack {
          transition: opacity 0.3s ease;
        }
        #boot.boot-done .bt-stack {
          transform: none;
        }
        #boot .bt-ring {
          animation: none;
        }
      }

      /* subtle wave-line signature motif behind hero */
      .bg-motif {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.5;
      }

      /* ---- layout ---- */
      .wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
      }
      .page {
        min-height: 100vh;
        padding-top: 140px;
        animation: fade 0.5s ease;
      }
      @media (max-width: 860px) {
        .page {
          padding-top: 96px;
        }
      }
      @keyframes fade {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* ---- nav ---- */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(13, 27, 42, 0.86);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .nav-in {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .nav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
      }
      .nav-brand svg {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
      }
      .nav-brand .bn {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 19px;
        letter-spacing: 3px;
        color: var(--cream);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .nav-links a {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 7px 11px;
        border-radius: 6px;
        color: var(--mist);
        transition: 0.15s;
        white-space: nowrap;
      }
      .nav-links a:hover {
        color: var(--cream);
        background: rgba(14, 116, 144, 0.16);
      }
      .nav-links a.on {
        color: var(--gold);
      }
      .nav-cta {
        background: var(--gold);
        color: var(--navy);
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 8px 16px;
        border-radius: 6px;
        transition: 0.15s;
      }
      .nav-cta:hover {
        background: #d8b95e;
        transform: translateY(-1px);
      }
      .burger {
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
      }
      .burger span {
        width: 22px;
        height: 2px;
        background: var(--cream);
        transition: 0.2s;
      }
      .mobile-menu {
        display: none;
      }
      @media (max-width: 860px) {
        .nav-links {
          display: none;
        }
        .burger {
          display: flex;
        }
        .mobile-menu.open {
          display: block;
          position: fixed;
          top: 64px;
          left: 0;
          right: 0;
          z-index: 49;
          background: rgba(13, 27, 42, 0.98);
          border-bottom: 1px solid var(--line);
          padding: 12px 20px 20px;
        }
        .mobile-menu a {
          display: block;
          font-family: var(--fdisp);
          font-weight: 600;
          font-size: 18px;
          letter-spacing: 1px;
          text-transform: uppercase;
          padding: 12px 6px;
          border-bottom: 1px solid var(--line);
          color: var(--mist);
        }
        .mobile-menu a.on {
          color: var(--gold);
        }
        .mobile-menu .nav-cta {
          display: block;
          text-align: center;
          margin-top: 14px;
        }
      }

      /* ---- hero ---- */
      .hero {
        text-align: center;
        padding: 48px 0 40px;
      }
      .hero-logo {
        width: 170px;
        height: 170px;
        margin: 0 auto 20px;
      }
      .hero h1 {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: clamp(44px, 9vw, 84px);
        letter-spacing: 2px;
        line-height: 0.95;
        color: var(--cream);
        margin-bottom: 12px;
      }
      .hero-actions-resume {
        margin-top: 10px;
        gap: 10px;
        flex-wrap: nowrap;
      }

      .hero-actions-resume .btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
      }

      @media (max-width: 640px) {
        .hero-actions-resume {
          flex-direction: column;
          align-items: stretch;
        }

        .hero-actions-resume .btn {
          width: 100%;
        }
      }

      .tagline {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: clamp(14px, 3.2vw, 20px);
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--sea);
        margin-bottom: 8px;
      }
      .tagline .w {
        cursor: pointer;
        transition: 0.15s;
        padding: 0 2px;
        border-radius: 3px;
      }
      .tagline .w:hover {
        color: var(--gold);
      }
      .tagline .sep {
        color: var(--teal);
        opacity: 0.5;
        margin: 0 4px;
      }
      .hero-intro {
        max-width: 640px;
        margin: 22px auto 0;
        font-size: 16px;
        color: var(--cream);
        opacity: 0.92;
      }
      .hero-photo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin: 30px auto 0;
        display: block;
        border: 3px solid var(--gold);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
      }
      .hero-actions {
        margin-top: 30px;
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* ---- buttons ---- */
      .btn {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 13px 26px;
        border-radius: 7px;
        transition: 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }
      .btn-gold {
        background: var(--gold);
        color: var(--navy);
      }
      .btn-gold:hover {
        background: #d8b95e;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(201, 168, 76, 0.28);
      }
      .btn-ghost {
        border: 1.5px solid var(--teal);
        color: var(--mist);
      }
      .btn-ghost:hover {
        background: rgba(14, 116, 144, 0.15);
        border-color: var(--sea);
      }
      .btn-blue {
        background: var(--teal);
        color: #fff;
      }
      .btn-blue:hover {
        background: #1189ab;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(14, 116, 144, 0.32);
      }
      .btn-sm {
        padding: 9px 16px;
        font-size: 13px;
      }

      /* ---- section headers ---- */
      .sec-head {
        margin: 0 0 26px;
      }
      .eyebrow {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--gold);
      }
      .sec-head h2 {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: clamp(30px, 6vw, 46px);
        letter-spacing: 1px;
        color: var(--cream);
        line-height: 1;
      }
      .page-lead {
        color: var(--cream);
        opacity: 0.85;
        max-width: 660px;
        margin-top: 14px;
        font-size: 16px;
      }

      /* ---- about ---- */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start;
      }
      @media (min-width: 820px) {
        .about-grid {
          grid-template-columns: 260px 1fr;
        }
      }
      .about-side {
        text-align: center;
      }
      .about-photo {
        width: 200px;
        height: 200px;
        border-radius: 14px;
        object-fit: cover;
        border: 2px solid var(--gold);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
      }
      .about-side .name {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 24px;
        letter-spacing: 1px;
        margin-top: 16px;
      }
      .about-side .loc {
        color: var(--sea);
        font-size: 13px;
        letter-spacing: 1px;
        margin-top: 4px;
      }
      .about-body p {
        margin-bottom: 18px;
        font-size: 16.5px;
        color: var(--cream);
        opacity: 0.94;
      }
      .about-cta {
        margin-top: 8px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: linear-gradient(
          180deg,
          rgba(201, 168, 76, 0.05),
          rgba(14, 116, 144, 0.03)
        );
      }
      .about-cta p {
        margin-bottom: 14px;
      }
      .about-cta .row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      /* ---- experience ---- */
      .exp-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding: 16px 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--card);
      }
      .filter-note {
        font-size: 13px;
        color: var(--sea);
        letter-spacing: 0.3px;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }
      .chip {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 6px 13px;
        border-radius: 20px;
        border: 1.5px solid var(--line);
        color: var(--mist);
        transition: 0.15s;
        cursor: pointer;
      }
      .chip:hover {
        border-color: var(--sea);
      }
      .chip.on {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
      }
      .exp-card {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 24px;
        margin-bottom: 18px;
        background: var(--card);
        transition: 0.2s;
      }
      .exp-card:hover {
        border-color: rgba(74, 155, 142, 0.4);
      }
      .exp-card.hl {
        border-left: 3px solid var(--gold);
      }
      .exp-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        align-items: baseline;
      }
      .exp-title {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 22px;
        letter-spacing: 0.5px;
        color: var(--cream);
      }
      .exp-dates {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 1px;
        color: var(--gold);
        white-space: nowrap;
      }
      .exp-org {
        color: var(--sea);
        font-weight: 600;
        font-size: 14.5px;
        margin-top: 2px;
      }
      .exp-loc {
        color: var(--mist);
        opacity: 0.6;
        font-size: 13px;
        margin-top: 1px;
      }
      .exp-trans {
        font-style: italic;
        color: var(--mist);
        opacity: 0.8;
        font-size: 14.5px;
        margin: 14px 0 4px;
        padding-left: 14px;
        border-left: 2px solid var(--teal);
      }
      .exp-bullets {
        list-style: none;
        margin-top: 14px;
      }
      .exp-bullets li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 9px;
        font-size: 14.5px;
        color: var(--cream);
        opacity: 0.92;
      }
      .exp-bullets li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 9px;
        width: 6px;
        height: 6px;
        background: var(--gold);
        border-radius: 1px;
        transform: rotate(45deg);
      }
      .exp-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 16px;
      }
      .exp-tags .t {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding: 3px 9px;
        border-radius: 4px;
        background: rgba(14, 116, 144, 0.16);
        color: var(--sea);
      }
      .subblock {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px dashed var(--line);
      }
      .subblock h4 {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 8px;
      }
      .qual-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .qual {
        font-size: 11.5px;
        padding: 3px 9px;
        border: 1px solid var(--line);
        border-radius: 4px;
        color: var(--mist);
        opacity: 0.85;
      }
      .awards-list li {
        font-size: 13px;
        color: var(--gold);
        margin-bottom: 4px;
        padding-left: 16px;
        position: relative;
      }
      .awards-list li::before {
        content: "★";
        position: absolute;
        left: 0;
        font-size: 10px;
        opacity: 0.8;
      }
      .reviews {
        margin-top: 14px;
        display: grid;
        gap: 12px;
      }
      .review {
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(201, 168, 76, 0.03);
      }
      .review .q {
        font-size: 14px;
        font-style: italic;
        color: var(--cream);
        opacity: 0.92;
        line-height: 1.55;
      }
      .review .by {
        margin-top: 9px;
        font-size: 12.5px;
      }
      .review .by b {
        color: var(--gold);
        font-weight: 600;
      }
      .review .by span {
        color: var(--mist);
        opacity: 0.6;
      }

      /* cert links at bottom of experience */
      .certlinks {
        margin-top: 36px;
        padding-top: 26px;
        border-top: 1px solid var(--line);
      }
      .certlinks a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        color: var(--sea);
        padding: 5px 0;
        margin-right: 18px;
        transition: 0.15s;
      }
      .certlinks a:hover {
        color: var(--gold);
      }

      /* ---- hobbies ---- */
      .hob-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
        gap: 12px;
      }
      .hob-card {
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 15px 16px;
        background: var(--card);
        transition: 0.2s;
      }
      .hob-card:hover {
        border-color: rgba(74, 155, 142, 0.4);
        transform: translateY(-3px);
      }
      .hob-icon {
        width: 28px;
        height: 28px;
        color: var(--gold);
        margin-bottom: 9px;
      }
      .hob-card h3 {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 16.5px;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
      }
      .hob-card p {
        font-size: 13px;
        color: var(--cream);
        opacity: 0.85;
        line-height: 1.5;
      }

      .proj-cats {
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr;
      }
      @media (min-width: 720px) {
        .proj-cats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      .proj-cat {
        border: 1px dashed var(--line);
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        background: var(--card);
      }
      .proj-cat h3 {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 0.5px;
        color: var(--cream);
      }
      .proj-cat .sub {
        font-size: 12.5px;
        color: var(--sea);
        margin-top: 4px;
        letter-spacing: 0.5px;
      }
      .constr {
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 7px 14px;
        border: 1px solid var(--gold);
        border-radius: 6px;
        opacity: 0.85;
      }
      .proj-note {
        font-size: 12px;
        color: var(--mist);
        opacity: 0.55;
        margin-top: 12px;
        line-height: 1.5;
      }

      /* ---- education ---- */
      .jst-callout {
        border: 1px solid var(--gold);
        border-radius: 14px;
        padding: 26px;
        margin-bottom: 30px;
        background: linear-gradient(
          135deg,
          rgba(201, 168, 76, 0.09),
          rgba(14, 116, 144, 0.05)
        );
        text-align: center;
      }
      .jst-callout .big {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: clamp(38px, 8vw, 60px);
        color: var(--gold);
        line-height: 1;
        letter-spacing: 1px;
      }
      .jst-callout .lbl {
        font-size: 15px;
        color: var(--cream);
        opacity: 0.9;
        margin-top: 8px;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
      }
      .edu-block {
        margin-bottom: 30px;
      }
      .edu-item {
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 18px 20px;
        margin-bottom: 12px;
        background: var(--card);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
      }
      .edu-item .ti {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.4px;
        color: var(--cream);
      }
      .edu-item .meta {
        font-size: 13px;
        color: var(--sea);
        margin-top: 2px;
      }
      .edu-item .note {
        font-size: 12px;
        color: var(--mist);
        opacity: 0.6;
        margin-top: 3px;
        font-style: italic;
      }
      .edu-view {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--navy);
        background: var(--sea);
        padding: 7px 14px;
        border-radius: 6px;
        white-space: nowrap;
        transition: 0.15s;
      }
      .edu-view:hover {
        background: var(--gold);
      }
      .cert-tier {
        margin-bottom: 8px;
      }
      .tier-lbl {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--teal);
        margin: 22px 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .tier-lbl::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
      }
      .cert-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      @media (min-width: 680px) {
        .cert-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .cert {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 15px 17px;
        background: var(--card);
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start;
        transition: 0.15s;
      }
      .cert:hover {
        border-color: rgba(74, 155, 142, 0.4);
      }
      .cert .cti {
        font-weight: 600;
        font-size: 14.5px;
        color: var(--cream);
        line-height: 1.35;
      }
      .cert .cmeta {
        font-size: 12.5px;
        color: var(--sea);
        margin-top: 4px;
      }
      .cert .cdesc {
        font-size: 12px;
        color: var(--mist);
        opacity: 0.7;
        margin-top: 5px;
        line-height: 1.45;
      }
      .badge-hist {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--copper);
        background: rgba(160, 99, 58, 0.14);
        padding: 2px 7px;
        border-radius: 4px;
        margin-top: 6px;
      }
      .cert .cview {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--sea);
        white-space: nowrap;
        padding-top: 2px;
      }
      .cert .cview:hover {
        color: var(--gold);
      }

      /* ---- contact ---- */
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 760px;
      }
      @media (min-width: 760px) {
        .contact-grid {
          grid-template-columns: minmax(0, 760px);
          align-items: start;
        }
      }
      .field {
        margin-bottom: 16px;
      }
      .field label {
        display: block;
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sea);
        margin-bottom: 6px;
      }
      .field input,
      .field textarea,
      .field select {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px 14px;
        color: var(--cream);
        font-family: inherit;
        font-size: 15px;
        transition: 0.15s;
      }
      .field input:focus,
      .field textarea:focus,
      .field select:focus {
        outline: none;
        border-color: var(--gold);
        background: rgba(255, 255, 255, 0.05);
      }
      .field textarea {
        resize: vertical;
        min-height: 120px;
      }
      .field select {
        width: 100%;
        background: var(--navy2);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px 14px;
        color: var(--cream);
        font-family: inherit;
        font-size: 15px;
      }
      .notice {
        font-size: 12.5px;
        color: var(--mist);
        opacity: 0.6;
        margin-top: 14px;
        padding: 10px 12px;
        border: 1px dashed var(--line);
        border-radius: 8px;
        line-height: 1.5;
      }

      /* ---- footer ---- */
      .footer {
        border-top: 1px solid var(--line);
        margin-top: 60px;
        padding: 26px 0;
        text-align: center;
      }
      .footer .f-in {
        font-size: 13px;
        color: var(--mist);
        opacity: 0.7;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        justify-content: center;
        align-items: center;
      }
      .footer a:hover {
        color: var(--gold);
      }
      .footer .dot {
        opacity: 0.4;
      }

      /* ---- spinner ---- */
      .spin-wrap {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(13, 27, 42, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        backdrop-filter: blur(4px);
      }
      .spin {
        position: relative;
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .spin::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid rgba(201, 168, 76, 0.18);
        border-top-color: var(--gold);
        animation: spin 1.1s linear infinite;
      }
      .spin::after {
        content: "";
        position: absolute;
        inset: 7px;
        border-radius: 50%;
        border: 1px solid rgba(14, 116, 144, 0.45);
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .spin-txt {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
      }

      /* ---- modal (resume compiler + admin) ---- */
      .modal-bg {
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(6, 14, 22, 0.82);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 14px;
        overflow-y: auto;
        animation: fade 0.25s;
      }
      .modal {
        background: var(--navy2);
        border: 1px solid var(--line);
        border-radius: 16px;
        max-width: 720px;
        width: 100%;
        margin: auto;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
      }
      .modal-head {
        padding: 22px 24px;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }
      .modal-head h3 {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 26px;
        letter-spacing: 0.5px;
        color: var(--cream);
      }
      .modal-head .sub {
        font-size: 13px;
        color: var(--sea);
        margin-top: 2px;
      }
      .modal-x {
        font-size: 26px;
        line-height: 1;
        color: var(--mist);
        opacity: 0.7;
        padding: 4px 8px;
        border-radius: 6px;
      }
      .modal-x:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.06);
      }
      .modal-body {
        padding: 22px 24px;
      }
      .modal-foot {
        padding: 18px 24px;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
      }

      /* compiler sections */
      .csec {
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.015);
      }
      .csec-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 16px;
      }
      .drag-h {
        color: var(--mist);
        opacity: 0.4;
        font-size: 18px;
        letter-spacing: -2px;
        cursor: grab;
      }
      .cbox {
        width: 22px;
        height: 22px;
        border: 2px solid var(--sea);
        border-radius: 6px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.15s;
      }
      .cbox.on {
        background: var(--gold);
        border-color: var(--gold);
      }
      .cbox.on::after {
        content: "✓";
        color: var(--navy);
        font-size: 14px;
        font-weight: 800;
      }
      .csec-title {
        flex: 1;
      }
      .csec-title .t {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.5px;
        color: var(--cream);
      }
      .csec-title .d {
        font-size: 12px;
        color: var(--sea);
      }
      .cord {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 15px;
        color: var(--gold);
        width: 26px;
        height: 26px;
        border: 1px solid var(--gold);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      .cbody {
        padding: 0 16px 16px;
        border-top: 1px solid var(--line);
      }
      .cbody-in {
        padding-top: 14px;
      }
      .csec.active {
        border-color: rgba(201, 168, 76, 0.4);
      }
      .csec-num {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 14px;
        color: var(--navy);
        background: var(--gold);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      .csec-num.off {
        background: rgba(255, 255, 255, 0.09);
        color: var(--mist);
      }
      .csec-ord {
        display: flex;
        gap: 4px;
        flex: 0 0 auto;
      }
      .ordbtn {
        width: 26px;
        height: 26px;
        border: 1px solid var(--line);
        border-radius: 6px;
        color: var(--mist);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: 0.15s;
        background: none;
      }
      .ordbtn:hover:not(:disabled) {
        border-color: var(--sea);
        color: var(--cream);
      }
      .ordbtn:disabled {
        opacity: 0.28;
        cursor: not-allowed;
      }
      .assembly {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 11px 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(14, 116, 144, 0.06);
        margin-bottom: 16px;
      }
      .assembly.empty-asm {
        color: var(--mist);
        opacity: 0.75;
        font-size: 13px;
      }
      .asm-lbl {
        font-family: var(--fdisp);
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--sea);
      }
      .achip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--navy);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 5px 12px;
        font-family: var(--fdisp);
        font-weight: 600;
        letter-spacing: 0.5px;
        font-size: 13px;
        color: var(--cream);
      }
      .anum {
        color: var(--gold);
        font-weight: 800;
      }
      .arrow {
        color: var(--sea);
        opacity: 0.5;
      }

      /* style toggle */
      .style-toggle {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
      }
      .style-opt {
        flex: 1;
        padding: 12px;
        border: 1.5px solid var(--line);
        border-radius: 9px;
        text-align: center;
        font-family: var(--fdisp);
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 14px;
        color: var(--mist);
        transition: 0.15s;
        cursor: pointer;
      }
      .style-opt.on {
        border-color: var(--gold);
        background: rgba(201, 168, 76, 0.1);
        color: var(--gold);
      }

      /* line item picker */
      .li-pick {
        max-height: 220px;
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 6px;
      }
      .li-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 8px;
        border-radius: 7px;
        cursor: pointer;
        transition: 0.12s;
      }
      .li-row:hover {
        background: rgba(255, 255, 255, 0.03);
      }
      .li-cbox {
        width: 18px;
        height: 18px;
        border: 2px solid var(--sea);
        border-radius: 5px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .li-cbox.on {
        background: var(--sea);
        border-color: var(--sea);
      }
      .li-cbox.on::after {
        content: "✓";
        color: var(--navy);
        font-size: 11px;
        font-weight: 800;
      }
      .li-txt .lt {
        font-size: 14px;
        font-weight: 600;
        color: var(--cream);
      }
      .li-txt .lo {
        font-size: 12px;
        color: var(--sea);
      }

      /* toggle switch */
      .tsw {
        width: 42px;
        height: 24px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.12);
        position: relative;
        transition: 0.2s;
        flex: 0 0 auto;
        cursor: pointer;
      }
      .tsw.on {
        background: var(--gold);
      }
      .tsw::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--cream);
        transition: 0.2s;
      }
      .tsw.on::after {
        left: 20px;
        background: var(--navy);
      }
      .tsw-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 2px;
      }
      .tsw-row .lbl {
        font-size: 13.5px;
        color: var(--cream);
      }

      /* reference card */
      .ref-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.02);
      }
      .ref-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .ref-grid .full {
        grid-column: 1/-1;
      }
      .ref-mini {
        font-size: 11px;
        color: var(--sea);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 4px;
        font-family: var(--fdisp);
        font-weight: 600;
      }
      .ref-in {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 9px 11px;
        color: var(--cream);
        font-family: inherit;
        font-size: 14px;
      }
      .ref-in:focus {
        outline: none;
        border-color: var(--gold);
      }
      .ref-save {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        font-size: 12.5px;
        color: var(--mist);
        cursor: pointer;
      }
      .ref-del {
        font-size: 12px;
        color: var(--copper);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-weight: 600;
      }
      .add-ref {
        width: 100%;
        padding: 11px;
        border: 1.5px dashed var(--line);
        border-radius: 9px;
        color: var(--sea);
        font-family: var(--fdisp);
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 13px;
        transition: 0.15s;
      }
      .add-ref:hover {
        border-color: var(--sea);
        color: var(--gold);
      }
      .ref-pool-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px;
        border-radius: 8px;
        cursor: pointer;
      }
      .ref-pool-item:hover {
        background: rgba(255, 255, 255, 0.03);
      }

      /* admin key modal */
      .key-wrap {
        text-align: center;
        padding: 10px 4px;
      }
      .key-wrap .kico {
        width: 52px;
        height: 52px;
        color: var(--gold);
        margin: 0 auto 14px;
      }
      .key-in {
        width: 100%;
        max-width: 280px;
        text-align: center;
        font-size: 18px;
        letter-spacing: 3px;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid var(--line);
        border-radius: 9px;
        padding: 12px;
        color: var(--cream);
        font-family: var(--fdisp);
        font-weight: 700;
        margin: 0 auto 14px;
        display: block;
      }
      .key-in:focus {
        outline: none;
        border-color: var(--gold);
      }
      .key-in.shake {
        animation: shake 0.4s;
      }
      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-8px);
        }
        75% {
          transform: translateX(8px);
        }
      }
      .admin-banner {
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 60;
        background: var(--gold);
        color: var(--navy);
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 9px 15px;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }

      .help-btn {
        font-size: 12px;
        color: var(--teal);
        letter-spacing: 0.5px;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 8px;
        display: inline-block;
      }
      .dl-note {
        font-size: 12px;
        color: var(--mist);
        opacity: 0.6;
        text-align: center;
        margin-top: 12px;
        line-height: 1.5;
      }
      .empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--mist);
        opacity: 0.6;
      }

      /* ---- masthead ---- */
      .mast {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(13, 27, 42, 0.93);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .mast-top {
        max-width: 1100px;
        margin: 0 auto;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
      }
      .mast-left {
        display: flex;
        align-items: center;
        gap: 13px;
        cursor: pointer;
      }
      .mast-logo {
        width: 50px;
        height: 50px;
        object-fit: contain;
        flex: 0 0 auto;
        border: 3px solid var(--gold);
        border-radius: 12px;
        padding: 2px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
      }
      .mast-name {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 25px;
        letter-spacing: 1px;
        line-height: 1;
        color: var(--cream);
      }
      .mast-sub {
        font-size: 11.5px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--sea);
        margin-top: 4px;
      }
      .mast-right {
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .mast-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }
      .mast-contact a {
        font-size: 11.5px;
        letter-spacing: 2px;
        text-transform: none;
        color: var(--sea);
        opacity: 1;
        transition: color 0.15s;
      }
      .mast-contact a:hover {
        color: var(--gold);
      }
      .mast-cta {
        background: var(--gold);
        color: var(--navy);
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 10px 17px;
        border-radius: 6px;
        transition: 0.15s;
        white-space: nowrap;
      }
      .mast-cta:hover {
        background: #d8b95e;
        transform: translateY(-1px);
      }
      .mast-tabs {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 2px;
        border-top: 1px solid var(--line);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .mast-tabs::-webkit-scrollbar {
        display: none;
      }
      .mast-tab {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 14.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 13px 15px;
        color: var(--mist);
        border-bottom: 2px solid transparent;
        transition: 0.15s;
        cursor: pointer;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .mast-tab:hover {
        color: var(--cream);
      }
      .mast-tab.on {
        color: var(--gold);
        border-bottom-color: var(--gold);
      }
      .tab-compile {
        color: var(--sea);
      }
      .tab-compile.on {
        color: var(--gold);
      }
      .lock-glyph {
        font-size: 10px;
        opacity: 0.75;
      }

      /* acknowledgements page */
      .ack-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 36px;
      }
      @media (min-width: 720px) {
        .ack-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      .ack-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 20px 22px;
        background: rgba(201, 168, 76, 0.03);
      }
      .ack-card .q {
        font-size: 15px;
        font-style: italic;
        color: var(--cream);
        opacity: 0.94;
        line-height: 1.6;
      }
      .ack-card .by {
        margin-top: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ack-badge {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--navy);
        border: 1.5px solid var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 13px;
        color: var(--gold);
        flex: 0 0 auto;
      }
      .ack-by-txt .bn {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        color: var(--cream);
      }
      .ack-by-txt .ba {
        font-size: 12.5px;
        color: var(--sea);
      }
      .letters-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      @media (min-width: 680px) {
        .letters-list {
          grid-template-columns: 1fr 1fr;
        }
      }
      .letter {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 15px 17px;
        background: var(--card);
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start;
        transition: 0.15s;
      }
      .letter:hover {
        border-color: rgba(74, 155, 142, 0.4);
      }
      .letter .lt {
        font-weight: 600;
        font-size: 14.5px;
        color: var(--cream);
        line-height: 1.35;
      }
      .letter .lm {
        font-size: 12.5px;
        color: var(--sea);
        margin-top: 4px;
      }
      .letter .lv {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--sea);
        white-space: nowrap;
        cursor: pointer;
      }
      .letter .lv:hover {
        color: var(--gold);
      }
      .ack-refs {
        margin-top: 34px;
        padding: 24px;
        border: 1px solid var(--gold);
        border-radius: 12px;
        text-align: center;
        background: linear-gradient(
          135deg,
          rgba(201, 168, 76, 0.08),
          rgba(14, 116, 144, 0.04)
        );
      }
      .ack-refs p {
        font-size: 15px;
        color: var(--cream);
        opacity: 0.9;
        margin-bottom: 14px;
      }

      /* hobbies featured + see more */
      .see-more {
        display: block;
        margin: 22px auto 0;
        padding: 11px 22px;
        border: 1.5px solid var(--teal);
        border-radius: 8px;
        color: var(--mist);
        font-family: var(--fdisp);
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 13px;
        transition: 0.15s;
      }
      .see-more:hover {
        background: rgba(14, 116, 144, 0.15);
        border-color: var(--sea);
        color: var(--cream);
      }
      .hockey-exp {
        margin-top: 44px;
        padding-top: 30px;
        border-top: 1px solid var(--line);
      }
      .hx-item {
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 16px 18px;
        margin-bottom: 12px;
        background: var(--card);
      }
      .hx-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        align-items: baseline;
      }
      .hx-title {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.4px;
        color: var(--cream);
      }
      .hx-dates {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 1px;
        color: var(--gold);
      }
      .hx-org {
        color: var(--sea);
        font-size: 13.5px;
        font-weight: 600;
        margin-top: 1px;
      }
      .hx-desc {
        font-size: 13.5px;
        color: var(--cream);
        opacity: 0.85;
        margin-top: 8px;
        line-height: 1.5;
      }

      /* lock gate + compile page */
      .lock-card {
        max-width: 440px;
        margin: 40px auto;
        padding: 36px 30px;
        border: 1px solid var(--line);
        border-radius: 16px;
        text-align: center;
        background: linear-gradient(
          180deg,
          rgba(201, 168, 76, 0.05),
          rgba(14, 116, 144, 0.03)
        );
      }
      .lock-card .lk-ico {
        width: 54px;
        height: 54px;
        color: var(--gold);
        margin: 0 auto 16px;
      }
      .lock-card h2 {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 28px;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
      }
      .lock-card p {
        font-size: 14.5px;
        color: var(--cream);
        opacity: 0.82;
        margin-bottom: 20px;
        line-height: 1.55;
      }
      .comp-card {
        background: var(--navy2);
        border: 1px solid var(--line);
        border-radius: 16px;
        max-width: 760px;
        margin: 0 auto;
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
      }
      @media (min-width: 861px) {
        .mast .burger {
          display: none;
        }
      }
      @media (max-width: 860px) {
        .mast-contact {
          display: none;
        }
        .mast-tabs {
          display: none;
        }
        .mast-cta {
          display: none;
        }
        .mast-name {
          font-size: 21px;
        }
        .mast-logo {
          width: 42px;
          height: 42px;
        }
      }

      /* hero contact line + experience subheading */
      .hero-contact {
        margin-top: 12px;
        font-size: 14.5px;
        letter-spacing: 0.02em;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
      @media (min-width: 760px) {
        .hero-contact {
          justify-content: flex-start;
        }
      }
      .hero-contact a {
        color: var(--cream);
        opacity: 0.88;
        text-decoration: none;
        border-bottom: 1px solid rgba(201, 168, 76, 0.35);
        padding-bottom: 1px;
        transition: 0.15s;
      }
      .hero-contact a:hover {
        color: var(--gold);
        opacity: 1;
        border-bottom-color: var(--gold);
      }
      .hc-sep {
        color: var(--gold);
        opacity: 0.7;
      }
      .hero-see {
        margin-top: 34px;
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--gold);
      }

      /* ---- about landing hero ---- */
      .about-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        padding: 22px 0 34px;
      }
      @media (min-width: 760px) {
        .about-hero {
          flex-direction: row;
          text-align: left;
          align-items: center;
          gap: 38px;
        }
      }
      .about-hero-photo {
        width: 210px;
        height: 210px;
        border-radius: 16px;
        object-fit: cover;
        flex: 0 0 auto;
        border: 3px solid var(--gold);
        box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
      }
      .about-hero-txt {
        flex: 1;
      }
      .about-hero-intro {
        font-size: 17px;
        color: var(--cream);
        opacity: 0.93;
        margin-top: 16px;
        max-width: 600px;
      }
      .about-full {
        max-width: 770px;
        margin-top: 8px;
      }
      .about-p {
        margin-bottom: 18px;
        font-size: 16.5px;
        color: var(--cream);
        opacity: 0.94;
      }
      .about-hobbies {
        margin-top: 46px;
      }

      /* certificate viewer */
      .cv-bg {
        position: fixed;
        inset: 0;
        background: rgba(13, 27, 42, 0.82);
        z-index: 9999;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 16px;
        overflow-y: auto;
      }
      .cv-modal {
        background: var(--cream);
        border-radius: 14px;
        max-width: 820px;
        width: 100%;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        margin: auto;
      }
      .cv-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        background: var(--navy);
        position: sticky;
        top: 0;
        z-index: 2;
      }
      .cv-title {
        font-family: var(--fdisp);
        font-size: 16px;
        letter-spacing: 0.4px;
        color: var(--mist);
        word-break: break-all;
      }
      .cv-close {
        background: rgba(255, 255, 255, 0.12);
        border: 0;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        flex: 0 0 auto;
      }
      .cv-close:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      .cv-body {
        padding: 14px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        background: #e9edf1;
      }
      .cv-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 6px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
        margin-bottom: 12px;
      }
      .cv-img:last-child {
        margin-bottom: 0;
      }
      .cv-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--navy2);
        font-size: 14px;
        line-height: 1.6;
      }
      .cv-pdf {
        display: block;
        width: 100%;
        height: min(78vh, 900px);
        min-height: 520px;
        border: 0;
        border-radius: 6px;
        background: #fff;
      }
      @media (max-width: 600px) {
        .cv-pdf {
          min-height: 68vh;
          height: 68vh;
        }
      }
      /* ---- Custom Tailoring UI (added) ---- */
      .mode-switch {
        display: flex;
        gap: 8px;
        max-width: 760px;
        margin: 0 auto 16px;
        padding: 5px;
        background: var(--navy2);
        border: 1px solid var(--line);
        border-radius: 12px;
      }
      .mode-btn {
        flex: 1;
        text-align: center;
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 1px;
        padding: 11px 10px;
        border-radius: 8px;
        color: var(--mist);
        opacity: 0.7;
        cursor: pointer;
        transition: all 0.15s;
      }
      .mode-btn:hover {
        opacity: 1;
      }
      .mode-btn.on {
        background: var(--gold);
        color: var(--navy);
        opacity: 1;
      }
      .tl-intro {
        color: var(--mist);
        opacity: 0.8;
        font-size: 13.5px;
        line-height: 1.55;
        margin-bottom: 18px;
      }
      .tl-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      @media (max-width: 560px) {
        .tl-grid {
          grid-template-columns: 1fr;
        }
      }
      .field label .opt {
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-transform: none;
        color: var(--sea);
        opacity: 0.85;
        margin-left: 6px;
      }
      .tl-jobtext {
        min-height: 150px !important;
      }
      .tl-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 6px;
        flex-wrap: wrap;
      }
      .tl-err {
        margin-top: 12px;
        padding: 10px 14px;
        border: 1px solid var(--copper);
        border-radius: 8px;
        background: rgba(160, 99, 58, 0.12);
        color: #e6b8a0;
        font-size: 13px;
      }
      .tl-result {
        margin-top: 22px;
        border-top: 1px solid var(--line);
        padding-top: 20px;
      }
      .tl-detected {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
      }
      .tl-badge {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 11.5px;
        letter-spacing: 0.8px;
        padding: 4px 11px;
        border-radius: 20px;
        border: 1px solid var(--line);
      }
      .tl-worker {
        background: rgba(14, 116, 144, 0.18);
        color: #8fd4e6;
        border-color: var(--teal);
      }
      .tl-ai {
        background: rgba(201, 168, 76, 0.16);
        color: var(--gold);
        border-color: var(--gold);
      }
      .tl-demo {
        background: rgba(74, 155, 142, 0.14);
        color: var(--sea);
        border-color: var(--sea);
      }
      .tl-note {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--mist);
        opacity: 0.72;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px 13px;
        margin-bottom: 16px;
      }
      .tl-block {
        margin-bottom: 18px;
      }
      .tl-block-h {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.6px;
        color: var(--cream);
        margin-bottom: 9px;
      }
      .tl-sub {
        display: block;
        font-family: var(--fbody);
        font-weight: 400;
        font-size: 11.5px;
        letter-spacing: 0;
        color: var(--sea);
        opacity: 0.85;
        margin-top: 2px;
      }
      .tl-cover {
        width: 100%;
        min-height: 230px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--cream);
        font-family: var(--fbody);
        font-size: 13px;
        line-height: 1.6;
        padding: 14px 16px;
        resize: vertical;
      }
      .tl-cover:focus {
        outline: none;
        border-color: var(--gold);
        background: rgba(255, 255, 255, 0.05);
      }
      .tl-mini {
        font-family: var(--fdisp);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sea);
        margin-bottom: 7px;
      }
      .tl-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .tl-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--navy);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 11px;
        font-size: 12.5px;
        color: var(--cream);
      }
      .tl-chip em {
        font-style: normal;
        color: var(--mist);
        opacity: 0.6;
        font-size: 11px;
      }
      .tl-chip.alt {
        border-color: rgba(201, 168, 76, 0.35);
      }
      .tl-include {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        padding: 12px 0 4px;
      }
      .tl-inc-lbl {
        font-size: 12.5px;
        color: var(--mist);
        opacity: 0.7;
      }
      .tl-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--cream);
        cursor: pointer;
        opacity: 0.65;
      }
      .tl-toggle.on {
        opacity: 1;
      }
      .tl-toggle.on .li-cbox {
        background: var(--sea);
        border-color: var(--sea);
      }
      .tl-toggle.on .li-cbox::after {
        content: "✓";
        color: var(--navy);
        font-size: 11px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      /* ---- cert viewer: fit title + header actions (added) ---- */
      .cv-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }
      .cv-title-fit {
        display: block;
        line-height: 1.25;
        max-height: 2.6em;
        overflow: hidden;
        word-break: normal;
      }
      .cv-head-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }
      .sum-body {
        background: var(--cream);
        padding: 28px 22px;
      }
      .sum-inner {
        max-width: 660px;
        margin: 0 auto;
      }
      .sum-lead {
        margin: 0 0 18px;
        font-size: 16px;
        line-height: 1.7;
        font-weight: 600;
        color: var(--navy);
        border-left: 3px solid var(--gold);
        padding-left: 16px;
      }
      .sum-rule {
        height: 1px;
        background: rgba(13, 27, 42, 0.14);
        margin: 0 0 18px;
      }
      .sum-p {
        margin: 0 0 16px;
        font-size: 15px;
        line-height: 1.75;
        color: #33414f;
      }
      .sum-p:last-child {
        margin-bottom: 0;
      }
      @media (max-width: 480px) {
        .sum-body {
          padding: 20px 14px;
        }
        .sum-lead {
          font-size: 15px;
        }
        .sum-p {
          font-size: 14.5px;
        }
      }
      .cv-dl {
        background: var(--gold);
        color: var(--navy);
        border: 0;
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.6px;
        padding: 7px 12px;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
      }
      .cv-dl:hover {
        background: #d8b95e;
      }
      @media (max-width: 480px) {
        .cv-dl {
          font-size: 11px;
          padding: 7px 9px;
        }
      }

      /* ---- access files tab (added) ---- */
      .files-note {
        max-width: 820px;
        margin: 0 auto 18px;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--mist);
        opacity: 0.75;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 11px 14px;
      }
      .files-note code {
        color: var(--sea);
        font-size: 12px;
      }
      .file-group {
        max-width: 820px;
        margin: 0 auto 22px;
      }
      .file-group-h {
        font-family: var(--fdisp);
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.6px;
        color: var(--cream);
        text-transform: uppercase;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .file-count {
        font-size: 11px;
        background: var(--navy2);
        border: 1px solid var(--line);
        color: var(--sea);
        border-radius: 20px;
        padding: 2px 9px;
        font-family: var(--fbody);
      }
      .file-row {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: space-between;
        background: var(--navy2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 8px;
      }
      .file-info {
        min-width: 0;
      }
      .file-title {
        font-size: 13.5px;
        color: var(--cream);
        font-weight: 600;
        line-height: 1.35;
      }
      .file-meta {
        font-size: 11.5px;
        color: var(--mist);
        opacity: 0.6;
        margin-top: 2px;
      }
      @media (max-width: 480px) {
        .file-row {
          flex-wrap: wrap;
        }
        .file-row .file-info {
          flex: 1 1 100%;
        }
      }

      /* ---- cloud vault (added) ---- */
      .dropzone {
        border: 1.5px dashed rgba(201, 168, 76, 0.45);
        border-radius: 10px;
        padding: 22px 16px;
        text-align: center;
        color: var(--mist);
        opacity: 0.85;
        font-size: 13px;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all 0.15s;
        background: rgba(255, 255, 255, 0.02);
      }
      .dropzone:hover,
      .dropzone.drag {
        border-color: var(--gold);
        background: rgba(201, 168, 76, 0.06);
        opacity: 1;
      }
      .file-err {
        color: #e2905f;
        font-size: 12.5px;
        padding: 4px 2px 8px;
      }

      /* ---- keyboard focus (added) ---- */
      a:focus-visible,
      button:focus-visible,
      [role="button"]:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
        border-radius: 6px;
      }

      .about-hero-nudge {
        margin-top: 10px;
        opacity: 0.85;
        font-size: 15px;
      }

/* ---- project showcase scroller on About page ---- */

.project-strip {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 2px 0 34px;
  padding: 16px 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.project-strip-window {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.project-strip-window::-webkit-scrollbar {
  display: none;
}

.project-strip-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: max-content;
  min-width: max-content;
}

.project-strip-card {
  flex: 0 0 220px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--card);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.project-strip-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.project-strip-img {
  display: block;
  width: 100%;
  height: 115px;
  object-fit: cover;
  background: var(--navy2);
}

.project-strip-name {
  padding: 10px 12px;
  font-family: var(--fdisp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--cream);
  text-align: center;
}

.project-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px;
  height: 44px;
  border-radius: 8px;
  background: var(--navy2);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-strip-arrow:hover {
  background: var(--gold);
  color: var(--navy);
}

.project-strip-arrow.left {
  left: 2px;
}

.project-strip-arrow.right {
  right: 2px;
}

.project-strip-label {
  font-family: var(--fdisp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 8px;
}

.project-strip-mobile {
  display: none;
}

.project-strip-desktop {
  display: block;
}

/* prevent project strip from ever widening the page */
html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 600px) {
  .about-hero,
  .about-hero-txt {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .project-strip-mobile {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 40px);
    margin-top: 14px;
    overflow: hidden;
  }

  .project-strip-desktop {
    display: none;
  }

  .project-strip-mobile .project-strip-label {
    text-align: center;
  }

  .project-strip-mobile .project-strip {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 14px 38px;
    overflow: hidden;
  }

  .project-strip-mobile .project-strip-window {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .project-strip-card {
    flex: 0 0 175px;
  }

  .project-strip-img {
    height: 95px;
  }

  .project-strip-arrow {
    display: flex;
    width: 32px;
    height: 42px;
    font-size: 22px;
  }

  .project-strip-arrow.left {
    left: 1px;
  }

  .project-strip-arrow.right {
    right: 1px;
  }
}

      /* Summary modal placement: clear the fixed masthead, center professionally, keep the close button on screen */
      .sum-bg {
        align-items: center;
        padding: 96px 16px 40px;
      }
      .sum-modal {
        max-width: 720px;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 150px);
      }
      .sum-modal .cv-head {
        flex: 0 0 auto;
      }
      .sum-modal .sum-body {
        overflow-y: auto;
        flex: 1 1 auto;
      }
      @media (max-width: 600px) {
        .sum-bg {
          padding: 84px 10px 24px;
        }
        .sum-modal {
          max-height: calc(100vh - 118px);
        }
      }
      /* project portfolio sections + tunes player */
      .proj-sec {
        margin-top: 42px;
      }
      .proj-sec:first-of-type {
        margin-top: 6px;
      }
      .proj-sec-title {
        font-family: var(--fdisp);
        font-weight: 800;
        font-size: 23px;
        letter-spacing: 0.6px;
        color: var(--cream);
        margin-bottom: 14px;
        padding-left: 12px;
        border-left: 3px solid var(--gold);
      }
      .proj-more {
        margin-top: 16px;
        text-align: center;
      }
      .tunes {
        display: grid;
        gap: 18px;
        margin-top: 8px;
      }
      @media (min-width: 900px) {
        .tunes {
          grid-template-columns: 1.2fr 0.8fr;
          align-items: start;
        }
      }
      .tunes-player iframe {
        width: 100%;
        height: 352px;
        border: 0;
        border-radius: 12px;
        background: var(--card);
      }
      .tunes-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .tunes-row {
        display: flex;
        gap: 12px;
        align-items: center;
        width: 100%;
        text-align: left;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 14px;
        color: var(--cream);
        cursor: pointer;
        font: inherit;
        font-size: 14.5px;
        transition: 0.15s;
      }
      .tunes-row:hover {
        border-color: rgba(201, 168, 76, 0.5);
      }
      .tunes-row.on {
        border-color: var(--gold);
      }
      .tr-num {
        color: var(--gold);
        font-family: var(--fdisp);
        font-weight: 700;
        min-width: 18px;
      }
      .tr-pf {
        margin-left: auto;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.6;
      }
      /* Site Administration hub */
      .admin-gates {
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (max-width: 900px) {
        .admin-gates {
          grid-template-columns: 1fr;
        }
      }
      /* Site Updates */
      .upd-modes {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 6px 0 22px;
      }
      .upd-form {
        max-width: 620px;
      }
      .upd-out {
        margin-top: 10px;
      }
      .upd-place {
        font-size: 14px;
        color: var(--gold);
        margin-bottom: 10px;
      }
      .upd-snip {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 16px;
        font-size: 13px;
        line-height: 1.55;
        color: var(--cream);
        overflow-x: auto;
        white-space: pre;
      }
      .upd-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
      }
      .upd-hint {
        font-size: 13.5px;
        color: var(--cream);
        opacity: 0.7;
      }
      /* HypeTeen Academy */
      .ht-crumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        font-size: 13px;
      }
      .ht-crumb {
        background: none;
        border: none;
        color: var(--teal-l, #4fb3c9);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        padding: 0;
      }
      .ht-crumb:hover {
        text-decoration: underline;
      }
      .ht-sep {
        color: var(--cream);
        opacity: 0.35;
      }
      .ht-here {
        color: var(--cream);
        opacity: 0.75;
      }
      .ht-gates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin-top: 10px;
      }
      .ht-gate {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--card);
        padding: 28px;
        cursor: pointer;
        transition:
          transform 0.15s ease,
          border-color 0.15s ease;
      }
      .ht-gate:hover,
      .ht-gate:focus-visible {
        transform: translateY(-3px);
        border-color: var(--gold);
      }
      .ht-gate:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
      }
      .ht-gate-eyebrow {
        font-family: "Barlow Condensed", sans-serif;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        font-size: 13px;
        margin-bottom: 6px;
      }
      .ht-gate h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 28px;
        color: var(--cream);
        margin: 0 0 8px;
      }
      .ht-gate p {
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--cream);
        opacity: 0.8;
        margin: 0 0 14px;
      }
      .ht-gate-go {
        color: var(--gold);
        font-weight: 600;
        font-size: 14px;
      }
      .ht-adnote {
        font-size: 13.5px;
        color: var(--cream);
        opacity: 0.7;
        margin: -6px 0 18px;
      }
      .ht-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 8px;
      }
      .ht-card {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--card);
        padding: 20px 22px;
      }
      .ht-badge {
        flex: 0 0 auto;
        font-family: "Barlow Condensed", sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: var(--gold);
        color: var(--navy);
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 2px;
      }
      .ht-badge.alt {
        background: transparent;
        border: 1px solid var(--gold);
        color: var(--gold);
      }
      .ht-card-title {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 22px;
        color: var(--cream);
      }
      .ht-card-sub {
        font-size: 14px;
        line-height: 1.5;
        color: var(--cream);
        opacity: 0.75;
        margin: 4px 0 10px;
      }
      .ht-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .ht-soon {
        font-size: 12.5px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cream);
        opacity: 0.55;
        border: 1px dashed var(--line);
        border-radius: 8px;
        padding: 6px 10px;
      }
      .ht-count {
        font-size: 13px;
        color: var(--cream);
        opacity: 0.6;
      }
      @media (max-width: 760px) {
        .ht-gates {
          grid-template-columns: 1fr;
        }
        .ht-card {
          flex-direction: column;
          gap: 10px;
        }
      }

      /* Admin content managers */
      .mgr-wrap {
        max-width: 860px;
      }
      .mgr-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 14px;
        background: var(--card);
      }
      .mgr-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .mgr-grid .full {
        grid-column: 1 / -1;
      }
      .mgr-list {
        max-height: 420px;
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
        margin-bottom: 18px;
      }
      .mgr-row {
        width: 100%;
        text-align: left;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 5px;
        background: rgba(255,255,255,.025);
      }
      .mgr-row:hover,
      .mgr-row.on {
        border-color: var(--gold);
        background: rgba(201,168,76,.08);
      }
      .mgr-row-title {
        font-weight: 600;
        color: var(--cream);
      }
      .mgr-row-meta {
        font-size: 12px;
        color: var(--sea);
        margin-top: 2px;
      }
      .mgr-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
      }
      .mgr-danger {
        border: 1px solid var(--copper);
        color: #efb49a;
      }
      .mgr-danger:hover {
        background: rgba(160,99,58,.15);
      }
      .mgr-textarea {
        min-height: 150px !important;
      }
      @media (max-width: 680px) {
        .mgr-grid {
          grid-template-columns: 1fr;
        }
        .mgr-grid .full {
          grid-column: auto;
        }
      }