/* ========================================================== TOKUNBO MARKET — Design tokens Palette drawn from Akure's laterite (amber) soil and Yoruba adire indigo dye; verified-green nods to trust/national reach. ========================================================== */ :root{ --ink:#1C1A17; --ink-soft:#5B5449; --paper:#FBF6EE; --paper-raised:#FFFFFF; --line:#E7DCC8; --amber:#B8541F; --amber-deep:#8F3E14; --amber-tint:#F6E3D3; --indigo:#26335C; --indigo-deep:#182342; --indigo-tint:#E3E6F0; --green:#1F7A4D; --green-tint:#DCEEE2; --gold:#C77F17; --gold-tint:#FBECD2; --red:#B4302A; --red-tint:#F7E1DF; --overlay-bg:rgba(251,246,238,.7); --shadow-sm:0 1px 2px rgba(28,26,23,.06), 0 1px 1px rgba(28,26,23,.04); --shadow-md:0 6px 20px rgba(28,26,23,.10); --shadow-lg:0 20px 48px rgba(24,35,66,.18); --radius:14px; --radius-sm:9px; --font-display:'Bricolage Grotesque', system-ui, sans-serif; --font-body:'Work Sans', system-ui, sans-serif; --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace; } /* Dark mode — same amber/indigo brand identity, inverted lightness. Toggled by setting data-theme="dark" on (see the theme-init script in , which reads this before first paint to avoid a flash of the light theme, and the toggle button wired in app.js). */ :root[data-theme="dark"]{ --ink:#F2EDE4; --ink-soft:#B9AF9E; --paper:#18140F; --paper-raised:#241F19; --line:#3A3327; --amber:#E08A4F; --amber-deep:#F0A868; --amber-tint:#3D2A1C; --indigo:#7C8BC4; --indigo-deep:#4C5A8C; --indigo-tint:#232A42; --green:#4CAF7D; --green-tint:#1B3126; --gold:#E0A542; --gold-tint:#3D2E14; --red:#E0685F; --red-tint:#3D211E; --overlay-bg:rgba(24,20,15,.75); --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2); --shadow-md:0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 20px 48px rgba(0,0,0,.5); } *{box-sizing:border-box;} [hidden]{ display:none !important; } html{-webkit-tap-highlight-color:transparent;overflow-x:hidden;width:100%;} body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; padding-bottom:72px; overflow-x:hidden; width:100%; max-width:100vw; } @media (min-width:900px){ body{ padding-bottom:0; } } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} input,textarea,select{font-family:inherit;} h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* ============== HEADER ============== */ .site-header{ position:sticky;top:0;z-index:40; background:var(--paper-raised); border-bottom:1px solid var(--line); } .header-inner{ max-width:1200px;margin:0 auto; display:flex;align-items:center;gap:20px; padding:12px 20px; width:100%; } .brand{display:flex;align-items:center;gap:8px;flex-shrink:0;} .brand-mark{ width:34px;height:34px;border-radius:9px; background:var(--indigo);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;font-size:14px; transform:rotate(-4deg); } .brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);} .brand-name em{font-style:normal;color:var(--amber);} .search-form{ flex:1;display:flex;align-items:center; background:var(--paper);border:1px solid var(--line); border-radius:999px;padding:4px 6px 4px 16px; max-width:560px; min-width:0; /* let the form shrink below its content's default size on narrow phones */ } .search-form input{ flex:1;border:none;background:none;outline:none; font-size:14.5px;padding:8px 0;color:var(--ink); min-width:0; /* same — otherwise the input's intrinsic width can push the header wider than the screen */ width:100%; } .search-form button{ width:34px;height:34px;border-radius:50%;border:none; background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center; flex-shrink:0; } .header-nav{display:none;align-items:center;gap:22px;flex-shrink:0;} @media (min-width:900px){ .header-nav{ display:flex; } } .nav-link{font-size:14.5px;font-weight:600;color:var(--ink-soft);position:relative;} .nav-link.active,.nav-link:hover{color:var(--indigo);} .badge-dot{ position:absolute;top:-4px;right:-10px; width:9px;height:9px;border-radius:50%;background:var(--amber); border:2px solid var(--paper-raised); } /* Narrow phones: tighten up the header so the brand mark, search bar, and the two circular header buttons all comfortably fit without forcing the page wider than the viewport (previously required pinch-zooming out). */ @media (max-width:420px){ .header-inner{ gap:10px; padding:10px 12px; } .brand-name{ font-size:16px; } .search-form{ padding:4px 5px 4px 12px; } .help-fab{ width:29px; height:29px; } } /* ============== TAB BAR (mobile) ============== */ .tab-bar{ position:fixed;bottom:0;left:0;right:0;z-index:40; background:var(--paper-raised);border-top:1px solid var(--line); display:flex;justify-content:space-around;align-items:center; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); } @media (min-width:900px){ .tab-bar{ display:none; } } .tab-item{ display:flex;flex-direction:column;align-items:center;gap:3px; font-size:10.5px;font-weight:600;color:var(--ink-soft); position:relative;padding:2px 10px; } .tab-item svg{width:22px;height:22px;} .tab-item.active{color:var(--indigo);} .tab-sell .sell-fab{ width:44px;height:44px;border-radius:50%;background:var(--amber); display:flex;align-items:center;justify-content:center;color:#fff; margin-top:-26px;box-shadow:var(--shadow-md); } .tab-sell .sell-fab svg{width:22px;height:22px;} /* ============== LAYOUT / SECTIONS ============== */ .view{max-width:1200px;margin:0 auto;padding:20px;} .view-narrow{max-width:640px;} .hero{ background:linear-gradient(135deg,var(--indigo) 0%, var(--indigo-deep) 100%); border-radius:16px;color:#fff;padding:18px 22px;margin:14px auto;max-width:1160px; position:relative;overflow:hidden; } .hero::after{ content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px; border-radius:50%;background:var(--amber);opacity:.18; } .hero h1{font-size:clamp(18px,2.6vw,26px);max-width:560px;line-height:1.15;} .hero p{color:#C9CFE3;margin:6px 0 12px;max-width:480px;font-size:13px;} .hero-chips{display:flex;gap:8px;flex-wrap:wrap;} .hero-chip{ background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25); color:#fff;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600; } .hero-chip:hover{background:rgba(255,255,255,.2);} /* Even more compact on small phones, where vertical space above the fold is scarcest — keeps most of the first screen for actual listings. */ @media (max-width:480px){ .hero{padding:14px 16px;margin:10px auto;border-radius:14px;} .hero h1{font-size:18px;} .hero p{font-size:12.5px;margin:5px 0 10px;} .hero-chip{padding:5px 10px;font-size:11.5px;} } .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 14px;} .section-head h2{font-size:20px;} .section-head .see-all{font-size:13px;font-weight:600;color:var(--amber);} .filter-bar{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px; } .filter-bar select, .filter-bar input{ border:1px solid var(--line);background:var(--paper-raised);border-radius:9px; padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--ink); } .filter-bar select{cursor:pointer;} .filter-bar input[type="number"]{width:88px;} .filter-bar #clearFiltersBtn{font-size:12.5px;} .cat-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;} .cat-strip::-webkit-scrollbar{display:none;} .cat-pill{ flex-shrink:0;display:flex;align-items:center;gap:7px; background:var(--paper-raised);border:1px solid var(--line); padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-soft); } .cat-pill.active{background:var(--indigo);border-color:var(--indigo);color:#fff;} .cat-pill .emoji{font-size:15px;} /* ============== LISTING GRID / CARD ============== */ .grid{ display:grid;gap:16px; grid-template-columns:repeat(2,1fr); } @media (min-width:640px){ .grid{grid-template-columns:repeat(3,1fr);} } @media (min-width:980px){ .grid{grid-template-columns:repeat(4,1fr);} } .card{ background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;position:relative;transition:transform .15s ease, box-shadow .15s ease; } .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .card-img-wrap{position:relative;aspect-ratio:1/1;background:var(--paper);overflow:hidden;} .card-img-wrap img{width:100%;height:100%;object-fit:cover;} .card-body{padding:10px 12px 12px;} .card-price{font-family:var(--font-mono);font-weight:600;font-size:15.5px;color:var(--indigo);} .card-price .neg{font-size:10.5px;font-weight:600;color:var(--gold);background:var(--gold-tint);padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle;} .card-title{font-size:13.5px;font-weight:600;margin:3px 0 4px;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card-meta{font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:4px;} .promoted-flag{ position:absolute;top:8px;left:8px;background:var(--amber);color:#fff; font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.02em; box-shadow:var(--shadow-sm); } /* --- Signature element: the condition "stamp" --- */ .stamp{ position:absolute;top:8px;right:8px; width:56px;height:56px;border-radius:50%; border:1.6px dashed rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center;flex-direction:column; transform:rotate(9deg); font-family:var(--font-mono);text-transform:uppercase; backdrop-filter:blur(2px); box-shadow:0 2px 6px rgba(0,0,0,.18); } .stamp-new{background:rgba(31,122,77,.85);color:#fff;} .stamp-used{background:rgba(184,84,31,.85);color:#fff;} .stamp .stamp-top{font-size:7px;font-weight:700;letter-spacing:.06em;} .stamp .stamp-main{font-size:12px;font-weight:700;line-height:1;margin-top:1px;} .stamp-lg{width:96px;height:96px;transform:rotate(-8deg);border-width:2px;} .stamp-lg .stamp-top{font-size:10px;} .stamp-lg .stamp-main{font-size:18px;} /* ============== ITEM DETAIL ============== */ .item-layout{display:grid;gap:28px;grid-template-columns:1fr;} @media (min-width:860px){ .item-layout{grid-template-columns:1.15fr 1fr;} } .gallery-main{ position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper-raised); border:1px solid var(--line);aspect-ratio:4/3;cursor:zoom-in; } .gallery-main img{width:100%;height:100%;object-fit:cover;} .gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;} .gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;} .gallery-thumbs img.active{border-color:var(--amber);} .item-price-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;} .item-price{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--indigo);} .tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:7px;} .tag-neg{background:var(--gold-tint);color:var(--gold);} .tag-fixed{background:var(--indigo-tint);color:var(--indigo);} .item-title{font-size:22px;margin-bottom:6px;} .item-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:18px;} .item-sub b{color:var(--ink);} .detail-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;background:var(--paper-raised);} .detail-row{display:flex;justify-content:space-between;padding:11px 15px;font-size:13.5px;border-bottom:1px solid var(--line);} .detail-row:last-child{border-bottom:none;} .detail-row span:first-child{color:var(--ink-soft);} .detail-row span:last-child{font-weight:600;text-align:right;} .desc-block{white-space:pre-wrap;font-size:14.5px;line-height:1.65;color:var(--ink);margin-bottom:18px;} .logistics-badge{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:var(--radius-sm);margin-bottom:18px;} .logistics-yes{background:var(--green-tint);} .logistics-no{background:var(--paper);border:1px solid var(--line);} .logistics-badge b{display:block;font-size:13.5px;margin-bottom:2px;} .logistics-badge p{margin:0;font-size:12.5px;color:var(--ink-soft);} .seller-card{ border:1px solid var(--line);border-radius:var(--radius);padding:16px; background:var(--paper-raised);display:flex;flex-direction:column;gap:14px; position:sticky;top:80px;height:fit-content; } .seller-row{display:flex;align-items:center;gap:12px;} .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--indigo-tint);flex-shrink:0;} .avatar-fallback{width:48px;height:48px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex-shrink:0;} .seller-name{font-weight:700;font-size:14.5px;} .seller-meta{font-size:12px;color:var(--ink-soft);} .action-row{display:flex;gap:10px;} /* ============== BUTTONS ============== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:none;border-radius:11px;padding:12px 18px;font-weight:700;font-size:14px; transition:filter .15s ease, transform .1s ease; } .btn:active{transform:scale(.98);} .btn-primary{background:var(--amber);color:#fff;} .btn-primary:hover{filter:brightness(1.06);} .btn-secondary{background:var(--indigo-tint);color:var(--indigo);} .btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--ink);} .btn-danger{background:var(--red-tint);color:var(--red);} .btn-success{background:var(--green-tint);color:var(--green);} .btn-block{width:100%;} .btn-sm{padding:8px 13px;font-size:12.5px;border-radius:9px;} .btn[disabled]{opacity:.55;pointer-events:none;} .btn-google{ width:100%;background:#fff;border:1.5px solid var(--line);color:var(--ink); border-radius:11px;padding:11px;font-weight:600;font-size:14px; display:flex;align-items:center;justify-content:center;gap:10px; } .link-btn{background:none;border:none;color:var(--amber);font-weight:600;font-size:13.5px;padding:6px 0;} /* ============== FORMS ============== */ .stack-form{display:flex;flex-direction:column;gap:12px;} .stack-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft);} .stack-form input,.stack-form textarea,.stack-form select{ border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14.5px; color:var(--ink);background:var(--paper);outline:none;font-weight:500; } .stack-form input:focus,.stack-form textarea:focus,.stack-form select:focus{border-color:var(--indigo);background:var(--paper-raised);} .stack-form textarea{resize:vertical;min-height:100px;font-family:inherit;} .field-hint{font-size:11.5px;color:var(--ink-soft);margin-top:-6px;} .field-hint.ok{color:var(--green);} .field-hint.bad{color:var(--red);} .radio-group{display:flex;gap:8px;flex-wrap:wrap;} .radio-chip{ border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600; cursor:pointer;user-select:none;background:var(--paper-raised); } .radio-chip input{display:none;} .radio-chip.checked{background:var(--indigo);border-color:var(--indigo);color:#fff;} .form-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:22px;} .form-section-title{font-size:15px;font-weight:700;margin:22px 0 12px;} .form-section-title:first-child{margin-top:0;} .image-drop{ border:2px dashed var(--line);border-radius:var(--radius-sm);padding:24px;text-align:center; cursor:pointer;color:var(--ink-soft);font-size:13.5px; } .image-drop:hover{border-color:var(--amber);} .image-preview-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;} .image-preview{position:relative;width:78px;height:78px;border-radius:9px;overflow:hidden;} .image-preview img{width:100%;height:100%;object-fit:cover;} .image-preview button{ position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%; background:rgba(0,0,0,.6);color:#fff;border:none;font-size:11px;line-height:1; } /* ============== CHAT ============== */ .chat-list-item{display:flex;gap:12px;align-items:center;padding:13px 8px;border-bottom:1px solid var(--line);} .chat-list-item:hover{background:var(--paper-raised);} .chat-list-thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;background:var(--indigo-tint);flex-shrink:0;} .chat-list-body{flex:1;min-width:0;} .chat-list-name{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;} .chat-list-snippet{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-list-time{font-size:10.5px;color:var(--ink-soft);} .unread-pill{background:var(--amber);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px;} .chat-thread-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);} @media (min-width:900px){ .chat-thread-wrap{height:calc(100vh - 84px);} } .chat-thread-header{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line);} .chat-messages{flex:1;overflow-y:auto;padding:16px 4px;display:flex;flex-direction:column;gap:8px;} .msg-bubble{max-width:75%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;} .msg-mine{align-self:flex-end;background:var(--indigo);color:#fff;border-bottom-right-radius:4px;} .msg-theirs{align-self:flex-start;background:var(--paper-raised);border:1px solid var(--line);border-bottom-left-radius:4px;} .msg-time{font-size:9.5px;opacity:.65;margin-top:3px;display:block;} .msg-tick{letter-spacing:-2px;font-size:11px;} .msg-tick-read{color:#6fd0ff;opacity:1 !important;} .verified-badge{ display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;border-radius:50%;background:var(--indigo);color:#fff; font-size:9.5px;font-weight:900;margin-left:4px;vertical-align:middle; } .chat-input-row{display:flex;gap:8px;padding:10px 4px;border-top:1px solid var(--line);} .chat-input-row input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font-size:14px;outline:none;} .chat-input-row input:focus{border-color:var(--indigo);} .chat-send-btn{width:42px;height:42px;border-radius:50%;background:var(--amber);color:#fff;border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;} /* ============== PROFILE ============== */ .profile-header{display:flex;gap:16px;align-items:center;margin-bottom:24px;flex-wrap:wrap;} .profile-header .avatar,.profile-header .avatar-fallback{width:76px;height:76px;font-size:24px;} .profile-stats{display:flex;gap:22px;margin-top:6px;} .pstat b{font-family:var(--font-mono);font-size:16px;display:block;} .pstat span{font-size:11px;color:var(--ink-soft);} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;} .tab-btn{padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--ink-soft);border-bottom:2.5px solid transparent;} .tab-btn.active{color:var(--indigo);border-color:var(--amber);} .status-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;} .status-pending{background:var(--gold-tint);color:var(--gold);} .status-approved{background:var(--green-tint);color:var(--green);} .status-rejected{background:var(--red-tint);color:var(--red);} .status-sold{background:var(--indigo-tint);color:var(--indigo);} /* ============== MODALS ============== */ .modal-overlay{ position:fixed;inset:0;background:rgba(24,20,14,.55);z-index:100; display:flex;align-items:center;justify-content:center;padding:16px; backdrop-filter:blur(2px); } .modal{ background:var(--paper-raised);border-radius:18px;padding:26px;max-width:420px;width:100%; max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg); } .modal-close{position:absolute;top:14px;right:14px;background:var(--paper);border:none;width:30px;height:30px;border-radius:50%;font-size:14px;} .modal-title{font-size:20px;margin-bottom:4px;} .modal-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px;} .divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--ink-soft);font-size:12px;} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);} .switch-line{text-align:center;font-size:13px;margin-top:16px;color:var(--ink-soft);} #lightbox{background:rgba(10,8,6,.92);} #lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;} .promote-price{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--amber);margin-bottom:14px;} .bank-card{background:var(--indigo-tint);border-radius:var(--radius-sm);padding:14px;margin-bottom:14px;} .bank-row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;} .bank-row span{color:var(--ink-soft);} .fine-print{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-bottom:16px;} .promote-status{margin-top:14px;padding:12px;border-radius:9px;background:var(--gold-tint);color:var(--gold);font-size:13px;font-weight:600;text-align:center;} /* ============== TOASTS ============== */ .toast-stack{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(92vw,380px);} .toast{ background:var(--ink);color:#fff;padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:600; box-shadow:var(--shadow-md);animation:toastIn .2s ease; } .toast.success{background:var(--green);} .toast.error{background:var(--red);} @keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}} /* ============== LOADING ============== */ .loading-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:150;display:flex;align-items:center;justify-content:center;} .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--amber);animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ============== EMPTY STATES ============== */ .empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);} .empty-state h3{font-size:16px;color:var(--ink);margin-bottom:6px;} .empty-state p{font-size:13.5px;margin:0 0 18px;} /* ============== ADMIN (shared classes used by admin.html too) ============== */ .admin-shell{display:flex;min-height:100vh;} .admin-side{width:220px;background:var(--indigo-deep);color:#fff;padding:22px 14px;flex-shrink:0;position:sticky;top:0;height:100vh;} .admin-side .brand-name{color:#fff;} .admin-side .brand-name em{color:var(--amber);} .admin-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:#C9CFE3;margin-bottom:4px;} .admin-link.active,.admin-link:hover{background:rgba(255,255,255,.08);color:#fff;} .admin-link .count{margin-left:auto;background:var(--amber);color:#fff;font-size:10.5px;padding:1px 7px;border-radius:999px;} .admin-main{flex:1;padding:26px 30px;max-width:1100px;} .admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;} .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px;} .stat-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:16px;} .stat-card b{font-family:var(--font-mono);font-size:24px;display:block;} .stat-card span{font-size:12px;color:var(--ink-soft);} .admin-table{width:100%;border-collapse:collapse;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;} .admin-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line);} .admin-table td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line);vertical-align:middle;} .admin-table tr:last-child td{border-bottom:none;} .admin-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;} .row-actions{display:flex;gap:6px;} .admin-mobile-topbar{ display:none; position:fixed;top:0;left:0;right:0;z-index:120; align-items:center;gap:12px; height:56px;padding:0 16px; background:var(--indigo-deep); } .admin-hamburger-btn{ width:36px;height:36px;border-radius:8px;border:none;flex-shrink:0; background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1; display:flex;align-items:center;justify-content:center; } .admin-side-backdrop{ display:none;position:fixed;inset:0;z-index:150; background:rgba(0,0,0,.45); } @media (max-width:800px){ .admin-mobile-topbar{ display:flex; } .admin-side-backdrop.open{ display:block; } .admin-side{ display:block;position:fixed;top:0;left:0;z-index:200; height:100vh;box-shadow:var(--shadow-lg); transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; } .admin-side.open{ transform:translateX(0); } .admin-main{ padding:18px;padding-top:74px; } } /* ============== RATINGS / STARS ============== */ .star-picker{display:flex;gap:6px;justify-content:center;margin:10px 0 18px;} .star-picker button{background:none;border:none;font-size:34px;color:var(--line);line-height:1;padding:2px;} .star-picker button.active{color:var(--gold);} .rating-stars{color:var(--gold);letter-spacing:1px;font-size:13px;} .rating-summary{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);margin-top:2px;} .rating-summary b{color:var(--ink);} .review-item{border-bottom:1px solid var(--line);padding:12px 0;} .review-item:last-child{border-bottom:none;} .review-item .rating-stars{font-size:13px;} .review-item .review-meta{font-size:11px;color:var(--ink-soft);margin:2px 0 6px;} .review-item p{margin:0;font-size:13px;line-height:1.5;} /* ============== FAVORITE / SHARE ICON BUTTONS ============== */ .icon-btn{ width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-raised); display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--ink-soft); } .icon-btn.active{color:var(--red);border-color:var(--red-tint);background:var(--red-tint);} .card-fav-btn{position:absolute;bottom:8px;right:8px;width:30px;height:30px;font-size:14px; background:rgba(255,255,255,.92);border:none;box-shadow:var(--shadow-sm);} .detail-actions-row{display:flex;gap:8px;margin-bottom:14px;} /* ============== EMAIL VERIFICATION NOTICE ============== */ .verify-banner{ background:var(--gold-tint);border:1px solid #EED3A1;border-radius:var(--radius); padding:20px;text-align:center; } .verify-banner h3{font-size:16px;margin-bottom:6px;} .verify-banner p{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;} .email-verified-badge{font-size:10.5px;font-weight:700;color:var(--green);background:var(--green-tint);padding:2px 8px;border-radius:999px;margin-left:6px;} /* ============== PWA INSTALL PROMPTS ============== */ .install-btn{ background:var(--amber);color:#fff;border:none;border-radius:999px; padding:8px 15px;font-size:13px;font-weight:700; } .install-banner{ position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom)); z-index:45;background:var(--indigo);color:#fff;border-radius:14px; padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px; box-shadow:var(--shadow-lg);font-size:12.5px;font-weight:600; } @media (min-width:900px){ .install-banner{ display:none !important; } } .install-banner-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;} .install-banner-actions button{border:none;border-radius:8px;font-size:12px;font-weight:700;padding:7px 11px;} #installBtnMobile{background:var(--amber);color:#fff;} #installDismissBtn{background:rgba(255,255,255,.15);color:#fff;padding:7px 9px;} .hidden{display:none !important;} /* ============== HELP / GUIDE BUTTON — sits in the header, top-right on every page ============== */ .help-fab{ flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none; background:var(--indigo);color:#fff;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:auto; } .help-fab:hover{filter:brightness(1.1);} @media (min-width:900px){ .help-fab{ margin-left:0; } } /* ============== OFFLINE BANNER ============== */ .offline-banner{ position:fixed;top:0;left:0;right:0;z-index:120; background:var(--indigo-deep);color:#fff;text-align:center; font-size:12.5px;font-weight:600;padding:8px 14px; } /* ============== CHECKBOX ROW (terms agreement, etc.) ============== */ .checkbox-row{ flex-direction:row !important;align-items:flex-start;gap:8px !important;font-weight:500 !important; font-size:12.5px !important;color:var(--ink-soft) !important;line-height:1.5; } .checkbox-row input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--amber);} .inline-link{display:inline;padding:0;font-size:inherit;text-decoration:underline;} /* ============== APP GUIDE MODAL ============== */ .guide-modal{max-width:480px;} .guide-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;} .guide-step{display:flex;gap:12px;align-items:flex-start;} .guide-num{ width:26px;height:26px;border-radius:50%;background:var(--amber-tint);color:var(--amber-deep); font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .guide-step b{font-size:13.5px;} .guide-step p{font-size:12.5px;color:var(--ink-soft);margin:2px 0 0;line-height:1.5;} /* ============== TERMS & PRIVACY MODAL ============== */ .terms-modal{max-width:520px;} .terms-body{font-size:13px;color:var(--ink-soft);line-height:1.6;max-height:56vh;overflow-y:auto;padding-right:4px;} .terms-body h3{font-size:14.5px;color:var(--ink);margin:16px 0 6px;} .terms-body h3:first-child{margin-top:0;} .terms-body ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}