/* SoftPaws UI Library v1 — shared tokens and components. */
:root{
  --sp-bg:#0d1014;--sp-surface-1:#111519;--sp-surface-2:#171b20;--sp-surface-3:#1d2329;
  --sp-text:#f0ffff;--sp-text-2:#c7cdd2;--sp-muted:#919ca7;
  --sp-line:#2a3036;--sp-line-strong:#3a424a;
  --sp-accent:#ffd000;--sp-accent-2:#ff9b00;--sp-danger:#ff6548;--sp-success:#63df7b;--sp-info:#69aef7;
  --sp-radius-xs:6px;--sp-radius-sm:8px;--sp-radius-md:12px;--sp-radius-lg:14px;
  --sp-space-1:4px;--sp-space-2:8px;--sp-space-3:12px;--sp-space-4:16px;--sp-space-5:20px;--sp-space-6:24px;--sp-space-8:32px;
  --sp-control-height:46px;--sp-container:1556px;
  --sp-shadow:0 24px 70px #0008;--sp-focus:0 0 0 3px #ffd00042;
}
.sp-shell{width:min(var(--sp-container),calc(100% - 48px));margin-inline:auto}
.sp-stack{display:grid;gap:var(--sp-space-4)}.sp-stack--lg{gap:var(--sp-space-6)}
.sp-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-space-3)}
.sp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-space-5)}
.sp-card{background:var(--sp-surface-2);border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);padding:var(--sp-space-8);box-shadow:var(--sp-shadow)}
.sp-card--flat{box-shadow:none}.sp-card--compact{padding:var(--sp-space-5)}
.sp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-4);flex-wrap:wrap}
.sp-btn{min-height:var(--sp-control-height);display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;border:1px solid transparent;border-radius:var(--sp-radius-sm);background:linear-gradient(135deg,var(--sp-accent),var(--sp-accent-2));color:#151515;font:800 14px Manrope,sans-serif;cursor:pointer}
.sp-btn:hover{transform:translateY(-1px)}.sp-btn:focus-visible{outline:0;box-shadow:var(--sp-focus)}
.sp-btn--ghost{background:transparent;color:var(--sp-text);border-color:var(--sp-line-strong)}
.sp-btn--danger{background:#ff654816;color:#ff8b79;border-color:#ff654866}
.sp-icon-btn{width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--sp-radius-sm);background:transparent;color:var(--sp-text-2);cursor:pointer}
.sp-icon-btn:hover{color:var(--sp-accent);background:#ffd0000d}.sp-icon{width:20px;height:20px;fill:currentColor;pointer-events:none}
.sp-field{display:grid;gap:var(--sp-space-2);color:var(--sp-text-2);font-size:12px;font-weight:700}
.sp-input{min-height:var(--sp-control-height);width:100%;padding:0 14px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-sm);background:#0e1114;color:var(--sp-text);font:inherit}
.sp-input:focus{outline:0;border-color:var(--sp-accent);box-shadow:var(--sp-focus)}
.sp-help{color:var(--sp-muted);font-size:12px;line-height:1.5}.sp-label{color:var(--sp-muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sp-tabs{display:flex;align-items:center;gap:var(--sp-space-2);padding:var(--sp-space-2);overflow:auto;border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--sp-surface-1)}
.sp-tab{min-height:48px;padding:0 18px;border:1px solid transparent;border-radius:var(--sp-radius-sm);background:transparent;color:var(--sp-text-2);font-weight:800;white-space:nowrap;cursor:pointer}
.sp-tab[aria-selected=true],.sp-tab.active{background:linear-gradient(135deg,var(--sp-accent),var(--sp-accent-2));color:#151515}
.sp-row{display:grid;grid-template-columns:minmax(220px,1fr) repeat(2,minmax(150px,220px)) auto;align-items:center;gap:var(--sp-space-5);padding:var(--sp-space-4) var(--sp-space-5);border:1px solid var(--sp-line);border-radius:var(--sp-radius-md);background:var(--sp-surface-2)}
.sp-notice{padding:14px 18px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);background:var(--sp-surface-2)}
.sp-notice--success{border-color:#63df7b55;background:#63df7b12}.sp-notice--danger{border-color:#ff654855;background:#ff654812}
.sp-badge{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border:1px solid var(--sp-line-strong);border-radius:99px;color:var(--sp-text-2);font-size:11px;font-weight:800}
.sp-dialog{width:min(920px,calc(100% - 32px));padding:32px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius-lg);background:var(--sp-surface-2);color:var(--sp-text);box-shadow:var(--sp-shadow)}
.sp-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}

/* Compatibility layer: old templates inherit the system without a rewrite. */
.button{min-height:var(--sp-control-height);border-radius:var(--sp-radius-sm);transition:transform .16s,filter .16s,border-color .16s}
.button:focus-visible,.danger:focus-visible,.admin-nav button:focus-visible{outline:0;box-shadow:var(--sp-focus)}
.panel{border-color:var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-surface-2)}
input,textarea,select{border-radius:var(--sp-radius-sm);border-color:var(--sp-line-strong)}
dialog{border-color:var(--sp-line-strong);border-radius:var(--sp-radius-lg);background:var(--sp-surface-2);box-shadow:var(--sp-shadow)}
.notice{border-radius:var(--sp-radius-sm)}
.admin-tabs,.mysql-admin-panel{width:min(var(--sp-container),calc(100% - 48px));max-width:none;margin-inline:auto;padding-inline:0}
main:has(.admin-tabs)>.page-head{width:min(var(--sp-container),calc(100% - 48px));max-width:none;padding-left:0;padding-right:0}
.admin-nav{position:relative;top:auto;min-height:68px;align-items:center;gap:var(--sp-space-2);padding:var(--sp-space-2);border-radius:var(--sp-radius-md);background:var(--sp-surface-1)}
.admin-nav button,.admin-nav>a{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:var(--sp-radius-sm);white-space:nowrap}
.admin-tabs>article.panel.full{padding:var(--sp-space-8)}
.brand-upload{gap:var(--sp-space-3)}
.mysql-admin-panel .db-toolbar,.mysql-admin-panel .users-head{margin-inline:0}
.mysql-admin-panel .db-row,.mysql-admin-panel .user-row{border-radius:var(--sp-radius-md);background:var(--sp-surface-2)}
@media(max-width:800px){.sp-shell,.admin-tabs,.mysql-admin-panel,main:has(.admin-tabs)>.page-head{width:calc(100% - 28px)}.sp-grid{grid-template-columns:1fr}.sp-card,.admin-tabs>article.panel.full{padding:var(--sp-space-5)}.sp-row{grid-template-columns:1fr}.admin-nav{overflow-x:auto;flex-wrap:nowrap}.admin-nav button,.admin-nav>a{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){.sp-btn,.button{transition:none!important}.sp-btn:hover,.button:hover{transform:none!important}}