:root {
      --red: #C8102E; --red-dark: #9e0c23; --ink: #171717;
      --muted: #666b74; --line: #e4e5e8; --bg: #f6f6f7;
      --card: #ffffff; --green: #2e7d32; --amber: #b45309;
      --blue: #1d4ed8; --shadow: 0 2px 14px rgba(0,0,0,0.08); --radius: 8px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.45; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    /* ── Loading ── */
    #loading-overlay {
      position: fixed; inset: 0;
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 999; gap: 1.2rem;
    }
    .spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-overlay p { color: rgba(255,255,255,0.85); font-size: 0.92rem; }

    /* ── Login ── */
    .login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg, var(--red), var(--red-dark)); }
    .login-card { width: min(420px, 100%); background: var(--card); border-radius: 14px; padding: 2rem; box-shadow: 0 20px 70px rgba(0,0,0,0.22); }
    .brand { display: flex; align-items: center; justify-content: flex-start; gap: 0.9rem; margin-bottom: 1.5rem; }
    .brand-logo { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; }
    .brand strong { display: block; font-size: 1.2rem; }
    .brand span { color: var(--muted); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; }
    .login-hint { color: var(--muted); margin-bottom: 1rem; font-size: 0.88rem; }

    /* ── App shell ── */
    .app { display: none; min-height: 100vh; }
    .topbar { height: 64px; background: #191922; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; position: sticky; top: 0; z-index: 20; border-bottom: 3px solid var(--red); }
    .topbar .brand { margin: 0; gap: 0.7rem; }
    .topbar .brand .brand-logo { width: 42px; height: 42px; }
    .topbar .brand span { color: rgba(255,255,255,0.65); }
    .topbar-actions { display: flex; align-items: center; justify-content:flex-end; gap: 0.65rem; flex-wrap: nowrap; margin-left:auto; }
    .topbar small { color: rgba(255,255,255,0.65); }
    .shell { max-width: 1260px; margin: 0 auto; padding: 1.5rem; }

    /* ── Tabs ── */
    .tabs { display: flex; gap: 0.35rem; border-bottom: 2px solid var(--line); margin-bottom: 1.3rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { background: transparent; color: var(--muted); padding: 0.75rem 1rem; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
    .tab.active { color: var(--red); border-bottom-color: var(--red); }
    .mobile-nav { display:none; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(0,0,0,0.1); padding:0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom)); grid-template-columns:repeat(5,1fr); gap:0.2rem; }
    .mobile-nav-btn { background:transparent; color:var(--muted); border-radius:7px; padding:0.42rem 0.2rem; font-size:0.72rem; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:0.12rem; line-height:1.1; min-width:0; }
    .mobile-nav-btn span:first-child { font-size:1.05rem; line-height:1; }
    .mobile-nav-btn.active { color:var(--red); background:#fde7eb; }
    .mobile-more-menu { display:none; position:fixed; left:0.75rem; right:0.75rem; bottom:calc(4.25rem + env(safe-area-inset-bottom)); z-index:31; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 35px rgba(0,0,0,0.22); padding:0.45rem; }
    .mobile-more-menu.open { display:block; }
    .mobile-more-menu button { width:100%; background:transparent; border-radius:7px; padding:0.75rem; text-align:left; font-weight:800; color:var(--ink); }
    .mobile-more-menu button.active { background:#fde7eb; color:var(--red); }
    .panel { display: none; }
    .panel.active { display: block; }

    /* ── Layout ── */
    .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .panel-head h1 { font-size: 1.25rem; }
    .panel-head p { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
    .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .grid { display: grid; gap: 1rem; }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .card.pad { padding: 1rem; }
    .metric { border-left: 4px solid var(--red); min-height: 92px; }
    .metric span { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
    .metric strong { display: block; font-size: 1.8rem; margin-top: 0.25rem; }
    .metric.green { border-left-color: var(--green); }
    .metric.blue { border-left-color: var(--blue); }
    .metric.amber { border-left-color: var(--amber); }

    /* ── Toolbar / Form ── */
    .toolbar { display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
    .search { min-width: 240px; flex: 1; }
    input, select, textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 7px; background: #fff; padding: 0.6rem 0.72rem; color: var(--ink); }
    textarea { min-height: 86px; resize: vertical; }
    input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,0.1); }
    label { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.28rem; }
    .field { margin-bottom: 0.8rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    /* ── Buttons ── */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.58rem 0.9rem; border-radius: 7px; font-family: inherit; font-size: 0.9rem; line-height: 1.2; font-weight: 700; text-transform: none; letter-spacing: 0; margin-bottom: 0; white-space: nowrap; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--red); color: white; }
    .btn-primary:hover { background: var(--red-dark); }
    .btn-secondary { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
    .btn-secondary:hover { border-color: var(--red); color: var(--red); }
    .btn-danger { background: #c62828; color: #fff; }
    .btn-danger:hover { background: #b71c1c; }
    .btn-amber { background: var(--amber); color: #fff; }
    .btn-small { padding: 0.38rem 0.62rem; font-size: 0.82rem; }
    .btn-full { width: 100%; }
    .member-row-actions { display:flex; gap:0.4rem; align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
    .member-row-actions .btn { min-width:86px; }

    /* ── Table ── */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; min-width: 640px; }
    th { background: #f1f1f3; color: var(--muted); text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem; border-bottom: 1px solid var(--line); }
    td { padding: 0.72rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
    tr:last-child td { border-bottom: 0; }
    .muted { color: var(--muted); }

    /* ── Pills ── */
    .pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.15rem 0.52rem; font-size: 0.76rem; font-weight: 800; background: #eee; color: #555; }
    .pill.red { background: #fde7eb; color: var(--red); }
    .pill.green { background: #e8f5e9; color: var(--green); }
    .pill.blue { background: #e8f0ff; color: var(--blue); }
    .pill.amber { background: #fff4df; color: var(--amber); }

    /* ── Stack / Items ── */
    .stack { display: flex; flex-direction: column; gap: 0.55rem; }
    .item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
    .item h3 { font-size: 1rem; margin-bottom: 0.2rem; }
    .item p { color: var(--muted); font-size: 0.88rem; }
    .item .meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
    .empty { text-align: center; color: var(--muted); padding: 2rem; }

    /* ── Modal ── */
    .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.56); z-index: 50; align-items: center; justify-content: center; padding: 1rem; }
    .modal-backdrop.open { display: flex; }
    .modal { width: min(660px, 100%); max-height: 90vh; overflow-y: auto; background: var(--card); border-radius: 12px; padding: 1.4rem; box-shadow: 0 20px 70px rgba(0,0,0,0.24); }
    .modal.modal-wide { width: min(920px, 100%); }
    .modal.modal-xl { width: min(1120px, 100%); }
    .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
    .modal-head h2 { font-size: 1.15rem; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 0.55rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; flex-wrap: wrap; }
    .modal-actions-left { margin-right: auto; }

    /* ── Toast ── */
    .toast { position: fixed; right: 1.3rem; bottom: 1.3rem; background: #161616; color: #fff; padding: 0.85rem 1.1rem; border-radius: 8px; opacity: 0; transform: translateY(80px); transition: all 0.25s ease; z-index: 80; max-width: 340px; font-weight: 700; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { background: var(--green); }
    .toast.error { background: #c62828; }

    /* ── Admin badge ── */
    .admin-badge { background: var(--amber); color: white; font-size: 0.68rem; font-weight: 800; padding: 0.12rem 0.4rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

    /* ── Login tabs ── */
    .login-tabs { display: flex; gap: 0; margin-bottom: 1.2rem; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--line); }
    .login-tab-btn { flex: 1; padding: 0.65rem; font-weight: 700; background: #f6f6f7; color: var(--muted); border: 0; cursor: pointer; font-size: 0.9rem; transition: background 0.15s, color 0.15s; }
    .login-tab-btn.active { background: var(--red); color: white; }

    /* ── Checkbox rows ── */
    .check-label { display: flex; gap: 0.45rem; align-items: center; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--ink); font-weight: 500; margin: 0.3rem 0; }
    .check-label input[type="checkbox"] { width: auto; }

    /* ── Section header ── */
    .section-h2 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }

    /* ── Responsive ── */
    @media (max-width: 860px), (pointer: coarse) {
      .grid.cols-3, .grid.cols-2, .form-row { grid-template-columns: 1fr; }
      .shell { padding: 1rem; }
      body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
      .tabs { display:none; }
      .mobile-nav { display:grid; }
      .topbar { height: auto; min-height:54px; padding: 0.55rem 0.75rem; gap: 0.5rem; flex-direction: row; align-items:center; }
      .topbar .brand { width: auto; min-width:0; }
      .topbar .brand { gap:0.45rem; }
      .topbar .brand strong { font-size:1rem; line-height:1.05; }
      .topbar .brand span { font-size:0.68rem; }
      .topbar .brand .brand-logo { width:28px; height:28px; }
      .topbar-actions { width:auto; justify-content:flex-end; margin-left:auto; gap:0.35rem; }
      .topbar small { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.72rem; }
      .topbar .admin-badge { font-size:0.6rem; padding:0.1rem 0.32rem; }
      .topbar-actions .btn-small { padding:0.34rem 0.5rem; font-size:0.76rem; }
      #panel-members .panel-head { display:block; }
      #panel-members .panel-head .actions { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:1rem; }
      #panel-members .panel-head .actions .btn { width:100%; min-width:0; }
      #panel-members #new-member-btn { grid-column:1 / -1; }
      #panel-members .toolbar { display:grid; grid-template-columns:1fr; gap:0.65rem; }
      #panel-members .toolbar select,
      #panel-members .toolbar .search { width:100%; max-width:none !important; min-width:0; }
      .item { flex-direction: column; }
      .item .actions { width: 100%; }
      .attendance-card { flex-direction: column; }
      .attendance-actions { width: 100%; flex-wrap: nowrap; justify-content: flex-start; }
      .attendance-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 0.45rem; padding-right: 0.45rem; }
      .attendance-card > .attendance-actions { flex-wrap: wrap; }
      .attendance-card > .attendance-actions .btn { flex: 1 1 9.5rem; min-width: 9.5rem; }
    }
    #panel-dashboard .grid.cols-2 { grid-template-columns: 1fr; }
  
    /* ── Kalender ── */
    .cal-toolbar { display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; margin:0.6rem 0 1rem; }
    .cal-view-switch { display:flex; gap:0.55rem; flex-wrap:wrap; }
    .cal-legend { display:flex; align-items:center; justify-content:flex-end; gap:0.28rem; flex-wrap:wrap; margin-left:auto; font-size:0.8rem; }
    #panel-calendar .panel-head,
    #panel-calendar .cal-toolbar { position: sticky; z-index: 14; background: var(--bg); }
    #panel-calendar .panel-head { top: 64px; }
    #panel-calendar .cal-toolbar { top: 118px; padding: 0.35rem 0; }
    .cal-view-btn { background:#fff; border:1.5px solid var(--line); border-radius:7px; padding:0.5rem 0.9rem; font-weight:700; color:var(--muted); cursor:pointer; }
    .cal-view-btn.active { background:var(--red); border-color:var(--red); color:#fff; }
    .cal-nav { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem; }
    .cal-nav button { background:#fff; border:1.5px solid var(--line); border-radius:7px; padding:0.4rem 0.85rem; font-size:1.1rem; cursor:pointer; font-weight:700; }
    .cal-nav button:hover { border-color:var(--red); color:var(--red); }
    .cal-nav strong { font-size:1.1rem; min-width:160px; text-align:center; }
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-hdr, .cal-header-cell { background:#f1f1f3; color:var(--muted); font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:0.4rem; text-align:center; border-radius:4px; }
    .cal-day { min-height:72px; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:4px 5px; overflow:hidden; }
    .cal-day.other-month { background:#f8f8f9; }
    .cal-day.other-month .cal-day-num { color:#ccc; }
    .cal-day.today { border:2px solid var(--red); }
    .cal-day-num { font-size:0.75rem; font-weight:700; color:var(--muted); margin-bottom:2px; }
    .cal-day.today .cal-day-num { color:var(--red); }
    .cal-ev { font-size:0.68rem; border-radius:3px; padding:1px 4px; margin:1px 0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
    .cal-ev:hover { opacity:.8; }
    .cal-ev.ev-Training { background:#fde7eb; color:var(--red); }
    .cal-ev.ev-Spiel    { background:#e8f0ff; color:var(--blue); }
    .cal-ev.ev-Event    { background:#fff4df; color:var(--amber); }
    .cal-ev.ev-more     { color:var(--muted); background:transparent; }
    .attendance-actions { display:flex; gap:0.4rem; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
    .attendance-controls { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-top:0.45rem; }
    .attendance-controls .attendance-status { margin-top:0; }
    .attendance-controls .attendance-actions { width:auto; margin-top:0 !important; justify-content:flex-start; }
    .attendance-summary { display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center; margin-top:0.45rem; font-size:0.82rem; }
    .attendance-status { margin-top:0.4rem; font-size:0.82rem; color:var(--muted); }
    .attendance-card { margin-bottom:0.4rem; display:flex; justify-content:space-between; gap:0.8rem; align-items:flex-start; }
    .event-attendance-card { align-items:center; }
    .event-attendance-main { min-width:0; flex:1 1 auto; }
    .event-attendance-side { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:0.45rem; }
    .event-attendance-side .attendance-summary,
    .event-attendance-side .attendance-controls { margin-top:0; justify-content:flex-end; }
    .event-attendance-side .attendance-controls { display:flex; align-items:center; gap:0.5rem; }
    .event-attendance-side .attendance-actions { margin-top:0; }
    .participant-table table { min-width:0; }
    .participant-table th:nth-child(1), .participant-table td:nth-child(1) { width:46%; }
    .participant-table th:nth-child(2), .participant-table td:nth-child(2) { width:24%; }
    .participant-table th:nth-child(3), .participant-table td:nth-child(3) { width:30%; }
    .participant-detail-mobile { display:none; }
    .trainer-player-table th:nth-child(1), .trainer-player-table td:nth-child(1) { width:38%; }
    .trainer-player-table th:nth-child(2), .trainer-player-table td:nth-child(2) { width:22%; }
    .trainer-player-table th:nth-child(3), .trainer-player-table td:nth-child(3) { width:25%; }
    .trainer-player-table th:nth-child(4), .trainer-player-table td:nth-child(4) { width:15%; }
    .trainer-player-action { min-width:5.8rem; padding-left:0.45rem; padding-right:0.45rem; }
    @media(max-width:860px), (pointer: coarse){
      #panel-calendar { padding-bottom:calc(5.4rem + env(safe-area-inset-bottom)); }
      .cal-toolbar { display:grid; grid-template-columns:1fr; gap:0.55rem; margin-top:0.45rem; }
      .cal-view-switch { display:grid; grid-template-columns:1fr 1fr; gap:0.45rem; }
      .cal-view-btn { width:100%; padding:0.62rem 0.55rem; }
      .cal-legend { justify-content:flex-start; margin-left:0; font-size:0.74rem; color:var(--muted); }
      .cal-legend::before { content:"Farben:"; font-weight:700; margin-right:0.2rem; color:var(--muted); }
      .cal-legend .cal-ev { font-size:0.68rem; padding:2px 7px !important; margin-left:0 !important; }
      .cal-nav { display:grid; grid-template-columns:2.2rem 1fr 2.2rem auto; gap:0.45rem; align-items:center; }
      .cal-nav strong { min-width:0; font-size:1.05rem; }
      .cal-nav button { padding:0.48rem 0.58rem; }
      .cal-nav .btn-small { font-size:0.82rem; }
      .cal-day{ min-height:78px; padding:3px; }
      .cal-ev{ display:block; font-size:0.58rem; padding:1px 3px; max-width:100%; }
      #panel-calendar .panel-head { top:54px; }
      #panel-calendar .cal-toolbar { top:108px; }
      .cal-day.today .cal-day-num{ font-size:0.9rem; }
      .attendance-card { gap:0.55rem; }
      .attendance-summary { margin-top:0.55rem; }
      .attendance-summary .pill { font-size:0.7rem; padding:0.12rem 0.42rem; }
      .attendance-controls { display:block; width:100%; margin-top:0.42rem; }
      .attendance-controls .attendance-status { margin-bottom:0.38rem; }
      .attendance-controls .attendance-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.35rem; width:100%; min-width:0; }
      .attendance-controls .attendance-actions .btn { width:100%; min-width:0; padding:0.42rem 0.3rem; font-size:0.74rem; white-space:normal; line-height:1.12; }
      .attendance-controls .attendance-actions .btn:only-child { grid-column:1 / -1; }
      .event-attendance-card { align-items:flex-start; }
      .event-attendance-side { width:100%; align-items:flex-start; gap:0.38rem; }
      .event-attendance-side .attendance-summary,
      .event-attendance-side .attendance-controls { justify-content:flex-start; }
      .event-attendance-side .attendance-controls { display:block; width:100%; }
      .event-attendance-side .attendance-actions { width:100%; }
      .participant-table { overflow:visible !important; max-height:none !important; }
      .participant-table table { min-width:0; table-layout:fixed; }
      .participant-table th, .participant-table td { padding:0.48rem 0.55rem; font-size:0.82rem; }
      .participant-table th:nth-child(1), .participant-table td:nth-child(1) { width:55%; }
      .participant-table th:nth-child(2), .participant-table td:nth-child(2) { width:45%; text-align:right; }
      .participant-table th:nth-child(3), .participant-table td:nth-child(3) { display:none; }
      .participant-table .pill { font-size:0.68rem; padding:0.12rem 0.42rem; }
      .trainer-player-table th:nth-child(1), .trainer-player-table td:nth-child(1) { width:42%; }
      .trainer-player-table th:nth-child(2), .trainer-player-table td:nth-child(2) { width:31%; text-align:right; }
      .trainer-player-table th:nth-child(3), .trainer-player-table td:nth-child(3) { display:none; }
      .trainer-player-table th:nth-child(4), .trainer-player-table td:nth-child(4) { display:table-cell; width:27%; text-align:right; }
      .trainer-player-action { width:100%; min-width:0; padding:0.3rem 0.22rem; font-size:0.68rem; line-height:1.1; }
      .participant-detail-mobile { display:block; margin-top:0.22rem; font-size:0.72rem; line-height:1.25; color:var(--muted); white-space:normal; }
      tr[style*="fde7eb"] .participant-detail-mobile { color:var(--red); }
    }

    /* ── Training: Kategorien & Fokus ── */
    .training-category { margin-bottom: 1.1rem; }
    .training-cat-hdr { font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0.4rem 0.65rem; background:var(--bg); border-radius:6px; margin-bottom:0.4rem; display:flex; align-items:center; gap:0.5rem; border:1px solid var(--line); }
    .training-cat-items { display:flex; flex-direction:column; gap:0.5rem; }
    .focus-theme-section { margin-top:1.5rem; padding-top:1.2rem; border-top:2px solid var(--line); }
    .focus-theme-section-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.75rem; }
    /* ── Info-Box ── */
    .info-box { background:#eef3ff; border:1.5px solid #c7d7ff; border-radius:8px; margin-bottom:1.2rem; overflow:hidden; }
    .info-box-head { padding:0.65rem 1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:0.9rem; color:var(--blue); user-select:none; }
    .info-box-head:hover { background:#e0eaff; }
    .info-box-body { padding:0 1rem 1rem; font-size:0.87rem; line-height:1.65; color:var(--ink); }
    .info-box-body strong { color:var(--blue); }
    .info-box-body .info-row { display:flex; gap:0.6rem; margin-bottom:0.55rem; }
    .info-box-body .info-icon { font-size:1.1rem; flex-shrink:0; margin-top:0.05rem; }
    .info-box-chevron { font-size:0.75rem; transition:transform 0.2s; }
    .info-box-chevron.closed { transform:rotate(-90deg); }