/* LocoDawn shared look: the same on admin, user and mobile. Loaded last on every page. */
body { background-image: radial-gradient(900px 520px at 90% -8%, rgba(124,58,237,.16), transparent 70%), radial-gradient(760px 460px at -12% 8%, rgba(37,99,235,.13), transparent 70%); background-attachment: fixed; }

/* cards */
.card, .panel-header, .stat, .modal-box { border-radius: 16px; border-color: rgba(124,58,237,.28); background-image: linear-gradient(180deg, rgba(124,58,237,.08), rgba(37,99,235,.03)); }
.results > .card { position: relative; padding-left: 20px; overflow: hidden; }
.results > .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, hsl(var(--h, 330), 80%, 60%), hsl(calc(var(--h, 330) + 40), 80%, 55%)); }
.results > .card:nth-child(6n+1) { --h: 330; } .results > .card:nth-child(6n+2) { --h: 285; } .results > .card:nth-child(6n+3) { --h: 225; }
.results > .card:nth-child(6n+4) { --h: 190; } .results > .card:nth-child(6n+5) { --h: 150; } .results > .card:nth-child(6n) { --h: 40; }

/* tables */
.pin-table-wrap { border-radius: 16px; border-color: rgba(124,58,237,.28); }
.pin-table thead th { background: linear-gradient(90deg, #1b2540, #261a42); color: #c4b5fd; }
.pin-table tbody tr:hover { background: rgba(124,58,237,.10); }

/* inputs */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], select, textarea { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.25); }

/* buttons */
button.primary, button.btn:not(.secondary):not(.danger):not(.pass):not(.fail) { background-image: linear-gradient(135deg, #059669, #0d9488); border-radius: 999px; font-weight: 700; box-shadow: 0 4px 14px rgba(5,150,105,.38); }
button.primary:hover:not(:disabled), button.btn:not(.secondary):not(.danger):hover:not(:disabled) { filter: brightness(1.1); }
button.secondary, button.btn.secondary { border-radius: 999px; }
a.back-btn { border-radius: 999px; }

/* numbered gradient tool cards (admin tools, categories) */
.tools, .category-grid { counter-reset: tc; }
.tool-card { --h: 330; counter-increment: tc; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid hsla(var(--h), 70%, 60%, .35); padding: 16px 44px 16px 74px; min-height: 76px;
  background: linear-gradient(135deg, hsla(var(--h), 75%, 55%, .16), hsla(calc(var(--h) + 40), 75%, 45%, .05)), var(--panel); transition: transform .15s, box-shadow .15s, border-color .15s; }
.tool-card::before { content: counter(tc); display: flex; align-items: center; justify-content: center; color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.3rem; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--h), 75%, 55%), hsl(calc(var(--h) + 40), 75%, 45%)); box-shadow: 0 0 0 4px hsla(var(--h), 80%, 60%, .18); }
.tool-card::after { content: "\2192"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 700; color: hsl(var(--h), 85%, 72%); }
.tool-card:hover { transform: translateY(-2px); border-color: hsl(var(--h), 80%, 62%); box-shadow: 0 8px 24px hsla(var(--h), 80%, 50%, .28); }
.tools > .tool-card:nth-child(8n+1), .category-grid > .tool-card:nth-child(8n+1) { --h: 330; } .tools > .tool-card:nth-child(8n+2), .category-grid > .tool-card:nth-child(8n+2) { --h: 285; }
.tools > .tool-card:nth-child(8n+3), .category-grid > .tool-card:nth-child(8n+3) { --h: 255; } .tools > .tool-card:nth-child(8n+4), .category-grid > .tool-card:nth-child(8n+4) { --h: 215; }
.tools > .tool-card:nth-child(8n+5), .category-grid > .tool-card:nth-child(8n+5) { --h: 190; } .tools > .tool-card:nth-child(8n+6), .category-grid > .tool-card:nth-child(8n+6) { --h: 160; }
.tools > .tool-card:nth-child(8n+7), .category-grid > .tool-card:nth-child(8n+7) { --h: 135; } .tools > .tool-card:nth-child(8n), .category-grid > .tool-card:nth-child(8n) { --h: 40; }
.tool-card .t { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.08rem; }

/* stat tiles */
.stat .num { background: linear-gradient(135deg, #f472b6, #a78bfa, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat.warn .num { background: none; -webkit-text-fill-color: var(--warn); }
.lang-toggle { flex-wrap: wrap; }
button[type=submit]#submitBtn { background-image: linear-gradient(135deg, #059669, #0d9488); border-radius: 999px; font-weight: 700; box-shadow: 0 6px 18px rgba(5,150,105,.42); }
button[type=submit]#submitBtn:hover:not(:disabled) { filter: brightness(1.1); }
.ld-langbar button { border-radius: 999px !important; font-weight: 700 !important; background: #101a2b; border: 1px solid #2f4366 !important; }
.ld-langbar button.on { background: linear-gradient(135deg, #059669, #0d9488) !important; border-color: #34d399 !important; box-shadow: 0 4px 14px rgba(5,150,105,.45) !important; }

/* home page quick-start cards */
.qs-card { --h: 165; position: relative; overflow: hidden; border-radius: 16px !important; border: 1px solid hsla(var(--h), 70%, 60%, .42) !important; padding-right: 46px !important;
  background: linear-gradient(135deg, hsla(var(--h), 75%, 55%, .24), hsla(calc(var(--h) + 40), 75%, 45%, .06)), #0f1624 !important; transition: transform .15s, box-shadow .15s; }
.qs-card:nth-child(2) { --h: 330; } .qs-card:nth-child(3) { --h: 215; }
.qs-card::after { content: "\2192"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 700; color: hsl(var(--h), 85%, 72%); }
.qs-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px hsla(var(--h), 80%, 50%, .3); }
.qs-card b { font-weight: 800; color: #fff; }
.qs-card span { color: #b6c2d6; }