:root {
    --bg: #121212;
    --bg-warm: #181818;
    --surface: #1e1e1e;
    --surface-2: #252525;
    --border: rgba(255, 255, 255, 0.06);
    --border-mid: rgba(255, 255, 255, 0.12);
    --ink: #e6e6e6;
    --ink-mid: #b5b5b5;
    --ink-soft: #7a7a7a;
    --accent: #3a3a3a;
    --accent-dim: rgba(255, 255, 255, 0.04);
    --accent-glow: rgba(255, 255, 255, 0.08);
    --green: #5c8f73;
    --green-dim: rgba(92, 143, 115, 0.12);
    --gold: #a08a4a;
    --gold-dim: rgba(160, 138, 74, 0.12);
    --blue: #5c7fa8;
    --blue-dim: rgba(92, 127, 168, 0.12);
    --danger: #a85c5c;
    --danger-dim: rgba(168, 92, 92, 0.12);
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'Bricolage Grotesque', sans-serif;
    --font-mono: 'DM Mono', monospace;
    --radius: 10px;
    --radius-sm: 6px;
}
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   html,
   body {
       min-height: 100vh;
       background: var(--bg);
       color: var(--ink);
       font-family: var(--font-mono);
       overflow-x: hidden;
   }

   /* subtle paper texture via pseudo */
   body::before {
       content: '';
       position: fixed;
       inset: 0;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
       pointer-events: none;
       z-index: 0;
       opacity: 0.6;
   }

   .topbar {
       position: sticky;
       top: 0;
       z-index: 10;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0.9rem 2rem;
       background: rgba(245, 240, 232, 0.92);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
   }

   .back-link {
       font-family: var(--font-mono);
       font-size: 0.75rem;
       color: var(--ink-soft);
       text-decoration: none;
       letter-spacing: 0.02em;
       transition: color 0.15s;
   }

   .back-link:hover {
       color: var(--accent);
   }

   .topbar-label {
       font-family: var(--font-mono);
       font-size: 0.65rem;
       color: var(--ink-soft);
       opacity: 0.5;
       letter-spacing: 0.08em;
   }

   .page {
       position: relative;
       z-index: 1;
       min-height: calc(100vh - 53px);
       display: flex;
       align-items: flex-start;
       justify-content: center;
       padding: 3rem 1.5rem 5rem;
   }

   .card {
       width: 100%;
       max-width: 420px;
       background: var(--surface);
       border: 1px solid var(--border-mid);
       border-radius: var(--radius);
       padding: 2.25rem;
       box-shadow: 0 2px 12px rgba(80, 65, 45, 0.07), 0 1px 3px rgba(80, 65, 45, 0.06);
       animation: fadeUp 0.35s ease both;
   }

   .card.wide {
       max-width: 580px;
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(14px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* loader */
   .loader {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.9rem;
       padding: 1.5rem 0;
   }

   .loader-bar {
       display: block;
       width: 100%;
       max-width: 160px;
       height: 2px;
       background: var(--surface-2);
       border-radius: 2px;
       overflow: hidden;
       position: relative;
   }

   .loader-bar::after {
       content: '';
       position: absolute;
       inset-block: 0;
       width: 40%;
       background: var(--accent);
       border-radius: 2px;
       animation: loadslide 1.2s ease-in-out infinite;
   }

   @keyframes loadslide {
       0% {
           left: -40%;
       }

       100% {
           left: 140%;
       }
   }

   .loader-text {
       font-size: 0.72rem;
       color: var(--ink-soft);
       letter-spacing: 0.06em;
   }

   .dots {
       animation: dotcycle 1.2s step-end infinite;
   }

   @keyframes dotcycle {
       0% {
           content: '';
       }

       33% {
           content: '.';
       }

       66% {
           content: '..';
       }

       100% {
           content: '...';
       }
   }

   /* auth gate */
   .gate-avatar {
       display: block;
       width: 72px;
       height: 72px;
       border-radius: 50%;
       object-fit: cover;
       margin: 0 auto 1.1rem;
       border: 2px solid var(--border-mid);
   }

   .gate-title {
       text-align: center;
       font-family: var(--font-serif);
       font-size: 1.8rem;
       font-weight: 400;
       color: var(--ink);
       margin-bottom: 0.25rem;
       line-height: 1.1;
   }

   .gate-sub {
       text-align: center;
       font-family: var(--font-mono);
       font-size: 0.7rem;
       color: var(--ink-soft);
       letter-spacing: 0.05em;
       margin-bottom: 1.25rem;
       line-height: 1.7;
   }

   .status-badge {
       display: flex;
       align-items: center;
       gap: 6px;
       margin: 0 auto 1.5rem;
       padding: 0.28rem 0.8rem;
       border-radius: 50px;
       font-family: var(--font-mono);
       font-size: 0.65rem;
       letter-spacing: 0.07em;
       width: fit-content;
   }

   .status-badge.open {
       background: var(--green-dim);
       border: 1px solid rgba(45, 122, 79, 0.25);
       color: var(--green);
   }

   .status-badge.closed {
       background: var(--danger-dim);
       border: 1px solid rgba(200, 75, 47, 0.2);
       color: var(--accent);
   }

   .badge-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--green);
       animation: pulse-dot 2.5s ease-in-out infinite;
       flex-shrink: 0;
   }

   .status-badge.closed .badge-dot {
       background: var(--accent);
       animation: none;
   }

   @keyframes pulse-dot {

       0%,
       100% {
           box-shadow: 0 0 0 0 rgba(45, 122, 79, 0.45);
       }

       50% {
           box-shadow: 0 0 0 5px rgba(45, 122, 79, 0);
       }
   }

   .auth-error {
       margin-bottom: 1rem;
       padding: 0.6rem 0.85rem;
       background: var(--danger-dim);
       border: 1px solid rgba(200, 75, 47, 0.2);
       border-radius: var(--radius-sm);
       font-size: 0.73rem;
       color: var(--accent);
       line-height: 1.5;
   }

   .closed-notice {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 3px;
       padding: 0.9rem;
       margin-bottom: 1.25rem;
       background: var(--danger-dim);
       border: 1px solid rgba(200, 75, 47, 0.15);
       border-radius: var(--radius-sm);
       font-size: 0.76rem;
       color: var(--accent);
       text-align: center;
       letter-spacing: 0.03em;
   }

   .btn-discord {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 9px;
       width: 100%;
       padding: 0.75rem 1.25rem;
       background: #5865f2;
       color: #fff;
       font-family: var(--font-mono);
       font-size: 0.78rem;
       font-weight: 500;
       letter-spacing: 0.04em;
       border: none;
       border-radius: var(--radius-sm);
       cursor: pointer;
       text-decoration: none;
       transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
   }

   .btn-discord:hover {
       background: #4752c4;
       box-shadow: 0 4px 18px rgba(88, 101, 242, 0.3);
       transform: translateY(-1px);
       color: #fff;
   }

   .btn-discord:active {
       transform: translateY(0);
   }

   .btn-discord.disabled {
       opacity: 0.35;
       pointer-events: none;
   }

   .discord-svg {
       width: 17px;
       height: 17px;
       flex-shrink: 0;
   }

   /* main form */
   .form-header {
       display: flex;
       align-items: center;
       gap: 0.7rem;
       margin-bottom: 1.5rem;
       padding-bottom: 1.25rem;
       border-bottom: 1px solid var(--border);
   }

   .form-avatar-wrap {
       display: flex;
       align-items: center;
       gap: 0.65rem;
       flex: 1;
   }

   .form-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       object-fit: cover;
       border: 1.5px solid var(--border-mid);
       flex-shrink: 0;
   }

   .form-displayname {
       font-family: var(--font-sans);
       font-size: 0.88rem;
       font-weight: 600;
       color: var(--ink);
   }

   .form-tag {
       font-family: var(--font-mono);
       font-size: 0.65rem;
       color: var(--ink-soft);
       margin-top: 1px;
   }

   .btn-ghost {
       background: none;
       border: 1px solid var(--border-mid);
       border-radius: var(--radius-sm);
       color: var(--ink-soft);
       font-family: var(--font-mono);
       font-size: 0.65rem;
       padding: 0.28rem 0.6rem;
       cursor: pointer;
       text-decoration: none;
       letter-spacing: 0.04em;
       transition: border-color 0.15s, color 0.15s;
       flex-shrink: 0;
   }

   .btn-ghost:hover {
       border-color: var(--accent);
       color: var(--accent);
   }

   .queue-strip {
       display: flex;
       align-items: center;
       gap: 7px;
       padding: 0.55rem 0.85rem;
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-family: var(--font-mono);
       font-size: 0.67rem;
       margin-bottom: 1.5rem;
       letter-spacing: 0.05em;
   }

   .queue-dot-live {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--green);
       flex-shrink: 0;
       animation: pulse-dot 2.5s ease-in-out infinite;
   }

   .queue-text {
       color: var(--green);
   }

   .queue-wait {
       color: var(--ink-soft);
       margin-left: auto;
   }

   /* section labels inside form */
   .form-section {
       margin-bottom: 1.25rem;
   }

   .section-label {
       font-family: var(--font-mono);
       font-size: 0.6rem;
       text-transform: uppercase;
       letter-spacing: 0.12em;
       color: var(--ink-soft);
       margin-bottom: 0.6rem;
       padding-bottom: 0.4rem;
       border-bottom: 1px solid var(--border);
   }

   .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0.9rem;
   }

   @media (max-width: 520px) {
       .form-grid {
           grid-template-columns: 1fr;
       }

       .span-2 {
           grid-column: 1;
       }
   }

   .field {
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
   }

   .field.span-2 {
       grid-column: span 2;
   }

   .field-label {
       font-family: var(--font-mono);
       font-size: 0.63rem;
       text-transform: uppercase;
       letter-spacing: 0.09em;
       color: var(--ink-soft);
       display: flex;
       align-items: center;
       gap: 5px;
   }

   .verified-tag {
       font-size: 0.58rem;
       color: var(--green);
       letter-spacing: 0.03em;
       text-transform: none;
   }

   .field-optional {
       color: var(--ink-soft);
       opacity: 0.55;
       font-weight: 400;
       text-transform: none;
   }

   .field-input {
       background: var(--bg-warm);
       border: 1px solid var(--border-mid);
       border-radius: var(--radius-sm);
       color: var(--ink);
       font-family: var(--font-mono);
       font-size: 0.8rem;
       padding: 0.55rem 0.8rem;
       outline: none;
       transition: border-color 0.15s, box-shadow 0.15s;
       width: 100%;
       appearance: none;
       -webkit-appearance: none;
   }

   .field-input:focus {
       border-color: var(--accent);
       box-shadow: 0 0 0 3px rgba(200, 75, 47, 0.1);
   }

   .field-input::placeholder {
       color: var(--ink-soft);
       opacity: 0.55;
   }

   .field-input[readonly] {
       opacity: 0.5;
       cursor: not-allowed;
   }

   select.field-input {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7d6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 0.8rem center;
       padding-right: 2rem;
   }

   select.field-input option {
       background: var(--surface);
       color: var(--ink);
   }

   .field-textarea {
       resize: vertical;
       min-height: 100px;
       line-height: 1.65;
   }

   .field-hint {
       font-family: var(--font-mono);
       font-size: 0.6rem;
       color: var(--ink-soft);
       letter-spacing: 0.04em;
       opacity: 0.7;
   }

   /* inline callout boxes */
   .callout {
       font-family: var(--font-mono);
       font-size: 0.7rem;
       border-radius: var(--radius-sm);
       padding: 0.55rem 0.8rem;
       line-height: 1.55;
       display: none;
       margin-top: 0.35rem;
   }

   .callout.visible {
       display: block;
   }

   .callout-warn {
       background: var(--gold-dim);
       border: 1px solid rgba(184, 134, 11, 0.22);
       color: var(--gold);
   }

   .callout-info {
       background: var(--blue-dim);
       border: 1px solid rgba(41, 82, 163, 0.2);
       color: var(--blue);
   }

   .callout-muted {
       background: var(--surface-2);
       border: 1px solid var(--border);
       color: var(--ink-soft);
   }

   /* code type toggle */
   .code-type-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0.6rem;
   }

   .code-type-btn {
       background: var(--bg-warm);
       border: 1px solid var(--border-mid);
       border-radius: var(--radius-sm);
       padding: 0.75rem 0.8rem;
       cursor: pointer;
       text-align: left;
       transition: border-color 0.15s, background 0.15s;
       font-family: var(--font-mono);
   }

   .code-type-btn:hover {
       border-color: var(--accent);
       background: var(--accent-dim);
   }

   .code-type-btn.selected {
       border-color: var(--accent);
       background: var(--accent-dim);
       box-shadow: 0 0 0 1px var(--accent);
   }

   .ct-name {
       font-size: 0.78rem;
       font-weight: 500;
       color: var(--ink);
       margin-bottom: 0.2rem;
   }

   .ct-sub {
       font-size: 0.62rem;
       color: var(--ink-soft);
       line-height: 1.5;
   }

   .code-type-btn.selected .ct-name {
       color: var(--accent);
   }

   /* form footer */
   .form-footer {
       display: flex;
       gap: 0.55rem;
       margin-top: 1.5rem;
       align-items: center;
   }

   .btn-primary {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 0.65rem 1.1rem;
       background: var(--accent);
       color: #fff;
       font-family: var(--font-mono);
       font-size: 0.76rem;
       font-weight: 500;
       letter-spacing: 0.04em;
       border: none;
       border-radius: var(--radius-sm);
       cursor: pointer;
       text-decoration: none;
       transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
       flex: 1;
   }

   .btn-primary:hover {
       background: #b03d25;
       box-shadow: 0 4px 16px rgba(200, 75, 47, 0.28);
       transform: translateY(-1px);
   }

   .btn-primary:active {
       transform: translateY(0);
   }

   .btn-outline {
       background: none;
       border: 1px solid var(--border-mid);
       border-radius: var(--radius-sm);
       color: var(--ink-soft);
       font-family: var(--font-mono);
       font-size: 0.7rem;
       padding: 0.55rem 0.8rem;
       cursor: pointer;
       letter-spacing: 0.04em;
       transition: border-color 0.15s, color 0.15s;
       white-space: nowrap;
   }

   .btn-outline:hover {
       border-color: var(--ink-mid);
       color: var(--ink);
   }

   .submit-feedback {
       margin-top: 0.7rem;
       padding: 0.55rem 0.8rem;
       border-radius: var(--radius-sm);
       font-family: var(--font-mono);
       font-size: 0.72rem;
       line-height: 1.5;
       display: none;
   }

   .submit-feedback.success {
       background: var(--green-dim);
       border: 1px solid rgba(45, 122, 79, 0.22);
       color: var(--green);
   }

   .submit-feedback.error {
       background: var(--danger-dim);
       border: 1px solid rgba(200, 75, 47, 0.22);
       color: var(--accent);
   }

   /* modals */
   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(42, 34, 24, 0.4);
       z-index: 200;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1.5rem;
       backdrop-filter: blur(4px);
   }

   .modal-box {
       width: 100%;
       max-width: 420px;
       background: var(--surface);
       border: 1px solid var(--border-mid);
       border-radius: var(--radius);
       box-shadow: 0 8px 32px rgba(42, 34, 24, 0.15);
       animation: fadeUp 0.25s ease both;
       overflow: hidden;
   }

   .modal-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.1rem 1.4rem;
       border-bottom: 1px solid var(--border);
   }

   .modal-title {
       font-family: var(--font-serif);
       font-size: 1.1rem;
       color: var(--ink);
   }

   .modal-close {
       background: none;
       border: 1px solid var(--border-mid);
       border-radius: var(--radius-sm);
       color: var(--ink-soft);
       font-size: 0.7rem;
       padding: 0.22rem 0.5rem;
       cursor: pointer;
       transition: border-color 0.15s, color 0.15s;
   }

   .modal-close:hover {
       border-color: var(--accent);
       color: var(--accent);
   }

   .modal-body {
       padding: 1.4rem;
       display: flex;
       flex-direction: column;
       gap: 1.1rem;
   }

   .info-section {
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
   }

   .info-label {
       font-family: var(--font-mono);
       font-size: 0.58rem;
       text-transform: uppercase;
       letter-spacing: 0.12em;
       color: var(--ink-soft);
       margin-bottom: 0.2rem;
   }

   .info-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-family: var(--font-mono);
       font-size: 0.78rem;
       padding: 0.32rem 0;
       border-bottom: 1px solid var(--border);
       color: var(--ink-mid);
   }

   .info-price {
       color: var(--accent);
       font-size: 0.73rem;
   }

   .info-note {
       font-family: var(--font-mono);
       font-size: 0.72rem;
       color: var(--ink-soft);
       line-height: 1.6;
   }

   .info-text {
       font-family: var(--font-mono);
       font-size: 0.76rem;
       color: var(--ink-mid);
       line-height: 1.65;
   }