:root{
  --bg:#080a10;
  --bg-2:#0c0f17;
  --surface:rgba(255,255,255,0.045);
  --surface-2:rgba(255,255,255,0.07);
  --surface-solid:#12151f;
  --line:rgba(255,255,255,0.09);
  --line-soft:rgba(255,255,255,0.06);
  --text:#f3f5f8;
  --text-soft:rgba(243,245,248,0.62);
  --text-faint:rgba(243,245,248,0.4);
  --accent:#3E7BFA;
  --accent-2:#8B5CF6;
  --accent-glow:rgba(62,123,250,0.45);
  --green:#33d17a;
  --red:#ff5c5c;
  --blue:#5b9dff;
  --radius:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-soft:0 10px 30px -12px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Manrope','Inter',sans-serif;}
a{color:inherit;}
button{font-family:inherit;}
::selection{background:var(--accent); color:#fff;}

body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 900px 600px at 50% -10%, rgba(62,123,250,0.10), transparent 60%);
}

.site-header{
  display:flex; align-items:center; justify-content:center;
  padding:22px 20px 0; position:relative; z-index:1;
}
.site-header .brand{
  font-weight:800; letter-spacing:-.2px; display:flex; align-items:center; gap:9px; font-size:15px;
}
.site-header .brand .dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(62,123,250,0.18);
}

/* ---------- Hero logo mark (animated wing emblem) ---------- */
.hero-logo-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:44px 20px 6px; position:relative; z-index:1; perspective:900px;
}
.logo-float{ animation:logoFloat 5.5s ease-in-out infinite; }
@keyframes logoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.logo-mark{
  position:relative; width:300px; height:140px; max-width:80vw;
  transform-style:preserve-3d; transition:transform .25s var(--ease);
  will-change:transform;
}
.logo-mark .badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 32% 28%, #2a3346, #0a0d14 70%);
  border:1.5px solid rgba(255,255,255,0.18);
  box-shadow:0 12px 28px -8px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.logo-mark .badge span{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.5px;
  background:linear-gradient(180deg,#f4f7fb, #9fb0c8 60%, #6c7d99);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-mark .feather{
  position:absolute; left:50%; top:50%; height:11px;
  width:var(--len); transform-origin:0% 50%;
  transform:rotate(var(--ang));
  background:linear-gradient(90deg, rgba(120,140,175,.12), #b9c6da 35%, #7c8db0 70%, #4b5a75);
  clip-path:polygon(0 30%, 82% 0, 100% 50%, 82% 100%, 0 70%);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.logo-mark .feather::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4) 42%, transparent 58%);
  mix-blend-mode:overlay; opacity:.55;
}

.hero-logo-wrap .wordmark{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; letter-spacing:5px;
  background:linear-gradient(100deg,#f4f7fb 20%, #9fb0c8 40%, #f4f7fb 55%, #9fb0c8 75%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s linear infinite; margin-top:4px;
}
@keyframes shine{ 0%{ background-position:0% 0; } 100%{ background-position:220% 0; } }
.hero-logo-wrap .subtag{
  font-size:11px; color:var(--text-faint); letter-spacing:2px; text-transform:uppercase; margin-top:7px;
}

/* ---------- Reviews ---------- */
.reviews{ max-width:1080px; margin:44px auto 8px; padding:0 20px; position:relative; z-index:1; }
.reviews-head{ text-align:center; margin-bottom:30px; }
.rating-badge{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:14px; }
.rating-badge .stars{
  font-size:19px; letter-spacing:3px;
  background:linear-gradient(90deg,#ffd76a,#ffb84d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rating-badge .rating-number{ font-size:32px; font-weight:800; letter-spacing:-1px; }
.rating-badge .rating-sub{ font-size:12.5px; color:var(--text-faint); }
.reviews h2{ font-size:25px; font-weight:800; letter-spacing:-.5px; margin:0; }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .reviews-grid{ grid-template-columns:1fr; } }

.review-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:20px;
  padding:22px 20px; box-shadow:var(--shadow-soft);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.review-card:hover{
  transform:translateY(-6px) rotateX(2deg); border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55);
}
.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg, hsl(var(--hue) 80% 55%), hsl(calc(var(--hue) + 40) 75% 42%));
}
.review-name{ font-weight:700; font-size:14px; }
.review-stars{ font-size:12px; color:#ffb84d; display:flex; align-items:center; gap:6px; margin-top:2px; }
.review-time{ color:var(--text-faint); font-weight:500; }
.google-mark{
  margin-left:auto; width:22px; height:22px; border-radius:50%; flex:none;
  background:conic-gradient(from 0deg,#4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.review-text{ font-size:13.5px; color:var(--text-soft); line-height:1.6; margin:0; }

.reviews-cta{ text-align:center; margin-top:26px; }
.ghost-btn{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--text-soft); padding:12px 22px; border-radius:12px; font-weight:700; font-size:13.5px; opacity:.8;
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Landing ---------- */
.landing{
  padding:40px 20px 20px;
  max-width:1080px; margin:0 auto;
  position:relative; z-index:1;
}
.landing-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:760px){ .landing-grid{grid-template-columns:1fr;} }
.landing-card{
  border-radius:22px; padding:32px 28px; color:#fff; position:relative; overflow:hidden;
  min-height:220px; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  isolation:isolate;
}
.landing-card:hover{ transform:translateY(-6px); }
.landing-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transition:opacity .5s var(--ease);
}
.landing-card.buy{background:linear-gradient(155deg,#141a26,#0a0c12);}
.landing-card.buy::before{background:radial-gradient(circle at 85% 0%, rgba(91,157,255,0.22), transparent 60%);}
.landing-card.buy:hover{border-color:rgba(91,157,255,0.4);}
.landing-card.sell{background:linear-gradient(155deg,#1a1030,#0a0c12);}
.landing-card.sell::before{background:radial-gradient(circle at 85% 0%, rgba(139,92,246,0.35), transparent 60%);}
.landing-card.sell:hover{border-color:rgba(139,92,246,0.5);}
.landing-card .tag{
  position:absolute; top:24px; left:28px; font-size:11px; font-weight:800; letter-spacing:1.6px; opacity:.6;
}
.landing-card h2{margin:0 0 8px; font-size:25px; font-weight:800; letter-spacing:-.5px;}
.landing-card p{margin:0 0 20px; font-size:14.5px; color:var(--text-soft); line-height:1.5; max-width:340px;}
.landing-card .cta{
  align-self:flex-start;
  background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.16);
  padding:12px 20px; border-radius:11px;
  font-weight:700; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.landing-card .cta:hover{transform:translateX(3px);}
.landing-card.sell .cta{background:var(--accent); border-color:var(--accent);}
.landing-card.sell .cta:hover{background:var(--accent-2);}
.landing-card .cta.disabled{opacity:.55; cursor:default;}
.landing-card .cta.disabled:hover{transform:none;}
.landing-card .cta .arrow{transition:transform .35s var(--ease);}
.landing-card .cta:hover .arrow{transform:translateX(3px);}

/* ---------- Sell page ---------- */
.sell-hero{
  text-align:center; padding:64px 20px 10px; max-width:680px; margin:0 auto;
  position:relative; z-index:1;
}
.sell-hero::before{
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:520px; height:320px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(139,92,246,0.22), transparent 65%);
  filter:blur(10px);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.5px;
  color:var(--accent-2); background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.25);
  padding:7px 14px; border-radius:30px; margin-bottom:22px;
}
.eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--accent-2); animation:pulseDot 1.8s infinite;}
@keyframes pulseDot{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(139,92,246,.5);} 50%{opacity:.6;} }
.sell-hero h1{
  font-size:clamp(34px,5vw,50px); margin:0 0 16px; font-weight:800; letter-spacing:-1.3px; line-height:1.08;
  background:linear-gradient(180deg,#ffffff 20%, rgba(255,255,255,0.75));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sell-hero p{color:var(--text-soft); font-size:16.5px; line-height:1.6; margin:0 auto 30px; max-width:480px;}
.big-cta, .submit-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:none; padding:18px 34px; font-size:16px;
  font-weight:700; border-radius:14px; cursor:pointer; box-shadow:0 14px 34px -12px var(--accent-glow);
  min-height:56px; letter-spacing:.1px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.big-cta:hover, .submit-btn:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 20px 46px -12px var(--accent-glow); filter:brightness(1.05); }
.big-cta:active, .submit-btn:active{ transform:translateY(-1px) scale(.99); }
.submit-btn{width:100%; padding:17px; font-size:16.5px; margin-top:8px;}

.feature-chips{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:28px auto 0; max-width:600px;
}
.feature-chips span{
  font-size:12.5px; color:var(--text-soft); background:var(--surface); border:1px solid var(--line);
  padding:7px 13px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
}

.progress-hint{
  display:flex; justify-content:center; align-items:center; gap:0; flex-wrap:wrap; margin:34px auto 0; max-width:640px;
  font-size:12px; color:var(--text-faint);
}
.progress-hint span{
  background:var(--surface); border:1px solid var(--line); padding:7px 13px; border-radius:20px;
  position:relative; font-weight:600;
}
.progress-hint span:not(:last-child)::after{
  content:''; display:inline-block; width:18px; height:1px; background:var(--line); margin:0 4px; vertical-align:middle;
}
.progress-hint span:first-child{ color:var(--accent-2); border-color:rgba(139,92,246,0.35); background:rgba(139,92,246,0.08); }

form#sellForm{
  max-width:600px; margin:40px auto 60px; background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius:24px;
  box-shadow:var(--shadow-lg); padding:34px 30px 36px; border:1px solid var(--line);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  position:relative; z-index:1;
}
.field{margin-bottom:20px;}
.field label{
  display:block; font-weight:700; font-size:14px; margin-bottom:8px; color:var(--text);
  letter-spacing:-.1px;
}
.field .hint{font-weight:400; color:var(--text-faint); font-size:12px; margin-left:6px;}
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%; padding:14px 16px; font-size:15.5px; border:1.5px solid var(--line); border-radius:12px;
  background:rgba(0,0,0,0.25); color:var(--text); min-height:50px;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{color:var(--text-faint);}
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f3f5f8' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.field textarea{min-height:80px; resize:vertical; font-family:inherit;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(0,0,0,0.35);
  box-shadow:0 0 0 4px rgba(62,123,250,0.15);
}

.dropzone{
  border:1.5px dashed rgba(255,255,255,0.18); border-radius:16px; padding:28px 16px; text-align:center;
  background:rgba(255,255,255,0.02); cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.dropzone:hover{border-color:rgba(139,92,246,0.4); background:rgba(139,92,246,0.04);}
.dropzone.drag{border-color:var(--accent); background:rgba(62,123,250,0.09); transform:scale(1.01);}
.dropzone p{margin:6px 0 0; color:var(--text-faint); font-size:13px;}
.dropzone .icon{font-size:28px; opacity:.85;}
.upload-buttons{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
.upload-buttons button{
  border:1.5px solid var(--line); background:rgba(255,255,255,0.04); color:var(--text); padding:11px 17px; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px;
  min-height:44px; transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.upload-buttons button:hover{border-color:var(--accent); color:var(--accent-2); background:rgba(139,92,246,0.08);}
input[type="file"]{display:none;}

.thumb-row{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px;}
.thumb{
  position:relative; width:76px; height:76px; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  animation:thumbIn .4s var(--ease);
}
@keyframes thumbIn{ from{opacity:0; transform:scale(.8);} to{opacity:1; transform:scale(1);} }
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb .rm{
  position:absolute; top:3px; right:3px; background:rgba(0,0,0,.65); color:#fff; border:none;
  width:22px; height:22px; border-radius:50%; font-size:13px; cursor:pointer; line-height:1;
  transition:background .2s;
}
.thumb .rm:hover{background:var(--red);}

.thanks{
  display:none; max-width:560px; margin:40px auto 60px; background:linear-gradient(180deg, rgba(51,209,122,0.1), rgba(51,209,122,0.03));
  border:1px solid rgba(51,209,122,0.28);
  border-radius:24px; padding:44px 30px; text-align:center; position:relative; z-index:1;
  backdrop-filter:blur(16px);
}
.thanks.show{display:block; animation:viewIn .6s var(--ease);}
@keyframes viewIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.thanks .check{
  width:60px; height:60px; border-radius:50%; background:var(--green); color:#06070a; display:flex;
  align-items:center; justify-content:center; font-size:28px; margin:0 auto 18px; font-weight:800;
  animation:checkPop .55s var(--ease);
  box-shadow:0 10px 26px -8px rgba(51,209,122,.5);
}
@keyframes checkPop{ 0%{transform:scale(0); opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1); opacity:1;} }
.thanks h2{margin:0 0 10px; font-size:22px; font-weight:800;}
.thanks p{color:var(--text-soft); margin:0 0 22px; line-height:1.55;}
.thanks button{
  background:rgba(255,255,255,0.06); border:1.5px solid var(--line); color:var(--text); padding:12px 22px; border-radius:11px; font-weight:600; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.thanks button:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2);}

.no-questions{
  max-width:560px; margin:0 auto 40px; padding:0 20px; font-size:12.5px; color:var(--text-faint); text-align:center; line-height:1.7;
  position:relative; z-index:1;
}

/* ---------- Footer with hidden login link ---------- */
footer.site-footer{
  text-align:center; font-size:11.5px; color:var(--text-faint); padding:16px 20px 40px; position:relative; z-index:1;
}
footer.site-footer .login-link{
  display:inline-block; margin-top:10px; font-size:11px; color:var(--text-faint); opacity:.55;
  text-decoration:none; border-bottom:1px dotted transparent; transition:opacity .3s var(--ease), color .3s var(--ease);
}
footer.site-footer .login-link:hover{opacity:1; color:var(--text-soft); border-bottom-color:var(--text-faint);}

/* ---------- Login page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; z-index:1;
}
.login-card{
  width:100%; max-width:380px; background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:22px; padding:34px 28px; box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
}
.login-card .brand{
  display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; margin-bottom:22px; justify-content:center;
}
.login-card .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px rgba(62,123,250,0.18);}
.login-card h1{font-size:20px; margin:0 0 6px; text-align:center; font-weight:800;}
.login-card p.sub{color:var(--text-faint); font-size:13px; text-align:center; margin:0 0 26px;}
.login-error{
  display:none; background:rgba(255,92,92,0.1); border:1px solid rgba(255,92,92,0.3); color:#ff8080;
  font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:16px; text-align:center;
}
.login-card .submit-btn{margin-top:6px;}
.login-back{display:block; text-align:center; margin-top:18px; font-size:12.5px; color:var(--text-faint); text-decoration:none;}
.login-back:hover{color:var(--text-soft);}

/* ---------- Dealer portal ---------- */
.portal-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:1020px; margin:0 auto; padding:24px 20px 0; position:relative; z-index:1;
}
.portal-header .brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px;}
.portal-header .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px rgba(62,123,250,0.18);}
.logout-btn{
  border:1.5px solid var(--line); background:rgba(255,255,255,0.04); color:var(--text-soft); padding:9px 16px; border-radius:10px;
  font-size:13px; font-weight:600; cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.logout-btn:hover{border-color:rgba(255,92,92,.4); color:#ff8080;}

.portal{max-width:1020px; margin:0 auto; padding:22px 20px 60px; position:relative; z-index:1;}

.empty-state{
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:48px 22px;
  text-align:center; color:var(--text-soft); font-size:14.5px;
}

.req-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:18px; padding:20px 20px;
  margin-bottom:14px; box-shadow:var(--shadow-soft); position:relative;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.req-card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.16); }
.req-card.done{opacity:.5;}
.req-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.req-title{font-size:18px; font-weight:800; margin:0 0 5px; letter-spacing:-.3px;}
.req-badge{
  background:rgba(255,92,92,0.14); color:#ff8080; font-size:11px; font-weight:800; padding:5px 10px; border-radius:20px;
  letter-spacing:.4px; display:inline-flex; align-items:center; gap:5px; margin-bottom:7px; border:1px solid rgba(255,92,92,.25);
}
.req-badge .dotr{width:6px;height:6px;border-radius:50%;background:var(--red); animation:pulseDot 1.6s infinite;}
.req-date{font-size:12px; color:var(--text-faint); white-space:nowrap;}
.req-meta{display:flex; flex-wrap:wrap; gap:8px; margin:9px 0 12px; font-size:12.5px; color:var(--text-soft);}
.req-meta span{background:rgba(255,255,255,0.05); padding:6px 11px; border-radius:8px; border:1px solid var(--line-soft);}
.req-imgs{display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap;}
.req-imgs img{width:58px; height:58px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer;}
.req-imgs .count{
  width:58px; height:58px; border-radius:10px; background:rgba(255,255,255,0.05); display:flex; align-items:center;
  justify-content:center; font-size:11.5px; color:var(--text-faint); font-weight:700; border:1px solid var(--line-soft);
}
.req-contact{font-size:13.5px; margin-bottom:5px; color:var(--text-soft);}
.req-contact strong{color:var(--text);}
.req-msg{font-size:13px; color:var(--text-faint); font-style:italic; margin:7px 0 12px;}
.req-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.req-actions button, .req-actions a{
  border:1.5px solid var(--line); background:rgba(255,255,255,0.03); padding:9px 14px; border-radius:10px; font-size:12.5px;
  font-weight:600; cursor:pointer; text-decoration:none; color:var(--text); display:inline-flex; align-items:center; gap:6px;
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.req-actions button:hover, .req-actions a:hover{transform:translateY(-2px);}
.req-actions .call{border-color:rgba(51,209,122,.3); color:var(--green);}
.req-actions .call:hover{background:rgba(51,209,122,.1);}
.req-actions .mail{border-color:rgba(91,157,255,.3); color:var(--blue);}
.req-actions .mail:hover{background:rgba(91,157,255,.1);}
.req-actions .wa{border-color:rgba(51,209,122,.3); color:#3ddc84;}
.req-actions .wa:hover{background:rgba(51,209,122,.1);}
.req-actions .edit{color:var(--text-soft);}
.req-actions .done-btn{color:var(--text-soft);}
.req-actions button:disabled{opacity:.35; cursor:not-allowed; transform:none;}

.section-heading{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:1.2px; color:var(--text-faint); margin:0 0 14px; text-transform:uppercase;}
.section-heading .badge-count{
  background:var(--accent); color:#fff; font-size:11px; padding:2px 8px; border-radius:20px; letter-spacing:.3px;
}

/* Edit modal */
.modal-bg{
  display:none; position:fixed; inset:0; background:rgba(4,5,8,.7); z-index:300; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(6px);
}
.modal-bg.show{display:flex; animation:viewIn .3s var(--ease);}
.modal{
  background:var(--surface-solid); border:1px solid var(--line); border-radius:20px; padding:26px; width:100%; max-width:420px; max-height:86vh; overflow:auto;
  box-shadow:var(--shadow-lg);
}
.modal h3{margin:0 0 16px; font-size:19px;}
.modal .field{margin-bottom:14px;}
.modal .field label{font-size:12.5px; font-weight:700; margin-bottom:6px; display:block; color:var(--text-soft);}
.modal .field input, .modal .field select, .modal .field textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px; font-size:14px;
  background:rgba(0,0,0,0.25); color:var(--text);
}
.modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(62,123,250,0.15);
}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px;}
.modal-actions button{border:none; padding:11px 18px; border-radius:10px; font-weight:600; cursor:pointer; font-size:13.5px; transition:filter .2s, transform .2s;}
.modal-actions button:hover{transform:translateY(-1px);}
.modal-actions .cancel{background:rgba(255,255,255,0.07); color:var(--text-soft);}
.modal-actions .save{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;}

/* Lightbox for portal images */
.lightbox-bg{
  display:none; position:fixed; inset:0; background:rgba(2,3,5,.88); z-index:400; align-items:center; justify-content:center; padding:24px;
}
.lightbox-bg.show{display:flex;}
.lightbox-bg img{max-width:100%; max-height:90vh; border-radius:14px; box-shadow:var(--shadow-lg);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px;}