/* Crystal dashboard — dark amethyst design. Soft glass cards, violet accent, faceted-gem motif. Design tokens first; component patterns are documented at the bottom of the file. */ :root { color-scheme: dark; --bg: #0a0812; --bg-2: #0f0c1a; --surface: #13101f; --surface-2: #181428; --surface-3: #201a35; --border: #231d38; --border-strong: #342b52; --text: #efeafc; --text-2: #b9b1d6; --muted: #8379a6; --accent: #a18bff; --accent-strong: #6d4df2; --accent-soft: rgb(161 139 255 / 14%); --accent-line: rgb(161 139 255 / 48%); --gem: linear-gradient(135deg, #b9a8ff 0%, #7c5cf5 52%, #4b2fc4 100%); --success: #4ade9f; --danger: #ff6283; --warn: #fbbf24; --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px rgb(0 0 0 / 28%); font-family: Inter, "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--text); font-synthesis: none; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); line-height: 1.5; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(22px, 2.4vw, 27px); font-weight: 720; letter-spacing: -.022em; line-height: 1.2; } h2 { margin: 4px 0 0; font-size: 19px; font-weight: 680; letter-spacing: -.012em; } h3 { font-size: 16px; font-weight: 680; } a { color: var(--accent); } hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; } footer { padding: 28px 4px 8px; color: var(--muted); font-size: 12px; line-height: 1.6; } .muted { color: var(--muted); } /* ---- Ambient background: soft violet light + faint facets (decorative, no network) --------------- */ .bg-hex { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 88% -8%, rgb(124 92 245 / 20%), transparent 70%), radial-gradient(ellipse 45% 40% at -6% 108%, rgb(75 47 196 / 18%), transparent 70%), var(--bg); } .hex { position: absolute; display: block; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); background: linear-gradient(150deg, rgb(161 139 255 / 8%), rgb(161 139 255 / 1%)); } .hex-1 { width: 380px; height: 340px; right: -90px; top: 60px; } .hex-2 { width: 220px; height: 200px; right: 250px; top: 360px; opacity: .6; } .hex-3 { width: 300px; height: 270px; left: 120px; bottom: -110px; opacity: .5; } .hex-4 { width: 120px; height: 108px; left: 52%; top: 10%; opacity: .45; } .login-shell, .app-shell { position: relative; z-index: 1; } /* ---- Brand mark (cut gem) ------------------------------------------------------------------------- */ .brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .brand strong, .brand small { display: block; } .brand strong { font-size: 16px; letter-spacing: -.01em; } .brand small { color: var(--muted); margin-top: 1px; font-size: 12px; } .brand-mark { display: grid; place-items: center; width: 42px; height: 40px; flex: 0 0 42px; color: #fff; font-weight: 800; font-size: 18px; clip-path: polygon(24% 0, 76% 0, 100% 38%, 50% 100%, 0 38%); background: var(--gem); } .eyebrow { margin: 0; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .crumb { margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; } /* ---- App shell + sidebar --------------------------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; } input[type="checkbox"].nav-toggle { position: absolute; width: 1px; height: 1px; flex: none; opacity: 0; pointer-events: none; border: 0; } .nav-scrim, .menu-button { display: none; } .sidebar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 14px; height: 100vh; padding: 20px 12px 12px; background: rgb(14 11 24 / 82%); backdrop-filter: blur(18px); border-right: 1px solid var(--border); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sidebar .brand { padding: 0 8px 2px; } .switch-server { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; transition: .16s ease; } .switch-server:hover { border-color: var(--accent-line); color: #fff; background: var(--accent-soft); } .side-nav { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; } .nav-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nav-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--muted); } .nav-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .nav-search input:not([type="checkbox"]) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 9px 0 !important; font-size: 13px !important; } .nav-search input::-webkit-search-cancel-button { filter: invert(.6); } .nav-section { margin: 0; } .nav-section > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; } .nav-section > summary::-webkit-details-marker { display: none; } .nav-section > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .16s ease; opacity: .7; } .nav-section[open] > summary::after { transform: rotate(45deg); } .nav-section > summary:hover { color: var(--text-2); } .nav-empty { margin: 8px 12px; color: var(--muted); font-size: 13px; } .dashboard-tab { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 550; transition: background .15s ease, color .15s ease; } .dashboard-tab > span:not(.tab-badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-tab:hover { background: var(--surface-2); color: #fff; } .dashboard-tab.active { background: linear-gradient(90deg, rgb(124 92 245 / 24%), rgb(124 92 245 / 8%)); color: #fff; } .dashboard-tab.active .nav-icon { color: var(--accent); } .dashboard-tab.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gem); } .tab-badge { flex: 0 0 auto; color: #e6b84a; font-size: 11px; line-height: 1; opacity: .85; } .sidebar-bottom { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; } .status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgb(74 222 159 / 45%); } .status-dot::after { position: absolute; inset: -4px; border: 1px solid rgb(74 222 159 / 50%); border-radius: inherit; content: ""; animation: status-pulse 2.2s ease-out infinite; } /* The sidebar navigation only makes sense once a server is open. */ .app-shell:has(#server-panel[hidden]) .side-nav, .app-shell:has(#server-panel[hidden]) .switch-server { display: none; } /* ---- Main area ------------------------------------------------------------------------------------- */ .main-content { width: min(100%, 1180px); margin: 0 auto; padding: 28px clamp(18px, 3.5vw, 52px) 24px; min-width: 0; } .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .topbar-title { flex: 1 1 auto; min-width: 0; } .topbar-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-button { place-items: center; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; } /* ---- Buttons --------------------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 16px; color: #fff; font-size: 13px; font-weight: 650; line-height: 1.2; text-decoration: none; transition: filter .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease; } .button:hover { filter: brightness(1.1); } .button:active { transform: scale(.98); } .button.primary { background: linear-gradient(180deg, #8b6cf8, var(--accent-strong)); box-shadow: 0 6px 20px rgb(109 77 242 / 32%), 0 1px 0 rgb(255 255 255 / 18%) inset; } .button.secondary { background: var(--surface-3); border-color: var(--border-strong); } .button.secondary:hover { border-color: var(--accent-line); } .button.danger { background: #b8345a; } .button.quiet { background: transparent; color: var(--text-2); border-color: var(--border-strong); } .button.quiet:hover { color: #fff; border-color: var(--accent-line); } .button:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .5; transform: none; box-shadow: none; } .button-row { display: flex; flex-wrap: wrap; gap: 8px; } .file-button { cursor: pointer; } .mini-button { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-3); color: var(--text-2); padding: 6px 10px; font-size: 12px; font-weight: 650; transition: .15s ease; } .mini-button:hover { border-color: var(--accent-line); color: #fff; } .mini-danger { border-color: rgb(255 98 131 / 40%); background: rgb(255 98 131 / 10%); color: #ffb6c6; } .mini-success { border-color: rgb(74 222 159 / 40%); background: rgb(74 222 159 / 10%); color: #a7f3d0; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label.menu-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-toggle:focus-visible ~ .main-content .menu-button { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Surfaces ------------------------------------------------------------------------------ */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .content-grid > .panel { padding: 22px; } .member-panel { grid-column: 1 / -1; } .server-summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 26px; margin-bottom: 18px; overflow: hidden; background: linear-gradient(120deg, rgb(161 139 255 / 14%), transparent 60%), var(--surface); } .server-summary::after { content: ""; position: absolute; right: -30px; top: -34px; width: 190px; height: 210px; background: linear-gradient(150deg, rgb(161 139 255 / 16%), transparent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: none; } .server-summary h2 { font-size: 24px; margin-top: 6px; } .server-summary .muted { margin: 6px 0 0; font-size: 13px; } .server-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--bg-2); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; } .notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgb(74 222 159 / 40%); border-radius: var(--radius-sm); background: rgb(74 222 159 / 10%); color: #b8f5da; font-size: 13px; } .notice-error { border-color: rgb(255 98 131 / 45%); background: rgb(255 98 131 / 10%); color: #ffc4d1; } /* ---- Server picker (the guild list as a card grid) -------------------------------------------- */ .welcome-panel { padding: clamp(24px, 4vw, 40px); background: linear-gradient(135deg, rgb(161 139 255 / 9%), transparent 55%), var(--surface); } .picker-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .picker-head h2 { margin: 0; font-size: 24px; } .picker-head p { max-width: 560px; margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; } .picker-count { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; } .welcome-icon { display: grid; place-items: center; width: 58px; height: 64px; flex: 0 0 58px; color: #fff; font-size: 24px; clip-path: polygon(24% 0, 76% 0, 100% 38%, 50% 100%, 0 38%); background: var(--gem); } .guild-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .guild-button { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 14px; text-align: left; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); transition: border-color .16s ease, transform .16s ease, background .16s ease; } .guild-button:hover { border-color: var(--accent-line); background: var(--surface-3); transform: translateY(-2px); } .guild-button.active { border-color: var(--accent); } .guild-button::after { content: "Manage"; position: absolute; right: 14px; top: 14px; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; } .guild-avatar { display: grid; place-items: center; width: 56px; height: 62px; color: #fff; font-size: 20px; font-weight: 750; overflow: hidden; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(150deg, #3a2f66, #1f1838); } .guild-avatar img { width: 100%; height: 100%; object-fit: cover; } .guild-label { min-width: 0; padding-right: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; } .guild-label small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 450; } .sidebar-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); font-size: 14px; } /* ---- Forms --------------------------------------------------------------------------------- */ .form-stack { display: grid; gap: 12px; } .compact-form { gap: 10px; } .form-stack > label, .field label, .application-panel-channels label { display: block; color: var(--text-2); font-size: 13px; font-weight: 600; } input:not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="radio"]), select, textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); padding: 10px 12px; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } input::placeholder, textarea::placeholder { color: #6a6389; } select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; } select[multiple] { padding: 6px; background-image: none; } select[multiple] option { padding: 7px 9px; border-radius: 6px; } select[multiple] option:checked { background: var(--accent-strong) linear-gradient(0deg, var(--accent-strong), var(--accent-strong)); color: #fff; } input[type="color"] { width: 100%; height: 40px; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer; } textarea { resize: vertical; line-height: 1.55; } .field { display: grid; gap: 7px; } .optional, .hint { color: var(--muted); font-size: 12px; font-weight: 400; } .hint { line-height: 1.55; margin: -2px 0 0; } .error { min-height: 16px; margin: 0; color: #ff9db3; font-size: 13px; } .inline-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .nested-form { padding-top: 14px; border-top: 1px solid var(--border); } .search-row { display: flex; gap: 9px; } .search-row input { min-width: 0; } .field input, .field textarea { margin-top: 0; } /* Toggle rows: every checkbox is shown as a switch. */ .checkbox-row { display: flex !important; align-items: center; gap: 12px; color: var(--text-2) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4; cursor: pointer; } input[type="checkbox"] { appearance: none; position: relative; width: 38px; height: 22px; flex: 0 0 38px; margin: 0; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface-3); cursor: pointer; transition: background .18s ease, border-color .18s ease; } input[type="checkbox"]::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #aab6d3; transition: transform .18s ease, background .18s ease; } input[type="checkbox"]:checked { background: var(--accent-strong); border-color: var(--accent); } input[type="checkbox"]:checked::before { background: #fff; transform: translateX(16px); } input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .checkbox-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); } /* ---- Settings cards -------------------------------------------------------------------------- */ .dashboard-settings { margin-top: 18px; padding: 24px !important; } .settings-heading { align-items: flex-start; } .settings-heading .global-note { max-width: 320px; padding: 9px 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); color: #d3c9ff; font-size: 12px; line-height: 1.5; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .settings-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .settings-card .eyebrow { font-size: 10px; } .settings-card h3 { margin: 6px 0 16px; font-size: 18px; letter-spacing: -.01em; } .settings-card .form-stack { gap: 10px; } .settings-card .form-stack + .form-stack { margin-top: 14px; } .settings-card select[multiple] { min-height: 112px; } .ticket-card { grid-column: 1 / -1; } .slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; } .slot-button { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); font-size: 12px; transition: .15s ease; } .slot-button:hover { border-color: var(--accent-line); } .slot-button strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-button span { color: var(--muted); font-size: 11px; } .slot-button.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } .slot-button.enabled span { color: var(--success); } .reward-list, .stat-list { display: grid; gap: 8px; } .reward-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; align-items: center; } .stat-row { display: grid; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr); gap: 10px; align-items: center; } .question-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 96px 110px 84px auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); } .question-row .checkbox-row, .stat-row .checkbox-row { margin: 0; } .leaderboard-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } .leaderboard-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); font-size: 14px; } .leaderboard-list .leaderboard-score { color: var(--text-2); white-space: nowrap; } .leaderboard-list .empty { color: var(--muted); justify-content: center; } .permission-list { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; } .permission-list li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.4; } .permission-list li span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; font-size: 12px; font-weight: 800; } .permission-ok span { background: rgb(74 222 159 / 16%); color: #6ee7b7; } .permission-missing span { background: rgb(255 98 131 / 16%); color: #ff9db3; } /* ---- Applications ---------------------------------------------------------------------------- */ .applications-settings { margin-top: 0; padding: 24px !important; } .application-config-grid, .applications-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .applications-workspace { margin-top: 16px; align-items: start; } .application-panel-list, .pending-application-list { display: grid; gap: 10px; margin-top: 16px; } .application-panel-item, .pending-application-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); } .application-panel-item { display: grid; gap: 12px; } .application-panel-header, .pending-app-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .application-panel-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .application-panel-channels label { display: grid; gap: 6px; font-size: 12px; } .application-panel-channels select { min-width: 0; font-size: 12px; padding: 8px 30px 8px 10px; } .application-panel-channels button { grid-column: 1 / -1; justify-self: start; } .application-panel-item strong, .application-panel-item small, .pending-app-header strong, .pending-app-header small { display: block; } .application-panel-item strong, .pending-app-header strong { color: var(--text); font-size: 14px; } .application-panel-item small, .pending-app-header small { margin-top: 3px; color: var(--muted); font-size: 12px; } .pending-application-card { display: grid; gap: 12px; } .pending-application-card details { border-top: 1px solid var(--border); padding-top: 10px; } .pending-application-card summary { color: var(--accent); font-size: 13px; cursor: pointer; } .application-answer { margin-top: 12px; } .application-answer strong { color: var(--text-2); font-size: 13px; line-height: 1.5; } .application-answer p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .application-decision-reason { resize: vertical; } .count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; vertical-align: 2px; } .applications-workspace .panel-heading { margin-bottom: 12px; } .applications-workspace .panel-heading h3 { margin: 4px 0 0; font-size: 17px; } .applications-workspace .panel-heading > .button { padding: 7px 11px; } .applications-workspace > .panel { padding: 20px; } /* ---- Members, backups ------------------------------------------------------------------------ */ .member-results { display: grid; gap: 8px; margin-top: 14px; } .member-results > .muted { margin: 0; font-size: 14px; } .member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text-2); font-size: 14px; } .copy-id { border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 700; } .backup-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .backup-card { padding: 24px; } .backup-card h2 { margin: 8px 0 12px; } .backup-card .hint { line-height: 1.6; } .backup-card a { text-decoration: none; } .recipient-count { color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.5; } /* ---- Login ----------------------------------------------------------------------------------- */ .login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; } .login-card { position: relative; display: grid; gap: 14px; width: min(100%, 410px); padding: 36px 34px; border: 1px solid var(--border-strong); border-radius: 20px; background: rgb(20 16 36 / 92%); box-shadow: 0 30px 90px rgb(0 0 0 / 55%), 0 0 0 1px rgb(161 139 255 / 6%); backdrop-filter: blur(10px); } .login-card .brand-mark { width: 54px; height: 60px; font-size: 24px; margin-bottom: 4px; } .login-card h1 { font-size: 30px; } .login-card > .muted { margin: -6px 0 6px; font-size: 14px; line-height: 1.6; } .login-card label { color: var(--text-2); font-size: 13px; font-weight: 600; } .login-card .button { padding: 12px 16px; font-size: 14px; } /* ---- Motion ---------------------------------------------------------------------------------- */ .panel, .guild-button, .notice, .login-card { animation: rise-in .34s cubic-bezier(.2, .75, .25, 1) both; } .guild-button:nth-child(2) { animation-delay: 40ms; } .guild-button:nth-child(3) { animation-delay: 80ms; } .guild-button:nth-child(4) { animation-delay: 120ms; } @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes status-pulse { 0% { opacity: .65; transform: scale(.65); } 100% { opacity: 0; transform: scale(1.55); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ---- Responsive ------------------------------------------------------------------------------ */ @media (max-width: 1180px) { .settings-grid, .content-grid, .backup-workspace, .application-config-grid, .applications-workspace { grid-template-columns: minmax(0, 1fr); } .member-panel { grid-column: auto; } } @media (max-width: 900px) { .app-shell { display: block; } .menu-button { display: grid; } .sidebar { position: fixed; left: 0; top: 0; z-index: 30; width: min(292px, 86vw); transform: translateX(-102%); transition: transform .22s ease; background: rgb(14 11 24 / 98%); } .nav-toggle:checked ~ .sidebar { transform: translateX(0); box-shadow: 20px 0 60px rgb(0 0 0 / 55%); } .nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(3 6 14 / 62%); } .question-row { grid-template-columns: 1fr 1fr; } .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .main-content { padding: 18px 14px 20px; } .topbar { margin-bottom: 18px; } .picker-head { flex-direction: column; align-items: flex-start; } .guild-list { grid-template-columns: minmax(0, 1fr); } .server-summary { flex-direction: column; align-items: flex-start; padding: 20px; } .inline-fields, .application-panel-channels, .question-row { grid-template-columns: minmax(0, 1fr); } .application-panel-channels button { grid-column: auto; } .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid > .panel, .settings-card, .backup-card, .applications-settings { padding: 18px; } .dashboard-settings { padding: 14px !important; } .settings-heading { flex-direction: column; } .settings-heading .global-note { max-width: none; } .reward-row { grid-template-columns: 70px minmax(0, 1fr) auto; } .stat-row { grid-template-columns: minmax(0, 1fr); } .application-panel-item { align-items: flex-start; flex-direction: column; } .login-card { padding: 28px 22px; } .hex-1 { right: -190px; } } /* ---- Security tab ---- */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-2); color: var(--text-2); font-size: 12.5px; } .chip.on { border-color: rgb(74 222 159 / 45%); color: var(--success); } .chip.warn { border-color: rgb(251 191 36 / 45%); color: var(--warn); } .sec-section { margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .sec-section > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; } .sec-section > summary::-webkit-details-marker { display: none; } .sec-section > summary::after { content: "+"; float: right; color: var(--muted); } .sec-section[open] > summary::after { content: "–"; } .sec-body { display: grid; gap: 12px; padding: 4px 16px 16px; } .sec-body > .hint { margin: 0; } .sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .sec-field { display: grid; gap: 5px; align-content: start; min-width: 0; } .sec-field.wide { grid-column: 1 / -1; } .sec-field .hint { margin: 0; } .stack-list { display: grid; gap: 8px; } .stack-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); font-size: 14px; } .stack-row small { display: block; color: var(--muted); } @media (max-width: 720px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } } .pair-row, .goal-row { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; align-items: center; } .goal-row { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; } @media (max-width: 720px) { .pair-row, .goal-row { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================================================== COMPONENT PATTERNS (copy these for new pages) Page: