/* Global modern styles for UtilityServer */
:root {
  --bg: #0f1226;
  --bg2: #121735;
  --accent: #7c5cff;
  --accent-2: #00e6aa;
  --text: #e8e8f0;
  --muted: #a7a7bd;
  --card: #1a1f47;
  --card-hover: #222a5f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); }

.gradient-bg {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,.15), transparent 60%),
              radial-gradient(800px 400px at 90% 10%, rgba(0,230,170,.15), transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  min-height: 100vh;
}

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px; }

.app-header { border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); position: sticky; top: 0; background: rgba(15,18,38,.6); z-index: 10; }
.app-header h1 { margin: 0; font-weight: 800; letter-spacing: 0.5px; }
.subtitle { margin: 6px 0 0; color: var(--muted); }

.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding: 24px 0; }
.app-card { display: grid; grid-template-rows: auto 1fr; padding: 18px; text-decoration: none; color: inherit; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(34,42,95,.7), rgba(26,31,71,.7)); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.app-card:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(124,92,255,.18), rgba(26,31,71,.85)); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.app-name { font-weight: 700; font-size: 18px; }
.app-cta { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(124,92,255,.18); color: var(--text); border: 1px solid rgba(124,92,255,.45); width: fit-content; }

.empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; }

.footer { opacity: .8; color: var(--muted); text-align: center; padding-bottom: 24px; }