* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #0f1115;
    color: #f5f7fa;
}

button,
textarea,
input {
    font: inherit;
}

/* ------------------------------
   Clipboard
-------------------------------- */
.creation-code-input {
    letter-spacing: normal;
    font-size: 18px;
}

.create-field-space {
    height: 20px;
}
.clipboard-page {
    min-height: 100vh;
    padding: 24px;
}

.clipboard-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.clipboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #7f8794;
}

.clipboard-header h1 {
    margin: 3px 0 0;
    font-size: 30px;
    word-break: break-word;
}

.status-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    color: #adb4c0;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #777;
}

.status-dot.saved {
    background: #42c777;
}

.status-dot.saving {
    background: #e7aa37;
}

.status-dot.error {
    background: #e65353;
}

.status-dot.remote {
    background: #5794f7;
}

.clipboard-card {
    background: #171a20;
    border: 1px solid #292d36;
    border-radius: 14px;
    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22);
}

#clipboard {
    display: block;
    width: 100%;
    min-height: 65vh;

    resize: vertical;

    border: 0;
    outline: none;

    padding: 22px;

    background: transparent;
    color: #f6f7f9;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 16px;
    line-height: 1.55;
}

#clipboard::placeholder {
    color: #626a77;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px;

    border-top: 1px solid #292d36;
    background: #13161b;
}

.toolbar form {
    margin-left: auto;
}

.btn {
    border: 1px solid #363b45;
    border-radius: 8px;

    background: #22262e;
    color: #f3f4f6;

    padding: 10px 18px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.05s ease;
}

.btn:hover {
    background: #2c313b;
}

.btn:active {
    transform: translateY(1px);
}

.btn.primary {
    background: #3978f6;
    border-color: #3978f6;
}

.btn.primary:hover {
    background: #4a85f8;
}

.btn.danger {
    color: #ff8585;
}

.clipboard-footer {
    padding: 14px 4px;
    text-align: center;
    color: #666e7b;
    font-size: 13px;
}


/* =========================================================
   CopyCove PIN screen
   ========================================================= */

.pin-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    background: #0d1016;
    color: #f5f7fa;
}

.pin-card {
    width: 100%;
    max-width: 460px;

    padding: 34px;

    background: #171b22;

    border: 1px solid #2c323d;
    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28);
}


/* Branding */

.pin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pin-brand-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #20c7b7;

    border-radius: 11px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;

    line-height: 1;
}

.pin-brand-name {
    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: -0.03em;
}

.pin-divider {
    height: 1px;

    margin: 26px 0 28px;

    background: #292f39;
}


/* Pad details */

.pad-label {
    margin-bottom: 5px;

    color: #737b89;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.15em;
}

.pin-room-name {
    margin: 0;

    color: #ffffff;

    font-size: 34px;
    font-weight: 750;

    letter-spacing: -0.04em;

    overflow-wrap: anywhere;
}

.pin-description {
    margin: 18px 0 26px;

    color: #9ca3af;

    font-size: 16px;

    line-height: 1.55;
}


/* PIN form */

.pin-field-label {
    display: block;

    margin-bottom: 8px;

    color: #d7dae0;

    font-size: 14px;
    font-weight: 600;
}

.pin-input {
    display: block;

    width: 100%;
    height: 62px;

    margin: 0;

    padding: 0 18px;

    border: 1px solid #363d49;
    border-radius: 11px;

    outline: none;

    background: #10141a;

    color: #ffffff;

    font-size: 26px;
    font-weight: 600;

    text-align: center;
    letter-spacing: 0.3em;

    -webkit-appearance: none;
    appearance: none;
}

.pin-input::placeholder {
    color: #646b76;

    opacity: 1;
}

.pin-input:focus {
    border-color: #20c7b7;

    box-shadow:
        0 0 0 3px rgba(32, 199, 183, 0.14);
}

.pin-hint {
    margin-top: 7px;

    color: #666e7b;

    font-size: 12px;
}


/* Submit */

.pin-submit {
    width: 100%;

    margin-top: 20px;

    padding: 14px 18px;

    border: 0;
    border-radius: 10px;

    background: #20c7b7;

    color: #ffffff;

    font-size: 16px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.08s ease;
}

.pin-submit:hover {
    background: #7a72ff;
}

.pin-submit:active {
    transform: scale(0.99);
}


/* Error */

.error-message {
    margin: -8px 0 20px;

    padding: 12px 14px;

    background: rgba(255, 86, 86, 0.08);

    border: 1px solid rgba(255, 86, 86, 0.35);
    border-radius: 9px;

    color: #ff9696;

    font-size: 14px;
}


/* Footer */

.pin-footer {
    margin-top: 27px;

    color: #535b67;

    font-size: 12px;

    text-align: center;
}


/* Mobile */

@media (max-width: 600px) {

    .pin-page {
        align-items: flex-start;

        padding: 55px 18px 25px;
    }

    .pin-card {
        padding: 26px;

        border-radius: 15px;
    }

    .pin-room-name {
        font-size: 29px;
    }

    .pin-input {
        height: 58px;
    }
}

/* =========================================================
   CopyCove Admin
   ========================================================= */

.admin-text-input {
    text-align: left;
    letter-spacing: normal;
    font-size: 16px;
}

.settings-page {
    min-height: 100vh;
    margin: 0;
    padding: 40px 24px;
    background: #0d1016;
    color: #f5f7fa;
}

.settings-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.settings-header h1 {
    margin: 20px 0 4px;
    font-size: 36px;
    letter-spacing: -0.04em;
}

.settings-user {
    color: #7f8794;
    font-size: 14px;
}

.settings-card {
    margin-bottom: 24px;
    padding: 26px;
    background: #171b22;
    border: 1px solid #2c323d;
    border-radius: 16px;
}

.settings-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.settings-section-title h2 {
    margin: 0 0 6px;
    font-size: 21px;
}

.settings-section-title p {
    margin: 0;
    color: #858d99;
    font-size: 14px;
}

.room-count {
    min-width: 38px;
    padding: 8px 12px;
    background: #10141a;
    border: 1px solid #2c323d;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

.settings-table-wrap {
    overflow-x: auto;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
}

.settings-table th {
    padding: 12px;
    border-bottom: 1px solid #303641;
    color: #7d8591;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #252b34;
    color: #cdd1d8;
    font-size: 14px;
    white-space: nowrap;
}

.settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.room-name-cell {
    color: #ffffff !important;
    font-weight: 700;
}

.ip-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.delete-cell {
    text-align: right;
}

.settings-message {
    margin-bottom: 20px;
    padding: 13px 16px;
    background: rgba(32, 199, 183, 0.09);
    border: 1px solid rgba(32, 199, 183, 0.4);
    border-radius: 10px;
    color: #c5c1ff;
}

.settings-empty {
    padding: 38px 20px;
    color: #727b88;
    text-align: center;
}

.settings-form {
    max-width: 500px;
}

.settings-form label {
    display: block;
    margin: 17px 0 8px;
    color: #d5d9df;
    font-size: 14px;
    font-weight: 600;
}

.settings-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    background: #10141a;
    border: 1px solid #363d49;
    border-radius: 9px;
    outline: none;
    color: #ffffff;
    font-size: 16px;
}

.settings-form input:focus {
    border-color: #20c7b7;
    box-shadow: 0 0 0 3px rgba(32, 199, 183, 0.14);
}

.settings-form .btn {
    margin-top: 22px;
}

.btn {
    appearance: none;
    border: 1px solid #363d49;
    border-radius: 9px;
    padding: 10px 14px;
    background: #10141a;
    color: #f5f7fa;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.btn:hover {
    background: #1b2028;
}

.btn.primary {
    border-color: #20c7b7;
    background: #20c7b7;
    color: #ffffff;
}

.btn.primary:hover {
    filter: brightness(1.08);
}

.btn.danger {
    border-color: rgba(255, 78, 78, 0.45);
    color: #ff7b7b;
}

.btn.danger:hover {
    background: rgba(255, 78, 78, 0.1);
}

.settings-footer {
    padding: 10px 0 30px;
    color: #555e6b;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 700px) {
    .settings-page {
        padding: 24px 14px;
    }

    .settings-header {
        align-items: center;
    }

    .settings-header h1 {
        font-size: 30px;
    }

    .settings-card {
        padding: 18px;
    }
}
/* =========================================================
   Terms acceptance
   ========================================================= */

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 24px 0 6px;
    color: #aeb5bf;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.terms-checkbox input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: #20c7b7;
}

.terms-checkbox a,
.pin-footer a {
    color: #a9a3ff;
    text-decoration: none;
}

.terms-checkbox a:hover,
.pin-footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   Admin room actions
   ========================================================= */

.room-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.room-actions-cell form {
    margin: 0;
}

.room-actions-cell .btn {
    display: inline-block;
    text-decoration: none;
}

.room-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.room-detail {
    padding: 16px;
    background: #10141a;
    border: 1px solid #2c323d;
    border-radius: 10px;
}

.room-detail-label {
    display: block;
    margin-bottom: 6px;
    color: #747d89;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.room-detail strong {
    display: block;
    color: #f2f4f7;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.admin-room-content {
    min-height: 180px;
    max-height: 600px;
    margin: 0;
    padding: 18px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #0e1218;
    border: 1px solid #303641;
    border-radius: 10px;
    color: #e5e8ed;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    line-height: 1.55;
}

.danger-zone {
    border-color: rgba(255, 78, 78, 0.25);
}


/* =========================================================
   Terms page
   ========================================================= */

.terms-page {
    min-height: 100vh;
    margin: 0;
    padding: 40px 20px;
    background: #0d1016;
    color: #f5f7fa;
}

.terms-shell {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.terms-card {
    margin-top: 28px;
    padding: 38px;
    background: #171b22;
    border: 1px solid #2c323d;
    border-radius: 16px;
}

.terms-card h1 {
    margin: 0 0 4px;
    font-size: 34px;
    letter-spacing: -0.04em;
}

.terms-card h2 {
    margin: 32px 0 9px;
    font-size: 18px;
}

.terms-card p {
    margin: 0 0 13px;
    color: #afb6c0;
    font-size: 15px;
    line-height: 1.7;
}

.terms-updated {
    color: #69727e !important;
    font-size: 13px !important;
}

.terms-actions {
    margin-top: 34px;
}

.terms-actions .btn {
    display: inline-block;
    text-decoration: none;
}


@media (max-width: 800px) {
    .room-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .room-detail-grid {
        grid-template-columns: 1fr;
    }

    .terms-page {
        padding: 22px 13px;
    }

    .terms-card {
        padding: 22px 18px;
    }

    .terms-card h1 {
        font-size: 29px;
    }
}
.blocked-home-button {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.settings-footer a,
.terms-card a {
    color: #a9a3ff;
    text-decoration: none;
}

.settings-footer a:hover,
.terms-card a:hover {
    text-decoration: underline;
}
/* CopyCove homepage */

.home-instructions {
    display: grid;
    gap: 10px;
    margin: 28px 0 22px;
    text-align: left;
}

.home-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.home-step strong {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.home-step span {
    line-height: 1.4;
}

.home-example {
    margin: 20px 0;
    padding: 15px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    text-align: center;
    font-family: monospace;
    font-size: 16px;
    word-break: break-all;
}

.home-example span {
    opacity: 0.6;
}

.home-note {
    margin-top: 22px;
}
/* =========================================================
   CopyCove Homepage v10
   ========================================================= */

.pp-home {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(
            ellipse at 70% 20%,
            rgba(22, 76, 200, 0.22),
            transparent 36%
        ),
        radial-gradient(
            ellipse at 43% 5%,
            rgba(91, 50, 210, 0.19),
            transparent 32%
        ),
        #080d17;
    color: #f7f8fc;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.pp-home * {
    box-sizing: border-box;
}

.pp-home a {
    color: inherit;
}


/* HEADER */

.pp-header {
    position: relative;
    z-index: 10;
    width: min(1180px, calc(100% - 48px));
    height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.5px;
}

.pp-brand-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #7547ff,
            #3d8cff
        );
    color: white;
    font-size: 25px;
    font-weight: 800;
    box-shadow:
        0 0 30px rgba(101, 78, 255, 0.30);
}

.pp-nav {
    display: flex;
    gap: 34px;
}

.pp-nav a {
    color: #c0c4d5;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.pp-nav a:hover {
    color: #fff;
}


/* HERO */

.pp-hero {
    position: relative;
    width: min(1180px, calc(100% - 48px));
    min-height: 650px;
    margin: 0 auto;
    padding: 105px 0 80px;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: center;
    gap: 50px;
}

.pp-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.pp-glow-one {
    width: 420px;
    height: 420px;
    right: 5%;
    top: 5%;
    background: rgba(32, 92, 255, 0.13);
}

.pp-glow-two {
    width: 330px;
    height: 330px;
    right: 34%;
    top: 18%;
    background: rgba(126, 57, 255, 0.12);
}

.pp-hero-copy {
    position: relative;
    z-index: 3;
}

.pp-hero h1 {
    margin: 0;
    max-width: 660px;
    color: #f8f9fd;
    font-size: clamp(52px, 5.5vw, 76px);
    line-height: 0.99;
    letter-spacing: -4px;
    font-weight: 780;
}

.pp-hero h1 span {
    background:
        linear-gradient(
            90deg,
            #4d82ff,
            #a04eff
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-hero-copy > p {
    max-width: 490px;
    margin: 30px 0 0;
    color: #aab2cb;
    font-size: 20px;
    line-height: 1.55;
}


/* OPEN PAD */

.pp-open-card {
    position: relative;
    z-index: 5;
    width: 650px;
    max-width: 100%;
    margin-top: 52px;
    padding: 22px 24px 17px;
    border: 1px solid rgba(131, 141, 204, 0.32);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(29, 37, 69, 0.94),
            rgba(29, 24, 65, 0.90)
        );
    box-shadow:
        0 25px 80px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(18px);
}

.pp-open-title {
    margin-bottom: 13px;
    color: #c7cce1;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.8px;
}

.pp-open-form {
    display: flex;
    gap: 16px;
}

.pp-address {
    flex: 1;
    min-width: 0;
    height: 61px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(128, 144, 211, 0.36);
    border-radius: 11px;
    background: rgba(12, 19, 39, 0.62);
}

.pp-address > span {
    height: 100%;
    padding: 0 17px;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(128,144,211,0.22);
    background: rgba(96, 110, 177, 0.12);
    color: #b9c0d7;
    font-size: 16px;
    white-space: nowrap;
}

.pp-address input {
    width: 100%;
    min-width: 0;
    padding: 0 17px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 16px;
}

.pp-address input::placeholder {
    color: #66708d;
}

.pp-open-form button {
    min-width: 155px;
    height: 61px;
    padding: 0 21px;
    border: 1px solid rgba(169, 148, 255, 0.45);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #784cff,
            #563bff
        );
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    box-shadow:
        0 10px 35px rgba(92, 58, 255, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.20);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.pp-open-form button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 42px rgba(92,58,255,0.44);
}

.pp-open-form button span {
    margin-left: 7px;
}

.pp-open-hint {
    margin-top: 11px;
    color: #858da9;
    text-align: center;
    font-size: 12px;
}

.pp-open-error {
    margin-top: 10px;
    color: #ff8d9a;
    font-size: 13px;
}


/* DEVICE GRAPHIC */

.pp-devices {
    position: relative;
    z-index: 2;
    height: 470px;
}

.pp-laptop {
    position: absolute;
    width: 410px;
    right: 38px;
    top: 100px;
    transform: perspective(900px) rotateY(-5deg);
}

.pp-laptop-screen {
    height: 260px;
    padding: 34px;
    border: 4px solid #131722;
    border-radius: 18px 18px 7px 7px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(69,61,175,0.25),
            transparent 45%
        ),
        #090e1a;
    box-shadow:
        0 0 0 1px rgba(126,100,255,0.60),
        0 0 40px rgba(84,58,255,0.22);
}

.pp-laptop-base {
    width: 470px;
    height: 24px;
    margin-left: -30px;
    border-radius: 3px 3px 20px 20px;
    background:
        linear-gradient(
            #242a3b,
            #0e1119
        );
    box-shadow: 0 20px 35px rgba(0,0,0,0.45);
}

.pp-mini-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.pp-mini-brand b {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background:
        linear-gradient(
            135deg,
            #7b4cff,
            #437cff
        );
}

.pp-mini-pad {
    width: 230px;
    margin: 24px auto 0;
    padding: 17px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    background: #10172a;
    color: #e5e7f2;
    font-size: 13px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.pp-mini-pad i {
    width: 1px;
    height: 14px;
    margin-top: 2px;
    background: #806cff;
}

.pp-phone {
    position: absolute;
    z-index: 5;
    width: 132px;
    height: 265px;
    right: 0;
    top: 170px;
    padding: 8px;
    border: 3px solid #171b26;
    border-radius: 25px;
    background: #05080e;
    box-shadow:
        0 0 0 1px #20c7b7,
        0 20px 45px rgba(0,0,0,0.5);
}

.pp-phone-speaker {
    position: absolute;
    z-index: 5;
    width: 40px;
    height: 5px;
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #171c28;
}

.pp-phone-screen {
    height: 100%;
    padding: 34px 9px 10px;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            #080d19,
            #0c1220
        );
}

.pp-phone-brand {
    font-size: 9px;
}

.pp-phone-brand b {
    width: 17px;
    height: 17px;
    border-radius: 4px;
}

.pp-phone-pad {
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    font-size: 8px;
    gap: 4px;
}

.pp-hand-note {
    position: absolute;
    z-index: 8;
    right: 3px;
    top: 15px;
    color: #a9a3ff;
    font-family:
        "Segoe Print",
        "Bradley Hand",
        cursive;
    font-size: 19px;
    line-height: 1.3;
    transform: rotate(-5deg);
}

.pp-hand-note span {
    position: absolute;
    left: -35px;
    top: 57px;
    font-size: 37px;
    transform: rotate(18deg);
}


/* FEATURES */

.pp-features {
    width: min(1180px, calc(100% - 48px));
    min-height: 380px;
    margin: 0 auto;
    padding: 72px 25px 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.pp-feature {
    text-align: center;
}

.pp-feature-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pp-feature-icon svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-green {
    color: #42e9a0;
    background:
        radial-gradient(
            circle,
            rgba(20,185,117,0.30),
            rgba(10,99,69,0.22)
        );
    box-shadow: 0 0 40px rgba(30,210,130,0.09);
}

.pp-blue {
    color: #4d98ff;
    background:
        radial-gradient(
            circle,
            rgba(35,111,255,0.34),
            rgba(24,61,145,0.24)
        );
    box-shadow: 0 0 40px rgba(55,112,255,0.10);
}

.pp-purple {
    color: #a56cff;
    background:
        radial-gradient(
            circle,
            rgba(131,62,255,0.34),
            rgba(76,29,139,0.25)
        );
    box-shadow: 0 0 40px rgba(133,65,255,0.10);
}

.pp-feature h2 {
    margin: 0 0 13px;
    font-size: 20px;
    letter-spacing: -0.4px;
}

.pp-feature p {
    max-width: 260px;
    margin: 0 auto;
    color: #a5adc4;
    font-size: 15px;
    line-height: 1.6;
}


/* FOOTER */

.pp-footer {
    width: min(1180px, calc(100% - 48px));
    min-height: 115px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.pp-footer-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pp-footer .pp-brand {
    font-size: 17px;
}

.pp-footer .pp-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 20px;
}

.pp-footer-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.15);
}

.pp-tagline {
    color: #828ba6;
    font-size: 13px;
}

.pp-footer-links {
    display: flex;
    align-items: center;
    gap: 27px;
    color: #8e96ae;
    font-size: 13px;
}

.pp-footer-links a {
    text-decoration: none;
}

.pp-footer-links a:hover {
    color: #fff;
}


/* TABLET */

@media (max-width: 950px) {

    .pp-hero {
        min-height: auto;
        padding-top: 75px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pp-hero h1 {
        margin: 0 auto;
    }

    .pp-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .pp-open-card {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .pp-devices {
        width: 540px;
        max-width: 100%;
        height: 420px;
        margin: -20px auto 0;
    }

    .pp-laptop {
        left: 50%;
        right: auto;
        transform:
            translateX(-50%)
            perspective(900px)
            rotateY(-5deg);
    }

    .pp-phone {
        right: 5%;
    }

    .pp-hand-note {
        right: 7%;
    }
}


/* =========================================================
   CopyCove Homepage - Mobile
   ========================================================= */

@media (max-width: 650px) {
    .pp-home { overflow-x: hidden; }

    .pp-header,
    .pp-hero,
    .pp-features,
    .pp-footer { width: calc(100% - 32px); }

    .pp-header { height: 68px; }
    .pp-brand { gap: 9px; font-size: 18px; }
    .pp-brand-icon { width: 35px; height: 35px; border-radius: 9px; font-size: 20px; }
    .pp-nav { gap: 15px; }
    .pp-nav a { font-size: 12px; }
    .pp-nav a:first-child { display: none; }

    .pp-hero {
        min-height: auto;
        padding: 48px 0 32px;
        display: block;
        text-align: center;
    }

    .pp-hero-copy { width: 100%; }

    .pp-hero h1 {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        font-size: clamp(39px, 11.5vw, 48px);
        line-height: 1.02;
        letter-spacing: -2.2px;
    }

    .pp-hero-copy > p {
        max-width: 340px;
        margin: 21px auto 0;
        padding: 0 4px;
        font-size: 16px;
        line-height: 1.55;
    }

    .pp-open-card {
        width: 100%;
        margin-top: 32px;
        padding: 17px 15px 15px;
        border-radius: 14px;
        text-align: left;
    }

    .pp-open-title { margin-bottom: 11px; font-size: 11px; }
    .pp-open-form { display: block; }
    .pp-address { width: 100%; height: 56px; border-radius: 10px; }
    .pp-address > span { padding: 0 11px; font-size: 13px; }
    .pp-address input { min-width: 0; padding: 0 11px; font-size: 16px; }

    .pp-open-form button {
        width: 100%;
        min-width: 0;
        height: 56px;
        margin-top: 12px;
        border-radius: 10px;
        font-size: 16px;
    }

    .pp-open-hint,
    .pp-open-error { font-size: 11px; line-height: 1.45; }

    .pp-open-hint { margin-top: 10px; }

    .pp-devices {
        width: 100%;
        height: 285px;
        margin: 10px auto -15px;
        transform: none;
    }

    .pp-laptop {
        width: 300px;
        max-width: calc(100% - 25px);
        left: 50%;
        right: auto;
        top: 60px;
        transform: translateX(-50%) perspective(900px) rotateY(-3deg);
    }

    .pp-laptop-screen {
        height: 190px;
        padding: 24px;
        border-width: 3px;
        border-radius: 14px 14px 6px 6px;
    }

    .pp-laptop-base {
        width: calc(100% + 40px);
        height: 18px;
        margin-left: -20px;
        border-radius: 3px 3px 15px 15px;
    }

    .pp-mini-brand { font-size: 11px; }
    .pp-mini-brand b { width: 20px; height: 20px; font-size: 11px; }

    .pp-mini-pad {
        width: 175px;
        margin-top: 16px;
        padding: 12px;
        font-size: 9px;
    }

    .pp-phone {
        width: 90px;
        height: 185px;
        right: 1%;
        top: 105px;
        padding: 6px;
        border-width: 2px;
        border-radius: 19px;
    }

    .pp-phone-screen { padding: 27px 6px 7px; border-radius: 14px; }
    .pp-phone-speaker { width: 28px; height: 4px; top: 5px; }
    .pp-phone-brand { gap: 4px; font-size: 6px; }
    .pp-phone-brand b { width: 13px; height: 13px; font-size: 7px; }
    .pp-phone-pad { width: 100%; margin-top: 12px; padding: 7px; font-size: 5.5px; }
    .pp-hand-note { display: none; }

    .pp-features {
        min-height: auto;
        padding: 52px 10px 58px;
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .pp-feature { max-width: 330px; margin: 0 auto; }
    .pp-feature-icon { width: 62px; height: 62px; margin-bottom: 18px; }
    .pp-feature-icon svg { width: 29px; height: 29px; }
    .pp-feature h2 { margin-bottom: 9px; font-size: 18px; }
    .pp-feature p { max-width: 280px; font-size: 14px; line-height: 1.55; }

    .pp-footer {
        min-height: auto;
        padding: 32px 0 36px;
        flex-direction: column;
        justify-content: center;
        gap: 23px;
        text-align: center;
    }

    .pp-footer-brand { flex-direction: column; gap: 10px; }
    .pp-footer-divider { display: none; }
    .pp-tagline { font-size: 12px; }

    .pp-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 18px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .pp-header,
    .pp-hero,
    .pp-features,
    .pp-footer { width: calc(100% - 24px); }

    .pp-brand { font-size: 17px; }
    .pp-nav { gap: 11px; }
    .pp-nav a { font-size: 11px; }
    .pp-hero { padding-top: 40px; }
    .pp-hero h1 { font-size: 38px; letter-spacing: -1.8px; }
    .pp-hero-copy > p { font-size: 15px; }
    .pp-open-card { padding: 15px 12px; }
    .pp-address > span { padding: 0 9px; font-size: 12px; }
    .pp-address input { padding: 0 9px; }
    .pp-devices { height: 265px; }
    .pp-laptop { width: 270px; }
    .pp-phone { width: 82px; height: 170px; top: 105px; }
}



/* =========================================================
   CopyCove ocean theme · 2026-09-18
   ========================================================= */
:root {
    --cc-bg: #061719;
    --cc-bg-deep: #041113;
    --cc-panel: #0b2326;
    --cc-panel-2: #0f2c30;
    --cc-border: rgba(112, 231, 218, .14);
    --cc-text: #eefcf9;
    --cc-muted: #8eb8b4;
    --cc-accent: #20c7b7;
    --cc-accent-bright: #52e3d5;
    --cc-blue: #38bdf8;
    --cc-danger: #ff6b78;
}
body { background: var(--cc-bg-deep); color: var(--cc-text); }
.pin-page, .settings-page, .terms-page, .clipboard-page, .pp-home {
    background:
      radial-gradient(circle at 18% 0%, rgba(32,199,183,.12), transparent 34rem),
      radial-gradient(circle at 88% 18%, rgba(56,189,248,.09), transparent 32rem),
      linear-gradient(180deg, #061719 0%, #041113 100%);
    color: var(--cc-text);
}
.pin-brand-mark, .pp-brand-icon, .pp-mini-brand b {
    background: linear-gradient(135deg, var(--cc-accent-bright), var(--cc-accent));
    color: #03201e;
    box-shadow: 0 8px 28px rgba(32,199,183,.22);
}
.pin-brand-name, .pp-brand, .clipboard-header h1, .settings-header h1,
.terms-card h1, .terms-card h2, .pin-room-name { color: var(--cc-text); }
a { color: var(--cc-accent-bright); }
.pin-card, .settings-card, .terms-card, .clipboard-card, .pp-open-card, .pp-feature {
    border-color: var(--cc-border);
    background: rgba(11,35,38,.86);
    box-shadow: 0 22px 70px rgba(0,0,0,.24);
}
.pin-input, .settings-form input, .pp-address, #clipboard {
    background: #071c1f;
    border-color: rgba(112,231,218,.17);
    color: var(--cc-text);
}
.pin-input:focus, .settings-form input:focus, #clipboard:focus, .pp-address:focus-within {
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px rgba(32,199,183,.13);
}
.pin-submit, .btn.primary, .pp-open-form button {
    background: linear-gradient(135deg, var(--cc-accent-bright), var(--cc-accent));
    color: #03201e;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(32,199,183,.16);
}
.pin-submit:hover, .btn.primary:hover, .pp-open-form button:hover { filter: brightness(1.06); }
.pp-hero h1 span { color: var(--cc-accent-bright); }
.pp-glow-one { background: rgba(32,199,183,.22); }
.pp-glow-two { background: rgba(56,189,248,.14); }
.pp-green, .pp-purple { color: var(--cc-accent-bright); background: rgba(32,199,183,.11); }
.pp-blue { color: #67d2ff; background: rgba(56,189,248,.10); }
.pp-laptop-screen, .pp-phone-screen { background: #071c1f; }
.pp-mini-pad { border-color: rgba(112,231,218,.13); background: rgba(11,35,38,.9); }
.pp-mini-pad i { background: var(--cc-accent); }
.status-dot.saved { background: #39d98a; }
.status-dot.saving { background: #f5c451; }
.status-dot.error { background: var(--cc-danger); }
.room-count { background: rgba(32,199,183,.12); color: var(--cc-accent-bright); }
.settings-table th { color: var(--cc-muted); }
.settings-table td { border-color: rgba(112,231,218,.08); }
.creation-mode-option:hover { border-color: rgba(72,223,208,.35) !important; background: rgba(32,199,183,.04) !important; }
.creation-mode-option:has(input:checked) { border-color: rgba(72,223,208,.62) !important; background: rgba(32,199,183,.08) !important; }
.creation-mode-option input[type="radio"] { accent-color: var(--cc-accent) !important; }
.creation-mode-badge.private { color: var(--cc-accent-bright) !important; background: rgba(32,199,183,.13) !important; }
.pin-description, .pin-hint, .pin-footer, .settings-user, .settings-section-title p,
.terms-card p, .pp-hero-copy > p, .pp-feature p, .clipboard-footer { color: var(--cc-muted); }
::selection { background: rgba(32,199,183,.30); color: #fff; }


/* =========================================================
   CopyCove teal identity · v14 · 2026-09-18
   ========================================================= */
:root {
  --cc-bg: #031416;
  --cc-bg-deep: #020c0e;
  --cc-panel: #082326;
  --cc-panel-2: #0b2d30;
  --cc-line: rgba(91, 232, 217, .22);
  --cc-text: #f4fbfb;
  --cc-muted: #a7c0c2;
  --cc-teal: #36e0cf;
  --cc-teal-2: #6cf2df;
  --cc-teal-deep: #0aa99f;
  --cc-danger: #ff7181;
}
body, .pp-home, .pin-page, .settings-page, .terms-page, .clipboard-page {
  background:
    radial-gradient(ellipse at 72% 5%, rgba(34,211,197,.18), transparent 38rem),
    radial-gradient(ellipse at 18% 42%, rgba(8,112,113,.13), transparent 32rem),
    linear-gradient(180deg,#041719 0%,#020c0e 100%);
  color: var(--cc-text);
}
.pp-home { overflow-x:hidden; }
.pp-brand { gap:13px; }
.pp-brand-icon, .pin-brand-mark, .pp-mini-brand b {
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg,#7af5e5 0%,#31dfce 50%,#079e99 100%);
  color:#032326;
  box-shadow:0 0 30px rgba(54,224,207,.20);
}
/* Turn the simple C tile into a distinctive CopyCove mark. */
.pp-brand-icon {
  width:46px; height:46px; border-radius:50%;
  font-size:0;
}
.pp-brand-icon::before {
  content:""; width:24px; height:24px; border:7px solid #062125;
  border-right-color:transparent; border-radius:50%;
}
.pp-brand-icon::after {
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#f4fbfb; left:18px; top:19px;
}
.pp-footer .pp-brand-icon { width:36px; height:36px; border-radius:50%; font-size:0; }
.pp-footer .pp-brand-icon::before { width:18px; height:18px; border-width:5px; }
.pp-footer .pp-brand-icon::after { width:5px; height:5px; left:14px; top:15px; }
.pp-nav a { color:#b9ced0; }
.pp-nav a:hover { color:#fff; }
.pp-hero::before, .pp-hero::after {
  content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(1px); opacity:.8;
}
.pp-hero::before {
  width:780px; height:300px; right:-180px; top:45px;
  border:1px solid rgba(81,242,224,.38);
  background:linear-gradient(145deg,rgba(10,94,96,.06),rgba(54,224,207,.18));
  transform:rotate(-13deg); box-shadow:0 0 80px rgba(30,210,198,.10);
}
.pp-hero::after {
  width:680px; height:220px; right:-100px; top:320px;
  border:1px solid rgba(81,242,224,.22);
  background:linear-gradient(145deg,rgba(3,26,29,.05),rgba(23,168,162,.14));
  transform:rotate(10deg);
}
.pp-glow-one { background:rgba(38,224,207,.20); }
.pp-glow-two { background:rgba(8,134,136,.17); }
.pp-hero h1 span {
  background:linear-gradient(90deg,#8af7e9,#36e0cf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pp-hero-copy > p, .pp-feature p, .pp-open-hint, .pp-tagline { color:var(--cc-muted); }
.pp-open-card {
  background:linear-gradient(135deg,rgba(8,35,38,.92),rgba(4,22,25,.91));
  border-color:rgba(91,232,217,.30);
  box-shadow:0 25px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}
.pp-address, .pin-input, .settings-form input, #clipboard {
  background:rgba(2,17,19,.72); border-color:rgba(91,232,217,.22); color:var(--cc-text);
}
.pp-address > span { background:rgba(54,224,207,.07); border-color:rgba(91,232,217,.16); color:#c3d8d9; }
.pp-address:focus-within, .pin-input:focus, .settings-form input:focus, #clipboard:focus {
  border-color:var(--cc-teal); box-shadow:0 0 0 3px rgba(54,224,207,.11);
}
.pp-open-form button, .pin-submit, .btn.primary {
  background:linear-gradient(135deg,#73f3e1,#31ddcd); color:#032326; border-color:rgba(137,255,240,.35);
  box-shadow:0 10px 34px rgba(28,207,194,.19); font-weight:750;
}
.pp-open-form button:hover, .pin-submit:hover, .btn.primary:hover { filter:brightness(1.05); }
.pp-laptop-screen {
  background:radial-gradient(circle at 55% 0%,rgba(23,180,171,.17),transparent 48%),#041315;
  box-shadow:0 0 0 1px rgba(73,237,221,.72),0 0 42px rgba(30,207,194,.20);
}
.pp-phone { box-shadow:0 0 0 1px var(--cc-teal),0 20px 45px rgba(0,0,0,.5),0 0 28px rgba(54,224,207,.14); }
.pp-phone-screen { background:linear-gradient(180deg,#041315,#061a1d); }
.pp-mini-pad { background:#071b1e; border-color:rgba(91,232,217,.12); }
.pp-mini-pad i { background:var(--cc-teal); }
.pp-mini-brand b { color:#032326; }
.pp-hand-note { display:none !important; }
/* Clean feature row: no icon discs/cards. */
.pp-feature { background:transparent !important; border:0 !important; box-shadow:none !important; }
.pp-feature-icon, .pp-green, .pp-blue, .pp-purple {
  width:58px; height:58px; color:var(--cc-teal-2) !important; background:transparent !important;
  border-radius:0; box-shadow:none !important; margin-bottom:20px;
}
.pp-feature-icon svg { width:42px; height:42px; stroke-width:1.7; }
.pp-features { border-top:1px solid rgba(91,232,217,.12); }
.pp-footer { border-top-color:rgba(91,232,217,.12); }
.pin-card,.settings-card,.terms-card,.clipboard-card {
  background:rgba(7,31,34,.90); border-color:rgba(91,232,217,.16); box-shadow:0 22px 70px rgba(0,0,0,.25);
}
a { color:var(--cc-teal-2); }
.room-count,.creation-mode-badge.private { background:rgba(54,224,207,.10)!important; color:var(--cc-teal-2)!important; }
.creation-mode-option input[type="radio"] { accent-color:var(--cc-teal)!important; }
.status-dot.saved { background:#39d98a; }
.status-dot.saving { background:#f5c451; }
.status-dot.error { background:var(--cc-danger); }
::selection { background:rgba(54,224,207,.28); color:#fff; }

/* CopyCove v16 — normal-sized admin/settings form text */
.admin-login-input {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

.settings-form input:not([type="radio"]):not([type="checkbox"]),
.settings-form textarea,
.settings-form select {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* Keep the authenticator/PIN-style field easy to scan without being oversized. */
#code.pin-input {
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-align: center !important;
}

/* CopyCove v17 — multi-admin + 2FA */
.admin-list{display:grid;gap:10px;margin-top:18px}.admin-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px;border:1px solid rgba(45,212,191,.14);border-radius:12px;background:rgba(255,255,255,.025)}.admin-row strong{font-size:16px;color:#f4fffd}.admin-meta{margin-top:5px;font-size:12px;color:#83aaa5}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-actions form{margin:0}.admin-add{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07)}.admin-add h3{margin:0 0 5px}.admin-add p{margin:0 0 16px;color:#83aaa5}.settings-form select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#081b1d;color:#eefcf9;padding:12px 14px;font:inherit}.btn.danger{border-color:rgba(255,100,115,.25);color:#ff8995}.admin-2fa-card{max-width:520px}.totp-qr{display:flex;justify-content:center;margin:22px 0}.totp-qr img{width:210px;height:210px;padding:12px;background:#fff;border-radius:14px}.totp-secret{display:grid;gap:8px;margin:18px 0;padding:14px;border:1px solid rgba(45,212,191,.16);border-radius:10px;background:rgba(45,212,191,.04)}.totp-secret span{font-size:12px;color:#83aaa5}.totp-secret code{font-size:16px;letter-spacing:2px;overflow-wrap:anywhere;color:#7debdc}.recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.recovery-grid code{padding:12px;text-align:center;border:1px solid rgba(45,212,191,.15);border-radius:9px;background:rgba(255,255,255,.025);letter-spacing:1px;color:#eafffc}@media(max-width:650px){.admin-row{align-items:flex-start;flex-direction:column}.recovery-grid{grid-template-columns:1fr}.admin-actions{width:100%}}


/* =========================================================
   CopyCove admin / 2FA polish · v17.2
   ========================================================= */

/* Use the current CopyCove circular wave-C identity throughout admin screens. */
.pin-brand-mark {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    font-size: 0 !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pin-brand-mark::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 7px solid #062125;
    border-right-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
}
.pin-brand-mark::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f4fbfb;
    left: 18px;
    top: 19px;
}

.admin-first-login-note {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.45;
}
.admin-2fa-card {
    width: min(100%, 560px);
    max-width: 560px;
}
.admin-2fa-card h1 {
    margin-bottom: 10px;
}
.setup-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 24px;
}
.setup-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(54,224,207,.12);
    border: 1px solid rgba(108,242,223,.24);
    color: var(--cc-teal-2);
    font-weight: 800;
}
.setup-step strong {
    display: block;
    color: var(--cc-text);
    font-size: 16px;
    margin: 3px 0 4px;
}
.setup-step p {
    margin: 0;
    color: var(--cc-muted);
    font-size: 13px;
    line-height: 1.5;
}
.setup-step-verify {
    margin-bottom: 14px;
}
.totp-qr {
    margin: 18px auto;
}
.totp-qr img {
    width: min(220px, 72vw);
    height: auto;
    aspect-ratio: 1;
    display: block;
}
.manual-key {
    margin: 14px 0 4px;
    border: 1px solid rgba(91,232,217,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}
.manual-key summary {
    padding: 12px 14px;
    cursor: pointer;
    color: var(--cc-teal-2);
    font-size: 13px;
    font-weight: 700;
}
.manual-key .totp-secret {
    margin: 0 12px 12px;
}
.setup-verify-form {
    margin-top: 0;
}
.totp-code-input {
    text-align: center;
    font-size: 20px !important;
    letter-spacing: .24em !important;
    font-weight: 650 !important;
}
.recovery-card {
    width: min(100%, 620px);
    max-width: 620px;
}
.recovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.recovery-grid code {
    font-size: 15px;
    user-select: all;
}
.recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.recovery-actions .btn {
    margin: 0;
}
.recovery-warning {
    margin: 18px 0 0;
    color: var(--cc-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 650px) {
    .admin-2fa-card, .recovery-card { width: 100%; }
    .recovery-grid { grid-template-columns: 1fr; }
    .recovery-actions { display: grid; grid-template-columns: 1fr; }
    .recovery-actions .btn { width: 100%; text-align: center; }
}

@media print {
    body.pin-page {
        background: #fff !important;
        color: #000 !important;
    }
    .pin-shell { max-width: 760px; }
    .pin-brand-name, .recovery-card h1, .recovery-grid code { color: #000 !important; }
    .pin-brand-mark { box-shadow: none; }
    .recovery-card {
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .recovery-card .pin-eyebrow, .recovery-card .pin-description, .recovery-warning { color: #333 !important; }
    .recovery-grid code {
        border: 1px solid #bbb !important;
        background: #fff !important;
    }
    .recovery-actions { display: none !important; }
}