/* Animation palette from the supplied v11. Shared layout and behavior are unchanged. */
:root {
  --glass: rgba(255,255,255,.45);
  --glass-solid: rgba(255,255,255,.86);
  --text-main: #1e293b;
  --text-sub: #64748b;
  --line: rgba(148,163,184,.23);
  --cyan: #0ea5e9;
  --cyan-soft: rgba(14,165,233,.14);
  --orange: #f59e0b;
  --violet: #8b5cf6;
  --green: #10b981;
}

body {
  color: var(--text-main);
}

.surface-glare {
  background: radial-gradient(circle at 50% 18%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.32) 34%,transparent 67%);
}

.caustics {
  background: radial-gradient(ellipse at 25% 35%,transparent 0 18%,rgba(125,211,252,.55) 19% 20%,transparent 21% 100%),
  radial-gradient(ellipse at 72% 58%,transparent 0 20%,rgba(186,230,253,.7) 21% 22%,transparent 23% 100%);
}

.brand-mark {
  filter: drop-shadow(0 5px 10px rgba(14,165,233,.14));
}

.brand-mark img {
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

.brand-sub {
  color: #94a3b8;
}

.mode-pill {
  color: #0284c7;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(100,140,170,.08);
}

.liquid-card {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 15px 25px rgba(100,140,170,.15),inset 0 4px 6px rgba(255,255,255,.82);
}

.liquid-card::before {
  border: 2px solid rgba(255,255,255,.82);
}

.liquid-card:hover {
  background: rgba(255,255,255,.7);
}

.liquid-card.selected {
  background: rgba(255,255,255,.96);
}

.liquid-card.selected::after {
  background: radial-gradient(ellipse,rgba(14,165,233,.32) 0%,transparent 72%);
}

.app-icon {
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.05));
}

.liquid-card.selected .app-icon {
  filter: drop-shadow(0 4px 8px rgba(14,165,233,.30));
}

.card-overlay {
  background: linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 38%,rgba(15,23,42,.10) 57%,rgba(15,23,42,.58) 100%);
}

.app-name {
  color: var(--text-main);
}

.liquid-card.has-art .app-name {
  color: #fff;
  text-shadow: 0 2px 9px rgba(0,0,0,.45);
}




.splash-drop {
  background: linear-gradient(135deg,#fff,#bae6fd);
  box-shadow: 0 4px 8px rgba(14,165,233,.3);
}

.click-ring {
  border: 1.5px solid rgba(14,165,233,.34);
}

.click-ring.r2 {
  border-color: rgba(125,211,252,.28);
}

.click-ring.r3 {
  border-color: rgba(255,255,255,.8);
}

.detail-panel {
  background: var(--glass-solid);
  border: 1px solid rgba(255,255,255,1);
  color: var(--text-main);
}

.detail-panel.show {
  box-shadow: 0 30px 70px rgba(100,140,170,.17);
}

.formation-blob {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 0 34px rgba(14,165,233,.28),inset 0 0 18px rgba(255,255,255,.85);
}

.formation-blob::after {
  background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.92),transparent 34%),radial-gradient(circle at 70% 70%,rgba(125,211,252,.23),transparent 40%);
}

.condense-drop {
  background: radial-gradient(circle at 32% 28%,#fff 0 18%,#bae6fd 42%,rgba(56,189,248,.72) 70%,transparent 72%);
  box-shadow: 0 0 10px rgba(14,165,233,.28);
}

.formation-wave {
  border: 1.5px solid rgba(14,165,233,.28);
  box-shadow: 0 0 28px rgba(14,165,233,.12);
}

.detail-panel::before {
  background: linear-gradient(105deg,transparent 15%,rgba(255,255,255,.68) 43%,rgba(125,211,252,.18) 52%,transparent 72%);
}

.detail-hero {
  border-bottom: 1px solid rgba(148,163,184,.15);
}

.detail-icon {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 12px 28px rgba(100,140,170,.12);
  filter: drop-shadow(0 8px 12px rgba(14,165,233,.2));
}

.detail-desc {
  color: var(--text-sub);
}

.quick-grid {
  border-bottom: 1px solid rgba(148,163,184,.15);
}

.quick-item {
  background: rgba(255,255,255,.43);
  border: 1px solid rgba(255,255,255,.7);
}

.quick-label {
  color: #94a3b8;
}

.item-detail-card {
  background: rgba(255,255,255,.43);
  border: 1px solid rgba(255,255,255,.74);
}

.item-detail-label {
  color: #94a3b8;
}

.item-detail-value {
  color: var(--text-main);
}

.item-detail-value.empty {
  color: #94a3b8;
}

.item-detail-link {
  color: #0284c7;
}

.tab {
  border: 0;
  background: transparent;
  color: #64748b;
}

.tab.active {
  color: #0284c7;
  background: rgba(14,165,233,.10);
}

.info-card {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.78);
}

.info-label {
  color: #94a3b8;
}

.info-link {
  color: #0284c7;
}

.memo-box {
  background: linear-gradient(135deg,rgba(255,255,255,.55),rgba(239,246,255,.55));
  border: 1px solid rgba(255,255,255,.82);
  color: #475569;
}

.empty {
  color: #94a3b8;
}

.history-item {
  border-bottom: 1px dashed rgba(148,163,184,.22);
}

.history-item:last-child {
  border-bottom: 0;
}

.history-date {
  color: #94a3b8;
}

.soft-btn {
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.55);
  color: #475569;
  box-shadow: 0 5px 15px rgba(100,140,170,.06);
}

.soft-btn:hover {
  background: rgba(255,255,255,.85);
}

.modal-backdrop {
  background: rgba(226,232,240,.48);
}

.modal {
  background: rgba(255,255,255,.94);
  border: 1px solid #fff;
  box-shadow: 0 30px 80px rgba(100,140,170,.24);
}

.field label {
  color: #64748b;
}

.field input,.field textarea,.field select {
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  outline: none;
}

.field input:focus,.field textarea:focus,.field select:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 3px rgba(14,165,233,.08);
}

.primary {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

.mode-pill {
  outline: none;
}

.mode-pill:hover {
  box-shadow: 0 10px 28px rgba(100,140,170,.13);
}

.mode-dot {
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56,189,248,.35);
}

body[data-theme="dark"] {
  --glass: rgba(15,23,42,.4);
  --glass-solid: rgba(15,23,42,.86);
  --text-main: #f8fafc;
  --text-sub: #94a3b8;
  --line: rgba(255,255,255,.08);
  --cyan: #00f0ff;
  --cyan-soft: rgba(0,240,255,.1);
  color: var(--text-main);
}

body[data-theme="dark"] .surface-glare {
  background: radial-gradient(circle at 50% 20%,rgba(0,240,255,.055) 0%,rgba(20,50,75,.025) 35%,transparent 72%);
}

body[data-theme="dark"] .brand-title {
  color: #f8fafc;
}

body[data-theme="dark"] .brand-sub {
  color: #64748b;
}

body[data-theme="dark"] .mode-pill {
  color: #67e8f9;
  background: rgba(15,23,42,.48);
  border-color: rgba(0,240,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.22),inset 0 0 16px rgba(0,240,255,.03);
}

body[data-theme="dark"] .mode-dot {
  background: #00f0ff;
  box-shadow: 0 0 9px #00f0ff,0 0 18px rgba(0,240,255,.5);
}

body[data-theme="dark"] .liquid-card {
  background: rgba(15,23,42,.4);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 15px 25px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.05);
}

body[data-theme="dark"] .liquid-card::before {
  border: 1.5px solid #00f0ff;
  box-shadow: 0 0 15px rgba(0,240,255,.3);
}

body[data-theme="dark"] .liquid-card:hover {
  background: rgba(30,41,59,.6);
  border-color: rgba(0,240,255,.3);
}

body[data-theme="dark"] .liquid-card.selected {
  background: rgba(15,23,42,.9);
}

body[data-theme="dark"] .liquid-card.selected::after {
  background: radial-gradient(ellipse,rgba(0,240,255,.5) 0%,transparent 70%);
}

body[data-theme="dark"] .app-icon {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
}

body[data-theme="dark"] .liquid-card.selected .app-icon {
  filter: drop-shadow(0 0 10px rgba(0,240,255,.4));
}

body[data-theme="dark"] .app-name {
  color: #f8fafc;
}

body[data-theme="dark"] .liquid-card.has-art .app-name {
  color: #fff;
}

body[data-theme="dark"] .card-overlay {
  background: linear-gradient(180deg,rgba(0,240,255,.03) 0%,rgba(2,6,23,0) 32%,rgba(2,6,23,.15) 54%,rgba(2,6,23,.72) 100%);
}

body[data-theme="dark"] .new-card {
  background: rgba(15,23,42,.22);
  border-color: rgba(255,255,255,.20);
}

body[data-theme="dark"] .new-card .app-icon,body[data-theme="dark"] .new-card .app-name {
  color: #64748b;
}

body[data-theme="dark"] .splash-drop {
  background: #00f0ff;
  box-shadow: 0 0 12px #00f0ff,0 0 20px rgba(0,240,255,.5);
}

body[data-theme="dark"] .click-ring {
  border-color: rgba(0,240,255,.46);
  box-shadow: 0 0 12px rgba(0,240,255,.18);
}

body[data-theme="dark"] .click-ring.r2 {
  border-color: rgba(0,240,255,.28);
}

body[data-theme="dark"] .click-ring.r3 {
  border-color: rgba(148,163,184,.18);
}

body[data-theme="dark"] .detail-panel {
  background: rgba(15,23,42,.86);
  border-color: rgba(255,255,255,.08);
}

body[data-theme="dark"] .detail-panel.show {
  box-shadow: 0 30px 70px rgba(0,0,0,.58);
}

body[data-theme="dark"] .formation-blob {
  background: rgba(10,19,32,.78);
  border-color: rgba(0,240,255,.5);
  box-shadow: 0 0 34px rgba(0,240,255,.32),0 0 70px rgba(0,240,255,.09),inset 0 0 22px rgba(0,240,255,.13);
}

body[data-theme="dark"] .formation-blob::after {
  background: radial-gradient(circle at 35% 25%,rgba(0,240,255,.26),transparent 30%),radial-gradient(circle at 72% 72%,rgba(255,42,109,.13),transparent 38%);
}

body[data-theme="dark"] .condense-drop {
  background: #00f0ff;
  box-shadow: 0 0 10px #00f0ff,0 0 22px rgba(0,240,255,.58);
}

body[data-theme="dark"] .formation-wave {
  border-color: rgba(0,240,255,.5);
  box-shadow: 0 0 24px rgba(0,240,255,.23);
}

body[data-theme="dark"] .detail-panel::before {
  background: linear-gradient(105deg,transparent 10%,rgba(0,240,255,.04) 34%,rgba(0,240,255,.38) 48%,rgba(255,255,255,.1) 54%,transparent 70%);
}

body[data-theme="dark"] .detail-hero,body[data-theme="dark"] .quick-grid {
  border-color: rgba(255,255,255,.07);
}

body[data-theme="dark"] .detail-icon {
  background: rgba(15,23,42,.58);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  filter: drop-shadow(0 0 15px rgba(0,240,255,.20));
}

body[data-theme="dark"] .detail-title {
  color: #f8fafc;
}

body[data-theme="dark"] .detail-desc {
  color: #94a3b8;
}

body[data-theme="dark"] .quick-item,body[data-theme="dark"] .info-card {
  background: rgba(30,41,59,.34);
  border-color: rgba(255,255,255,.075);
}

body[data-theme="dark"] .item-detail-card {
  background: rgba(30,41,59,.34);
  border-color: rgba(255,255,255,.075);
}

body[data-theme="dark"] .item-detail-label {
  color: #64748b;
}

body[data-theme="dark"] .item-detail-value {
  color: #e2e8f0;
}

body[data-theme="dark"] .item-detail-value.empty {
  color: #64748b;
}

body[data-theme="dark"] .item-detail-link {
  color: #67e8f9;
}

body[data-theme="dark"] .quick-label,body[data-theme="dark"] .info-label,body[data-theme="dark"] .history-date {
  color: #64748b;
}

body[data-theme="dark"] .quick-value,body[data-theme="dark"] .info-value,body[data-theme="dark"] .history-text {
  color: #e2e8f0;
}

body[data-theme="dark"] .tab {
  color: #64748b;
}

body[data-theme="dark"] .tab.active {
  color: #67e8f9;
  background: rgba(0,240,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,.08);
}

body[data-theme="dark"] .info-link {
  color: #67e8f9;
}

body[data-theme="dark"] .memo-box {
  background: linear-gradient(135deg,rgba(30,41,59,.43),rgba(8,15,28,.5));
  border-color: rgba(255,255,255,.075);
  color: #cbd5e1;
}

body[data-theme="dark"] .empty {
  color: #64748b;
}

body[data-theme="dark"] .history-item {
  border-color: rgba(148,163,184,.12);
}

body[data-theme="dark"] .soft-btn {
  color: #cbd5e1;
  background: rgba(30,41,59,.46);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 5px 15px rgba(0,0,0,.14);
}

body[data-theme="dark"] .soft-btn:hover {
  background: rgba(51,65,85,.7);
}

body[data-theme="dark"] .modal-backdrop {
  background: rgba(2,6,23,.58);
}

body[data-theme="dark"] .modal {
  background: rgba(15,23,42,.96);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.64);
}

body[data-theme="dark"] .modal h3 {
  color: #f8fafc;
}

body[data-theme="dark"] .field label {
  color: #94a3b8;
}

body[data-theme="dark"] .field input,body[data-theme="dark"] .field textarea,body[data-theme="dark"] .field select {
  color: #e2e8f0;
  background: #111827;
  border-color: #263244;
}

body[data-theme="dark"] .field input:focus,body[data-theme="dark"] .field textarea:focus,body[data-theme="dark"] .field select:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 0 3px rgba(0,240,255,.07);
}

body[data-theme="dark"] .primary {
  background: #00c8d4;
  color: #041014;
  border-color: #00e6f3;
}

.image-preview {
  border: 1px solid #d9e2ec;
  background: #f8fafc;
  color: #94a3b8;
}

.image-note {
  color: #94a3b8;
}

.danger-lite {
  color: #ef4444;
}

body[data-theme="dark"] .image-preview {
  background: #111827;
  border-color: #263244;
  color: #64748b;
}



@media (max-width:600px) {
  .waterline::before {
    background: radial-gradient(ellipse at 12% 45%,rgba(255,255,255,.90) 0 2%,transparent 3% 100%),
      radial-gradient(ellipse at 35% 55%,rgba(186,230,253,.75) 0 3%,transparent 4% 100%),
      radial-gradient(ellipse at 62% 40%,rgba(255,255,255,.82) 0 2.5%,transparent 3.5% 100%),
      radial-gradient(ellipse at 86% 56%,rgba(125,211,252,.62) 0 3%,transparent 4% 100%);
}

  .waterline::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.82) 12%,
      rgba(56,189,248,.42) 31%,
      rgba(255,255,255,.92) 51%,
      rgba(14,165,233,.34) 73%,
      rgba(255,255,255,.72) 90%,
      transparent
    );
    box-shadow: 0 -3px 9px rgba(255,255,255,.34),
      0 3px 12px rgba(56,189,248,.17);
}

  .waterline-glint {
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(224,242,254,.09) 35%,
      rgba(125,211,252,.12) 58%,
      rgba(255,255,255,.05) 72%,
      transparent
    );
}

  body[data-theme="dark"] .waterline::before {
    background: radial-gradient(ellipse at 12% 45%,rgba(0,240,255,.58) 0 2%,transparent 3% 100%),
      radial-gradient(ellipse at 35% 55%,rgba(103,232,249,.35) 0 3%,transparent 4% 100%),
      radial-gradient(ellipse at 62% 40%,rgba(0,240,255,.52) 0 2.5%,transparent 3.5% 100%),
      radial-gradient(ellipse at 86% 56%,rgba(148,163,184,.24) 0 3%,transparent 4% 100%);
}

  body[data-theme="dark"] .waterline::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0,240,255,.25) 11%,
      rgba(0,240,255,.74) 31%,
      rgba(103,232,249,.92) 51%,
      rgba(0,240,255,.52) 72%,
      rgba(148,163,184,.23) 91%,
      transparent
    );
    box-shadow: 0 0 9px rgba(0,240,255,.34),
      0 5px 17px rgba(0,240,255,.13);
}

  body[data-theme="dark"] .waterline-glint {
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(0,240,255,.035) 30%,
      rgba(0,240,255,.085) 58%,
      rgba(15,23,42,.05) 76%,
      transparent
    );
}
}


@media (min-width:601px) {
  .waterline::before {
    background: radial-gradient(ellipse at 9% 48%,rgba(255,255,255,.92) 0 2%,transparent 3% 100%),
      radial-gradient(ellipse at 24% 56%,rgba(191,219,254,.56) 0 2.7%,transparent 3.8% 100%),
      radial-gradient(ellipse at 43% 45%,rgba(255,255,255,.84) 0 2.2%,transparent 3.4% 100%),
      radial-gradient(ellipse at 61% 58%,rgba(125,211,252,.58) 0 2.7%,transparent 4% 100%),
      radial-gradient(ellipse at 79% 43%,rgba(255,255,255,.86) 0 2.1%,transparent 3.2% 100%),
      radial-gradient(ellipse at 92% 57%,rgba(186,230,253,.58) 0 2.8%,transparent 4.1% 100%);
}

  .waterline::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.84) 9%,
      rgba(125,211,252,.34) 28%,
      rgba(255,255,255,.95) 49%,
      rgba(56,189,248,.30) 70%,
      rgba(255,255,255,.78) 90%,
      transparent
    );
    box-shadow: 0 -4px 10px rgba(255,255,255,.28),
      0 4px 14px rgba(56,189,248,.13);
}

  .waterline-glint {
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(224,242,254,.07) 34%,
      rgba(125,211,252,.11) 56%,
      rgba(255,255,255,.04) 72%,
      transparent
    );
}

  body[data-theme="dark"] .waterline::before {
    background: radial-gradient(ellipse at 9% 48%,rgba(0,240,255,.52) 0 2%,transparent 3% 100%),
      radial-gradient(ellipse at 24% 56%,rgba(103,232,249,.28) 0 2.7%,transparent 3.8% 100%),
      radial-gradient(ellipse at 43% 45%,rgba(0,240,255,.48) 0 2.2%,transparent 3.4% 100%),
      radial-gradient(ellipse at 61% 58%,rgba(34,211,238,.36) 0 2.7%,transparent 4% 100%),
      radial-gradient(ellipse at 79% 43%,rgba(0,240,255,.44) 0 2.1%,transparent 3.2% 100%),
      radial-gradient(ellipse at 92% 57%,rgba(148,163,184,.18) 0 2.8%,transparent 4.1% 100%);
}

  body[data-theme="dark"] .waterline::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0,240,255,.22) 10%,
      rgba(0,240,255,.62) 29%,
      rgba(103,232,249,.94) 50%,
      rgba(0,240,255,.48) 71%,
      rgba(148,163,184,.18) 90%,
      transparent
    );
    box-shadow: 0 0 10px rgba(0,240,255,.32),0 5px 18px rgba(0,240,255,.12);
}

  body[data-theme="dark"] .waterline-glint {
    background: linear-gradient(to bottom,transparent,rgba(0,240,255,.03) 30%,rgba(0,240,255,.075) 57%,rgba(15,23,42,.05) 77%,transparent);
}
}


@supports (padding: env(safe-area-inset-top)) {

}

@media (display-mode: standalone) {
  .page-art::before {
    background: linear-gradient(120deg,#fdfbfb 0%,#ebedee 52%,#eff6ff 100%);
    background-size: 220% 220%;
}

  body[data-theme="dark"] .page-art::before {
    background: radial-gradient(circle at 50% 22%,rgba(0,240,255,.055) 0%,rgba(20,50,75,.022) 34%,transparent 70%),
      linear-gradient(180deg,#020812 0%,#071522 56%,#05111e 100%);
    background-size: 100% 100%, 100% 100%;
}

  .page-art::after {
    background: linear-gradient(180deg,rgba(239,246,255,.0) 0%,rgba(239,246,255,.92) 68%,#eef2f7 100%);
}

  body[data-theme="dark"] .page-art::after {
    background: linear-gradient(180deg,rgba(7,21,34,0) 0%,rgba(7,21,34,.92) 68%,#071522 100%);
}
}


@media (display-mode: standalone) and (max-width:600px) {
  .detail-panel {
    border-bottom: 0;
}
}

@media (display-mode: standalone) and (min-width:601px) {
  .detail-panel {
    border-bottom: 0;
}
}

.count-pill,.search-toggle,.search-submit {
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.62);
  color: #475569;
  box-shadow: 0 8px 24px rgba(100,140,170,.09);
}

.search-toggle {
  color: #0284c7;
}

.search-toggle.active {
  background: rgba(224,242,254,.94);
  box-shadow: 0 0 0 1px rgba(14,165,233,.12),0 10px 30px rgba(14,165,233,.15);
}

.search-drawer {
  border: 1px solid transparent;
  background: rgba(255,255,255,.5);
}

.search-drawer.open {
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(100,140,170,.08);
}

.search-copy {
  color: #7c8ca1;
}

.search-box {
  background: rgba(255,255,255,.78);
  border: 1px solid #e4edf5;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}

.search-box-icon {
  color: #60a5fa;
}

.search-box input {
  border: 0!important;
  outline: 0!important;
  background: transparent!important;
  box-shadow: none!important;
  color: #334155;
}

.search-box input::placeholder {
  color: #a7b3c2;
}

.search-submit {
  color: #0284c7;
}

.search-result-line {
  color: #94a3b8;
}

.search-empty {
  color: #94a3b8;
}






.detail-icon.is-zoomable::after {
  color: #fff;
  background: rgba(15,23,42,.45);
  border: 1px solid rgba(255,255,255,.6);
}

.viewer-backdrop {
  background: rgba(226,238,248,.28);
}

.viewer-stage {
  background: linear-gradient(145deg,rgba(255,255,255,.9),rgba(232,246,255,.72));
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 28px 90px rgba(25,90,130,.26),0 0 55px rgba(56,189,248,.18),inset 0 0 28px rgba(255,255,255,.75);
}


.viewer-stage::after {
  background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.62) 43%,rgba(125,211,252,.15) 51%,transparent 72%);
}

.viewer-caption {
  background: rgba(15,23,42,.48);
  color: #fff;
}

.viewer-scan {
  background: linear-gradient(90deg,transparent,rgba(56,189,248,.18),rgba(255,255,255,.92),rgba(56,189,248,.18),transparent);
  box-shadow: 0 0 16px rgba(56,189,248,.4);
}

.viewer-close {
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.72);
  color: #334155;
  box-shadow: 0 10px 30px rgba(25,90,130,.18);
}

.viewer-orbit {
  border: 1px solid rgba(56,189,248,.28);
  box-shadow: 0 0 30px rgba(56,189,248,.12);
}

.viewer-orbit.orbit-b {
  border-color: rgba(99,102,241,.16);
}



.theme-switch {
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 5px 16px rgba(100,140,170,.05);
}

.theme-choice {
  border: 0;
  background: transparent;
  color: #7c8ca1;
}

.theme-choice.active {
  color: #0284c7;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 12px rgba(14,165,233,.10);
}

body[data-theme="dark"] .theme-switch {
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}



.image-preview.is-zoomable::after {
  color: #fff;
  background: rgba(15,23,42,.45);
  border: 1px solid rgba(255,255,255,.62);
}

body[data-theme="dark"] .image-viewer .viewer-backdrop {
  background: rgba(2,8,18,.44);
}

body[data-theme="dark"] .viewer-stage {
  background: linear-gradient(145deg,rgba(8,18,32,.96),rgba(9,28,45,.88));
  border-color: rgba(103,232,249,.20);
  box-shadow: 0 30px 100px rgba(0,0,0,.62),0 0 65px rgba(0,240,255,.14),inset 0 0 30px rgba(0,240,255,.05);
}

body[data-theme="dark"] .viewer-close {
  background: rgba(15,23,42,.76);
  color: #e2e8f0;
  border-color: rgba(103,232,249,.18);
  box-shadow: 0 10px 32px rgba(0,0,0,.42);
}


.settings-toggle {
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.62);
  color: #0284c7;
  box-shadow: 0 8px 24px rgba(100,140,170,.09);
}

.settings-toggle.active {
  background: rgba(224,242,254,.94);
  box-shadow: 0 0 0 1px rgba(14,165,233,.12),0 10px 30px rgba(14,165,233,.15);
}

.settings-drawer {
  border: 1px solid transparent;
  background: rgba(255,255,255,.53);
}

.settings-drawer.open {
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(100,140,170,.08);
}

.settings-heading {
  color: #334155;
}

.settings-copy {
  color: #7c8ca1;
}

.settings-title-field>span,.settings-label {
  color: #718096;
}

.settings-title-field input {
  border: 1px solid #e4edf5;
  background: rgba(255,255,255,.82);
  color: #334155;
  outline: none;
}

.settings-title-field input:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 3px rgba(14,165,233,.08);
}

.settings-save {
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.72);
  color: #0284c7;
  box-shadow: 0 7px 20px rgba(100,140,170,.08);
}

.settings-status {
  color: #0ea5e9;
}

.viewer-stage::before {
  background: radial-gradient(circle at 50% 40%,rgba(255,255,255,.16),transparent 68%)!important;
}

body[data-theme="dark"] .count-pill,
body[data-theme="dark"] .search-toggle,
body[data-theme="dark"] .settings-toggle {
  color: #9af6ff;
  background: linear-gradient(145deg,rgba(7,30,48,.88),rgba(8,22,38,.72));
  border-color: rgba(103,232,249,.34);
  box-shadow: 0 0 0 1px rgba(0,240,255,.04),0 10px 28px rgba(0,0,0,.26),inset 0 0 18px rgba(0,240,255,.045);
  text-shadow: 0 0 12px rgba(0,240,255,.22);
}

body[data-theme="dark"] .count-pill {
  color: #d8fbff;
}

body[data-theme="dark"] .search-toggle.active,
body[data-theme="dark"] .settings-toggle.active {
  color: #e8feff;
  background: linear-gradient(145deg,rgba(0,104,125,.42),rgba(6,37,55,.92));
  border-color: rgba(0,240,255,.62);
  box-shadow: 0 0 18px rgba(0,240,255,.18),inset 0 0 20px rgba(0,240,255,.08);
}

body[data-theme="dark"] .search-drawer,
body[data-theme="dark"] .settings-drawer,
body[data-theme="dark"] .sort-drawer {
  background: linear-gradient(145deg,rgba(5,24,40,.91),rgba(8,18,33,.88));
  border-color: rgba(103,232,249,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.28),inset 0 0 28px rgba(0,240,255,.025);
}

body[data-theme="dark"] .search-copy,
body[data-theme="dark"] .settings-copy,
body[data-theme="dark"] .settings-label,
body[data-theme="dark"] .settings-title-field>span,
body[data-theme="dark"] .search-result-line {
  color: #7ba6b7;
}

body[data-theme="dark"] .settings-heading {
  color: #d8fbff;
}

body[data-theme="dark"] .search-box,
body[data-theme="dark"] .settings-title-field input {
  background: rgba(5,20,35,.78)!important;
  border-color: rgba(103,232,249,.17)!important;
  color: #e6fbff!important;
  box-shadow: inset 0 0 16px rgba(0,240,255,.025)!important;
}

body[data-theme="dark"] .search-box input {
  color: #e6fbff!important;
}

body[data-theme="dark"] .search-box input::placeholder,
body[data-theme="dark"] .settings-title-field input::placeholder {
  color: #557487;
}


body[data-theme="dark"] .theme-switch {
  background: rgba(4,28,44,.74);
  border-color: rgba(103,232,249,.14);
}

body[data-theme="dark"] .theme-choice {
  color: #6e9aac;
}

body[data-theme="dark"] .theme-choice.active {
  color: #d9fdff;
  background: rgba(0,240,255,.11);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,.19),0 0 15px rgba(0,240,255,.08);
}

body[data-theme="dark"] .settings-status {
  color: #67e8f9;
}


.liquid-card.selected {
  border-color: rgba(56,189,248,.82)!important;
  box-shadow: 0 0 0 2px rgba(56,189,248,.12),0 14px 28px rgba(100,140,170,.18),inset 0 2px 8px rgba(255,255,255,.8)!important;
}

body[data-theme="dark"] .liquid-card.selected {
  border-color: #00f0ff!important;
  box-shadow: 0 0 0 1px rgba(0,240,255,.18),0 0 22px rgba(0,240,255,.18),0 15px 28px rgba(0,0,0,.48)!important;
}


.waterline::before {
  box-shadow: none!important;
}

.waterline::after {
  box-shadow: none!important;
}


.settings-backup-block {
  border-top: 1px solid rgba(148,163,184,.16);
}


body[data-theme="dark"] .settings-backup-block {
  border-top-color: rgba(255,255,255,.08);
}



#deleteBtn {
  color: #0f6f8f!important;
  background: rgba(224,247,255,.78)!important;
  border-color: rgba(14,165,233,.24)!important;
  box-shadow: none!important;
}

#deleteBtn:hover {
  background: rgba(207,241,252,.95)!important;
}

body[data-theme="dark"] #deleteBtn {
  color: #fb7185!important;
  background: rgba(251,113,133,.10)!important;
  border-color: rgba(251,113,133,.26)!important;
}

body[data-theme="dark"] #deleteBtn:hover {
  background: rgba(251,113,133,.16)!important;
}



.sort-toggle {
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.50);
  color: var(--ss-accent-text);
  box-shadow: 0 5px 14px rgba(70,100,120,.06);
}


.sort-drawer {
  border: 1px solid transparent;
  background: rgba(255,255,255,.53);
}

.sort-drawer.open {
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(100,140,170,.08);
}

.sort-heading {
  color: var(--ss-sort-text);
}

.sort-copy {
  color: var(--ss-sort-muted);
}

.sort-choice {
  border: 1px solid var(--ss-accent-border);
}


.manual-reorder-wrap {
  border-top: 1px solid var(--ss-accent-border);
}

.manual-reorder-note {
  color: var(--ss-sort-muted);
}

.manual-reorder-item {
  border: 1px solid var(--ss-accent-border);
}

.manual-reorder-name {
  color: var(--ss-sort-text);
}

.manual-move-btn {
  border: 1px solid var(--ss-accent-border);
}

body[data-theme="dark"] .sort-toggle {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
  color: var(--ss-accent-text);
}






.sort-toggle .sort-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-tools .ui-icon,.search-box-icon .ui-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-toggle .ui-icon {
  stroke-width: 1.75;
}

.manual-move-btn .move-icon {
  fill: none!important;
  stroke: currentColor!important;
  stroke-width: 2.15!important;
  stroke-linecap: round!important;
  stroke-linejoin: round!important;
}

.search-submit,.settings-save {
  box-shadow: 0 8px 20px rgba(35,35,35,.07)!important;
}

body[data-theme="dark"] .search-submit,
body[data-theme="dark"] .settings-save {
  color: var(--ss-accent-text)!important;
  background: var(--ss-accent-soft)!important;
  border-color: var(--ss-accent-border)!important;
  box-shadow: 0 8px 20px rgba(0,0,0,.20)!important;
}




.brand-sub,.search-copy,.settings-copy,.settings-backup-copy,.settings-label,.settings-title-field>span,.field label,.image-note,.detail-desc,.quick-label,.info-label,.history-date,.item-detail-label,.empty,.search-result-line,.sort-copy,.manual-reorder-note {
  color: #64748b!important;
}

body[data-theme="dark"] .brand-sub,body[data-theme="dark"] .search-copy,body[data-theme="dark"] .settings-copy,body[data-theme="dark"] .settings-backup-copy,body[data-theme="dark"] .settings-label,body[data-theme="dark"] .settings-title-field>span,body[data-theme="dark"] .field label,body[data-theme="dark"] .image-note,body[data-theme="dark"] .detail-desc,body[data-theme="dark"] .quick-label,body[data-theme="dark"] .info-label,body[data-theme="dark"] .history-date,body[data-theme="dark"] .item-detail-label,body[data-theme="dark"] .empty,body[data-theme="dark"] .search-result-line,body[data-theme="dark"] .sort-copy,body[data-theme="dark"] .manual-reorder-note {
  color: #9fb0c2!important;
}

:root {
  --ss-accent: #0ea5e9!important;
  --ss-accent-soft: rgba(14,165,233,.10)!important;
  --ss-accent-border: rgba(14,165,233,.24)!important;
  --ss-accent-text: #0f6f8f!important;
  --ss-accent-contrast: #fff!important;
  --ss-sort-surface: rgba(255,255,255,.94)!important;
  --ss-sort-border: rgba(14,165,233,.16)!important;
  --ss-sort-text: #334155!important;
  --ss-sort-muted: #64748b!important;
}

body[data-theme="dark"] {
  --ss-accent: #00d9e8!important;
  --ss-accent-soft: rgba(0,217,232,.10)!important;
  --ss-accent-border: rgba(0,217,232,.25)!important;
  --ss-accent-text: #a5f7ff!important;
  --ss-accent-contrast: #06151b!important;
  --ss-sort-surface: rgba(9,25,38,.97)!important;
  --ss-sort-border: rgba(0,217,232,.18)!important;
  --ss-sort-text: #d7f7fa!important;
  --ss-sort-muted: #9fb0c2!important;
}

.sort-heading,.manual-reorder-name {
  color: var(--ss-sort-text)!important;
}

.sort-copy,.manual-reorder-note {
  color: var(--ss-sort-muted)!important;
}

.sort-choice {
  color: var(--ss-accent-text)!important;
  background: var(--ss-accent-soft)!important;
  border-color: var(--ss-accent-border)!important;
}

.sort-choice.active {
  color: var(--ss-accent-contrast)!important;
  background: var(--ss-accent)!important;
  border-color: var(--ss-accent)!important;
}

.manual-reorder-wrap {
  border-top-color: var(--ss-accent-border)!important;
}

.manual-reorder-item {
  background: var(--ss-accent-soft)!important;
  border-color: var(--ss-accent-border)!important;
}

.manual-move-btn {
  background: var(--ss-sort-surface)!important;
  color: var(--ss-accent-text)!important;
  border-color: var(--ss-accent-border)!important;
}

.settings-backup-copy {
  color: #64748b!important;
}

body[data-theme="dark"] .settings-backup-copy {
  color: #9fb0c2!important;
}

.search-submit,.settings-save {
  color: var(--ss-accent-text)!important;
  border-color: var(--ss-accent-border)!important;
  background: var(--ss-accent-soft)!important;
}

body[data-theme="dark"] .search-submit,body[data-theme="dark"] .settings-save {
  color: var(--ss-accent-text)!important;
  border-color: var(--ss-accent-border)!important;
  background: var(--ss-accent-soft)!important;
}











.rating-star-btn {
  border: 0;
  background: transparent;
  color: color-mix(in srgb,var(--selshelf-rating-accent) 26%,transparent);
}

.rating-star-btn.active {
  color: var(--selshelf-rating-accent);
  text-shadow: 0 3px 12px color-mix(in srgb,var(--selshelf-rating-accent) 28%,transparent);
}

.rating-star-btn:focus-visible {
  outline: 2px solid var(--selshelf-rating-accent);
}

.rating-reset-btn {
  border: 1px solid color-mix(in srgb,var(--selshelf-rating-accent) 30%,transparent);
  background: color-mix(in srgb,var(--selshelf-rating-accent) 8%,transparent);
  color: inherit;
}

.rating-caption {
  color: var(--text-sub);
}

.rating-display {
  color: var(--selshelf-rating-accent);
}


.sort-toggle.active,.sort-toggle[aria-expanded="true"] {
  color: #fff!important;
  background: var(--selshelf-final-active-bg)!important;
  border-color: var(--selshelf-final-active-border)!important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22)!important;
}

.sort-toggle.active .ui-icon,.sort-toggle[aria-expanded="true"] .ui-icon,.sort-toggle.active .sort-icon,.sort-toggle[aria-expanded="true"] .sort-icon {
  color: #fff!important;
  stroke: #fff!important;
}

:root {
  --ss-top: #eaf7fb;
  --ss-top-rgb: 234,247,251;
}

html[data-theme="dark"] {
  --ss-top: #090b14;
  --ss-top-rgb: 9,11,20;
}

html {
  --ss-canvas-image: linear-gradient(to bottom,
      var(--ss-top) 0,
      var(--ss-top) 64px,
      rgba(var(--ss-top-rgb),.92) 92px,
      rgba(var(--ss-top-rgb),.36) 168px,
      rgba(var(--ss-top-rgb),0) 245px),
    radial-gradient(circle at 48% 19%,rgba(186,230,253,.56) 0%,rgba(224,242,254,.32) 34%,transparent 69%),
    linear-gradient(120deg,#eaf7fb 0%,#f7fbfd 47%,#eef6ff 100%);
}

html[data-theme="dark"] {
  --ss-canvas-image: linear-gradient(to bottom,
      var(--ss-top) 0,
      var(--ss-top) 64px,
      rgba(var(--ss-top-rgb),.94) 96px,
      rgba(var(--ss-top-rgb),.34) 172px,
      rgba(var(--ss-top-rgb),0) 245px),
    radial-gradient(circle at 50% 20%,rgba(0,240,255,.055) 0%,rgba(20,50,75,.025) 35%,transparent 72%),
    linear-gradient(120deg,#090b14 0%,#0c111c 45%,#161b22 100%);
}

.page-art::before {
  background: transparent!important;
}

:root {
  --ss-add-bg1: rgba(255,255,255,.42);
  --ss-add-bg2: rgba(222,244,252,.18);
  --ss-add-border: rgba(255,255,255,.76);
  --ss-add-accent: #178fb8;
  --ss-add-icon-bg: rgba(230,247,252,.58);
  --ss-add-icon-border: rgba(23,143,184,.22);
  --ss-add-text: #536f7c;
  --ss-add-shadow: rgba(39,107,133,.09);
}

body[data-theme="dark"] {
  --ss-add-bg1: rgba(12,31,46,.44);
  --ss-add-bg2: rgba(9,73,88,.14);
  --ss-add-border: rgba(92,220,235,.18);
  --ss-add-accent: #63e5ef;
  --ss-add-icon-bg: rgba(32,144,161,.13);
  --ss-add-icon-border: rgba(99,229,239,.24);
  --ss-add-text: #b8d9de;
  --ss-add-shadow: rgba(0,0,0,.30);
}

.new-card {
  background: linear-gradient(145deg,var(--ss-add-bg1),var(--ss-add-bg2))!important;
  border: 1px solid var(--ss-add-border)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52),0 12px 28px var(--ss-add-shadow)!important;
}

.new-card:hover {
  background: linear-gradient(145deg,var(--ss-add-bg1),var(--ss-add-bg2))!important;
}

.new-card .app-icon {
  color: var(--ss-add-accent)!important;
  background: var(--ss-add-icon-bg)!important;
  border: 1px solid var(--ss-add-icon-border)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px var(--ss-add-shadow)!important;
}

.new-card .app-name {
  color: var(--ss-add-text)!important;
  text-shadow: none!important;
}

.new-card:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40),0 7px 18px var(--ss-add-shadow)!important;
}


.search-clear {
  border: 0;
  background: transparent;
  color: #94a3b8;
}

.search-clear:hover {
  background: rgba(148,163,184,.14);
  color: #64748b;
}

.search-clear .ui-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-theme="dark"] .search-clear {
  color: #8fb9c9;
}

body[data-theme="dark"] .search-clear:hover {
  background: rgba(148,163,184,.14);
  color: #d9fbff;
}

.sort-toggle.active {
  color: #0284c7!important;
  border-color: rgba(255,255,255,.92)!important;
  background: rgba(224,242,254,.94)!important;
  box-shadow: 0 0 0 1px rgba(14,165,233,.12),0 10px 30px rgba(14,165,233,.15)!important;
}

body[data-theme="dark"] .sort-toggle.active {
  color: #e8feff!important;
  border-color: rgba(0,240,255,.62)!important;
  background: linear-gradient(145deg,rgba(0,104,125,.42),rgba(6,37,55,.92))!important;
  box-shadow: 0 0 18px rgba(0,240,255,.18),inset 0 0 20px rgba(0,240,255,.08)!important;
}


html body .sort-toggle.active[aria-expanded="true"] {
  color: #fff!important;
  background: linear-gradient(145deg,#087d91,#07364a)!important;
  border-color: #42e8f2!important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22)!important;
}

html body .sort-toggle.active[aria-expanded="true"] .ui-icon,html body .sort-toggle.active[aria-expanded="true"] .sort-icon {
  color: #fff!important;
  stroke: #fff!important;
}

/* Shared finish: Animation card geometry. */
:root {--ss-card-max:132px;--ss-card-ratio:1;--ss-card-radius:24px;--cyan:var(--ss-accent);--cyan-soft:var(--ss-accent-soft);--violet:var(--ss-accent);
}
.waterline::after {background:linear-gradient(90deg,rgba(255,255,255,0),rgba(248,254,255,.74) 12%,rgba(64,190,215,.50) 29%,rgba(248,254,255,.78) 48%,rgba(64,190,215,.58) 69%,rgba(248,254,255,.72) 88%,rgba(255,255,255,0))!important;box-shadow:none!important;
}
body[data-theme="dark"] .waterline::after {background:linear-gradient(90deg,rgba(0,217,232,0),rgba(205,250,255,.82) 18%,rgba(0,217,232,.66) 43%,rgba(205,250,255,.88) 62%,rgba(0,217,232,.64) 84%,rgba(0,217,232,0))!important;
}
.title-limit-note {color:#64748b;
}
body[data-theme="dark"] .title-limit-note {color:#9fb0c2;
}
.title-limit-note.is-over-limit {color:#a34766;
}
body[data-theme="dark"] .title-limit-note.is-over-limit {color:#ffb3cc;
}
@media(max-width:600px){.brand::before {background:rgba(234,247,251,.67);
}body[data-theme="dark"] .brand::before {background:rgba(9,11,20,.68);
}}

/* First-open signature in this UI's own light/dark palette. */
:root{--welcome-sign-color:#8ac7dc}
body[data-theme="dark"]{--welcome-sign-color:#54bacb}