/* ========== Reset & Layout ========== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;resize:none}
html,body{width:100%;height:100dvh;overflow:hidden;font-family:'Inter',sans-serif;font-size:14px;color:#0a0a0f;background:#fff;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
input,textarea,select,button{font-size:16px;-webkit-user-select:auto;user-select:auto;font-family:inherit}
.page{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}

.photo-background-page{position:relative;isolation:isolate}
.photo-background-shell{position:fixed;inset:0;overflow:hidden;background:var(--primary-dark);pointer-events:none;visibility:hidden;z-index:0}
.photo-background-shell.is-enabled{visibility:visible}
.photo-background-layer{position:absolute;inset:-2%;opacity:0;background-repeat:no-repeat;background-size:cover;background-position:center;transform:scale(var(--photo-background-start-scale,1.03));transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}
.photo-background-layer.is-visible{opacity:1;transform:scale(1);animation:photo-background-enter .3s ease both}
.photo-background-overlay{position:absolute;inset:0;background:var(--text);opacity:.55}
.photo-background-content{position:relative;z-index:1}
.photo-background-content #loading,.photo-background-content #empty-view,.photo-background-content #done-view{background:var(--bg);border-radius:20px;box-shadow:0 12px 28px rgba(10,10,15,.18)}
.photo-background-content #loading,.photo-background-content #empty-view,.photo-background-content #done-view{width:calc(100% - 32px)!important;height:calc(100% - 24px)!important;margin:12px 16px;padding:16px!important}
.guest-photo-wall{position:fixed;inset:0;z-index:0;display:grid;grid-template-columns:1.1fr .95fr 1.08fr;grid-template-rows:1.1fr .85fr;gap:3px;padding:3px;overflow:hidden;background:#07101d;pointer-events:none;visibility:hidden}
.guest-photo-wall.is-enabled{visibility:visible}
.guest-photo-wall-tile{background-color:#172235;background-repeat:no-repeat;background-size:cover;background-position:50% 10%;opacity:0;transform:scale(var(--home-wall-start-scale,1.03));transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}
.guest-photo-wall-tile--tall,.guest-photo-wall-tile--wide{min-width:0;min-height:0}
.guest-photo-wall-tile.is-visible{opacity:1;transform:scale(1)}
.guest-photo-wall-tile:nth-of-type(1){grid-row:1/3}
.guest-photo-wall-tile:nth-of-type(3){grid-row:1/3}
.guest-photo-wall-tile:nth-of-type(4){grid-column:2}
.guest-photo-wall-tile:nth-of-type(5){grid-column:3;grid-row:2}
.guest-photo-wall-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,13,22,.24),rgba(7,13,22,.56));pointer-events:none}
.guest-photo-wall-page{position:relative;z-index:1;color:#fff}
.guest-photo-wall-page .text-primary{color:#fff}
.guest-photo-wall-page .text-muted{color:rgba(255,255,255,.86)}
.guest-photo-wall-page .login-card{background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 17px 35px rgba(0,0,0,.28)}
.guest-photo-wall-page .input{background:rgba(255,255,255,.95);color:var(--text)}
@media (max-width:680px){.guest-photo-wall{grid-template-columns:1fr minmax(150px,.9fr);grid-template-rows:1fr 1.1fr 1fr}.guest-photo-wall-tile:nth-of-type(1){grid-column:1;grid-row:1/3}.guest-photo-wall-tile:nth-of-type(2){grid-column:2;grid-row:1/3}.guest-photo-wall-tile:nth-of-type(3){grid-column:1/3;grid-row:3}.guest-photo-wall-tile:nth-of-type(4),.guest-photo-wall-tile:nth-of-type(5){display:none}}
@media (prefers-reduced-motion:reduce){.guest-photo-wall-tile{transition:none;animation:none}}
.welcome-identity{display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:8px 14px 8px 8px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.92);border-radius:18px;box-shadow:0 10px 24px rgba(10,10,15,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text)}
.welcome-greeting-icon{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(244,63,94,.14);font-size:23px}
.welcome-identity #welcome-name{color:var(--text);line-height:1.25;text-shadow:none;overflow-wrap:anywhere}
.link.switch-account-control{min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.48);border-radius:12px;background:rgba(10,10,15,.68);color:#fff;font-weight:700;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.switch-account-control:focus-visible{outline:2px solid #fff;outline-offset:3px}
.assessment-photo-view{background:transparent;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.assessment-photo-header{color:#fff}
.assessment-photo-header a,.assessment-photo-header span{color:#fff!important}
.assessment-photo-progress{color:#fff}
.assessment-photo-progress .text-muted{color:rgba(255,255,255,.84)}
.assessment-photo-progress .text-primary{color:#fff}
.assessment-photo-progress .progress-bar{background:rgba(255,255,255,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.assessment-photo-progress .progress-fill{background:#fff;box-shadow:0 1px 8px rgba(255,255,255,.55)}
.assessment-photo-question{flex:1;min-height:0;overflow-y:auto;padding:12px 0;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.assessment-photo-view #q-dim{background:rgba(10,10,15,.42)!important;color:#fff!important;border-color:rgba(255,255,255,.34)!important;backdrop-filter:blur(10px)}
.assessment-photo-view #q-text{color:#fff}
.assessment-photo-view .opt-btn{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.56);color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px rgba(10,10,15,.16)}
.assessment-photo-view .opt-btn .dot{border-color:rgba(10,10,15,.18)}
.assessment-photo-view .opt-btn.selected{background:var(--primary);border-color:rgba(255,255,255,.8);color:#fff;box-shadow:0 12px 28px rgba(10,10,15,.28)}
.assessment-photo-nav{flex-shrink:0;background:rgba(10,10,15,.62);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:10px 12px 12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(0,0,0,.22);text-shadow:none}
.assessment-photo-nav .btn-ghost,.assessment-photo-nav .btn-outline,.assessment-photo-nav .link{color:#fff}
.assessment-photo-nav .btn-ghost{background:rgba(255,255,255,.12)}
.assessment-photo-nav .btn-outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.52)}
.assessment-photo-nav .match-pool-status{color:#bbf7d0}
@media (max-width:480px){.assessment-photo-view{padding-left:14px!important;padding-right:14px!important}.assessment-photo-question{padding-top:8px}.assessment-photo-view #q-text{font-size:21px!important}.assessment-photo-nav{border-radius:16px}}
@keyframes photo-background-enter{from{opacity:0;transform:scale(var(--photo-background-start-scale,1.03))}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.photo-background-layer{transition:none;animation:none!important}}

/* ========== Colors ========== */
:root{
  --primary:#F43F5E;
  --primary-light:rgba(244,63,94,.1);
  --primary-dark:#E11D48;
  --accent:#F59E0B;
  --accent-light:rgba(245,158,11,.1);
  --bg:#FFFFFF;
  --text:#0A0A0F;
  --text2:#71717A;
  --muted:#F4F4F5;
  --border:#E4E4E7;
  --destructive:#EF4444;
  --green:#22C55E;
}

/* ========== Typography ========== */
.font-h{font-family:'Space Grotesk','Inter',sans-serif}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-muted{color:var(--text2)}
.text-green{color:var(--green)}
.text-destructive{color:var(--destructive)}
.text-center{text-align:center}
.text-xs{font-size:10px}
.text-sm{font-size:12px}
.text-base{font-size:14px}
.text-lg{font-size:16px}
.text-xl{font-size:18px}
.text-2xl{font-size:22px}
.bold{font-weight:700}
.medium{font-weight:500}
.uppercase{text-transform:uppercase}
.tracking{letter-spacing:2px}
.italic{font-style:italic}

/* ========== Layout ========== */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1;min-height:0}
.shrink-0{flex-shrink:0}
.w-full{width:100%}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-4{padding-top:16px;padding-bottom:16px}
.pt-4{padding-top:16px}
.pb-4{padding-bottom:16px}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.hidden{display:none!important}
.overflow-y-auto{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ========== Buttons ========== */
.btn{display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:700;font-size:17px;height:46px;padding:0 16px;border:none;cursor:pointer;white-space:nowrap;font-family:'Space Grotesk','Inter',sans-serif;transition:opacity .2s}
.btn:active{opacity:.7}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-ghost{background:transparent;color:var(--text2)}
.btn-full{width:100%}
.btn-flex{flex:1}
.btn:disabled{opacity:.5;pointer-events:none}
#btn-join-match{height:auto;min-height:46px;line-height:1.25;white-space:normal;text-align:center;overflow-wrap:anywhere}
.assessment-nav-row{display:flex;align-items:center;gap:8px}
.assessment-nav-row .btn{flex:1;min-width:0}
.match-pool-status{margin:0 0 4px;text-align:center;color:var(--green);font-size:12px;font-weight:700;line-height:1.4}

/* ========== Inputs ========== */
.input{height:42px;border:1.5px solid var(--border);border-radius:12px;padding:0 14px;font-size:14px;background:var(--muted);width:100%;outline:none;transition:border-color .2s}
.input:focus{border-color:var(--primary)}
.input-error{border-color:var(--destructive)}
.select-wrap{position:relative}
.select-display{height:42px;border:1.5px solid var(--border);border-radius:12px;padding:0 14px;font-size:14px;background:var(--muted);width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.select-display.placeholder{color:var(--text2)}
.select-display:focus-visible,.select-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.select-list{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:20;max-height:min(240px,40dvh);overflow-y:auto}
.select-item{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:14px;line-height:1.35;cursor:pointer;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.select-item:last-child{border-bottom:none}
.select-item:active,.select-item.active{background:var(--primary-light);color:var(--primary)}
.university-hint{margin:0;color:var(--text2);font-size:12px;line-height:1.4}

/* ========== Cards ========== */
.card{background:#fff;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:16px;overflow:hidden}
.login-card{position:relative;overflow:visible}
.welcome-content{flex-shrink:0}
.welcome-content>*{flex-shrink:0}
.welcome-card{flex-shrink:0;overflow:visible}
#welcome{position:relative}
.settings-fab{position:absolute;top:max(12px,env(safe-area-inset-top));right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--text2);background:var(--muted);border:1px solid var(--border);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:18px;text-decoration:none;z-index:10}
.settings-fab:active{opacity:.7}
.settings-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ========== Countdown ========== */
.countdown-row{display:flex;gap:12px;justify-content:center}
.countdown-item{display:flex;flex-direction:column;align-items:center}
.countdown-box{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);border-bottom:3px solid rgba(244,63,94,.15)}
.countdown-value{font-size:22px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;font-family:'Space Grotesk',sans-serif}
.countdown-unit{margin-top:4px;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:2px}

/* ========== Progress ========== */
.progress-bar{height:6px;background:var(--muted);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;background:var(--primary);transition:width .3s}

/* ========== Error ========== */
.error-row{display:flex;align-items:center;justify-content:center;gap:4px;color:var(--destructive);font-size:11px;font-weight:700}
.review-status-card{margin-top:12px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:14px;text-align:left;color:#9a3412}
.review-status-card .review-title{font:700 14px 'Space Grotesk',sans-serif;color:#c2410c}
.review-status-card .review-copy,.review-status-card .review-reason,.review-status-card .review-request{font-size:12px;line-height:1.5;margin-top:5px}

/* ========== Chat ========== */
.msg-system{background:#fff;padding:6px 14px;border-radius:99px;border:1px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);text-align:center;align-self:center}
.msg-mine{max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--primary);color:#fff;font-size:13px;align-self:flex-end;word-break:break-word;overflow-wrap:break-word}
.msg-theirs{max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--border);font-size:13px;align-self:flex-start;word-break:break-word;overflow-wrap:break-word}

/* ========== Misc ========== */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:var(--primary)}
.avatar-image{width:100%;height:100%;border-radius:inherit;display:block;object-fit:cover;background:#fff}
.divider{height:1px;background:var(--border);width:100%}
.link{color:var(--text2);font-size:12px;text-decoration:underline;cursor:pointer;border:none;background:none;font-family:inherit}
.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700}
.badge-green{background:rgba(34,197,94,.1);color:#15803D}
.spinner{width:32px;height:32px;border:3px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}