| :root { |
| --bg: #f4f7fb; |
| --surface: rgba(255, 255, 255, 0.88); |
| --surface-strong: #ffffff; |
| --text: #122033; |
| --muted: #607089; |
| --primary: #147d72; |
| --primary-strong: #0e5d55; |
| --accent: #ffb84d; |
| --danger: #d64545; |
| --border: rgba(18, 32, 51, 0.08); |
| --shadow: 0 24px 60px rgba(19, 39, 71, 0.12); |
| --radius: 24px; |
| } |
|
|
| .stApp { |
| background: |
| radial-gradient(circle at top left, rgba(20, 125, 114, 0.1), transparent 22%), |
| radial-gradient(circle at top right, rgba(255, 184, 77, 0.12), transparent 20%), |
| linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%); |
| color: var(--text); |
| } |
|
|
| [data-testid="stAppViewContainer"] > .main { |
| max-width: none; |
| width: 100%; |
| padding-top: 0.35rem; |
| padding-bottom: 1rem; |
| padding-left: 0.75rem; |
| padding-right: 0.75rem; |
| } |
|
|
| [data-testid="stHeader"] { |
| background: transparent; |
| } |
|
|
| [data-testid="stToolbar"] { |
| right: 1rem; |
| } |
|
|
| .hero-shell { |
| padding: 0.65rem 0.8rem; |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.88)); |
| box-shadow: 0 4px 10px rgba(19, 39, 71, 0.04); |
| margin-bottom: 0.35rem; |
| } |
|
|
| .hero-row { |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| } |
|
|
| .hero-eyebrow { |
| display: inline-block; |
| font-size: 0.75rem; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: var(--primary); |
| margin-bottom: 0.3rem; |
| } |
|
|
| .hero-title { |
| font-size: clamp(1.1rem, 1.5vw, 1.4rem); |
| line-height: 1.1; |
| font-weight: 800; |
| margin: 0; |
| } |
|
|
| [data-testid="stVerticalBlockBorderWrapper"] { |
| border-radius: 14px; |
| border-color: rgba(18, 32, 51, 0.08) !important; |
| background: var(--surface); |
| box-shadow: 0 2px 8px rgba(19, 39, 71, 0.03); |
| padding: 0.02rem 0.08rem; |
| margin-bottom: 0.4rem; |
| } |
|
|
| [data-testid="stVerticalBlockBorderWrapper"] > div { |
| background: transparent !important; |
| } |
|
|
| .card-rank-marker { |
| width: 100%; |
| height: 0; |
| } |
|
|
| [data-testid="stVerticalBlockBorderWrapper"]:has(.card-rank-danger) { |
| background: linear-gradient(180deg, rgba(255, 229, 229, 0.98), rgba(255, 241, 241, 0.98)) !important; |
| border-color: rgba(214, 69, 69, 0.28) !important; |
| } |
|
|
| [data-testid="stVerticalBlockBorderWrapper"]:has(.card-rank-warning) { |
| background: linear-gradient(180deg, rgba(255, 244, 214, 0.98), rgba(255, 249, 233, 0.98)) !important; |
| border-color: rgba(255, 184, 77, 0.28) !important; |
| } |
|
|
| [data-testid="stVerticalBlockBorderWrapper"]:has(.card-rank-default) { |
| background: rgba(255, 255, 255, 0.94) !important; |
| } |
|
|
| .card-status { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 100%; |
| min-height: 22px; |
| border-radius: 999px; |
| background: rgba(20, 125, 114, 0.1); |
| color: var(--primary-strong); |
| font-size: 0.66rem; |
| font-weight: 800; |
| } |
|
|
| .end-time-inline { |
| padding-top: 0.05rem; |
| text-align: right; |
| border-radius: 10px; |
| padding: 0.22rem 0.38rem; |
| } |
|
|
| .end-time-inline-accent { |
| background: rgba(20, 125, 114, 0.18); |
| } |
|
|
| .end-time-inline-label { |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| font-size: 0.62rem; |
| font-weight: 800; |
| } |
|
|
| .end-time-inline-value { |
| color: var(--text); |
| font-size: 1rem; |
| line-height: 1.1; |
| font-weight: 800; |
| margin-top: 0.06rem; |
| } |
|
|
| .empty-state { |
| border: 1px dashed rgba(18, 32, 51, 0.18); |
| border-radius: 24px; |
| padding: 2.5rem 1.5rem; |
| text-align: center; |
| background: rgba(255, 255, 255, 0.68); |
| } |
|
|
| .empty-state h3 { |
| margin-bottom: 0.3rem; |
| } |
|
|
| .empty-state p { |
| margin: 0; |
| color: var(--muted); |
| } |
|
|
| .stTextInput label, |
| .stNumberInput label { |
| color: var(--text) !important; |
| font-weight: 700 !important; |
| font-size: 0.88rem !important; |
| } |
|
|
| .stTextInput input { |
| border-radius: 10px !important; |
| border: 1px solid rgba(18, 32, 51, 0.12) !important; |
| background: var(--surface-strong) !important; |
| min-height: 32px !important; |
| font-size: 1rem !important; |
| font-weight: 700 !important; |
| padding-top: 0.35rem !important; |
| padding-bottom: 0.35rem !important; |
| } |
|
|
| .stNumberInput input { |
| border-radius: 10px !important; |
| border: 1px solid rgba(18, 32, 51, 0.12) !important; |
| background: var(--surface-strong) !important; |
| min-height: 32px !important; |
| text-align: center !important; |
| font-weight: 700 !important; |
| } |
|
|
| .stButton > button { |
| border-radius: 999px !important; |
| min-height: 30px !important; |
| font-weight: 700 !important; |
| font-size: 0.8rem !important; |
| border: 1px solid transparent !important; |
| transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; |
| padding-top: 0.2rem !important; |
| padding-bottom: 0.2rem !important; |
| } |
|
|
| .primary-action > button { |
| background: linear-gradient(135deg, var(--primary), #1a9f90) !important; |
| color: white !important; |
| box-shadow: 0 3px 8px rgba(20, 125, 114, 0.12) !important; |
| } |
|
|
| .check-action > button { |
| background: rgba(18, 32, 51, 0.08) !important; |
| color: var(--text) !important; |
| border-color: rgba(18, 32, 51, 0.12) !important; |
| } |
|
|
| .reset-action > button { |
| background: rgba(255, 184, 77, 0.16) !important; |
| color: #8b5a00 !important; |
| border-color: rgba(255, 184, 77, 0.28) !important; |
| } |
|
|
| [data-testid="stRadio"] label { |
| font-weight: 700 !important; |
| } |
|
|
| [data-testid="stRadio"] > div { |
| gap: 0.45rem !important; |
| } |
|
|
| .primary-action > button:hover { |
| background: linear-gradient(135deg, var(--primary-strong), var(--primary)) !important; |
| } |
|
|
| .secondary-action > button { |
| background: white !important; |
| color: var(--text) !important; |
| border-color: rgba(18, 32, 51, 0.12) !important; |
| } |
|
|
| .danger-action > button { |
| background: rgba(214, 69, 69, 0.08) !important; |
| color: var(--danger) !important; |
| border-color: rgba(214, 69, 69, 0.16) !important; |
| } |
|
|
| .compact-button > button { |
| min-height: 32px !important; |
| } |
|
|
| @media (max-width: 768px) { |
| [data-testid="stAppViewContainer"] > .main { |
| padding-top: 0.6rem; |
| padding-left: 0.5rem; |
| padding-right: 0.5rem; |
| } |
|
|
| .hero-row { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .hero-shell { |
| padding: 0.75rem; |
| border-radius: 14px; |
| } |
|
|
| [data-testid="stHorizontalBlock"] { |
| gap: 0.35rem !important; |
| } |
|
|
| .end-time-inline { |
| text-align: left; |
| } |
| } |
|
|
