:root {
      --navy:        #0d1f35;
      --navy-mid:    #152b47;
      --navy-light:  #1e3d5e;
      --navy-soft:   #243d56;
      --aqua:        #00b4d8;
      --aqua-mid:    #0096c7;
      --aqua-dark:   #0077b6;
      --aqua-soft:   #caf0f8;
      --aqua-pale:   #e0f7fc;
      --surface:     #ffffff;
      --surface-2:   #f4f8fb;
      --surface-3:   #eaf2f8;
      --line:        #d4e2ef;
      --line-strong: #b8cfe0;
      --text:        #0d1f35;
      --text-mid:    #2d4a62;
      --muted:       #5b7d96;
      --morning:     #f77f00;
      --afternoon:   #0096c7;
      --evening:     #5c4b8a;
      --danger:      #c1121f;
      --danger-soft: #fde8ea;
      --warning:     #e07b00;
      --warning-soft:#fff3e0;
      --success:     #1a7f5a;
      --success-soft:#e6f4ef;
      --custom:      #7b52c7;
      --custom-soft: #f0ebfc;
      --shadow-sm:   0 2px 8px rgba(13,31,53,.07);
      --shadow:      0 6px 24px rgba(13,31,53,.10);
      --shadow-lg:   0 16px 48px rgba(13,31,53,.16);
      --radius:      14px;
      --radius-sm:   8px;
      --font:        'Barlow', system-ui, sans-serif;
      --font-cond:   'Barlow Condensed', system-ui, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      font-family: var(--font);
      background: var(--navy);
      color: var(--text);
      font-size: 14px;
      min-height: 100vh;
    }

    /* ─── ANIMATED BACKGROUND ─── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0,180,216,.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(0,119,182,.22) 0%, transparent 55%),
        linear-gradient(175deg, #0d1f35 0%, #102840 50%, #0d2438 100%);
      z-index: 0;
      pointer-events: none;
    }

    button, input, select, textarea { font: inherit; }
    .hidden { display: none !important; }

    /* ─── APP SHELL ─── */
    .app {
      position: relative;
      z-index: 1;
      max-width: 1600px;
      margin: 0 auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* ─── TOPBAR ─── */
    .topbar {
      background: rgba(255,255,255,.97);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .brand { display: flex; align-items: center; gap: 14px; }
    .brand-icon {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, var(--aqua-mid), var(--aqua-dark));
      border-radius: 14px;
      display: grid; place-items: center;
      font-size: 22px;
      box-shadow: 0 4px 14px rgba(0,150,199,.35);
      flex-shrink: 0;
    }
    .brand-text h1 {
      font-family: var(--font-cond);
      font-size: 26px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--navy);
      line-height: 1;
    }
    .brand-text p {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 3px;
    }

    .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

    /* ─── STATUS CHIPS ─── */
    .chip {
      display: inline-flex; align-items: center; gap: 5px;
      border-radius: 999px; padding: 6px 12px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .02em;
    }
    .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .chip.info { background: var(--aqua-pale); color: var(--aqua-dark); }
    .chip.info::before { background: var(--aqua-mid); }
    .chip.ok { background: var(--success-soft); color: var(--success); }
    .chip.ok::before { background: var(--success); }
    .chip.warn { background: var(--warning-soft); color: var(--warning); }
    .chip.warn::before { background: var(--warning); }

    /* ─── TABS ─── */
    .tabs {
      background: rgba(255,255,255,.95);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      padding: 6px;
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .tab {
      border: none;
      background: transparent;
      color: var(--muted);
      border-radius: 10px;
      padding: 9px 18px;
      cursor: pointer;
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: all .2s ease;
    }
    .tab:hover { background: var(--surface-3); color: var(--navy); }
    .tab.active {
      background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
      color: #fff;
      box-shadow: 0 4px 12px rgba(13,31,53,.25);
    }
    @media (max-width: 760px) {
      .tabs { position: sticky; top: 8px; z-index: 20; }
    }

    /* ─── TOOLBAR ─── */
    .toolbar {
      background: rgba(255,255,255,.97);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
	  margin-bottom: 6px;
    }
    .grow { flex: 1 1 auto; min-width: 160px; }
    .week-title {
      font-family: var(--font-cond);
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: .02em;
    }
    .week-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .mini-group { display: flex; align-items: center; gap: 6px; }
    .mini-group label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }

    /* ─── BUTTONS ─── */
    .btn, .btn-secondary, .btn-ghost, .btn-danger, .icon-btn, .mini-btn {
      border: none; cursor: pointer;
      transition: all .18s ease;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      font-weight: 700;
      border-radius: var(--radius-sm);
    }
    .btn {
      background: linear-gradient(135deg, var(--aqua-mid), var(--aqua-dark));
      color: #fff;
      padding: 8px 14px;
      font-size: 12px;
      letter-spacing: .02em;
      box-shadow: 0 3px 10px rgba(0,150,199,.3);
    }
    .btn:hover { background: linear-gradient(135deg, var(--aqua), var(--aqua-mid)); box-shadow: 0 5px 16px rgba(0,150,199,.4); transform: translateY(-1px); }
    .btn-secondary {
      background: var(--surface-3);
      color: var(--text-mid);
      border: 1px solid var(--line);
      padding: 8px 14px;
      font-size: 12px;
    }
    .btn-secondary:hover { background: var(--line); }
    .btn-ghost {
      background: transparent;
      color: var(--navy);
      border: 1px solid var(--line-strong);
      padding: 8px 14px;
      font-size: 12px;
    }
    .btn-ghost:hover { background: var(--surface-3); border-color: var(--aqua-mid); color: var(--aqua-dark); }
    .btn-danger {
      background: var(--danger-soft);
      color: var(--danger);
      border: 1px solid #f5c6ca;
      padding: 8px 14px;
      font-size: 12px;
    }
    .btn-danger:hover { background: #fcd0d4; }
    
	.icon-btn {
	  width: 34px;
	  height: 34px;
	  background: #f5f9fc;
	  border: 1px solid #d4e2ef;
	  border-radius: 10px;
	}

    .icon-btn:hover { background: var(--aqua-pale); border-color: var(--aqua-mid); transform: scale(1.08); }
    .mini-btn {
      background: var(--surface-2);
      color: var(--text-mid);
      border: 1px solid var(--line);
      padding: 5px 9px;
      font-size: 11px;
      min-height: 28px;
    }
    .mini-btn:hover { background: var(--surface-3); }

    /* ─── FORM ELEMENTS ─── */
    .field, textarea, select, .compact-select {
      width: 100%;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
      transition: border-color .15s, box-shadow .15s;
      outline: none;
    }
    .field, textarea, select { padding: 9px 12px; font-size: 13px; }
    .field:focus, textarea:focus, select:focus {
      border-color: var(--aqua-mid);
      box-shadow: 0 0 0 3px rgba(0,150,199,.12);
    }
    .compact-select { padding: 6px 8px; min-height: 32px; font-size: 11px; font-weight: 600; }
    label { display: block; font-weight: 700; font-size: 12px; margin-bottom: 5px; color: var(--text-mid); letter-spacing: .02em; }
    textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
    .helper { color: var(--muted); font-size: 11px; line-height: 1.4; }

    /* ─── CARD ─── */
    .card {
      background: rgba(255,255,255,.98);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 0;
    }
    .card-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: linear-gradient(180deg, #fafcfe 0%, #f4f8fc 100%);
    }
    .card-body { padding: 14px 18px; }
    .card-head h2 {
      font-family: var(--font-cond);
      font-size: 19px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0;
    }
    .card-head h3 {
      font-family: var(--font-cond);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0;
    }
    .card-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

    /* ─── NOTES BANNER ─── */
    .notes-banner {
      background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 100%);
      border: 1.5px solid #f0d993;
      border-radius: 12px;
      padding: 14px 16px;
      display: grid;
      gap: 8px;
    }
    .notes-title {
      font-family: var(--font-cond);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #7a5c0d;
      display: flex; align-items: center; gap: 7px;
    }
    .notes-preview { white-space: pre-wrap; line-height: 1.5; font-size: 13px; color: var(--text-mid); }

    /* ─── SESSION LEGEND PILLS ─── */
    .legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .pill {
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff;
    }
    .pill.m { background: var(--morning); }
    .pill.p { background: var(--afternoon); }
    .pill.s { background: var(--evening); }
    .pill.c { background: var(--danger); }
    .pill.n { background: var(--warning); }

    /* ─── PLANNER TABLE ─── */
    .table-wrap { overflow: hidden; }
    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0 8px;
    }
    col.daycol { width: 200px; }
    col.timecol { width: 82px; }
    col.poolcol { width: 80px; }
    col.traincol { width: 72px; }

    thead th {
      border: 1px solid var(--line);
      padding: 8px 6px;
      background: var(--surface-2);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 10px;
      font-weight: 700;
    }
    th.shift-h {
      color: #fff;
      font-family: var(--font-cond);
      font-size: 12px;
      letter-spacing: .1em;
      padding: 10px 6px;
    }
    th.mh { background: var(--morning); }
    th.ph { background: var(--afternoon); }
    th.sh { background: var(--evening); }



	tbody tr.row-day {
	  background: #ffffff;
	  box-shadow: 0 2px 6px rgba(13,31,53,.05);
	}


    
	tbody tr.row-day td {
	  border-top: 1px solid var(--line);
	  border-bottom: 1px solid var(--line);
	  padding: 10px 9px;
	}
	
	
	/* arrotondamento stile card */
	tbody tr.row-day td:first-child {
	  border-left: 1px solid var(--line);
	  border-top-left-radius: 10px;
	  border-bottom-left-radius: 10px;
	}

	tbody tr.row-day td:last-child {
	  border-right: 1px solid var(--line);
	  border-top-right-radius: 10px;
	  border-bottom-right-radius: 10px;
	}


    tbody tr.row-day:nth-child(odd) td { background: #fff; }
    tbody tr.row-day:nth-child(even) td { background: var(--surface-2); }
    tbody tr.row-day:hover td { background: var(--aqua-pale) !important; }

    .day-cell { 
		background: linear-gradient(180deg, #f8fbfe 0%, #f1f6fc 100%) !important;
		padding: 14px 12px !important;
		border-right: 2px solid var(--line-strong);
	}
    .day-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
    .day-name {
      font-family: var(--font-cond);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--navy);
    }
    .day-date { font-size: 10px; color: var(--muted); margin-top: 2px; font-weight: 600; opacity: 0.8;}
    .day-actions { display: flex; gap: 4px; }
    .day-main-link {
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--aqua-dark);
      cursor: pointer;
      text-decoration: none;
      border-bottom: 1px dashed var(--aqua-soft);
      padding-bottom: 1px;
      transition: color .15s;
    }
	
	.day-cell .helper {
	  margin-top: 6px;
	  line-height: 1.4;
	}

	
    .day-main-link:hover { color: var(--aqua-mid); }
    .day-main-status {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      border-radius: 6px;
      font-size: 12px; font-weight: 700;
      flex-shrink: 0;
    }
    .day-main-status.base { background: var(--success-soft); color: var(--success); }
    .day-main-status.empty { background: var(--surface-3); color: var(--muted); }

    .status-cancelled { background: #fff0f0 !important; }
    .status-unplanned { background: #fffbf0 !important; }
    .select-cancelled { border-color: #f5aaaa !important; color: var(--danger); font-weight: 700; background: #fff5f5 !important; }
    .select-unplanned { border-color: #f0d97a !important; color: var(--warning); font-weight: 700; background: #fffbf0 !important; }

    .session-icon-box { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; }
    .status-dot {
      width: 28px; height: 28px;
      border-radius: 7px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 700;
      flex-shrink: 0;
    }
    .status-dot.inherited { background: var(--success-soft); color: var(--success); }
    .status-dot.custom { background: var(--custom-soft); color: var(--custom); }
    .status-dot.cancelled { background: var(--danger-soft); color: var(--danger); }
    .status-dot.unplanned { background: var(--warning-soft); color: var(--warning); }
    .status-dot.empty { background: var(--surface-3); color: var(--muted); }

    @media (max-width: 1180px) {
      .table-wrap { overflow: auto; }
      table { min-width: 1100px; }
    }

    /* ─── RACES SECTION ─── */
    .race-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .race-layout {
      display: grid;
      grid-template-columns: minmax(300px, 360px) 1fr;
      gap: 14px;
      align-items: start;
    }
    .app.swimmer-mode .race-layout { grid-template-columns: 1fr; }
    .app.swimmer-mode #raceEditorCard { display: none !important; }
    .app.swimmer-mode .race-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

    .race-list { display: grid; gap: 10px; }
    .race-list-wrap {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
    }
    .race-list-title {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .race-card {
      border: 1.5px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      padding: 12px 14px;
      display: grid;
      gap: 8px;
      transition: all .18s;
      cursor: pointer;
    }
    .race-card:hover { border-color: var(--aqua-mid); box-shadow: var(--shadow-sm); }
    .race-card.selected-race {
      border-color: var(--aqua-mid);
      background: var(--aqua-pale);
      box-shadow: 0 0 0 3px rgba(0,150,199,.12);
    }
    .race-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
    .race-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
    }
    .race-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
    .badge-list, .chip-list { display: flex; gap: 5px; flex-wrap: wrap; }
    .badge {
      display: inline-flex; align-items: center; gap: 5px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--surface-3);
      color: var(--navy);
      padding: 3px 8px;
      font-size: 10px; font-weight: 700;
      letter-spacing: .02em;
    }
    .badge button { border: none; background: none; color: var(--danger); cursor: pointer; font-weight: 700; font-size: 12px; padding: 0; }

    .race-detail-panel {
      margin-top: 14px;
      padding-top: 0;
    }
    .race-detail-title {
      font-family: var(--font-cond);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 4px;
    }
    .race-detail-subtitle { font-size: 11px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

    .detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
    .app.swimmer-mode .detail-grid { grid-template-columns: 1fr 1fr; }
    .detail-box {
      border: 1.5px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      padding: 14px;
    }
    .detail-box.highlighted { border-color: var(--aqua-mid); background: var(--aqua-pale); }
    .detail-box h4 {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .detail-text { font-size: 12px; line-height: 1.5; white-space: pre-wrap; color: var(--text-mid); }

    .poster-box {
      border: 1.5px dashed var(--line-strong);
      border-radius: 10px;
      background: var(--surface-2);
      padding: 10px;
      display: grid; gap: 8px;
    }
    .poster-preview { max-width: 100%; max-height: 180px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; display: none; }

    .empty {
      border: 1.5px dashed var(--line);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      color: var(--muted);
      background: var(--surface-2);
      font-size: 13px;
    }

    .participant-table-wrap { overflow: auto; }
    .participant-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .participant-table th, .participant-table td {
      border: 1px solid var(--line);
      padding: 8px 10px;
      vertical-align: top;
    }
    .participant-table th {
      background: var(--surface-3);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
    }
    .participant-table tbody tr:hover td { background: var(--aqua-pale); }

    /* ─── MODAL ─── */
    .modal {
      position: fixed; inset: 0;
      display: none;
      align-items: center; justify-content: center;
      padding: 16px;
      z-index: 9999;
      background: rgba(10,22,38,.65);
      backdrop-filter: blur(8px);
    }
    .modal.active { display: flex; animation: fadeIn .2s ease; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .modal-card {
      width: min(940px, 100%);
      max-height: calc(100vh - 32px);
      overflow: auto;
      background: var(--surface);
      border-radius: 18px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      animation: slideUp .2s ease;
    }
    @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    .modal-head {
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #f6fafd, #eef5fc);
    }
    .modal-head h3 {
      font-family: var(--font-cond);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--navy);
    }
    .modal-head p { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .modal-body { padding: 18px 20px; }
    .modal-body textarea#trainingText { min-height: 240px; font-size: 14px; line-height: 1.55; }
    .modal-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--line);
      display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
      background: var(--surface-2);
    }

    /* ─── LOGIN ─── */
    .login-overlay {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      z-index: 100000;
      background: linear-gradient(135deg, rgba(8,18,32,.96), rgba(10,30,52,.92));
    }
    .login-card {
      width: min(480px, 100%);
      background: rgba(255,255,255,.99);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 32px;
      box-shadow: 0 40px 100px rgba(0,0,0,.4);
      display: grid;
      gap: 16px;
      animation: slideUp .3s ease;
    }
    .login-head { text-align: center; }
    .login-logo {
      width: 64px; height: 64px;
      background: linear-gradient(135deg, var(--aqua-mid), var(--aqua-dark));
      border-radius: 18px;
      display: grid; place-items: center;
      font-size: 28px;
      margin: 0 auto 14px;
      box-shadow: 0 8px 24px rgba(0,150,199,.35);
    }
    .login-head h2 {
      font-family: var(--font-cond);
      font-size: 28px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 6px;
    }
    .login-head p { color: var(--muted); font-size: 13px; }
    .login-demo {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px 14px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }
    .login-demo code {
      background: var(--surface-3);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 11px;
      color: var(--navy);
      font-weight: 700;
    }
    .login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #loginBtn { padding: 12px; font-size: 14px; border-radius: 10px; }

    /* ─── SEPARATOR ─── */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
      margin: 4px 0;
    }

    @media (max-width: 980px) {
      .race-layout, .detail-grid, .login-grid, .app.swimmer-mode .detail-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .app { padding: 8px; }
      .topbar { padding: 12px 14px; }
      .brand-text h1 { font-size: 20px; }
      .week-title { font-size: 17px; }
      .btn, .btn-secondary, .btn-ghost, .btn-danger { width: 100%; }
      .card-head { padding: 12px 14px; }
      .card-body { padding: 12px 14px; }
    }


/* =========================================================
   Layout refinement & visual polish (2026 redesign pass)
   ========================================================= */
:root {
  --site-max-width: 1480px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 36px;
  --card-radius: 18px;
  --card-shadow: 0 14px 40px rgba(13,31,53,.10);
  --card-shadow-hover: 0 18px 44px rgba(13,31,53,.14);
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.45;
  color: var(--text);
  letter-spacing: .01em;
}

.app {
  max-width: var(--site-max-width);
  padding: 22px clamp(14px, 2vw, 28px) 44px;
  gap: var(--space-lg);
}

.topbar,
.tabs,
.card,
.login-card,
.modal-card {
  backdrop-filter: blur(14px);
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  border-radius: 22px;
  padding: 16px 22px;
  box-shadow: 0 12px 32px rgba(13,31,53,.12);
}

.brand-icon {
  border-radius: 16px;
}

.brand-text h1 {
  font-size: clamp(22px, 1.5vw, 28px);
  letter-spacing: .05em;
}

.topbar-right {
  gap: 10px;
}

.tabs {
  position: sticky;
  top: 104px;
  z-index: 25;
  border-radius: 18px;
  padding: 8px;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(13,31,53,.08);
}

.tab {
  flex: 1 1 220px;
  min-height: 46px;
  border-radius: 12px;
  justify-content: center;
  font-weight: 700;
}

.view-section {
  display: grid;
  gap: var(--space-lg);
}

.toolbar {
  border-radius: var(--card-radius);
  gap: 10px;
  padding: 14px 16px;
  align-items: center;
}

.grow {
  min-width: min(100%, 260px);
}

.card {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
}

.card-head {
  padding: 16px 20px;
  gap: 12px;
}

.card-body {
  padding: 18px 20px;
}

.card-body.table-wrap {
  padding: 0;
}

.card-head h2,
.card-head h3,
.race-list-title,
.race-detail-title,
.week-title {
  letter-spacing: .01em;
}

.field,
textarea,
select,
.compact-select {
  min-height: 44px;
  border-radius: 12px;
  border-color: var(--line-strong);
  background: rgba(255,255,255,.98);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

textarea {
  min-height: 190px;
  line-height: 1.6;
}

.field:focus,
textarea:focus,
select:focus,
.compact-select:focus {
  outline: none;
  border-color: var(--aqua-mid);
  box-shadow: 0 0 0 4px rgba(0,150,199,.14);
}

.btn,
.btn-secondary,
.btn-ghost,
.btn-danger,
.icon-btn,
.mini-btn {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover,
.icon-btn:hover,
.mini-btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.tab:focus-visible,
.icon-btn:focus-visible,
.mini-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,150,199,.18);
}

.table-wrap {
  overflow: auto;
}

.race-layout {
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: var(--space-lg);
}

.race-layout > section {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  min-width: 0;
}

.race-list-wrap,
.race-detail-panel {
  background: linear-gradient(180deg, rgba(250,252,254,.95) 0%, rgba(244,248,252,.98) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.race-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.race-card {
  min-height: 116px;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(13,31,53,.05);
}

.race-card:hover,
.race-card.selected-race {
  transform: translateY(-2px);
}

.detail-grid {
  gap: 16px;
  align-items: start;
}

.participant-table-wrap {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.participant-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.empty,
.helper {
  line-height: 1.55;
}

.login-overlay {
  padding: 20px;
}

.login-card {
  width: min(540px, 100%);
  border-radius: 28px;
  padding: 34px;
  gap: 18px;
}

.modal-card {
  border-radius: 24px;
}

.modal-body,
.modal-foot {
  gap: 12px;
}

/* helper classes replacing inline styles */
.demo-note-spaced {
  margin-top: 5px;
}

.demo-note-caption {
  margin-top: 8px;
  font-size: 11px;
  opacity: .8;
}

.chip-center {
  justify-content: center;
}

.field-inline-select {
  width: auto;
  min-width: 120px;
  padding: 7px 10px;
}

.field-search-grow {
  flex: 1 1 250px;
}

.field-filter-compact {
  max-width: 180px;
}

.card-no-margin {
  margin-bottom: 0;
}

.stack-grid {
  display: grid;
  gap: 10px;
}

.split-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flex-row-wrap-sm {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.flex-row-wrap-md {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.field-flex-grow {
  flex: 1 1 160px;
}

.chip-list-spaced {
  margin-top: 8px;
}

.helper-spacing-top {
  margin-top: 10px;
}

.modal-card-sm {
  max-width: 460px;
}

.modal-body-stack {
  display: grid;
  gap: 10px;
}

/* mobile consistency */
@media (max-width: 980px) {
  .app {
    padding-top: 14px;
  }

  .topbar,
  .tabs {
    position: static;
  }

  .race-layout,
  .detail-grid,
  .split-grid-2 {
    grid-template-columns: 1fr;
  }

  .toolbar {
    padding: 12px 14px;
  }
}

@media (max-width: 760px) {
  .app {
    padding: 10px 10px 28px;
    gap: 14px;
  }

  .topbar,
  .tabs,
  .card,
  .login-card,
  .modal-card {
    border-radius: 16px;
  }

  .topbar {
    padding: 14px;
  }

  .card-head,
  .card-body,
  .race-list-wrap,
  .race-detail-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .toolbar,
  .mini-group,
  .flex-row-wrap-sm,
  .flex-row-wrap-md {
    width: 100%;
  }

  .field-inline-select,
  .field-filter-compact {
    width: 100%;
    max-width: none;
  }
}


/* =========================================================
   FINPLUS OSTIA - patch sfondo fotografico piscina
   ========================================================= */

body {
  background: #06243a;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(7, 25, 40, 0.72), rgba(7, 25, 40, 0.80)),
    url('/bg/fin.jpg') center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.app {
  position: relative;
  z-index: 1;
}

.topbar,
.tabs,
.card,
.login-card,
.modal-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(212, 226, 239, 0.92);
  backdrop-filter: blur(10px);
}

.topbar {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.20);
}

.tabs {
  background: rgba(255, 255, 255, 0.84);
}

.card,
.login-card,
.modal-card {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}

.week-title,
.brand-text h1,
.card-head h2,
.card-head h3,
.race-list-title,
.race-detail-title {
  text-shadow: none;
}

@media (max-width: 760px) {
  body::before {
    background:
      linear-gradient(rgba(7, 25, 40, 0.78), rgba(7, 25, 40, 0.84)),
      url('/bg/fin_bg_optimized.jpg') center center / cover no-repeat;
  }

  .topbar,
  .tabs,
  .card,
  .login-card,
  .modal-card {
    background: rgba(255, 255, 255, 0.93);
  }
}