.paper-theme {
  --paper-card-bg: #ffffff;

  --paper-tape-bg: rgba(255, 255, 255, 0.4);
  --paper-tape-border: rgba(255, 255, 255, 0.2);

  --paper-modal-backdrop: rgba(0, 0, 0, 0.5);
  --ttsj-modal-backdrop: rgba(0, 0, 0, 0.5);
  --mt-modal-backdrop: rgba(0, 0, 0, 0.5);

  --paper-btn-border: rgba(255, 255, 255, 0.2);

  --paper-btn-blue-bg: #0ea5e9;
  --paper-btn-blue-shadow: #0369a1;
  --paper-btn-blue-shadow-soft: rgba(3, 105, 161, 0.15);
  --paper-btn-blue-shadow-soft-hover: rgba(3, 105, 161, 0.1);

  --paper-btn-green-bg: #10b981;
  --paper-btn-green-shadow: #059669;
  --paper-btn-green-shadow-soft: rgba(5, 150, 105, 0.15);
  --paper-btn-green-shadow-soft-hover: rgba(5, 150, 105, 0.1);

  --paper-btn-slate-bg: #ffffff;
  --paper-btn-slate-text: #475569;
  --paper-btn-slate-border: #e2e8f0;
  --paper-btn-slate-shadow: #e2e8f0;
  --paper-btn-slate-shadow-soft: rgba(15, 23, 42, 0.08);
  --paper-btn-slate-shadow-soft-hover: rgba(15, 23, 42, 0.06);

  --paper-btn-purple-bg: #6366f1;
  --paper-btn-purple-shadow: #4338ca;
  --paper-btn-purple-shadow-soft: rgba(67, 56, 202, 0.15);
  --paper-btn-purple-shadow-soft-hover: rgba(67, 56, 202, 0.1);

  --paper-btn-red-bg: #ef4444;
  --paper-btn-red-shadow: #b91c1c;
  --paper-btn-red-shadow-soft: rgba(185, 28, 28, 0.15);
  --paper-btn-red-shadow-soft-hover: rgba(185, 28, 28, 0.1);

  --paper-btn-dashed-bg: #ffffff;
  --paper-btn-dashed-border: #bae6fd;
  --paper-btn-dashed-border-hover: #38bdf8;
  --paper-btn-dashed-shadow-soft: rgba(186, 230, 253, 0.2);
  --paper-btn-dashed-shadow-soft-hover: rgba(186, 230, 253, 0.15);
}

.paper-card {
  background: var(--paper-card-bg, #ffffff);
  position: relative;
  clip-path: polygon(
    0% 6px, 5% 0px, 10% 6px, 15% 0px, 20% 6px, 25% 0px, 30% 6px, 35% 0px, 40% 6px, 45% 0px, 50% 6px, 55% 0px, 60% 6px, 65% 0px, 70% 6px, 75% 0px, 80% 6px, 85% 0px, 90% 6px, 95% 0px, 100% 6px,
    100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%, 70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0% calc(100% - 6px)
  );
}

.paper-texture { position: relative; }

.torn-edge {
  clip-path: polygon(
    0% 6px, 5% 0px, 10% 6px, 15% 0px, 20% 6px, 25% 0px, 30% 6px, 35% 0px, 40% 6px, 45% 0px, 50% 6px, 55% 0px, 60% 6px, 65% 0px, 70% 6px, 75% 0px, 80% 6px, 85% 0px, 90% 6px, 95% 0px, 100% 6px,
    100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%, 70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0% calc(100% - 6px)
  );
}

.torn-edge-bottom {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%, 70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0% calc(100% - 6px)
  );
}

.tape {
  position: absolute;
  width: 80px;
  height: 24px;
  background: var(--paper-tape-bg, rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(2px);
  z-index: 10;
  border: 1px solid var(--paper-tape-border, rgba(255, 255, 255, 0.2));
}

.tape-top { top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); }

.paper-btn-3d {
  position: relative;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: 2px solid var(--paper-btn-border, rgba(255, 255, 255, 0.2)) !important;
  will-change: transform, box-shadow;
}

.paper-btn-3d-blue {
  background: var(--paper-btn-blue-bg, #0ea5e9);
  color: white !important;
  box-shadow: 0 6px 0 var(--paper-btn-blue-shadow, #0369a1), 0 8px 15px var(--paper-btn-blue-shadow-soft, rgba(3, 105, 161, 0.15));
}
.paper-btn-3d-blue:hover {
  top: 2px;
  box-shadow: 0 4px 0 var(--paper-btn-blue-shadow, #0369a1), 0 6px 10px var(--paper-btn-blue-shadow-soft-hover, rgba(3, 105, 161, 0.1));
}
.paper-btn-3d-blue:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-blue-shadow, #0369a1);
}

.paper-btn-3d-green {
  background: var(--paper-btn-green-bg, #10b981);
  color: white !important;
  box-shadow: 0 6px 0 var(--paper-btn-green-shadow, #059669), 0 8px 15px var(--paper-btn-green-shadow-soft, rgba(5, 150, 105, 0.15));
}
.paper-btn-3d-green:hover {
  top: 2px;
  box-shadow: 0 4px 0 var(--paper-btn-green-shadow, #059669), 0 6px 10px var(--paper-btn-green-shadow-soft-hover, rgba(5, 150, 105, 0.1));
}
.paper-btn-3d-green:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-green-shadow, #059669);
}

.paper-btn-3d-slate {
  background: var(--paper-btn-slate-bg, #ffffff);
  color: var(--paper-btn-slate-text, #475569) !important;
  border: 2px solid var(--paper-btn-slate-border, #e2e8f0) !important;
  box-shadow: 0 6px 0 var(--paper-btn-slate-shadow, #e2e8f0), 0 8px 15px var(--paper-btn-slate-shadow-soft, rgba(15, 23, 42, 0.08));
}
.paper-btn-3d-slate:hover {
  top: 2px;
  box-shadow: 0 4px 0 var(--paper-btn-slate-shadow, #e2e8f0), 0 6px 10px var(--paper-btn-slate-shadow-soft-hover, rgba(15, 23, 42, 0.06));
}
.paper-btn-3d-slate:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-slate-shadow, #e2e8f0);
}

.paper-btn-3d-purple {
  background: var(--paper-btn-purple-bg, #6366f1);
  color: white !important;
  box-shadow: 0 6px 0 var(--paper-btn-purple-shadow, #4338ca), 0 8px 15px var(--paper-btn-purple-shadow-soft, rgba(67, 56, 202, 0.15));
}
.paper-btn-3d-purple:hover {
  top: 2px;
  box-shadow: 0 4px 0 var(--paper-btn-purple-shadow, #4338ca), 0 6px 10px var(--paper-btn-purple-shadow-soft-hover, rgba(67, 56, 202, 0.1));
}
.paper-btn-3d-purple:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-purple-shadow, #4338ca);
}

.paper-btn-3d-red {
  background: var(--paper-btn-red-bg, #ef4444);
  color: white !important;
  box-shadow: 0 6px 0 var(--paper-btn-red-shadow, #b91c1c), 0 8px 15px var(--paper-btn-red-shadow-soft, rgba(185, 28, 28, 0.15));
}
.paper-btn-3d-red:hover {
  top: 2px;
  box-shadow: 0 4px 0 var(--paper-btn-red-shadow, #b91c1c), 0 6px 10px var(--paper-btn-red-shadow-soft-hover, rgba(185, 28, 28, 0.1));
}
.paper-btn-3d-red:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-red-shadow, #b91c1c);
}

.paper-btn-3d-dashed {
  background: var(--paper-btn-dashed-bg, #ffffff);
  border: 4px dashed var(--paper-btn-dashed-border, #bae6fd) !important;
  box-shadow: 0 6px 0 var(--paper-btn-dashed-border, #bae6fd), 0 8px 15px var(--paper-btn-dashed-shadow-soft, rgba(186, 230, 253, 0.2));
}
.paper-btn-3d-dashed:hover {
  top: 2px;
  border-color: var(--paper-btn-dashed-border-hover, #38bdf8) !important;
  box-shadow: 0 4px 0 var(--paper-btn-dashed-border, #bae6fd), 0 6px 10px var(--paper-btn-dashed-shadow-soft-hover, rgba(186, 230, 253, 0.15));
}
.paper-btn-3d-dashed:active {
  top: 6px;
  box-shadow: 0 0px 0 var(--paper-btn-dashed-border, #bae6fd);
}

.paper-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000 !important;
  background: var(--paper-modal-backdrop, rgba(0,0,0,0.5));
  align-items: center;
  justify-content: center;
}
.paper-modal.show { display: flex; }

.ttsj-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9000;
  background: var(--ttsj-modal-backdrop, rgba(0, 0, 0, 0.5));
  align-items: center;
  justify-content: center;
}
.ttsj-modal.ttsj-modal--open { display: flex; }
.ttsj-modal.show { display: flex; }

.mt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30000 !important;
  background: var(--mt-modal-backdrop, rgba(0, 0, 0, 0.5));
  align-items: center;
  justify-content: center;
}
.mt-modal.show { display: flex; }