/* ============== Reset & tokens ============== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  color-scheme: light dark;
  --page-pad: clamp(16px, 4vw, 32px);

  /* Light */
  --pm-bg: #F5F7FF;
  --pm-surface: #FFFFFF;
  --pm-elev: #FAFBFF;
  --pm-border: #E4E8F5;
  --pm-text: #0E1022;
  --pm-text-muted: #5B5F7A;
  --pm-primary: #5B45FF;
  --pm-primary-strong: #3B2EEA;
  --pm-accent: #12C9BE;
  --pm-accent-2: #FF4FCB;
  --pm-success: #2ED7A1;
  --pm-warning: #FFC857;
  --pm-danger: #FF5E6D;
  --shadow-lg: 0 20px 60px rgba(22,24,40,.12);
  --subtle: rgba(9,11,24,.04);
}
.dark {
  /* Dark */
  --pm-bg: #0E0F1A;
  --pm-surface: #15172A;
  --pm-elev: #1A1C33;
  --pm-border: #22253A;
  --pm-text: #E8ECFF;
  --pm-text-muted: #A7AFD2;
  --pm-primary: #7B5CFF;
  --pm-primary-strong: #5F43F4;
  --pm-accent: #33E1DC;
  --pm-accent-2: #FF6AD5;
  --pm-success: #27E9B1;
  --pm-warning: #FFD36A;
  --pm-danger: #FF6C7B;
  --shadow-lg: 0 20px 60px rgba(2,4,20,.45);
  --subtle: rgba(255,255,255,.06);
}

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

/* ============== Generic UI ============== */
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--page-pad); }
.stack { display: grid; gap: 24px; }
.h1 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 4px; }
.muted { color: var(--pm-text-muted); font-size: 14px; }

.card { background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-lg); }
.center { display: flex; align-items: center; justify-content: center; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid var(--pm-border); background: var(--pm-surface); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:800; border:1px solid var(--pm-border); background: var(--pm-surface); color: var(--pm-text); cursor:pointer; }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--pm-primary), var(--pm-accent)); }
.btn.ghost { background: transparent; }
.input { border:1px solid var(--pm-border); background: var(--pm-surface); color: var(--pm-text); border-radius: 12px; padding: 10px 12px; }

.toolbar { position: fixed; top: 12px; right: 12px; z-index: 10; display: flex; gap: 8px; }
svg { max-width: 100%; height: auto; }

/* ============== Logo block ============== */
.logo-block { display:grid; gap: 8px; }
.artboards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.art { background: var(--pm-surface); border:1px solid var(--pm-border); border-radius:20px; padding: 16px; }
.art .stage { aspect-ratio: 1 / 1; border-radius: 14px; display:grid; place-items: center; background: var(--subtle); }

/* ============== Messenger Demo (fixed) ============== */
.messenger {
  display: grid;
  grid-template-columns: 72px 260px minmax(0,1fr) 320px;
  grid-template-rows: 56px minmax(0,1fr) auto;
  grid-template-areas:
    "rail header header header"
    "rail channels main  right"
    "rail composer composer right";
  gap: 0;
  border: 1px solid var(--pm-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--pm-surface);
  box-shadow: var(--shadow-lg);
  height: clamp(520px, 70vh, 900px);
}
.rail      { grid-area: rail; display:grid; padding:10px 8px; gap:10px; border-right:1px solid var(--pm-border); background: var(--pm-surface); }
.server    { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-weight:800; color:#fff; background: linear-gradient(135deg, var(--pm-primary), var(--pm-accent)); border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.server.ghost { color: var(--pm-text); background: var(--pm-bg); border:1px dashed var(--pm-border); }

.header    { grid-area: header; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--pm-border); background: var(--pm-surface); }
.chip      { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--pm-border); }
.search    { margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--pm-border); border-radius:10px; background: var(--pm-elev); }
.search input { border:0; outline:0; background:transparent; color: var(--pm-text); }

.channels  { grid-area: channels; display:grid; grid-template-rows: 44px minmax(0,1fr) 56px; border-right:1px solid var(--pm-border); background: var(--pm-elev); }
.channels .top { display:flex; align-items:center; justify-content:space-between; padding: 0 12px; border-bottom:1px solid var(--pm-border); }
.chan-list { overflow:auto; padding: 8px; }
.group     { font-size:11px; color: var(--pm-text-muted); text-transform:uppercase; margin:10px 8px 4px; }
.chan      { display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; }
.chan:hover{ background: rgba(91,69,255,.10); }
.chan.active{ background: rgba(91,69,255,.16); }
.hash      { width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:12px; background: rgba(91,69,255,.16); }
.userbar   { border-top:1px solid var(--pm-border); display:flex; align-items:center; gap:10px; padding: 8px; background: var(--pm-surface); }
.avatar    { width:28px; height:28px; border-radius:8px; background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-2)); }

.main      { grid-area: main; background: var(--pm-bg); overflow:auto; }
.day-sep   { position: sticky; top: 0; z-index: 1; text-align:center; padding: 6px 0; background: rgba(0,0,0,0.04); }
.msg       { display:grid; grid-template-columns: 40px minmax(0,1fr); gap:10px; padding:10px 14px; }
.msg .ava  { width:36px; height:36px; border-radius:10px; background: linear-gradient(135deg, var(--pm-primary), var(--pm-accent)); border:1px solid rgba(255,255,255,.15); }
.bubble    { background: var(--pm-surface); border:1px solid var(--pm-border); border-radius:12px; padding:10px 12px; box-shadow: var(--shadow-lg); }
.meta      { font-size:12px; color: var(--pm-text-muted); margin-bottom:4px; }
.mention   { color: var(--pm-accent); font-weight:700; }

.composer  { grid-area: composer; display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--pm-border); background: var(--pm-surface); }
.composer .input { flex:1; }
.send      { padding:10px 14px; border-radius:12px; border:0; font-weight:800; color:#fff; background: linear-gradient(135deg, var(--pm-primary), var(--pm-accent)); }

.right     { grid-area: right; border-left:1px solid var(--pm-border); background: var(--pm-elev); display:grid; grid-auto-rows:min-content; gap:10px; padding:12px; }
.panel     { background: var(--pm-surface); border:1px solid var(--pm-border); border-radius:12px; padding:12px; }

@media (max-width: 1100px){
  .messenger { grid-template-columns: 72px 220px minmax(0,1fr); grid-template-areas:
    "rail header header"
    "rail channels main"
    "rail composer composer";
  }
  .right { display:none; }
}
@media (max-width: 780px){
  .messenger { grid-template-columns: 72px minmax(0,1fr); grid-template-areas:
    "rail header"
    "rail main"
    "rail composer";
  }
  .channels { display:none; }
}

/* ============== Full-screen screens ============== */
.screen { width: 100%; height: 100vh; display: grid; border-top: 1px solid var(--pm-border); border-bottom: 1px solid var(--pm-border); }
.screen .wrap { padding-inline: var(--page-pad); }

/* Auth */
.auth { grid-template-columns: 1.1fr 1fr; background: var(--pm-surface); }
.auth-hero { position: relative; padding: 32px; display:grid; align-content:center; gap: 16px; background:
  linear-gradient(135deg, rgba(91,69,255,.28), rgba(18,201,190,.22)); }
.auth-hero .tag { display:inline-block; padding:6px 10px; border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; font-weight:700; font-size:12px; backdrop-filter: blur(4px); }
.auth-hero h2 { margin: 0; font-size: clamp(24px, 4vw, 40px); color: #fff; letter-spacing: -0.02em; }
.auth-hero p { margin: 0; max-width: 520px; color: rgba(255,255,255,.9); }
.auth-hero .mascot { position:absolute; right:32px; bottom:32px; opacity:.9; }
.auth-form { padding: 32px; display:grid; align-content:center; gap: 16px; background: var(--pm-bg); }
.tabs { display:flex; gap:8px; background: var(--pm-surface); border:1px solid var(--pm-border); border-radius:12px; padding:6px; width:max-content; }
.tab { padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:800; color: var(--pm-text-muted); }
.tab.active { background: rgba(91,69,255,.16); color: var(--pm-text); }
.form-grid { display:grid; gap:12px; max-width: 420px; }
.oauth { display:flex; gap:8px; }
.auth-footer { font-size:12px; color: var(--pm-text-muted); }

/* DM */
.dm { grid-template-columns: 72px 320px minmax(0,1fr); background: var(--pm-surface); }
.dm-rail { grid-row: 1 / span 2; padding:10px 8px; border-right:1px solid var(--pm-border); display:grid; gap:10px; align-content:start; }
.srv { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:800; background: linear-gradient(135deg, var(--pm-primary), var(--pm-accent)); border:1px solid rgba(255,255,255,.18); }
.dm-list { display:grid; grid-template-rows:56px minmax(0,1fr); border-right:1px solid var(--pm-border); }
.dm-head { display:flex; align-items:center; gap:8px; padding:0 10px; border-bottom:1px solid var(--pm-border); }
.dm-search { margin-left:auto; display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid var(--pm-border); border-radius:10px; background: var(--pm-elev); }
.dm-items { overflow:auto; background: var(--pm-elev); }
.dm-item { display:grid; grid-template-columns:36px 1fr max-content; gap:8px; align-items:center; padding:10px; }
.dm-item:hover { background: rgba(91,69,255,.10); }
.dm-ava { width:36px; height:36px; border-radius:10px; background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-2)); }
.dm-name { font-weight:700; }
.dm-last { font-size:12px; color: var(--pm-text-muted); }
.badge-unread { font-size:11px; padding:2px 6px; border-radius:999px; background: rgba(91,69,255,.26); border:1px solid var(--pm-border); }

.dm-thread { display:grid; grid-template-rows:56px minmax(0,1fr) 74px; }
.dm-top { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--pm-border); }
.dm-main { background: var(--pm-bg); overflow:auto; }
.dm-composer { display:flex; gap:10px; align-items:center; padding:10px; border-top:1px solid var(--pm-border); background: var(--pm-surface); }

/* Settings */
.settings { grid-template-columns: 280px minmax(0,1fr); background: var(--pm-surface); }
.set-nav { border-right:1px solid var(--pm-border); padding:14px 10px; display:grid; align-content:start; gap:6px; background: var(--pm-elev); }
.set-group { margin:8px 6px 4px; font-size:11px; color: var(--pm-text-muted); text-transform:uppercase; }
.set-item { padding:8px 10px; border-radius:10px; }
.set-item:hover, .set-item.active { background: rgba(91,69,255,.14); }
.set-main { display:grid; grid-template-rows:56px minmax(0,1fr); }
.set-top { display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--pm-border); }
.set-content { padding:16px; overflow:auto; background: var(--pm-bg); }
.card-ui { background: var(--pm-surface); border:1px solid var(--pm-border); border-radius:12px; padding:14px; }
.row-2 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.switch { position:relative; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background: var(--pm-border); border-radius:999px; transition:.2s; }
.slider:before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; border-radius:999px; background:#fff; transition:.2s; box-shadow: var(--shadow-lg); }
.switch input:checked + .slider { background: rgba(91,69,255,.45); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* Responsive adjustments */
@media (max-width: 1024px){
  .auth { grid-template-columns: 1fr; }
  .dm { grid-template-columns: 72px minmax(0,1fr); }
  .dm-list { display:none; }
  .settings { grid-template-columns: 1fr; }
  .set-nav { display: none; }
}