@font-face {
  font-family: "KoPubSiteDotum";
  src: url("/fonts/KoPubDotum-Light.woff2") format("woff2"), local("KoPubDotum Light"), local("KoPub돋움체 Light");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "KoPubSiteDotum";
  src: url("/fonts/KoPubDotum-Medium.woff2") format("woff2"), local("KoPubDotum Medium"), local("KoPub돋움체 Medium");
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "KoPubSiteDotum";
  src: url("/fonts/KoPubDotum-Bold.woff2") format("woff2"), local("KoPubDotum Bold"), local("KoPub돋움체 Bold");
  font-style: normal;
  font-weight: 700 900;
}

:root {
  color-scheme: light;
  --font-sans: "KoPubSiteDotum", "KoPubDotum Medium", "KoPub돋움체 Medium", "KoPubWorldDotum", "KoPubWorld돋움체", sans-serif;
  --paper: #f4f7f8;
  --paper-strong: #e5edf0;
  --ink: #102a33;
  --muted: #51656d;
  --line: #c7d2d7;
  --green: #0d5f69;
  --green-soft: #d9ecef;
  --orange: #176b87;
  --red: #9b3851;
  --shadow: 0 24px 70px rgb(16 42 51 / 16%);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }
body { margin: 0; min-width: 320px; }
button, input, select, textarea, code, pre, kbd, samp { font-family: var(--font-sans); }
button, input, select { font-size: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgb(23 107 135 / 45%); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.topbar { min-height: 76px; padding: 14px clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgb(244 247 248 / 94%); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--green); color: white; border-radius: 50% 50% 48% 44%; font-size: 20px; transform: rotate(-3deg); }
.brand strong { display: block; font-size: 19px; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.draft-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.draft-badge i, .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgb(23 107 135 / 14%); }
.button { min-height: 42px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; }
.button.primary { color: white; background: var(--green); border-color: var(--green); }
.button.secondary:hover { background: var(--ink); color: white; }
.button:disabled { cursor: wait; opacity: .5; }
.account-button { color: white; background: var(--ink); }

main { padding: 0 clamp(20px, 4vw, 64px) 64px; }
.hero { max-width: 1440px; margin: 0 auto; padding: clamp(58px, 8vw, 118px) 0 52px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 80px; align-items: end; }
.eyebrow { margin: 0 0 20px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 0; max-width: 900px; font-weight: 700; font-size: clamp(48px, 7.2vw, 104px); line-height: .95; letter-spacing: -.065em; }
h1 em { color: var(--green); font-weight: 400; }
.hero-copy { max-width: 670px; margin: 30px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-status { border-top: 1px solid var(--ink); }
.hero-status div { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.hero-status strong { font-size: 32px; font-weight: 700; }
.hero-status span { color: var(--muted); font-size: 12px; }

.workspace { max-width: 1440px; margin: 0 auto; }
.view-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--paper-strong); border-radius: 999px; }
.segmented button { min-width: 80px; padding: 9px 16px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 800; font-size: 13px; }
.segmented button.active { color: white; background: var(--green); }
.view-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.filters { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(210px, .35fr) minmax(190px, .3fr); border: 1px solid var(--ink); background: white; }
.filters label { min-height: 58px; display: flex; align-items: center; border-right: 1px solid var(--line); }
.filters label:last-child { border-right: 0; }
.filters input, .filters select { width: 100%; height: 56px; padding: 0 18px; border: 0; color: var(--ink); background: transparent; outline: 0; }
.filters select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 26px, calc(100% - 15px) 26px; background-size: 5px 5px; background-repeat: no-repeat; }
.search-field svg { width: 19px; margin-left: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.search-field input { padding-left: 10px; }
.result-line { display: flex; justify-content: space-between; align-items: center; padding: 20px 2px 12px; color: var(--muted); font-size: 12px; }
.result-line strong { color: var(--ink); }
.competition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.competition-card { min-height: 330px; padding: 24px; display: flex; flex-direction: column; background: rgb(255 255 255 / 38%); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s, transform .2s; }
.competition-card:hover { position: relative; z-index: 1; background: white; transform: translateY(-3px); box-shadow: var(--shadow); }
.card-top, .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-chip, .source-chip, .fit-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.mode-chip { color: var(--green); background: var(--green-soft); }
.source-chip { padding: 0; color: var(--orange); }
.competition-card h2 { margin: 30px 0 12px; font-size: 26px; font-weight: 700; line-height: 1.18; letter-spacing: -.035em; }
.card-summary { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.next-moment { margin-top: auto; padding: 20px 0 16px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--line); }
.next-moment strong { color: var(--ink); font-weight: 800; }
.card-bottom { padding-top: 16px; }
.fit-chip.available { color: var(--green); background: var(--green-soft); }
.fit-chip.unknown { color: #345f76; background: #dcebf2; }
.fit-chip.region-conflict, .fit-chip.time-conflict { color: var(--red); background: #f1dce3; }
.fit-chip.closed { color: var(--muted); background: #e1e8eb; }
.card-bottom button { padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 800; }
.card-bottom button b { color: var(--orange); font-size: 16px; margin-left: 4px; }
.empty { padding: 100px 20px; display: grid; place-items: center; gap: 8px; color: var(--muted); }
.empty strong { color: var(--ink); }

.calendar-head { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; margin: 26px 0 14px; }
.calendar-head h2 { margin: 0; text-align: center; font-size: 32px; font-weight: 700; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays { border: 1px solid var(--line); border-bottom: 0; }
.weekdays span { padding: 10px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 900; }
.calendar-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calendar-day { min-height: 140px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 30%); }
.calendar-day.outside { opacity: .36; }
.calendar-day.today { background: #eaf4f7; box-shadow: inset 0 0 0 2px var(--orange); }
.day-number { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.calendar-event { width: 100%; margin: 0 0 5px; padding: 6px 7px; border: 0; border-radius: 4px; text-align: left; color: var(--green); background: var(--green-soft); font-size: 9px; line-height: 1.25; }
.calendar-event.offline { color: #842e48; background: #f1dce3; }
.calendar-event.deadline { color: #3e4e8c; background: #e3e6f6; }

.scrim { position: fixed; inset: 0; z-index: 50; background: rgb(16 27 23 / 45%); backdrop-filter: blur(4px); }
.drawer { position: absolute; top: 0; right: 0; width: min(680px, 94vw); height: 100%; overflow-y: auto; padding: 52px clamp(24px, 5vw, 56px); background: var(--paper); box-shadow: var(--shadow); animation: slide-in .22s ease-out; }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.drawer-close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 25px; line-height: 1; }
.drawer h2 { margin: 0; font-size: clamp(36px, 6vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; }
.drawer-intro { margin: 22px 0 36px; color: var(--muted); line-height: 1.75; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.detail-section { padding: 26px 0; border-top: 1px solid var(--line); }
.detail-section h3, .settings-section h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: .05em; }
.detail-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.detail-list li { padding-left: 16px; position: relative; color: var(--muted); font-size: 13px; line-height: 1.6; }
.detail-list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.source-link { display: inline-flex; margin-top: 20px; color: white; background: var(--green); padding: 13px 18px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 800; }
.settings-section { padding: 28px 0; border-top: 1px solid var(--line); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; }
.section-title span, .grid-help { color: var(--muted); font-size: 11px; }
.region-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.region-button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: transparent; font-size: 12px; }
.region-button.active { color: white; background: var(--green); border-color: var(--green); }
.availability-wrap { overflow-x: auto; padding-bottom: 8px; }
.availability-hours { display: grid; grid-template-columns: 52px repeat(24, 22px); width: max-content; margin-bottom: 5px; color: var(--muted); font-size: 8px; text-align: center; }
.availability-grid { display: grid; grid-template-columns: 52px repeat(24, 22px); gap: 3px 0; width: max-content; user-select: none; }
.availability-label { padding-right: 8px; align-self: center; text-align: right; color: var(--muted); font-size: 10px; }
.availability-cell { width: 20px; height: 22px; margin-right: 2px; border: 0; border-radius: 3px; background: #d7e0e3; }
.availability-cell.active { background: var(--green); }
.settings-actions { position: sticky; bottom: -52px; display: flex; justify-content: flex-end; gap: 10px; padding: 20px 0; background: linear-gradient(transparent, var(--paper) 24%); }
.settings-drawer { overflow-x: hidden; }
.notification-setting { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.notification-setting h3 { margin-bottom: 5px; }
.notification-setting select { min-width: 110px; padding: 10px 30px 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button.selected { border-color: var(--green); color: var(--green); background: var(--green-soft); }

.auth-drawer { width: min(520px, 94vw); }
.stack-form { display: grid; gap: 16px; }
.stack-form label, .inline-team-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.stack-form input, .inline-team-form input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; }
.form-error { min-height: 20px; margin: 0; color: var(--red); font-size: 12px; line-height: 1.5; }
.text-button { padding: 8px 0; border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 900; }
.text-button.danger { margin-left: 12px; color: var(--red); }
.auth-drawer .text-button { margin-top: 20px; }
.account-summary { display: flex; justify-content: space-between; margin-bottom: 28px; padding: 18px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.account-summary strong { color: var(--green); }

.team-drawer { width: min(1180px, 98vw); }
.team-drawer h2 { max-width: 900px; }
.team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.team-card { padding: 20px; border: 1px solid var(--line); background: rgb(255 255 255 / 42%); }
.team-card > div { display: flex; flex-wrap: wrap; gap: 7px; }
.team-card h3 { margin: 22px 0 8px; font-size: 23px; }
.team-card p, .member-line { color: var(--muted); font-size: 12px; }
.team-card .button { margin-top: 10px; }
.workspace-panel { padding: 22px; border: 1px solid var(--line); background: rgb(255 255 255 / 42%); }
.workspace-panel h3 { margin: 0 0 16px; font-size: 13px; }
.inline-team-form { display: grid; grid-template-columns: minmax(220px, 1fr) 110px 110px auto; gap: 10px; align-items: end; }
.team-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.team-status span { padding: 7px 11px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 900; }
.back-button { margin-bottom: 24px; }
.team-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; margin-top: 26px; }
.workspace-side { display: grid; gap: 14px; align-content: start; }
.chat-panel { display: flex; min-height: 620px; flex-direction: column; }
.chat-log { flex: 1; max-height: 570px; overflow-y: auto; padding: 4px 8px 18px 0; }
.chat-message { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--line); }
.chat-message strong { font-size: 11px; }
.chat-message p { grid-column: 1 / -1; margin: 6px 0 0; white-space: pre-wrap; color: var(--muted); font-size: 13px; line-height: 1.55; }
.chat-message time { color: var(--muted); font-size: 9px; }
.chat-message.system { opacity: .68; }
.chat-panel form, .compact-form { display: grid; gap: 8px; margin-top: 14px; }
textarea { width: 100%; min-height: 86px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; font: inherit; font-size: 12px; line-height: 1.5; }
.chat-panel form .button, .compact-form .button { justify-self: end; }
.workspace-items { display: grid; gap: 8px; }
.workspace-item { padding: 12px; border-left: 3px solid var(--orange); background: white; }
.workspace-item p { margin: 0 0 7px; white-space: pre-wrap; color: var(--muted); font-size: 12px; line-height: 1.5; }
.workspace-item small { color: var(--ink); font-size: 9px; font-weight: 800; }
.empty-inline, .loading-line { padding: 22px 0; color: var(--muted); font-size: 12px; }
.codex-run-banner { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; color: white; background: var(--green); }
.codex-run-banner span { font-size: 11px; opacity: .8; }
.run-context-panel { margin-top: 12px; border: 1px solid var(--line); background: #f7fafb; }
.run-context-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; }
.run-context-panel > summary span { display: grid; gap: 3px; }
.run-context-panel > summary small { color: var(--muted); font-size: 10px; font-weight: 400; }
.run-context-panel > summary code { font-size: 10px; }
.context-boundary { margin: 0; padding: 13px 16px; border-block: 1px solid var(--line); color: var(--orange); font-size: 11px; line-height: 1.55; }
.context-fingerprint { display: grid; gap: 8px; margin: 0; padding: 14px 16px 0; }
.context-fingerprint div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.context-fingerprint dt { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.context-fingerprint dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 11px; }
.run-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.run-context-grid section { padding: 12px; border: 1px solid var(--line); background: white; }
.run-context-grid section.authoritative { border-top: 3px solid var(--green); }
.run-context-panel h4 { margin: 0 0 8px; font-size: 12px; }
.run-context-panel ul, .run-context-panel ol { display: grid; gap: 8px; margin: 0; padding-left: 18px; font-size: 11px; line-height: 1.45; }
.run-context-panel li small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.context-links { margin-top: 12px !important; }
.context-links a { overflow-wrap: anywhere; }
.context-conversation { margin: 0 16px 16px; padding: 14px; border: 1px solid var(--line); background: white; }
.context-conversation li div { display: flex; justify-content: space-between; gap: 12px; }
.context-conversation time { color: var(--muted); font-size: 9px; }
.context-conversation p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.codex-stream-panel { margin-top: 12px; padding: 18px; color: #dfece5; background: #101915; border: 1px solid #2d453a; }
.codex-stream-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.codex-stream-head h3 { margin: 0; color: white; font-size: 13px; }
.codex-stream-head span { color: #8fb7a4; font-size: 10px; }
.codex-stream-log { height: min(420px, 48vh); overflow: auto; border-block: 1px solid #2d453a; }
.codex-event { padding: 10px 0; border-bottom: 1px solid #263930; }
.codex-event strong { display: block; margin-bottom: 5px; color: #79d5c8; font-size: 10px; font-weight: 700; }
.codex-event pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd9d2; font-size: 11px; line-height: 1.55; }
.codex-event.error strong { color: #ff9d83; }
.codex-steer-form { display: grid; gap: 8px; margin-top: 14px; }
.codex-steer-form textarea { color: #e5eee9; border-color: #3d5c4d; background: #17231e; }
.codex-steer-form > div { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.codex-steer-form .button.secondary { color: white; border-color: #8fb7a4; }
.build-panel .button { width: 100%; margin-top: 12px; }
.artifact-panel { margin-top: 14px; }
.artifact-title, .artifact-card-head, .artifact-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.artifact-title h3 { margin: 3px 0 18px; font-size: 25px; }
.artifact-title > span { color: var(--muted); font-size: 11px; font-weight: 900; }
.artifact-list { display: grid; gap: 12px; }
.artifact-card { padding: 16px; border: 1px solid var(--line); background: white; }
.artifact-card-head > div, .artifact-card li > span:first-child { display: grid; gap: 4px; min-width: 0; }
.artifact-card small { color: var(--muted); font-size: 9px; }
.artifact-card ul { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.artifact-card li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.artifact-card li strong { overflow-wrap: anywhere; font-size: 11px; font-weight: 700; }
.artifact-card li > span:last-child { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.artifact-card a.text-button { text-decoration: none; }
.artifact-excluded { margin: 10px 0 0; color: var(--orange); font-size: 10px; }
.artifact-preview { margin-top: 14px; padding: 18px; border: 1px solid var(--line); background: #f6f9fa; }
.artifact-preview-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#artifact-preview-body { max-height: 70vh; overflow: auto; padding: 18px 4px 4px; }
#artifact-preview-body h1, #artifact-preview-body h2, #artifact-preview-body h3, #artifact-preview-body h4 { margin: 20px 0 9px; }
#artifact-preview-body p, #artifact-preview-body li { color: var(--ink); font-size: 13px; line-height: 1.7; }
#artifact-preview-body img, #artifact-preview-body iframe { display: block; width: 100%; min-height: 480px; border: 0; object-fit: contain; }
.artifact-code { margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; color: #dfece5; background: #101915; font-size: 11px; line-height: 1.6; }
.feedback-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.feedback-form label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.preview-panel { margin-top: 14px; }
.preview-list { display: grid; gap: 12px; margin-top: 16px; }
.preview-card { min-width: 0; padding: 18px; border: 1px solid var(--line); background: white; }
.preview-card.status-ready { border-color: var(--green); box-shadow: inset 4px 0 var(--green); }
.preview-card.status-failed { border-color: var(--red); box-shadow: inset 4px 0 var(--red); }
.preview-card code { overflow-wrap: anywhere; font-size: 9px; }
.preview-expiry { margin: 13px 0; color: var(--muted); font-size: 10px; }
.runtime-frame-wrap { margin-top: 15px; padding: 8px; border: 1px solid #263930; background: #101915; }
.runtime-frame-wrap iframe { display: block; width: 100%; height: min(680px, 68vh); border: 0; background: white; }
.preview-create-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.preview-create-form label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.preview-create-form select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; }
.submission-panel { margin-top: 14px; }
.submission-list { display: grid; gap: 12px; margin-top: 16px; }
.external-auth-section { margin-top: 18px; padding: 18px; border: 1px solid var(--line); background: #f3f8f9; }
.external-auth-section h4 { margin: 0 0 12px; font-size: 12px; }
.external-auth-list { display: grid; gap: 10px; }
.external-auth-card { min-width: 0; padding: 14px; border: 1px solid var(--line); background: white; }
.external-auth-card.status-ready { border-color: var(--green); box-shadow: inset 4px 0 var(--green); }
.external-auth-card.status-awaiting_user { border-color: var(--orange); box-shadow: inset 4px 0 var(--orange); }
.external-auth-card.status-failed, .external-auth-card.status-expired { border-color: var(--red); box-shadow: inset 4px 0 var(--red); }
.external-auth-create { margin-top: 14px; }
.external-auth-browser { margin-top: 14px; padding: 9px; border: 1px solid #263930; background: #101915; }
.external-auth-browser canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #fff; outline: 2px solid transparent; cursor: default; }
.external-auth-browser canvas:focus-visible { outline-color: var(--orange); }
.external-auth-browser > p { margin: 8px 0 0; color: #d7e2db; font-size: 10px; line-height: 1.5; }
.submission-card { padding: 18px; border: 1px solid var(--line); background: white; }
.submission-card.status-awaiting_confirmation { border-color: var(--orange); box-shadow: inset 4px 0 var(--orange); }
.submission-card.status-completed { border-color: var(--green); box-shadow: inset 4px 0 var(--green); }
.submission-card.status-verification_required, .submission-card.status-failed { border-color: var(--red); box-shadow: inset 4px 0 var(--red); }
.submission-locks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0; }
.submission-locks div { display: grid; gap: 4px; }
.submission-locks dt { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.submission-locks dd { margin: 0; font-size: 10px; }
.submission-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.submission-evidence { min-width: 0; margin: 0; border: 1px solid var(--line); background: #eef3f5; }
.submission-evidence img { display: block; width: 100%; max-height: 440px; object-fit: contain; background: white; }
.submission-evidence figcaption { padding: 9px; color: var(--muted); font-size: 9px; }
.submission-result { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.submission-result a { color: var(--green); }
.preparation-section { background: #f3f8f9; }
.preparation-facts, .preparation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preparation-facts > div, .preparation-grid > div { padding: 14px; border: 1px solid var(--line); background: rgb(255 255 255 / 72%); }
.preparation-section h4 { margin: 0 0 8px; font-size: 13px; }
.preparation-notes { display: grid; gap: 6px; margin: 12px 0; padding: 14px; border-left: 3px solid var(--orange); background: white; white-space: pre-wrap; }
.research-link-list a { overflow-wrap: anywhere; }
.preparation-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.preparation-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.preparation-form label small { font-weight: 400; line-height: 1.5; }
.preparation-form input, .preparation-form select, .preparation-form textarea { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; font: inherit; font-weight: 400; }
.preparation-form textarea { min-height: 92px; resize: vertical; }
.preparation-form button { justify-self: end; }
.submission-confirm-form { margin-top: 18px; padding: 16px; border: 1px solid var(--orange); background: #f1f7fa; }
.submission-create { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.submission-create summary { color: var(--green); cursor: pointer; font-size: 12px; font-weight: 900; }
.submission-confirm-form label, .submission-create label, .external-auth-create label, .external-account-answer label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.submission-confirm-form input, .submission-create input, .submission-create select, .external-auth-create input, .external-auth-create select, .external-account-answer input { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; }
.external-account-conversation { margin-top: 9px; padding: 9px; border: 1px solid #6f86a5; background: #edf3ff; color: #172438; }
.external-account-conversation .grid-help { color: #33445e; }
.account-chat-bubble { margin-bottom: 8px; padding: 8px 10px; border: 1px solid #8ca8ce; background: #dce9fb; }
.account-chat-bubble.user { margin-left: 22px; border-color: #557cb3; background: #cfe1f8; }
.account-chat-bubble strong { display: block; margin-bottom: 4px; color: #174a9d; font-size: 10px; }
.account-chat-bubble p { margin: 0; font-size: 11px; line-height: 1.5; }
.danger-note { margin: 0 0 6px; color: var(--red); font-size: 11px; line-height: 1.55; }
.danger-note code, .submission-confirm-form code { color: var(--ink); }
.collection-drawer { width: min(1040px, 98vw); }
.collection-section { padding: 26px 0; border-top: 1px solid var(--line); }
.collection-source-form { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(260px, 1.5fr) 130px 130px auto; gap: 10px; align-items: end; margin-bottom: 18px; }
.collection-source-form label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 800; }
.collection-source-form input, .collection-source-form select { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; }
.collection-list { display: grid; gap: 10px; }
.collection-card { min-width: 0; padding: 17px; border: 1px solid var(--line); background: rgb(255 255 255 / 58%); }
.collection-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.collection-card-head > div { display: grid; min-width: 0; gap: 4px; }
.collection-card-head strong { overflow-wrap: anywhere; }
.collection-card small, .collection-card a, .collection-card p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.collection-card > a { display: block; margin: 10px 0; overflow-wrap: anywhere; }
.collection-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: #e1e8eb; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.collection-state.completed, .collection-state.approved, .collection-state.pending { color: var(--green); background: var(--green-soft); }
.collection-state.failed, .collection-state.invalid, .collection-error { color: var(--red); }
.collection-result { padding: 8px 10px; border-left: 3px solid var(--green); background: #edf7f2; }
.collection-state.duplicate { color: #4b4f88; background: #e5e6f4; }
.collection-card dl { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; }
.collection-card dl div { display: grid; gap: 3px; }
.collection-card dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.collection-card dd { margin: 0; font-size: 10px; }
.collection-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.collection-actions .text-button.danger { margin-left: 0; }
.collection-findings, .collection-evidence { margin: 12px 0; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.collection-evidence blockquote { margin: 4px 0 10px; padding-left: 10px; border-left: 2px solid var(--orange); white-space: pre-wrap; }
.candidate-card details summary { color: var(--green); cursor: pointer; font-size: 10px; font-weight: 800; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-status { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero-status div { display: grid; gap: 5px; }
  .competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .search-field { grid-column: 1 / -1; border-bottom: 1px solid var(--line); border-right: 0; }
  .team-workspace-grid { grid-template-columns: 1fr; }
  .chat-panel { min-height: 480px; }
}

@media (max-width: 640px) {
  .topbar { padding: 11px 16px; }
  .draft-badge { display: none; }
  .button { min-height: 38px; padding: 0 13px; font-size: 12px; }
  main { padding: 0 14px 40px; }
  .hero { padding: 52px 4px 36px; }
  h1 { font-size: 49px; }
  .hero-copy { font-size: 14px; }
  .hero-status { grid-template-columns: 1fr; }
  .hero-status div { display: flex; }
  .view-note { display: none; }
  .filters { display: block; }
  .filters label { border-right: 0; border-bottom: 1px solid var(--line); }
  .filters label:last-child { border-bottom: 0; }
  .competition-grid { grid-template-columns: 1fr; }
  .competition-card { min-height: 300px; }
  .weekdays span { padding: 7px 2px; }
  .calendar-day { min-height: 96px; padding: 5px; }
  .calendar-event { padding: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer { width: 100%; padding: 50px 20px; }
  .top-actions { gap: 5px; }
  .top-actions .button { padding: 0 10px; }
  .notification-setting { align-items: flex-start; }
  .team-list { grid-template-columns: 1fr; }
  .inline-team-form { grid-template-columns: 1fr 1fr; }
  .inline-team-form label:first-child, .inline-team-form .button { grid-column: 1 / -1; }
  .codex-run-banner { display: grid; }
  .run-context-grid { grid-template-columns: 1fr; }
  .run-context-panel > summary { align-items: flex-start; }
  .context-fingerprint div { grid-template-columns: 1fr; }
  .artifact-title, .artifact-card-head, .artifact-card li { align-items: stretch; flex-direction: column; }
  .artifact-card-head .button { width: 100%; }
  .artifact-card li > span:last-child { justify-content: flex-end; }
  .runtime-frame-wrap { margin-inline: -10px; padding: 4px; }
  .runtime-frame-wrap iframe { height: 56vh; min-height: 360px; }
  .submission-evidence-grid { grid-template-columns: 1fr; }
  .preparation-facts, .preparation-grid { grid-template-columns: 1fr; }
  .preparation-form button { width: 100%; justify-content: center; }
  #artifact-preview-body img, #artifact-preview-body iframe { min-height: 340px; }
  .settings-actions { position: sticky; bottom: -1px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 100%; padding: 14px 0; background: var(--paper); box-shadow: 0 -14px 24px var(--paper); }
  .settings-actions .button { width: 100%; min-width: 0; padding-inline: 8px; }
  .collection-source-form { grid-template-columns: 1fr 1fr; }
  .collection-source-form label:nth-child(-n+2), .collection-source-form .button { grid-column: 1 / -1; }
  .collection-card-head { align-items: stretch; flex-direction: column; }
}

/* LUNA/96 skin — Windows XP Explorer structure with a cool, non-yellow palette. */
:root {
  --xp-blue-0: #5ba9ff;
  --xp-blue-1: #2d7af1;
  --xp-blue-2: #0755d7;
  --xp-blue-3: #003bad;
  --xp-blue-4: #002d8d;
  --xp-green-0: #63bd48;
  --xp-green-1: #349321;
  --xp-window: #e9edf3;
  --xp-panel: #dce6fa;
  --xp-border-light: #ffffff;
  --xp-border-mid: #aab3c2;
  --xp-border-dark: #657287;
  --xp-selection: #316ac5;
  --xp-link: #000080;
  --paper: #e9edf3;
  --paper-strong: #d7dfeb;
  --ink: #071729;
  --muted: #4d5d73;
  --line: #aab3c2;
  --green: #0755d7;
  --green-soft: #dce8fb;
  --orange: #315fa9;
  --red: #a52642;
  --shadow: 4px 5px 18px rgb(0 31 91 / 38%);
}

html { background: #378fd5; font-size: 12px; }
body.xp-desktop { min-width: 320px; min-height: 480px; overflow: hidden; background: #378fd5; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.skip-link { position: fixed; z-index: 999; left: 8px; top: -50px; padding: 6px 10px; color: #000; border: 1px solid #000; background: #edf3ff; }
.skip-link:focus { top: 8px; }

.xp-wallpaper { position: fixed; inset: 0 0 34px; overflow: hidden; background: linear-gradient(#2d91dd 0%, #75c1ec 57%, #9dd6ed 58%, #3188ad 100%); }
.xp-wallpaper::before, .xp-wallpaper::after { content: ""; position: absolute; bottom: -21%; border-radius: 52% 52% 0 0 / 72% 72% 0 0; }
.xp-wallpaper::before { left: -8%; width: 66%; height: 48%; transform: rotate(5deg); background: linear-gradient(135deg, #4d9ab7, #1b678e); box-shadow: inset -50px 50px 70px rgb(16 71 104 / 22%); }
.xp-wallpaper::after { right: -13%; width: 78%; height: 52%; transform: rotate(-3deg); background: linear-gradient(145deg, #70b5c5, #287798 54%, #185d80); }
.xp-wallpaper i { position: absolute; width: 120px; height: 18px; border-radius: 50%; background: rgb(255 255 255 / 88%); box-shadow: 0 7px 12px rgb(25 104 159 / 12%); }
.xp-wallpaper i::before, .xp-wallpaper i::after { content: ""; position: absolute; bottom: 2px; border-radius: 50%; background: inherit; }
.xp-wallpaper i::before { left: 24px; width: 46px; height: 40px; }
.xp-wallpaper i::after { left: 55px; width: 60px; height: 31px; }
.xp-wallpaper i:nth-child(1) { top: 10%; left: 20%; }
.xp-wallpaper i:nth-child(2) { top: 18%; right: 15%; transform: scale(.68); }
.xp-wallpaper i:nth-child(3) { top: 35%; left: 5%; transform: scale(.48); opacity: .74; }

.xp-shortcuts { position: fixed; z-index: 2; top: 18px; left: 9px; display: grid; gap: 13px; width: 78px; color: #fff; text-align: center; text-shadow: 1px 1px 2px #17426c; }
.xp-shortcuts > span { display: grid; justify-items: center; gap: 4px; font-size: 11px; line-height: 1.25; }
.xp-shortcuts i { position: relative; display: block; width: 42px; height: 38px; filter: drop-shadow(1px 2px 1px rgb(0 45 95 / 58%)); }
.shortcut-computer::before { content: ""; position: absolute; inset: 2px 3px 10px; border: 3px solid #eef3fb; background: linear-gradient(135deg, #89d9ed, #276fbb 72%); box-shadow: inset 0 0 0 2px #4b5364, 3px 4px 0 #7e8796; }
.shortcut-computer::after { content: ""; position: absolute; left: 11px; bottom: 1px; width: 25px; height: 8px; border: 1px solid #4d5969; background: #cfd5df; }
.shortcut-calendar::before { content: "31"; position: absolute; inset: 1px 5px; display: grid; place-items: center; color: #174d9d; border: 2px solid #fff; background: linear-gradient(#2e72cf 0 10px, #f8fbff 10px); box-shadow: 2px 3px 0 #536178; font-size: 15px; font-weight: 900; }
.shortcut-team::before, .shortcut-team::after { content: ""; position: absolute; width: 17px; height: 25px; border: 2px solid #fff; border-radius: 50% 50% 35% 35%; background: #70a8e7; box-shadow: 2px 3px 0 #41547a; }
.shortcut-team::before { left: 5px; top: 6px; }
.shortcut-team::after { right: 4px; top: 2px; background: #3d83d8; }

.xp-window { position: fixed; z-index: 3; top: 22px; right: 20px; bottom: 42px; left: 100px; display: grid; grid-template-rows: 30px 24px 54px 29px minmax(0, 1fr) 24px; min-width: 0; overflow: hidden; border: 3px solid var(--xp-blue-2); border-radius: 9px 9px 2px 2px; background: var(--xp-window); box-shadow: var(--shadow), inset 0 0 0 1px var(--xp-blue-0); }
.topbar { position: static; z-index: auto; min-height: 0; padding: 3px 4px 3px 7px; color: #fff; border: 0; background: linear-gradient(#4f9cff 0%, #0b64e8 18%, #0755d7 62%, #003bad 100%); backdrop-filter: none; }
.brand { min-width: 0; gap: 6px; color: #fff; }
.brand-mark { width: 18px; height: 18px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 2px; background: linear-gradient(135deg, #eef7ff, #8ec9ff); color: #174d9d; box-shadow: 1px 1px 0 #00358f; transform: none; font-size: 11px; line-height: 1; }
.brand strong { overflow: hidden; font-size: 12px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; text-shadow: 1px 1px #00358f; }
.brand small { display: none; }
.window-controls { display: flex; align-items: center; gap: 3px; }
.window-controls i { width: 21px; height: 20px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #5aa9ff, #0956ce 70%); box-shadow: inset 1px 1px rgb(255 255 255 / 55%), 1px 1px #00358f; color: #fff; font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; }
.window-controls i:last-child { background: linear-gradient(135deg, #f28375, #c82e24 70%); }

.xp-menubar { display: flex; align-items: center; gap: 1px; min-width: 0; padding: 1px 5px; border-bottom: 1px solid var(--xp-border-mid); background: var(--xp-window); }
.xp-menubar span { padding: 3px 6px; white-space: nowrap; }
.xp-menubar span:first-letter { text-decoration: underline; }
.xp-toolbar { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 7px; border-top: 1px solid #fff; border-bottom: 1px solid var(--xp-border-mid); background: linear-gradient(#f7f9fc, #e4e8ef); }
.xp-tool { display: grid; grid-template-columns: 28px auto; align-items: center; min-width: 50px; color: #111; font-size: 10px; text-align: center; }
.xp-tool b { grid-row: 1; grid-column: 1; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #29629f; border-radius: 50%; background: linear-gradient(#86d4f1, #2b77bd); color: #fff; font-size: 19px; text-shadow: 1px 1px #194c83; }
.xp-tool:not(.disabled) b.tool-back { border-color: #2f851e; background: linear-gradient(#8ad85c, #3d9d25); }
.xp-tool.disabled { opacity: .4; }
.toolbar-separator { width: 1px; height: 38px; border-left: 1px solid var(--xp-border-mid); border-right: 1px solid #fff; }
.top-actions { flex: 1; justify-content: flex-end; gap: 6px; min-width: 0; }
.draft-badge { min-width: 0; margin-right: auto; color: #344154; font-size: 10px; white-space: nowrap; }
.draft-badge i, .pulse { background: #1c72d8; box-shadow: 0 0 0 2px #c4d9f6; }

.button { min-height: 27px; padding: 2px 11px; border: 1px solid #284c75; border-radius: 3px; background: linear-gradient(#fff, #e1e7ef); color: #0a1523; box-shadow: inset 1px 1px #fff, inset -1px -1px #9da9b8; font-size: 11px; font-weight: 500; }
.button:hover, .button.secondary:hover { color: #000; background: linear-gradient(#fff, #dce9fb); box-shadow: inset 0 0 0 2px #7ca7dc, inset 1px 1px #fff; }
.button:active { background: #d7dee8; box-shadow: inset 1px 1px #6a7585; }
.button.primary { color: #fff; border-color: #063da4; background: linear-gradient(#5d9ff0, #1764c8); box-shadow: inset 1px 1px rgb(255 255 255 / 55%); }
.button.account-button { color: #fff; border-color: #145c24; background: linear-gradient(#65bb4a, #328d20); }
.button.selected { color: #063b8f; border-color: #225fbd; background: #d9e8ff; }

.xp-addressbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border-top: 1px solid #fff; border-bottom: 1px solid var(--xp-border-mid); background: var(--xp-window); color: #444; }
.xp-addressbar > div { display: flex; align-items: center; gap: 5px; min-width: 0; height: 21px; padding: 1px 5px; overflow: hidden; border: 1px solid #7b8ca5; background: #fff; color: #111; white-space: nowrap; }
.xp-addressbar > div i { flex: 0 0 auto; width: 18px; height: 14px; border: 1px solid #215db1; background: linear-gradient(#73aef1 0 4px, #dceeff 4px); }
.xp-addressbar > div span { overflow: hidden; text-overflow: ellipsis; }
.xp-addressbar > div b { color: #5d6d82; }
.address-go { color: #173c6c; font-weight: 700; white-space: nowrap; }
.address-go::first-letter { color: #2f9b23; }

.xp-window > main { min-width: 0; min-height: 0; display: grid; grid-template-columns: 225px minmax(0, 1fr); padding: 0; overflow: hidden; background: #fff; }
.hero { display: block; min-width: 0; max-width: none; margin: 0; padding: 12px 9px; overflow-y: auto; border-right: 1px solid #5068b4; background: linear-gradient(90deg, #7080dc, #6674cb); }
.hero > div:first-child { padding: 12px; border: 1px solid #fff; border-radius: 6px 6px 2px 2px; background: #f0f4ff; box-shadow: 0 1px 1px rgb(0 38 110 / 20%); }
.eyebrow { margin: 0 0 8px; color: #174a9d; font-size: 9px; letter-spacing: .08em; }
h1 { max-width: none; margin: 0; color: #16469b; font-size: 21px; line-height: 1.14; letter-spacing: -.025em; }
h1 em { display: inline; color: #17469b; font-weight: 700; }
.hero-copy { margin: 12px 0 0; color: #27354b; font-size: 11px; line-height: 1.55; }
.hero-status { margin-top: 10px; padding: 5px 10px; border: 1px solid #fff; border-radius: 6px 6px 2px 2px; background: #edf3ff; }
.hero-status div { padding: 8px 1px; border-bottom-color: #b7c6e2; }
.hero-status strong { color: #174a9d; font-size: 19px; }
.hero-status span { color: #24334c; font-size: 10px; }

.workspace { width: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0; padding: 10px 12px 30px; overflow: auto; background: #fff; }
.view-row { min-height: 36px; margin: 0 0 8px; padding: 4px 6px; border-bottom: 1px solid #d3d9e3; }
.segmented { gap: 0; padding: 0; border: 1px solid #6980a4; border-radius: 2px; background: #e8edf5; }
.segmented button { min-width: 70px; padding: 5px 11px; border: 0; border-right: 1px solid #aab4c4; border-radius: 0; font-size: 10px; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { color: #fff; background: var(--xp-selection); }
.view-note { color: #536174; font-size: 9px; }
.filters { grid-template-columns: minmax(220px, 1fr) minmax(180px, .45fr) minmax(160px, .4fr); border: 1px solid #7d8da4; background: #f1f4f8; box-shadow: inset 1px 1px #fff; }
.filters label { min-height: 32px; border-right-color: #aab3c2; }
.filters input, .filters select { height: 31px; padding: 0 9px; color: #111; font-size: 10px; }
.filters select { background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px; background-size: 4px 4px; }
.search-field svg { width: 15px; margin-left: 9px; stroke-width: 2; }
.search-field input { padding-left: 7px; }
.result-line { padding: 9px 3px 6px; font-size: 10px; }
.competition-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 8px; padding: 8px; border: 1px solid #d2d8e1; background: #fff; }
.competition-card { position: relative; min-height: 205px; padding: 11px; border: 1px solid transparent; background: #fff; transition: none; }
.competition-card:hover { z-index: auto; border-color: #b3caec; background: #f1f6fd; box-shadow: none; transform: none; }
.competition-card:focus-within { color: #fff; border-color: #174a9b; background: var(--xp-selection); }
.card-top { min-height: 24px; padding-left: 28px; }
.card-top::before { content: ""; position: absolute; top: 8px; left: 10px; width: 24px; height: 18px; border: 1px solid #1d58a3; background: linear-gradient(#8abdf3 0 5px, #2e77c5 5px); box-shadow: inset 1px 1px #d9efff; clip-path: polygon(0 16%, 36% 16%, 45% 0, 78% 0, 83% 16%, 100% 16%, 100% 100%, 0 100%); }
.mode-chip, .source-chip, .fit-chip { min-height: 19px; padding: 1px 6px; border: 1px solid #9eb1cc; border-radius: 2px; font-size: 8px; letter-spacing: 0; }
.mode-chip { color: #174a9d; background: #e2edfd; }
.source-chip { border-color: transparent; color: #3c5f91; background: transparent; }
.competition-card h2 { margin: 14px 0 8px; color: #102d5c; font-size: 16px; line-height: 1.25; letter-spacing: -.02em; }
.card-summary { color: #46566c; font-size: 10px; line-height: 1.55; }
.next-moment { padding: 12px 0 9px; color: #617087; font-size: 9px; border-bottom-color: #d7dee8; }
.next-moment strong { color: #172438; }
.card-bottom { padding-top: 8px; }
.fit-chip.available { color: #174a9d; border-color: #87a8d4; background: #e4efff; }
.fit-chip.unknown { color: #384d78; border-color: #adb9d4; background: #e8ecf6; }
.fit-chip.region-conflict, .fit-chip.time-conflict { color: #8b1832; border-color: #cf9eaa; background: #f7e7ec; }
.fit-chip.closed { color: #566171; border-color: #b2bbc6; background: #e7ebf0; }
.card-bottom button { color: var(--xp-link); font-size: 10px; text-decoration: underline; }
.card-bottom button b { color: var(--xp-link); font-size: 11px; }
.empty { padding: 60px 20px; font-size: 11px; }

.calendar-head { margin: 12px 0 7px; }
.calendar-head h2 { color: #16469b; font-size: 20px; }
.icon-button { width: 28px; height: 25px; border-color: #6a7a91; border-radius: 2px; background: linear-gradient(#fff, #dfe6ef); }
.weekdays, .calendar-grid { border-color: #8797ac; }
.weekdays { background: #dfe9f8; }
.weekdays span { padding: 6px; color: #203650; font-size: 9px; }
.calendar-day { min-height: 104px; border-color: #c0c9d5; background: #fff; }
.calendar-day.today { background: #e7f0fd; box-shadow: inset 0 0 0 2px #316ac5; }
.day-number { font-size: 11px; }
.calendar-event { border: 1px solid #9bb5da; border-radius: 2px; color: #164a96; background: #e3edfb; }
.calendar-event.offline { color: #7c2140; border-color: #cea6b5; background: #f4e5eb; }
.calendar-event.deadline { color: #344c86; border-color: #aab6d6; background: #e8ebf7; }

.xp-statusbar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .4fr) minmax(220px, .7fr); align-items: center; padding: 2px 3px; border-top: 1px solid var(--xp-border-mid); background: var(--xp-window); color: #253247; font-size: 9px; }
.xp-statusbar span { min-width: 0; height: 18px; padding: 3px 6px; overflow: hidden; border: 1px solid #c3cbd7; box-shadow: inset 1px 1px #fff; text-overflow: ellipsis; white-space: nowrap; }
.xp-taskbar { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; height: 34px; display: flex; align-items: center; gap: 8px; padding-right: 8px; color: #fff; background: linear-gradient(#2582ef 0%, #0c57cc 20%, #0648bd 82%, #003b9a 100%); box-shadow: inset 0 1px #55a5ff; }
.xp-start { align-self: stretch; display: flex; align-items: center; gap: 7px; min-width: 102px; padding: 0 16px 0 10px; border-radius: 0 15px 15px 0; background: linear-gradient(#64bd4b, #338c22 70%, #256d19); box-shadow: inset 0 1px rgb(255 255 255 / 50%), 2px 0 4px rgb(0 44 118 / 40%); font-size: 17px; font-style: italic; text-shadow: 1px 1px #1d5b15; }
.xp-start > i { display: grid; grid-template-columns: repeat(2, 7px); gap: 1px; transform: skewY(-5deg); }
.xp-start > i b { width: 7px; height: 7px; background: #fff; }
.xp-task-active { width: min(260px, 36vw); height: 27px; display: flex; align-items: center; gap: 7px; padding: 0 10px; overflow: hidden; border: 1px solid #0c3f9f; border-radius: 2px; background: #1b61c7; box-shadow: inset 1px 1px rgb(255 255 255 / 20%); text-overflow: ellipsis; white-space: nowrap; }
.xp-task-active i { flex: 0 0 auto; width: 15px; height: 13px; border: 1px solid #fff; background: linear-gradient(#90c5fa 0 4px, #2f78c6 4px); }
.xp-tray { margin-left: auto; height: 31px; display: flex; align-items: center; padding: 0 10px; border-left: 1px solid #0a4aaf; background: #0b8bdc; box-shadow: inset 1px 0 rgb(255 255 255 / 25%); font-size: 10px; }
.xp-tray i { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #d9efff; box-shadow: 0 0 0 2px #2d78c1; }

.scrim { z-index: 100; background: rgb(0 29 83 / 42%); backdrop-filter: none; }
.drawer { top: 3%; right: auto; left: 50%; width: min(680px, calc(100vw - 28px)); height: auto; max-height: 94%; padding: 42px 14px 16px; overflow: auto; border: 3px solid var(--xp-blue-2); border-radius: 8px 8px 2px 2px; background: var(--xp-window); box-shadow: 5px 7px 24px rgb(0 27 81 / 50%), inset 0 0 0 1px #69a9ff; transform: translateX(-50%); animation: none; }
.drawer::before { content: "출전선"; position: absolute; top: 0; right: 0; left: 0; height: 30px; display: flex; align-items: center; padding: 0 8px; color: #fff; background: linear-gradient(#4f9cff, #0755d7 58%, #003bad); font-size: 11px; font-weight: 700; text-shadow: 1px 1px #00358f; }
.detail-drawer::before { content: "대회 상세 정보"; }
.settings-drawer::before { content: "내 참가 조건"; }
.auth-drawer::before { content: "출전선 사용자 계정"; }
.team-drawer::before { content: "팀 작업실"; }
.collection-drawer::before { content: "대회 자동 수집 검토"; }
.drawer-close { z-index: 2; top: 4px; right: 5px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 3px; color: #fff; background: linear-gradient(135deg, #f28375, #c82e24 70%); box-shadow: inset 1px 1px rgb(255 255 255 / 55%), 1px 1px #00358f; font-size: 17px; }
.drawer h2 { color: #173f85; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.drawer-intro { margin: 12px 0 20px; color: #47566b; font-size: 11px; line-height: 1.6; }
.detail-section, .settings-section, .collection-section { padding: 16px 0; border-top-color: #aab4c3; }
.workspace-panel, .team-card, .artifact-card, .preview-card, .submission-card, .external-auth-card, .collection-card, .preparation-facts > div, .preparation-grid > div { border-color: #9faabb; border-radius: 0; background: #fff; box-shadow: inset 1px 1px #fff; }
.workspace-panel { padding: 14px; background: #f5f7fa; }
.workspace-panel h3, .external-auth-section h4 { color: #174a9d; }
.team-status span, .mode-chip, .fit-chip, .collection-state { border-radius: 2px; }
.stack-form input, .inline-team-form input, textarea, .preparation-form input, .preparation-form select, .preparation-form textarea, .submission-confirm-form input, .submission-create input, .submission-create select, .external-auth-create input, .external-auth-create select, .external-account-answer input, .collection-source-form input, .collection-source-form select, .notification-setting select, .preview-create-form select { border-color: #73839b; border-radius: 0; background: #fff; box-shadow: inset 1px 1px 1px rgb(0 0 0 / 10%); }
.inline-team-form input[readonly] { color: #263a57; background: #e8edf5; cursor: not-allowed; }
.team-size-rule { margin: 8px 0 0; color: #33445e; }
.text-button { color: var(--xp-link); font-size: 10px; text-decoration: underline; }
.text-button.danger { color: #8f1833; }
.auth-drawer { width: min(520px, calc(100vw - 28px)); }
.team-drawer { width: min(1180px, calc(100vw - 20px)); }
.collection-drawer { width: min(1040px, calc(100vw - 20px)); }
.team-card h3 { color: #153b78; font-size: 18px; }
.codex-run-banner { border: 1px solid #063da4; background: linear-gradient(#478ee6, #1764c8); }
.codex-stream-panel, .artifact-code, .runtime-frame-wrap, .external-auth-browser { border-color: #41546d; background: #071524; }
.run-context-panel, .artifact-preview, .external-auth-section, .preparation-section { border-color: #9faabb; background: #edf2f9; }
.submission-confirm-form { border-color: #4c6f9f; background: #e8f0fb; }
.submission-create { border-top-color: #aab4c3; }
.submission-create summary, .candidate-card details summary { color: var(--xp-link); }
.submission-targets { display: grid; gap: 6px; margin: 0; padding: 8px; border: 1px solid #7f9db9; background: #f7faff; }
.submission-targets legend { padding: 0 4px; color: #123f79; }
.submission-target { display: flex; align-items: center; gap: 7px; min-height: 24px; }
.submission-target input {
  width: 13px;
  height: 13px;
  min-height: 13px;
  flex: 0 0 13px;
  margin: 0;
  padding: 0;
  appearance: auto;
  accent-color: #316ac5;
  box-shadow: none;
}
.submission-target-missing { margin: 0; padding-left: 22px; color: #596b80; }
.availability-cell { border: 1px solid #aab3c2; border-radius: 0; background: #dce3ec; }
.availability-cell.active { border-color: #174a9d; background: #3978c7; }
.region-grid { gap: 4px; }
.region-button { min-width: 54px; padding: 5px 9px; border-color: #74849b; border-radius: 2px; background: linear-gradient(#fff, #e1e7ef); box-shadow: inset 1px 1px #fff, inset -1px -1px #9da9b8; font-size: 10px; }
.region-button.active { color: #fff; border-color: #063da4; background: linear-gradient(#5d9ff0, #1764c8); box-shadow: inset 1px 1px rgb(255 255 255 / 45%); }
.settings-actions { background: linear-gradient(transparent, var(--xp-window) 24%); }

@media (max-width: 1100px) {
  .xp-window { left: 84px; }
  .competition-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .draft-badge { display: none; }
}

@media (max-width: 760px) {
  body.xp-desktop { overflow: auto; padding-bottom: 34px; background: #fff; }
  .xp-wallpaper, .xp-shortcuts { display: none; }
  .xp-window { position: relative; inset: auto; grid-template-rows: 30px 24px auto 29px auto 24px; width: 100%; min-height: calc(100vh - 34px); border-width: 0; border-radius: 0; box-shadow: none; }
  .window-controls i:nth-child(-n+2) { display: none; }
  .xp-menubar { overflow-x: auto; }
  .xp-menubar span { padding-inline: 5px; font-size: 10px; }
  .xp-toolbar { min-height: 50px; flex-wrap: wrap; gap: 4px; }
  .xp-tool { display: none; }
  .toolbar-separator { display: none; }
  .top-actions { width: 100%; }
  .top-actions .button { min-height: 28px; padding-inline: 8px; }
  .xp-addressbar { grid-template-columns: auto minmax(0, 1fr); }
  .address-go { display: none; }
  .xp-window > main { display: block; overflow: visible; }
  .hero { padding: 7px; overflow: visible; border-right: 0; border-bottom: 1px solid #5068b4; }
  .hero > div:first-child { padding: 9px; }
  .hero-copy { display: none; }
  .hero-status { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; padding: 3px 8px; }
  .hero-status div { display: grid; gap: 2px; padding: 5px; border-right: 1px solid #b7c6e2; border-bottom: 0; }
  .hero-status div:last-child { border-right: 0; }
  .hero-status strong { font-size: 16px; }
  .hero-status span { font-size: 8px; }
  h1 { font-size: 17px; }
  .workspace { overflow: visible; padding: 8px 7px 20px; }
  .view-row { margin-bottom: 6px; }
  .filters { display: block; }
  .filters label { border-right: 0; border-bottom: 1px solid #aab3c2; }
  .filters label:last-child { border-bottom: 0; }
  .competition-grid { grid-template-columns: 1fr; gap: 4px; padding: 4px; }
  .competition-card { min-height: 178px; }
  .calendar-day { min-height: 82px; }
  .xp-statusbar { grid-template-columns: 1fr; }
  .xp-statusbar span:nth-child(n+2) { display: none; }
  .xp-task-active { flex: 1; width: auto; }
  .xp-start { min-width: 80px; padding-inline: 8px 12px; font-size: 14px; }
  .xp-tray { display: none; }
  .drawer { top: 0; width: 100%; max-width: none; height: calc(100vh - 34px); max-height: none; padding: 40px 10px 16px; border-width: 0; border-radius: 0; transform: translateX(-50%); }
  .drawer::before { position: fixed; }
  .drawer-close { position: fixed; }
  .team-drawer, .collection-drawer, .auth-drawer { width: 100%; }
  .settings-actions { bottom: 0; background: var(--xp-window); box-shadow: 0 -6px 12px rgb(42 60 87 / 14%); }
}

/* LUNA/96 Explorer assembly v2 — adapted directly from the supplied template. */
:root {
  --xp-blue-0: #5ba9ff;
  --xp-blue-1: #2d7af1;
  --xp-blue-2: #0755d7;
  --xp-blue-3: #003bad;
  --xp-blue-4: #002d8d;
  --xp-window: #e9edf3;
  --xp-border-light: #ffffff;
  --xp-border-mid: #aab3c2;
  --xp-border-dark: #657287;
  --xp-selection: #316ac5;
  --xp-pane: #6677d0;
  --xp-link: #000080;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #000;
  background: #6bb9ed;
  font-family: var(--font-sans);
  font-size: 11px;
}

#ui-scale-root {
  position: relative;
  width: var(--ui-logical-width, 100vw);
  height: var(--ui-logical-height, 100vh);
  overflow: hidden;
  transform-origin: 0 0;
}

#ui-scale-root.is-ui-scaled { transform: scale(var(--ui-scale, 1)); }

[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 9999; top: -50px; left: 8px; padding: 6px 10px; color: #000; border: 1px solid #000; background: #edf3ff; }
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

.desktop { position: relative; width: 100%; height: 100%; min-width: 320px; min-height: 480px; overflow: hidden; background: #6bb9ed; user-select: none; }
.wallpaper { position: absolute; inset: 0 0 30px; overflow: hidden; background: linear-gradient(#3b9be8 0%, #79c9f2 46%, #b6e4f5 61%, #78ba31 61.2%, #4d9e1e 100%); }
.hill { position: absolute; display: block; transform-origin: 50% 100%; }
.hill-back { right: 44%; bottom: -12%; left: -8%; height: 57%; border-radius: 50% 55% 0 0 / 62% 58% 0 0; background: linear-gradient(112deg, #78bf3e 8%, #5cab2d 53%, #388d19 100%); transform: rotate(7deg); box-shadow: inset -50px 65px 85px rgb(24 110 20 / 20%); }
.hill-front { right: -12%; bottom: -28%; left: 21%; height: 68%; border-radius: 50% 0 0 0 / 72% 0 0 0; background: linear-gradient(156deg, #91cb42 0%, #5ba527 38%, #2e7913 100%); transform: rotate(-3deg); box-shadow: inset 30px 55px 70px rgb(194 230 104 / 15%); }
.cloud, .cloud::before, .cloud::after { position: absolute; display: block; border-radius: 50%; background: rgb(255 255 255 / 92%); filter: blur(.45px); }
.cloud { width: 120px; height: 20px; box-shadow: 0 7px 12px rgb(83 160 206 / 12%); }
.cloud::before, .cloud::after { content: ""; }
.cloud::before { bottom: 3px; left: 24px; width: 47px; height: 45px; }
.cloud::after { bottom: 1px; left: 55px; width: 62px; height: 34px; }
.cloud-a { top: 13%; left: 22%; transform: scale(.92); }
.cloud-b { top: 22%; right: 16%; opacity: .9; transform: scale(.62); }

.desktop-icons { position: absolute; z-index: 2; top: 13px; left: 10px; width: 78px; display: grid; gap: 8px; }
.desktop-icon { width: 76px; min-height: 78px; padding: 3px 1px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; border: 1px solid transparent; background: transparent; cursor: pointer; text-shadow: 1px 1px 2px #17426c; }
.desktop-icon:focus-visible { border-color: rgb(255 255 255 / 82%); outline: 1px dotted #fff; outline-offset: -3px; }
.desktop-icon > span:last-child { padding: 1px 3px; line-height: 14px; text-align: center; }
.desktop-icon.is-selected > span:last-child { background: var(--xp-selection); outline: 1px dotted #fff; }
.pixel-icon { position: relative; display: block; width: 44px; height: 44px; filter: drop-shadow(1px 2px 1px rgb(0 45 95 / 55%)); }
.computer-icon::before { content: ""; position: absolute; inset: 3px 4px 12px 2px; border: 3px solid #dfe7f0; border-top-color: #fff; border-left-color: #fff; background: linear-gradient(135deg, #78d0e8, #276fbb 72%); box-shadow: inset 0 0 0 2px #4b5364, 3px 4px 0 #7e8792; }
.computer-icon::after { content: ""; position: absolute; bottom: 3px; left: 14px; width: 23px; height: 8px; border: 1px solid #5f6872; background: #cbd5df; clip-path: polygon(30% 0, 70% 0, 75% 55%, 100% 72%, 100% 100%, 0 100%, 0 72%, 25% 55%); }
.computer-icon i { position: absolute; z-index: 1; bottom: 3px; left: 0; width: 13px; height: 14px; border: 2px solid #eff6fb; background: #9fadb9; box-shadow: 1px 1px 0 #454a4d; }
.calendar-icon::before { content: "31"; position: absolute; inset: 3px 4px; display: grid; place-items: center; padding-top: 7px; color: #174a9d; border: 2px solid #fff; background: linear-gradient(#2e72cf 0 10px, #f8fbff 10px); box-shadow: 2px 3px 0 #536178; font-size: 15px; font-weight: 900; }
.team-icon::before, .team-icon::after { content: ""; position: absolute; width: 17px; height: 25px; border: 2px solid #fff; border-radius: 50% 50% 35% 35%; background: #70a8e7; box-shadow: 2px 3px 0 #41547a; }
.team-icon::before { top: 6px; left: 5px; }
.team-icon::after { top: 2px; right: 4px; background: #3d83d8; }

.xp-window { position: absolute; z-index: 5; display: flex; flex-direction: column; overflow: hidden; border: 3px solid var(--xp-blue-2); border-top-width: 0; border-radius: 8px 8px 2px 2px; background: var(--xp-window); box-shadow: 2px 3px 9px rgb(0 34 80 / 48%); }
.explorer-window { top: clamp(14px, 5vh, 54px); right: clamp(18px, 4vw, 62px); bottom: 49px; left: clamp(95px, 9vw, 145px); min-height: 470px; }
.titlebar { position: static; flex: 0 0 30px; min-height: 30px; padding: 3px 3px 3px 5px; display: flex; align-items: center; justify-content: space-between; color: #fff; border: 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #2786f3 0%, #105de3 12%, #0867e9 56%, #0753d2 81%, #003ca8 100%); box-shadow: inset 1px 0 rgb(118 183 255 / 90%), inset -1px 0 rgb(0 45 145 / 80%), inset 0 1px rgb(130 195 255 / 95%); text-shadow: 1px 1px #0d2d78; }
.titlebar-name { min-width: 0; display: flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; }
.titlebar-name strong { overflow: hidden; font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.mini-competition { position: relative; display: inline-block; flex: 0 0 auto; width: 17px; height: 15px; border: 1px solid #fff; background: linear-gradient(#80bdf5 0 4px, #246fc3 4px); box-shadow: 1px 1px #123680; }
.mini-competition::after { content: ""; position: absolute; right: 2px; bottom: 2px; left: 2px; height: 3px; background: #9fd0f2; }
.window-controls { display: flex; gap: 2px; }
.window-controls button { position: relative; width: 22px; height: 22px; padding: 0; border: 1px solid #fff; border-radius: 4px; background: linear-gradient(135deg, #64adff 0%, #1d66da 47%, #0c45bd 100%); box-shadow: inset 1px 1px rgb(255 255 255 / 35%), 1px 1px #003391; }
.window-controls .close-control { background: linear-gradient(135deg, #f3a58c, #d94a30 52%, #a51f0d); box-shadow: inset 1px 1px rgb(255 255 255 / 48%), 1px 1px #762411; }
.minimize-mark, .maximize-mark, .close-mark { position: absolute; inset: 0; }
.minimize-mark::after { content: ""; position: absolute; bottom: 5px; left: 5px; width: 9px; height: 2px; background: #fff; box-shadow: 1px 1px #123680; }
.maximize-mark::after { content: ""; position: absolute; top: 5px; left: 5px; width: 9px; height: 8px; border: 2px solid #fff; box-shadow: 1px 1px #123680; }
.close-mark::before, .close-mark::after { content: ""; position: absolute; top: 10px; left: 4px; width: 14px; height: 2px; background: #fff; box-shadow: 1px 1px #7b1e12; }
.close-mark::before { transform: rotate(45deg); }
.close-mark::after { transform: rotate(-45deg); }

.menubar { flex: 0 0 22px; min-height: 22px; padding: 0 2px; display: flex; align-items: center; border-bottom: 1px solid var(--xp-border-mid); background: var(--xp-window); }
.menubar > button { height: 20px; padding: 1px 7px; border: 1px solid transparent; background: transparent; }
.menubar > button:hover { border-color: #316ac5; background: #c1d2ee; }
.window-emblem { margin-left: auto; width: 44px; align-self: stretch; display: grid; grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); place-content: center; gap: 1px; border-left: 1px solid var(--xp-border-mid); background: #fff; }
.window-emblem i:nth-child(1) { background: #d84a56; }.window-emblem i:nth-child(2) { background: #54a35f; }.window-emblem i:nth-child(3) { background: #2a73cf; }.window-emblem i:nth-child(4) { background: #55a8dc; }

.toolbar { flex: 0 0 40px; min-height: 40px; padding: 2px 4px; display: flex; align-items: center; gap: 1px; border-top: 1px solid #fff; border-bottom: 1px solid var(--xp-border-mid); background: var(--xp-window); }
.tool-button { height: 34px; min-height: 0; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; color: #000; border: 1px solid transparent; border-radius: 0; background: transparent; box-shadow: none; font-weight: 400; }
.tool-button:hover:not(:disabled) { color: #000; border-color: #316ac5; background: #c1d2ee; box-shadow: none; }
.tool-button.is-disabled { opacity: .42; }.compact-tool { width: 35px; justify-content: center; }
.round-tool { position: relative; width: 26px; height: 26px; display: inline-block; border: 1px solid #4a902d; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #aaf267, #52b32a 52%, #238516 75%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); }
.round-tool::before { content: ""; position: absolute; top: 7px; width: 9px; height: 9px; border-bottom: 3px solid #fff; border-left: 3px solid #fff; filter: drop-shadow(1px 1px #23721a); }.back-tool::before { left: 9px; transform: rotate(45deg); }.forward-tool::before { left: 5px; transform: rotate(225deg); }
.up-tool { position: relative; width: 25px; height: 25px; display: inline-block; border: 1px solid #3f6e9e; background: linear-gradient(150deg, transparent 0 30%, #67a5df 31%); clip-path: polygon(0 31%, 37% 31%, 37% 0, 100% 0, 100% 100%, 0 100%); }.up-tool::after { content: ""; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px; border-top: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(45deg); }
.search-tool { position: relative; width: 27px; height: 27px; display: inline-block; }.search-tool::before { content: ""; position: absolute; top: 1px; left: 2px; width: 15px; height: 15px; border: 3px solid #3d72a7; border-radius: 50%; background: rgb(151 214 242 / 45%); }.search-tool::after { content: ""; position: absolute; top: 19px; left: 15px; width: 12px; height: 4px; border: 1px solid #274f78; background: #6e9bc7; transform: rotate(45deg); }
.collection-tool { position: relative; width: 27px; height: 24px; display: inline-block; border: 1px solid #45688d; background: linear-gradient(#d8eaff 0 6px, #6e9ed4 6px); }.collection-tool::after { content: "↻"; position: absolute; inset: 2px; display: grid; place-items: center; color: #123f79; font-weight: 900; }
.participants-tool { position: relative; width: 27px; height: 24px; display: inline-block; }
.participants-tool::before, .participants-tool::after { content: ""; position: absolute; border: 1px solid #315f92; background: #76a8db; box-shadow: inset 1px 1px rgb(255 255 255 / 55%); }
.participants-tool::before { z-index: 2; top: 1px; left: 9px; width: 9px; height: 9px; border-radius: 50%; }
.participants-tool::after { right: 3px; bottom: 1px; left: 3px; height: 12px; border-radius: 10px 10px 2px 2px; }
.user-tool { position: relative; width: 26px; height: 26px; display: inline-block; border: 1px solid #366f29; border-radius: 50%; background: #5cb347; }.user-tool::before { content: ""; position: absolute; top: 4px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }.user-tool::after { content: ""; position: absolute; bottom: 4px; left: 5px; width: 14px; height: 8px; border-radius: 9px 9px 3px 3px; background: #fff; }
.tiny-caret { width: 0; height: 0; border-top: 4px solid #222; border-right: 3px solid transparent; border-left: 3px solid transparent; }.toolbar-separator { width: 2px; height: 28px; margin: 0 3px; border-right: 1px solid #fff; border-left: 1px solid var(--xp-border-mid); }

.addressbar { flex: 0 0 25px; min-height: 25px; padding: 2px 3px; display: flex; align-items: center; gap: 4px; border-top: 1px solid #fff; border-bottom: 1px solid var(--xp-border-mid); background: var(--xp-window); }.addressbar > label { padding: 0 2px; color: #444; }
.address-field { height: 21px; min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid #7f9db9; background: #fff; }.address-field input { min-width: 0; height: 18px; flex: 1; padding: 1px 2px; border: 0; outline: 0; background: #fff; }.address-field > button { width: 18px; height: 18px; min-height: 0; padding: 0; border: 1px solid #7f9db9; border-radius: 0; background: linear-gradient(#fff, #d5e7fb); box-shadow: none; }.address-caret { display: inline-block; width: 0; height: 0; border-top: 4px solid #111; border-right: 3px solid transparent; border-left: 3px solid transparent; }.address-folder { position: relative; width: 18px; height: 16px; margin: 0 2px; border: 1px solid #315f92; background: #6ea8df; }.go-button { height: 21px; min-height: 0; padding: 1px 5px; color: #000; border: 1px solid transparent; border-radius: 0; background: transparent; box-shadow: none; white-space: nowrap; }.go-button span { width: 17px; height: 17px; margin-right: 2px; display: inline-grid; place-items: center; color: #fff; border: 1px solid #32731d; border-radius: 50%; background: #4ca526; font-weight: 700; }

.xp-window > main.explorer-body { min-height: 0; flex: 1; display: flex; padding: 0; overflow: hidden; background: #fff; user-select: text; }
.companion-pane { width: 212px; flex: 0 0 212px; padding: 9px 10px 12px; overflow-y: auto; border: 0; background: linear-gradient(90deg, #7387dc, #6374ce 72%, #6c7bd2); }
.task-box { margin-bottom: 9px; overflow: hidden; border-radius: 6px 6px 3px 3px; box-shadow: 1px 1px rgb(38 46 129 / 28%); }.task-title { width: 100%; height: 25px; padding: 3px 6px 3px 11px; display: flex; align-items: center; justify-content: space-between; color: #1745b5; border: 0; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #fff, #e6e9ff); font-weight: 700; text-align: left; }.task-title i { position: relative; width: 15px; height: 15px; border: 1px solid #91a0df; border-radius: 50%; background: #fff; }.task-title i::before, .task-title i::after { content: ""; position: absolute; left: 4px; width: 5px; height: 5px; border-top: 2px solid #3456b6; border-left: 2px solid #3456b6; transform: rotate(45deg); }.task-title i::before { top: 5px; }.task-title i::after { top: 1px; }.task-content { padding: 9px 11px 10px; border-top: 1px solid #fff; background: rgb(239 242 255 / 96%); }
.search-helper { min-height: 42px; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }.search-helper p { margin: 0; color: #3c3c3c; line-height: 14px; }.helper-competition { position: relative; width: 45px; height: 34px; border: 2px solid #4d6683; border-radius: 4px; background: linear-gradient(135deg, #d9ecfa, #7196ba); box-shadow: inset 2px 2px #fff; }.helper-competition::before { content: "AI"; position: absolute; inset: 5px; display: grid; place-items: center; color: #fff; border: 1px solid #285784; background: #397fc2; font-size: 12px; font-weight: 900; }
.filters { display: block; border: 0; background: transparent; box-shadow: none; }.filters label { min-height: 0; display: block; border: 0; }.classic-label { margin: 7px 0 3px; }.classic-input, .classic-select { width: 100%; height: 21px; padding: 1px 3px; color: #000; border: 1px solid #7f9db9; border-radius: 0; background: #fff; font-size: 10px; }.filters .classic-input, .filters .classic-select { height: 21px; padding: 1px 3px; background-image: none; }.search-submit { width: 100%; min-height: 23px; margin-top: 10px; padding: 2px 5px; color: #173f85; border: 1px solid #6d86a5; border-radius: 3px; background: linear-gradient(#fff, #dfe8f2); box-shadow: inset 1px 1px #fff, inset -1px -1px #9cabbc; font-size: 9px; font-weight: 400; }.task-links { display: grid; gap: 5px; }.task-links button { padding: 0; display: flex; align-items: center; gap: 6px; color: var(--xp-link); border: 0; background: none; text-align: left; }.task-links button:hover { text-decoration: underline; }.task-link-icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid #4b6481; background: #77a9d6; }.discover-icon::after { content: "⌕"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }.decide-icon::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }.build-icon::after { content: "⚙"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.hero-status { margin: 0; padding: 5px 11px 8px; border: 0; border-radius: 0; background: rgb(239 242 255 / 96%); }.hero-status div { padding: 6px 0; display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 5px; border-bottom: 1px solid #bdc9df; }.hero-status div:last-child { border-bottom: 0; }.hero-status strong { color: #174a9d; font-size: 16px; }.hero-status span { color: #3c4656; font-size: 9px; }

.file-area { min-width: 0; flex: 1; display: flex; flex-direction: column; overflow: auto; background: #fff; }.workspace { width: auto; max-width: none; margin: 0; padding: 0; }.folder-heading { min-height: 61px; padding: 9px 15px 6px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d9d9; }.folder-heading > div { display: flex; align-items: center; gap: 9px; }.folder-heading h1 { margin: 0 0 2px; color: #264a8a; font-size: 20px; font-weight: 400; }.folder-heading p { margin: 0; color: #666; }.large-competition { position: relative; width: 44px; height: 37px; border: 1px solid #275b91; background: linear-gradient(#8ec2ef 0 10px, #dceeff 10px); filter: drop-shadow(1px 2px 1px #aaa); }.large-competition::after { content: "AI"; position: absolute; inset: 13px 5px 4px; display: grid; place-items: center; color: #fff; border: 1px solid #245489; background: #397bc0; font-weight: 900; }.timezone-note { display: flex; align-items: center; gap: 5px; color: #4c5e75; }.timezone-note i { width: 7px; height: 7px; border-radius: 50%; background: #3a8a38; box-shadow: 0 0 0 2px #c9e7c5; }
.active-filter-strip { min-height: 29px; margin: 0; padding: 4px 10px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; color: #1c3977; border-bottom: 1px solid #b7c5df; background: #edf3ff; }.active-filter-strip > span:first-child { font-weight: 700; }.segmented { display: flex; gap: 0; padding: 0; border: 1px solid #7f9db9; border-radius: 0; background: #fff; }.segmented button { min-width: 70px; padding: 2px 8px; color: #000; border: 0; border-right: 1px solid #aab3c2; border-radius: 0; background: transparent; font-size: 10px; font-weight: 400; }.segmented button:last-child { border-right: 0; }.segmented button.active { color: #fff; background: var(--xp-selection); }.view-note { margin-left: auto; color: #4e6078; font-size: 9px; }
#list-view { min-width: 0; }.result-line { padding: 7px 13px 3px; display: flex; justify-content: space-between; color: #666; font-size: 9px; }.result-line strong { color: #1c3977; }.competition-grid { min-height: 0; padding: 10px 13px 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); align-content: start; gap: 8px; border: 0; background: #fff; }
.competition-card { position: relative; min-width: 0; min-height: 142px; padding: 7px; display: grid; grid-template-columns: 66px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 9px; color: #000; border: 1px solid transparent; background: transparent; transition: none; }.competition-card:hover { z-index: auto; border-color: #d7e4f7; background: #f4f7fd; box-shadow: none; transform: none; }.competition-card:focus { color: #fff; border-color: #174a9b; outline: 1px dotted #fff; outline-offset: -4px; background: var(--xp-selection); }.competition-icon { position: relative; grid-row: 1 / 5; width: 62px; height: 80px; margin-top: 3px; padding: 4px; display: grid; place-items: center; border: 1px solid #9aa7b4; background: #fff; box-shadow: 1px 2px 2px #aab2bb; }.competition-icon::before { content: ""; position: absolute; inset: 5px; border: 1px solid #2d639d; background: linear-gradient(#7cbbea 0 16px, #e5f2fb 16px 100%); }.competition-icon::after { content: "AI"; position: absolute; right: 10px; bottom: 10px; left: 10px; height: 25px; display: grid; place-items: center; color: #fff; border: 1px solid #20558c; background: #3a7fc3; font-size: 15px; font-weight: 900; }.competition-icon i { position: absolute; z-index: 2; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #53a24d; }
.card-top { min-width: 0; min-height: 18px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; }.mode-chip, .source-chip, .fit-chip { min-height: 17px; padding: 1px 4px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #9eb1cc; border-radius: 0; font-size: 8px; font-weight: 700; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }.mode-chip { color: #174a9d; background: #e2edfd; }.source-chip { color: #3c5f91; border-color: transparent; background: transparent; }.competition-card h2 { margin: 5px 0 3px; overflow: hidden; color: #000; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }.card-summary { margin: 0; display: -webkit-box; overflow: hidden; color: #4d5662; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.next-moment { min-width: 0; margin: 4px 0 0; padding: 4px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; color: #59697b; border-top: 1px solid #d7dee8; border-bottom: 0; font-size: 8px; }.next-moment strong { overflow: hidden; color: #182b43; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.card-bottom { grid-column: 2; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }.fit-chip.available { color: #1e5b24; border-color: #8fb693; background: #e4f3e5; }.fit-chip.unknown { color: #384d78; border-color: #adb9d4; background: #e8ecf6; }.fit-chip.region-conflict, .fit-chip.time-conflict { color: #8b1832; border-color: #cf9eaa; background: #f7e7ec; }.fit-chip.closed { color: #566171; border-color: #b2bbc6; background: #e7ebf0; }.card-bottom button { padding: 0; color: var(--xp-link); border: 0; background: transparent; font-size: 8px; text-decoration: underline; }.competition-card:focus h2, .competition-card:focus .card-summary, .competition-card:focus .next-moment, .competition-card:focus .next-moment strong, .competition-card:focus .card-bottom button { color: #fff; }.competition-card:focus .competition-icon { border-color: #fff; box-shadow: 1px 2px 2px #174a9b; }
.card-bottom .quick-interest { min-height: 20px; padding: 2px 7px; color: #fff; border: 1px solid #164f97; border-radius: 2px; background: linear-gradient(#5c9be1, #2366b8); box-shadow: inset 1px 1px rgb(255 255 255 / 55%); font-weight: 700; text-decoration: none; }.card-bottom .quick-interest:disabled { color: #33485f; border-color: #9aabba; background: #e5ebf2; box-shadow: inset 1px 1px #fff; }
.empty { min-height: 260px; padding: 45px 20px; display: grid; place-items: center; gap: 6px; color: #555; font-size: 10px; }.empty-search-icon { position: relative; width: 58px; height: 67px; border: 1px solid #777; background: #fff; box-shadow: 3px 3px 0 #c5cbd3; }.empty-search-icon::before { content: ""; position: absolute; top: 12px; left: 9px; width: 25px; height: 4px; background: #6e8dc3; box-shadow: 0 9px #a0aab5, 0 18px #a0aab5; }

.calendar-head { margin: 10px 13px 7px; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; }.calendar-head h2 { margin: 0; color: #264a8a; font-size: 18px; font-weight: 400; text-align: center; }.icon-button { width: 27px; height: 23px; min-height: 0; padding: 0; border: 1px solid #7f9db9; border-radius: 2px; background: linear-gradient(#fff, #dbe5ef); box-shadow: inset 1px 1px #fff; }.weekdays, .calendar-grid { margin-inline: 13px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-color: #8797ac; }.weekdays { border: 1px solid #8797ac; border-bottom: 0; background: #dfe9f8; }.weekdays span { padding: 5px; color: #203650; font-size: 9px; text-align: center; }.calendar-grid { margin-bottom: 20px; border-top: 1px solid #8797ac; border-left: 1px solid #8797ac; }.calendar-day { min-height: 90px; padding: 5px; border-right: 1px solid #c0c9d5; border-bottom: 1px solid #c0c9d5; background: #fff; }.calendar-day.today { background: #e7f0fd; box-shadow: inset 0 0 0 2px #316ac5; }.day-number { margin-bottom: 4px; font-size: 10px; }.calendar-event { margin-bottom: 3px; padding: 3px 4px; color: #164a96; border: 1px solid #9bb5da; border-radius: 0; background: #e3edfb; font-size: 8px; }.calendar-event.offline { color: #7c2140; border-color: #cea6b5; background: #f4e5eb; }.calendar-event.deadline { color: #344c86; border-color: #aab6d6; background: #e8ebf7; }

.statusbar { min-height: 21px; flex: 0 0 21px; padding: 2px 2px 2px 3px; display: grid; grid-template-columns: minmax(110px, 1fr) minmax(190px, 1fr) 15px; border-top: 1px solid var(--xp-border-mid); background: var(--xp-window); }.statusbar > span { padding: 2px 6px; overflow: hidden; border-top: 1px solid #b9c1cb; border-left: 1px solid #b9c1cb; box-shadow: inset 1px 1px #fff; white-space: nowrap; }.status-grip { background: repeating-linear-gradient(135deg, transparent 0 3px, #7e8b9a 3px 4px); }
.taskbar { position: absolute; z-index: 100; right: 0; bottom: 0; left: 0; height: 30px; display: flex; align-items: stretch; color: #fff; background: linear-gradient(#2f82ef 0%, #245edb 15%, #1b55cc 68%, #1946a7 100%); box-shadow: inset 0 1px #5998f4, 0 -1px #0f3d9e; }.start-button { flex: 0 0 99px; padding: 0 15px 0 8px; display: flex; align-items: center; gap: 5px; border-radius: 0 15px 15px 0; background: linear-gradient(#6fca4b 0%, #3c9e27 18%, #318b20 68%, #216d15 100%); box-shadow: inset 0 1px 2px #b3ec8e, inset -2px 0 3px rgb(19 75 12 / 80%), 1px 0 2px #19429a; font-size: 15px; font-style: italic; text-shadow: 1px 1px #235a17; }.start-flag { width: 23px; height: 19px; display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 8px); gap: 1px; transform: skewY(-5deg); filter: drop-shadow(1px 1px #245f19); }.start-flag b:nth-child(1) { background: #d84a56; }.start-flag b:nth-child(2) { background: #75b643; }.start-flag b:nth-child(3) { background: #3f8bd3; }.start-flag b:nth-child(4) { background: #55a8dc; }.task-button { min-width: 0; width: min(260px, 36vw); margin: 3px 8px; padding: 0 8px; display: flex; align-items: center; gap: 6px; overflow: hidden; border: 1px solid #0c3f9f; border-radius: 2px; background: #1b61c7; box-shadow: inset 1px 1px rgb(255 255 255 / 20%); text-overflow: ellipsis; white-space: nowrap; }.tray { margin-left: auto; padding: 0 10px; display: flex; align-items: center; border-left: 1px solid #0a4aaf; background: #0b8bdc; box-shadow: inset 1px 0 rgb(255 255 255 / 25%); }.tray i { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #d9efff; box-shadow: 0 0 0 2px #2d78c1; }

.scrim { z-index: 150; overflow: hidden; background: rgb(0 29 83 / 45%); backdrop-filter: none; }.drawer { top: 3%; right: auto; left: 50%; width: min(680px, calc(100vw - 28px)); height: auto; max-height: 94%; padding: 42px 30px 16px 14px; overflow: auto; scrollbar-gutter: stable; border: 3px solid var(--xp-blue-2); border-top-width: 0; border-radius: 8px 8px 2px 2px; background: var(--xp-window); box-shadow: 5px 7px 24px rgb(0 27 81 / 50%); transform: translateX(-50%); animation: none; }.drawer::before { content: "출전선"; position: absolute; top: 0; right: 0; left: 0; height: 30px; padding: 0 8px; display: flex; align-items: center; color: #fff; border-radius: 7px 7px 0 0; background: linear-gradient(#4f9cff, #0755d7 58%, #003bad); font-weight: 700; text-shadow: 1px 1px #00358f; }.detail-drawer::before { content: "대회 상세 정보"; }.settings-drawer::before { content: "내 참가 조건"; }.auth-drawer::before { content: "이름으로 입장"; }.team-drawer::before { content: "팀 작업실"; }.collection-drawer::before { content: "대회 자동 수집 검토"; }.participation-admin-drawer::before { content: "참가 의사 관리자 패널"; }.drawer-close { z-index: 2; top: 4px; right: 21px; width: 21px; height: 21px; min-height: 0; padding: 0; display: grid; place-items: center; color: transparent; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #f28375, #c82e24 70%); box-shadow: inset 1px 1px rgb(255 255 255 / 55%), 1px 1px #00358f; font-size: 0; line-height: 1; }.drawer-close::before, .drawer-close::after { content: ""; position: absolute; top: 9px; left: 3px; width: 13px; height: 2px; background: #fff; box-shadow: 1px 1px #7b1e12; }.drawer-close::before { transform: rotate(45deg); }.drawer-close::after { transform: rotate(-45deg); }.drawer h2 { color: #173f85; font-size: 24px; }.drawer-intro { margin: 12px 0 20px; color: #47566b; font-size: 11px; line-height: 1.6; }.detail-section, .settings-section, .collection-section { padding: 16px 0; border-top-color: #aab4c3; }.auth-drawer { width: min(520px, calc(100vw - 28px)); }.team-drawer { width: min(1180px, calc(100vw - 20px)); }.collection-drawer, .participation-admin-drawer { width: min(1040px, calc(100vw - 20px)); }

@media (max-width: 840px) {
  .desktop-icons { display: none; }
  .explorer-window { inset: 0 0 30px; min-height: 0; border-right-width: 0; border-left-width: 0; border-radius: 0; }
  .titlebar { border-radius: 0; }
  .toolbar { min-height: 36px; flex-basis: 36px; overflow-x: auto; }
  .tool-button > span + span, .tool-button .tiny-caret, .toolbar-separator { display: none; }
  .addressbar > label, .go-button { display: none; }
  .xp-window > main.explorer-body { display: block; overflow: auto; }
  .companion-pane { width: 100%; padding: 7px; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(150px, .7fr); gap: 7px; overflow: visible; }
  .companion-pane .task-box { margin: 0; }
  .companion-pane .task-box:nth-child(2) { display: none; }
  .search-task-box { grid-row: 1 / 3; }
  .search-helper, .search-submit { display: none; }
  .file-area { overflow: visible; }
  .competition-grid { grid-template-columns: 1fr; }
  .competition-card { min-height: 132px; }
  .drawer { top: 0; width: 100%; max-width: none; height: calc(100vh - 30px); max-height: none; padding: 40px 10px 16px; border-width: 0; border-radius: 0; }
  .team-drawer, .collection-drawer, .auth-drawer { width: 100%; }
}

@media (max-width: 520px) {
  .menubar { overflow-x: auto; }
  .menubar > button { padding-inline: 5px; white-space: nowrap; }
  .window-emblem { display: none; }
  .companion-pane { display: block; }
  .companion-pane .detail-task-box { margin-top: 7px; }
  .folder-heading { padding-inline: 9px; }
  .folder-heading h1 { font-size: 17px; }
  .timezone-note { display: none; }
  .view-note { display: none; }
  .competition-grid { padding-inline: 7px; }
  .calendar-day { min-height: 76px; }
  .statusbar { grid-template-columns: 1fr 12px; }
  .statusbar span:nth-child(2) { display: none; }
  .start-button { flex-basis: 82px; padding-inline: 7px 12px; font-size: 13px; }
  .tray { display: none; }
  .task-button { flex: 1; width: auto; }
}

/* LUNA/96 competition file view — keeps the supplied Explorer's icon layout. */
.mobile-filter-button,
.mobile-filter-scrim {
  display: none;
}

.selection-info {
  color: #3c4656;
  font-size: 9px;
  line-height: 1.45;
}

.selection-info > p {
  margin: 0;
}

.selection-info h3 {
  margin: 8px 0 6px;
  color: #173f85;
  font-size: 11px;
  line-height: 1.35;
}

.selection-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 5px;
}

.selection-info dt {
  color: #657287;
}

.selection-info dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-info .selection-open {
  margin-top: 7px;
  font-size: 9px;
}

.selection-preview {
  position: relative;
  width: 100%;
  height: 66px;
  overflow: hidden;
  border: 3px solid #fff;
  background: linear-gradient(#93d1ed 0 52%, #58a044 53% 100%);
  box-shadow: 0 0 0 1px #7c8996;
}

.selection-preview::before,
.competition-icon::before {
  content: "";
  position: absolute;
  border: 1px solid #2c5f91;
  background: linear-gradient(#ecf6ff 0 22%, #3f83c5 23% 100%);
  box-shadow: inset 2px 2px #fff;
}

.selection-preview::before {
  top: 15px;
  right: 18px;
  bottom: 11px;
  left: 18px;
}

.selection-preview::after,
.competition-icon::after {
  content: "AI";
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid #1e4f84;
  background: #397bc0;
  font-weight: 700;
  text-shadow: 1px 1px #1d4778;
}

.selection-preview::after {
  inset: 28px 27px 16px;
  font-size: 12px;
}

.selection-preview i,
.competition-icon i {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: #55a44d;
  box-shadow: 0 0 0 1px #2f6b31;
}

.selection-preview i {
  top: 19px;
  right: 23px;
  width: 8px;
  height: 8px;
}

.selection-preview b,
.competition-icon b {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid #365f87;
  background: #82b7df;
}

.selection-preview b {
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 4px;
}

.competition-grid {
  min-height: 0;
  padding: 14px 13px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  align-content: start;
  gap: 16px 8px;
  border: 0;
  background: #fff;
}

.competition-card {
  position: relative;
  min-width: 0;
  min-height: 161px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #000;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  transition: none;
}

.competition-card:hover {
  z-index: auto;
  border-color: #d7e4f7;
  background: #f4f7fd;
  box-shadow: none;
  transform: none;
}

.competition-card:focus,
.competition-card.is-selected {
  color: #fff;
  border-color: #174a9b;
  outline: 1px dotted #fff;
  outline-offset: -4px;
  background: var(--xp-selection);
}

.competition-icon {
  position: relative;
  flex: 0 0 auto;
  order: 1;
  grid-row: auto;
  width: min(100%, 110px);
  height: 89px;
  margin: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #9aa7b4;
  background: linear-gradient(#9fd7ed 0 53%, #5ba24a 54% 100%);
  box-shadow: 1px 2px 2px #aab2bb;
}

.competition-icon::before {
  inset: 19px 20px 17px;
}

.competition-icon::after {
  inset: 39px 29px 24px;
  height: auto;
  font-size: 13px;
}

.competition-icon i {
  top: 24px;
  right: 25px;
  width: 8px;
  height: 8px;
}

.competition-icon b {
  right: 12px;
  bottom: 10px;
  left: 12px;
  height: 5px;
}

.competition-card[data-mode="online-online"] .competition-icon,
.selection-preview[data-mode="online-online"] {
  background: linear-gradient(#a9ddf2 0 53%, #4d83bd 54% 100%);
}

.competition-card[data-mode="offline-offline"] .competition-icon,
.selection-preview[data-mode="offline-offline"] {
  background: linear-gradient(#a7c7e8 0 53%, #736bb3 54% 100%);
}

.competition-card[data-mode^="no-prelim"] .competition-icon,
.selection-preview[data-mode^="no-prelim"] {
  background: linear-gradient(#9ed5ec 0 53%, #3c8f83 54% 100%);
}

.competition-card[data-mode="unknown"] .competition-icon,
.selection-preview[data-mode="unknown"] {
  background: linear-gradient(#c8d5e1 0 53%, #738292 54% 100%);
}

.competition-card .card-top {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  width: min(calc(100% - 16px), 102px);
  min-height: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  transform: translateX(-50%);
}

.competition-card .mode-chip {
  min-width: 0;
  min-height: 14px;
  max-width: 84px;
  padding: 0 3px;
  color: #174a9d;
  border-color: #7f9fc8;
  background: rgb(239 246 255 / 94%);
  font-size: 7px;
  text-overflow: ellipsis;
}

.competition-card .source-chip {
  width: 7px;
  min-width: 7px;
  height: 7px;
  min-height: 7px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  border: 1px solid #2d6c35;
  border-radius: 50%;
  background: #55a44d;
  font-size: 0;
}

.competition-card h2 {
  order: 2;
  min-height: 28px;
  max-width: 100%;
  margin: 0;
  padding: 1px 3px;
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.competition-card .next-moment {
  order: 3;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 3px;
  display: flex;
  justify-content: center;
  gap: 3px;
  color: #5b6672;
  border: 0;
  font-size: 7px;
  line-height: 10px;
  white-space: nowrap;
}

.competition-card .next-moment span {
  display: none;
}

.competition-card .next-moment strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-weight: 400;
  text-overflow: ellipsis;
}

.competition-card .card-bottom {
  position: absolute;
  z-index: 4;
  top: 76px;
  left: 50%;
  width: min(calc(100% - 16px), 102px);
  padding: 0;
  display: flex;
  justify-content: flex-end;
  transform: translateX(-50%);
}

.competition-card .fit-chip {
  min-height: 13px;
  max-width: 100%;
  padding: 0 3px;
  border-radius: 0;
  background: rgb(255 255 255 / 95%);
  font-size: 7px;
  line-height: 11px;
}

.competition-card .card-bottom button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.competition-card {
  min-height: 184px;
}

.competition-card .card-bottom .quick-interest {
  position: absolute;
  top: 66px;
  left: 50%;
  width: max-content;
  height: auto;
  min-height: 20px;
  padding: 2px 7px;
  overflow: visible;
  clip: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

.competition-card:focus .competition-icon,
.competition-card.is-selected .competition-icon {
  border-color: #fff;
  box-shadow: 1px 2px 2px #174a9b;
}

.competition-card:focus .next-moment,
.competition-card.is-selected .next-moment,
.competition-card:focus .next-moment strong,
.competition-card.is-selected .next-moment strong {
  color: #fff;
}

@media (max-width: 840px) {
  .explorer-window {
    inset: 0 0 35px;
  }

  .xp-window > main.explorer-body {
    position: relative;
    display: flex;
    overflow: hidden;
  }

  .companion-pane {
    position: absolute;
    z-index: 20;
    inset: 0 auto 0 0;
    width: min(280px, calc(100vw - 36px));
    padding: 9px 10px 12px;
    display: block;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 4px 0 9px rgb(0 24 70 / 40%);
  }

  .companion-pane.is-mobile-open {
    transform: translateX(0);
  }

  .companion-pane .task-box,
  .companion-pane .task-box:nth-child(2) {
    margin-bottom: 9px;
    display: block;
  }

  .search-helper,
  .search-submit {
    display: flex;
  }

  .search-submit {
    display: block;
  }

  .mobile-filter-scrim:not([hidden]) {
    position: absolute;
    z-index: 19;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: rgb(0 22 65 / 28%);
  }

  .mobile-filter-button {
    display: block;
    min-height: 25px;
    padding: 2px 8px;
    color: #000;
    border: 1px solid #315f92;
    border-radius: 3px;
    background: linear-gradient(#fff, #dce7f2);
    box-shadow: inset 1px 1px #fff, inset -1px -1px #9cabbc;
  }

  .timezone-note {
    display: none;
  }

  .file-area {
    overflow: auto;
  }

  .competition-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    padding: 10px 6px 24px;
    gap: 12px 4px;
  }

  .competition-card {
    min-height: 151px;
  }

  .taskbar {
    height: 35px;
  }
}

@media (max-width: 430px) {
  .competition-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .competition-icon {
    height: 78px;
  }

  .competition-card .card-bottom {
    top: 65px;
  }

  .competition-card {
    min-height: 143px;
  }
}

/* LUNA/96 Explorer view modes: descriptive icons + Windows Details list. */
.view-icons.competition-grid {
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 12px 7px;
}

.view-icons .competition-card {
  min-height: 222px;
}

.view-icons .competition-card .card-summary {
  position: static;
  order: 3;
  width: 100%;
  height: auto;
  min-height: 34px;
  margin: 0;
  padding: 4px 5px;
  display: -webkit-box;
  overflow: hidden;
  clip: auto;
  color: #3c4e66;
  border: 1px solid #d0dbe9;
  background: #f5f8fc;
  font-size: 8px;
  line-height: 12px;
  text-align: left;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-facts {
  order: 4;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  color: #53657b;
  font-size: 7px;
  line-height: 11px;
}

.card-facts span {
  min-width: 0;
  padding: 0 3px;
  overflow: hidden;
  border: 1px solid #c1ccda;
  background: #edf3fa;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-icons .competition-card .next-moment {
  order: 5;
}

.competition-card:focus .card-summary,
.competition-card.is-selected .card-summary,
.competition-card:focus .card-facts,
.competition-card.is-selected .card-facts {
  color: #fff;
}

.competition-card:focus .card-summary,
.competition-card.is-selected .card-summary,
.competition-card:focus .card-facts span,
.competition-card.is-selected .card-facts span {
  border-color: #a9c7ee;
  background: #285aac;
}

.detail-list-header {
  margin: 0 13px;
  padding: 3px 7px 3px 71px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px 160px 76px;
  gap: 8px;
  color: #213a5d;
  border: 1px solid #9eacbd;
  background: linear-gradient(#fff, #dfe7f0);
  box-shadow: inset 1px 1px #fff;
  font-size: 8px;
}

.view-details.competition-grid {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.view-details .competition-card {
  min-height: 82px;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: 56px minmax(180px, 1fr) 150px 160px 76px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon title mode moment fit"
    "icon summary mode moment fit"
    "icon facts mode moment fit";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  border-bottom-color: #d9e0e8;
}

.view-details .competition-icon {
  grid-area: icon;
  width: 51px;
  height: 64px;
  margin: 0;
}

.view-details .competition-icon::before { inset: 13px 8px 11px; }
.view-details .competition-icon::after { inset: 29px 12px 17px; font-size: 9px; }
.view-details .competition-icon i { top: 17px; right: 13px; width: 6px; height: 6px; }
.view-details .competition-icon b { right: 6px; bottom: 6px; left: 6px; height: 3px; }

.view-details .competition-card h2 {
  grid-area: title;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: left;
  white-space: normal;
}

.view-details .competition-card .card-summary {
  position: static;
  grid-area: summary;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  overflow: hidden;
  clip: auto;
  color: #526176;
  font-size: 8px;
  line-height: 11px;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.view-details .competition-card .card-top {
  position: static;
  grid-area: mode;
  width: auto;
  min-height: 0;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 3px;
  transform: none;
}

.view-details .competition-card .mode-chip {
  max-width: 145px;
  min-height: 17px;
  font-size: 8px;
}

.view-details .competition-card .source-chip {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  color: #456083;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 7px;
}

.view-details .competition-card .next-moment {
  grid-area: moment;
  width: auto;
  padding: 0;
  display: grid;
  justify-content: start;
  gap: 2px;
  font-size: 8px;
  line-height: 12px;
  white-space: normal;
}

.view-details .competition-card .next-moment span { display: block; color: #59697b; }
.view-details .competition-card .next-moment strong { white-space: normal; }

.view-details .competition-card .card-bottom {
  position: static;
  grid-area: fit;
  width: auto;
  padding: 0;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  transform: none;
}

.view-details .competition-card .card-bottom .quick-interest {
  position: static;
  width: auto;
  transform: none;
}

.view-details .competition-card .fit-chip {
  min-height: 17px;
  font-size: 8px;
}

.view-details .card-facts {
  grid-area: facts;
  justify-content: flex-start;
}

@media (max-width: 840px) {
  .view-icons.competition-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .view-details .competition-card {
    grid-template-columns: 48px minmax(0, 1fr) 82px;
    grid-template-areas:
      "icon title fit"
      "icon summary summary"
      "icon facts facts"
      "icon mode mode"
      "icon moment moment";
  }

  .view-details .competition-icon {
    width: 44px;
    height: 56px;
  }

  .detail-list-header { display: none; }
}

/* XP-style in-window scrolling and participation administration. */
* {
  scrollbar-color: #8ea4c4 #e8edf5;
  scrollbar-width: auto;
}

*::-webkit-scrollbar { width: 16px; height: 16px; }
*::-webkit-scrollbar-track { border: 1px solid #9aa8bb; background: #e8edf5; }
*::-webkit-scrollbar-thumb { min-height: 24px; border: 1px solid #657287; background: linear-gradient(90deg, #dfe6ef, #aebdd0); box-shadow: inset 1px 1px #fff, inset -1px -1px #7c8ca1; }
*::-webkit-scrollbar-corner { border: 1px solid #9aa8bb; background: #d8e0eb; }
*::-webkit-scrollbar-button:single-button { width: 16px; height: 16px; border: 1px solid #657287; background-color: #dbe4ef; background-repeat: no-repeat; background-position: center; }
*::-webkit-scrollbar-button:vertical:decrement { background-image: linear-gradient(135deg, transparent 50%, #27384f 51%), linear-gradient(225deg, transparent 50%, #27384f 51%); background-size: 5px 5px; background-position: 4px 7px, 7px 7px; }
*::-webkit-scrollbar-button:vertical:increment { background-image: linear-gradient(45deg, transparent 50%, #27384f 51%), linear-gradient(315deg, transparent 50%, #27384f 51%); background-size: 5px 5px; background-position: 4px 4px, 7px 4px; }

.readonly-setting { flex: 0 0 auto; padding: 4px 7px; color: #40526b; border: 1px solid #9aa8bb; background: #e5eaf1; font-size: 9px; }
.competition-overview { margin: 8px 0 0; padding: 14px 15px; color: #203650; border: 1px solid #8fa9cf; background: linear-gradient(#f8fbff, #e3edfb); }
.competition-overview > h3 { margin: 0 0 6px; color: #174a9d; font-size: 11px; font-weight: 700; }
.competition-overview p { margin: 0; font-size: 12px; line-height: 1.65; }
.schedule-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.schedule-item { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: minmax(105px, .45fr) minmax(190px, 1fr); gap: 3px 12px; color: #26374e; border: 1px solid #b4c0d0; background: #fff; }
.schedule-item strong { color: #173f85; font-size: 11px; }
.schedule-item span { overflow-wrap: anywhere; font-size: 11px; }
.schedule-item small { grid-column: 2; color: #657287; font-size: 9px; }
.schedule-item.application-period { border-color: #7295c6; background: #edf4ff; }
.schedule-item.compact { background: #f5f7fa; }

.participation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #8797ac; background: #fff; }
.participation-summary div { min-width: 0; padding: 13px 15px; display: grid; gap: 3px; border-right: 1px solid #c0c9d5; background: linear-gradient(#fff, #edf3fb); }
.participation-summary div:last-child { border-right: 0; }
.participation-summary strong { color: #174a9d; font-size: 24px; font-weight: 700; }
.participation-summary span { color: #4c5e75; font-size: 9px; }
.admin-reminder-form { margin-top: 10px; padding: 10px; display: grid; grid-template-columns: minmax(220px, 1fr) 120px 120px auto; align-items: end; gap: 9px; border: 1px solid #8797ac; background: #edf3ff; }
.admin-reminder-form h3 { margin: 0 0 3px; color: #173f85; font-size: 11px; }
.admin-reminder-form p { margin: 0; color: #536276; font-size: 8px; line-height: 1.45; }
.admin-reminder-form label { display: grid; gap: 4px; color: #40526b; font-size: 8px; }
.admin-reminder-form select { min-width: 0; height: 25px; border: 1px solid #7f9db9; background: #fff; font: inherit; }
.admin-reminder-form .button { min-height: 25px; white-space: nowrap; }
.participation-groups { display: grid; gap: 9px; margin-top: 12px; }
.participation-group { border: 1px solid #8797ac; background: #fff; }
.participation-group > header { min-height: 35px; padding: 5px 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #173f85; border-bottom: 1px solid #aebbd0; background: linear-gradient(#f8fbff, #dce8f8); }
.participation-group > header div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.participation-group h3 { margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.participation-group > header > strong { flex: 0 0 auto; font-size: 10px; }
.participation-group ul { margin: 0; padding: 0; list-style: none; }
.participation-group li { min-width: 0; min-height: 46px; padding: 7px 9px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #d9e0ea; }
.participation-group li:last-child { border-bottom: 0; }
.participant-avatar { width: 27px; height: 27px; display: grid; place-items: center; overflow: hidden; color: #fff; border: 1px solid #315f92; border-radius: 50%; background: #477fbd; font-size: 11px; font-weight: 700; }
.participation-group li > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.participation-group li strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.participation-group li small { color: #657287; font-size: 8px; }
.participant-team-state { padding: 3px 6px; color: #536276; border: 1px solid #aab3c2; background: #edf0f4; font-size: 8px; white-space: nowrap; }
.participant-team-state.joined { color: #1e5b24; border-color: #8fb693; background: #e4f3e5; }
.participation-empty { min-height: 230px; padding: 42px 18px; display: grid; justify-items: center; align-content: center; gap: 8px; color: #47566b; border: 1px solid #aebbd0; background: #fff; text-align: center; }
.participation-empty .participants-tool { margin-bottom: 8px; transform: scale(1.7); }
.participation-empty p { margin: 0; font-size: 9px; }

@media (max-width: 840px) {
  .participation-admin-drawer { width: 100%; }
  .participation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .participation-summary div:nth-child(2) { border-right: 0; }
  .participation-summary div:nth-child(-n+2) { border-bottom: 1px solid #c0c9d5; }
  .admin-reminder-form { grid-template-columns: 1fr 1fr; }
  .admin-reminder-form > div, .admin-reminder-form .button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .schedule-item { grid-template-columns: 1fr; }
  .schedule-item small { grid-column: 1; }
  .participation-group li { grid-template-columns: 28px minmax(0, 1fr); }
  .participant-team-state { grid-column: 2; justify-self: start; }
}

@media (max-width: 430px) {
  .segmented button { min-width: 0; padding-inline: 6px; }
  .view-icons.competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-icons .competition-card { min-height: 216px; }
}