/* ========================================
   CLOCKEET STYLES - MOBILE OPTIMIZED
   ======================================== */

/* Universal Box Sizing & Reset */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-tap-highlight-color: transparent;
 }
 
 :root {
   --ink: #0D0A14;
   --ink2: #1E1828;
   --rose: #E8547A;
   --rose-l: #FDEEF3;
   --rose-m: #F2ADC0;
   --rose-d: #B03058;
   --gold: #C9921A;
   --gold-l: #FDF5E8;
   --cream: #FAF6F1;
   --white: #FFFFFF;
   --muted: #8B7B90;
   --text: #1E1828;
   --text2: #5C4060;
   --border: rgba(232, 84, 122, 0.12);
   --border2: rgba(232, 84, 122, 0.22);
   --surface: #F5F0F5;
   --tag-bg: #FDF2F5;
   --ok: #2DAA6B;
   --shadow: 0 6px 32px rgba(232, 84, 122, 0.12);
   --r: 22px;
 }
 
 html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #0D0A14;
 }
 
 body {
   font-family: 'DM Sans', sans-serif;
   color: var(--text);
   font-size: 15px;
 }
 
 /* Shell Container - Fixed for all screens */
 .shell {
   width: 100%;
   max-width: 430px;
   height: 100dvh;
   margin: 0 auto;
   background: var(--cream);
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
 }
 
 /* Fallback for browsers that don't support dvh */
 @supports not (height: 100dvh) {
   .shell {
     height: 100vh;
   }
 }
 
 /* Universal Screen Styles - FIX FOR ALL SCREENS */
 .screen {
   display: none;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
   height: 100%;
 }
 
 .screen.active {
   display: flex;
 }
 
 /* Universal Scroll Container Fix - CRITICAL */
 .scroll-body,
 .signup-scroll,
 .chat-messages,
 .filters-body,
 .search-results,
 .matches-grid,
 .chat-list,
 .profile-body {
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   min-height: 0; /* CRITICAL: Allows flex children to shrink */
 }
 
 /* Add safe area padding to scrollable containers */
 .scroll-body::after,
 .signup-scroll::after,
 .chat-messages::after,
 .filters-body::after {
   content: '';
   display: block;
   height: max(16px, env(safe-area-inset-bottom));
   min-height: 16px;
 }
 
 /* ONBOARDING */
 #screen-onboard {
   background: var(--ink);
 }
 
 .ob-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 30% 20%, rgba(232,84,122,0.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(201,146,26,0.12) 0%, transparent 55%);
 }
 
 .ob-wrap {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
   z-index: 1;
   min-height: 0;
 }
 
 .ob-slides {
   display: flex;
   transition: transform 0.5s cubic-bezier(.77, 0, .175, 1);
   touch-action: pan-x;
 }
 
 .ob-slide {
   min-width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 60px 32px 32px;
   text-align: center;
 }
 
 .ob-icon {
   font-size: 80px;
   margin-bottom: 28px;
   animation: float 3s ease-in-out infinite;
 }
 
 @keyframes float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-10px); }
 }
 
 .ob-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 32px;
   color: #fff;
   margin-bottom: 14px;
   line-height: 1.2;
   font-weight: 600;
 }
 
 .ob-title em {
   color: var(--rose-m);
   font-style: italic;
 }
 
 .ob-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.75;
   max-width: 300px;
 }
 
 .ob-dots {
   display: flex;
   gap: 8px;
   justify-content: center;
   padding: 20px 0;
 }
 
 .ob-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   transition: all 0.3s;
   cursor: pointer;
 }
 
 .ob-dot.active {
   background: var(--rose);
   width: 22px;
   border-radius: 4px;
 }
 
 .ob-actions {
   flex-shrink: 0;
   padding: 0 24px 40px;
   position: relative;
   z-index: 1;
 }
 
 .ob-btn {
   width: 100%;
   padding: 17px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 16px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   transition: all 0.2s;
   box-shadow: 0 6px 28px rgba(232, 84, 122, 0.45);
   letter-spacing: 0.2px;
   touch-action: manipulation;
 }
 
 .ob-btn:active {
   transform: scale(0.98);
 }
 
 .ob-skip {
   text-align: center;
   padding: 14px 0 0;
   color: rgba(255, 255, 255, 0.3);
   font-size: 13px;
   cursor: pointer;
   touch-action: manipulation;
 }
 
 /* LOGIN & SIGNUP - COMPLETE FIX */
 #screen-login, #screen-signup {
   background: var(--ink);
   height: 100%;
   overflow: hidden;
 }
 
 .signup-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 70% 10%, rgba(232,84,122,0.15) 0%, transparent 55%);
   pointer-events: none;
 }
 
 .signup-scroll {
   flex: 1;
   overflow-y: auto;
   padding: 40px 24px 32px;
   position: relative;
   z-index: 1;
   -webkit-overflow-scrolling: touch;
   min-height: 0;
 }
 
 .su-logo {
   font-family: 'Cormorant Garamond', serif;
   font-size: 30px;
   color: #fff;
   font-weight: 600;
   margin-bottom: 4px;
 }
 
 .su-logo em {
   color: var(--rose);
   font-style: italic;
 }
 
 .su-sub {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.38);
   margin-bottom: 28px;
 }
 
 .su-progress {
   height: 2px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   margin-bottom: 28px;
   overflow: hidden;
 }
 
 .su-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--rose), var(--rose-m));
   border-radius: 2px;
   transition: width 0.5s ease;
 }
 
 .form-group {
   margin-bottom: 18px;
 }
 
 .form-label {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.9px;
   color: rgba(255, 255, 255, 0.4);
   margin-bottom: 8px;
   display: block;
   font-weight: 600;
 }
 
 .form-label span {
   color: var(--rose);
   font-size: 10px;
   margin-left: 4px;
 }
 
 .form-input {
   width: 100%;
   padding: 13px 16px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   color: #fff;
   font-size: 16px;
   font-family: 'DM Sans', sans-serif;
   transition: border 0.2s;
   outline: none;
 }
 
 .form-input:focus {
   border-color: var(--rose);
 }
 
 .form-input::placeholder {
   color: rgba(255, 255, 255, 0.2);
 }
 
 .form-select {
   width: 100%;
   padding: 13px 16px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   color: #fff;
   font-size: 16px;
   font-family: 'DM Sans', sans-serif;
   outline: none;
   appearance: none;
   cursor: pointer;
 }
 
 .form-select option {
   background: #1E1828;
   color: #fff;
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
 .chip-group {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
 }
 
 .form-chip {
   padding: 8px 14px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: transparent;
   color: rgba(255, 255, 255, 0.65);
   font-size: 12px;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .form-chip.sel {
   background: var(--rose);
   border-color: var(--rose);
   color: #fff;
 }
 
 .su-next {
   width: 100%;
   padding: 15px;
   margin-top: 24px;
   margin-bottom: 16px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 14px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   box-shadow: 0 4px 20px rgba(232, 84, 122, 0.4);
   transition: all 0.2s;
   letter-spacing: 0.2px;
   touch-action: manipulation;
 }
 
 .su-next:active {
   transform: scale(0.98);
 }
 
 .su-back {
   display: block;
   text-align: center;
   margin-top: 8px;
   margin-bottom: 20px;
   color: rgba(255, 255, 255, 0.3);
   font-size: 13px;
   cursor: pointer;
   touch-action: manipulation;
 }
 
 /* TOPBAR */
 .topbar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px 12px;
   background: var(--white);
   border-bottom: 0.5px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
 .topbar-logo {
   font-family: 'Cormorant Garamond', serif;
   font-size: 23px;
   font-weight: 700;
   color: var(--ink);
 }
 
 .topbar-logo em {
   color: var(--rose);
   font-style: italic;
 }
 
 .topbar-logo small {
   font-size: 10px;
   color: var(--muted);
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   letter-spacing: 0.5px;
   margin-left: 3px;
   vertical-align: middle;
 }
 
 .topbar-actions {
   display: flex;
   gap: 9px;
 }
 
 .topbar-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 15px;
   border: 0.5px solid var(--border2);
   background: var(--rose-l);
   transition: all 0.2s;
   position: relative;
   touch-action: manipulation;
 }
 
 .topbar-btn:active {
   transform: scale(0.95);
 }
 
 .notif-dot {
   position: absolute;
   top: 1px;
   right: 1px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--rose);
   border: 2px solid var(--white);
 }
 
 /* BOTTOM NAV */
 .bottom-nav {
   flex-shrink: 0;
   display: flex;
   background: var(--white);
   border-top: 0.5px solid var(--border);
   padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 .bnav {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px 0 8px;
   cursor: pointer;
   font-size: 10px;
   color: var(--muted);
   gap: 4px;
   transition: color 0.2s;
   font-weight: 500;
   letter-spacing: 0.3px;
   position: relative;
   touch-action: manipulation;
 }
 
 .bnav.active {
   color: var(--rose);
 }
 
 .bnav svg {
   width: 21px;
   height: 21px;
 }
 
 .bnav .badge {
   position: absolute;
   top: 6px;
   right: 24%;
   background: var(--rose);
   color: #fff;
   font-size: 9px;
   font-weight: 700;
   padding: 2px 5px;
   border-radius: 8px;
   min-width: 16px;
   text-align: center;
 }
 
 /* CARD STACK - SWIPE ENABLED */
 .card-area {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 14px 14px 4px;
   overflow: hidden;
   position: relative;
   touch-action: pan-y;
   min-height: 0;
 }
 
 .profile-card {
   width: 100%;
   max-width: 100%;
   border-radius: var(--r);
   background: var(--white);
   overflow: hidden;
   box-shadow: var(--shadow);
   animation: cardIn 0.4s ease;
   position: relative;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
   cursor: grab;
   transition: transform 0.1s ease-out, opacity 0.1s ease-out;
 }
 
 .profile-card.dragging {
   cursor: grabbing;
   transition: none;
 }
 
 .swipe-indicator {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 80px;
   font-weight: 900;
   opacity: 0;
   pointer-events: none;
   z-index: 5;
   transition: opacity 0.2s;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 .swipe-indicator.like {
   color: var(--rose);
 }
 
 .swipe-indicator.nope {
   color: #999;
 }
 
 @keyframes cardIn {
   from { opacity: 0; transform: translateY(20px) scale(0.96); }
   to { opacity: 1; transform: none; }
 }
 
 .card-exit-left {
   animation: exitL 0.4s ease forwards;
   pointer-events: none;
 }
 
 .card-exit-right {
   animation: exitR 0.4s ease forwards;
   pointer-events: none;
 }
 
 @keyframes exitL {
   to { opacity: 0; transform: translateX(-140%) rotate(-20deg); }
 }
 
 @keyframes exitR {
   to { opacity: 0; transform: translateX(140%) rotate(20deg); }
 }
 
 .card-photo {
   width: 100%;
   height: 272px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   background: linear-gradient(135deg, #FDEEF3, #F0C0D0);
 }
 
 .card-emo {
   font-size: 100px;
   position: relative;
   z-index: 1;
 }
 
 .card-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 140px;
   background: linear-gradient(to top, rgba(13, 10, 20, 0.82), transparent);
 }
 
 .card-identity {
   position: absolute;
   bottom: 14px;
   left: 16px;
   color: #fff;
   z-index: 2;
 }
 
 .card-identity h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 24px;
   font-weight: 600;
 }
 
 .card-identity p {
   font-size: 12px;
   opacity: 0.75;
   margin-top: 2px;
 }
 
 .ai-badge {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 2;
   background: var(--rose);
   color: #fff;
   border-radius: 20px;
   padding: 5px 12px;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
 .ai-badge::before {
   content: '◆';
   font-size: 8px;
 }
 
 .verified-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 2;
   background: rgba(255, 255, 255, 0.93);
   border-radius: 20px;
   padding: 4px 10px;
   font-size: 11px;
   font-weight: 600;
   color: var(--ok);
   display: flex;
   align-items: center;
   gap: 3px;
 }
 
 .card-mini-btns {
   position: absolute;
   top: 50%;
   right: 10px;
   z-index: 2;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .card-mini-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.93);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 15px;
   transition: all 0.2s;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   touch-action: manipulation;
 }
 
 .card-mini-btn:active {
   transform: scale(1.12);
 }
 
 .card-body {
   padding: 12px 14px 14px;
 }
 
 .compat-title {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.9px;
   color: var(--muted);
   margin-bottom: 8px;
   font-weight: 600;
 }
 
 .match-bars {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 7px;
   margin-bottom: 11px;
 }
 
 .mbar {
   background: var(--surface);
   border-radius: 10px;
   padding: 7px 9px;
 }
 
 .mbar-label {
   font-size: 9px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 3px;
 }
 
 .mbar-track {
   height: 3px;
   background: rgba(232, 84, 122, 0.1);
   border-radius: 4px;
   overflow: hidden;
 }
 
 .mbar-fill {
   height: 100%;
   background: var(--rose);
   border-radius: 4px;
   transition: width 0.6s ease;
 }
 
 .mbar-val {
   font-size: 10px;
   font-weight: 600;
   color: var(--rose);
   margin-top: 3px;
 }
 
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-bottom: 11px;
 }
 
 .tag {
   font-size: 11px;
   padding: 4px 10px;
   border-radius: 20px;
   background: var(--tag-bg);
   border: 0.5px solid var(--border2);
   color: var(--rose-d);
   font-weight: 500;
 }
 
 .card-details {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
 }
 
 .detail-box {
   background: var(--surface);
   border-radius: 9px;
   padding: 7px 5px;
   text-align: center;
 }
 
 .detail-icon {
   font-size: 13px;
   margin-bottom: 2px;
 }
 
 .detail-lbl {
   font-size: 8px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
 
 .detail-v {
   font-size: 11px;
   font-weight: 500;
   color: var(--text);
 }
 
 /* ACTION ROW */
 .action-row {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 12px 20px 14px;
   position: relative;
   background: var(--cream);
 }
 
 .act-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
   transition: all 0.2s;
   font-size: 20px;
   font-family: 'DM Sans', sans-serif;
   position: relative;
   touch-action: manipulation;
 }
 
 .btn-pass {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--white);
   border: 1.5px solid #E8D0D8;
   color: #C0748A;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
 }
 
 .btn-pass:active {
   background: var(--rose-l);
   transform: scale(1.08);
 }
 
 .btn-heart {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   background: var(--rose);
   color: #fff;
   box-shadow: 0 6px 24px rgba(232, 84, 122, 0.5);
 }
 
 .btn-heart:active {
   background: var(--rose-d);
   transform: scale(0.95);
 }
 
 .btn-super {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--white);
   border: 1.5px solid rgba(201, 146, 26, 0.35);
   color: var(--gold);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
 }
 
 .btn-super:active {
   background: var(--gold-l);
   transform: scale(1.08);
 }
 
 .btn-undo {
   position: absolute;
   left: 18px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--white);
   border: 1.5px solid var(--border2);
   color: var(--muted);
   font-size: 18px;
   opacity: 0.7;
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .btn-undo:active {
   opacity: 1;
   transform: scale(1.08);
 }
 
 .btn-undo.disabled {
   opacity: 0.25;
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* EMPTY STATE */
 .empty-state {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px 28px;
   text-align: center;
   gap: 12px;
 }
 
 .empty-icon {
   font-size: 58px;
 }
 
 .empty-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 22px;
   color: var(--text);
 }
 
 .empty-desc {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.65;
 }
 
 .empty-btn {
   margin-top: 8px;
   padding: 12px 24px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   touch-action: manipulation;
 }
 
 /* MATCHES */
 .screen-header {
   padding: 18px 18px 10px;
 }
 
 .screen-header h1 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 24px;
   font-weight: 600;
 }
 
 .screen-header p {
   font-size: 13px;
   color: var(--muted);
   margin-top: 2px;
 }
 
 .match-tabs {
   display: flex;
   padding: 0 16px 12px;
   gap: 8px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .match-tabs::-webkit-scrollbar {
   display: none;
 }
 
 .match-tab {
   padding: 7px 15px;
   border-radius: 20px;
   font-size: 12px;
   border: 0.5px solid var(--border2);
   cursor: pointer;
   transition: all 0.2s;
   font-weight: 500;
   background: var(--white);
   color: var(--muted);
   white-space: nowrap;
   flex-shrink: 0;
   touch-action: manipulation;
 }
 
 .match-tab.active {
   background: var(--rose);
   border-color: var(--rose);
   color: #fff;
 }
 
 .matches-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 11px;
   padding: 0 16px 16px;
   min-height: 0;
 }
 
 .mcard {
   background: var(--white);
   border-radius: 18px;
   border: 0.5px solid var(--border);
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.2s;
   position: relative;
   touch-action: manipulation;
 }
 
 .mcard:active {
   transform: translateY(-3px);
 }
 
 .mcard-photo {
   height: 116px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 52px;
   background: linear-gradient(135deg, #FDE6EE, #F5C0D0);
   position: relative;
 }
 
 .mcard-body {
   padding: 10px;
 }
 
 .mcard-name {
   font-weight: 600;
   font-size: 14px;
 }
 
 .mcard-compat {
   font-size: 11px;
   color: var(--rose);
   font-weight: 500;
   margin-top: 1px;
 }
 
 .mcard-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 5px;
 }
 
 .mcard-tag {
   font-size: 9px;
   padding: 2px 7px;
   border-radius: 10px;
   background: var(--tag-bg);
   color: var(--rose-d);
 }
 
 .online-dot-sm {
   position: absolute;
   bottom: 7px;
   right: 7px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--ok);
   border: 2px solid #fff;
 }
 
 /* CHAT */
 .chat-list {
   padding: 0 0 8px;
   min-height: 0;
 }
 
 .chat-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 18px;
   cursor: pointer;
   border-bottom: 0.5px solid var(--border);
   transition: background 0.15s;
   touch-action: manipulation;
 }
 
 .chat-item:active {
   background: var(--surface);
 }
 
 .chat-avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg, #FDE, #F5C0D0);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0;
   position: relative;
 }
 
 .online-dot-av {
   position: absolute;
   bottom: 2px;
   right: 2px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--ok);
   border: 2px solid var(--white);
 }
 
 .chat-info {
   flex: 1;
   min-width: 0;
 }
 
 .chat-name {
   font-weight: 600;
   font-size: 15px;
 }
 
 .chat-preview {
   font-size: 13px;
   color: var(--muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-top: 1px;
 }
 
 .chat-meta {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
 }
 
 .chat-time {
   font-size: 11px;
   color: var(--muted);
 }
 
 .unread-badge {
   background: var(--rose);
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 10px;
   min-width: 20px;
   text-align: center;
 }
 
 .compat-pill {
   font-size: 10px;
   color: var(--rose);
   font-weight: 600;
   background: var(--rose-l);
   padding: 2px 7px;
   border-radius: 10px;
 }
 
 /* CHAT WINDOW */
 #screen-chatwindow {
   background: var(--cream);
 }
 
 .chat-topbar {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 12px 16px;
   background: var(--white);
   border-bottom: 0.5px solid var(--border);
   flex-shrink: 0;
 }
 
 .chat-back {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
   color: var(--rose);
   border: 0.5px solid var(--border2);
   background: var(--rose-l);
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .chat-back:active {
   transform: scale(0.95);
 }
 
 .chat-topbar-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, #FDE, #F5C0D0);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
 }
 
 .chat-topbar-info {
   flex: 1;
 }
 
 .chat-topbar-name {
   font-weight: 600;
   font-size: 15px;
 }
 
 .chat-topbar-status {
   font-size: 11px;
   color: var(--ok);
 }
 
 .chat-topbar-compat {
   font-size: 12px;
   color: var(--rose);
   font-weight: 600;
   background: var(--rose-l);
   padding: 4px 10px;
   border-radius: 20px;
   border: 0.5px solid var(--border2);
 }
 
 .chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: 14px 13px;
   display: flex;
   flex-direction: column;
   gap: 9px;
   -webkit-overflow-scrolling: touch;
   min-height: 0;
 }
 
 .msg {
   max-width: 74%;
   display: flex;
   flex-direction: column;
 }
 
 .msg.mine {
   align-self: flex-end;
   align-items: flex-end;
 }
 
 .msg.theirs {
   align-self: flex-start;
   align-items: flex-start;
 }
 
 .msg-bubble {
   padding: 10px 14px;
   border-radius: 18px;
   font-size: 14px;
   line-height: 1.55;
 }
 
 .msg.mine .msg-bubble {
   background: var(--rose);
   color: #fff;
   border-bottom-right-radius: 5px;
 }
 
 .msg.theirs .msg-bubble {
   background: var(--white);
   border: 0.5px solid var(--border);
   color: var(--text);
   border-bottom-left-radius: 5px;
 }
 
 .msg-time {
   font-size: 10px;
   color: var(--muted);
   margin-top: 3px;
   padding: 0 3px;
 }
 
 .typing-indicator {
   align-self: flex-start;
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 10px 14px;
   border-radius: 18px;
   border-bottom-left-radius: 5px;
   background: var(--white);
   border: 0.5px solid var(--border);
 }
 
 .typing-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--muted);
   animation: typing 1.4s infinite;
 }
 
 .typing-dot:nth-child(2) {
   animation-delay: 0.2s;
 }
 
 .typing-dot:nth-child(3) {
   animation-delay: 0.4s;
 }
 
 @keyframes typing {
   0%, 60%, 100% { opacity: 0.3; }
   30% { opacity: 1; }
 }
 
 .ai-suggestion {
   background: linear-gradient(135deg, var(--rose-l), var(--gold-l));
   border: 0.5px solid var(--border2);
   border-radius: 14px;
   padding: 10px 13px;
   margin: 3px 13px;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   animation: slideUp 0.3s ease;
 }
 
 @keyframes slideUp {
   from { opacity: 0; transform: translateY(6px); }
   to { opacity: 1; transform: none; }
 }
 
 .ai-sug-icon {
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }
 
 .ai-sug-text {
   font-size: 12px;
   color: var(--text2);
   line-height: 1.55;
   flex: 1;
 }
 
 .ai-sug-text strong {
   color: var(--rose-d);
 }
 
 .ai-sug-use {
   margin-left: auto;
   padding: 4px 10px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 10px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   flex-shrink: 0;
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .ai-sug-use:active {
   background: var(--rose-d);
 }
 
 .ai-sug-loading {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--muted);
 }
 
 .chat-input-bar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 13px 13px;
   background: var(--white);
   border-top: 0.5px solid var(--border);
 }
 
 .chat-input {
   flex: 1;
   padding: 10px 14px;
   background: var(--surface);
   border: 0.5px solid var(--border);
   border-radius: 22px;
   font-size: 16px;
   font-family: 'DM Sans', sans-serif;
   outline: none;
   color: var(--text);
   transition: border 0.2s;
 }
 
 .chat-input:focus {
   border-color: var(--rose);
 }
 
 .chat-send {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--rose);
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 16px;
   color: #fff;
   transition: all 0.2s;
   flex-shrink: 0;
   touch-action: manipulation;
 }
 
 .chat-send:active {
   transform: scale(0.95);
 }
 
 .chat-ai-btn {
   padding: 7px 12px;
   background: var(--rose-l);
   border: 0.5px solid var(--border2);
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600;
   color: var(--rose-d);
   cursor: pointer;
   white-space: nowrap;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 4px;
   touch-action: manipulation;
 }
 
 .chat-ai-btn:active {
   background: var(--rose);
 }
 
 .chat-ai-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
 /* PROFILE */
 .profile-hero {
   background: linear-gradient(170deg, var(--ink) 0%, #2D1230 100%);
   padding: 28px 20px 22px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   flex-shrink: 0;
 }
 
 .profile-completion {
   position: absolute;
   top: 14px;
   right: 14px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 8px 12px;
   font-size: 11px;
   color: #fff;
 }
 
 .completion-text {
   opacity: 0.65;
   margin-bottom: 5px;
 }
 
 .completion-bar {
   width: 90px;
   height: 3px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 4px;
   overflow: hidden;
 }
 
 .completion-fill {
   height: 100%;
   background: var(--rose-m);
   border-radius: 4px;
   transition: width 0.8s ease;
 }
 
 .profile-avatar-wrap {
   position: relative;
   margin-bottom: 11px;
 }
 
 .profile-avatar {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--rose-l), var(--rose-m));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 42px;
   border: 3px solid rgba(255, 255, 255, 0.12);
   overflow: hidden;
 }
 
 .edit-avatar {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--rose);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   color: #fff;
   cursor: pointer;
   border: 2px solid #fff;
   touch-action: manipulation;
 }
 
 .profile-name {
   font-family: 'Cormorant Garamond', serif;
   font-size: 24px;
   color: #fff;
   font-weight: 600;
 }
 
 .profile-tagline {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 4px;
 }
 
 .profile-stats {
   display: flex;
   gap: 26px;
   margin-top: 17px;
 }
 
 .pstat {
   text-align: center;
 }
 
 .pstat-num {
   font-size: 20px;
   font-weight: 700;
   color: var(--rose-m);
 }
 
 .pstat-lbl {
   font-size: 9px;
   color: rgba(255, 255, 255, 0.35);
   margin-top: 1px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .profile-body {
   flex: 1;
   overflow-y: auto;
   padding: 14px;
   min-height: 0;
 }
 
 .section-header {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--muted);
   margin-bottom: 10px;
   font-weight: 600;
 }
 
 .pref-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 7px;
   margin-bottom: 16px;
 }
 
 .pref-card {
   background: var(--white);
   border: 0.5px solid var(--border);
   border-radius: 12px;
   padding: 10px 12px;
 }
 
 .pref-lbl {
   font-size: 9px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 2px;
 }
 
 .pref-val {
   font-size: 13px;
   font-weight: 500;
 }
 
 .algo-card {
   background: var(--white);
   border: 0.5px solid var(--border);
   border-radius: 16px;
   padding: 14px;
   margin-bottom: 16px;
 }
 
 .algo-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
 }
 
 .algo-title {
   font-size: 14px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
 .algo-edit {
   font-size: 12px;
   color: var(--rose);
   cursor: pointer;
   touch-action: manipulation;
 }
 
 .algo-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
 }
 
 .algo-name {
   font-size: 11px;
   color: var(--muted);
   min-width: 110px;
 }
 
 .algo-track {
   flex: 1;
   height: 5px;
   background: rgba(232, 84, 122, 0.1);
   border-radius: 5px;
   overflow: hidden;
 }
 
 .algo-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--rose), var(--rose-m));
   border-radius: 5px;
 }
 
 .algo-pct {
   font-size: 11px;
   font-weight: 600;
   color: var(--rose);
   min-width: 30px;
   text-align: right;
 }
 
 .pref-boost {
   background: linear-gradient(135deg, #FDF2F5, var(--gold-l));
   border: 0.5px solid rgba(201, 146, 26, 0.2);
   border-radius: 14px;
   padding: 13px;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 11px;
 }
 
 .boost-icon {
   font-size: 26px;
 }
 
 .boost-text h4 {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 2px;
 }
 
 .boost-text p {
   font-size: 12px;
   color: var(--muted);
 }
 
 .boost-btn {
   margin-left: auto;
   padding: 7px 14px;
   background: var(--gold);
   color: #fff;
   border: none;
   border-radius: 10px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   white-space: nowrap;
   flex-shrink: 0;
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 /* FILTERS */
 .filters-body {
   flex: 1;
   overflow-y: auto;
   padding: 4px 0 16px;
   min-height: 0;
 }
 
 .filter-section {
   padding: 12px 18px 4px;
 }
 
 .filter-lbl {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--muted);
   margin-bottom: 9px;
 }
 
 .chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
 }
 
 .fchip {
   padding: 7px 13px;
   border-radius: 20px;
   border: 1px solid var(--border2);
   background: var(--white);
   font-size: 12px;
   cursor: pointer;
   color: var(--text);
   transition: all 0.2s;
   font-family: 'DM Sans', sans-serif;
   touch-action: manipulation;
 }
 
 .fchip.on {
   background: var(--rose);
   border-color: var(--rose);
   color: #fff;
 }
 
 .fchip:active:not(.on) {
   border-color: var(--rose);
 }
 
 .divider {
   height: 0.5px;
   background: var(--border);
   margin: 10px 18px;
 }
 
 .range-wrap {
   padding: 0 18px 4px;
 }
 
 .range-row {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 
 .range-labels {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   color: var(--muted);
 }
 
 .range-val {
   color: var(--rose);
   font-weight: 600;
 }
 
 input[type=range] {
   width: 100%;
   accent-color: var(--rose);
   appearance: none;
   -webkit-appearance: none;
   height: 6px;
   border-radius: 5px;
   background: rgba(232, 84, 122, 0.15);
 }
 
 input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--rose);
   cursor: pointer;
 }
 
 input[type=range]::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--rose);
   cursor: pointer;
   border: none;
 }
 
 .ai-weight-card {
   margin: 10px 18px 4px;
   background: linear-gradient(135deg, #FDF2F5, var(--gold-l));
   border: 0.5px solid rgba(232, 84, 122, 0.18);
   border-radius: 16px;
   padding: 14px;
 }
 
 .ai-weight-title {
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
 .weight-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 7px;
 }
 
 .weight-name {
   font-size: 11px;
   color: var(--text2);
   min-width: 100px;
 }
 
 .weight-slider {
   flex: 1;
   accent-color: var(--rose);
 }
 
 .weight-pct {
   font-size: 11px;
   font-weight: 600;
   color: var(--rose);
   min-width: 30px;
   text-align: right;
 }
 
 .apply-btn {
   margin: 14px 18px 8px;
   padding: 15px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 14px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   width: calc(100% - 36px);
   font-family: 'DM Sans', sans-serif;
   box-shadow: 0 4px 20px rgba(232, 84, 122, 0.35);
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .apply-btn:active {
   transform: scale(0.98);
 }
 
 /* MODALS */
 .modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 100;
   background: rgba(13, 10, 20, 0.88);
   display: none;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   padding: 20px;
 }
 
 .modal-overlay.show {
   display: flex;
 }
 
 .profile-detail-modal {
   background: var(--white);
   max-width: 400px;
   width: 100%;
   max-height: 85vh;
   border-radius: 24px;
   overflow: hidden;
   animation: modalIn 0.38s cubic-bezier(.175, .885, .32, 1.275);
 }
 
 @keyframes modalIn {
   from { opacity: 0; transform: scale(0.82); }
   to { opacity: 1; transform: scale(1); }
 }
 
 .pdm-header {
   position: relative;
   height: 200px;
   background: linear-gradient(135deg, #FDEEF3, #F0C0D0);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .pdm-close {
   position: absolute;
   top: 13px;
   right: 13px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 17px;
   transition: all 0.2s;
   touch-action: manipulation;
 }
 
 .pdm-close:active {
   transform: scale(0.95);
 }
 
 .pdm-emoji {
   font-size: 80px;
 }
 
 .pdm-body {
   padding: 18px 20px;
   max-height: calc(85vh - 200px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .pdm-name {
   font-family: 'Cormorant Garamond', serif;
   font-size: 25px;
   font-weight: 600;
   margin-bottom: 3px;
 }
 
 .pdm-info {
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 14px;
 }
 
 .pdm-compat-big {
   background: var(--rose-l);
   border-radius: 12px;
   padding: 12px;
   text-align: center;
   margin-bottom: 14px;
 }
 
 .pdm-compat-big .score {
   font-size: 32px;
   font-weight: 700;
   color: var(--rose);
 }
 
 .pdm-compat-big .label {
   font-size: 11px;
   color: var(--muted);
   margin-top: 1px;
 }
 
 .pdm-section {
   margin-bottom: 16px;
 }
 
 .pdm-section-title {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--muted);
   margin-bottom: 7px;
 }
 
 .pdm-bio {
   font-size: 14px;
   line-height: 1.6;
   color: var(--text2);
 }
 
 .pdm-actions {
   display: flex;
   gap: 10px;
   padding: 14px 16px;
   border-top: 0.5px solid var(--border);
 }
 
 .pdm-action-btn {
   flex: 1;
   padding: 12px;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   font-family: 'DM Sans', sans-serif;
   border: none;
   touch-action: manipulation;
 }
 
 .pdm-pass {
   background: var(--surface);
   color: var(--muted);
 }
 
 .pdm-pass:active {
   background: var(--rose-l);
 }
 
 .pdm-like {
   background: var(--rose);
   color: #fff;
 }
 
 .pdm-like:active {
   background: var(--rose-d);
 }
 
 .match-modal {
   background: var(--white);
   border-radius: 24px;
   padding: 32px 24px;
   text-align: center;
   max-width: 320px;
   width: 100%;
   animation: modalIn 0.38s cubic-bezier(.175, .885, .32, 1.275);
 }
 
 .modal-emojis {
   font-size: 52px;
   margin-bottom: 12px;
   display: flex;
   justify-content: center;
   gap: 10px;
 }
 
 .modal-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 30px;
   color: var(--rose);
   margin-bottom: 8px;
   font-weight: 600;
 }
 
 .modal-sub {
   font-size: 14px;
   color: var(--muted);
   margin-bottom: 20px;
   line-height: 1.55;
 }
 
 .modal-btn {
   width: 100%;
   padding: 14px;
   background: var(--rose);
   color: #fff;
   border: none;
   border-radius: 14px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   font-family: 'DM Sans', sans-serif;
   margin-bottom: 10px;
   transition: background 0.2s;
   touch-action: manipulation;
 }
 
 .modal-btn:active {
   background: var(--rose-d);
 }
 
 .modal-skip {
   font-size: 13px;
   color: var(--muted);
   cursor: pointer;
   touch-action: manipulation;
 }
 
 .toast {
   position: fixed;
   bottom: 88px;
   left: 50%;
   transform: translateX(-50%) translateY(10px);
   background: var(--ink2);
   color: #fff;
   padding: 10px 20px;
   border-radius: 30px;
   font-size: 13px;
   opacity: 0;
   transition: all 0.3s;
   z-index: 999;
   pointer-events: none;
   max-width: 300px;
   text-align: center;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 .toast.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
 
 .spinner {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 2px solid rgba(232, 84, 122, 0.2);
   border-top-color: var(--rose);
   animation: spin 0.7s linear infinite;
   display: inline-block;
 }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
 /* MOBILE OPTIMIZATIONS */
 @media (max-width: 430px) {
   .ob-slide {
     padding: 40px 24px 24px;
   }
   .ob-icon {
     font-size: 70px;
   }
   .ob-title {
     font-size: 28px;
   }
   .card-photo {
     height: 240px;
   }
   .card-emo {
     font-size: 90px;
   }
 }
 
 /* Scroll improvements */
 .scroll-body {
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
 
 /* Prevent zoom on input focus (iOS) */
 @media screen and (max-width: 767px) {
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="search"],
   select,
   textarea {
     font-size: 16px !important;
   }
 }
 
 /* Better touch feedback for all interactive elements */
 button, 
 [onclick], 
 .fchip, 
 .topbar-btn, 
 .act-btn,
 .bnav,
 .chat-item,
 .mcard {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
 /* Prevent body scroll when modal is open */
 body.modal-open {
   overflow: hidden;
   position: fixed;
   width: 100%;
 }
 
 /* Better swipe card performance */
 .profile-card {
   will-change: transform;
   backface-visibility: hidden;
 }
 
 /* Fix for notch phones (Dynamic Island, etc.) */
 @media (max-width: 430px) {
   .topbar {
     padding-top: max(14px, env(safe-area-inset-top));
   }
   
   .chat-input-bar {
     padding-bottom: max(13px, env(safe-area-inset-bottom));
   }
 }
 
 /* Better handling of very small screens (iPhone SE, 320px) */
 @media (max-width: 360px) {
   .pref-grid {
     grid-template-columns: 1fr;
   }
   
   .card-details {
     grid-template-columns: repeat(2, 1fr);
   }
   
   .match-bars {
     grid-template-columns: 1fr;
   }
   
   .action-row {
     gap: 10px;
   }
   
   .btn-heart {
     width: 60px;
     height: 60px;
   }
   
   .btn-pass, .btn-super {
     width: 48px;
     height: 48px;
   }
   
   .tag {
     font-size: 9px;
     padding: 3px 8px;
   }
 }
 
 /* Fix for landscape mode on mobile */
 @media (max-width: 800px) and (orientation: landscape) {
   .shell {
     max-width: 100%;
     height: 100dvh;
   }
   
   .card-photo {
     height: 200px;
   }
   
   .ob-slide {
     padding: 20px 24px;
   }
   
   .profile-detail-modal {
     max-height: 90vh;
   }
 }
 
 /* Reduce motion for users who prefer it */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
 }