/* ucrime.lol identity layer - loaded AFTER app.css (and dash.css) on every site page except profile pages and the editor preview.
   One shared look ("case file"): Bricolage display type, mono labels, tape ribbons, ID-card forms, ambient light. Pure re-skin, no markup changes. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root { --id-disp: 'Bricolage Grotesque', Geist, system-ui, sans-serif; --id-mono: 'JetBrains Mono', ui-monospace, monospace; --id-ease: cubic-bezier(.2, .8, .2, 1);
  --id-tape: repeating-linear-gradient(-45deg, #f43f5e 0 10px, #8b5cf6 10px 20px); }
@property --id-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- ambient layer (injected by identity.js) ---------- */
.id-beams { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.id-beams i { position: absolute; top: -30vh; width: 58vmax; height: 120vh; transform-origin: 50% 0; opacity: .42; will-change: transform;
  background: conic-gradient(from 180deg at 50% 0, transparent 0 38%, rgba(168,85,247,.05) 42%, rgba(168,85,247,.18) 47%, rgba(244,63,94,.14) 50%, rgba(168,85,247,.18) 53%, rgba(168,85,247,.05) 58%, transparent 62% 100%); }
.id-beams i:nth-child(1) { left: 4%; animation: id-sweepA 17s ease-in-out infinite alternate; }
.id-beams i:nth-child(2) { right: 0; opacity: .3; animation: id-sweepB 22s ease-in-out infinite alternate; }
@keyframes id-sweepA { from { transform: rotate(-24deg); } to { transform: rotate(20deg); } }
@keyframes id-sweepB { from { transform: rotate(22deg); } to { transform: rotate(-18deg); } }
.id-grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.id-spot { position: fixed; left: 0; top: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .4s; will-change: transform;
  background: radial-gradient(circle, rgba(192,132,252,.14), rgba(244,63,94,.05) 45%, transparent 68%); }
.id-spot.on { opacity: 1; }
body.id-on:not(.dash) #stars { display: none; }
body.id-on:not(.dash):not(.lx) .bgfx::after { opacity: .6; }

/* scroll reveal (class removed again once done, so hover transforms keep working) */
.id-js .id-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--id-ease), transform .8s var(--id-ease); transition-delay: calc(var(--id-i, 0) * 70ms); }
.id-js .id-rv.in { opacity: 1; transform: none; }

/* ---------- type ---------- */
body.id-on h1, body.id-on h2 { font-family: var(--id-disp); }
body.id-on:not(.dash) h3 { font-family: var(--id-disp); }
body.id-on .field > label, body.id-on .lbl, body.id-on .eyebrow, body.id-on .xhead .eyebrow { font-family: var(--id-mono); letter-spacing: .09em; font-size: .68rem; }
body.id-on .legal h1, body.id-on .board h1, body.id-on .xhead h1 { letter-spacing: -.045em; }
.legal h2 { position: relative; padding-left: 22px; }
.legal h2::before { content: ""; position: absolute; left: 0; top: .32em; width: 10px; height: 1.05em; border-radius: 2px; background: var(--id-tape); }
.legal .upd { font-family: var(--id-mono); font-size: .76rem; letter-spacing: .06em; }

/* ---------- nav: pill with a slowly turning gradient edge ---------- */
.nav { border: 1px solid transparent; animation: id-ang 11s linear infinite;
  background: linear-gradient(rgba(14,10,24,.84), rgba(14,10,24,.84)) padding-box, conic-gradient(from var(--id-ang), rgba(139,92,246,.75), rgba(244,63,94,.55), rgba(251,146,60,.4), rgba(139,92,246,.75)) border-box; }
@keyframes id-ang { to { --id-ang: 360deg; } }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8b5cf6, #f43f5e); transition: width .35s var(--id-ease), left .35s var(--id-ease); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; left: 0; }
.pillbtn { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(244,63,94,.22)); border-color: rgba(192,132,252,.5); }
.pillbtn::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s; }
.pillbtn:hover::before { left: 130%; }

/* ---------- buttons + inputs ---------- */
.btn { position: relative; overflow: hidden; font-weight: 700; }
.btn.primary::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .7s; pointer-events: none; }
.btn.primary:hover::before { left: 130%; }
.btn.primary { box-shadow: 0 10px 28px -10px rgba(168,85,247,.75); }
.input:focus, select.input:focus, textarea.input:focus { border-color: transparent; box-shadow: 0 0 0 1px #a855f7, 0 0 0 5px rgba(168,85,247,.16); }

/* ---------- auth pages: the card is an ID badge ---------- */
.auth-card { position: relative; border-radius: 28px; background: linear-gradient(165deg, rgba(24,17,41,.86), rgba(10,7,18,.92)); border: 1px solid rgba(255,255,255,.1); }
.auth-card::before { content: ""; position: absolute; top: -1px; left: 50%; width: 78px; height: 13px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #07050d; border: 1px solid rgba(255,255,255,.16); border-top: 0; box-shadow: inset 0 -3px 6px rgba(0,0,0,.6); }
.auth-card::after { content: ""; position: absolute; right: 22px; bottom: 14px; width: 62px; height: 16px; opacity: .22; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 13px); }
.auth-ico { transform: rotate(-5deg); animation: id-wob 7s ease-in-out infinite; box-shadow: 0 14px 34px -12px rgba(168,85,247,.7); }
@keyframes id-wob { 50% { transform: rotate(4deg) translateY(-3px); } }
.auth-card h1 { font-size: 1.9rem; letter-spacing: -.045em; }
.or { font-family: var(--id-mono); letter-spacing: .12em; }
.oauth-btn { position: relative; overflow: hidden; }

/* ---------- explore / templates / leaderboard / shop / status ---------- */
.xname b { font-family: var(--id-disp); font-size: 1.1rem; letter-spacing: -.03em; }
.xuser { font-family: var(--id-mono); font-size: .72rem; }
.plan { border-radius: 26px; }
.plan .pr { font-family: var(--id-disp); }
.shop-sec, .up-card, .tstat { border-radius: 22px; }
.faq details { transition: background .3s; } .faq details[open] { background: linear-gradient(90deg, rgba(168,85,247,.06), transparent); }
.faq summary { font-family: var(--id-disp); }

/* ---------- footer + toast + progress ---------- */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--id-tape); opacity: .5; }
.toast { overflow: hidden; padding-left: 26px; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--id-tape); }
.plbar { background: linear-gradient(90deg, #8b5cf6, #f43f5e, #fb923c); }

/* =====================================================================================
   DASHBOARD - "the hideout": numbered tabs, taped title bar, dossier cards
   ===================================================================================== */
body.dash .d-top { position: relative; }
body.dash .d-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--id-tape); opacity: .75; }
body.dash .d-title b { font-family: var(--id-disp); font-size: 1.08rem; letter-spacing: -.035em; }
body.dash .d-title small { font-family: var(--id-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #7d7694; }
body.dash .d-side { counter-reset: idtab; }
body.dash .tab { counter-increment: idtab; }
body.dash .tab::after { content: counter(idtab, decimal-leading-zero); margin-left: auto; font-family: var(--id-mono); font-size: .6rem; letter-spacing: .06em; color: #4f4964; transition: color .25s; }
body.dash .tab:hover::after { color: #9b8fc0; } body.dash .tab.on::after { color: #f9a8d4; }
body.dash .tab.on { border-radius: 5px 14px 14px 5px; background: linear-gradient(90deg, rgba(244,63,94,.17), rgba(139,92,246,.1) 55%, transparent); box-shadow: none; }
body.dash .tab.on::before { width: 4px; left: -14px; border-radius: 0 3px 3px 0; background: var(--id-tape); }
body.dash .tab.on i { background: linear-gradient(135deg, #f43f5e, #8b5cf6); }
body.dash .d-side .sep[data-l]::before { font-family: var(--id-mono); letter-spacing: .16em; }
body.dash .d-user { border-radius: 18px 18px 18px 6px; }
body.dash .d-edit h2 { font-family: var(--id-disp); font-size: 2rem; letter-spacing: -.05em; }
body.dash .d-edit h2::before { content: ""; display: block; width: 52px; height: 6px; border-radius: 3px; margin-bottom: 14px; background: var(--id-tape); -webkit-text-fill-color: initial; }
body.dash .card2 { border-radius: 20px; }
body.dash .card2 h3 { font-family: var(--id-disp); font-size: 1.06rem; letter-spacing: -.03em; }
body.dash .card2::after, body.dash .ov-grid > div::after { content: ""; position: absolute; inset: 7px; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background:
    linear-gradient(#c084fc, #c084fc) top left / 11px 1.5px no-repeat, linear-gradient(#c084fc, #c084fc) top left / 1.5px 11px no-repeat,
    linear-gradient(#c084fc, #c084fc) top right / 11px 1.5px no-repeat, linear-gradient(#c084fc, #c084fc) top right / 1.5px 11px no-repeat,
    linear-gradient(#f43f5e, #f43f5e) bottom left / 11px 1.5px no-repeat, linear-gradient(#f43f5e, #f43f5e) bottom left / 1.5px 11px no-repeat,
    linear-gradient(#f43f5e, #f43f5e) bottom right / 11px 1.5px no-repeat, linear-gradient(#f43f5e, #f43f5e) bottom right / 1.5px 11px no-repeat; }
body.dash .card2:hover::after, body.dash .ov-grid > div:hover::after { opacity: .8; }
body.dash .ov-grid b, body.dash .an-kpis b { font-family: var(--id-disp); font-style: normal; letter-spacing: -.05em; }
body.dash .welcome h2 { font-family: var(--id-disp); letter-spacing: -.045em; }
body.dash .btn.primary { background: linear-gradient(135deg, #8b5cf6, #a855f7 40%, #f43f5e); }
body.dash .save-pill { font-family: var(--id-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
body.dash .st-title, body.dash .pv-head { font-family: var(--id-disp); }
@media (max-width: 980px) { body.dash .tab::after { display: none; } body.dash .tab.on::before { display: none; } body.dash .tab.on { border-radius: 13px; } }

@media (hover: none) { .id-spot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .id-beams i, .nav, .auth-ico { animation: none !important; }
  .id-js .id-rv { opacity: 1; transform: none; transition: none; }
}

/* focus ring that matches the identity colours (instead of the browser's default blue) */
body.dash :focus-visible, body.id-on :focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }
body.dash .seg button:focus-visible, body.dash .seg button:focus { outline-color: #c084fc; }

/* ---------- shared headline + card motion for every public page ---------- */
body.id-on .xhead h1:not(.hub-h1), body.id-on .shop-hero h1 { font-family: var(--id-disp); font-size: clamp(2.4rem, 7vw, 4.3rem); line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
body.id-on .xhead h1 .g, body.id-on .shop-hero h1 .g, body.id-on .legal h1 .g, body.id-on .st-hero h1 .g { background-image: linear-gradient(90deg, #c084fc, #f43f5e, #fbbf24, #c084fc); background-size: 200% 100%; animation: id-shift 6s linear infinite; }
@keyframes id-shift { to { background-position: -200% 0; } }
body.id-on .xhead:not(:has(.hub-chip))::before, body.id-on .shop-hero::before { content: ""; display: block; width: 74px; height: 8px; margin: 0 auto 20px; border-radius: 8px; background: var(--id-tape); animation: id-tapeslide 2.4s linear infinite; background-size: 28px 28px; }
@keyframes id-tapeslide { to { background-position: 28px 0; } }
.pcard, .tcard { --rx: 0deg; --ry: 0deg; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover, .tcard:hover { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
}
.xbar .seg { max-width: 100%; }
@media (max-width: 720px) { body.id-on .xhead h1:not(.hub-h1), body.id-on .shop-hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); } }