:root {
      --bg: #e9edf2;
      --sf: #f8fafc;
      --sf2: #eef2f6;
      --sfd: #dde4eb;
      --bd: #cfd8e3;
      --tx: #18212b;
      --mt: #6b7280;
      --pr: #2563eb;
      --prs: #dbeafe;
      --prd: #1d4ed8;
      --sh: 0 8px 24px rgba(15, 23, 42, .06);
      --shl: 0 20px 48px rgba(15, 23, 42, .1);
      --rd: 18px;
      --fn: "Manrope", "Segoe UI", Arial, sans-serif;
      --ok: #16a34a;
      --er: #dc2626;
      --wr: #d97706
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html,
    body,
    #root {
      min-height: 100%
    }

    body {
      font-family: var(--fn);
      background: linear-gradient(180deg, #eef2f6, #e4e9ef);
      color: var(--tx);
      overflow-x: hidden
    }

    button,
    input,
    textarea,
    select {
      font: inherit
    }

    button {
      cursor: pointer
    }

    ::-selection {
      background: var(--pr);
      color: #fff
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: var(--bd);
      border-radius: 3px
    }

    .auth-wrap {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      padding: 32px;
      align-items: center
    }

    .auth-left {
      padding: 40px;
      position: relative;
      overflow: hidden;
      border-radius: var(--rd);
      background: var(--sf);
      border: 1px solid var(--bd);
      box-shadow: var(--sh)
    }

    .auth-right {
      padding: 36px;
      border-radius: var(--rd);
      background: var(--sf);
      border: 1px solid var(--bd);
      box-shadow: var(--sh)
    }

    .auth-tag {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--prs);
      color: var(--pr);
      font-size: 0.8rem;
      font-weight: 700
    }

    .auth-left h1 {
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.06;
      margin: 16px 0 12px;
      letter-spacing: -0.03em
    }

    .auth-left p {
      color: var(--mt);
      font-size: 1rem;
      line-height: 1.6;
      max-width: 400px
    }

    .feat-list {
      display: grid;
      gap: 12px;
      margin-top: 28px
    }

    .feat-item {
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--sf2);
      display: flex;
      gap: 12px;
      align-items: flex-start;
      transition: transform 0.2s
    }

    .feat-item:hover {
      transform: translateX(4px)
    }

    .feat-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.85rem
    }

    .feat-item strong {
      display: block;
      font-size: 0.9rem
    }

    .feat-item span {
      display: block;
      font-size: 0.82rem;
      color: var(--mt);
      margin-top: 2px
    }

    .floater {
      position: absolute;
      border-radius: 50%;
      opacity: 0.05;
      pointer-events: none
    }

    @keyframes driftA {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(18px, -24px)
      }
    }

    @keyframes driftB {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(-20px, 16px)
      }
    }

    .mode-switch {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      border-radius: 12px;
      background: var(--sf2)
    }

    .mode-btn {
      min-height: 40px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--mt);
      font-weight: 600;
      font-size: 0.88rem;
      transition: all 0.2s
    }

    .mode-btn.on {
      background: #fff;
      border-color: #c7d2fe;
      color: var(--pr);
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(37, 99, 235, .06)
    }

    .form-grid {
      display: grid;
      gap: 14px;
      margin-top: 22px
    }

    .field {
      display: grid;
      gap: 5px
    }

    .field label {
      font-size: 0.86rem;
      font-weight: 600
    }

    .field input {
      width: 100%;
      min-height: 44px;
      padding: 0 14px;
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      background: #fff;
      color: var(--tx);
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none
    }

    .field input:focus {
      border-color: var(--pr);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
    }

    .field input.err {
      border-color: var(--er);
      box-shadow: 0 0 0 3px rgba(220, 38, 38, .06)
    }

    .field-err {
      color: var(--er);
      font-size: 0.78rem;
      font-weight: 500
    }

    .pw-wrap {
      position: relative
    }

    .pw-wrap input {
      padding-right: 44px
    }

    .pw-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: none;
      color: var(--mt);
      cursor: pointer;
      border-radius: 6px;
      font-size: 0.8rem
    }

    .pw-toggle:hover {
      color: var(--tx)
    }

    .pw-strength {
      display: flex;
      gap: 4px;
      margin-top: 4px
    }

    .pw-bar {
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: var(--sfd);
      transition: background 0.3s
    }

    .pw-bar.weak {
      background: #ef4444
    }

    .pw-bar.medium {
      background: #f59e0b
    }

    .pw-bar.strong {
      background: #22c55e
    }

    .pw-label {
      font-size: 0.7rem;
      font-weight: 600;
      margin-top: 2px
    }

    .pw-label.weak {
      color: #ef4444
    }

    .pw-label.medium {
      color: #f59e0b
    }

    .pw-label.strong {
      color: #22c55e
    }

    .btn-primary {
      min-height: 46px;
      padding: 0 22px;
      border: 1px solid var(--pr);
      border-radius: 12px;
      background: var(--pr);
      color: #fff;
      font-weight: 700;
      font-size: 0.92rem;
      transition: all 0.2s;
      width: 100%
    }

    .btn-primary:hover {
      background: var(--prd);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(37, 99, 235, .25)
    }

    .btn-primary:active {
      transform: translateY(0)
    }

    .btn-primary:disabled {
      opacity: 0.6;
      cursor: wait;
      transform: none
    }

    .auth-hint {
      text-align: center;
      margin-top: 14px;
      font-size: 0.86rem;
      color: var(--mt)
    }

    .auth-hint button {
      background: none;
      border: none;
      color: var(--pr);
      font-weight: 700;
      cursor: pointer
    }

    .auth-server-err {
      padding: 10px 14px;
      border-radius: 10px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: var(--er);
      font-size: 0.84rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
    }

    .auth-divider-line {
      flex: 1;
      height: 1px;
      background: var(--bd)
    }

    .auth-divider-text {
      font-size: 0.8rem;
      color: var(--mt);
      font-weight: 600
    }

    .google-btn-container {
      margin-top: 16px;
      width: 100%;
      min-height: 44px;
    }

    .app-root {
      height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden
    }

    .topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(244, 247, 255, .97));
      border-bottom: 1px solid var(--bd);
      flex-shrink: 0
    }

    .tb-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .tb-logo .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pr)
    }

    .tb-logo b {
      font-size: 1.02rem;
      letter-spacing: -0.02em
    }

    .tb-sep {
      width: 1px;
      height: 24px;
      background: var(--bd);
      flex-shrink: 0
    }

    .tb-name {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 5px 10px;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--tx);
      min-width: 120px;
      outline: none;
      transition: all 0.15s
    }

    .tb-name:hover {
      border-color: var(--bd);
      background: #fff
    }

    .tb-name:focus {
      border-color: var(--pr);
      background: #fff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .08)
    }

    .tb-select {
      min-height: 32px;
      padding: 0 8px;
      border-radius: 9px;
      border: 1px solid var(--bd);
      background: #fff;
      font-size: 0.8rem;
      outline: none
    }

    .tb-group {
      display: flex;
      align-items: center;
      gap: 5px
    }

    .ib {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--bd);
      border-radius: 8px;
      background: #fff;
      color: var(--mt);
      transition: all 0.12s;
      flex-shrink: 0;
      font-size: 0.75rem
    }

    .ib:hover {
      background: var(--sf2);
      color: var(--tx)
    }

    .ib.on {
      background: var(--prs);
      color: var(--pr);
      border-color: #93c5fd
    }

    .ib:disabled {
      opacity: 0.3;
      pointer-events: none
    }

    .zoom-txt {
      font-size: 0.76rem;
      color: var(--mt);
      min-width: 38px;
      text-align: center;
      font-weight: 600
    }

    .collab-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 8px;
      flex-wrap: wrap;
      min-width: 0
    }

    .collab-room {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--mt);
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .collab-role {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--pr);
      background: var(--prs);
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      padding: 2px 8px;
      white-space: nowrap
    }

    .collab-avatars {
      display: flex;
      align-items: center
    }

    .collab-av {
      margin-left: -6px;
      border: 2px solid #fff;
      border-radius: 999px;
      flex-shrink: 0
    }

    .collab-av:first-child {
      margin-left: 0
    }

    .collab-btn {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--bd);
      border-radius: 8px;
      background: #fff;
      color: var(--tx);
      font-size: 0.76rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap
    }

    .collab-btn:hover {
      background: var(--sf2)
    }

    .collab-btn.on {
      background: var(--prs);
      border-color: #93c5fd;
      color: var(--pr)
    }

    .tb-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-left: auto;
      flex-shrink: 0
    }

    .btn-sec {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--bd);
      border-radius: 9px;
      background: #fff;
      color: var(--tx);
      font-size: 0.82rem;
      font-weight: 600;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .btn-sec:hover {
      background: var(--sf2)
    }

    .btn-sm {
      min-height: 34px;
      padding: 0 12px;
      border: none;
      border-radius: 9px;
      background: var(--pr);
      color: #fff;
      font-size: 0.82rem;
      font-weight: 700;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .btn-sm:hover {
      background: var(--prd)
    }

    .tb-profile {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 4px;
      border-radius: 10px;
      border: 1px solid var(--bd);
      background: #fff;
      cursor: pointer;
      transition: all 0.15s;
      position: relative
    }

    .tb-profile:hover {
      background: var(--sf2);
      border-color: #93c5fd
    }

    .avatar-sm {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden;
      position: relative
    }

    .avatar-sm img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      position: absolute;
      inset: 0
    }

    .tb-pro-name {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--tx);
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pro-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      width: 260px;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
      z-index: 500;
      overflow: hidden;
      animation: slideUp 0.2s ease
    }

    .pro-dropdown-header {
      padding: 14px;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .pro-dropdown-header .avatar-sm {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 0.88rem
    }

    .pro-dropdown-header .pro-info {
      flex: 1;
      min-width: 0
    }
    .rh,
.rot-h {
  pointer-events: auto;
}
.cv-el * {
  pointer-events: none;
}
    .pro-dropdown-header .pro-info strong {
      display: block;
      font-size: 0.86rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pro-dropdown-header .pro-info span {
      display: block;
      font-size: 0.72rem;
      color: var(--mt)
    }

    .pro-dropdown-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      font-size: 0.84rem;
      font-weight: 500;
      color: var(--tx);
      cursor: pointer;
      transition: background 0.1s;
      border: none;
      background: none;
      width: 100%;
      text-align: left
    }

    .pro-dropdown-item:hover {
      background: var(--sf2)
    }

    .pro-dropdown-item i {
      width: 18px;
      text-align: center;
      color: var(--mt);
      font-size: 0.82rem
    }

    .pro-dropdown-item.danger {
      color: var(--er)
    }

    .pro-dropdown-item.danger i {
      color: var(--er)
    }

    .pro-dropdown-sep {
      height: 1px;
      background: var(--bd);
      margin: 4px 0
    }

    .main-grid {
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr) 270px;
      overflow: hidden;
      min-height: 0
    }

    .panel {
      border-right: 1px solid var(--bd);
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0
    }

    .panel-r {
      border-right: none;
      border-left: 1px solid var(--bd)
    }

    .p-tabs {
      display: flex;
      border-bottom: 1px solid var(--bd);
      flex-shrink: 0
    }

    .p-tab {
      flex: 1;
      padding: 10px 6px;
      border: none;
      background: none;
      color: var(--mt);
      font-size: 0.74rem;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.12s
    }

    .p-tab:hover {
      color: var(--tx)
    }

    .p-tab.on {
      color: var(--pr);
      border-bottom-color: var(--pr)
    }

    .p-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px
    }

    .p-sec {
      margin-bottom: 16px
    }

    .p-sec-title {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--mt);
      margin-bottom: 8px
    }

    .el-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
    }

    .el-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 4px;
      border-radius: 9px;
      border: 1px solid var(--bd);
      background: #fff;
      color: var(--tx);
      font-size: 0.68rem;
      font-weight: 600;
      transition: all 0.12s
    }

    .el-btn:hover {
      border-color: #93c5fd;
      background: #eff6ff;
      color: var(--pr)
    }

    .el-btn i,
    .el-btn .el-emoji {
      font-size: 0.95rem
    }

    .el-btn .el-emoji {
      line-height: 1
    }

    .swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .swatch {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 2px solid rgba(255, 255, 255, .8);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
      cursor: pointer;
      transition: transform 0.1s
    }

    .swatch:hover {
      transform: scale(1.15)
    }

    .tmpl-card {
      border-radius: 12px;
      border: 1px solid var(--bd);
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      background: #fff;
      margin-bottom: 8px
    }

    .tmpl-card:hover {
      border-color: #93c5fd;
      box-shadow: 0 4px 14px rgba(37, 99, 235, .08);
      transform: translateY(-1px)
    }

    .tmpl-thumb {
      aspect-ratio: 16 / 9;
      min-height: 64px;
      height: auto;
      position: relative;
      background-size: cover;
      background-position: center
    }

    .tmpl-info {
      padding: 7px 10px
    }

    .tmpl-info strong {
      display: block;
      font-size: 0.76rem
    }

    .tmpl-info span {
      display: block;
      font-size: 0.66rem;
      color: var(--mt);
      margin-top: 1px
    }

    .layer-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 7px;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.08s;
      border: 1px solid transparent;
      margin-bottom: 2px
    }

    .layer-item:hover {
      background: var(--sf2)
    }

    .layer-item.on {
      background: var(--prs);
      border-color: #93c5fd
    }

    .layer-ico {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      background: var(--sf2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.58rem;
      color: var(--mt);
      flex-shrink: 0;
      overflow: hidden
    }

    .layer-ico .layer-emoji {
      font-size: 0.8rem
    }

    .layer-nm {
      flex: 1;
      font-size: 0.73rem;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .layer-acts {
      display: flex;
      gap: 1px;
      opacity: 0;
      transition: opacity 0.12s
    }

    .layer-item:hover .layer-acts,
    .layer-item.on .layer-acts {
      opacity: 1
    }

    .la {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: none;
      color: var(--mt);
      cursor: pointer;
      border-radius: 4px;
      font-size: 0.58rem
    }

    .la:hover {
      background: #fff;
      color: var(--tx)
    }

    .la.off {
      opacity: 0.3;
      pointer-events: none
    }

    .canvas-area {
      background: var(--sfd);
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      min-width: 0;
      min-height: 0;
      container-type: size
    }

    .canvas-stage {
      border-radius: 6px;
      padding: 2px;
      display: inline-block;
      box-shadow: var(--shl);
      background: radial-gradient(circle at top left, rgba(59, 130, 246, .04), transparent 30%), linear-gradient(180deg, #dbe3ec, #d6dee9);
      max-width: 100%
    }



    .cv-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.12;
      background-image: linear-gradient(rgba(0, 0, 0, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .12) 1px, transparent 1px);
      background-size: 20px 20px
    }

    .cv-el {
      position: absolute;
      cursor: move;
      z-index: 10;
      touch-action: none
    }

    .cv-el.locked {
      cursor: default
    }

    .sel-box {
      position: absolute;
      pointer-events: none;
      border: 2px solid #3b82f6;
      inset: -1px;
      border-radius: 1px
    }

    .rh {
      position: absolute;
      width: 14px;
      height: 14px;
      background: #fff;
      border: 2px solid #3b82f6;
      border-radius: 3px;
      pointer-events: auto;
      touch-action: none;
      z-index: 20;
      box-sizing: border-box
    }

    .rh.nw {
      top: -7px;
      left: -7px;
      cursor: nw-resize
    }

    .rh.ne {
      top: -7px;
      right: -7px;
      cursor: ne-resize
    }

    .rh.sw {
      bottom: -7px;
      left: -7px;
      cursor: sw-resize
    }

    .rh.se {
      bottom: -7px;
      right: -7px;
      cursor: se-resize
    }

    .rh.n {
      top: -7px;
      left: 50%;
      margin-left: -7px;
      cursor: n-resize
    }

    .rh.s {
      bottom: -7px;
      left: 50%;
      margin-left: -7px;
      cursor: s-resize
    }

    .rh.w {
      top: 50%;
      left: -7px;
      margin-top: -7px;
      cursor: w-resize
    }

    .rh.e {
      top: 50%;
      right: -7px;
      margin-top: -7px;
      cursor: e-resize
    }

    .rot-h {
      position: absolute;
      top: -30px;
      left: 50%;
      margin-left: -7px;
      width: 14px;
      height: 14px;
      background: #fff;
      border: 2px solid #3b82f6;
      border-radius: 50%;
      pointer-events: all;
      cursor: grab;
      z-index: 10
    }

    .rot-h::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      margin-left: -0.5px;
      width: 1px;
      height: 12px;
      background: #3b82f6
    }

    .rot-h:active {
      cursor: grabbing
    }

    .pg {
      margin-bottom: 14px
    }

    .pg-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--mt);
      margin-bottom: 5px
    }

    .pg-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px
    }

    .pg-cell {
      display: grid;
      gap: 3px
    }

    .pg-cell span {
      font-size: 0.66rem;
      color: var(--mt)
    }

    .pg-in {
      width: 100%;
      min-height: 30px;
      padding: 0 7px;
      border-radius: 7px;
      border: 1px solid var(--bd);
      background: #fff;
      font-size: 0.78rem;
      color: var(--tx);
      outline: none;
      transition: border-color 0.12s
    }

    .pg-in:focus {
      border-color: var(--pr);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .06)
    }

    .pg-sm {
      min-height: 26px;
      font-size: 0.74rem
    }

    .pg-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 3px;
      background: var(--sfd);
      outline: none
    }

    .pg-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--pr);
      cursor: pointer;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
    }

    .pg-color {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .pg-ci {
      width: 28px;
      height: 28px;
      border: 2px solid var(--bd);
      border-radius: 6px;
      cursor: pointer;
      padding: 0;
      overflow: hidden;
      flex-shrink: 0
    }

    .pg-ci::-webkit-color-swatch-wrapper {
      padding: 0
    }

    .pg-ci::-webkit-color-swatch {
      border: none;
      border-radius: 4px
    }

    .align-row {
      display: flex;
      gap: 3px
    }

    .ab {
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--bd);
      border-radius: 6px;
      background: #fff;
      color: var(--mt);
      cursor: pointer;
      font-size: 0.62rem;
      transition: all 0.1s
    }

    .ab:hover {
      background: var(--sf2);
      color: var(--tx)
    }

    .ab.on {
      background: var(--prs);
      color: var(--pr);
      border-color: #93c5fd
    }

    .act-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px
    }

    .act-btn {
      min-height: 30px;
      padding: 0 6px;
      border: 1px solid var(--bd);
      border-radius: 7px;
      background: #fff;
      color: var(--tx);
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.12s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px
    }

    .act-btn:hover {
      background: var(--sf2)
    }

    .act-btn.red {
      color: var(--er)
    }

    .act-btn.red:hover {
      background: #fee2e2;
      border-color: #fca5a5
    }

    .bg-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px
    }

    .bg-sw {
      aspect-ratio: 1;
      border-radius: 7px;
      border: 2px solid var(--bd);
      cursor: pointer;
      transition: all 0.12s
    }

    .bg-sw:hover {
      transform: scale(1.08);
      border-color: var(--mt)
    }

    .bg-sw.on {
      border-color: var(--pr);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .18)
    }

    .ai-row {
      display: flex;
      gap: 7px
    }

    .ai-in {
      flex: 1;
      min-height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--bd);
      background: #fff;
      font-size: 0.8rem;
      color: var(--tx);
      outline: none
    }

    .ai-in:focus {
      border-color: var(--pr);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .08)
    }

    .ai-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px
    }

    .ai-chip {
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid var(--bd);
      background: #fff;
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--mt);
      cursor: pointer;
      transition: all 0.12s
    }

    .ai-chip:hover {
      border-color: #93c5fd;
      color: var(--pr);
      background: #eff6ff
    }

    .ai-load {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px;
      border-radius: 9px;
      background: var(--prs);
      font-size: 0.76rem;
      color: var(--pr);
      font-weight: 600;
      margin-top: 8px
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .ai-load i {
      animation: spin 1s linear infinite
    }

    .empty-st {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 30px;
      text-align: center;
      color: var(--mt)
    }

    .empty-st i {
      font-size: 2rem;
      opacity: 0.25
    }

    .empty-st p {
      font-size: 0.82rem;
      max-width: 180px
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .35);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.15s ease
    }

    .modal-box {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
      width: 520px;
      max-width: 94vw;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: slideUp 0.22s ease
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--bd);
      flex-shrink: 0
    }

    .modal-header h2 {
      font-size: 1.1rem;
      font-weight: 700
    }

    .modal-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: var(--sf2);
      border-radius: 8px;
      color: var(--mt);
      cursor: pointer;
      font-size: 0.82rem;
      transition: all 0.12s
    }

    .modal-close:hover {
      background: var(--bd);
      color: var(--tx)
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px
    }

    .modal-tabs {
      display: flex;
      gap: 4px;
      padding: 0 20px;
      border-bottom: 1px solid var(--bd)
    }

    .modal-tab {
      padding: 10px 14px;
      border: none;
      background: none;
      color: var(--mt);
      font-size: 0.84rem;
      font-weight: 600;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.12s
    }

    .modal-tab:hover {
      color: var(--tx)
    }

    .modal-tab.on {
      color: var(--pr);
      border-bottom-color: var(--pr)
    }

    .avatar-lg {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform 0.15s
    }

    .avatar-lg:hover {
      transform: scale(1.04)
    }

    .avatar-lg img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      position: absolute;
      inset: 0
    }

    .avatar-edit {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.15s;
      color: #fff;
      font-size: 0.9rem;
      border-radius: 16px
    }

    .avatar-lg:hover .avatar-edit {
      opacity: 1
    }

    .profile-stat {
      padding: 14px;
      border-radius: 12px;
      background: var(--sf2);
      text-align: center
    }

    .profile-stat strong {
      display: block;
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--pr)
    }

    .profile-stat span {
      display: block;
      font-size: 0.72rem;
      color: var(--mt);
      margin-top: 2px
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px
    }

    .plan-card {
      border: 1px solid var(--bd);
      border-radius: 14px;
      background: var(--sf);
      padding: 16px;
      display: flex;
      flex-direction: column;
      min-height: 360px
    }

    .plan-card.pro {
      border-color: #93c5fd;
      box-shadow: 0 18px 44px rgba(37, 99, 235, .12)
    }

    .plan-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px
    }

    .plan-name {
      font-weight: 800;
      font-size: 1.05rem
    }

    .plan-price {
      margin-top: 6px;
      font-weight: 800;
      font-size: 1.6rem;
      color: var(--pr)
    }

    .plan-desc {
      color: var(--mt);
      line-height: 1.5;
      font-size: .84rem;
      margin-bottom: 14px
    }

    .plan-badge {
      border-radius: 999px;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      background: #eff6ff;
      padding: 5px 9px;
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase
    }

    .plan-features {
      display: grid;
      gap: 9px;
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
      flex: 1
    }

    .plan-features li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--tx);
      font-size: .84rem;
      line-height: 1.35
    }

    .plan-features i {
      color: #16a34a;
      margin-top: 2px
    }

    .plan-note {
      margin-top: 14px;
      border-radius: 12px;
      border: 1px solid #fde68a;
      background: #fffbeb;
      color: #92400e;
      padding: 12px;
      line-height: 1.45;
      font-size: .82rem
    }

    .tier-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      padding: 5px 9px;
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase
    }

    @media (max-width: 760px) {
      .plan-grid {
        grid-template-columns: 1fr
      }
    }

    .saved-design-card {
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--bd);
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 8px
    }

    .saved-design-card:hover {
      border-color: #93c5fd;
      background: #f0f6ff
    }

    .saved-design-thumb {
      width: 56px;
      height: 42px;
      border-radius: 8px;
      flex-shrink: 0;
      border: 1px solid var(--bd)
    }

    .saved-design-info {
      flex: 1;
      min-width: 0
    }

    .saved-design-info strong {
      display: block;
      font-size: 0.84rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .saved-design-info span {
      display: block;
      font-size: 0.7rem;
      color: var(--mt);
      margin-top: 2px
    }

    .saved-design-acts {
      display: flex;
      gap: 4px;
      flex-shrink: 0
    }

    .sda {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--bd);
      border-radius: 7px;
      background: #fff;
      color: var(--mt);
      cursor: pointer;
      font-size: 0.7rem;
      transition: all 0.1s
    }

    .sda:hover {
      background: var(--sf2);
      color: var(--tx)
    }

    .sda.del:hover {
      background: #fef2f2;
      color: var(--er);
      border-color: #fecaca
    }

    .confirm-box {
      padding: 20px;
      text-align: center
    }

    .confirm-box p {
      font-size: 0.92rem;
      margin-bottom: 18px;
      color: var(--tx);
      line-height: 1.5
    }

    .confirm-box .confirm-acts {
      display: flex;
      gap: 8px;
      justify-content: center
    }

    .ep-modal,
    .ip-modal {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
      width: 400px;
      max-width: 92vw;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: slideUp 0.2s ease
    }

    .ep-header,
    .ip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--bd)
    }

    .ep-header h3,
    .ip-header h3 {
      font-size: 0.92rem;
      font-weight: 700;
      margin: 0
    }

    .ep-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: var(--sf2);
      border-radius: 7px;
      color: var(--mt);
      cursor: pointer;
      font-size: 0.78rem
    }

    .ep-cats {
      display: flex;
      gap: 4px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--bd);
      overflow-x: auto;
      flex-shrink: 0
    }

    .ep-cat {
      padding: 4px 9px;
      border: none;
      border-radius: 7px;
      background: transparent;
      color: var(--mt);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.1s
    }

    .ep-cat:hover {
      background: var(--sf2);
      color: var(--tx)
    }

    .ep-cat.on {
      background: var(--prs);
      color: var(--pr)
    }

    .ep-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 2px;
      padding: 8px 10px;
      overflow-y: auto;
      flex: 1
    }

    .ep-item {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.08s;
      border: none;
      background: none
    }

    .ep-item:hover {
      background: var(--prs);
      transform: scale(1.2)
    }

    .ip-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      padding: 10px;
      overflow-y: auto;
      flex: 1
    }

    .ip-item {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      border-radius: 9px;
      border: 1px solid var(--bd);
      background: #fff;
      color: var(--tx);
      cursor: pointer;
      transition: all 0.1s
    }

    .ip-item:hover {
      border-color: #93c5fd;
      background: #eff6ff;
      color: var(--pr);
      transform: scale(1.05)
    }

    .toast-box {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .toast {
      padding: 10px 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--bd);
      box-shadow: var(--shl);
      font-size: 0.82rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: tin 0.3s ease;
      min-width: 200px
    }

    .toast.bye {
      animation: tout 0.3s ease forwards
    }

    .toast.ok i {
      color: var(--ok)
    }

    .toast.er i {
      color: var(--er)
    }

    .toast.inf i {
      color: var(--pr)
    }

    .toast.wr i {
      color: var(--wr)
    }

    @keyframes tin {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.96)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes tout {
      to {
        opacity: 0;
        transform: translateY(14px) scale(.96)
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .fi {
      animation: fadeIn 0.3s ease
    }

    .su {
      animation: slideUp 0.3s ease
    }

    @media(max-width:1100px) {
      .auth-wrap {
        grid-template-columns: 1fr
      }

      .auth-left {
        display: none
      }

      .main-grid {
        grid-template-columns: 220px minmax(0, 1fr) 230px
      }
    }

    @media(max-width:860px) {
      .main-grid {
        grid-template-columns: 1fr
      }

      .panel,
      .panel-r {
        display: none
      }

      .tb-group.sz,
      .tb-group.zm {
        display: none
      }

      .canvas-area {
        padding: 14px;
        align-items: flex-start
      }
    }

    @media(max-width:600px) {
      .auth-wrap {
        padding: 16px
      }

      .topbar {
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px
      }

      .tb-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end
      }

      .canvas-area {
        padding: 10px
      }
    }