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

      :root {
          --bg: #08081a;
          --sur: #181836;
          --sur2: #20203e;
          --acc: #7c3aed;
          --txt: #eeeeff;
          --txt2: #9999cc;
          --si: env(safe-area-inset-top, 0px);
      }

      html,
      body {
          width: 100%;
          height: 100%;
          background: var(--bg);
          color: var(--txt);
          font-family: "Nunito", sans-serif;
          overflow: hidden;
          touch-action: manipulation;
          overscroll-behavior: none;
      }

      #G {
          user-select: none;
          -webkit-user-select: none;
          touch-action: none;
          overscroll-behavior: none;
      }

      #G * {
          user-select: none;
          -webkit-user-select: none;
      }

      button {
          cursor: pointer;
          font-family: "Nunito", sans-serif;
          border: none;
          outline: none;
      }

      input,
      textarea {
          font-family: "Nunito", sans-serif;
          outline: none;
      }

      ::-webkit-scrollbar {
          width: 4px;
      }

      ::-webkit-scrollbar-thumb {
          background: rgba(168, 85, 247, 0.4);
          border-radius: 2px;
      }

      .scr {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          transition: opacity 0.38s, transform 0.38s;
      }

      .scr.off {
          opacity: 0;
          pointer-events: none;
          transform: scale(0.95);
      }

      /* START */
      #S {
          align-items: center;
          overflow-y: auto;
          overflow-x: hidden;
          padding: max(16px, var(--si)) 14px 60px;
          background: radial-gradient(ellipse at 30% 20%, #1a0535, #08081a 60%);
      }

      #eCvs {
          position: fixed;
          inset: 0;
          pointer-events: none;
          z-index: 0;
      }

      .wrap {
          position: relative;
          z-index: 1;
          width: 100%;
          max-width: 460px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 18px;
      }

      .logo {
          font-family: "Fredoka One", cursive;
          font-size: clamp(2rem, 10vw, 3.4rem);
          background: linear-gradient(135deg, #f093fb, #f5576c, #4facfe, #00f2fe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          animation: lp 3s ease-in-out infinite;
          margin-top: 8px;
      }

      @keyframes lp {

          0%,
          100% {
              filter: drop-shadow(0 0 16px rgba(240, 93, 251, 0.5));
          }

          50% {
              filter: drop-shadow(0 0 32px rgba(245, 87, 108, 0.8));
          }
      }

      .rcard {
          background: rgba(24, 24, 54, 0.85);
          border: 1px solid rgba(124, 58, 237, 0.3);
          border-radius: 16px;
          padding: 14px;
          width: 100%;
          backdrop-filter: blur(10px);
      }

      .rtit {
          font-family: "Fredoka One", cursive;
          font-size: 1.05rem;
          color: #c084fc;
          margin-bottom: 8px;
      }

      .rul {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 5px;
      }

      .rul li {
          font-size: 0.78rem;
          color: var(--txt2);
          padding-left: 22px;
          position: relative;
          line-height: 1.45;
      }

      .rul li::before {
          content: attr(e);
          position: absolute;
          left: 0;
      }

      .stit {
          font-family: "Fredoka One", cursive;
          font-size: 1.15rem;
          align-self: flex-start;
      }

      /* ── CATEGORY FIXED WINDOW ── */
      .cat-wrap {
          width: 100%;
          max-height: clamp(180px, 44vh, 370px);
          overflow-y: auto;
          overflow-x: hidden;
          border-radius: 14px;
          overscroll-behavior: contain;
          scroll-behavior: smooth;
      }

      .cgrid {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 100%;
          padding: 2px 1px;
      }

      /* ── SEARCH BAR (slides in below category window) ── */
      .cat-search-outer {
          width: 100%;
          overflow: hidden;
          max-height: 0;
          opacity: 0;
          transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateY(-8px);
          pointer-events: none;
      }

      .cat-search-outer.on {
          max-height: 58px;
          opacity: 1;
          transform: translateY(0);
          pointer-events: all;
      }

      .cat-search-inp {
          width: 100%;
          background: rgba(24, 24, 54, 0.92);
          border: 1.5px solid rgba(168, 85, 247, 0.32);
          border-radius: 12px;
          padding: 11px 14px 11px 38px;
          color: var(--txt);
          font-size: 0.9rem;
          font-weight: 700;
          transition: border-color 0.2s, box-shadow 0.2s;
          position: relative;
      }

      .cat-search-inp:focus {
          border-color: #a855f7;
          box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
      }

      .cat-search-wrap {
          position: relative;
          width: 100%;
      }

      .cat-search-icon {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 1rem;
          pointer-events: none;
          z-index: 1;
          opacity: 0.6;
      }

      .cat-no-result {
          text-align: center;
          padding: 18px 10px;
          color: var(--txt2);
          font-size: 0.82rem;
          line-height: 1.6;
      }

      .ccard {
          background: rgba(24, 24, 54, 0.8);
          border: 1.5px solid rgba(255, 255, 255, 0.09);
          border-radius: 14px;
          padding: 12px;
          display: flex;
          align-items: center;
          gap: 10px;
          position: relative;
          overflow: hidden;
          transition: border-color 0.2s;
      }

      .ccard.on {
          border-color: #a855f7;
          box-shadow: 0 0 0 1px #a855f7, 0 0 20px rgba(168, 85, 247, 0.15);
      }

      .csel {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.25);
          background: transparent;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;
          cursor: pointer;
      }

      .csel.on {
          background: #a855f7;
          border-color: #a855f7;
      }

      .csel.on::after {
          content: "✓";
          color: #fff;
          font-size: 11px;
          font-weight: 900;
      }

      .cemj {
          font-size: 1.75rem;
          flex-shrink: 0;
          line-height: 1;
      }

      .cinf {
          flex: 1;
          min-width: 0;
      }

      .cnam {
          font-size: 0.92rem;
          font-weight: 800;
      }

      .ccnt {
          font-size: 0.74rem;
          color: var(--txt2);
      }

      .cact {
          display: flex;
          gap: 6px;
          flex-shrink: 0;
      }

      .cbtn {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          font-size: 0.95rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.12s;
      }

      .cbtn:active {
          transform: scale(0.84);
      }

      .cbu {
          background: rgba(79, 172, 254, 0.18);
          color: #4facfe;
      }

      .cbe {
          background: rgba(168, 85, 247, 0.18);
          color: #a855f7;
      }

      .dpop {
          position: absolute;
          inset: 0;
          background: rgba(8, 8, 26, 0.93);
          border-radius: 14px;
          display: none;
          align-items: center;
          justify-content: center;
          gap: 10px;
          z-index: 5;
      }

      .dp-del {
          background: rgba(239, 68, 68, 0.22);
          color: #ef4444;
          border-radius: 8px;
          padding: 8px 14px;
          font-weight: 800;
          font-size: 0.84rem;
          cursor: pointer;
      }

      .dp-kp {
          background: rgba(34, 197, 94, 0.22);
          color: #22c55e;
          border-radius: 8px;
          padding: 8px 14px;
          font-weight: 800;
          font-size: 0.84rem;
          cursor: pointer;
      }

      .addcat {
          width: 100%;
          padding: 13px;
          border: 2px dashed rgba(255, 255, 255, 0.15);
          border-radius: 14px;
          background: transparent;
          color: var(--txt2);
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          transition: all 0.2s;
      }

      .addcat:active {
          border-color: #a855f7;
          color: #a855f7;
      }

      .opt-row {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 14px;
          background: rgba(24, 24, 54, 0.8);
          border: 1.5px solid rgba(255, 255, 255, 0.09);
          border-radius: 14px;
          cursor: pointer;
          transition: border-color 0.2s, box-shadow 0.2s;
          width: 100%;
      }

      .opt-row.on {
          border-color: #a855f7;
          box-shadow: 0 0 0 1px #a855f7, 0 0 18px rgba(168, 85, 247, 0.12);
      }

      .opt-tog {
          width: 44px;
          height: 26px;
          border-radius: 13px;
          background: rgba(255, 255, 255, 0.1);
          position: relative;
          transition: background 0.22s;
          flex-shrink: 0;
      }

      .opt-tog::after {
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #fff;
          top: 3px;
          left: 3px;
          transition: left 0.22s;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      }

      .opt-row.on .opt-tog {
          background: #a855f7;
      }

      .opt-row.on .opt-tog::after {
          left: 21px;
      }

      .opt-inf {
          flex: 1;
      }

      .opt-nam {
          font-size: 0.9rem;
          font-weight: 800;
      }

      .opt-dsc {
          font-size: 0.74rem;
          color: var(--txt2);
          margin-top: 2px;
      }

      .sbtn {
          width: 100%;
          padding: 16px;
          border-radius: 50px;
          background: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899);
          color: #fff;
          font-family: "Fredoka One", cursive;
          font-size: 1.35rem;
          box-shadow: 0 4px 26px rgba(124, 58, 237, 0.5);
          transition: transform 0.14s;
      }

      .sbtn:active {
          transform: scale(0.97);
      }

      /* GAME */
      #G {
          background: var(--bg);
      }

      #tp {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          background: rgba(8, 8, 26, 0.92);
          backdrop-filter: blur(18px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.07);
          transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
          padding-top: var(--si);
      }

      #tp.off {
          transform: translateY(-100%);
      }

      .pinn {
          display: flex;
          align-items: center;
          gap: 7px;
          padding: 9px 12px;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
      }

      .pcb {
          flex-shrink: 0;
          padding: 6px 13px;
          border-radius: 18px;
          border: 1px solid rgba(255, 255, 255, 0.18);
          background: transparent;
          color: var(--txt2);
          font-size: 0.82rem;
          font-weight: 800;
          white-space: nowrap;
          transition: all 0.2s;
      }

      .pcb.on {
          background: #a855f7;
          border-color: #a855f7;
          color: #fff;
      }

      .pex {
          margin-left: auto;
          flex-shrink: 0;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.18);
          background: transparent;
          color: var(--txt);
          font-size: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      #ph {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          z-index: 101;
          background: rgba(8, 8, 26, 0.8);
          border-radius: 0 0 11px 11px;
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-top: none;
          width: 50px;
          height: 19px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .phb {
          width: 26px;
          height: 3px;
          border-radius: 2px;
          background: rgba(255, 255, 255, 0.3);
      }

      #ga {
          position: absolute;
          inset: 0;
      }

      #asvg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: visible;
          pointer-events: none;
          z-index: 5;
      }

      .tc {
          border-radius: 50%;
          position: absolute;
          background: radial-gradient(circle at 35% 35%, #1e1e4a, #0d0d28 70%);
          border: 3px solid rgba(124, 58, 237, 0.45);
          box-shadow: 0 0 0 6px #08081a, 0 0 38px rgba(124, 58, 237, 0.22),
              inset 0 0 46px rgba(0, 0, 0, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          user-select: none;
          z-index: 10;
          transition: box-shadow 0.22s;
          overflow: hidden;
      }

      .tc:active:not(.sp) {
          box-shadow: 0 0 0 6px #08081a, 0 0 55px rgba(168, 85, 247, 0.5),
              inset 0 0 46px rgba(0, 0, 0, 0.4);
      }

      .tc.sp {
          cursor: not-allowed;
      }

      .tc-zone-bg {
          position: absolute;
          inset: 0;
          display: flex;
          z-index: 0;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s;
      }

      .tc-zone-bg.on {
          opacity: 1;
      }

      .tc-zone-left {
          flex: 1;
          background: rgba(239, 68, 68, 0.1);
          transition: background 0.35s;
      }

      .tc-zone-right {
          flex: 1;
          background: rgba(34, 197, 94, 0.1);
          transition: background 0.35s;
      }

      .tc-zone-bg.strong .tc-zone-left {
          background: rgba(239, 68, 68, 0.24);
      }

      .tc-zone-bg.strong .tc-zone-right {
          background: rgba(34, 197, 94, 0.24);
      }

      .tc-zone-left.flash-wrong {
          background: rgba(239, 68, 68, 0.55) !important;
      }

      .tc-zone-right.flash-right {
          background: rgba(34, 197, 94, 0.55) !important;
      }

      .qa {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          position: absolute;
          inset: 0;
          transition: opacity 0.3s;
          z-index: 1;
      }

      .qa.hidden {
          opacity: 0;
          pointer-events: none;
      }

      /* ── QUESTION IMAGE ── */
      #qimg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: none;
          z-index: 0;
          border-radius: 50%;
      }

      #qimg.on {
          display: block;
      }

      /* Tap hint overlay on image */
      .img-tap-hint {
          position: absolute;
          bottom: 14%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          background: rgba(8, 8, 26, 0.72);
          border: 1px solid rgba(255, 255, 255, 0.18);
          border-radius: 20px;
          padding: 4px 11px;
          font-size: 0.62rem;
          font-weight: 800;
          color: rgba(255, 255, 255, 0.7);
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.3s;
      }

      .img-tap-hint.on {
          opacity: 1;
      }

      .qt {
          font-weight: 800;
          color: var(--txt);
          line-height: 1.38;
          text-align: center;
          word-break: keep-all;
          overflow-wrap: anywhere;
          hyphens: none;
          width: 88%;
          padding: 8px;
          overflow: hidden;
          display: block;
          transition: color 0.3s;
          position: relative;
          z-index: 1;
      }

      .qt.answer-mode {
          color: #86efac;
      }

      /* Text shown over image */
      .qt.over-image {
          background: rgba(8, 8, 26, 0.76);
          border-radius: 10px;
          padding: 7px 12px;
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
      }

      .hint {
          font-size: 0.82rem;
          color: var(--txt2);
          font-weight: 600;
          animation: bl 2.2s ease-in-out infinite;
      }

      @keyframes bl {

          0%,
          100% {
              opacity: 0.4;
          }

          55% {
              opacity: 1;
          }
      }

      .tc-timer {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: rgba(8, 8, 26, 0.88);
          z-index: 2;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s;
      }

      .tc-timer.on {
          opacity: 1;
          pointer-events: all;
          cursor: pointer;
      }

      .tc-tnum {
          font-family: "Fredoka One", cursive;
          font-size: 3.2rem;
          color: #fff;
          line-height: 1;
          text-shadow: 0 0 24px rgba(168, 85, 247, 0.9);
      }

      .tc-tsub {
          font-size: 0.68rem;
          color: var(--txt2);
          font-weight: 700;
          margin-top: 4px;
      }

      .tc-tnum.urgent {
          color: #ef4444;
          animation: urg 0.4s ease-in-out infinite alternate;
      }

      @keyframes urg {
          from {
              text-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
          }

          to {
              text-shadow: 0 0 30px #ef4444;
          }
      }

      .tc-answer-hint {
          position: absolute;
          bottom: 18%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          background: rgba(124, 58, 237, 0.35);
          border: 1px solid rgba(168, 85, 247, 0.4);
          border-radius: 8px;
          padding: 3px 10px;
          font-size: 0.62rem;
          font-weight: 800;
          color: #c084fc;
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.3s;
      }

      .tc-answer-hint.on {
          opacity: 1;
      }

      .pl {
          position: absolute;
          width: 0;
          height: 0;
          z-index: 20;
          touch-action: none;
          user-select: none;
          pointer-events: none;
      }

      .pl-rect {
          position: absolute;
          display: flex;
          align-items: center;
          gap: 7px;
          padding: 7px 11px 7px 9px;
          border-radius: 11px;
          border: 2px solid rgba(255, 255, 255, 0.28);
          backdrop-filter: blur(10px);
          white-space: nowrap;
          cursor: pointer;
          pointer-events: all;
          transition: border-color 0.25s, box-shadow 0.25s,
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .pl.win .pl-rect {
          border-color: #fff !important;
          animation: wp 0.5s ease-in-out infinite alternate;
      }

      @keyframes wp {
          from {
              box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 14px var(--pc, #fff);
          }

          to {
              box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 42px var(--pc, #fff),
                  0 0 64px rgba(255, 255, 255, 0.2);
          }
      }

      .pl.drg .pl-rect {
          opacity: 0.82;
          cursor: grabbing;
      }

      .pl.removing .pl-rect {
          animation: plrm 0.28s ease forwards;
          pointer-events: none;
      }

      @keyframes plrm {
          to {
              opacity: 0;
              transform: scale(0.3) rotate(var(--rot, 0deg));
          }
      }

      .pl-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          flex-shrink: 0;
          border: 2px solid rgba(255, 255, 255, 0.4);
      }

      .pl-name {
          font-size: 0.83rem;
          font-weight: 800;
          color: #fff;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
          max-width: 90px;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pl-num {
          font-size: 0.68rem;
          font-weight: 900;
          color: rgba(255, 255, 255, 0.4);
          margin-left: auto;
          padding-left: 4px;
          flex-shrink: 0;
      }

      .ql-label {
          position: absolute;
          z-index: 15;
          left: 50%;
          text-align: center;
          font-weight: 800;
          white-space: nowrap;
          pointer-events: none;
          background: rgba(8, 8, 26, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 9px;
          padding: 5px 13px;
          transition: opacity 0.38s, transform 0.38s;
      }

      .ql-label.off {
          opacity: 0;
      }

      #qlTo {
          font-size: 0.92rem;
          color: var(--txt);
          transform: translateX(-50%);
      }

      #qlTo.off {
          transform: translateX(-50%) translateY(-6px);
      }

      #qlFrom {
          font-size: 0.76rem;
          color: var(--txt2);
          transform: translateX(-50%);
      }

      #qlFrom.off {
          transform: translateX(-50%) translateY(6px);
      }

      #ratPanel {
          position: absolute;
          right: 10px;
          z-index: 30;
          background: rgba(8, 8, 26, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 13px;
          padding: 9px 11px;
          min-width: 115px;
          backdrop-filter: blur(16px);
          pointer-events: none;
          transition: opacity 0.4s, transform 0.4s;
      }

      #ratPanel.off {
          opacity: 0;
          transform: scale(0.9);
      }

      .rat-title {
          font-family: "Fredoka One", cursive;
          font-size: 0.76rem;
          color: #c084fc;
          margin-bottom: 4px;
          text-align: center;
          letter-spacing: 0.04em;
      }

      .rat-title+.rat-title,
      .rat-sep {
          margin-top: 7px;
          padding-top: 7px;
          border-top: 1px solid rgba(255, 255, 255, 0.07);
      }

      .rat-row {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 2px 0;
      }

      .rat-pos {
          font-size: 0.72rem;
          width: 16px;
          text-align: center;
          flex-shrink: 0;
      }

      .rat-name {
          font-size: 0.74rem;
          font-weight: 800;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .rat-time {
          font-family: "Fredoka One", cursive;
          font-size: 0.78rem;
          color: #a855f7;
          flex-shrink: 0;
      }

      .rat-score {
          font-family: "Fredoka One", cursive;
          font-size: 0.78rem;
          color: #22c55e;
          flex-shrink: 0;
      }

      #cpOvl {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.65);
          z-index: 200;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          backdrop-filter: blur(5px);
          transition: opacity 0.22s;
      }

      #cpOvl.off {
          opacity: 0;
          pointer-events: none;
      }

      .cpsheet {
          width: 100%;
          max-width: 480px;
          background: var(--sur);
          border-radius: 20px 20px 0 0;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-bottom: none;
          display: flex;
          flex-direction: column;
          transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .cpscroll {
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          padding: 0 18px;
          display: flex;
          flex-direction: column;
          gap: 0;
      }

      .cp-drag-handle {
          width: 36px;
          height: 4px;
          border-radius: 2px;
          background: rgba(255, 255, 255, 0.2);
          margin: 12px auto 10px;
          flex-shrink: 0;
      }

      .cptit {
          font-family: "Fredoka One", cursive;
          font-size: 1.05rem;
          margin-bottom: 10px;
          text-align: center;
          color: var(--txt);
      }

      .cp-preview {
          display: flex;
          justify-content: center;
          margin-bottom: 11px;
      }

      .cp-prev-rect {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 7px 13px 7px 10px;
          border-radius: 10px;
          border: 2px solid rgba(255, 255, 255, 0.25);
      }

      .cp-prev-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.4);
      }

      .cp-prev-name {
          font-size: 0.86rem;
          font-weight: 800;
          color: #fff;
          max-width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .cp-name-lbl {
          font-size: 0.75rem;
          color: var(--txt2);
          font-weight: 700;
          margin-bottom: 4px;
      }

      .cp-name-inp {
          width: 100%;
          background: var(--bg);
          border: 1.5px solid rgba(255, 255, 255, 0.12);
          border-radius: 10px;
          padding: 10px 13px;
          color: var(--txt);
          font-size: 0.95rem;
          font-weight: 700;
          margin-bottom: 11px;
          transition: border-color 0.2s;
      }

      .cp-name-inp:focus {
          border-color: #a855f7;
      }

      .cpsw {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 8px;
          margin-bottom: 10px;
      }

      .sw {
          border-radius: 50%;
          border: 2.5px solid transparent;
          cursor: pointer;
          aspect-ratio: 1;
          transition: transform 0.14s, border-color 0.14s;
      }

      .sw:active {
          transform: scale(0.85);
      }

      .sw.on {
          border-color: #fff;
          transform: scale(1.16);
      }

      .cprow {
          display: flex;
          gap: 8px;
          align-items: center;
          flex-shrink: 0;
          padding: 10px 18px max(14px, env(safe-area-inset-bottom, 0px));
      }

      input[type="color"] {
          width: 46px;
          height: 42px;
          border-radius: 9px;
          border: none;
          padding: 3px;
          background: var(--sur2);
          cursor: pointer;
          flex-shrink: 0;
      }

      .cpok {
          flex: 1;
          padding: 12px;
          border-radius: 10px;
          background: linear-gradient(135deg, #7c3aed, #a855f7);
          color: #fff;
          font-family: "Fredoka One", cursive;
          font-size: 0.95rem;
          cursor: pointer;
      }

      #edOvl {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          z-index: 300;
          display: flex;
          align-items: flex-end;
          backdrop-filter: blur(4px);
      }

      #edOvl.off {
          display: none;
      }

      .edsh {
          width: 100%;
          max-height: 88vh;
          background: var(--sur);
          border-radius: 20px 20px 0 0;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 11px;
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-bottom: none;
      }

      .edhd {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .edttl {
          font-family: "Fredoka One", cursive;
          font-size: 1.15rem;
      }

      .edcl {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: var(--sur2);
          color: var(--txt);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.9rem;
          cursor: pointer;
      }

      .edhn {
          font-size: 0.75rem;
          color: var(--txt2);
      }

      .edta {
          flex: 1;
          min-height: 200px;
          max-height: 52vh;
          background: var(--bg);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 10px;
          padding: 11px;
          color: var(--txt);
          font-size: 0.9rem;
          line-height: 1.65;
          resize: none;
          overflow-y: auto;
      }

      .edsv {
          padding: 12px;
          border-radius: 10px;
          background: linear-gradient(135deg, #7c3aed, #a855f7);
          color: #fff;
          font-family: "Fredoka One", cursive;
          font-size: 1rem;
      }

      #nmOvl {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          z-index: 400;
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(4px);
          padding: 20px;
      }

      #nmOvl.off {
          display: none;
      }

      .nmcard {
          background: var(--sur);
          border-radius: 18px;
          padding: 20px;
          width: min(320px, 92vw);
          border: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          flex-direction: column;
          gap: 13px;
      }

      .nmtit {
          font-family: "Fredoka One", cursive;
          font-size: 1.15rem;
          text-align: center;
      }

      .nminp {
          background: var(--bg);
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-radius: 10px;
          padding: 11px;
          color: var(--txt);
          font-size: 0.95rem;
          width: 100%;
      }

      .nm-emjs {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 6px;
      }

      .nm-emj {
          background: rgba(255, 255, 255, 0.07);
          border-radius: 8px;
          padding: 6px;
          font-size: 1.3rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.15s;
      }

      .nm-emj.on {
          background: rgba(168, 85, 247, 0.4);
      }

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

      .nm-ok {
          flex: 1;
          padding: 12px;
          border-radius: 10px;
          background: linear-gradient(135deg, #7c3aed, #a855f7);
          color: #fff;
          font-family: "Fredoka One", cursive;
          font-size: 1rem;
      }

      .nm-cl {
          padding: 12px 16px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.08);
          color: var(--txt2);
          font-size: 1rem;
      }

      .tst {
          position: fixed;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%) translateY(16px);
          background: rgba(16, 16, 40, 0.97);
          border: 1px solid rgba(168, 85, 247, 0.32);
          border-radius: 11px;
          padding: 9px 18px;
          color: var(--txt);
          font-size: 0.85rem;
          font-weight: 800;
          z-index: 1000;
          opacity: 0;
          transition: all 0.26s;
          pointer-events: none;
          white-space: nowrap;
      }

      .tst.on {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      input[type="file"] {
          display: none;
      }

      #adScreen {
          position: fixed;
          inset: 0;
          z-index: 500;
          background: rgba(8, 8, 26, 0.97);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 16px;
          padding: 24px;
          backdrop-filter: blur(8px);
          transition: opacity 0.35s;
      }

      #adScreen.off {
          opacity: 0;
          pointer-events: none;
      }

      .ad-label {
          font-size: 0.7rem;
          color: var(--txt2);
          letter-spacing: 0.08em;
          font-weight: 700;
          text-transform: uppercase;
      }

      .ad-box {
          width: 100%;
          max-width: 360px;
          min-height: 280px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          position: relative;
      }

      .ad-placeholder {
          text-align: center;
          color: var(--txt2);
          font-size: 0.8rem;
          padding: 20px;
          line-height: 1.6;
      }

      .ad-skip {
          margin-top: 4px;
          padding: 11px 28px;
          border-radius: 50px;
          background: rgba(124, 58, 237, 0.25);
          border: 1px solid rgba(168, 85, 247, 0.4);
          color: #c084fc;
          font-family: "Fredoka One", cursive;
          font-size: 1rem;
          cursor: pointer;
          transition: background 0.2s, opacity 0.3s;
      }

      .ad-skip:disabled {
          opacity: 0.35;
          cursor: default;
      }

      .ad-skip:not(:disabled):active {
          background: rgba(124, 58, 237, 0.5);
      }

      .ad-timer {
          font-size: 0.75rem;
          color: var(--txt2);
          min-height: 1.2em;
      }