/* City Life — общие компоненты, темизируются через CSS-переменные дизайна */
:root{
  --bg:#0b0e1a;--surface:#161a2b;--surface2:#1f2438;--text:#fff;--muted:#9aa0bf;
  --border:rgba(255,255,255,.1);--accent:#8a2be2;--accent2:#ff2fb0;--chip:rgba(255,255,255,.07);
  --radius:18px;--shadow:0 14px 40px -16px rgba(0,0,0,.6);--navh:82px;
}
.panel{position:absolute;left:0;right:0;top:0;bottom:var(--navh);z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);color:var(--text);display:none;font-family:inherit;}
.panel.active{display:block;animation:pin .22s ease;}
@keyframes pin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.panel-open .map-chrome{display:none!important;}
.phead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:16px 16px 12px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);}
.phead .back{width:40px;height:40px;border-radius:50%;background:var(--chip);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;flex:0 0 auto;}
.phead h2{font-size:22px;font-weight:800;letter-spacing:-.4px;flex:1;}
.psearch{margin:0 16px 12px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:12px 13px;color:var(--muted);}
.psearch input{flex:1;background:none;border:0;outline:none;color:var(--text);font-size:14px;font-family:inherit;}
.psearch input::placeholder{color:var(--muted);}
.seg{display:flex;gap:8px;overflow-x:auto;padding:0 16px 14px;scrollbar-width:none;}
.seg::-webkit-scrollbar{display:none;}
.schip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--chip);border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;}
.schip.active{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;}
.list{padding:0 16px 24px;display:flex;flex-direction:column;gap:12px;}
.pcard{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px;cursor:pointer;align-items:center;transition:transform .12s;}
.pcard:active{transform:scale(.985);}
.pcard>img{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:0 0 auto;}
.pcard .pc-b{flex:1;min-width:0;}
.pcard .pc-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.pcard h3{font-size:15px;font-weight:700;}
.pcard .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.pcard .meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:8px;align-items:center;}
.pcard .meta b{color:var(--text);font-weight:600;}
.star{color:#f5b400;display:inline-flex;vertical-align:-2px;}
.livebadge{display:inline-flex;align-items:center;gap:4px;background:var(--accent2);color:#fff;font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:999px;}
.livebadge .dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:bl 1s infinite;}
@keyframes bl{50%{opacity:.3}}
.daybadge{background:var(--surface2);color:var(--text);font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px;}
.busy{display:inline-flex;gap:3px;align-items:center;}
.busy i{width:5px;height:11px;border-radius:2px;background:var(--border);display:block;}
.busy.b1 i:nth-child(-n+1),.busy.b2 i:nth-child(-n+2),.busy.b3 i:nth-child(-n+3){background:var(--accent2);}

/* AI chat */
.ai{display:flex;flex-direction:column;height:100%;}
.ai-msgs{flex:1;overflow-y:auto;padding:8px 16px 14px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:86%;padding:12px 14px;border-radius:18px;font-size:14px;line-height:1.45;}
.msg.user{align-self:flex-end;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-bottom-right-radius:6px;}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:6px;}
.msg .recs{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.ai-quick{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 16px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.ai-quick::-webkit-scrollbar{display:none;}
.ai-quick .schip{scroll-snap-align:start;}
.ai-input{display:flex;gap:10px;align-items:center;padding:10px 16px 14px;border-top:1px solid var(--border);background:var(--bg);}
.ai-input input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px;color:var(--text);font-size:14px;font-family:inherit;outline:none;}
.ai-send{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.ai-mic{width:48px;height:48px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:.15s;}
.ai-mic:active{transform:scale(.94);}
.ai-mic.rec{background:#ff3b5c;border-color:transparent;color:#fff;animation:micp 1s infinite;}
@keyframes micp{0%,100%{box-shadow:0 0 0 0 rgba(255,59,92,.5)}50%{box-shadow:0 0 0 8px rgba(255,59,92,0)}}

/* Profile */
.prof{padding:0 16px 24px;}
.prof-top{display:flex;align-items:center;gap:14px;padding:6px 0 16px;}
.prof-top img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);}
.prof-top h3{font-size:19px;font-weight:800;}
.prof-top .sub{font-size:13px;color:var(--muted);margin-top:3px;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;}
.stat .n{font-size:20px;font-weight:800;}
.stat .l{font-size:11px;color:var(--muted);margin-top:3px;}
.level{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;}
.level .lr{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.level .bar{height:8px;border-radius:8px;background:var(--surface2);overflow:hidden;}
.level .bar i{display:block;height:100%;width:68%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
.prow{display:flex;gap:10px;margin-bottom:16px;}
.pbtn{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px;text-align:center;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.gtabs{display:flex;gap:8px;margin-bottom:12px;}
.gtab{flex:1;text-align:center;padding:10px;border-radius:12px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;}
.gtab.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;}
.gthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.gthumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;}
/* videography order card */
.vcard{display:flex;align-items:center;gap:12px;margin-bottom:16px;cursor:pointer;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));
  border:1px solid var(--border);border-radius:16px;padding:14px;}
.vcard .vc-ic{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.vcard .vc-t{font-size:14px;font-weight:700;}
.vcard .vc-s{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.vcard .vc-go{margin-left:auto;color:var(--muted);flex:0 0 auto;}
.vinput{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:13px;color:var(--text);font-size:14px;font-family:inherit;outline:none;}
.vinput::placeholder{color:var(--muted);}
.vrow{display:flex;gap:12px;}
.vpacks{display:flex;flex-direction:column;gap:8px;}
.vpack{border:1px solid var(--border);border-radius:13px;padding:12px 13px;cursor:pointer;background:var(--surface);}
.vpack.active{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset;}
.vpack .vp-top{display:flex;justify-content:space-between;font-size:14px;}
.vpack .vp-top span{color:var(--accent2);font-weight:700;}
.vpack .vp-d{font-size:12px;color:var(--muted);margin-top:3px;}

/* Overlays */
.ovl{position:absolute;inset:0;z-index:60;display:none;}
.ovl.open{display:block;}
.ovl-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
.detail{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow-y:auto;background:var(--bg);
  border-radius:24px 24px 0 0;border-top:1px solid var(--border);animation:up .28s ease;}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.detail .hero{position:relative;height:230px;}
.detail .hero img{width:100%;height:100%;object-fit:cover;}
.detail .hero .grad{position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--bg));}
.detail .hero .close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.detail .body{padding:0 18px 24px;margin-top:-30px;position:relative;}
.detail h2{font-size:24px;font-weight:800;}
.detail .dsub{color:var(--muted);font-size:14px;margin-top:4px;}
.detail .dmeta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin:14px 0;align-items:center;}
.detail .dmeta b{color:var(--text);}
.detail .sectit{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;}
.dtags{display:flex;flex-wrap:wrap;gap:8px;}
.dtag{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:12px;}
.dstories{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;}
.dstories::-webkit-scrollbar{display:none;}
.dstories .ds{flex:0 0 auto;width:88px;height:120px;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;border:2px solid var(--accent2);}
.dstories .ds img{width:100%;height:100%;object-fit:cover;}
.dactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.dact{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);}
.dact.primary{grid-column:1/-1;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;}

/* Stories player */
.sp{position:absolute;inset:0;z-index:80;background:#000;display:none;}
.sp.open{display:block;}
.sp img{width:100%;height:100%;object-fit:cover;}
.sp .bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:5px;z-index:3;}
.sp .bars .b{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden;}
.sp .bars .b i{display:block;height:100%;width:0;background:#fff;}
.sp .bars .b.done i{width:100%;}
.sp .bars .b.cur i{animation:fill 4s linear forwards;}
@keyframes fill{to{width:100%}}
.sp .top{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;}
.sp .top img{width:36px;height:36px;border-radius:50%;flex:0 0 auto;}
.sp .top .nm{font-size:14px;font-weight:700;}
.sp .top .pl{font-size:11px;opacity:.8;}
.sp .top .vw{margin-left:auto;font-size:12px;display:flex;align-items:center;gap:5px;opacity:.9;}
.sp .top .x{cursor:pointer;}
.sp .tap{position:absolute;top:0;bottom:0;width:40%;z-index:2;}
.sp .tap.l{left:0;}.sp .tap.r{right:0;}
.sp .grad{position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(rgba(0,0,0,.6),transparent);z-index:1;}

.toast{position:absolute;left:50%;bottom:calc(var(--navh) + 16px);transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow);opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px;}