:root { color-scheme: light; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14221d; background: #f4f7f3; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 48px; }
.topbar, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0; color: #457562; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 32px; } h2 { margin-bottom: 0; font-size: 18px; }
.primary { border: 0; border-radius: 12px; background: #173f35; color: white; padding: 12px 16px; font-weight: 700; }
.connection-card, .panel { background: white; border: 1px solid #dce6df; border-radius: 16px; box-shadow: 0 8px 24px rgb(20 34 29 / .05); }
.connection-card { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.4fr); gap: 24px; padding: 24px; margin: 24px 0 16px; }
.upload-card { display:grid;grid-template-columns:minmax(220px,1fr) minmax(340px,1.4fr);gap:24px;padding:24px;margin:16px 0;background:#fff;border:1px solid #dce6df;border-radius:16px;box-shadow:0 8px 24px rgb(20 34 29 / .05); }.upload-card p{color:#65746c;line-height:1.5;margin:8px 0 0}.upload-fields{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.public-link,.gpx-list-section{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px;background:#f4f7f3;border-radius:12px;overflow-wrap:anywhere}.public-link a{color:#176b45;font-weight:700}.gpx-list-section{display:block;background:#fff8ec}.gpx-list-section h3{margin:0;font-size:16px}.gpx-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}.gpx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:#fff;border:1px solid #eadfca;border-radius:10px}.gpx-row p{margin:4px 0 0}.gpx-actions{display:flex;align-items:center;gap:4px}.danger-button{color:#9b2f1c}.banner-success{background:#e3f2e8;color:#1c6543}
.connection-card p, .empty { color: #65746c; line-height: 1.5; margin: 8px 0 0; }
.connection-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 7px; color: #3d4f45; font-size: 13px; font-weight: 700; }
input { width: 100%; border: 1px solid #b9c8be; border-radius: 10px; padding: 11px 12px; color: #14221d; }
input:focus { outline: 3px solid #f2c85d88; border-color: #806616; }
.banner { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fff0ed; color: #9b2f1c; font-weight: 700; }
.dashboard { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 16px; }
.panel { min-height: 300px; padding: 20px; }.text-button { border: 0; background: none; color: #29624c; font-weight: 700; padding: 6px; }.text-button:disabled { color: #9ea9a2; cursor: default; }
.room-list, .member-list { list-style: none; padding: 0; margin: 16px 0 0; }.room-list { display: grid; gap: 8px; }
.subheading { margin: 28px 0 0; font-size: 16px; }
.room-button { width: 100%; text-align: left; border: 1px solid transparent; border-radius: 12px; background: #f4f7f3; padding: 13px; color: inherit; }.room-button:hover, .room-button[aria-current="true"] { border-color: #739b86; background: #e9f2ec; }
.room-row, .member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.room-code, .member-name { font-weight: 800; }.meta { color: #65746c; font-size: 13px; }
.member-list { display: grid; gap: 2px; }.member-row { padding: 14px 0; border-bottom: 1px solid #e8eee9; }.member-row:last-child { border-bottom: 0; }
.status { display: inline-flex; flex: none; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 800; }.status-ok { background: #e3f2e8; color: #1c6543; }.status-stale { background: #fff2d7; color: #815c0c; }.status-waiting, .status-neutral { background: #eef1ef; color: #5b6961; }
@media (max-width: 720px) { .shell { width: min(100% - 24px, 560px); padding-top: 20px; }.connection-card, .upload-card, .dashboard { grid-template-columns: 1fr; }.connection-fields, .upload-fields { grid-template-columns: 1fr; }.topbar { align-items: flex-end; } }