/* Skin 2026 — страница ошибки (404 и др.) */

.jc-error-page{padding:56px 0 80px}
.band.tight.jc-error-page{padding:56px 0 80px}
.jc-error-card{
  max-width:560px;margin:0 auto;text-align:center;
  border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  background:var(--bg-surface);box-shadow:var(--shadow-md);
  padding:48px 40px 40px;position:relative;overflow:hidden}
.jc-error-card::before{
  content:"";position:absolute;inset:-40% -20% auto;height:220px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,106,19,.12),transparent 68%)}
[data-theme="dark"] .jc-error-card::before{
  background:radial-gradient(ellipse at 50% 0%,rgba(255,106,19,.18),transparent 68%)}

.jc-error-giant{
  position:relative;margin:0 0 8px;
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:clamp(5.5rem,16vw,8.75rem);line-height:.92;letter-spacing:-.04em;
  background:linear-gradient(145deg,var(--orange-500) 0%,#FF9E2C 45%,var(--orange-600) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .jc-error-giant{
  background:linear-gradient(145deg,var(--orange-400) 0%,#FFB23E 50%,var(--orange-500) 100%);
  -webkit-background-clip:text;background-clip:text}

.jc-error-card h1{
  position:relative;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(22px,2.8vw,28px);line-height:1.2;color:var(--fg-primary);
  margin:0 0 16px;letter-spacing:-.02em}
.jc-error-msg{
  position:relative;font-size:16px;line-height:1.6;color:var(--fg-secondary);
  margin:0 auto;max-width:42ch;text-wrap:pretty}
.jc-error-actions{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:32px;padding-top:28px;border-top:1px solid var(--border-subtle)}
.jc-error-actions .btn-connect{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 26px;font-size:15px}
.jc-error-actions .btn-connect i{width:18px;height:18px}
.jc-error-actions .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--fg-primary);
  font-size:15px;font-weight:var(--weight-semibold);text-decoration:none;cursor:pointer;font:inherit;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.jc-error-actions .btn-ghost i{width:18px;height:18px}
.jc-error-actions .btn-ghost:hover{
  border-color:rgba(255,106,19,.45);background:var(--orange-50);color:var(--orange-600)}
[data-theme="dark"] .jc-error-actions .btn-ghost:hover{
  background:rgba(255,106,19,.12);color:var(--orange-400)}

@media (max-width:560px){
  .jc-error-page{padding:32px 0 56px}
  .jc-error-card{padding:36px 22px 28px;border-radius:var(--radius-lg)}
  .jc-error-giant{font-size:clamp(4.5rem,22vw,6.5rem);margin-bottom:4px}
  .jc-error-card h1{font-size:22px;margin-bottom:14px}
  .jc-error-msg{font-size:15px}
  .jc-error-actions{
    flex-direction:column;align-items:stretch;gap:12px;margin-top:28px;padding-top:24px}
  .jc-error-actions .btn-connect,.jc-error-actions .btn-ghost{width:100%}
}