.cards-page {
  --card-ink: #11362f;
  --card-green: #0f5d50;
  --card-deep: #093f37;
  --card-lime: #dff184;
  --card-coral: #e86b4f;
  --card-blue: #d8efeb;
  --card-cream: #fbfaf4;
  --card-line: #d5e0d8;
  --card-muted: #71837d;
  width: 100%;
  min-height: calc(100vh - 190px);
  color: var(--card-ink);
  background:
    radial-gradient(circle at 95% 3%, rgba(187, 226, 205, .48), transparent 28rem),
    linear-gradient(150deg, #fbfaf4 0%, #f2f8f2 100%);
}
.cards-page * { box-sizing: border-box; }
.cards-shell { width: min(1500px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 72px; }
.cards-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.cards-period-control { display: flex; align-items: center; gap: 10px; border: 1px solid #bfd2c9; border-radius: 13px; padding: 7px 8px 7px 13px; background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(24,65,56,.07); }
.cards-period-control span { color: #70827c; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cards-period-control select { border: 0; outline: 0; color: var(--card-green); background: transparent; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.cards-period-status { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; border-radius: 999px; padding: 0 11px; color: #17675b; background: #e0f1eb; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.cards-period-status::before { width: 7px; height: 7px; border-radius: 50%; background: #48a06f; content: ""; }
.cards-period-status.is-closed { color: #776b58; background: #eeeae1; }
.cards-period-status.is-closed::before { background: #9c8d74; }
.cards-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.cards-eyebrow { margin: 0 0 8px; color: #247368; font-size: 11px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.cards-title { margin: 0; max-width: 850px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4vw, 56px); line-height: .98; letter-spacing: -.045em; }
.cards-subtitle { max-width: 780px; margin: 12px 0 0; color: var(--card-muted); font-size: 14px; line-height: 1.55; }
.cards-primary,.cards-secondary,.cards-danger,.cards-row-button,.cards-choice-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px; padding: 0 17px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.cards-primary { color: white; background: var(--card-green); box-shadow: 0 12px 28px rgba(15,93,80,.2); }
.cards-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(15,93,80,.25); }
.cards-secondary { color: var(--card-green); border-color: #c6d6ce; background: #fff; }
.cards-danger { color: #fff; background: #bd4d39; }
.cards-primary:disabled,.cards-danger:disabled { opacity: .55; cursor: wait; transform: none; }
.cards-journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cards-journey-card { position: relative; overflow: hidden; min-height: 310px; border: 1px solid var(--card-line); border-radius: 24px; padding: 29px; background: rgba(255,255,251,.9); box-shadow: 0 18px 48px rgba(26,66,57,.08); }
.cards-journey-card.is-night { color: #fff; border-color: #164e44; background: linear-gradient(145deg, #0c564a, #123d36); }
.cards-journey-card::after { position: absolute; right: -65px; bottom: -78px; width: 235px; height: 235px; border: 1px solid rgba(44,113,96,.16); border-radius: 50%; background: rgba(215,239,142,.18); content: ""; }
.cards-card-index { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--card-deep); background: var(--card-lime); font-size: 12px; font-weight: 900; }
.cards-journey-card h2 { position: relative; z-index: 1; margin: 34px 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 31px; }
.cards-journey-card p { position: relative; z-index: 1; max-width: 500px; margin: 0; color: var(--card-muted); font-size: 13px; line-height: 1.55; }
.cards-journey-card.is-night p { color: rgba(255,255,255,.72); }
.cards-price-line { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.cards-price-pill { border-radius: 999px; padding: 7px 10px; color: #255f54; background: #e9f2e8; font-size: 10px; font-weight: 900; }
.cards-journey-card.is-night .cards-price-pill { color: #efffc0; background: rgba(255,255,255,.1); }
.cards-journey-card .cards-primary { position: absolute; z-index: 2; left: 29px; bottom: 27px; }
.cards-period-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; border: 1px dashed #bdcec5; border-radius: 17px; padding: 17px 19px; background: rgba(255,255,255,.58); }
.cards-period-note strong { display: block; margin-bottom: 3px; font-size: 13px; }
.cards-period-note span { color: var(--card-muted); font-size: 11px; }
.cards-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-bottom: 18px; }
.cards-summary-card { min-height: 122px; border: 1px solid var(--card-line); border-radius: 18px; padding: 19px 20px; background: rgba(255,255,252,.9); box-shadow: 0 9px 28px rgba(25,58,51,.055); }
.cards-summary-card.is-accent { color: #fff; border-color: var(--card-green); background: linear-gradient(145deg, #0f5e51, #16473f); }
.cards-summary-label { color: var(--card-muted); font-size: 11px; font-weight: 800; }
.cards-summary-card.is-accent .cards-summary-label,.cards-summary-card.is-accent .cards-summary-note { color: rgba(255,255,255,.7); }
.cards-summary-value { margin-top: 12px; font-family: Georgia, "Times New Roman", serif; font-size: 31px; font-weight: 700; }
.cards-summary-note { margin-top: 7px; color: #82928d; font-size: 10px; }
.cards-panel { overflow: hidden; border: 1px solid var(--card-line); border-radius: 20px; background: rgba(255,255,252,.94); box-shadow: 0 16px 44px rgba(25,58,51,.07); }
.cards-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #dfe7e1; }
.cards-panel-head h2 { margin: 0; font-size: 15px; }
.cards-panel-head p { margin: 4px 0 0; color: var(--card-muted); font-size: 10px; }
.cards-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #e2e8e3; }
.cards-search { position: relative; width: min(460px,100%); }
.cards-search svg { position: absolute; left: 14px; top: 50%; width: 17px; transform: translateY(-50%); }
.cards-search input,.cards-field input,.cards-field select,.cards-field textarea { width: 100%; border: 1px solid #d2ddd6; border-radius: 11px; outline: none; color: var(--card-ink); background: #fff; font: inherit; font-size: 13px; }
.cards-search input { height: 44px; padding: 0 14px 0 42px; }
.cards-field input,.cards-field select { height: 46px; padding: 0 13px; }
.cards-field textarea { min-height: 92px; padding: 12px 13px; resize: vertical; }
.cards-search input:focus,.cards-field input:focus,.cards-field select:focus,.cards-field textarea:focus { border-color: #4a9385; box-shadow: 0 0 0 3px rgba(45,132,116,.11); }
.cards-result-count { color: var(--card-muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.cards-table-wrap { overflow-x: auto; }
.cards-table { width: 100%; border-collapse: collapse; }
.cards-table th { padding: 12px 15px; color: #70837c; background: #f7f8f3; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cards-table td { padding: 13px 15px; border-top: 1px solid #e3e9e4; font-size: 12px; vertical-align: middle; }
.cards-consecutive { color: var(--card-green); font-weight: 900; white-space: nowrap; }
.cards-student-name { min-width: 220px; font-weight: 900; }
.cards-student-meta { margin-top: 3px; color: #84938e; font-size: 10px; }
.cards-badge { display: inline-flex; min-height: 25px; align-items: center; border-radius: 999px; padding: 0 9px; color: #23695d; background: #e3f1ec; font-size: 9px; font-weight: 900; white-space: nowrap; }
.cards-badge.is-pending { color: #966000; background: #fff0c7; }
.cards-badge.is-annulled { color: #a14735; background: #fde4dd; }
.cards-row-button { min-height: 35px; padding: 0 12px; color: var(--card-green); border-color: #c8d7d0; background: #fff; }
.cards-form-panel { padding: 25px; }
.cards-form-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid #e0e7e2; }
.cards-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cards-form-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.cards-form-section-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; }
.cards-form-section-head p { margin: 5px 0 0; color: var(--card-muted); font-size: 11px; }
.cards-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.cards-field { display: flex; flex-direction: column; gap: 7px; }
.cards-field.is-wide { grid-column: span 2; }
.cards-field label { color: #31534b; font-size: 11px; font-weight: 900; }
.cards-field small { color: #83928d; font-size: 9px; line-height: 1.4; }
.cards-id-row { display: flex; gap: 8px; }
.cards-id-row input { flex: 1; }
.cards-age-box { display: flex; min-height: 46px; align-items: center; border: 1px solid #d5e0d9; border-radius: 11px; padding: 0 13px; color: #23675c; background: #f1f7f3; font-weight: 900; }
.cards-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cards-choice { position: relative; }
.cards-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cards-choice span { display: flex; min-height: 78px; flex-direction: column; justify-content: center; border: 1px solid #cfdbd4; border-radius: 14px; padding: 13px 15px; background: #fff; cursor: pointer; }
.cards-choice strong { font-size: 12px; }
.cards-choice small { margin-top: 5px; color: var(--card-muted); font-size: 10px; }
.cards-choice input:checked + span { border-color: var(--card-green); color: var(--card-green); background: #edf7f1; box-shadow: 0 0 0 3px rgba(24,115,102,.1); }
.cards-required-decision { border: 1px solid #efd594; border-radius: 17px; padding: 17px; background: #fff8e4; }
.cards-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #e1e8e3; }
.cards-notice { margin-bottom: 17px; border: 1px solid #ead9a9; border-radius: 14px; padding: 13px 15px; color: #6f501c; background: #fff8e5; font-size: 11px; line-height: 1.5; }
.cards-form-alert { margin-bottom: 18px; border: 1px solid #e6a99e; border-left: 5px solid #ad3f31; border-radius: 13px; padding: 14px 16px; color: #702d25; background: #fff2ee; font-size: 13px; font-weight: 900; line-height: 1.45; }
.cards-form-alert[hidden] { display: none; }
.cards-field.is-invalid > label,.cards-required-decision.is-invalid .cards-form-section-head h2 { color: #9d3528; }
.cards-field.is-invalid input,.cards-field.is-invalid select,.cards-field.is-invalid textarea { border-color: #bb4939; background: #fffaf8; box-shadow: 0 0 0 4px rgba(187,73,57,.12); }
.cards-field.is-invalid .cards-choice span,.cards-required-decision.is-invalid .cards-choice span { border-color: #bb4939; background: #fff7f3; box-shadow: 0 0 0 3px rgba(187,73,57,.1); }
.cards-required-decision.is-invalid { border-color: #bb4939; background: #fff3ec; box-shadow: 0 0 0 4px rgba(187,73,57,.09); }
.cards-field-error { margin: 3px 0 0; color: #9d3528 !important; font-size: 11px !important; font-weight: 900; line-height: 1.4; }
.cards-field-error::before { margin-right: 5px; content: "Revise:"; }
.cards-empty,.cards-loading,.cards-error { display: grid; min-height: 270px; place-items: center; padding: 35px; color: var(--card-muted); text-align: center; }
.cards-loading::before { width: 29px; height: 29px; margin: 0 auto 12px; border: 3px solid #d7e3dd; border-top-color: var(--card-green); border-radius: 50%; content: ""; animation: cards-spin .7s linear infinite; }
@keyframes cards-spin { to { transform: rotate(360deg); } }
.card-context-detail[hidden] { display: none !important; }
.cards-modal-backdrop {
  --card-ink: #11362f;
  --card-green: #0f5d50;
  --card-deep: #093f37;
  --card-lime: #dff184;
  --card-coral: #e86b4f;
  --card-blue: #d8efeb;
  --card-cream: #fbfaf4;
  --card-line: #d5e0d8;
  --card-muted: #71837d;
  position: fixed;
  z-index: 3500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(6,34,29,.66);
  backdrop-filter: blur(5px);
}
.cards-modal { width: min(720px,100%); max-height: calc(100vh - 44px); overflow: auto; border-radius: 22px; background: #fffefa; box-shadow: 0 32px 90px rgba(4,31,26,.35); }
.cards-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid #dfe7e2; }
.cards-modal-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 26px; }
.cards-modal-head p { margin: 5px 0 0; color: var(--card-muted); font-size: 11px; }
.cards-modal-close { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 11px; color: #45635b; background: #edf3ef; font-size: 21px; cursor: pointer; }
.cards-modal-body { padding: 22px 24px 26px; }
.cards-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.cards-detail-cell { min-height: 76px; border: 1px solid #dfe7e2; border-radius: 13px; padding: 11px 12px; background: #fafbf7; }
.cards-detail-cell span { color: #83928d; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.cards-detail-cell strong { display: block; margin-top: 7px; font-size: 12px; overflow-wrap: anywhere; }
.cards-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.cards-modal .cards-primary { color: #fff !important; background: #0f5d50 !important; }
.cards-modal .cards-primary:hover { background: #0b4d43 !important; }
.cards-modal .cards-secondary { color: #0f5d50 !important; border-color: #c6d6ce !important; background: #fff !important; }
.cards-modal .cards-secondary:hover { background: #edf6f1 !important; }
.cards-modal .cards-danger { color: #fff !important; background: #bd4d39 !important; }
.cards-modal .cards-danger:hover { background: #a43e2d !important; }
.cards-modal button:focus-visible { outline: 3px solid rgba(15,93,80,.28); outline-offset: 2px; }
.cards-modal .cards-primary:disabled,.cards-modal .cards-danger:disabled { opacity: .55; cursor: wait; }
.card-receipt { max-width: 560px; margin: 0 auto; border: 1px solid #cfdad3; background: #fff; }
.card-receipt-brand { padding: 21px 23px; color: #fff; background: var(--card-deep); }
.card-receipt-brand strong { display: block; font-family: Georgia,"Times New Roman",serif; font-size: 22px; }
.card-receipt-brand span { display: block; margin-top: 4px; color: rgba(255,255,255,.68); font-size: 10px; }
.card-receipt-number { padding: 20px 23px; border-bottom: 1px dashed #bfcfc6; text-align: center; }
.card-receipt-number span { display: block; color: #788b84; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.card-receipt-number strong { display: block; margin-top: 7px; color: var(--card-green); font-family: Georgia,"Times New Roman",serif; font-size: 30px; }
.card-receipt-body { padding: 18px 23px; }
.card-receipt-row { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid #edf0ee; font-size: 11px; }
.card-receipt-row span { color: #75857f; }
.card-receipt-row strong { text-align: right; }
.card-receipt-total { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; border-radius: 12px; padding: 14px; color: #fff; background: var(--card-green); }
.card-receipt-total strong { font-size: 20px; }
.card-receipt-foot { padding: 14px 23px 19px; color: #7c8c86; font-size: 9px; text-align: center; }
.cards-toast { position: fixed; z-index: 4500; right: 23px; bottom: 23px; width: min(390px,calc(100% - 46px)); border-radius: 15px; padding: 15px 17px; color: #fff; background: #103f37; box-shadow: 0 18px 50px rgba(7,41,35,.28); font-size: 12px; font-weight: 800; }
.cards-toast.is-error { background: #9f4032; }
@media print {
  body * { visibility: hidden !important; }
  .card-receipt,.card-receipt * { visibility: visible !important; }
  .card-receipt { position: fixed; inset: 0 auto auto 0; width: 100%; max-width: none; border: 0; }
}
@media (max-width:1050px) { .cards-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cards-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .cards-shell { width: calc(100% - 28px); padding-top: 25px; }
  .cards-topline,.cards-hero { align-items: stretch; flex-direction: column; }
  .cards-title { font-size: 37px; }
  .cards-journey-grid { grid-template-columns: 1fr; }
  .cards-summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .cards-toolbar { align-items: stretch; flex-direction: column; }
  .cards-search { width: 100%; }
  .cards-form-panel { padding: 18px; }
  .cards-form-grid { grid-template-columns: 1fr; }
  .cards-field.is-wide { grid-column: auto; }
  .cards-choice-grid { grid-template-columns: 1fr; }
  .cards-form-actions,.cards-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .cards-form-actions button,.cards-modal-actions button { width: 100%; }
  .cards-detail-grid { grid-template-columns: 1fr 1fr; }
  .cards-modal-backdrop { padding: 9px; }
}
@media (max-width:440px) { .cards-summary-grid,.cards-detail-grid { grid-template-columns: 1fr; } }