:root{
  --white:#FFFFFF; --black:#000000; --navy:#113A51; --neon:#0BFFAE; --cream:#FFFBBF;
  --navy-deep:#0A2839; --navy-soft:#F1F6F8;
  --line:rgba(17,58,81,.15); --line-soft:rgba(17,58,81,.09);
  --ink-soft:rgba(17,58,81,.64); --ink-faint:rgba(17,58,81,.42);
  --danger:#D64545; --danger-bg:rgba(214,69,69,.09);
  --ok:#0A8F62; --ok-bg:rgba(11,255,174,.16);
  --card:#FFFFFF; --card-soft:#F6F9FA;
}
*{box-sizing:border-box;}
body{margin:0; min-height:100vh; background:var(--white); font-family:'Stack Sans Headline',sans-serif; color:var(--navy); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Stack Sans Headline',sans-serif; font-weight:700; margin:0; letter-spacing:-.01em; color:var(--navy);}
button{font-family:'Stack Sans Headline',sans-serif; cursor:pointer;}
p{line-height:1.5;}
a{color:var(--navy); font-weight:600;}
::selection{background:var(--neon); color:var(--black);}

.eyebrow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;}
.wordmark{display:inline-flex; align-items:center; gap:2px;}
.wordmark img{height:26px; width:auto; display:block;}
.wordmark-nav img{height:33px;}
@media (min-width:860px){ .wordmark-nav img{height:44px;} }
.logo-home-btn{background:none; border:none; padding:0; cursor:pointer; line-height:0;}
.mono{font-family:'Stack Sans Headline',sans-serif;}
.fraunces{font-family:'Fraunces',serif;}

.btn{padding:12px 20px; border-radius:12px; border:none; font-size:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:transform .12s ease, opacity .12s ease, background .12s ease; letter-spacing:.01em;}
.btn svg{flex-shrink:0; width:16px; height:16px;}
.btn-block{width:100%;}
.btn-primary{background:var(--neon); color:var(--black);}
.btn-primary:hover:not(:disabled){opacity:.85;}
.btn-primary:not(:disabled):active{transform:translateY(1px);}
.btn-primary:disabled{background:#E4E9EB; color:#9AA7AD; cursor:not-allowed;}
.btn-ghost{background:var(--white); color:var(--navy); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-danger{background:var(--danger-bg); color:var(--danger);}
.btn-danger:hover{background:rgba(214,69,69,.16);}
.logout-btn{color:var(--danger) !important; border-color:rgba(214,69,69,.35) !important;}
.logout-btn:hover{background:var(--danger-bg) !important; border-color:var(--danger) !important;}
.btn-sm{padding:8px 13px; font-size:12.5px; border-radius:9px;}
.btn-sm svg{width:14px; height:14px;}
.btn-link{background:none; border:none; color:var(--navy); font-weight:600; font-size:13px; padding:0; display:inline-flex; align-items:center; gap:6px;}
.btn-link svg{width:16px; height:16px;}
.icon-btn{background:none; border:none; color:var(--navy); padding:6px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px;}
.icon-btn:hover{background:var(--navy-soft);}
.icon-btn svg{width:22px; height:22px;}

.field{text-align:left; margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; font-family:'Stack Sans Headline',sans-serif; font-size:14.5px; padding:12px 14px; border-radius:11px; border:1.5px solid var(--line); background:var(--card-soft); color:var(--navy);}
.field input::placeholder{color:var(--ink-faint);}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:transparent;}
.field-hint{font-size:11.5px; color:var(--ink-faint); margin-top:6px; line-height:1.5;}
.field-check{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft); margin-bottom:18px; line-height:1.5;}
.field-check input{margin-top:3px; accent-color:var(--navy);}

.inline-msg{font-size:13px; font-weight:600; min-height:18px; margin:2px 0 14px;}
.inline-msg.error{color:var(--danger);}
.inline-msg.ok{color:var(--ok);}

.panel{background:var(--card); border:1px solid var(--line-soft); border-radius:20px; padding:26px 24px 28px; margin-bottom:16px; box-shadow:0 1px 2px rgba(17,58,81,.04);}
.panel h3{font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.panel h3 svg{width:18px; height:18px; flex-shrink:0;}
.panel .panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.panel .panel-head h3{margin-bottom:0;}
.panel .desc{font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.55;}
.form-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:0;}
.form-row .field{flex:1; min-width:180px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--ink-soft); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 12px 10px;}
td{padding:13px 12px; border-top:1px solid var(--line-soft); vertical-align:middle;}
th.th-actions, td.td-actions{text-align:right; white-space:nowrap;}
.table-wrap{overflow-x:auto;}

/* ---------- shell ---------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.loading-line{padding:60px 24px; text-align:center; color:var(--ink-soft); font-size:13px;}
.page-footer{text-align:center; font-size:11.5px; color:var(--ink-faint); padding:22px 4px 4px; margin-top:22px; border-top:1px solid var(--line-soft);}
.footer-link{color:var(--ink-soft); text-decoration:none; font-weight:600;}
.footer-link:hover{color:var(--navy);}

/* ---------- auth ---------- */
.auth-screen{flex:1; display:flex; align-items:center; justify-content:center; padding:32px 18px;}
.auth-box{width:100%; max-width:400px;}
.auth-hero{text-align:center; margin-bottom:30px;}
.auth-hero img{height:46px; width:auto; margin-bottom:14px;}
.auth-hero p{color:var(--ink-soft); font-size:13.5px; margin-top:8px;}
.auth-card{background:var(--card); border:1px solid var(--line-soft); border-radius:22px; padding:28px 26px 30px; position:relative; overflow:hidden; box-shadow:0 4px 24px rgba(17,58,81,.06);}
.auth-card::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--neon), var(--cream));}
.auth-step-title{font-size:18px; font-weight:700; margin-bottom:4px;}
.auth-step-sub{font-size:13px; color:var(--ink-soft); margin-bottom:20px; line-height:1.5;}
.auth-switch{text-align:center; margin-top:16px; font-size:12.5px; color:var(--ink-faint);}
.auth-switch .btn-link{display:inline-flex;}

/* ---------- client app shell (mobile-first: hamburger; desktop: left sidebar) ---------- */
.client-shell{flex:1; display:flex; width:100%;}
.top-bar{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px;}
.top-bar.mobile-only{display:flex;}
.tab-content{flex:1; padding:14px 18px 40px; max-width:520px; margin:0 auto; width:100%;}
.client-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.client-side, .admin-side{display:none;}

.side-nav-items{display:flex; flex-direction:column; gap:4px;}
.side-nav-items button, .admin-side button{background:none; border:none; color:var(--ink-soft); text-align:left; padding:11px 12px; border-radius:11px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px; width:100%;}
.side-nav-items button svg, .admin-side button svg{width:15px; height:15px; flex-shrink:0;}
.side-nav-items button.active, .admin-side button.active{background:rgba(11,255,174,.18); color:var(--navy);}
.side-nav-items button:hover:not(.active), .admin-side button:hover:not(.active){background:var(--navy-soft); color:var(--navy);}
.side-brand{padding:0 10px 22px;}
.side-footer-row{margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:10px;}
.side-footer-row .icon-btn{border:1.5px solid var(--line); border-radius:10px;}
.side-footer-row .icon-btn.active-icon{background:rgba(11,255,174,.18);}
.side-footer-row .btn{flex:1;}

@media (min-width:860px){
  .top-bar.mobile-only{display:none;}
  .client-side{display:flex; flex-direction:column; width:220px; flex-shrink:0; background:var(--white); border-right:1px solid var(--line-soft); padding:22px 14px;}
  .client-main{padding-top:8px;}
  .tab-content{padding:22px 32px 40px; max-width:640px; margin:0;}
}

/* ---------- hamburger drawer (mobile: client + admin) ---------- */
.drawer-backdrop{position:fixed; inset:0; background:rgba(17,58,81,.35); z-index:60; display:flex; justify-content:flex-end;}
.drawer-panel{width:78%; max-width:300px; height:100%; background:var(--white); box-shadow:-8px 0 28px rgba(17,58,81,.14); padding:22px 18px; display:flex; flex-direction:column; animation:drawerIn .18s ease;}
@keyframes drawerIn{from{transform:translateX(24px); opacity:0;} to{transform:translateX(0); opacity:1;}}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.drawer-nav{display:flex; flex-direction:column; gap:4px;}
.drawer-nav button{display:flex; align-items:center; gap:12px; background:none; border:none; text-align:left; padding:12px 12px; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--navy);}
.drawer-nav button svg{width:19px; height:19px; flex-shrink:0;}
.drawer-nav button.active{background:rgba(11,255,174,.18); color:var(--navy);}
.drawer-nav button:hover:not(.active){background:var(--navy-soft);}
.drawer-logout{margin-top:auto; display:flex; align-items:center; gap:12px; background:none; border:none; text-align:left; padding:12px; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--danger);}
.drawer-logout svg{width:19px; height:19px;}
.drawer-logout:hover{background:var(--danger-bg);}
.side-footer-row .drawer-logout{margin-top:0;}

/* ---------- tab title ---------- */
.tab-title-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.tab-title{font-size:20px;}

/* ---------- points ticket ---------- */
.ticket{background:var(--navy-soft); border:1px solid var(--line-soft); border-radius:24px; padding:26px 22px 22px; text-align:center; margin-bottom:18px;}
.ticket .points-num{font-family:'Stack Sans Headline',sans-serif; font-weight:700; font-size:56px; letter-spacing:-.02em; color:var(--navy); line-height:1;}
.ticket .points-label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; font-weight:600; margin-top:6px;}
.points-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; text-align:center; padding:0 6px;}

.points-pill{display:inline-flex; align-items:center; gap:8px; background:var(--navy-soft); border:1px solid var(--line-soft); border-radius:999px; padding:8px 16px 8px 8px; margin-bottom:16px;}
.points-pill .pill-num{font-family:'Stack Sans Headline',sans-serif; font-weight:700; font-size:18px; color:var(--navy); background:var(--white); border-radius:999px; padding:2px 12px;}
.points-pill .pill-label{font-size:12px; color:var(--ink-soft); font-weight:600;}

/* ---------- points history ---------- */
.history-table{width:100%; border-collapse:collapse; font-size:13px;}
.history-table td{padding:11px 4px; border-top:1px solid var(--line-soft);}
.history-table tr:first-child td{border-top:none;}
.history-points{width:64px; font-weight:700; white-space:nowrap;}
.history-points.pos{color:var(--ok);}
.history-points.neg{color:var(--danger);}

/* ---------- prize tiles ---------- */
.tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.tile{background:var(--card); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden; text-align:left; color:var(--navy); box-shadow:0 1px 2px rgba(17,58,81,.05);}
.tile-img{aspect-ratio:1/1; width:100%; background:var(--navy-soft) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:11px;}
.tile.sold-out .tile-img{filter:grayscale(1) brightness(.9);}
.tile.sold-out .tile-body *{color:var(--ink-faint) !important;}
.tile-body{padding:12px 13px 14px;}
.tile-name{font-size:13.5px; font-weight:700; margin-bottom:4px; line-height:1.3;}
.tile-cost{font-size:12px; color:var(--navy); font-weight:700;}
.tile-badge{position:absolute; margin:8px; background:var(--navy); color:var(--white); font-size:10px; font-weight:700; padding:4px 8px; border-radius:8px;}
.tile-wrap{position:relative;}

/* ---------- account / my-prizes ---------- */
.qr-box{background:var(--white); border:1px solid var(--line-soft); border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.prize-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line-soft);}
.prize-row:first-child{border-top:none;}
.prize-row img{width:46px; height:46px; border-radius:10px; object-fit:cover; background:var(--navy-soft); flex-shrink:0;}
.prize-row .name{font-size:13.5px; font-weight:600; flex:1;}
.prize-row .status-chip{font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px;}
.status-chip.to-collect{background:var(--ok-bg); color:var(--ok);}
.status-chip.collected{background:var(--navy-soft); color:var(--ink-soft);}
.section-label{font-size:12px; font-weight:700; color:var(--ink-soft); margin:18px 0 4px;}
.section-label:first-child{margin-top:0;}
.empty-note{font-size:13px; color:var(--ink-faint); padding:14px 0;}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(17,58,81,.4); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px;}
.modal-box{background:var(--white); width:100%; max-width:440px; border-radius:22px; padding:24px 22px; max-height:88vh; overflow-y:auto; animation:modalIn .16s ease; box-shadow:0 12px 40px rgba(17,58,81,.18); margin:auto;}
@keyframes modalIn{from{transform:scale(.96); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.modal-head h3{font-size:17px;}
.modal-close{background:none; border:none; color:var(--ink-soft); font-size:20px; line-height:1; padding:4px;}
.modal-close:hover{color:var(--navy);}
.code-input{width: 100%; text-align: center; font-family: 'Stack Sans Headline', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: .5em; padding: 14px 10px 14px 16px; border-radius: 12px; border: 1.6px solid var(--line); background: var(--card-soft); color: var(--navy);}
.congrats{text-align:center; padding:10px 0 4px;}
.congrats .big-check{width:56px; height:56px; border-radius:50%; background:var(--neon); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.congrats .points-added{font-family:'Stack Sans Headline', sans-serif; font-size:40px; font-weight:700; color:var(--navy); margin:10px 0;}
.congrats p{color:var(--ink-soft); font-size:14px;}
.prize-detail-img{width:100%; aspect-ratio:4/3; border-radius:16px; object-fit:cover; background:var(--navy-soft); margin-bottom:16px;}

/* ---------- photo upload ---------- */
.photo-upload-row{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.photo-preview{width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--navy-soft); flex-shrink:0; border:1px solid var(--line-soft);}
.photo-upload-status{font-size:12px; color:var(--ink-soft);}

/* ---------- staff app ---------- */
.staff-shell{flex:1; max-width:460px; margin:0 auto; width:100%; padding:24px 20px 40px;}
.staff-lookup{display:flex; gap:10px; margin-bottom:6px;}
.staff-lookup .field{flex:1; margin-bottom:0;}
.status-banner{border-radius:14px; padding:14px 16px; font-size:13.5px; font-weight:600; margin-top:16px; line-height:1.5;}
.status-banner.info{background:var(--navy-soft); color:var(--ink-soft);}
.status-banner.warn{background:var(--danger-bg); color:var(--danger);}

/* ---------- admin app (mobile-first: hamburger; desktop: left sidebar) ---------- */
.admin-shell{flex:1; display:flex; width:100%;}
.admin-side{width:220px; flex-shrink:0; background:var(--white); border-right:1px solid var(--line-soft); padding:22px 14px; flex-direction:column; gap:4px;}
.admin-side .logout-btn{margin-top:auto;}
.admin-main-wrap{flex:1; display:flex; flex-direction:column; min-width:0;}
.admin-main{flex:1; padding:14px 18px 60px; max-width:920px;}
.admin-main h2{font-size:22px; margin-bottom:20px;}
@media (min-width:860px){
  .admin-side{display:flex;}
  .admin-main{padding:28px 32px 60px;}
}

.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:8px;}
.stat-card{background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:18px 18px 16px;}
.stat-card .num{font-weight:700; font-size:28px;}
.stat-card .label{font-size:12px; margin-top:5px; font-weight:600;}
.stats-fraunces, .stats-fraunces h2, .stats-fraunces .num, .stats-fraunces .label{font-family:'Stack Sans Headline', sans-serif;}

.admin-tile{position:relative; cursor:pointer;}
.admin-tile .avail{font-size:11px; color:var(--ink-soft); margin-top:4px;}
.code-pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; background:var(--navy-soft); padding:3px 9px; border-radius:8px; letter-spacing:.06em;}
.code-reveal{text-align:center; padding:18px 0 6px;}
.code-reveal .code-big{font-family:'IBM Plex Mono',monospace; font-size:40px; font-weight:700; letter-spacing:.3em; color:var(--navy); margin:14px 0;}

.top-actions{display:flex; justify-content:flex-end; margin-bottom:16px;}

/* ---------- ujednolicona wysokość wszystkich ikon interfejsu ---------- */
.btn svg, .icon-btn svg, .side-nav-items button svg, .admin-side button svg,
.drawer-nav button svg, .drawer-logout svg, .panel h3 svg, .congrats .big-check svg {
  width:18px !important; height:18px !important;
}