*/ .dash{ position: relative; z-index: 1; /* keep above body::before/after */ } /* Make sure the shell stays “site-like” */ .dash-shell{ max-width: 1100px; margin: 26px auto 70px; padding: 0 18px; position: relative; z-index: 2; } /* Header matches glass cards from site */ .dash-header{ display:flex; gap: 16px; align-items:center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border-radius: 22px; border: 2px solid rgba(255,255,255,.20); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); box-shadow: 0 18px 50px rgba(0,0,0,.26); backdrop-filter: blur(14px); } /* Brand */ .dash-brand{ display:flex; gap: 12px; align-items:center; } .dash-gem{ width: 48px; height: 48px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)); } .dash-title{ font-family: 'TitanOne', system-ui, sans-serif; font-size: 22px; letter-spacing: .6px; -webkit-text-stroke: 6px rgba(20, 55, 120, 0.72); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(10, 35, 85, 0.35); color: #fff; } .dash-sub{ color: rgba(246,251,255,.86); font-weight: 800; font-size: 13px; } /* Header actions */ .dash-header-actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; } .dash-link{ padding: 10px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); font-weight: 900; color: rgba(246,251,255,.95); backdrop-filter: blur(10px); transition: transform .12s ease, background .12s ease; } .dash-link:hover{ text-decoration:none; transform: translateY(-2px); background: rgba(255,255,255,.14); } .dash-btn{ border: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: rgba(246,251,255,.95); padding: 10px 14px; border-radius: 999px; font-weight: 900; cursor: pointer; backdrop-filter: blur(10px); transition: transform .12s ease, background .12s ease, filter .12s ease; } .dash-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); } .dash-btn.primary{ border: none; color: #042436; background: linear-gradient(180deg, #73f7ff 0%, #2aa7ff 55%, #1f76ff 100%); box-shadow: 0 10px 0 rgba(0,0,0,.16), 0 18px 34px rgba(0,0,0,.20); } .dash-btn.primary:hover{ filter: brightness(1.06); transform: translateY(-2px); } .dash-btn.primary:active{ transform: translateY(1px); box-shadow: 0 4px 0 rgba(0,0,0,.16); } /* Grid */ .dash-grid{ margin-top: 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 860px){ .dash-grid{ grid-template-columns: 1fr; } } /* Cards */ .dash-card{ border-radius: 22px; border: 2px solid rgba(255,255,255,.20); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(14px); padding: 18px; position: relative; overflow: hidden; } .dash-card::before{ content:""; position:absolute; inset:-20px; background: radial-gradient(900px 400px at 15% 10%, rgba(79,246,255,.18), transparent 55%); pointer-events:none; } .dash-card.wide{ grid-column: 1 / -1; } .card-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; position: relative; z-index: 1; } .card-head h2{ margin: 0; font-size: 16px; letter-spacing: -0.2px; } /* Pills */ .pill{ display:inline-flex; align-items:center; padding: 7px 10px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); font-weight: 900; font-size: 12px; color: rgba(246,251,255,.95); } .pill.subtle{ opacity: .85; border-color: rgba(255,255,255,.14); } .pill.pill-public{ border-color: rgba(115,247,255,.5); background: rgba(115,247,255,.12); color: #73f7ff; } /* Profile row */ .profile-row{ margin-top: 14px; display:flex; gap: 14px; align-items:center; position: relative; z-index: 1; } .avatar-orb{ width: 64px; height: 64px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.10) 40%), radial-gradient(circle at 70% 70%, rgba(79,246,255,.35), transparent 60%), rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.18); box-shadow: 0 14px 30px rgba(0,0,0,.22); } .profile-name{ font-weight: 1000; font-size: 18px; color: rgba(246,251,255,.98); } .profile-small{ opacity: .86; font-weight: 800; font-size: 13px; color: rgba(246,251,255,.90); } .dash-muted{ color: rgba(246,251,255,.82); opacity: .9; margin: 12px 0 0; } /* Stats */ .stats{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 1; } @media (max-width: 520px){ .stats{ grid-template-columns: 1fr; } } .stat{ padding: 14px; border-radius: 18px; border: 2px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16); display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-num{ font-family: 'TitanOne', system-ui, sans-serif; font-size: 22px; letter-spacing: .4px; color: rgba(246,251,255,.98); } .stat-label{ opacity: .86; font-weight: 800; font-size: 13px; color: rgba(246,251,255,.90); } /* Quick actions */ .quick-actions{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 1; } @media (max-width: 860px){ .quick-actions{ grid-template-columns: 1fr; } } .qa{ text-align:left; padding: 14px; border-radius: 18px; border: 2px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16); color: rgba(246,251,255,.95); cursor: not-allowed; opacity: .9; } .qa-title{ display:block; font-weight: 1000; margin-bottom: 4px; } .qa-desc{ display:block; opacity: .82; font-weight: 800; font-size: 13px; } /* Modal */ .dash-modal{ position: fixed; inset: 0; display: none; z-index: 20000; } .dash-modal.open{ display:block; } .dash-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.68); } .dash-modal-panel{ position: relative; width: min(520px, 92vw); margin: 12vh auto; padding: 16px; border-radius: 18px; border: 2px solid rgba(255,255,255,.20); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)); box-shadow: 0 24px 70px rgba(0,0,0,.45); backdrop-filter: blur(14px); color: rgba(246,251,255,.95); max-height: 80vh; overflow-y: auto; } .modal-head{ display:flex; justify-content: space-between; align-items: center; gap: 10px; } .modal-head h3{ margin: 0; } .icon-x{ border: none; background: transparent; color: transparent; font-size: 0; width: 32px; height: 32px; border-radius: 999px; background-image: url('../assets/AssetIconPack/UI/Close Button/64px/Close Button 1st 64px.png'); background-size: cover; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); flex-shrink: 0; padding: 6px 10px; cursor: pointer; } .modal-label{ display:block; margin-top: 12px; font-weight: 1000; } .modal-input{ width: 100%; margin-top: 8px; padding: 12px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.22); color: rgba(246,251,255,.95); font-weight: 900; } .modal-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; } /* ===== GOLD DISPLAY ===== */ .gold-display { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 16px; border: 2px solid rgba(255,213,106,.30); background: rgba(255,213,106,.08); position: relative; z-index: 1; } .gold-icon { font-size: 20px; flex-shrink: 0; } .gold-amount { font-family: 'TitanOne', system-ui, sans-serif; font-size: 22px; color: #ffd56a; letter-spacing: .3px; } .gold-label { font-weight: 900; font-size: 13px; color: rgba(246,251,255,.65); } /* ===== CHARACTER LIST ===== */ .char-list { margin-top: 12px; display: grid; gap: 8px; position: relative; z-index: 1; } .char-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; border: 2px solid rgba(255,255,255,.14); background: rgba(0,0,0,.14); transition: background .12s, border-color .12s; } .char-class-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); } .char-row-info { flex: 1; min-width: 0; } .char-name { font-weight: 1000; font-size: 15px; color: rgba(246,251,255,.97); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .char-class-badge { flex-shrink: 0; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--cls) 40%, transparent); background: color-mix(in srgb, var(--cls) 14%, transparent); color: var(--cls); font-weight: 900; font-size: 12px; letter-spacing: .3px; } .char-empty { padding: 22px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.08); text-align: center; } .char-empty-title { font-weight: 1000; font-size: 15px; } .char-empty-sub { opacity: .75; font-weight: 800; font-size: 13px; margin-top: 5px; } /* ===== SETTINGS PAGE LAYOUT ===== */ .settings-layout { display: flex; gap: 14px; margin-top: 16px; align-items: flex-start; } .settings-nav { width: 220px; flex-shrink: 0; border-radius: 22px; border: 2px solid rgba(255,255,255,.20); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(14px); padding: 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; } .settings-nav-user { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 16px; border-bottom: 2px solid rgba(255,255,255,.12); margin-bottom: 6px; } .settings-nav-avatar { width: 52px; height: 52px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.10) 40%), radial-gradient(circle at 70% 70%, rgba(79,246,255,.35), transparent 60%), rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.18); box-shadow: 0 14px 30px rgba(0,0,0,.22); } .settings-nav-username { font-weight: 900; font-size: 14px; color: rgba(246,251,255,.95); text-align: center; word-break: break-all; } .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 2px solid transparent; background: transparent; color: rgba(246,251,255,.70); font-weight: 900; font-size: 14px; cursor: pointer; text-align: left; width: 100%; transition: background .12s, color .12s, border-color .12s; } .settings-nav-item:hover { background: rgba(255,255,255,.08); color: rgba(246,251,255,.95); } .settings-nav-item.active { background: rgba(79,246,255,.12); border-color: rgba(79,246,255,.35); color: #4ff6ff; } .settings-nav-item.danger { color: rgba(255,150,150,.70); } .settings-nav-item.danger:hover { background: rgba(255,60,60,.10); color: #ff9090; } .settings-nav-item.danger.active { background: rgba(255,60,60,.14); border-color: rgba(255,60,60,.40); color: #ff8080; } .settings-nav-sep { height: 2px; background: rgba(255,255,255,.10); margin: 6px 0; border-radius: 99px; } .settings-nav-icon { font-size: 15px; flex-shrink: 0; } .settings-content { flex: 1; min-width: 0; border-radius: 22px; border: 2px solid rgba(255,255,255,.20); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(14px); padding: 28px; } .settings-panel { display: none; } .settings-panel.active { display: block; } .settings-panel-title { font-family: 'TitanOne', system-ui, sans-serif; font-size: 20px; color: #fff; margin: 0 0 4px; } .settings-panel-desc { color: rgba(246,251,255,.68); font-size: 13px; font-weight: 700; margin: 0 0 22px; } @media (max-width: 720px) { .settings-layout { flex-direction: column; } .settings-nav { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px; position: static; } .settings-nav-user { display: none; } .settings-nav-sep { display: none; } .settings-nav-item { flex: 1; min-width: max-content; justify-content: center; padding: 9px 12px; font-size: 13px; gap: 6px; } .settings-content { padding: 18px; } } /* ===== QUIZ MAKER ===== */ .quiz-toolbar{ margin-top: 12px; display:flex; gap: 10px; align-items:center; flex-wrap: wrap; position: relative; z-index: 1; } .quiz-search{ flex: 1; min-width: 220px; padding: 12px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.22); color: rgba(246,251,255,.95); font-weight: 900; outline: none; } .quiz-list{ margin-top: 12px; display: grid; gap: 10px; position: relative; z-index: 1; } .quiz-row{ width: 100%; text-align: left; display:flex; justify-content:space-between; gap: 12px; padding: 14px; border-radius: 18px; border: 2px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16); color: rgba(246,251,255,.95); cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .quiz-row:hover{ transform: translateY(-2px); background: rgba(0,0,0,.20); border-color: rgba(255,255,255,.24); } .quiz-row-title{ font-weight: 1000; font-size: 16px; } .quiz-row-sub{ opacity: .86; font-weight: 800; font-size: 13px; margin-top: 3px; } .quiz-row-meta{ display:flex; flex-direction: column; gap: 8px; align-items:flex-end; } .quiz-row-date{ opacity: .8; font-weight: 800; font-size: 12px; } .quiz-empty{ padding: 18px; border-radius: 18px; border: 2px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.10); text-align: center; } .quiz-empty-title{ font-weight: 1000; font-size: 16px; } .quiz-empty-sub{ opacity: .86; font-weight: 800; font-size: 13px; margin-top: 6px; } .quiz-modal{ width: min(90vw, 950px); max-height: 88vh; margin: 6vh auto; padding: 16px; overflow-y: auto; } .quiz-editor{ margin-top: 12px; display:grid; grid-template-columns: 280px 1fr; gap: 12px; max-height: calc(88vh - 180px); } @media (max-width: 1000px){ .quiz-editor{ grid-template-columns: 240px 1fr; } } @media (max-width: 800px){ .quiz-editor{ grid-template-columns: 1fr; max-height: none; } } .quiz-sidebar{ border-radius: 18px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; } .quiz-side-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .quiz-side-title{ font-weight: 1000; } .quiz-q-list{ display:grid; gap: 8px; max-height: 38vh; overflow:auto; padding-right: 4px; flex-shrink: 1; } .quiz-q-item{ display:flex; gap: 10px; align-items:center; padding: 10px 10px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(246,251,255,.95); cursor: pointer; } .quiz-q-item.active{ border-color: rgba(79,246,255,.55); background: rgba(79,246,255,.12); } .quiz-q-num{ width: 26px; height: 26px; border-radius: 999px; display:grid; place-items:center; font-weight: 1000; background: rgba(0,0,0,.22); border: 2px solid rgba(255,255,255,.16); } .quiz-q-label{ font-weight: 900; font-size: 13px; opacity:.92; } .quiz-side-foot{ margin-top: 10px; display:flex; justify-content:flex-end; } .quiz-main{ border-radius: 18px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.14); padding: 12px; } .quiz-question-head{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-top: 10px; } .quiz-q-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.22); font-weight: 1000; } .quiz-q-actions{ display:flex; gap: 10px; flex-wrap: wrap; } .quiz-textarea{ width: 100%; margin-top: 8px; padding: 12px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.22); color: rgba(246,251,255,.95); font-weight: 900; resize: vertical; outline: none; } .quiz-answers-head{ display:flex; justify-content:space-between; align-items: baseline; gap: 12px; margin-top: 14px; } .quiz-answers-title{ font-weight: 1000; } .quiz-answers-hint{ opacity: .86; font-weight: 800; font-size: 13px; } .quiz-answers{ margin-top: 10px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 700px){ .quiz-answers{ grid-template-columns: 1fr; } } .quiz-answer{ padding: 12px; border-radius: 16px; border: 2px solid rgba(255,255,255,.16); background: rgba(0,0,0,.18); display:grid; gap: 8px; } .quiz-answer input[type="text"]{ width: 100%; padding: 12px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.20); background: rgba(0,0,0,.22); color: rgba(246,251,255,.95); font-weight: 900; outline: none; } .ans-check{ display:flex; gap: 8px; align-items:center; font-weight: 900; opacity: .95; } .ans-check input{ transform: scale(1.15); } .quiz-settings{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 700px){ .quiz-settings{ grid-template-columns: 1fr; } } .quiz-actions{ margin-top: 12px; } /* --- Toast safety: never huge, never clipped --- */ .toast{ max-width: min(520px, calc(100vw - 24px)) !important; left: 12px !important; right: 12px !important; bottom: 12px !important; margin: 0 auto !important; white-space: normal !important; word-break: break-word !important; font-size: 14px !important; z-index: 9999 !important; } /* ===== QUIZ SKELETON LOADER ===== */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .quiz-skeleton { padding: 14px; border-radius: 18px; border: 2px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); display: grid; gap: 8px; } .qs-bar { height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; } .qs-bar.short { width: 55%; height: 11px; } /* quiz-row is now an tag linking to the builder */ a.quiz-row { display: flex; text-decoration: none; color: inherit; } a.quiz-row:hover { text-decoration: none; } /* Row wrapper: quiz link + Host button side by side */ .quiz-row-wrap { display: flex; align-items: center; gap: 10px; } .quiz-row-wrap a.quiz-row { flex: 1; min-width: 0; } .quiz-host-btn { flex-shrink: 0; white-space: nowrap; } /* Danger button variant */ .btn-danger { border-color: rgba(255, 80, 80, .45) !important; background: rgba(200, 40, 40, .22) !important; color: rgba(255, 180, 180, .95) !important; } .btn-danger:hover { background: rgba(200, 40, 40, .34) !important; } /* Delete account reason radio labels */ .delete-reason { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: rgba(246,251,255,.80); cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: background .15s; } .delete-reason:hover { background: rgba(255,255,255,.06); } .delete-reason input[type="radio"] { accent-color: #ff6060; width: 15px; height: 15px; flex-shrink: 0; }