.ss-form,
.ss-app,
.ss-browse-page {
  --ss-primary: #1268a5;
  --ss-primary-dark: #0b4f7f;
  --ss-border: #d7dee5;
  --ss-muted: #64748b;
  --ss-surface: #fff;
  color: #1f2937;
  font-family: inherit;
  line-height: 1.7;
}

.ss-form { max-width: 860px; margin: 0 auto; }
.ss-submit-page { width: 100%; }
.ss-submit-page-title { margin: 0 0 22px; text-align: center; }
.ss-submit-page-intro { margin: 0 auto 22px; text-align: center; }
.ss-browse-page { width: 100%; }
.ss-browse-page-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 18px; margin: 0 auto 18px; padding: 13px 17px; border: 1px solid #d7dee5; border-radius: 8px; background: #f8fafc; text-align: left; }
.ss-browse-page-header h1 { grid-column: 1; margin: 0; font-size: 1.45em; line-height: 1.35; }
.ss-browse-page-header p { grid-column: 1; margin: 0; color: #64748b; font-size: .9em; line-height: 1.5; }
.ss-browse-page-header .ss-button-link-wrap { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ss-browse-page-header .ss-button-link { min-height: 40px; padding: 8px 18px; }
.ss-browse-page-viewer { padding-top: 15px; border-top: 1px solid #d7dee5; }
.ss-browse-page.is-detail .ss-browse-page-viewer { padding-top: 0; border-top: 0; }
.ss-exam-policy-notice { margin: 0 0 26px; padding: 14px 16px; border: 1px solid #e2b554; border-left: 5px solid #d58b00; border-radius: 7px; background: #fff8df; color: #59420d; }
.ss-exam-policy-notice strong { display: block; margin-bottom: 4px; font-size: 1.05em; }
.ss-exam-policy-notice p { margin: 0; }
.ss-field { margin-bottom: 24px; }
.ss-field > label,
.ss-field legend { display: block; margin-bottom: 7px; padding-left: 9px; border-left: 4px solid var(--ss-primary); font-weight: 700; }
.ss-field fieldset { margin: 0; padding: 0; border: 0; }
.ss-field input[type="text"],
.ss-field input[type="number"],
.ss-field input[type="date"],
.ss-field select,
.ss-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #b8c1cc; border-radius: 6px;
  background: #fff; color: #1f2937; box-sizing: border-box; font: inherit;
}
.ss-field textarea { min-height: 250px; resize: vertical; }
.ss-field textarea.ss-textarea-short { min-height: 90px; }
.ss-field input:focus,
.ss-field select:focus,
.ss-field textarea:focus { outline: 3px solid rgba(18,104,165,.16); border-color: var(--ss-primary); }
.ss-required { margin-left: 4px; color: #c62828; }
.ss-hint { display: block; margin: -2px 0 8px; color: var(--ss-muted); font-size: .88em; }
.ss-banner { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid #f0b429; background: #fff8df; }
.ss-hidden { display: none !important; }
.ss-options-inline { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 8px; }
.ss-options-inline label,
.ss-checkbox-grid label,
.ss-cert-none { cursor: pointer; }
.ss-group-title { margin: 17px 0 8px; padding: 6px 10px; border-radius: 5px; background: #edf3f7; font-weight: 700; }
.ss-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(115px,1fr)); gap: 8px 14px; padding: 0 8px; }
.ss-cert-none { display: block; padding: 5px 8px; color: var(--ss-primary); font-weight: 700; }
.ss-form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.ss-button,
.ss-button-link { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 11px 26px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ss-button-primary,
.ss-button-link { background: var(--ss-primary); color: #fff !important; }
.ss-button-primary:hover,
.ss-button-link:hover { background: var(--ss-primary-dark); color: #fff !important; }
.ss-button-secondary { border-color: #b8c1cc; background: #f3f5f7; color: #243242; }
.ss-button:disabled { opacity: .65; cursor: wait; }
.ss-button-link-wrap { margin: 32px 0; text-align: center; }
.ss-form-message { display: none; margin: 20px 0; padding: 13px 15px; border-radius: 6px; }
.ss-form-message-success { display: block; border: 1px solid #9ad1ad; background: #e7f6ec; color: #175b2d; }
.ss-form-message-error { display: block; border: 1px solid #efa4a4; background: #fff0f0; color: #8c1d1d; }

.ss-app { max-width: 1050px; margin: 0 auto; }
.ss-app-title { margin: 14px 0 28px; text-align: center; }
.ss-provider-section { --ss-provider-color: var(--ss-primary); --ss-provider-soft: #eef6fb; margin: 0 0 34px; }
.ss-provider-aws { --ss-provider-color: #e87900; --ss-provider-soft: #fff4e5; --ss-provider-title-color: #754100; }
.ss-provider-gcp { --ss-provider-color: #4285f4; --ss-provider-soft: #edf4ff; --ss-provider-title-color: #2457a6; }
.ss-provider-azure { --ss-provider-color: #0078d4; --ss-provider-soft: #e9f5ff; --ss-provider-title-color: #005b9f; }
.ss-provider-lpi { --ss-provider-color: #b32635; --ss-provider-soft: #fff0f2; --ss-provider-title-color: #851f2c; }
.ss-provider-section h3 { margin: 0 0 13px; padding-bottom: 7px; border-bottom: 3px solid var(--ss-provider-color); color: var(--ss-provider-color); }
.ss-exam-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 12px; }
.ss-exam-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 16px; border: 1px solid var(--ss-border); border-left: 5px solid var(--ss-provider-color); border-radius: 999px; background: #fff; color: #243242 !important; text-decoration: none; box-shadow: 0 2px 7px rgba(15,23,42,.07); }
.ss-exam-link:hover { border-color: var(--ss-provider-color); background: #fff; transform: translateY(-1px); box-shadow: 0 4px 11px rgba(15,23,42,.12); }
.ss-exam-link small { color: var(--ss-muted); white-space: nowrap; }
.ss-story-filters { margin: 0 0 30px; overflow: hidden; border: 1px solid var(--ss-border); border-radius: 8px; background: #fff; }
.ss-filter-row { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: start; }
.ss-filter-row + .ss-filter-row { border-top: 1px solid var(--ss-border); }
.ss-filter-label { align-self: stretch; display: flex; align-items: center; padding: 13px 16px; border-right: 1px solid var(--ss-border); color: #475569; font-weight: 700; }
.ss-filter-options { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 10px 13px; }
.ss-filter-choice { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 11px; border: 1px solid var(--ss-border); border-radius: 6px; background: #fff; color: #334155 !important; font-weight: 600; line-height: 1.35; text-decoration: none; }
.ss-filter-choice:hover { border-color: var(--ss-provider-color,var(--ss-primary)); background: #fff; color: var(--ss-provider-color,var(--ss-primary)) !important; }
.ss-filter-choice.is-active { border-color: var(--ss-provider-color,var(--ss-primary)); box-shadow: inset 0 -3px 0 var(--ss-provider-color,var(--ss-primary)); color: var(--ss-provider-color,var(--ss-primary)) !important; }
.ss-filter-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--ss-provider-color,var(--ss-primary)); }
.ss-filter-disabled { opacity: .38; cursor: not-allowed; }
.ss-filter-disabled:hover { border-color: var(--ss-border); color: #334155 !important; }
.ss-results-title { margin: 0 0 12px; font-size: 1.2em; }
.ss-archive-list { border-top: 2px solid #cbd5e1; }
.ss-archive-header,
.ss-archive-item { display: grid; grid-template-columns: 120px minmax(280px,1.7fr) minmax(180px,1.15fr) minmax(110px,.7fr); align-items: center; gap: 18px; }
.ss-archive-header { padding: 8px 16px 8px 14px; border-bottom: 1px solid var(--ss-border); border-left: 5px solid transparent; background: #eef2f5; color: #475569; font-size: .84em; font-weight: 700; }
.ss-archive-item { min-height: 68px; padding: 10px 16px 10px 14px; border-bottom: 1px solid var(--ss-border); border-left: 5px solid #cbd5e1; background: #fff; color: #334155 !important; text-decoration: none !important; }
.ss-archive-item:nth-of-type(even) { background: #f7f8fa; }
.ss-archive-item:hover { background: #f1f5f9; }
.ss-archive-item.ss-provider-aws { border-left-color: #e87900; }
.ss-archive-item.ss-provider-gcp { border-left-color: #4285f4; }
.ss-archive-item.ss-provider-azure { border-left-color: #39a9dc; }
.ss-archive-item.ss-provider-lpi { border-left-color: #b32635; }
.ss-archive-exam { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; color: #334155; }
.ss-archive-exam strong { color: #334155; }
.ss-archive-date { color: #64748b; white-space: nowrap; }
.ss-archive-title { color: #075fae; font-weight: 700; overflow-wrap: anywhere; text-decoration: none !important; }
.ss-archive-author { color: #475569; overflow-wrap: anywhere; }
.ss-archive-item:hover,
.ss-archive-item:focus,
.ss-archive-item:hover .ss-archive-title,
.ss-archive-item:focus .ss-archive-title { text-decoration: none !important; }
.ss-submit-back-link { margin: 0 0 8px; }
.ss-back-link { display: inline-block; margin: 0 0 18px; color: var(--ss-primary) !important; font-weight: 700; text-decoration: none; }
.ss-back-link-bottom { margin: 24px 0 0; }
.ss-story-list { overflow: hidden; border: 1px solid var(--ss-border); border-radius: 8px; background: #fff; }
.ss-story-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(100px,1fr) minmax(100px,.8fr); gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--ss-border); color: #243242 !important; text-decoration: none; }
.ss-story-row:last-child { border-bottom: 0; }
.ss-story-row:not(.ss-story-header):hover { background: #f2f7fb; }
.ss-story-header { background: #eef2f5; font-weight: 700; }
.ss-pagination { margin: 24px 0; text-align: center; }
.ss-pagination .page-numbers { display: inline-block; min-width: 36px; margin: 2px; padding: 5px 8px; border: 1px solid var(--ss-border); border-radius: 5px; text-decoration: none; }
.ss-pagination .current { background: var(--ss-primary); color: #fff; }
.ss-notice { margin: 15px 0; padding: 13px 15px; border-radius: 6px; }
.ss-notice-warning { border: 1px solid #efcf72; background: #fff8df; }
.ss-notice-error { border: 1px solid #efa4a4; background: #fff0f0; color: #8c1d1d; }
.ss-archive-period-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: .9em; text-align: center; }

.ss-detail-header { margin: 0 0 22px; }
.ss-detail-header h2 { margin: 9px 0 0; }
.ss-exam-badge { display: inline-block; padding: 4px 11px; border: 1px solid #cbd5e1; border-radius: 999px; background: #f1f3f5; color: #334155; font-weight: 700; }
.ss-achievements { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; margin: -5px 0 22px; }
.ss-achievement { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid #d7dee5; border-left-width: 4px; border-radius: 3px; background: #f8fafc; color: #334155; box-shadow: 0 2px 4px rgba(15,23,42,.08); font-size: 80%; font-weight: 700; line-height: 1.35; }
.ss-achievement-aws-all { border-left-color: #d99a00; background: #fff5c7; color: #6b4b00; }
.ss-achievement-aws-associate { border-left-color: #4b8fd8; background: #e9f3ff; color: #24527f; }
.ss-achievement-aws-professional { border-left-color: #cf5365; background: #fdecef; color: #7d2d3a; }
.ss-achievement-ai-master { border-left-color: #8b5cf6; background: #f2eaff; color: #58389e; }
.ss-achievement-lpic-1 { border-left-color: #2b9a92; background: #e8f7f6; color: #216b66; }
.ss-achievement-lpic-2 { border-left-color: #dd6b3d; background: #fff0e8; color: #8a4227; }
.ss-card { margin: 0 0 22px; overflow: hidden; border: 1px solid var(--ss-border); border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.06); }
.ss-card > h3 { margin: 0; padding: 11px 16px; border-left: 4px solid #94a3b8; background: #f3f4f6; color: #263341; font-size: 1.12em; }
.ss-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 15px 18px; gap: 10px 24px; }
.ss-info-grid > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; border-bottom: 1px solid #edf0f3; padding: 5px 0; }
.ss-info-grid dt { font-weight: 700; }
.ss-info-grid dd { margin: 0; overflow-wrap: anywhere; }
.ss-long-text { padding: 18px; white-space: normal; overflow-wrap: anywhere; }
.ss-progress-block,
.ss-exam-history { padding: 18px; }
.ss-progress-summary { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 9px; }
.ss-progress-track { height: 30px; overflow: hidden; border-radius: 999px; background: #e5e9ee; }
.ss-progress-bar { height: 100%; min-width: 2px; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: linear-gradient(90deg,#2a9d5b,#21b6a8); color: #fff; font-weight: 700; }
.ss-exam-history { border-top: 1px solid var(--ss-border); }
.ss-exam-history h4 { margin: 0 0 14px; }
.ss-exam-history h4 small { color: var(--ss-muted); font-weight: 400; }
.ss-score-stamps { display: flex; flex-wrap: wrap; gap: 13px; }
.ss-stamp { width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; text-align: center; }
.ss-stamp-pass { border: 3px solid #db7b20; background: #fff9ee; color: #b85c08; transform: rotate(-6deg); }
.ss-stamp-fail { border: 3px solid #7c8794; background: #f2f4f5; color: #59636e; transform: rotate(5deg); }
.ss-stamp-private,
.ss-stamp-empty { border: 2px dashed #b9c0c8; background: #fafafa; color: #7b8490; }
.ss-stamp span { font-size: .9em; }

@media (max-width: 650px) {
  .ss-browse-page-header { grid-template-columns: 1fr; padding: 12px; text-align: center; }
  .ss-browse-page-header h1,
  .ss-browse-page-header p,
  .ss-browse-page-header .ss-button-link-wrap { grid-column: 1; grid-row: auto; }
  .ss-browse-page-header .ss-button-link-wrap { margin-top: 6px; }
  .ss-filter-row { grid-template-columns: 1fr; }
  .ss-filter-label { padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--ss-border); }
  .ss-filter-options { padding: 10px; }
  .ss-filter-choice { min-height: 36px; }
  .ss-archive-header { display: none; }
  .ss-archive-item { grid-template-columns: 1fr; gap: 5px; padding: 13px 13px 13px 12px; }
  .ss-archive-date,
  .ss-archive-author { font-size: .86em; }
  .ss-story-row { grid-template-columns: minmax(0,1.4fr) minmax(75px,.8fr) minmax(78px,.7fr); gap: 8px; padding: 12px 9px; font-size: .9em; }
  .ss-info-grid { grid-template-columns: 1fr; padding: 12px; }
  .ss-info-grid > div { grid-template-columns: 105px 1fr; }
  .ss-progress-summary { flex-direction: column; gap: 3px; }
  .ss-score-stamps { gap: 8px; }
  .ss-stamp { width: 72px; height: 72px; font-size: .88em; }
}