:root {
        --pink: #f7a7ce;
        --pink2: #df7caf;
        --rose: #ffdff0;
        --cream: #fff8fc;
        --ink: #6f4f67;
        --sub: #9f8297;
        --line: #d7e6ff;
        --vault-bg1: #f7f1ff;
        --vault-bg2: #efe5ff;
        --vio: #9c7dff;
        --ylw: #f3cd68;
      }

* {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }

html,
      body {
        margin: 0;
        height: 100%;
        font-family:
          "SF Pro Rounded", "PingFang SC", "Helvetica Neue", sans-serif;
        color: var(--ink);
      }

body {
        background:
          radial-gradient(
            760px 320px at 50% -8%,
            rgba(163, 202, 255, 0.42) 0%,
            rgba(249, 194, 227, 0.34) 52%,
            rgba(247, 228, 165, 0.3) 100%
          ),
          radial-gradient(900px 500px at 0% 0%, #ffe8f5 0%, transparent 62%),
          radial-gradient(
            600px 420px at 100% 100%,
            #efe5ff 0%,
            transparent 68%
          ),
          linear-gradient(145deg, #fff9fd, #fdf3f8 48%, #faf6ff);
        overflow: hidden;
      }

.app {
        height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 10px;
        padding: 10px;
      }

.card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
      }

.bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #d8e7ff;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.88),
          rgba(245, 250, 255, 0.78)
        );
        box-shadow:
          0 10px 22px rgba(162, 186, 230, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

.title {
        font-size: 13px;
        font-weight: 800;
        background: linear-gradient(
          90deg,
          #7faeea 0%,
          #8ea7e8 45%,
          #a896e8 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
        cursor: pointer;
        user-select: none;
      }

.btns {
        display: flex;
        gap: 8px;
      }

button {
        border: none;
        border-radius: 12px;
        padding: 9px 12px;
        cursor: pointer;
        font-weight: 800;
      }

.btn-sm {
        padding: 6px 10px;
        border-radius: 10px;
      }

.btn-main {
        background: linear-gradient(
          160deg,
          #f8c3de 0%,
          #e7c8f1 48%,
          #c7dcff 100%
        );
        border: 1px solid rgba(165, 184, 229, 0.55);
        box-shadow:
          0 9px 18px rgba(162, 177, 220, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }

.btn-main .gtext {
        color: #fff;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        text-shadow:
          0 1px 0 rgba(105, 129, 178, 0.55),
          0 -1px 0 rgba(255, 255, 255, 0.28);
      }

.btn-ghost {
        background: linear-gradient(
          160deg,
          #fff1f8 0%,
          #fffaf6 46%,
          #f2fbef 100%
        );
        border: 1px solid rgba(219, 198, 208, 0.58);
        box-shadow:
          0 8px 16px rgba(201, 184, 191, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

.btn-ghost .gtext {
        background: linear-gradient(
          90deg,
          #9a76a3 0%,
          #8f84a5 52%,
          #7d9b8d 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
      }

button:active {
        transform: scale(0.98);
      }

.content {
        min-height: 0;
        display: grid;
        grid-template-rows: 38% 62%;
        gap: 10px;
        transition: grid-template-rows 0.2s ease;
      }

.content.editor-full {
        grid-template-rows: 1fr 0fr;
      }

.content.editor-full .vault {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
      }

.content.vault-full {
        grid-template-rows: 0fr 1fr;
      }

.content.vault-full .editor {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
      }

.editor {
        position: relative;
        z-index: 5;
        border: 1px solid #d6e6ff;
        background:
          radial-gradient(
            520px 220px at 0% 0%,
            rgba(255, 194, 224, 0.22),
            transparent 66%
          ),
          radial-gradient(
            620px 260px at 55% 35%,
            rgba(186, 218, 255, 0.2),
            transparent 70%
          ),
          radial-gradient(
            680px 260px at 100% 100%,
            rgba(243, 214, 128, 0.18),
            transparent 72%
          ),
          linear-gradient(178deg, #fff8fd 0%, #f6fbff 54%, #fff8e8 100%);
        box-shadow:
          0 10px 24px rgba(186, 164, 210, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: grid;
        grid-template-rows: auto 1fr;
      }

.editor::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          radial-gradient(rgba(170, 146, 197, 0.08) 0.9px, transparent 0.9px),
          radial-gradient(rgba(255, 255, 255, 0.28) 0.8px, transparent 0.8px);
        background-size:
          8px 8px,
          6px 6px;
        background-position:
          0 0,
          3px 2px;
        opacity: 0.34;
        mix-blend-mode: multiply;
      }

.editor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border-bottom: 1px dashed rgba(168, 196, 235, 0.6);
        color: #7f99c3;
        font-size: 11px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.38),
          rgba(245, 250, 255, 0.16)
        );
      }

.search-toggle-btn {
        display: none;
        width: 30px;
        min-width: 30px;
        height: 30px;
        padding: 0;
        align-items: center;
        justify-content: center;
      }

.editor-search {
        flex: 1;
        min-width: 90px;
        height: 30px;
        border-radius: 10px;
        border: 1px solid rgba(185, 193, 217, 0.52);
        background: linear-gradient(180deg, rgba(239, 238, 247, 0.96), rgba(248, 247, 252, 0.96));
        box-shadow: inset 0 1.5px 4px rgba(128, 129, 154, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78);
        color: #8b86a7;
        font-size: 12px;
        padding: 0 10px;
        outline: none;
      }

.editor-search::placeholder {
        color: rgba(138, 130, 170, 0.72);
      }

.vault-toggle-btn {
        min-width: 22px;
        width: 22px;
        height: 18px;
        padding: 0;
        margin-top: -6px;
        border: none;
        background: transparent;
        color: #a79fc9;
        font-size: 14px;
        line-height: 1;
      }

.surface {
        position: relative;
        z-index: 6;
        padding: 10px;
        height: 100%;
        pointer-events: auto;
      }

textarea {
        position: relative;
        z-index: 7;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-user-select: text;
        user-select: text;
        width: 100%;
        height: 100%;
        resize: none;
        border: none;
        outline: none;
        border-radius: 9px;
        padding: 12px 12px 20px;
        background:
          radial-gradient(
            240px 130px at 0% 0%,
            rgba(255, 255, 255, 0.6),
            transparent 72%
          ),
          radial-gradient(rgba(156, 181, 214, 0.08) 0.9px, transparent 0.9px),
          radial-gradient(rgba(255, 255, 255, 0.34) 0.8px, transparent 0.8px),
          linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(248, 252, 255, 0.93) 50%,
            rgba(255, 250, 243, 0.92) 100%
          );
        background-size:
          auto,
          8px 8px,
          6px 6px,
          auto;
        background-position:
          0 0,
          0 0,
          3px 2px,
          0 0;
        color: #5f6e8a;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 1.52;
        border: 1px solid #d6e5ff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.86),
          inset 0 -1px 0 rgba(165, 187, 219, 0.26),
          inset 2px 2px 0 rgba(255, 255, 255, 0.62),
          inset -2px -2px 0 rgba(142, 166, 201, 0.22),
          inset 0 0 0 1px rgba(160, 184, 220, 0.2),
          inset 0 8px 10px rgba(255, 255, 255, 0.08),
          0 2px 8px rgba(175, 194, 221, 0.1);
      }

.vault {
        border: 1px solid #dfe8f6;
        transition:
          opacity 0.18s ease,
          transform 0.18s ease;
        background:
          radial-gradient(
            520px 230px at 0% 0%,
            rgba(244, 210, 110, 0.18),
            transparent 68%
          ),
          radial-gradient(
            560px 240px at 100% 0%,
            rgba(162, 132, 255, 0.14),
            transparent 68%
          ),
          radial-gradient(
            620px 280px at 100% 100%,
            rgba(156, 210, 255, 0.14),
            transparent 72%
          ),
          radial-gradient(
            600px 260px at 0% 100%,
            rgba(176, 232, 196, 0.14),
            transparent 72%
          ),
          linear-gradient(
            160deg,
            #fff9ea 0%,
            #f5efff 36%,
            #eef7ff 68%,
            #eefcf3 100%
          );
        box-shadow:
          0 12px 22px rgba(161, 180, 204, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: grid;
        grid-template-rows: auto 1fr;
      }

.vault::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          radial-gradient(rgba(140, 176, 214, 0.08) 0.9px, transparent 0.9px),
          radial-gradient(rgba(255, 255, 255, 0.35) 0.8px, transparent 0.8px);
        background-size:
          8px 8px,
          6px 6px;
        background-position:
          0 0,
          3px 2px;
        opacity: 0.32;
        mix-blend-mode: multiply;
      }

.vault-head {
        padding: 8px 10px;
        border-bottom: 1px dashed rgba(150, 183, 220, 0.35);
        display: flex;
        justify-content: space-between;
        color: #7f98bb;
        font-size: 11px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.46),
          rgba(245, 250, 255, 0.18)
        );
      }

.vault-grid {
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 10px;
      }

.vault-grid::-webkit-scrollbar {
        width: 6px;
      }

.vault-grid::-webkit-scrollbar-thumb {
        background: #d8c9ff;
        border-radius: 999px;
      }

.vault-item {
        position: relative;
        flex: 0 0 auto;
        min-height: 92px;
        border-radius: 11px;
        padding: 10px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: var(--skin-bg, linear-gradient(160deg, #ffffff, #fff7ef));
        box-shadow: 0 6px 16px rgba(16, 10, 30, 0.22);
        transition:
          transform 0.14s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }

.vault-item::before,
      .vault-item::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

.vault-item::before {
        opacity: 0;
      }

.vault-item.texture-grain::before {
        opacity: 0.22;
        background-image:
          radial-gradient(rgba(255, 255, 255, 0.25) 0.7px, transparent 0.7px),
          radial-gradient(rgba(0, 0, 0, 0.1) 0.6px, transparent 0.6px);
        background-size: 7px 7px, 9px 9px;
        background-position: 0 0, 3px 2px;
      }

.vault-item.texture-mesh::before {
        opacity: 0.2;
        background-image:
          linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 6px),
          linear-gradient(60deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 7px);
        background-size: 8px 8px, 10px 10px;
      }

.vault-item.texture-dots::before {
        opacity: 0.2;
        background-image: radial-gradient(rgba(255, 255, 255, 0.26) 1px, transparent 1px);
        background-size: 8px 8px;
      }

.vault-item.texture-dash::before {
        opacity: 0.22;
        background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 8px);
      }

.vault-item.texture-grid::before {
        opacity: 0.2;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
        background-size: 10px 10px;
      }

.vault-item.texture-rings::before {
        opacity: 0.2;
        background-image:
          radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.22) 0 7px, transparent 8px),
          radial-gradient(circle at 78% 74%, rgba(255, 255, 255, 0.18) 0 8px, transparent 9px);
      }

/* light mode: 手账纸纹更明显一点 */
body:not(.theme-dark) .vault-item.texture-grain::before {
        opacity: 0.28;
        background-image:
          radial-gradient(rgba(128, 105, 142, 0.14) 0.8px, transparent 0.8px),
          radial-gradient(rgba(255, 255, 255, 0.32) 0.9px, transparent 0.9px);
        background-size: 9px 9px, 7px 7px;
      }

body:not(.theme-dark) .vault-item.texture-mesh::before {
        opacity: 0.24;
        background-image:
          linear-gradient(135deg, rgba(137, 115, 154, 0.16) 0 1px, transparent 1px 8px),
          linear-gradient(45deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 8px);
        background-size: 10px 10px, 10px 10px;
      }

body:not(.theme-dark) .vault-item.texture-dots::before {
        opacity: 0.26;
        background-image: radial-gradient(rgba(137, 115, 154, 0.2) 1.1px, transparent 1.1px);
        background-size: 10px 10px;
      }

body:not(.theme-dark) .vault-item.texture-dash::before {
        opacity: 0.28;
        background-image: repeating-linear-gradient(0deg, rgba(126, 102, 142, 0.2) 0 1px, transparent 1px 8px);
      }

body:not(.theme-dark) .vault-item.texture-grid::before {
        opacity: 0.26;
        background-image:
          linear-gradient(rgba(129, 109, 148, 0.18) 1px, transparent 1px),
          linear-gradient(90deg, rgba(129, 109, 148, 0.14) 1px, transparent 1px);
        background-size: 10px 10px;
      }

body:not(.theme-dark) .vault-item.texture-rings::before {
        opacity: 0.24;
        background-image:
          radial-gradient(circle at 20% 18%, rgba(132, 108, 150, 0.2) 0 8px, transparent 9px),
          radial-gradient(circle at 78% 74%, rgba(255, 255, 255, 0.3) 0 9px, transparent 10px);
      }

.vault-item.is-glass::after {
        border: 1px solid rgba(255, 255, 255, 0.24);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.02));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
      }

.vault-item > * {
        position: relative;
        z-index: 1;
      }

.vault-item.active {
        border: 2px solid var(--ylw);
        transform: translateY(-2px);
        box-shadow:
          0 0 0 1px rgba(248, 216, 110, 0.35),
          0 0 18px rgba(248, 216, 110, 0.48),
          0 14px 22px rgba(16, 10, 30, 0.35);
      }

.vault-item.dragging {
        opacity: 0.55;
      }

.vault-item.editing {
        overflow: visible;
        animation: jiggle 0.28s ease-in-out infinite alternate;
      }

.move-controls {
        position: absolute;
        top: 6px;
        left: 8px;
        display: none;
        gap: 4px;
        z-index: 3;
      }

.vault-item.editing .move-controls {
        display: flex;
      }

.move-btn {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.36);
        color: #7d709d;
        font-size: 11px;
        line-height: 1;
        padding: 0;
      }

.vault-title {
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.vault-meta {
        font-size: 10px;
        opacity: 0.7;
        margin-top: 2px;
      }

.vault-code {
        margin-top: 6px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        opacity: 0.86;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

.del-dot {
        position: absolute;
        z-index: 3;
        top: -7px;
        right: -7px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #ff4d5e;
        color: #fff;
        border: 2px solid #fff;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
      }

.vault-item.editing .del-dot {
        display: flex;
      }

.skin-dot {
        position: absolute;
        top: -7px;
        left: -7px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #7fbcff;
        color: #fff;
        border: 2px solid #fff;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
      }

.vault-item.editing .skin-dot {
        display: flex;
      }

@keyframes jiggle {
        from {
          transform: rotate(-0.9deg);
        }
        to {
          transform: rotate(0.9deg);
        }
      }

.foot {
        padding: 8px 10px;
        border: 1px solid #ecd5e5;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.86),
          rgba(255, 248, 252, 0.79)
        );
        color: #a6849d;
        font-size: 11px;
      }

.install-banner {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 25;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(208, 184, 222, 0.72);
        background: linear-gradient(180deg, rgba(255, 248, 252, 0.97), rgba(246, 241, 255, 0.95));
        box-shadow: 0 10px 18px rgba(131, 110, 149, 0.2);
        font-size: 12px;
        color: #8f79a4;
      }

.install-actions {
        display: flex;
        gap: 6px;
      }

.install-modal {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(34, 25, 52, 0.38);
      }

.install-dialog {
        width: min(92vw, 360px);
        padding: 14px;
        border: 1px solid rgba(209, 191, 235, 0.72);
        background: linear-gradient(180deg, rgba(255, 250, 253, 0.98), rgba(247, 243, 255, 0.96));
      }

.install-title {
        font-size: 14px;
        font-weight: 800;
        color: #8f79a4;
      }

.install-text {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.6;
        color: #7b6c95;
      }

.install-dialog .install-actions {
        margin-top: 10px;
        justify-content: flex-end;
      }

.runner {
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 30;
      }

.runner iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }

.runner-back {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 40;
      }

.toast {
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        background: rgba(20, 18, 34, 0.88);
        color: #f7f3ff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 12px;
        z-index: 120;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
      }

.toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
      }

.hidden {
        display: none !important;
      }

/* final dark-night theme override */
      body {
        position: relative;
      }

@media (max-width: 520px) {
        .editor-head {
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
        }

        .search-toggle-btn {
          display: inline-flex;
        }

        .editor-search {
          order: 1;
          flex: 1 1 0;
          min-width: 0;
          max-width: 0;
          opacity: 0;
          padding-left: 0;
          padding-right: 0;
          border-width: 0;
          pointer-events: none;
          transition: max-width .2s ease, opacity .2s ease, padding .2s ease, border-width .2s ease;
        }

        .editor-head.search-open .editor-search {
          max-width: 220px;
          opacity: 1;
          padding-left: 10px;
          padding-right: 10px;
          border-width: 1px;
          pointer-events: auto;
        }

        .editor-head .btns {
          order: 2;
          flex: 0 0 100%;
          justify-content: flex-end;
          flex-wrap: nowrap;
          gap: 6px;
        }

        .editor-head .btns .btn-sm {
          flex: 1 1 0;
          min-width: 0;
          padding: 6px 6px;
        }

        .editor-head .btns .btn-sm .gtext {
          font-size: 11px;
          white-space: nowrap;
        }
      }

@media (min-width: 521px) {
        .editor-search {
          max-width: none;
          opacity: 1;
          pointer-events: auto;
        }
      }