html { background: #0a377a; }
  :root {
    --font-ui: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --bg: #0a377a;
    --bg2: #f3ede3;
    --bg3: #ece4d6;
    --surface: #ffffff;
    --border: #e8dfd0;
    --border2: #d4c8b5;
    --text: #2c2418;
    --text2: #444444;
    --text3: #666666;
    --accent: #FED51B;
    --accent2: #e8c000;
    --accent-bg: #fdf0e8;
    --green: #3d7a5c;
    --green-bg: #edf5f0;
    --amber: #c08820;
    --amber-bg: #fdf6e3;
    --red: #b83030;
    --red-bg: #fdeaea;
    --shadow: 0 2px 8px rgba(0,0,0,0.22), 0 6px 24px rgba(0,0,0,0.18);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.22), 0 6px 24px rgba(0,0,0,0.18);
    --radius: 14px;
    --radius-sm: 8px;
  }



  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    max-width: 480px;
    margin: 0 auto;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Forza testo scuro su sfondo accento (giallo) */
  [style*="var(--accent)"] { color: #1a1a1a !important; }
  .sondaggi-tab-attiva { background-color: var(--accent) !important; color: #1a1a1a !important; font-weight: 700 !important; }

  /* HEADER */
  #header {
    background: var(--surface);
    padding: 1px 6px 1px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .header-inner { display: flex; align-items: center; gap: 10px; }
  #header-version { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8px; font-weight: 400; color: #a9adb5; letter-spacing: 0.4px; line-height: 1; white-space: nowrap; flex-shrink: 0; }
  .header-icon {
    width: 42px; height: 42px;
    background: var(--accent-bg);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }
  #header h1 { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.12; color: #0a377a; letter-spacing: -0.1px; font-weight: 800; white-space: nowrap; overflow: hidden; }
  #header h1 span { display: block; }
  #header p { font-size: 10px; line-height: 1.15; color: var(--text3); margin-top: 3px; letter-spacing: 0.1px; font-weight: 500; font-style: italic; }
  .hdr-btn { position: relative; width: 30px; height: 30px; border-radius: 9px; background: #eef3fb; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; border: none; padding: 0; transition: background 0.2s; }
  .hdr-btn .hdr-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: #16a34a; transition: background 0.2s; }

  /* NAV */
  #nav {
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 49;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    gap: 2px;
  }
  .nav-btn {
    flex: 1; padding: 8px 2px 14px;
    border: none; background: transparent;
    color: #5a6270; font-size: 12px;
    cursor: pointer; font-family: var(--font-ui);
    font-weight: 600; letter-spacing: 0.2px;
    position: relative;
    transition: all 0.18s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .nav-btn.active { color: #0a377a; font-weight: 800; }
  .nav-btn.active::after {
    content: ''; position: absolute; bottom: 5px; left: 50%;
    width: 26px; height: 2px; margin-left: -13px; border-radius: 2px;
    background: var(--accent);
  }

  /* CONTENT */
  #content { padding: 20px 16px; padding-bottom: 80px; }
  .view { box-sizing: border-box; }
  #swipe-container {
    width: 100%;
  }
  #swipe-container .view {
    display: none;
    box-sizing: border-box;
  }
  #swipe-container .view.active {
    display: block;
  }
  #swipe-wrapper {
    width: 100%;
  }
  .view.active { /* active view tracked by translateX */ }

  /* SECTION TITLE */
  #storico-anno-wrap { position: relative; margin-bottom: 14px; }
  #storico-anno {
    width: 100%; box-sizing: border-box; text-align: left;
    padding: 13px 14px; border-radius: 12px;
    border: 2px solid var(--accent); color: #0a377a; background: #fff;
    font-family: var(--font-ui); font-size: 16px; font-weight: 700;
    outline: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
  }
  #storico-anno svg { transition: transform .15s; flex: none; }
  #storico-anno[aria-expanded="true"] svg { transform: rotate(180deg); }
  #storico-anno-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: #fff; border: 2px solid var(--accent); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow-y: auto; max-height: 280px;
    -webkit-overflow-scrolling: touch;
  }
  .sta-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 14px; color: #0a377a; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid #e6e9f0; cursor: pointer;
  }
  .sta-item:last-child { border-bottom: 0; }
  .sta-item small { color: #6b7385; font-weight: 500; font-size: 12px; }
  .sta-item.on { background: var(--accent); font-weight: 800; }
  .sta-item.on small { color: #0a377a; }
  .sta-ck { margin-right: 8px; }
  #rep-drop-wrap { position: relative; margin-bottom: 14px; }
  #rep-drop {
    width: 100%; box-sizing: border-box; text-align: left;
    padding: 13px 14px; border-radius: 12px;
    border: 2px solid var(--accent); color: #0a377a; background: #fff;
    font-family: var(--font-ui); font-size: 16px; font-weight: 700;
    outline: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
  }
  #rep-drop > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #rep-drop svg { transition: transform .15s; flex: none; }
  #rep-drop[aria-expanded="true"] svg { transform: rotate(180deg); }
  #rep-drop-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: #fff; border: 2px solid var(--accent); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow-y: auto; max-height: 320px;
    -webkit-overflow-scrolling: touch;
  }
  .rep-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
  .sta-item > span { display: flex; align-items: center; gap: 10px; }
  .sond-rep-btn {
    width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px 14px; border-radius: 12px;
    border: 2px solid var(--accent); color: #0a377a; background: #fff;
    font-family: var(--font-ui); font-size: 16px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
  }
  .sond-rep-btn svg { transition: transform .15s; flex: none; }
  .sond-rep-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sond-rep-panel { margin-top: 8px; border: 2px solid var(--accent); border-radius: 14px; overflow: hidden; background: #fff; }
  #storico-cerca::-webkit-search-cancel-button, #storico-cerca::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .section-title {
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.75); letter-spacing: 1.8px;
    text-transform: uppercase; margin-bottom: 14px;
    margin-top: 4px;
  }

  /* CARDS */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }
  .card.accent-border { border-color: var(--accent2); }
  .card.selected { border-color: var(--accent); background: var(--accent-bg); }

  /* STAT GRID */
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 7px;
    box-shadow: var(--shadow-sm); text-align: left;
    display: flex; align-items: center; gap: 7px;
  }
  .stat-icon { font-size: 18px; min-height: unset; margin-bottom: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .stat-val { font-family: var(--font-ui); font-size: 26px; color: var(--text); line-height: 1; }
  .stat-label { font-size: 11px; color: #666666; margin-top: 2px; letter-spacing: 0.2px; font-weight: 600; text-transform: uppercase; }

  /* EVENT CHIP */
  .chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 14px; }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .event-chip {
    flex-shrink: 0; padding: 10px 14px; border-radius: 12px;
    background: var(--surface); border: 1.5px solid var(--border);
    cursor: pointer; min-width: 120px; transition: all 0.15s;
  }
  .event-chip.active { background: var(--accent); border-color: var(--accent); }
  .event-chip .ec-date { font-size: 11px; font-weight: 600; color: var(--text2); }
  .event-chip.active .ec-date { color: rgba(255,255,255,0.85); }
  .event-chip .ec-name { font-size: 11px; color: var(--text3); margin-top: 3px; font-weight: 500; }
  .event-chip.active .ec-name { color: rgba(255,255,255,0.75); }

  /* FILTER CHIPS */
  .filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; margin-bottom: 14px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
    border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text2); font-size: 13px; cursor: pointer;
    font-family: var(--font-ui); font-weight: 500;
    transition: all 0.15s;
  }
  .filter-chip.active { border-color: var(--accent); background: var(--accent); color: #1a1a1a; }

  /* SEARCH */
  .search-wrap { position: relative; margin-bottom: 14px; }
  .search-wrap::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%230a377a'/><circle cx='11' cy='11' r='4.8' fill='none' stroke='white' stroke-width='2.2'/><path d='M14.6 14.6l4 4' stroke='%23FED51B' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center / contain; }
  input[type=text], input[type=date] {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
  }
  .edit-card .form-label { color: #5a3a1e; }
  input[type=url] { width:100%; background: var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; color: var(--text); font-family: var(--font-ui); font-size:14px; outline:none; transition: border-color 0.15s; }
  .search-wrap input { padding-left: 36px; }
  input:focus { border-color: var(--accent2); }
  input::placeholder { color: var(--text3); }

  /* MEMBER ROW */
  .member-row {
    display: flex; align-items: center;
    padding: 12px 14px; background: var(--surface);
    border-radius: var(--radius-sm); margin-bottom: 6px;
    gap: 12px; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: background 0.15s;
  }
  .member-row.present { background: var(--green-bg); border-color: #c5dfd3; }
  .member-row.top3 { background: var(--amber-bg); border-color: #e8d8a0; }

  /* TOGGLE */
  .toggle {
    width: 55px; height: 31px; border-radius: 16px;
    background: var(--bg3); border: 1.5px solid var(--border2);
    cursor: pointer; position: relative; flex-shrink: 0;
    transition: all 0.2s;
  }
  .toggle.on { background: var(--green); border-color: var(--green); }
  .toggle-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; position: absolute; top: 2px; left: 2px;
    transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .toggle.on .toggle-dot { left: 26px; }
  .toggle.pres-bloccato { opacity: .45; cursor: not-allowed; }

  /* RIGHE PRESENZE: cerchio con spunta */
  .pres-row { padding: 9px 14px; gap: 14px; }
  .pres-row .toggle {
    width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
    background: transparent; border: 2px solid #cfc6b4;
    display: flex; align-items: center; justify-content: center;
  }
  .pres-row .toggle.on {
    background: var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 14px 14px;
    border-color: var(--green);
  }
  .pres-row .toggle-dot { display: none; }
  .pres-row .fs13.fw6 { font-size: 14px; font-weight: 800; text-transform: uppercase; }

  /* BADGE */
  .badge {
    display: inline-block; font-size: 11px;
    padding: 3px 10px; border-radius: 20px;
    font-family: var(--font-ui); font-weight: 600;
    letter-spacing: 0.3px; opacity: 0.92;
  }

  /* BUTTONS */
  .btn { border: none; border-radius: var(--radius-sm); padding: 11px 22px; cursor: pointer; font-size: 15px; font-family: var(--font-ui); font-weight: 600; transition: all 0.15s; }
  .btn-primary { background: var(--accent); color: #1a1a1a; }
  .btn-primary:active { background: #a84e22; }
  .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid #f0c8c8; padding: 5px 12px; font-size: 13px; }
  .btn-ghost { background: transparent; color: var(--text2); border: 1.5px solid var(--border); }
  .btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; }

  /* PROGRESS BAR */
  .bar-wrap { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-top: 8px; }
  .bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .bar-high { background: var(--green); }
  .bar-mid { background: var(--amber); }
  .bar-low { background: var(--accent); }

  /* DIVIDER */
  .divider { height: 1px; background: var(--border); margin: 20px 0; }

  /* FORM */
  .form-group { margin-bottom: 10px; }
  .form-label { font-size: 13px; color: rgba(255,255,255,0.75); display: block; margin-bottom: 5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }

  /* EVENT INFO CARD */
  .ev-info {
    background: var(--accent); border-radius: var(--radius);
    padding: 16px; margin-bottom: 14px; color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 6px 24px rgba(0,0,0,0.18);
  }
  .ev-info .ev-name { font-family: var(--font-ui); font-size: 22px; font-weight: 800; line-height: 1.2; }
  .ev-info .ev-meta { font-size: 14px; opacity: 1; margin-top: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
  .ev-info .ev-count { font-family: var(--font-ui); font-size: 36px; margin-top: 10px; line-height: 1; }
  .ev-info .ev-total { font-size: 14px; opacity: 0.75; }
  .ev-info .bar-wrap { background: rgba(0,0,0,0.15); margin-top: 10px; }
  .ev-info .bar-fill { background: rgba(0,0,0,0.5); }

  /* STAT REPARTO */
  .rep-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
    margin-bottom: 8px; box-shadow: var(--shadow-sm);
  }

  /* PRESENCE MARK */
  .present-mark { font-size: 16px; font-weight: 700; flex-shrink: 0; width: 22px; text-align: center; }

  /* UTILITY */
  .flex { display: flex; }
  .flex-between { display: flex; justify-content: space-between; align-items: flex-start; }
  .flex-center { display: flex; align-items: center; }
  .gap6 { gap: 6px; }
  .gap8 { gap: 8px; }
  .gap12 { gap: 12px; }
  .flex1 { flex: 1; min-width: 0; }
  .flex-right { text-align: right; flex-shrink: 0; }
  .name-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .mt4 { margin-top: 4px; }
  .mt8 { margin-top: 8px; }
  .mt20 { margin-top: 24px; }
  .mb10 { margin-bottom: 10px; }
  .fw6 { font-weight: 600; }
  .fw5 { font-weight: 500; }
  .fs11 { font-size: 13px; }
  .fs12 { font-size: 14px; }
  .fs13 { font-size: 16px; }
  .fs15 { font-size: 18px; }
  .fs14 { font-size: 17px; }
  .fs18 { font-size: 22px; }
  .c-text { color: var(--text); }
  .c-text2 { color: var(--text2); }
  .c-text3 { color: var(--text3); }
  .c-accent { color: var(--accent); }
  .c-green { color: var(--green); }
  .c-red { color: var(--red); }
  .c-amber { color: var(--amber); }
  .serif { font-family: var(--font-ui); }

  /* EMPTY STATE */
  .empty { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.75); font-size: 13px; }

  /* TOAST */
  #toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    padding: 10px 22px; border-radius: 30px;
    font-size: 13px; z-index: 999; font-family: var(--font-ui);
    font-weight: 500; white-space: nowrap; display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }
  #toast.ok { background: var(--green); color: #fff; }
  #toast.warn { background: var(--red); color: #fff; }

  .header-icon img { width:100%; height:100%; object-fit:cover; border-radius:10px; }

  /* GESTIONE MENU */
  .gmenu-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 16px;
    margin-bottom: 10px; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow-sm); transition: all 0.15s;
  }
  .gmenu-card:active { background: var(--bg2); transform: scale(0.98); }
  .gmenu-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
  .gmenu-label { font-size: 18px; font-weight: 600; color: var(--text); }
  .gmenu-sub   { font-size: 14px; color: var(--text3); margin-top: 2px; }
  .gmenu-arrow { margin-left: auto; color: var(--text3); font-size: 22px; flex-shrink: 0; }

  .back-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); border: none; color: #ffffff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); padding: 8px 16px; margin-bottom: 18px; border-radius: 20px; }

  /* GESTIONE TABS */
  .edit-card { background: var(--accent-bg); border: 1.5px solid var(--accent2); border-radius: var(--radius); padding: 14px; margin-bottom: 8px; }

  select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b0a090' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; }
  #save-bar {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 12px 16px; display: none;
    align-items: center; justify-content: space-between; gap: 12px;
    z-index: 60; box-shadow: 0 -4px 20px rgba(44,36,24,0.10);
  }
  #save-bar.visible { display: flex; }
  .save-bar-msg { font-size: 13px; font-weight: 500; color: var(--text2); }
  .save-bar-msg span { color: var(--accent); font-weight: 700; }
  .save-bar-btns { display: flex; gap: 8px; flex-shrink: 0; }

  /* MODAL */
  #modal-overlay {
    position: fixed; inset: 0; background: rgba(44,36,24,0.45);
    z-index: 100; display: none; align-items: flex-end; justify-content: center;
  }
  #modal-overlay.visible { display: flex; }
  #modal-box {
    background: var(--surface); border-radius: 20px 20px 0 0;
    padding: 24px 20px 36px; width: 100%; max-width: 480px;
    animation: slideUp 0.22s ease;
  }
  /* ─── PIN KEYPAD ─── */
  .pin-dot { width:13px;height:13px;border-radius:50%;background:#ddd;transition:background 0.15s;display:inline-block; }
  .pin-dot.filled { background:#0a377a; }
  .pin-btn { background:#f5f5f5;border:1.5px solid #ddd;border-radius:12px;padding:14px;font-size:20px;font-weight:700;color:#333;cursor:pointer;transition:all 0.15s;font-family:var(--font-ui);width:100%; }
  .pin-btn:active { background:#FED51B;color:white;transform:scale(0.95);border-color:#FED51B; }

  @keyframes slideUp { from { transform: translateY(40px); opacity:0; } to { transform: translateY(0); opacity:1; } }
  .modal-title { font-family: var(--font-ui); font-size: 18px; color: var(--text); margin-bottom: 8px; }
  .modal-body  { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 20px; }
  .modal-btns  { display: flex; flex-direction: column; gap: 8px; }
  .btn-full    { width: 100%; padding: 13px; font-size: 14px; border-radius: 12px; }

  /* Dark mode — bordo dorato su tutti i riquadri */
  body.dark .card,
  body.dark .stat-card,
  body.dark .member-row,
  body.dark .rep-card,
  body.dark .gmenu-card,
  body.dark .event-chip {
    border: 1.5px solid rgba(240, 192, 64, 0.55);
  }
  body.dark .member-row.present { border: 1.5px solid rgba(72, 184, 120, 0.6); }
  body.dark .card.accent-border { border: 1.5px solid rgba(240, 192, 64, 0.85); }
  /* Isola il reflow delle liste dal resto del documento —
     previene la chiusura della tastiera su mobile quando la lista si aggiorna */
  #presenze-member-list { contain: layout style; }
  #stat-bandisti-list   { contain: layout style; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .view.active { /* active view tracked by translateX */ }

  /* STATISTICHE — card riepilogo banda e anteprime (5.5.238) */
  .sb-card { padding: 0; overflow: hidden; margin-bottom: 12px; }
  .sb-strip { height: 5px; background: var(--accent); }
  .sb-body { padding: 14px 16px 16px; }
  .sb-cap { font-size: 12px; font-weight: 700; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; }
  .sb-top { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
  .sb-ring { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sb-ring i { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-style: normal; }
  .sb-ring b { font-size: 26px; line-height: 1; }
  .sb-ring s { text-decoration: none; font-size: 10px; color: var(--text3); margin-top: 2px; }
  .sb-kp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .sb-k { display: flex; align-items: center; gap: 10px; }
  .sb-k img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; flex-shrink: 0; }
  .sb-k b { font-size: 22px; line-height: 1; display: block; color: var(--text); }
  .sb-k span { font-size: 12px; color: var(--text3); }
  .sb-trend { margin-top: 12px; padding: 8px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
  .sb-trend.up { background: var(--green-bg); color: var(--green); }
  .sb-trend.down { background: var(--red-bg); color: var(--red); }
  .sb-trend.eq { background: var(--bg2); color: var(--text3); }
  .gmenu-card.sb-menu { display: block; padding: 0 0 14px; }
  .sb-menu-head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 12px; }
  .sb-prev { padding: 0 16px; }
  .sb-prev-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); margin-top: 7px; }
  .sb-prev-row b { color: var(--text); }
  .sb-prev-bar { height: 6px; border-radius: 4px; background: #efe6d8; margin-top: 3px; overflow: hidden; }
  .sb-prev-bar i { display: block; height: 100%; border-radius: 4px; }