/* assets/css/style.css */
:root {
  --bg: #0f1221;
  --card: #1b1f3a;
  --text: #e6e9f5;
  --muted: #9aa3c7;
  --primary: #7c5cff;
  --outline: #31365c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #14183a 0%, #0f1221 40%, #0b0d1a 100%) fixed;
}

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 16px; }
.flex { display: flex; }
.space-between { justify-content: space-between; }
.align-center { align-items: center; }

.site-header {
  border-bottom: 1px solid var(--outline);
  position: sticky; top: 0; backdrop-filter: blur(6px);
  background: rgba(15, 18, 33, 0.8);
  z-index: 10;
}
.logo { font-weight: 700; text-decoration: none; color: var(--text); }
.main-nav a { color: var(--text); text-decoration: none; margin: 0 8px; }
.main-nav .btn { margin-left: 8px; }

.site-footer { border-top: 1px solid var(--outline); margin-top: 40px; padding: 24px 0; color: var(--muted); }

.hero { padding: 64px 0; text-align: center; }
.hero h1 { font-size: 40px; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0 0 16px; }
.cta .btn { margin: 4px; }

.btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  background: var(--outline); color: var(--text);
}
.btn:hover { filter: brightness(1.1); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-outline { background: transparent; border-color: var(--outline); }
.muted { color: var(--muted); }
.mt { margin-top: 32px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--outline); border-radius: 14px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card-medium { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.card-medium img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--outline); }
.card-actions { margin-top: 8px; }

.form-card { max-width: 520px; background: var(--card); border: 1px solid var(--outline); border-radius: 14px; padding: 16px; }
label { display: block; margin: 8px 0; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], textarea {
  width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--outline); background: #11142a; color: var(--text);
}
.checkbox { font-weight: 500; }
.alert { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--outline); background: #172043; margin-bottom: 10px; }
.alert.success { border-color: #2ea043; background: #12331c; }
.alert.error { border-color: #a02e2e; background: #331212; }

.list { list-style: none; padding: 0; }
.list li { padding: 8px 0; border-bottom: 1px dashed var(--outline); }
.list li a { color: var(--text); }

.chat { background: var(--card); border: 1px solid var(--outline); border-radius: 14px; }
.chat-header { padding: 12px 16px; border-bottom: 1px solid var(--outline); }
.chat-messages { height: 420px; overflow-y: auto; padding: 16px; }
.msg { margin-bottom: 10px; display: flex; }
.msg .bubble { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--outline); background: #141a3b; max-width: 80%; }
.msg.me { justify-content: flex-end; }
.msg.me .bubble { background: #1f2759; }
.msg .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--outline); }
.chat-input input[type="text"] { flex: 1; }


.badge {
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  margin-left: 6px;
}

input[type='file']{background:#11142a;color:var(--text);padding:10px;border:1px solid var(--outline);border-radius:10px;}