* { box-sizing: border-box; }
:root { --bg:#05070b; --border:#2b3240; --text:#f4f7fb; --muted:#9ba7bb; --accent:#7dd3fc; --accent-2:#38bdf8; --shadow:0 10px 35px rgba(0,0,0,.28); }
html,body{margin:0;padding:0;background:radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 26%),radial-gradient(circle at top right, rgba(125,211,252,.05), transparent 22%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body{min-height:100vh}.app-shell{max-width:1200px;margin:0 auto;padding:24px}.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.hero h1{margin:0 0 8px;font-size:48px;line-height:1.02;font-weight:800;letter-spacing:-.03em}.hero p{margin:0;color:var(--muted);font-size:15px}.hero-badge{padding:10px 14px;border:1px solid var(--border);border-radius:999px;color:var(--accent);background:rgba(125,211,252,.08);font-size:12px;font-weight:700;letter-spacing:.08em}.card{background:linear-gradient(180deg,rgba(23,27,35,.92),rgba(18,21,28,.95));border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}.hero-result{padding:22px 24px;margin-bottom:18px}.hero-result-label{color:var(--muted);font-size:12px;margin-bottom:10px}.hero-time{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.04em}.hero-pace{margin-top:10px;font-size:24px;color:var(--accent);font-weight:700}.hero-meta{margin-top:8px;color:var(--muted);font-size:14px}.main-grid{display:grid;grid-template-columns:1.45fr 0.75fr;gap:18px;margin-bottom:18px}
.card>.section-title-row,.card>.record-grid,.card>.metrics-grid,.card>.action-row,.card>.helper-text,.card>.pace-mode-grid,.card>.pace-fields,.card>.result-panel,.card>.detail-grid{margin-left:22px;margin-right:22px}.section-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:20px;margin-bottom:14px}.section-title-row h2{margin:0;font-size:18px}.section-caption{color:var(--muted);font-size:12px}.top-gap{margin-top:8px}
.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metrics-grid,.custom-race-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.custom-race-grid{margin:0 22px 12px}
.field{display:flex;flex-direction:column;gap:8px}.field span{font-size:13px;color:#dbe5f4}
input,select,button{border-radius:12px;border:1px solid var(--border);background:#12151c;color:var(--text);font-size:16px}
input,select{width:100%;padding:14px;outline:none}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#12151c;color:#f4f7fb}
select option{background-color:#12151c;color:#f4f7fb}
input::placeholder{color:#6f7c90}input:focus,select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(56,189,248,.15)}input[readonly]{background:rgba(125,211,252,.08);color:var(--accent)}
.action-row{display:flex;gap:10px;align-items:center;padding-bottom:16px;flex-wrap:wrap}.bottom-pad,.custom-actions{margin-left:22px;margin-right:22px}.bottom-pad{padding-bottom:22px}button{padding:14px 16px;cursor:pointer;font-weight:700}button.primary{background:linear-gradient(180deg,rgba(56,189,248,.25),rgba(56,189,248,.16));border-color:rgba(56,189,248,.35)}button:hover{transform:translateY(-1px)}
.checkbox-row{display:inline-flex;align-items:center;gap:8px;color:#dbe5f4}.checkbox-row input{width:auto}.helper-text{color:var(--muted);font-size:13px;padding-bottom:22px}.custom-message{margin-left:22px;margin-right:22px;padding-bottom:10px}
.split-time-row{display:grid;gap:10px}.split-2{grid-template-columns:1fr 1fr}.split-3{grid-template-columns:1fr 1fr 1fr}.time-preview{font-size:12px;color:var(--accent);padding-left:2px}
.distance-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.custom-race-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 22px 22px}.custom-race-item,.detail-box,.race-card{border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,.02)}.custom-race-item-title,.race-card-title{font-size:15px;font-weight:700}.custom-race-item-meta,.race-card-meta{margin-top:6px;color:var(--muted);font-size:12px}.custom-race-item-desc,.race-card-desc{margin-top:8px;font-size:13px;color:#dbe5f4}.custom-race-item-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.custom-mini-btn{padding:8px 10px;font-size:12px}
.pace-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pace-fields{margin-left:22px;margin-right:22px;margin-top:12px}.hidden{display:none}.result-panel{padding-bottom:22px}.result-label{color:var(--muted);font-size:12px;margin-top:6px}.result-main{margin-top:10px;font-size:34px;font-weight:800;letter-spacing:-.03em}.result-sub{margin-top:8px;color:var(--muted);font-size:14px}.upload-row{margin:0 22px 18px;display:flex;flex-direction:column;gap:10px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 22px 22px}.detail-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;padding-bottom:22px}.detail-label{color:var(--muted);font-size:12px;margin-bottom:10px}.detail-value,.race-card-time{font-size:28px;font-weight:800}.detail-note{font-size:14px;line-height:1.5;color:#dbe5f4}.race-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 22px 22px}.race-card-pace{margin-top:6px;color:var(--accent);font-weight:700}.race-card.favorite{border-color:rgba(125,211,252,.55);box-shadow:0 0 0 1px rgba(125,211,252,.12) inset}.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.small-badge{font-size:11px;color:var(--accent);border:1px solid rgba(125,211,252,.35);padding:4px 8px;border-radius:999px;background:rgba(125,211,252,.08)}.empty-message{grid-column:1/-1;color:var(--muted);padding:8px 2px 18px}
@media (max-width:1100px){.summary-grid,.race-cards-grid,.custom-race-list,.metrics-grid,.custom-race-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){.hero h1{font-size:38px}.main-grid,.record-grid,.metrics-grid,.pace-mode-grid,.detail-grid,.summary-grid,.race-cards-grid,.custom-race-grid,.custom-race-list,.distance-row{grid-template-columns:1fr}.hero{flex-direction:column;align-items:flex-start}}


.record-grid {
  gap: 18px;
}

.record-block {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.02);
}

.record-block-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #f4f7fb;
}

.record-block .split-time-row input {
  padding: 12px 10px;
  min-width: 0;
}

.record-block .time-preview {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
}

.pace-mode-grid input,
.pace-mode-grid select,
.pace-fields input {
  padding: 12px 12px;
}

@media (max-width: 900px) {
  .record-grid {
    grid-template-columns: 1fr;
  }
}


.sub3-wrap {
  margin: 0 22px 22px 22px;
}

.sub3-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.sub3-score-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.sub3-score {
  font-size: 34px;
  font-weight: 800;
}

.sub3-full-eq {
  font-size: 28px;
  font-weight: 800;
}

.sub3-bar-shell {
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  overflow: hidden;
}

.sub3-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56,189,248,.55), rgba(125,211,252,.95));
}

.sub3-label {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
}

.sub3-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .sub3-top {
    grid-template-columns: 1fr;
  }
}


.feedback-wrap { margin: 0 22px 22px 22px; }
.feedback-top-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.feedback-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.feedback-priority { font-size:22px; font-weight:800; line-height:1.25; }
.feedback-signals, .feedback-advice { font-size:14px; line-height:1.6; color:#dbe5f4; white-space:pre-line; }
.feedback-advice-box { margin-top:0; }
@media (max-width:1100px) { .feedback-top-grid, .feedback-main-grid { grid-template-columns:1fr; } }


.feedback-priority {
  color: #38bdf8;
}

.feedback-signals,
.feedback-advice {
  white-space: pre-line;
}