/* Obsidian violet: ambient light, fine borders and cool white typography. */
:root {
  color-scheme:dark;
  --ink:#f5f3ff; --muted:#bab5cd; --line:#353045;
  --lime:#bca4ff; --blue:#c9b7ff; --paper:#09090f; --white:#14121d;
}
body {
  background:
    radial-gradient(ellipse 72% 460px at 48% -50px,#7843e638,transparent 75%),
    radial-gradient(ellipse 38% 650px at 100% 45%,#6739d415,transparent 80%),
    #09090f;
  background-attachment:fixed;
  color:var(--ink); font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6;
}
::selection { background:#9a78e9; color:#08060e; }
header { border-bottom:1px solid #b69ae51c; }
.brand { color:#f5f3ff; letter-spacing:.015em; gap:13px; }
.mark {
  width:40px; height:40px; color:#eee6ff;
  background:linear-gradient(145deg,#583686,#251831);
  border:1px solid #b58be56b;
  box-shadow:inset 0 1px #e9d1ff22,0 0 24px #9254e52b;
}
nav { color:#bab5cd; }
nav a:hover { color:#ece3ff; }
.admin-btn {
  background:#17121f; border-color:#67517f; color:#e9dfff;
  box-shadow:inset 0 1px #ffffff08;
}
.admin-btn:hover { background:#251c32; border-color:#b493df; }
h1 {
  color:#f5f3ff; letter-spacing:-.025em; line-height:1.18; text-wrap:balance;
}
h1 span {
  color:#ccadff;
  background:linear-gradient(100deg,#eee4ff,#bc95ff 55%,#a59bff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 38px #aa70ff40;
}
.intro { color:#bab5cd; font-size:17px; }
.search-card {
  position:relative; overflow:hidden; padding:24px;
  background:linear-gradient(120deg,#21172e,#15131e 62%,#1b1428);
  border:1px solid #81629f70;
  box-shadow:0 0 34px #9254e510,0 18px 50px #00000040,inset 0 1px #e5cfff14;
}
.search-card::before {
  content:""; position:absolute; height:1px; top:0; left:12%; right:12%;
  background:linear-gradient(90deg,transparent,#d4adff,transparent);
  box-shadow:0 0 14px #b276ff9c; pointer-events:none;
}
.field { background:#0f0e17; border:1px solid #655570; }
.field svg { color:#c0a9e1; }
.field input,.field select { color:#eee9fa; color-scheme:dark; font-size:16px; }
.field input::placeholder { color:#aaa3bc; opacity:1; }
.field select option { color:#eee9fa; background:#15121e; }
.field:focus-within { border-color:#bb91ff; outline:2px solid #bb91ff; outline-offset:2px; box-shadow:0 0 18px #a26bed24; }
.search-btn {
  color:#fff; background:linear-gradient(120deg,#7843d0,#5836b0);
  border:1px solid #c09cec77;
  box-shadow:0 4px 24px #8345db40,inset 0 1px #ffffff26;
  letter-spacing:.025em;
}
.search-btn:hover { background:linear-gradient(120deg,#8a50df,#6540bd); box-shadow:0 4px 32px #a066ef60; }
.hint { color:#b8b1c8; font-size:14px; }
.section-head h2 { color:#f0edf8; letter-spacing:.015em; }
.count { color:#c9bfdc; background:#18131f; border:1px solid #42344f; border-radius:999px; padding:5px 13px; }
.card {
  background:linear-gradient(145deg,#1c1726,#121018);
  border-color:#44354e;
  box-shadow:0 8px 30px #00000025,inset 0 1px #ffffff06;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover {
  border-color:#b18acb;
  box-shadow:0 0 0 1px #a677cf20,0 0 32px #9a58dc20,0 18px 40px #00000055;
}
.card h3 { color:#f5f2fc; font-size:22px; letter-spacing:0; }
.role { color:#c8c1d7; font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.meta { color:#bab1ca; border-color:#3d3148; font-size:14px; }
.meta b { color:#d3b4ff; }
.feature { background:radial-gradient(ellipse at 0% 0%,#61369440,transparent 72%),#141019; }
.feature-copy { position:relative; border-left:0; }
.feature-copy::before { content:none; }
.feature-copy h3 { color:#e9ddf8; letter-spacing:0; line-height:1.4; }
.empty,.modal-empty { background:#15111e; color:#c9bfdc; border-color:#69547e; }
footer { border-color:#362b41; color:#ada3be; font-size:14px; }
.profile-modal { background:#09090f; }
.profile-modal .modal-card {
  background:radial-gradient(ellipse 65% 500px at 85% 0%,#713ec429,transparent 80%),#0e0b14;
}
.profile-modal .modal-info h3 { color:#f4edff; text-shadow:0 0 35px #b982fa1a; }
.profile-modal .modal-info .modal-role { color:#d4c9e3; }
.modal-close { color:#f3eaff; background:#21172c; border-color:#836298; box-shadow:0 0 22px #b975ec20; }
.modal-close:hover { background:#3a2450; }
.admin-panel {
  background:linear-gradient(160deg,#241a31,#14101d 65%); color:#f5efff;
  border-color:#78588f; box-shadow:0 0 40px #9854dd18,0 24px 70px #00000099; color-scheme:dark;
}
.admin-panel h3 { color:#eee2ff; }
.admin-panel p,.upload-label,#imagePreview::before { color:#c5b7d5; font-size:14px; }
.admin-panel input:not([type=range]),.admin-panel select,.admin-panel textarea,
#editRole,#editDetails,#editorPicker,.editor-search {
  background:#100d17 !important; color:#eee6f8 !important;
  border-color:#80688f !important; color-scheme:dark;
}
.admin-panel input::placeholder,.admin-panel textarea::placeholder,#editRole::placeholder {
  color:#b6a9c4 !important; opacity:1;
}
.admin-panel input[type=file]::file-selector-button {
  background:#503465; color:#fff; border:1px solid #87629d; border-radius:7px; padding:8px 12px;
  margin-right:10px; font:inherit; cursor:pointer;
}
.admin-panel input[type=range] { accent-color:#b68ce9; }
.image-slot { background:#241b2e; border-color:#594168; }
.image-slot-label { color:#d9cbe6; font-size:14px; line-height:1.45; }
.image-slot-actions button { background:#503465; color:#fff; font-size:14px; }
.image-slot-actions button:hover:not(:disabled) { background:#6d4688; }
.image-slot-actions .set-cover { background:#cbb0f1; color:#21102f; }
.image-slot-actions .set-cover:hover:not(:disabled) { background:#e3cdff; }
.image-slot-actions .remove-image { background:#713348; color:#fff; }
.image-slot-actions button:disabled { opacity:1; background:#342b3d; color:#aea1b9; }
.add-image-button {
  background:#24192f; color:#e0c7ff; border:1px dashed #9d73bb;
  font-size:16px; font-weight:600; min-height:48px;
}
.add-image-button:hover { background:#342042; box-shadow:0 0 20px #a45eea20; }
.panel-actions button {
  background:linear-gradient(120deg,#7843d0,#5836b0); color:#fff; font-weight:600;
  box-shadow:inset 0 1px #ffffff18;
}
.panel-actions button:hover { background:#7a4bc2; }
.panel-actions button.secondary { background:#352440; color:#eee1f9; }
#deleteProfile { background:#713348; color:#fff; }
.toast { z-index:30; background:#e7d7fa; color:#20122c; border:1px solid #f5eaff; box-shadow:0 0 30px #b679ed30; }
button:focus-visible,a:focus-visible { outline:3px solid #c49bf1; outline-offset:3px; }
.admin-panel input:focus-visible,.admin-panel select:focus-visible,.admin-panel textarea:focus-visible {
  outline:3px solid #c49bf1; outline-offset:2px;
}
.admin-panel,.profile-modal,.modal-card { scrollbar-color:#755489 #17101f; }
@media(max-width:760px) {
  .brand { font-size:18px; } nav { gap:12px; }
  .search-card { padding:18px; }
  .count { font-size:14px; }
  .admin-panel { padding:16px; }
  .image-slot-actions { flex-wrap:wrap; }
  .image-slot-actions button { flex:1 1 40%; min-height:36px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; }
}