:root { color-scheme: light; --bg:#f7f5fb; --card:#ffffff; --line:#e8e3f1; --text:#211b2f; --muted:#756d82; --accent:#7138d8; --accent-dark:#5524af; --soft:#f0eafd; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(135deg,#fbfaff 0%,#f4effc 100%); color:var(--text); font:16px/1.5 Arial,sans-serif; }
.shell { width:min(100% - 32px, 460px); margin:0 auto; padding:clamp(28px,7vw,72px) 0; }
body:has(.social-layout) .shell { width:100%; max-width:none; padding:34px clamp(20px,4vw,64px) 48px; }
.brand { color:var(--accent); font-size:24px; font-weight:800; letter-spacing:.18em; margin-bottom:34px; }
.card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:0 24px 70px #4b2b7818; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:32px; line-height:1.1; margin:12px 0; }
.muted { color:var(--muted); }
form { display:grid; gap:18px; margin-top:28px; }
label { display:grid; gap:8px; color:#dedee7; font-size:14px; font-weight:600; }
input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); font:inherit; outline:none; }
input:focus { border-color:var(--accent); }
button,.button { display:inline-block; width:100%; border:0; border-radius:10px; padding:14px 18px; background:var(--accent); color:#fff; font-weight:800; font-size:15px; text-align:center; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:var(--accent-dark); }
.secondary { width:auto; background:var(--soft); color:var(--accent-dark); margin-top:20px; }
.switch { color:var(--muted); text-align:center; margin:22px 0 0; font-size:14px; }
a { color:var(--accent); }
.alert { margin-top:22px; padding:12px 14px; border:1px solid #e6aaaa; border-radius:10px; color:#a12828; background:#fff1f1; font-size:14px; }
.welcome-card { text-align:center; }
.username-row { display:flex; gap:8px; align-items:center; }
.username-row input { flex:1; }
#username-status { min-width:120px; font-size:12px; }
.ok { color:var(--accent); }
.bad { color:#ff8f8f; }
.check { display:flex; align-items:flex-start; gap:8px; font-weight:400; }
.check input { width:auto; margin-top:4px; }
.social-layout { width:min(100%, 1360px); margin:0 auto; display:grid; grid-template-columns:230px minmax(420px, 680px) 260px; justify-content:center; gap:clamp(22px,4vw,56px); text-align:left; }
.sidebar { min-height:calc(100vh - 80px); border-right:1px solid var(--line); padding:8px 18px 20px 0; display:flex; flex-direction:column; }
.side-brand { position:relative; display:flex; align-items:center; gap:12px; color:var(--accent); font-size:25px; font-weight:800; letter-spacing:.12em; text-decoration:none; margin:0 0 42px; }
.side-brand:before { content:'◆'; display:grid; place-items:center; width:30px; height:30px; color:#fff; font-size:13px; border-radius:9px 17px 9px 17px; background:linear-gradient(135deg,#8c5cf0,#4d1ac2); transform:rotate(20deg); box-shadow:9px 0 0 -3px #cfc0ff; }
.sidebar nav { display:grid; gap:8px; }
.nav-link { display:flex; align-items:center; gap:14px; padding:12px 14px; color:#d3d3de; border-radius:12px; text-decoration:none; }
.nav-link span { width:22px; color:var(--accent); font-size:21px; text-align:center; }
.nav-link:hover,.nav-link.active { background:var(--soft); color:var(--accent-dark); }
.logout-link { margin-top:auto; }
.feed { min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; }
.topbar h1 { margin:0; font-size:28px; }
.icon-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--accent); text-decoration:none; font-size:22px; }
.welcome-panel { position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; margin:24px 0 30px; padding:28px 34px; background:linear-gradient(110deg,#fff 0%,#faf8ff 45%,#eee5ff 100%); border:1px solid #e1d6fa; border-radius:20px; box-shadow:0 12px 30px #6a3dcc12; }
.welcome-panel:after { content:'✦  ✦  ✦'; position:absolute; right:30px; bottom:20px; color:#9a6cf0; opacity:.7; letter-spacing:12px; font-size:21px; transform:rotate(-12deg); }
.welcome-panel h2 { margin:3px 0 5px; font-size:21px; }
.avatar { display:grid; flex:0 0 auto; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--accent); color:#fff; font-size:20px; font-weight:800; }
.avatar.large { width:72px; height:72px; font-size:28px; }
.empty-feed { padding:82px 30px 68px; border:2px dashed #cabbef; border-radius:20px; text-align:center; background:rgba(255,255,255,.4); }
.empty-feed h2 { margin:14px 0 6px; }
.empty-feed .button { width:min(100%, 90%); margin-top:16px; background:linear-gradient(90deg,#6530d5,#7f42ec); border-radius:16px; box-shadow:0 12px 20px #6a35d633; }
.empty-icon,.coming-symbol { display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:18px; background:var(--soft); color:var(--accent); font-size:30px; }
.right-panel { display:grid; align-content:start; gap:18px; }
.profile-card,.coming-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:7px; padding:28px 30px; border:1px solid #e1d6fa; border-radius:20px; background:linear-gradient(145deg,#fff 0%,#fff 58%,#f0e7ff 100%); box-shadow:0 8px 25px #4b2b7810; }
.profile-card:after,.coming-card:after { content:''; position:absolute; width:130px; height:130px; right:-55px; top:-65px; border-radius:50%; border:18px solid #e8dcff; opacity:.8; }
.profile-card .avatar { margin-bottom:8px; }
.text-link { color:var(--accent); text-decoration:none; font-size:13px; margin-top:7px; }
.coming-card h3 { margin:0; font-size:19px; line-height:1.35; }
.coming-page { width:min(100% - 32px, 560px); margin:50px auto; padding:42px 28px; border:1px solid var(--line); border-radius:22px; background:var(--card); text-align:center; }
.coming-page .side-brand { display:block; }
.coming-page h1 { margin-top:24px; }
@media (max-width:1080px) and (min-width:601px) { body:has(.social-layout) .shell { padding-left:24px; padding-right:24px; } .social-layout { grid-template-columns:82px minmax(0,1fr); gap:24px; } .sidebar { padding-right:12px; } .nav-link { justify-content:center; padding:12px 8px; } .nav-link:not(.logout-link) { font-size:0; } .nav-link span { font-size:22px; } .side-brand { font-size:19px; letter-spacing:.1em; text-align:center; } .right-panel { display:none; } }
.mobile-nav { display:none; }
@media (max-width:600px) { body { background:#f7f5fb; } .shell { width:100%; padding:20px 14px 88px; } .social-layout { display:block; } .sidebar { min-height:0; border:0; padding:0; } .sidebar .side-brand,.sidebar nav,.logout-link { display:none; } .feed { width:100%; } .topbar { padding-top:8px; } .welcome-panel { align-items:flex-start; padding:18px; } .welcome-panel h2 { font-size:19px; } .empty-feed { padding:48px 18px; } .mobile-nav { position:fixed; z-index:10; left:0; right:0; bottom:0; display:flex; height:68px; justify-content:space-around; align-items:center; background:rgba(255,255,255,.98); border-top:1px solid var(--line); padding:5px 12px calc(5px + env(safe-area-inset-bottom)); } .mobile-nav a { display:flex; min-width:48px; flex-direction:column; align-items:center; gap:2px; color:#8b8198; text-decoration:none; } .mobile-nav a span { font-size:22px; line-height:1.1; } .mobile-nav a small { font-size:10px; } .mobile-nav a.active,.mobile-nav a:hover { color:var(--accent); } }