/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-text: #1a2a4a;
    --color-text-muted: #5a6a8a;
    --color-border: #dce3ed;
    --color-primary: #ff0000;
    --color-primary-dark: #cc0000;
    --color-blue: #0060aa;
    --color-blue-light: #0080cc;
    --color-accent: #ff0000;
    --color-success: #0060aa;
    --color-gold: #d4af37;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', monospace;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 3px solid var(--color-primary);
}

.header-left {
    display: flex;
    flex-direction: column;
}

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

.logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.logo[src=""], .logo:not([src]), .logo.hidden {
    display: none;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.app-header h1 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.team-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-blue);
}

.year-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.squares-limit-info {
    color: var(--color-text-muted);
}

/* Squares Limit Banner */
.squares-limit-banner {
    background: var(--color-surface);
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.limit-text {
    font-size: 15px;
    color: var(--color-text);
}

.limit-text strong {
    color: var(--color-blue);
}

.limit-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.limit-control input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    text-align: center;
}

.limit-control.admin-only.visible {
    display: flex !important;
}

/* Quick Steps */
.quick-steps {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.step-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-number {
    width: 28px;
    height: 28px;
    background: var(--color-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.step-text {
    font-size: 14px;
    color: var(--color-text);
}

.step-text strong {
    color: var(--color-blue);
}

.admin-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.admin-link:hover {
    color: var(--color-text);
}

.logout-btn {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.logout-btn:hover {
    border-color: var(--color-text);
    color: var(--color-text);
    background: none;
    transform: none;
}

/* Stats Bar */
.fundraiser-stats {
    display: flex;
    gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 32px;
}

.stat-box {
    flex: 1;
    background: var(--color-surface);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-box label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-box input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-sans);
}

.stat-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Prize Breakdown */
.prize-breakdown {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.prize-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.prize-item {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.prize-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.prize-amount {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
}

.charity-highlight {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
    color: white;
    padding: 20px;
    border-radius: var(--radius-md);
    text-align: center;
}

.charity-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
    margin-bottom: 8px;
}

.charity-amount {
    display: block;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Prize Config (Admin) */
.prize-config {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.prize-config h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.config-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.prize-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.prize-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prize-input-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.prize-input-group input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    text-align: center;
}

.prize-input-group span {
    font-size: 13px;
    color: var(--color-text-muted);
}

.prize-total {
    margin-left: auto;
    font-size: 14px;
    color: var(--color-blue);
    font-weight: 500;
}

.prize-config.admin-only.visible {
    display: block !important;
}

/* Admin Controls */
.admin-only {
    display: none !important;
}

.admin-only.visible {
    display: flex !important;
}

.scores-section.admin-only.visible,
.admin-section.admin-only.visible {
    display: block !important;
}

.stat-box.admin-only.visible {
    display: flex !important;
}

/* Team Names */
.team-names {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.team-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-input label {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.team-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-sans);
}

.team-input button {
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.team-input button:hover {
    opacity: 0.85;
    transform: none;
}

/* Grid Tabs */
.grid-tabs-container {
    margin-bottom: 16px;
}

.grid-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.grid-tab {
    padding: 10px 20px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.grid-tab:hover {
    border-color: var(--color-blue-light);
    color: var(--color-text);
}

.grid-tab.active {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: white;
}

.grid-tab.add-grid-btn {
    border-style: dashed;
    color: var(--color-text-muted);
    font-size: 18px;
    padding: 10px 16px;
}

.grid-tab.add-grid-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
}

.grid-tab-wrapper {
    position: relative;
    display: inline-flex;
}

.grid-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--color-primary);
    color: white;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.grid-delete-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Grid */
.grid-wrapper {
    display: grid;
    grid-template-columns: auto 36px repeat(10, 1fr);
    grid-template-rows: auto 36px repeat(10, 1fr);
    gap: 2px;
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
}

.grid-corner {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.corner-logo {
    max-width: 100%;
    max-height: 100%;
    width: 70px;
    height: auto;
    object-fit: contain;
}

.team1-label {
    grid-column: 3 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
    padding-bottom: 8px;
}

.team2-label {
    grid-column: 1;
    grid-row: 3 / -1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
    padding-right: 8px;
}

.col-numbers {
    grid-column: 3 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
}

.row-numbers {
    grid-column: 2;
    grid-row: 3 / -1;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
}

.number-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

.grid {
    grid-column: 3 / -1;
    grid-row: 3 / -1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
}

.square {
    aspect-ratio: 1;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    padding: 2px;
    transition: all 0.15s ease;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.2;
    color: var(--color-text-muted);
    position: relative;
}

.square:hover {
    background: var(--color-border);
}

.square.available {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 500;
    opacity: 0.6;
}

.square.available:hover {
    opacity: 1;
    color: var(--color-blue);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
}

.square.available.locked {
    cursor: not-allowed;
}

.square.available.locked:hover {
    opacity: 0.6;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.square.claimed {
    background: var(--color-blue);
    color: white;
    cursor: default;
}

.square.claimed:hover {
    background: var(--color-blue);
}

.square.winner {
    background: var(--color-gold);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--color-gold), 0 0 12px rgba(212, 175, 55, 0.4);
    position: relative;
    overflow: hidden;
}

.square.winner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    opacity: 0.5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='%23705000'%3E%3Cpath d='m772.4 948.61c-0.89062-5.7188-5.8125-9.9375-11.578-9.9375h-321.61c-5.7656 0-10.688 4.2188-11.578 9.9375l-11.812 76.547c-1.2188 6.8438 4.5938 13.688 11.578 13.5h345.24c3.4219 0 6.6562-1.5 8.9062-4.0781s3.1875-6.0469 2.6719-9.4219zm-331.36 66.609 8.2031-53.109h301.55l8.2031 53.109z'/%3E%3Cpath d='m296.72 1164.7h606.56c6.4688 0 11.719-5.25 11.719-11.719v-28.406c0.14062-34.219-29.297-61.125-63.281-59.062l-21.656-142.4c-4.2656-26.062-26.391-40.125-51.938-37.969l-42.469-381.05c44.625-6.8906 84.797-18.047 115.17-28.125 34.641-11.484 57.703-51.422 50.344-87.188-62.344-306.98-255.42-418.18-551.95-318.74-34.641 11.484-57.703 51.422-50.344 87.188 17.062 82.734 61.594 228.32 170.44 302.48l-47.438 425.48c-25.547-2.1562-47.625 11.906-51.938 37.969l-21.656 142.4c-33.984-2.1094-63.422 24.844-63.281 59.062v28.406c0 6.4688 5.25 11.719 11.719 11.719zm581.44-771.19c1.6875 8.25 0.79688 17.062-2.0625 25.453l-32.203-18.609c8.8125-15.938 16.875-32.297 24.234-49.031 4.0781 15.281 7.4062 29.531 9.9844 42.234zm-20.625-77.812c-9.6094 25.172-21 49.453-33.938 72.891l-46.172-26.672c21-38.062 37.969-78.328 50.391-120.19 11.109 22.781 21.047 47.578 29.672 73.969zm-45.609 93.234c-13.828 22.922-29.203 44.953-46.172 65.859-26.906 5.5781-52.219 9.2812-78.844 11.25 30-31.688 56.391-66.562 78.844-103.78zm31.5 44.812c-12.328 4.0781-26.297 8.3438-41.578 12.422 10.828-14.719 20.953-29.906 30.375-45.516l32.203 18.609c-5.8125 6.6094-12.984 11.812-21 14.484zm-31.5-242.16c-12.375 48.375-30.75 95.156-54.797 138.66l-46.312-26.719c1.2188-2.625 2.3438-5.2969 3.3281-8.0156 2.2031-6.0938-0.89062-12.797-6.9844-15.047-6.0938-2.2031-12.797 0.89062-15.047 6.9844-0.51562 1.4062-1.1719 2.8125-1.7812 4.2188l-32.906-19.031c3.9375-8.6719 6.7969-17.719 8.4375-27 1.125-6.375-3.0938-12.469-9.4688-13.594s-12.469 3.0938-13.594 9.4688c-1.1719 6.6094-3.1875 13.031-5.8125 19.266l-65.766-37.969c4.0781-5.4375 8.6719-10.359 13.781-14.672 4.9688-4.1719 5.5781-11.578 1.4062-16.5-4.1719-4.9688-11.578-5.5781-16.5-1.4062-7.2188 6.0469-13.594 13.078-19.125 20.812l-32.906-19.031c5.5781-5.9531 8.2969-14.062 1.3125-20.156-9.3281-7.0781-16.734 0.375-21.75 8.3438l-43.219-24.984c25.594-42.516 56.859-81.75 92.484-116.62 116.3-1.875 208.6 51.375 265.18 152.95zm-490.08-59.109c-1.6875-8.25-0.79688-17.062 2.0625-25.453l31.922 18.422c-8.7188 15.844-16.781 32.109-24.094 48.703-4.0312-15.047-7.2656-29.156-9.8906-41.719zm20.438 77.297c9.6094-25.031 20.953-49.219 33.797-72.562l46.172 26.672c-20.953 37.969-37.875 78.141-50.344 119.91-11.062-22.828-21-47.578-29.625-74.016zm45.516-92.906c13.781-22.828 29.062-44.719 45.938-65.578 27.188-5.7188 53.578-9.5156 78.891-11.344-29.953 31.641-56.25 66.422-78.656 103.55l-46.172-26.672zm-31.219-44.625c12.188-4.0312 25.969-8.25 41.062-12.281-10.734 14.625-20.766 29.719-30.141 45.234l-31.922-18.422c5.8125-6.6094 12.984-11.812 21-14.484zm31.266 241.74c12.375-48.328 30.75-94.969 54.703-138.42l43.219 24.984c-1.2188 2.625-2.3438 5.2969-3.3281 8.0156-2.2031 6.0938 0.9375 12.797 6.9844 15.047 5.9062 2.2031 12.797-0.84375 15.047-6.9844 0.51562-1.4062 1.1719-2.8125 1.7812-4.2188l32.906 19.031c-3.9375 8.6719-6.7969 17.719-8.4375 27-1.3125 7.0781 4.3594 13.828 11.531 13.781 5.5781 0 10.5-3.9844 11.531-9.6562 1.1719-6.6094 3.1875-13.031 5.8125-19.266l65.766 37.969c-4.0781 5.4375-8.6719 10.359-13.781 14.672-4.9688 4.1719-5.5781 11.578-1.4062 16.5 4.1719 4.9688 11.578 5.5781 16.5 1.4062 7.2188-6.0469 13.594-13.078 19.125-20.812l32.906 19.031c-0.9375 1.2188-1.8281 2.4844-2.8125 3.6562-6.4688 7.2188-0.5625 19.547 9 19.219 6.75 0.32812 10.688-6.1875 14.25-11.062l46.312 26.719c-25.641 42.516-56.859 81.797-92.531 116.72-3 0-6 0-8.9531-0.09375-0.79688-0.09375-1.6406-0.09375-2.4844 0-54.094-1.4531-107.67-13.688-153.37-43.031-42.844-27.516-75.469-67.219-100.27-110.06zm103.55 139.31c17.344 9.375 35.625 16.969 54.562 22.688l-35.625 319.45c-0.70312 6.4219 3.9375 12.234 10.359 12.938 6.3281 0.75 12.234-3.8906 12.938-10.359l35.25-316.08c20.531 4.5469 42.094 7.2188 63.188 8.25l34.312 307.82c0.65625 6 5.7656 10.406 11.625 10.406 6.9375 0.046876 12.469-6.1406 11.672-13.031l-33.984-304.74c18.938-0.09375 38.25-1.3125 56.719-3.4688l42.141 377.95h-309.05l45.938-411.89zm-98.25 453.32c1.5938-10.453 10.406-18.047 21-18.047h371.76c10.594 0 19.406 7.5938 21 18.047l21.141 138.89h-456l21.141-138.89zm-84.703 197.95c0.09375-22.547 19.594-37.781 41.484-35.625 2.1562 2.0156 4.9688 3.1875 7.9219 3.1875h484.26c3 0 5.7656-1.1719 7.9219-3.1875 21.891-2.1562 41.391 13.078 41.484 35.625v16.688h-583.13v-16.688z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.square.selected {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 8px rgba(255, 0, 0, 0.3);
}

.square.selected:hover {
    background: var(--color-primary-dark);
}

/* Floating claim button container */
.claim-selected-container {
    position: fixed;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.claim-selected-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4);
}

.claim-selected-btn:hover {
    background: var(--color-primary-dark);
}

.claim-selected-btn .btn-icon {
    display: inline-block;
    margin-left: 8px;
    font-size: 18px;
    transition: transform 0.2s;
}

.claim-selected-btn:hover .btn-icon {
    transform: translateX(4px);
}

.claim-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.claim-info span {
    font-size: 12px;
    color: var(--color-text-muted);
}

#claimTotalAmount {
    font-weight: 600;
    color: var(--color-text);
}

/* Controls */
.controls {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

button {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: opacity 0.2s;
}

button:hover {
    opacity: 0.85;
    transform: none;
}

button:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.danger-btn {
    background: var(--color-accent);
}

.cancel-btn {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.cancel-btn:hover {
    background: var(--color-border);
    opacity: 1;
}

/* Sections */
h2 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.scores-section {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.quarters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.quarter {
    text-align: center;
}

.quarter h3 {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.quarter input {
    width: 64px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-sans);
    margin: 2px;
}

/* Winners */
.winners-section {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

#winnersList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

#winnersList:empty::after {
    content: 'No winners yet';
    color: var(--color-text-muted);
    font-size: 14px;
}

.winner-card {
    background: linear-gradient(135deg, var(--color-gold) 0%, #e6c547 100%);
    padding: 16px;
    border-radius: var(--radius-md);
    text-align: center;
}

.winner-card .quarter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.winner-card .winner-name {
    font-size: 18px;
    font-weight: 600;
    margin: 4px 0;
    color: var(--color-text);
}

.winner-card .score {
    font-size: 12px;
    opacity: 0.7;
}

/* Admin Section */
.admin-section {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--color-surface);
    padding: 28px;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-md);
}

.rules-modal.modal-content {
    padding: 24px;
}

.modal-content h2 {
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: 4px;
}

.modal-subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.modal-content p {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.modal-content .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.modal-content .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}

.modal-content .form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: var(--font-sans);
    transition: border-color 0.2s;
}

.modal-content .form-group input:focus {
    outline: none;
    border-color: var(--color-text);
}

.modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.modal-buttons button {
    flex: 1;
}

/* Confirmation Modal */
.confirm-details {
    background: var(--color-bg);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.confirm-details p {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-text);
}

.confirm-details p:last-child {
    margin-bottom: 0;
}

.confirm-details .total-owed {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 16px;
}

.confirm-details .total-owed span {
    color: var(--color-primary);
    font-weight: 600;
}

/* Step label */
.step-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-blue);
    margin-bottom: 4px;
}

/* Payment instructions */
.payment-instructions {
    background: var(--color-bg);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    text-align: center;
}

.payment-instructions p {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-text);
}

.payment-instructions .venmo-handle {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-blue);
    margin: 12px 0;
}

.payment-instructions .payment-deadline {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 0;
}

.payment-instructions .payment-deadline strong {
    color: var(--color-primary);
}

.payment-instructions .payment-note {
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Success Modal */
.success-icon {
    width: 60px;
    height: 60px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 16px;
}

.success-message {
    text-align: center;
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 16px;
}

.total-amount {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 18px;
}

.warning-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--color-accent);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Rules Modal */
.rules-modal {
    max-width: 560px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.rule-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rule-number {
    width: 24px;
    height: 24px;
    background: var(--color-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.rule-text {
    flex: 1;
}

.rule-text > strong {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 2px;
}

.rule-text p {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

.rules-btn {
    background: none;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.rules-btn:hover {
    background: var(--color-blue);
    color: white;
}

/* FAQ Styles */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.faq-item {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    padding: 14px 16px;
    transition: background 0.2s;
}

.faq-item:not(.open) .faq-question:hover {
    background: var(--color-border);
}

.faq-icon {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
    transition: transform 0.3s;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: none;
    padding: 0 16px 20px;
}

.faq-item.open .faq-answer {
    display: block;
}

.prizes-section {
    background: var(--color-bg);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.prizes-section h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin-bottom: 12px;
    text-align: center;
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.prize-item {
    background: var(--color-surface);
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--color-border);
}

.prize-label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.prize-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-blue);
}

.fundraiser-note {
    background: var(--color-primary);
    color: white;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
}

.fundraiser-note strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

/* Footer */
.site-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.footer-link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    padding: 0;
}

.footer-link:hover {
    color: var(--color-blue);
}

.footer-divider {
    color: var(--color-border);
    font-size: 13px;
}

.site-footer p {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Mobile show/hide utilities */
.show-mobile {
    display: none;
}

.prize-text {
    font-size: 12px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .show-mobile {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

    .container {
        padding: 24px 16px;
    }

    .app-header {
        flex-direction: column;
        gap: 16px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .team-title {
        font-size: 24px;
    }

    .quick-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 20px;
    }

    .step-item {
        width: 100%;
    }

    .fundraiser-stats {
        flex-direction: column;
        gap: 1px;
    }

    .grid-wrapper {
        padding: 16px;
        grid-template-columns: auto 28px repeat(10, 1fr);
        grid-template-rows: auto 28px repeat(10, 1fr);
    }

    .square {
        font-size: 7px;
    }

    .number-cell {
        font-size: 11px;
    }

    .team-names {
        flex-direction: column;
    }

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

    .modal-content {
        margin: 16px;
    }

    /* Rules modal mobile fixes */
    .rules-modal {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding: 20px;
    }

    .rules-modal h2 {
        font-size: 18px;
        padding-right: 30px;
    }

    .rules-modal .modal-subtitle {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .rules-list {
        gap: 10px;
        margin-bottom: 12px;
    }

    .rule-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .rule-text > strong {
        font-size: 13px;
    }

    .rule-text p {
        font-size: 12px;
    }

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

    .prizes-section {
        padding: 12px;
    }

    .prizes-section h3 {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .fundraiser-note {
        font-size: 12px;
        padding: 10px;
    }

    .modal-buttons {
        margin-top: 16px;
    }

    .modal-buttons button {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* FAQ modal mobile fixes */
    .faq-list {
        max-height: none;
        overflow-y: visible;
    }

    .faq-question {
        padding: 12px 14px;
        font-size: 13px;
    }

    .faq-answer {
        font-size: 12px;
        padding: 0 14px 16px;
    }
}

@media (max-width: 480px) {
    /* Hide logos and images on mobile */
    .corner-logo {
        display: none;
    }

    .team-logo {
        display: none;
    }

    /* Shrink team names */
    .team1-label, .team2-label {
        font-size: 6px;
        gap: 0;
        padding: 4px;
    }

    .grid-wrapper {
        grid-template-columns: 14px 18px repeat(10, 1fr);
        grid-template-rows: 14px 18px repeat(10, 1fr);
    }

    .number-cell {
        font-size: 9px;
    }

    .square {
        font-size: 7px;
    }

    .square.available {
        font-size: 8px;
    }
}

/* ==========================================
   Participant Management
   ========================================== */

.participants-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.participants-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.participants-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.participants-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.stat-divider {
    color: var(--color-border);
}

.export-btn {
    background: var(--color-blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.export-btn:hover {
    background: var(--color-blue-light);
}

.participants-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.filter-btn.active {
    background: var(--color-blue);
    color: white;
    border-color: var(--color-blue);
}

.participants-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.participant-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.participant-row.paid {
    border-left: 3px solid #22c55e;
}

.participant-row.unpaid {
    border-left: 3px solid #ef4444;
}

.participant-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.participant-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-email {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-squares {
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
}

.participant-squares .amount {
    color: var(--color-text-muted);
}

.participant-status {
    min-width: 100px;
    text-align: center;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.paid {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.unpaid {
    background: #fef2f2;
    color: #dc2626;
}

.participant-actions button {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
}

.mark-paid-btn {
    background: #22c55e;
    color: white;
    border-color: #22c55e;
}

.mark-paid-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.mark-unpaid-btn {
    background: white;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.mark-unpaid-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
}

.loading-text, .empty-text, .error-text {
    text-align: center;
    padding: 24px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.error-text {
    color: #dc2626;
}

@media (max-width: 768px) {
    .participants-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .participants-stats {
        justify-content: center;
    }

    .participant-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .participant-status {
        text-align: left;
    }

    .participant-actions {
        margin-top: 4px;
    }
}

/* ==========================================
   Admin Accordion
   ========================================== */

.hide-for-admin.hidden {
    display: none !important;
}

.admin-accordion {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    transition: background 0.2s;
}

.accordion-section:not(.open) .accordion-header:hover {
    background: var(--color-bg);
}

.accordion-icon {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-muted);
    transition: transform 0.3s;
}

.accordion-section.open .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 20px;
}

.accordion-section.open .accordion-content {
    max-height: 1000px;
    padding: 0 20px 20px;
}

/* Team Administration */
.section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin: 24px 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.team-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.team-admin-item {
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.team-admin-item h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.logo-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.logo-preview {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.logo-preview[src=""],
.logo-preview:not([src]) {
    display: none;
}

/* Admin Grid Controls */
.admin-grid-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.control-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.input-row button {
    padding: 8px 16px;
    background: var(--color-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.input-row button:hover {
    background: var(--color-blue-light);
}

.admin-stats-row {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.admin-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-buttons button {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.admin-buttons button:hover {
    background: var(--color-bg);
}

.admin-buttons .danger-btn {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

.admin-buttons .danger-btn:hover {
    background: #b91c1c;
}

/* Controls inside accordion */
.accordion-content .controls {
    display: flex;
    gap: 12px;
    margin-top: 0;
}

.accordion-content .controls button {
    padding: 10px 20px;
}

/* Quarters inside accordion */
.accordion-content .quarters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Winners toggle */
.winners-toggle {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.toggle-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 4px 0 0 28px;
}

@media (max-width: 768px) {
    .team-admin-grid {
        grid-template-columns: 1fr;
    }

    .accordion-content .quarters {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Team logos on grid */
.team-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 4px;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Rotate logo in team2 label 90 degrees counter-clockwise */
.team2-label .team-logo {
    transform: rotate(90deg);
}

.team1-label, .team2-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@media (max-width: 480px) {
    .team1-label, .team2-label {
        font-size: 5px;
        gap: 0;
        padding: 4px;
        text-shadow: none;
    }
}

.col-numbers, .row-numbers {
    border-radius: 4px;
}

.col-numbers .number-cell,
.row-numbers .number-cell {
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Color picker styling */
.color-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

input[type="color"] {
    width: 50px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}