@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');

:root { --ink: #140d0d; --ink-2: #1c1110; --panel: #281817; --panel-2: #34201d; --line: rgba(245, 225, 211, .12); --muted: #a48d84; --cream: #f2e7df; --lime: #d86d4d; --orange: #e4b35e; --violet: #bd7c79; --blue: #b18b76; --mono: 'DM Mono', monospace; --display: 'Syne', sans-serif; }
* { box-sizing: border-box; } body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 13px; } button { font: inherit; color: inherit; border: 0; cursor: pointer; } svg { width: 16px; height: 16px; stroke-width: 1.8; } .app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; flex: 0 0 248px; border-right: 1px solid var(--line); padding: 28px 18px 20px; display: flex; flex-direction: column; background: #151817; } .brand { display: flex; align-items: center; gap: 11px; color: var(--cream); text-decoration: none; padding: 0 10px 30px; } .brand-mark { display: grid; place-items: center; background: var(--lime); color: var(--ink); width: 30px; height: 30px; border-radius: 50%; } .brand-mark svg { width: 17px; } .brand strong, .brand small { display: block; font-family: var(--display); letter-spacing: .12em; line-height: 1; } .brand strong { font-size: 15px; } .brand small { color: var(--muted); font-size: 8px; margin-top: 5px; letter-spacing: .25em; } .server-status { margin: 0 10px 38px; background: #20251f; border: 1px solid rgba(198,242,122,.15); padding: 11px 10px; display: flex; align-items: center; gap: 7px; font-size: 9px; color: var(--muted); } .status-dot, .live-pulse { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--lime); box-shadow: 0 0 0 3px rgba(198,242,122,.14); } .server-status b { margin-left: auto; color: var(--lime); font-weight: 500; } .nav-label, .section-kicker, .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; } .nav-label { padding: 0 10px; margin: 0 0 12px; } .main-nav { display: grid; gap: 4px; } .nav-item { text-align: left; background: transparent; border-radius: 3px; color: var(--muted); padding: 13px 10px; display: flex; align-items: center; gap: 12px; transition: .2s ease; } .nav-item span { flex: 1; } .nav-item em { font-style: normal; font-size: 9px; color: #566057; } .nav-item.active, .nav-item:hover { color: var(--cream); background: #282e29; } .nav-item.active svg { color: var(--lime); } .sidebar-bottom { margin-top: auto; } .player-card { border-top: 1px solid var(--line); padding: 18px 10px; display: flex; align-items: center; gap: 9px; } .avatar, .tiny-avatar { display: grid; place-items: center; background: var(--orange); color: var(--ink); font-family: var(--display); font-weight: 800; } .avatar { width: 31px; height: 31px; font-size: 12px; } .player-card strong, .player-card span { display: block; } .player-card strong { font-size: 11px; } .player-card span { color: var(--muted); font-size: 9px; margin-top: 3px; } .player-card .icon-button { margin-left: auto; } .help-link { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; padding: 16px 10px 0; border-top: 1px solid var(--line); } .help-link svg:last-child { margin-left: auto; width: 13px; }
.main-content { min-width: 0; flex: 1; padding: 0 42px 48px; } .topbar { height: 86px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .breadcrumb, .top-actions, .user-pill { display: flex; align-items: center; gap: 11px; } .breadcrumb { color: var(--muted); font-size: 10px; letter-spacing: .13em; } .breadcrumb svg { width: 12px; color: #59615b; } .breadcrumb strong { color: var(--cream); font-weight: 500; } .top-actions { gap: 18px; } .icon-button { background: transparent; color: var(--muted); display: grid; place-items: center; padding: 4px; position: relative; } .icon-button:hover { color: var(--cream); } .notification-dot { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; position: absolute; top: 2px; right: 1px; } .user-pill { background: transparent; font-size: 11px; padding: 4px 0; } .tiny-avatar { width: 22px; height: 22px; font-size: 9px; } .user-pill svg { width: 12px; color: var(--muted); }
.view { display: none; padding-top: 52px; animation: reveal .35s ease both; } .active-view { display: block; } @keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero-grid { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(460px, 1.1fr); gap: 34px; min-height: 430px; } .hero-copy { padding-top: 20px; } .eyebrow { display: flex; align-items: center; gap: 11px; color: var(--lime); } h1, h2, h3, p { margin: 0; } h1, h2, h3 { font-family: var(--display); } .hero-copy h1 { font-size: clamp(55px, 6vw, 85px); line-height: .94; letter-spacing: -.06em; margin: 24px 0; } h1 span, h2 span, .view-heading h1 span { color: var(--lime); } .hero-copy p { color: var(--muted); line-height: 1.8; max-width: 415px; font-size: 12px; } .hero-actions { display: flex; align-items: center; gap: 18px; margin: 35px 0 41px; } .primary-button, .ghost-button, .cart-button { display: inline-flex; align-items: center; gap: 10px; } .primary-button { background: var(--lime); color: var(--ink); padding: 14px 18px; font-size: 10px; font-weight: 500; letter-spacing: .05em; transition: transform .2s; } .primary-button:hover { transform: translateY(-2px); } .primary-button svg { width: 14px; } .ghost-button, .text-button, .manage-link { background: transparent; color: var(--cream); font-size: 10px; } .ghost-button { color: var(--muted); } .ghost-button:hover, .text-button:hover { color: var(--lime); } .ghost-button svg, .text-button svg, .manage-link svg { width: 13px; vertical-align: middle; } .hero-meta { display: flex; gap: 37px; } .hero-meta strong, .hero-meta span { display: block; } .hero-meta strong { font-family: var(--display); font-size: 20px; } .hero-meta span { color: var(--muted); font-size: 9px; margin-top: 6px; }
.hero-art { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(142deg, #222b27 0%, #1f2a24 38%, #303a27 100%); border: 1px solid var(--line); background-image: linear-gradient(135deg, rgba(198,242,122,.07) 1px, transparent 1px), linear-gradient(45deg, rgba(198,242,122,.04) 1px, transparent 1px), linear-gradient(142deg, #222b27 0%, #1f2a24 38%, #303a27 100%); background-size: 26px 26px, 26px 26px, auto; } .hero-art:before { content: ''; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(237,240,230,.09); border-radius: 50%; top: -120px; right: -60px; } .moon { position: absolute; width: 155px; height: 155px; background: var(--lime); border-radius: 50%; top: 58px; right: 80px; box-shadow: 0 0 70px rgba(198,242,122,.18); } .moon:after { content: ''; position: absolute; background: #263026; width: 150px; height: 150px; border-radius: 50%; top: -18px; left: -26px; } .mountain { position: absolute; bottom: 0; width: 110%; left: -4%; clip-path: polygon(0 100%, 12% 59%, 25% 82%, 38% 40%, 56% 78%, 72% 31%, 89% 71%, 100% 50%, 100% 100%); } .mountain-back { height: 265px; background: #303f2c; opacity: .8; } .mountain-front { height: 190px; background: #151c19; clip-path: polygon(0 100%, 18% 60%, 30% 74%, 47% 46%, 65% 79%, 76% 58%, 100% 78%, 100% 100%); } .pixel-sun { width: 8px; height: 8px; background: var(--orange); position: absolute; top: 176px; left: 21%; box-shadow: 18px -12px 0 rgba(255,157,98,.35), -12px 13px 0 rgba(255,157,98,.25); } .art-stamp { position: absolute; left: 33px; bottom: 34px; color: var(--cream); border-left: 2px solid var(--lime); padding-left: 13px; } .art-stamp span, .art-stamp strong, .art-stamp small { display: block; } .art-stamp span { font-size: 9px; color: var(--lime); letter-spacing: .2em; } .art-stamp strong { font-family: var(--display); font-size: 28px; letter-spacing: -.05em; } .art-stamp small { color: var(--muted); font-size: 8px; line-height: 1.5; margin-top: 7px; } .coordinate { position: absolute; right: 19px; bottom: 16px; color: #74806f; font-size: 8px; letter-spacing: .1em; transform: rotate(-90deg); transform-origin: bottom right; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 47px 0 19px; } .section-heading h2, .panel h2 { font-size: 23px; margin-top: 8px; letter-spacing: -.04em; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .news-card { min-height: 249px; padding: 17px 18px 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; } .news-card.featured { background: #273023; } .card-top { display: flex; justify-content: space-between; color: #6f786f; font-size: 8px; letter-spacing: .1em; } .tag { font-size: 8px; padding: 4px 6px; letter-spacing: .15em; } .tag.lime { background: rgba(198,242,122,.15); color: var(--lime); } .tag.orange { background: rgba(255,157,98,.12); color: var(--orange); } .tag.violet { background: rgba(169,154,245,.12); color: var(--violet); } .news-card-content { margin-top: auto; position: relative; } .news-icon { display: grid; place-items: center; width: 35px; height: 35px; color: var(--lime); background: rgba(198,242,122,.1); margin-bottom: 16px; } .news-icon.warm { color: var(--orange); background: rgba(255,157,98,.1); } .news-icon.cool { color: var(--violet); background: rgba(169,154,245,.1); } .news-card h3 { font-size: 17px; line-height: 1.1; letter-spacing: -.04em; } .news-card p { color: var(--muted); font-size: 10px; line-height: 1.7; margin-top: 11px; max-width: 270px; } .round-arrow { position: absolute; right: 0; bottom: 0; width: 29px; height: 29px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; } .round-arrow svg { width: 13px; }
.view-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 42px; } .view-heading h1 { font-size: 58px; line-height: 1; letter-spacing: -.06em; margin: 15px 0 13px; } .view-heading p { color: var(--muted); font-size: 11px; } .wallet, .admin-status { border: 1px solid var(--line); background: var(--panel); padding: 13px 15px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; } .wallet svg { color: var(--lime); width: 15px; } .wallet strong { color: var(--lime); font-size: 14px; margin-left: 13px; } .shop-toolbar { border-bottom: 1px solid var(--line); padding-bottom: 13px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .filter-group { display: flex; gap: 6px; } .filter { background: transparent; padding: 8px 12px; color: var(--muted); font-size: 10px; } .filter.active, .filter:hover { color: var(--ink); background: var(--lime); } .cart-button { background: var(--panel-2); padding: 9px 12px; font-size: 10px; } .cart-button svg { color: var(--lime); } .cart-button b { background: var(--orange); color: var(--ink); border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; font-size: 9px; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .product-card { background: var(--panel); border: 1px solid var(--line); padding: 10px; } .product-visual { height: 190px; display: grid; place-items: center; position: relative; overflow: hidden; } .product-visual:before { content: ''; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.12); transform: rotate(45deg); } .rank-visual { background: #35462e; color: var(--lime); } .crate-visual { background: #3d2e27; color: var(--orange); } .boost-visual { background: #293645; color: var(--blue); } .founder-visual { background: #38314a; color: var(--violet); } .product-glyph { font-family: var(--display); font-size: 58px; position: relative; z-index: 1; } .product-glyph svg { width: 52px; height: 52px; stroke-width: 1; } .product-ribbon { position: absolute; left: 10px; top: 10px; font-size: 8px; letter-spacing: .15em; color: var(--ink); background: var(--lime); padding: 5px 7px; } .product-info { display: flex; align-items: end; justify-content: space-between; padding: 17px 2px 15px; } .product-type { color: var(--muted); font-size: 8px; } .product-info h3 { font-size: 18px; margin-top: 6px; } .price { color: var(--lime); font-family: var(--display); font-size: 16px; white-space: nowrap; } .price small { font-family: var(--mono); font-size: 9px; color: var(--muted); } .add-product { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; background: #282e29; color: var(--cream); font-size: 10px; } .add-product:hover { background: var(--lime); color: var(--ink); } .add-product svg { width: 13px; }
.admin-heading { margin-bottom: 31px; } .admin-status { color: var(--lime); border-color: rgba(198,242,122,.18); } .admin-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 29px; } .admin-stat { background: var(--panel); border: 1px solid var(--line); padding: 19px; min-height: 153px; position: relative; } .admin-stat > span { color: var(--muted); font-size: 10px; } .admin-stat strong { display: block; font-family: var(--display); font-size: 26px; margin-top: 15px; } .admin-stat strong small { color: var(--muted); font-family: var(--mono); font-size: 10px; } .admin-stat em { font-style: normal; font-size: 9px; position: absolute; right: 19px; top: 53px; } .up { color: var(--lime); } .down { color: var(--orange); } .mini-bars { display: flex; gap: 5px; align-items: end; position: absolute; bottom: 19px; left: 19px; right: 19px; height: 28px; } .mini-bars i { flex: 1; background: #39453b; border-top: 2px solid var(--lime); } .revenue-line { position: absolute; left: 19px; right: 19px; bottom: 22px; height: 28px; border-bottom: 1px solid var(--lime); clip-path: polygon(0 72%, 13% 52%, 24% 65%, 37% 36%, 50% 59%, 61% 45%, 73% 67%, 86% 22%, 100% 42%, 100% 100%, 0 100%); background: rgba(198,242,122,.12); } .manage-link { position: absolute; left: 19px; bottom: 20px; color: var(--lime); } .admin-columns { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; } .panel { background: var(--panel); border: 1px solid var(--line); padding: 20px; } .panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; } .activity-list { border-top: 1px solid var(--line); } .activity { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 15px 0; } .activity-icon { width: 30px; height: 30px; display: grid; place-items: center; } .activity-icon svg { width: 14px; } .activity-icon.green { color: var(--lime); background: rgba(198,242,122,.1); } .activity-icon.orange { color: var(--orange); background: rgba(255,157,98,.1); } .activity-icon.violet { color: var(--violet); background: rgba(169,154,245,.1); } .activity-icon.blue { color: var(--blue); background: rgba(136,201,255,.1); } .activity div:nth-child(2) { flex: 1; } .activity strong, .activity span { display: block; } .activity strong { font-size: 10px; font-weight: 500; } .activity span { font-size: 9px; color: var(--muted); margin-top: 5px; } .activity-badge { font-size: 8px; color: var(--muted); font-weight: 400; } .quick-action { display: flex; align-items: center; gap: 11px; background: transparent; width: 100%; text-align: left; border-top: 1px solid var(--line); padding: 14px 0; font-size: 10px; } .quick-action > span { width: 26px; height: 26px; display: grid; place-items: center; background: #2a312b; color: var(--lime); } .quick-action svg:last-child { margin-left: auto; width: 13px; color: var(--muted); } .quick-action:hover { color: var(--lime); } .toggle-row { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; } .toggle-row strong, .toggle-row small { display: block; } .toggle-row strong { font-size: 10px; } .toggle-row small { color: var(--muted); font-size: 9px; margin-top: 5px; } .toggle { width: 36px; height: 20px; border-radius: 20px; background: #353c36; padding: 3px; } .toggle span { display: block; height: 14px; width: 14px; border-radius: 50%; background: var(--muted); transition: .2s; } .toggle[aria-pressed='true'] { background: var(--lime); } .toggle[aria-pressed='true'] span { transform: translateX(16px); background: var(--ink); }
.toast { position: fixed; bottom: 22px; right: 25px; display: flex; align-items: center; gap: 10px; padding: 13px 17px; background: var(--lime); color: var(--ink); font-size: 10px; transform: translateY(120px); transition: .3s ease; } .toast.show { transform: translateY(0); } .toast svg { width: 14px; }
@media (max-width: 1100px) { .main-content { padding: 0 25px 40px; } .sidebar { width: 210px; flex-basis: 210px; } .hero-grid { grid-template-columns: 1fr; } .hero-art { min-height: 300px; } .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .app-shell { display: block; } .sidebar { width: 100%; height: auto; padding: 15px 15px 0; border-right: 0; border-bottom: 1px solid var(--line); } .brand { padding: 0 5px 15px; } .server-status, .sidebar-bottom, .nav-label { display: none; } .main-nav { display: flex; overflow-x: auto; margin: 0 -15px; padding: 0 15px; } .nav-item { white-space: nowrap; padding: 12px; } .nav-item em { display: none; } .main-content { padding: 0 15px 35px; } .topbar { height: 65px; } .user-pill span:not(.tiny-avatar), .breadcrumb span { display: none; } .view { padding-top: 35px; } .hero-copy { padding-top: 0; } .hero-copy h1 { font-size: 57px; } .hero-grid { min-height: auto; gap: 25px; } .hero-art { min-height: 260px; } .moon { width: 105px; height: 105px; right: 50px; } .moon:after { width: 100px; height: 100px; } .hero-actions { align-items: start; flex-direction: column; margin: 28px 0; gap: 16px; } .hero-meta { gap: 20px; flex-wrap: wrap; } .hero-meta strong { font-size: 17px; } .section-heading { align-items: start; gap: 15px; flex-direction: column; margin-top: 36px; } .news-grid { grid-template-columns: 1fr; } .news-card { min-height: 220px; } .view-heading { display: block; margin-bottom: 30px; } .view-heading h1 { font-size: 48px; } .wallet, .admin-status { margin-top: 20px; width: max-content; } .shop-toolbar { align-items: start; gap: 15px; flex-direction: column; } .filter-group { flex-wrap: wrap; } .shop-grid { grid-template-columns: 1fr; } .product-visual { height: 220px; } .admin-stats, .admin-columns { grid-template-columns: 1fr; } }
.server-logo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 5px; display: none; }
.moon.has-logo { background: transparent; box-shadow: 0 0 70px rgba(198,242,122,.18); }
.moon.has-logo:after { display: none; }
.moon.has-logo .server-logo { display: block; }
.feed-actions { display: flex; align-items: center; gap: 14px; }
.feed-status { display: flex; align-items: center; gap: 7px; color: var(--lime); font-size: 8px; letter-spacing: .1em; }
.feed-status .status-dot { width: 5px; height: 5px; }
.upload-action { cursor: pointer; }
.brand-mark { overflow: hidden; position: relative; }
.brand-mark img { display: none; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-mark.has-logo { background: transparent; }
.brand-mark.has-logo img { display: block; }
.brand-mark.has-logo svg { display: none; }
.profile-menu-wrap { position: relative; }
.profile-menu { display: none; position: absolute; z-index: 10; top: calc(100% + 12px); right: 0; min-width: 164px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.profile-menu.open { display: block; animation: reveal .2s ease both; }
.profile-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px; background: transparent; text-align: left; color: var(--muted); font-size: 10px; }
.profile-menu button:hover { color: var(--cream); background: #303731; }
.profile-menu button svg { width: 14px; color: var(--lime); }
.profile-role { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); }
.profile-role strong, .profile-role small { display: block; }
.profile-role strong { font-size: 11px; }
.profile-role small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.profile-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; }
.account-panel, .identity-panel { min-height: 300px; }
.panel-copy { color: var(--muted); font-size: 11px; line-height: 1.8; max-width: 520px; margin: 25px 0 30px; }
.account-state { color: var(--orange); font-size: 8px; letter-spacing: .12em; }
.account-state.linked { color: var(--lime); }
.account-form label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; }
.account-input { display: flex; align-items: center; border: 1px solid var(--line); background: #161a18; padding-left: 12px; }
.account-input > svg { color: var(--lime); width: 15px; }
.account-input input { min-width: 0; flex: 1; padding: 14px 10px; border: 0; outline: 0; background: transparent; color: var(--cream); font: inherit; font-size: 11px; }
.account-input input::placeholder { color: #5f685f; }
.account-input button { align-self: stretch; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--lime); color: var(--ink); font-size: 9px; }
.account-input button svg { width: 12px; }
.account-form > small { display: block; color: var(--muted); font-size: 9px; margin-top: 10px; }
.username-change-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.username-change-form label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; }
.username-change-form > small { display: block; color: var(--muted); font-size: 9px; margin-top: 10px; }
.identity-panel { text-align: center; }
.identity-panel .section-kicker { display: block; text-align: left; }
.profile-avatar { width: 68px; height: 68px; display: grid; place-items: center; margin: 26px auto 15px; background: var(--orange); color: var(--ink); font: 800 24px var(--display); }
.identity-panel h2 { font-size: 20px; }
.identity-panel > p { color: var(--muted); font-size: 9px; margin: 7px 0 27px; }
.identity-line { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: left; }
.identity-line strong { color: var(--cream); font-weight: 500; }
@media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; } .profile-role { margin-top: 20px; width: max-content; } .account-input { align-items: stretch; flex-wrap: wrap; padding-top: 4px; } .account-input input { flex-basis: calc(100% - 28px); } .account-input button { width: 100%; justify-content: center; min-height: 42px; } }
.player-card { width: 100%; border-left: 0; border-right: 0; color: var(--cream); text-align: left; }
.player-card { background: transparent; }
.player-card:hover { background: #20251f; }
.help-link { width: 100%; background: transparent; border-left: 0; border-right: 0; text-align: left; cursor: pointer; }
.avatar, .tiny-avatar, .profile-avatar { overflow: hidden; position: relative; }
.avatar .profile-picture, .tiny-avatar .profile-picture, .profile-avatar .profile-picture { display: none; width: 100%; height: 100%; object-fit: cover; }
.avatar .profile-picture.visible, .tiny-avatar .profile-picture.visible, .profile-avatar .profile-picture.visible { display: block; }
.avatar .avatar-fallback, .tiny-avatar .avatar-fallback, .profile-avatar .avatar-fallback { display: block; }
.no-picture .avatar-fallback { display: none; }
.no-picture:before { content: ''; position: absolute; z-index: 1; top: 25%; left: 35%; width: 30%; height: 30%; border-radius: 50%; background: var(--muted); box-shadow: 0 125% 0 7px var(--muted); }
.server-config { margin-bottom: 12px; }
.connection-state { color: var(--orange); font-size: 8px; letter-spacing: .1em; }
.server-form { display: grid; grid-template-columns: 1.4fr .6fr auto; align-items: end; gap: 10px; }
.server-form label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; }
.server-form input { min-width: 0; border: 1px solid var(--line); outline: 0; background: #161a18; color: var(--cream); padding: 13px 12px; font: inherit; font-size: 10px; }
.server-form input:focus { border-color: rgba(198,242,122,.55); }
.server-form .primary-button { min-height: 40px; justify-content: center; white-space: nowrap; }
.picture-upload { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-size: 9px; cursor: pointer; margin-bottom: 20px; }
.picture-upload svg { width: 13px; }
.skin-render { display: none; width: 90px; height: 124px; object-fit: contain; object-position: center bottom; margin: -4px auto 12px; image-rendering: pixelated; }
.skin-render.visible { display: block; }
.help-symbol { display: grid; place-items: center; width: 49px; height: 49px; color: var(--lime); border: 1px solid rgba(198,242,122,.25); background: rgba(198,242,122,.08); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.discord-panel h2 { font-size: 28px; margin-top: 15px; }
.discord-panel .primary-button { text-decoration: none; margin-top: 8px; }
.link-note { display: block; color: var(--muted); font-size: 8px; margin-top: 14px; }
.help-list { padding-top: 8px; }
.help-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.help-row > span { display: grid; place-items: center; width: 30px; height: 30px; background: #2a312b; color: var(--lime); }
.help-row div { flex: 1; }
.help-row strong, .help-row small { display: block; }
.help-row strong { font-size: 10px; }
.help-row small { color: var(--muted); font-size: 9px; margin-top: 5px; }
.help-row > svg { width: 13px; color: var(--muted); }
@media (max-width: 720px) { .server-form, .help-grid { grid-template-columns: 1fr; } .server-form .primary-button { width: 100%; } .help-symbol { margin-top: 20px; } }
.notification-wrap { position: relative; }
.notification-panel { display: none; position: absolute; z-index: 12; top: calc(100% + 14px); right: -8px; width: 285px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.notification-panel.open { display: block; animation: reveal .2s ease both; }
.notification-header { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); }
.notification-header strong { font: 600 14px var(--display); }
.notification-header button { background: transparent; color: var(--lime); font-size: 9px; }
.notification-list { padding: 4px 14px; }
.notification-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); opacity: .55; }
.notification-item.unread { opacity: 1; }
.notification-item > div { flex: 1; }
.notification-item strong, .notification-item small { display: block; }
.notification-item strong { font-size: 10px; }
.notification-item small { color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 4px; }
.notification-icon { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; }
.notification-icon.lime { color: var(--lime); background: rgba(198,242,122,.1); }
.notification-icon.orange { color: var(--orange); background: rgba(255,157,98,.1); }
.notification-icon.violet { color: var(--violet); background: rgba(169,154,245,.1); }
.notification-dot.hidden { display: none; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rule-card { position: relative; min-height: 218px; padding: 20px; background: var(--panel); border: 1px solid var(--line); }
.rule-card.featured-rule { background: #273023; }
.rule-card > svg { width: 22px; height: 22px; color: var(--lime); margin: 34px 0 20px; }
.rule-number { position: absolute; top: 17px; right: 18px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.rule-card h2 { font-size: 17px; letter-spacing: -.04em; }
.rule-card p { color: var(--muted); font-size: 10px; line-height: 1.7; margin-top: 10px; }
.auth-layout { display: grid; grid-template-columns: 1fr .75fr; gap: 12px; min-height: 520px; }
.auth-art { position: relative; overflow: hidden; padding: 32px; background: #273023; border: 1px solid var(--line); }
.auth-art h1 { max-width: 410px; font-size: clamp(48px, 6vw, 78px); line-height: .95; letter-spacing: -.06em; margin-top: 30px; }
.auth-art p { max-width: 360px; color: var(--muted); font-size: 11px; line-height: 1.8; margin-top: 20px; }
.auth-art-mark { position: absolute; right: 60px; bottom: 50px; display: grid; place-items: center; width: 150px; height: 150px; border: 1px solid rgba(198,242,122,.35); border-radius: 50%; color: var(--lime); }
.auth-art-mark svg { width: 58px; height: 58px; stroke-width: 1; }
.auth-art-mark { border: 0; }
.auth-volcano { position: relative; width: 120px; height: 120px; transform: scale(.52); }
.auth-person-placeholder { position: relative; width: 86px; height: 105px; color: var(--muted); }
.auth-person-placeholder span { position: absolute; top: 0; left: 25px; width: 36px; height: 36px; border-radius: 50%; background: currentColor; }
.auth-person-placeholder i { position: absolute; left: 7px; bottom: 0; width: 72px; height: 62px; border-radius: 42px 42px 14px 14px; background: currentColor; }
.auth-panel { align-self: center; padding: 28px; }
.auth-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 27px; }
.auth-tab { padding: 0 0 12px; background: transparent; color: var(--muted); font-size: 11px; border-bottom: 2px solid transparent; }
.auth-tab.active { color: var(--cream); border-color: var(--lime); }
#auth-form label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin: 16px 0 8px; }
#auth-form input { width: 100%; padding: 13px 12px; border: 1px solid var(--line); outline: 0; background: #161a18; color: var(--cream); font: inherit; font-size: 10px; }
#auth-form input:focus { border-color: rgba(198,242,122,.55); }
#auth-submit { width: 100%; justify-content: center; margin-top: 24px; }
.auth-note { color: var(--muted); text-align: center; font-size: 9px; margin-top: 18px; }
.auth-note button { background: transparent; color: var(--lime); font-size: 9px; }
.hidden { display: none !important; }
@media (max-width: 720px) { .notification-panel { position: fixed; top: 70px; left: 15px; right: 15px; width: auto; } .rules-grid, .auth-layout { grid-template-columns: 1fr; } .auth-art { min-height: 290px; } .auth-art-mark { width: 100px; height: 100px; right: 35px; bottom: 30px; } .auth-panel { padding: 22px; } }
.sidebar { background: #1b100f; }
.server-status { background: #2a1715; border-color: rgba(216,109,77,.2); }
.nav-item.active, .nav-item:hover { background: #3a211d; }
.hero-art { background: linear-gradient(142deg, #32201d 0%, #3b211c 38%, #4b2920 100%); background-image: linear-gradient(135deg, rgba(216,109,77,.08) 1px, transparent 1px), linear-gradient(45deg, rgba(216,109,77,.05) 1px, transparent 1px), linear-gradient(142deg, #32201d 0%, #3b211c 38%, #4b2920 100%); }
.moon { box-shadow: 0 0 70px rgba(216,109,77,.2); }
.mountain-back { background: #5a3025; }
.mountain-front { background: #1f1110; }
.news-card.featured, .auth-art, .featured-rule { background: #3a211d; }
.primary-button { background: var(--lime); }
.profile-menu button:hover, .quick-action > span { background: #43251f; }
.volcano { position: absolute; z-index: 1; right: 52px; bottom: 76px; width: 240px; height: 230px; }
.volcano-base { position: absolute; left: 0; bottom: 0; width: 240px; height: 135px; background: #351917; clip-path: polygon(8% 100%, 20% 62%, 38% 43%, 50% 30%, 63% 42%, 80% 61%, 94% 100%); }
.volcano-peak { position: absolute; left: 68px; bottom: 96px; width: 105px; height: 90px; background: #57251c; clip-path: polygon(0 100%, 22% 52%, 43% 0, 61% 47%, 100% 100%); }
.lava-plume { position: absolute; z-index: 2; left: 111px; bottom: 156px; width: 20px; height: 78px; background: var(--orange); clip-path: polygon(35% 100%, 0 65%, 26% 38%, 9% 0, 58% 31%, 100% 0, 78% 50%, 100% 72%, 61% 100%); filter: drop-shadow(0 0 12px rgba(217,154,99,.6)); }
.lava-flow { position: absolute; z-index: 2; left: 118px; bottom: 76px; width: 9px; height: 105px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 80% 28%, 100% 46%, 57% 66%, 70% 100%, 20% 100%, 33% 67%, 0 44%, 20% 26%); }
.product-glyph svg { width: 52px; height: 52px; stroke-width: 1.4; filter: drop-shadow(4px 4px 0 rgba(20,13,13,.35)); }
.content-editor { margin-bottom: 12px; }
.editor-form { display: grid; grid-template-columns: .8fr 1.3fr 1.8fr .7fr auto; align-items: end; gap: 10px; }
.editor-form label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.editor-form input, .editor-form select, .editor-form textarea { min-width: 0; border: 1px solid var(--line); outline: 0; background: #1c1110; color: var(--cream); padding: 12px; font: inherit; font-size: 10px; resize: vertical; }
.editor-form textarea { min-height: 42px; }
.editor-form input:focus, .editor-form select:focus, .editor-form textarea:focus { border-color: rgba(217,154,99,.65); }
.editor-form .primary-button { min-height: 40px; white-space: nowrap; }
@media (max-width: 720px) { .volcano { right: 12px; transform: scale(.75); transform-origin: bottom right; } .editor-form { grid-template-columns: 1fr; } .editor-form label { margin-bottom: -5px; } .editor-form .primary-button { width: 100%; justify-content: center; } }
.post-social { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 7px; color: var(--orange); }
.post-social:empty { display: none; }
.post-social svg { width: 12px; height: 12px; }
.product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; z-index: 2; }
.rule-image { display: block; width: 42px; height: 42px; object-fit: cover; image-rendering: pixelated; margin: 34px 0 20px; border: 1px solid rgba(228,179,94,.4); }
.news-card { animation: card-rise .55s ease both; }
.news-card:nth-child(2) { animation-delay: .08s; }
.news-card:nth-child(3) { animation-delay: .16s; }
.product-card { animation: card-rise .55s ease both; transition: transform .25s ease, border-color .25s ease; }
.product-card:nth-child(2) { animation-delay: .07s; }
.product-card:nth-child(3) { animation-delay: .14s; }
.product-card:nth-child(4) { animation-delay: .21s; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(228,179,94,.55); }
@keyframes card-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lava-pulse { 0%, 100% { transform: scaleY(1); filter: drop-shadow(0 0 10px rgba(228,179,94,.55)); } 50% { transform: scaleY(1.12); filter: drop-shadow(0 0 20px rgba(228,179,94,.85)); } }
@keyframes lava-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.lava-plume { animation: lava-pulse 2.4s ease-in-out infinite; transform-origin: bottom center; }
.lava-flow { animation: lava-drift 2.8s ease-in-out infinite; }
.hero-art { transition: background-image .45s ease; }
@media (prefers-reduced-motion: reduce) { .news-card, .product-card, .lava-plume, .lava-flow { animation: none; } }
.users-panel { margin-bottom: 12px; }
.user-search { width: 100%; padding: 12px; border: 1px solid var(--line); outline: 0; background: #1c1110; color: var(--cream); font: inherit; font-size: 10px; margin-bottom: 10px; }
.user-search:focus { border-color: rgba(228,179,94,.65); }
.user-list { border-top: 1px solid var(--line); }
.user-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.user-row-avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--orange); color: var(--ink); font: 700 12px var(--display); }
.user-row > div { flex: 1; min-width: 0; }
.user-row strong, .user-row small { display: block; }
.user-row strong { font-size: 10px; }
.user-row small { color: var(--muted); font-size: 9px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.user-role { padding: 4px 6px; font-size: 8px; letter-spacing: .1em; }
.user-role.admin { color: var(--orange); background: rgba(228,179,94,.12); }
.user-role.member { color: var(--muted); background: rgba(164,141,132,.1); }
.user-role-toggle { background: transparent; color: var(--lime); font-size: 9px; white-space: nowrap; }
.user-role-toggle:hover { color: var(--orange); }
.user-role-toggle:disabled { color: var(--muted); cursor: not-allowed; }
.empty-users { color: var(--muted); font-size: 10px; padding: 12px 0; }
.user-editor-panel, .discord-config-panel { margin-bottom: 12px; }
.user-editor-form, .discord-config-form { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 10px; }
.user-editor-form label, .discord-config-form label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.user-editor-form input, .user-editor-form select, .discord-config-form input { min-width: 0; border: 1px solid var(--line); outline: 0; background: #1c1110; color: var(--cream); padding: 12px; font: inherit; font-size: 10px; }
.user-editor-form .primary-button, .discord-config-form .primary-button { min-height: 40px; justify-content: center; white-space: nowrap; }
.discord-config-form { grid-template-columns: 1fr auto; }
@media (max-width: 720px) { .user-editor-form, .discord-config-form { grid-template-columns: 1fr; } .user-editor-form .primary-button, .discord-config-form .primary-button { width: 100%; } }
.discord-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; align-items: stretch; }
.discord-invite { padding: 28px; }
.discord-invite h2 { font-size: 28px; margin-top: 15px; }
.discord-invite .primary-button { text-decoration: none; margin-top: 8px; }
.discord-widget-wrap { min-height: 390px; background: #171011; border: 1px solid var(--line); padding: 10px; }
.discord-widget-wrap iframe { display: block; width: 100%; min-height: 350px; height: 100%; border: 0; }
.discord-widget-wrap small { display: block; color: var(--muted); font-size: 8px; padding: 8px 4px 0; }
@media (max-width: 720px) { .discord-layout { grid-template-columns: 1fr; } .discord-widget-wrap { min-height: 360px; } }
@media (max-width: 720px) { .user-row { flex-wrap: wrap; } .user-role-toggle { margin-left: 41px; } }
body { position: relative; }
.app-shell { position: relative; overflow-x: hidden; }
.app-shell:before { content: ''; position: fixed; z-index: 0; inset: 0 0 auto; height: 430px; background: linear-gradient(180deg, rgba(20,13,13,.28), var(--ink) 92%), url('watermarked_img_17059716931751293489.png') center 18% / cover no-repeat; opacity: .48; pointer-events: none; }
.sidebar, .main-content { position: relative; z-index: 1; }
.server-status.online { border-color: rgba(113,220,112,.35); }
.server-status.online .status-dot { background: #76e07a; box-shadow: 0 0 0 3px rgba(118,224,122,.16); animation: online-blink 1.35s ease-in-out infinite; }
.server-status.online b { color: #76e07a; }
@keyframes online-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(118,224,122,.16), 0 0 8px rgba(118,224,122,.45); } 50% { opacity: .45; box-shadow: 0 0 0 6px rgba(118,224,122,.04), 0 0 2px rgba(118,224,122,.15); } }