@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* =========================================================
   FOTOGRAFER
   Unified UI System
   ========================================================= */

:root {
    --bg: #f4f6fa;
    --bg-soft: #f8faff;

    --surface: #ffffff;
    --surface-soft: #f7f8fa;
    --surface-glass: rgba(255, 255, 255, 0.82);

    --text: #111318;
    --text-soft: #343942;
    --muted: #7c8491;
    --muted-2: #a0a6b0;

    --border: #e7eaf0;
    --border-soft: #eef0f3;

    --primary: #087cff;
    --primary-hover: #006ee6;
    --primary-soft: #eaf4ff;

    --success: #24b95a;
    --success-soft: #eaf9f0;

    --danger: #ff453a;
    --danger-hover: #e83a31;
    --danger-soft: #fff0ef;

    --warning: #f5a524;

    --dark: #17191f;
    --dark-soft: #24272f;

    --radius-xs: 8px;
    --radius-sm: 11px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --shadow-xs: 0 2px 8px rgba(31, 42, 60, 0.04);
    --shadow-sm: 0 5px 18px rgba(31, 42, 60, 0.06);
    --shadow-md: 0 12px 35px rgba(31, 42, 60, 0.09);
    --shadow-lg: 0 22px 60px rgba(31, 42, 60, 0.13);

    --container: 1120px;
    --admin-container: 940px;

    --transition: 160ms ease;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    background:
        radial-gradient(
            circle at 20% -10%,
            rgba(60, 140, 255, 0.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fbfcff 0%,
            var(--bg) 45%,
            #f1f3f7 100%
        );
}

body,
button,
input,
select,
textarea {
    font-family: inherit;
}

button,
input,
select,
textarea {
    font-size: 16px;
}

button {
    cursor: pointer;
}

button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--text);
    letter-spacing: -0.035em;
}

p {
    color: var(--muted);
}

::selection {
    color: #fff;
    background: var(--primary);
}


/* =========================================================
   GLOBAL FORM
   ========================================================= */

input,
select,
textarea {
    width: 100%;

    color: var(--text);

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

input,
select {
    height: 48px;
    padding: 0 14px;
}

textarea {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(8, 124, 255, 0.55);

    box-shadow:
        0 0 0 4px rgba(8, 124, 255, 0.10);
}

input::placeholder,
textarea::placeholder {
    color: #a7adb6;
}

select {
    cursor: pointer;
}


/* =========================================================
   GLOBAL BUTTON
   ========================================================= */

.button,
button {
    min-height: 44px;

    padding: 0 16px;

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

    gap: 7px;

    border: 0;
    border-radius: 13px;

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

    text-decoration: none;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.button:hover,
button:hover {
    transform: translateY(-1px);
}

.button:active,
button:active {
    transform: scale(0.985);
}

.button.primary {
    color: #fff;
    background: var(--primary);

    box-shadow:
        0 8px 22px rgba(8, 124, 255, 0.20);
}

.button.primary:hover {
    background: var(--primary-hover);
}

.button.ghost,
button.secondary {
    color: var(--text-soft);

    background: var(--surface);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-xs);
}

button.danger {
    color: #fff;
    background: var(--danger);
}

button.danger:hover {
    background: var(--danger-hover);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}


/* =========================================================
   SHARED
   ========================================================= */

.wrap {
    width: min(
        var(--container),
        calc(100% - 32px)
    );

    margin:
        42px auto
        90px;
}

.eyebrow,
.hero-kicker {
    display: block;

    color: var(--muted);

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.badge {
    min-height: 26px;

    padding: 0 9px;

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

    color: #555d68;

    background: #f4f6f8;
    border: 1px solid var(--border);

    border-radius: 999px;

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

    letter-spacing: 0.04em;
}

.badge.private {
    color: #fff;
    background: var(--dark);
    border-color: var(--dark);
}


/* =========================================================
   PUBLIC NAVIGATION
   ========================================================= */

.sitebar {
    position: sticky;
    top: 0;
    z-index: 100;

    min-height: 68px;

    padding:
        0 max(
            18px,
            calc((100vw - var(--container)) / 2)
        );

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

    gap: 16px;

    background: rgba(250, 251, 253, 0.84);

    border-bottom: 1px solid rgba(30, 45, 70, 0.07);

    backdrop-filter:
        blur(22px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(160%);
}

.brand {
    font-size: 14px;
    font-weight: 850;

    letter-spacing: 0.08em;
}

.brand small {
    display: block;

    margin-top: 1px;

    color: var(--muted);

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

    letter-spacing: 0.08em;
}

.brand-link {
    text-decoration: none;
}

.main-nav,
.operator-nav {
    display: flex;
    align-items: center;

    gap: 5px;
}

.main-nav a,
.operator-nav a {
    padding: 9px 11px;

    border-radius: 11px;

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

    text-decoration: none;
}

.nav-button {
    background: var(--surface);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-xs);
}


/* =========================================================
   HOME
   ========================================================= */

.home-hero {
    width: min(
        var(--container),
        calc(100% - 32px)
    );

    min-height: 600px;

    margin: auto;
    padding: 70px 22px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 7vw;
}

.home-hero h1 {
    margin: 13px 0 0;

    max-width: 700px;

    font-size: clamp(
        50px,
        7vw,
        88px
    );

    line-height: 0.94;
}

.home-hero p {
    max-width: 580px;

    margin: 25px 0 0;

    font-size: 16px;
}

.hero-actions {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.hero-visual {
    position: relative;

    min-height: 420px;
}

.frame {
    position: absolute;

    padding: 20px;

    display: flex;
    align-items: flex-end;

    border-radius: 28px;

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

    letter-spacing: 0.12em;

    box-shadow: var(--shadow-lg);
}

.frame-main {
    inset:
        15px
        32px
        32px
        0;

    color: #fff;
    background: #17191f;
}

.frame-small {
    width: 44%;
    height: 43%;

    right: 0;
    bottom: 0;

    background: #fff;

    border: 6px solid #f7f8fa;
}

.live-pill {
    position: absolute;

    top: 0;
    right: 2px;

    padding: 8px 11px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;

    box-shadow: var(--shadow-sm);

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

    backdrop-filter: blur(12px);
}

.live-pill i {
    width: 7px;
    height: 7px;

    margin-right: 5px;

    display: inline-block;

    background: var(--success);

    border-radius: 50%;
}

.home-section,
.process-section {
    padding:
        76px
        max(4vw, 22px);
}

.section-heading,
.gallery-heading {
    margin-bottom: 28px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
}

.section-heading h2,
.gallery-heading h1 {
    margin: 6px 0 0;

    font-size: clamp(
        34px,
        5vw,
        56px
    );
}

.section-heading > p {
    max-width: 350px;

    margin: 0;
}

.public-events {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.public-event {
    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 22px;

    text-decoration: none;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.public-event:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.event-cover {
    min-height: 210px;

    padding: 17px;

    display: flex;
    justify-content: space-between;

    color: #fff;
    background: var(--dark);
}

.event-arrow {
    font-size: 22px;
}

.public-event-body {
    padding: 17px;

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

    gap: 10px;
}

.public-event-body h3 {
    margin: 0 0 3px;
}

.public-event-body div > span {
    color: var(--muted);

    font-size: 11px;
}

.process-section {
    color: #fff;
    background: var(--dark);
}

.section-heading.light h2 {
    color: #fff;
}

.section-heading.light p,
.section-heading.light .eyebrow,
.steps p {
    color: #9da4af;
}

.steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;
}

.steps article {
    min-height: 190px;

    padding: 21px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
}

.steps span {
    color: #7f8793;

    font-size: 10px;
    font-weight: 800;
}

.steps h3 {
    margin:
        52px
        0
        6px;

    color: #fff;

    font-size: 20px;
}

.site-footer {
    padding:
        30px
        max(4vw, 22px);

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

    gap: 20px;

    background: #fff;

    border-top: 1px solid var(--border);
}

.site-footer p {
    margin: 0;

    font-size: 11px;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
    min-height: 100vh;

    padding: 22px;

    display: grid;
    place-items: center;
}

.login-shell {
    width: min(
        410px,
        100%
    );
}

.login-card {
    padding: 30px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.login-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    color: #fff;
    background: var(--primary);

    border-radius: 17px;

    font-size: 23px;
    font-weight: 850;

    box-shadow:
        0 12px 28px
        rgba(8, 124, 255, 0.22);
}

.login-card h1 {
    margin:
        28px
        0
        6px;

    font-size: 36px;
}

.login-form {
    margin-top: 23px;

    display: grid;

    gap: 14px;
}

.login-form label {
    display: grid;

    gap: 6px;

    color: var(--text-soft);

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

.pin-input {
    text-align: center;

    font-size: 22px;

    letter-spacing: 0.25em;
}

.login-form button {
    width: 100%;
}

.login-back {
    margin-top: 19px;

    display: block;

    color: var(--muted);

    font-size: 11px;

    text-align: center;
    text-decoration: none;
}

.alert,
.pin-error {
    color: #b42318;
}

.alert {
    margin-top: 15px;
    padding: 11px 12px;

    background: var(--danger-soft);

    border: 1px solid #ffd8d4;
    border-radius: 12px;

    font-size: 12px;
}


/* =========================================================
   ADMIN HEADER
   ========================================================= */

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    height: 66px;

    padding:
        0 max(
            15px,
            calc((100vw - var(--admin-container)) / 2)
        );

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

    background: rgba(248, 250, 253, 0.88);

    border-bottom: 1px solid rgba(30, 45, 70, 0.07);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.admin-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}

.admin-logo {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #fff;
    background: var(--dark);

    border-radius: 11px;

    font-size: 15px;
    font-weight: 850;

    box-shadow:
        0 5px 15px
        rgba(20, 23, 29, 0.12);
}

.admin-brand strong {
    display: block;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.07em;
}

.admin-brand small {
    display: block;

    margin-top: 1px;

    color: var(--muted);

    font-size: 9px;
}

.admin-top-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.admin-event-count,
.icon-link {
    height: 36px;

    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid var(--border);
    border-radius: 11px;

    box-shadow: var(--shadow-xs);
}

.admin-event-count {
    min-width: 36px;
    padding: 0 10px;

    font-size: 11px;
    font-weight: 800;
}

.icon-link {
    width: 36px;

    color: var(--text-soft);

    font-size: 14px;

    text-decoration: none;
}


/* =========================================================
   ADMIN MAIN
   ========================================================= */

.admin-main {
    width: min(
        var(--admin-container),
        calc(100% - 28px)
    );

    margin:
        28px auto
        90px;
}

.admin-welcome {
    margin-bottom: 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.admin-kicker,
.admin-section-head span,
.admin-list-title > span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.14em;
}

.admin-welcome h1 {
    margin:
        5px
        0
        3px;

    font-size: 42px;
    line-height: 1;
}

.admin-welcome p {
    margin: 0;

    font-size: 12px;
}

.admin-add {
    min-height: 43px;

    padding: 0 15px;

    color: #fff !important;
    background: var(--dark) !important;

    border-radius: 13px !important;

    box-shadow:
        0 7px 20px
        rgba(20, 23, 29, 0.13) !important;
}


/* =========================================================
   ADMIN STATS
   ========================================================= */

.admin-stats {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;
}

.admin-stats article {
    min-width: 0;

    padding: 15px;

    display: flex;
    align-items: center;

    gap: 11px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid var(--border);
    border-radius: 17px;

    box-shadow: var(--shadow-xs);
}

.admin-stats article > div {
    min-width: 0;
}

.admin-stats i {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    color: #59616d;
    background: #f1f3f6;

    border-radius: 11px;

    font-size: 15px;
}

.admin-stats strong {
    display: block;

    overflow: hidden;

    font-size: 18px;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stats span {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   ADMIN NOTICE
   ========================================================= */

.notice {
    margin-bottom: 15px;

    padding: 11px 13px;

    color: #17733a;
    background: var(--success-soft);

    border: 1px solid #d7f0df;
    border-radius: 12px;

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

.notice-error {
    color: #b42318 !important;
    background: var(--danger-soft) !important;

    border-color: #ffd8d4 !important;
}


/* =========================================================
   ADMIN TOKEN
   ========================================================= */

.admin-token {
    margin-bottom: 18px;

    padding: 17px;

    color: #fff;
    background:
        linear-gradient(
            145deg,
            #1b1e25,
            #101216
        );

    border: 1px solid #292c33;
    border-radius: 19px;

    box-shadow:
        0 12px 32px
        rgba(20, 23, 29, 0.14);
}

.admin-token-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-token-head span {
    display: block;

    color: #8f96a1;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.14em;
}

.admin-token-head strong {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 12px;
}

.admin-token-head i {
    color: #8f96a1;

    font-size: 19px;
}

.admin-token code {
    margin:
        13px
        0
        9px;

    padding: 12px;

    display: block;

    overflow: hidden;

    color: #eef1f5;
    background: #090b0e;

    border: 1px solid #292d34;
    border-radius: 11px;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;

    user-select: all;
    -webkit-user-select: all;
}

.admin-token button {
    min-height: 39px;

    color: #17191e !important;
    background: #fff !important;

    box-shadow: none !important;
}

.admin-token small {
    margin-top: 10px;

    display: block;

    color: #858c97;

    font-size: 9px;
}


/* =========================================================
   CREATE EVENT
   ========================================================= */

.admin-create {
    display: none;

    margin-bottom: 20px;
    padding: 19px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid var(--border);
    border-radius: 20px;

    box-shadow: var(--shadow-sm);
}

.admin-create.open {
    display: block;

    animation:
        adminOpen
        160ms ease-out;
}

@keyframes adminOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.admin-section-head {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.admin-section-head h2 {
    margin:
        4px
        0
        0;

    font-size: 22px;
}

.admin-close {
    width: 36px;
    min-height: 36px !important;

    padding: 0 !important;

    color: #555d69 !important;
    background: #f2f4f7 !important;

    box-shadow: none !important;
}

.admin-form {
    display: grid;

    gap: 13px;
}

.admin-form label {
    display: grid;

    gap: 6px;
}

.admin-form label > span {
    color: #626a76;

    font-size: 10px;
    font-weight: 750;
}

.admin-form label em {
    color: var(--muted-2);

    font-style: normal;
    font-weight: 500;
}

.admin-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.admin-submit {
    width: 100%;
    height: 48px;

    margin-top: 2px;

    color: #fff;
    background: var(--primary);

    box-shadow:
        0 8px 20px
        rgba(8, 124, 255, 0.18);
}


/* =========================================================
   ADMIN EVENT LIST
   ========================================================= */

.admin-list-title {
    margin:
        27px
        2px
        10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-list-title small {
    color: var(--muted-2);

    font-size: 9px;
}

.admin-events {
    display: grid;

    gap: 11px;
}

.admin-event-card {
    overflow: hidden;

    padding: 18px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid var(--border);
    border-radius: 20px;

    box-shadow: var(--shadow-xs);

    transition:
        box-shadow var(--transition),
        transform var(--transition);
}

.admin-event-card:hover {
    box-shadow: var(--shadow-sm);
}

.admin-event-card .event-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.admin-event-card .event-head > div {
    min-width: 0;
}

.admin-event-card h2 {
    display: inline;

    margin: 0;

    font-size: 20px;
    line-height: 1.2;

    overflow-wrap: anywhere;
}

.event-status-dot {
    width: 7px;
    height: 7px;

    margin-right: 6px;

    display: inline-block;

    vertical-align: 2px;

    background: var(--danger);

    border-radius: 50%;
}

.event-status-dot.on {
    background: var(--success);

    box-shadow:
        0 0 0 4px
        rgba(36, 185, 90, 0.10);
}

.admin-event-card .meta {
    margin:
        6px
        0
        0;

    color: var(--muted);

    font-size: 10px;

    overflow-wrap: anywhere;
}

.admin-event-card .badge {
    flex: 0 0 auto;

    max-width: 115px;

    text-align: center;
}


/* =========================================================
   EVENT STATS
   ========================================================= */

.event-stats {
    margin-top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.event-stats span {
    padding: 6px 8px;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: #777f8a;
    background: #f4f6f8;

    border: 1px solid #f0f1f3;
    border-radius: 9px;

    font-size: 9px;
}

.event-stats b {
    color: #202329;

    font-size: 10px;
}


/* =========================================================
   EVENT ACTIONS
   ========================================================= */

.event-actions {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr;

    gap: 7px;
}

.event-action {
    min-height: 43px !important;

    padding: 0 10px !important;

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

    gap: 6px;

    color: #343942 !important;
    background: #f3f5f7 !important;

    border: 1px solid transparent !important;
    border-radius: 12px !important;

    box-shadow: none !important;

    font-size: 10px !important;
    font-weight: 750 !important;

    text-decoration: none;

    transition:
        background var(--transition),
        transform var(--transition);
}

.event-action:hover {
    background: #eceff3 !important;
}

.event-action.primary-action {
    color: #fff !important;
    background: var(--primary) !important;
}

.event-action.primary-action:hover {
    background: var(--primary-hover) !important;
}

.event-action i {
    font-size: 14px;
}


/* =========================================================
   EVENT SETTINGS
   ========================================================= */

.event-settings {
    display: none;

    margin-top: 15px;

    background: #f8f9fb;

    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.event-settings.open {
    display: block;

    padding: 14px;

    animation:
        adminOpen
        150ms ease-out;
}

.event-settings .form-grid.compact {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(120px, 1fr)
        minmax(150px, 1fr)
        auto;

    align-items: end;

    gap: 8px;
}

.event-settings label {
    min-width: 0;

    display: grid;

    gap: 6px;

    color: #6f7783;

    font-size: 9px;
    font-weight: 750;
}

.event-settings input,
.event-settings select {
    background: #fff;
}

.event-settings .form-grid.compact > button {
    height: 48px;

    color: #fff;
    background: var(--primary);
}


/* =========================================================
   REMOVE PIN
   ========================================================= */

.remove-pin {
    grid-column: 1 / -1 !important;

    padding: 10px 12px !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    color: #b42318 !important;
    background: #fff5f4;

    border: 1px solid #ffe0dd;
    border-radius: 11px;

    font-size: 10px !important;

    cursor: pointer;
}

.remove-pin input {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px;

    margin: 0;

    accent-color: var(--danger);
}


/* =========================================================
   DANGER ACTIONS
   ========================================================= */

.danger-actions {
    margin-top: 12px;
    padding-top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    border-top: 1px solid var(--border);
}

.danger-actions form {
    margin: 0;
}

.danger-actions button {
    min-height: 39px;

    font-size: 10px;
}

.hidden-upload {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.home-empty {
    padding: 48px 20px;

    color: var(--text);

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 20px;

    text-align: center;

    box-shadow: var(--shadow-xs);
}

.home-empty p {
    margin:
        5px
        0
        0;

    font-size: 11px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery-wrap {
    min-height: 65vh;
}

.gallery-tools {
    position: sticky;
    top: 78px;
    z-index: 40;

    margin-bottom: 12px;
    padding: 10px 12px;

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

    gap: 12px;

    background: rgba(255, 255, 255, 0.90);

    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: var(--shadow-xs);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.gallery-tools > div:first-child {
    display: grid;
}

.gallery-tools strong {
    font-size: 11px;
}

.gallery-tools span {
    color: var(--muted);

    font-size: 9px;
}

.gallery-tools > div:last-child {
    display: flex;

    gap: 6px;
}

.gallery-tool-btn {
    min-height: 35px !important;

    padding: 0 10px !important;

    color: #343942 !important;
    background: #f2f4f7 !important;

    box-shadow: none !important;

    font-size: 9px !important;
}


/* =========================================================
   SELECTABLE GALLERY
   ========================================================= */

.select-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap: 7px;
}

.select-photo {
    position: relative;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background: #e6e9ee;

    border-radius: 15px;

    box-shadow: var(--shadow-xs);
}

.photo-select {
    position: absolute;
    inset: 0;

    cursor: pointer;
}

.photo-select input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.photo-select img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 220ms ease,
        filter 180ms ease;
}

.select-photo:hover .photo-select img {
    transform: scale(1.015);
}

.check-ui {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    color: transparent;
    background: rgba(20, 22, 27, 0.38);

    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(8px);
}

.select-photo.selected .check-ui {
    color: #fff;
    background: var(--primary);

    border-color: var(--primary);
}

.select-photo.selected .photo-select img {
    filter:
        brightness(0.75)
        saturate(0.9);
}

.photo-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;

    display: flex;

    gap: 5px;
}

.photo-actions a {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #16191e;
    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);

    text-decoration: none;

    backdrop-filter: blur(10px);
}


/* =========================================================
   DOWNLOAD BAR
   ========================================================= */

.download-bar {
    position: fixed;

    left: 50%;
    bottom: max(
        16px,
        env(safe-area-inset-bottom)
    );

    z-index: 90;

    width: min(
        620px,
        calc(100% - 24px)
    );

    padding:
        9px
        9px
        9px
        14px;

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

    gap: 12px;

    color: #fff;
    background: rgba(20, 23, 29, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 17px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.22);

    opacity: 0;

    transform:
        translate(
            -50%,
            130%
        );

    transition:
        transform 200ms ease,
        opacity 200ms ease;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.download-bar.show {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}

.download-bar strong,
.download-bar span {
    display: block;
}

.download-bar strong {
    color: #fff;

    font-size: 11px;
}

.download-bar span {
    margin-top: 1px;

    color: #9da4ae;

    font-size: 8px;
}

.download-bar button {
    min-height: 41px;

    color: #fff;
    background: var(--primary);

    box-shadow: none !important;
}


/* =========================================================
   OLD GALLERY COMPATIBILITY
   ========================================================= */

.gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(245px, 1fr)
        );

    gap: 7px;
}

.photo {
    position: relative;

    display: block;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background: #e5e9ef;

    border-radius: 15px;
}

.photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.photo-open {
    position: absolute;

    right: 8px;
    bottom: 8px;

    padding: 7px 9px;

    background: rgba(255, 255, 255, 0.90);

    border-radius: 9px;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   PRIVATE / ERROR PAGE
   ========================================================= */

.state-page {
    min-height: 60vh;

    max-width: 680px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.state-page h1 {
    margin:
        8px
        0;

    font-size: clamp(
        42px,
        7vw,
        70px
    );
}

.state-code {
    color: var(--muted);

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

    letter-spacing: 0.13em;
}

.private-pin-form {
    width: min(
        360px,
        100%
    );

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .home-hero {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 340px;
    }

    .public-events {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .event-settings .form-grid.compact {
        grid-template-columns:
            1fr
            1fr;
    }

    .event-settings .form-grid.compact > button {
        width: 100%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body {
        padding-bottom:
            env(safe-area-inset-bottom);
    }


    /* PUBLIC NAV */

    .sitebar {
        min-height: 61px;

        padding:
            0
            14px;
    }

    .brand {
        font-size: 13px;
    }

    .main-nav > a:not(.nav-button) {
        display: none;
    }


    /* SHARED */

    .wrap {
        width: calc(100% - 24px);

        margin:
            25px auto
            70px;
    }


    /* HOME */

    .home-hero {
        width: 100%;

        min-height: auto;

        padding:
            50px
            17px
            40px;
    }

    .home-hero h1 {
        font-size: clamp(
            45px,
            14vw,
            65px
        );
    }

    .home-hero p {
        font-size: 15px;
    }

    .hero-actions {
        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }

    .hero-visual {
        min-height: 280px;
    }

    .home-section,
    .process-section {
        padding:
            55px
            14px;
    }

    .section-heading,
    .gallery-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .public-events,
    .steps {
        grid-template-columns: 1fr;
    }

    .site-footer {
        padding: 25px 16px;

        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }


    /* LOGIN */

    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 23px;

        border-radius: 22px;
    }

    .login-card h1 {
        font-size: 32px;
    }


    /* ADMIN TOP */

    .admin-topbar {
        height: 61px;

        padding:
            0
            12px;
    }

    .admin-main {
        width: calc(100% - 24px);

        margin:
            18px auto
            72px;
    }

    .admin-welcome {
        margin-bottom: 16px;

        align-items: center;
    }

    .admin-welcome h1 {
        font-size: 32px;
    }

    .admin-welcome p {
        font-size: 11px;
    }

    .admin-add {
        min-width: 86px;
    }


    /* ADMIN STATS */

    .admin-stats {
        margin-bottom: 17px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .admin-stats article {
        min-height: 66px;

        padding: 12px;

        gap: 9px;
    }

    .admin-stats i {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .admin-stats strong {
        font-size: 16px;
    }


    /* TOKEN */

    .admin-token {
        padding: 15px;
    }

    .admin-token button {
        width: 100%;
    }


    /* CREATE */

    .admin-create {
        padding: 15px;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
    }


    /* EVENT */

    .admin-event-card {
        padding: 15px;

        border-radius: 18px;
    }

    .admin-event-card .event-head {
        gap: 8px;
    }

    .admin-event-card h2 {
        font-size: 18px;
    }

    .admin-event-card .badge {
        padding:
            0
            7px;

        font-size: 7.5px;
    }

    .event-stats {
        gap: 4px;
    }

    .event-stats span {
        padding:
            5px
            7px;
    }

    .event-actions {
        gap: 5px;
    }

    .event-action {
        min-height: 42px !important;

        padding:
            0
            7px !important;
    }


    /* SETTINGS */

    .event-settings.open {
        padding: 11px;
    }

    .event-settings .form-grid.compact {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .event-settings .form-grid.compact > button {
        width: 100%;
    }

    .danger-actions {
        display: grid;

        gap: 6px;
    }

    .danger-actions form,
    .danger-actions button {
        width: 100%;
    }


    /* GALLERY */

    .gallery-tools {
        top: 68px;

        padding: 8px 9px;

        border-radius: 13px;
    }

    .gallery-tool-btn {
        min-height: 34px !important;

        padding:
            0
            8px !important;
    }

    .select-gallery,
    .gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 4px;
    }

    .select-photo,
    .photo {
        border-radius: 9px;
    }

    .check-ui {
        top: 6px;
        left: 6px;

        width: 25px;
        height: 25px;
    }

    .photo-actions {
        right: 6px;
        bottom: 6px;
    }

    .photo-actions a {
        width: 31px;
        height: 31px;

        border-radius: 9px;
    }

    .photo-open {
        display: none;
    }

    .gallery-wrap {
        padding-bottom: 76px;
    }


    /* DOWNLOAD */

    .download-bar {
        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );

        width: calc(100% - 20px);

        border-radius: 15px;
    }

    .download-bar button {
        min-height: 39px;

        padding:
            0
            12px;

        font-size: 10px;
    }


    /* PRIVATE */

    .private-pin-form {
        grid-template-columns: 1fr;
    }

    .private-pin-form button {
        width: 100%;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

    .admin-brand small {
        display: none;
    }

    .admin-stats article {
        padding: 10px;
    }

    .admin-stats i {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .admin-stats strong {
        font-size: 15px;
    }

    .event-actions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .event-action {
        flex-direction: column;

        gap: 2px;

        min-height: 48px !important;

        font-size: 8px !important;
    }

    .event-action i {
        font-size: 14px;
    }

    .gallery-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .gallery-tools > div:last-child {
        width: 100%;
    }

    .gallery-tool-btn {
        flex: 1;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}