:root {
    --bg: #1b1330;
    --panel: #2a1b45;
    --panel-soft: #332253;
    --line: rgba(248, 105, 14, 0.24);
    --text: #f2ecff;
    --muted: #c5b9df;
    --link: #7fd7ff;
    --accent: #7723d8;
    --accent-soft: #4e2278;
    --accent-warm: #f8690e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background:
        radial-gradient(90% 95% at 92% 2%, rgba(248, 105, 14, 0.16), transparent 44%),
        radial-gradient(70% 80% at 0% 100%, rgba(119, 35, 216, 0.24), transparent 46%),
        linear-gradient(165deg, #160f27 0%, #201438 52%, #291a46 100%);
}

.shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 26px 20px 56px;
}

.head { margin-bottom: 18px; }

.back {
    color: #e5dbf8;
    text-decoration: none;
    font-size: 0.95rem;
}

.head h1 {
    margin: 8px 0 4px;
    font-size: clamp(2rem, 4vw, 2.2rem);
}

.sub {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.terminal-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(43, 28, 71, 0.9), rgba(26, 17, 46, 0.95));
    box-shadow: 0 24px 64px rgba(16, 8, 31, 0.52);
}

.terminal-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lights { display: flex; gap: 8px; }

.dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.dot.red { background: #db5c58; }
.dot.yellow { background: #d0a12b; }
.dot.green { background: #3cac53; }

.path {
    margin: 0;
    color: #b8a9db;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
}

.terminal-body {
    padding: 24px 28px 26px;
}

.terminal-body h2 {
    margin: 0 0 14px;
    font-size: 2rem;
}

.link-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

#ref-link {
    width: 100%;
    background: rgba(20, 14, 33, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--link);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 1rem;
}

.icon-btn {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(24, 16, 39, 0.94);
    color: #f5eeff;
    border-radius: 8px;
    width: 46px;
    height: 44px;
    cursor: pointer;
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.share-btn {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(24, 16, 39, 0.94);
    color: #efe8ff;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 500;
}

.share-btn:hover,
.icon-btn:hover {
    border-color: rgba(248, 105, 14, 0.45);
    background: rgba(248, 105, 14, 0.18);
}

.share-msg {
    min-height: 24px;
    margin: 10px 0 0;
    color: #9ce8ff;
}

.panel {
    margin-top: 16px;
    background: linear-gradient(160deg, rgba(45, 31, 74, 0.86), rgba(33, 22, 57, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
}

.invite-form {
    display: grid;
    gap: 10px;
}

.title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
}

.invite-form input,
.invite-form textarea {
    width: 100%;
    background: rgba(20, 14, 33, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: var(--text);
    padding: 11px 12px;
    font-family: inherit;
}

.cta-btn {
    border: 1px solid rgba(119, 35, 216, 0.62);
    background: linear-gradient(130deg, var(--accent), var(--accent-soft));
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
}

.meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.invite-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(32, 22, 53, 0.86);
    padding: 12px 14px;
}

.invite-item.muted { color: var(--muted); }

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

@media (max-width: 700px) {
    .shell { padding: 20px 14px 44px; }
    .terminal-body { padding: 18px 16px 20px; }
    .terminal-body h2 { font-size: 1.4rem; }
    .link-row { grid-template-columns: 1fr; }
    .icon-btn { width: 100%; height: 40px; }
}