* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #f3f6fb 100%); color: #0f172a; position: relative; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: -120% -40%; pointer-events: none; z-index: 0; opacity: 0.4; background-image: repeating-linear-gradient(-25deg, rgba(37, 99, 235, 0.08) 0 2px, transparent 2px 22px); animation: rainSlide 18s linear infinite; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; display: grid; gap: 16px; }
.narrow { max-width: 480px; }
.card { position: relative; z-index: 1; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); padding: 20px; animation: up .3s ease; }
.hero { background: linear-gradient(120deg, #ffffff 0%, #edf4ff 100%); border: 1px solid #dbe7ff; }
.hero-layout { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.hero-brand { display: flex; justify-content: center; }
.hero-logo { width: 92px; height: 92px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); padding: 8px; }
.hero-content h1 { margin: 0 0 6px; color: #1e3a8a; }
.hero-content p { margin: 0; }
.hero-alt { margin-top: 6px !important; font-size: 14px; color: #475569; font-weight: 600; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
label { display: block; margin: 10px 0 6px; font-size: 14px; }
input, select, textarea, button, .btn { width: 100%; border: 1px solid #d9e0ec; border-radius: 10px; padding: 10px 12px; font: inherit; }
textarea { min-height: 90px; resize: vertical; }
button, .btn { cursor: pointer; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; text-align: center; text-decoration: none; display: inline-block; margin-top: 10px; box-shadow: 0 8px 18px rgba(37, 99, 235, .25); }
button:hover, .btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn i, button i { margin-right: 6px; }
.ghost-btn { width: auto; margin-top: 0; background: #eef2f7; color: #0f172a; padding: 8px 12px; border-radius: 999px; }
.ghost-btn:hover { background: #dfe7f2; }
.form-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.form-tab { margin-top: 0; background: #eef2f7; color: #334155; }
.form-tab.active { background: #2563eb; color: #fff; }
.inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.hidden { display: none !important; }
#previewArea { min-height: 260px; display: grid; place-items: center; border: 1px dashed #dbe5f3; border-radius: 10px; padding: 12px; }
#resultImage, .donation-qr { max-width: 220px; border-radius: 10px; }
.template-header { margin-top: 8px; }
.m0 { margin: 0; }
.template-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.template-card { background: #fff; color: #0f172a; border: 1px solid #d9e0ec; border-radius: 14px; padding: 10px; text-align: left; margin-top: 0; transition: all .2s ease; }
.template-card:hover { border-color: #93c5fd; transform: translateY(-1px); background: #fff; }
.template-card.active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.template-tile { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; display: grid; place-items: center; position: relative; overflow: hidden; }
.template-preview { width: 76px; height: 76px; border-radius: 10px; border: 1px solid #e9eef8; display: grid; place-items: center; overflow: hidden; padding: 8px; background: #fff; }
.template-preview img { width: 76px !important; height: 76px !important; }
.template-badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; background: #111827; color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.frame-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.frame-card { margin-top: 0; background: #fff; border: 1px solid #d9e0ec; border-radius: 12px; padding: 8px; }
.frame-card:hover { border-color: #93c5fd; background: #fff; }
.frame-card.active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

.frame-icon { height: 70px; border-radius: 8px; position: relative; background: #fff; border: 2px solid #111827; }
.f-none { border-color: transparent; }
.f-none::before, .f-none::after { content: ""; position: absolute; width: 16px; height: 16px; border: 3px solid #111827; }
.f-none::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.f-none::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.f-tag-top::before, .f-tag-bottom::before { content: ""; position: absolute; left: 8px; right: 8px; height: 10px; background: #111827; border-radius: 2px; }
.f-tag-top::before { top: 8px; }
.f-tag-bottom::before { bottom: 8px; }
.f-tag-top::after, .f-tag-bottom::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.f-tag-top::after { top: 18px; border-top: 8px solid #111827; }
.f-tag-bottom::after { bottom: 18px; border-bottom: 8px solid #111827; }
.f-panel-bottom::before, .f-panel-top::before { content: ""; position: absolute; left: 0; right: 0; height: 18px; background: #111827; }
.f-panel-bottom::before { bottom: 0; border-radius: 0 0 6px 6px; }
.f-panel-top::before { top: 0; border-radius: 6px 6px 0 0; }
#previewArea[class*="frame-"] #previewCanvas { position: relative; padding: 14px; border-radius: 12px; }
/* Give the label more breathing room so it won't crowd the QR */
#previewArea.frame-tag-bottom #previewCanvas,
#previewArea.frame-panel-bottom #previewCanvas { padding-bottom: 34px; }
#previewArea.frame-tag-top #previewCanvas,
#previewArea.frame-panel-top #previewCanvas { padding-top: 34px; }
#previewArea.frame-tag-top #previewCanvas::before,
#previewArea.frame-tag-bottom #previewCanvas::before,
#previewArea.frame-panel-bottom #previewCanvas::before,
#previewArea.frame-panel-top #previewCanvas::before { content: "SCAN ME"; position: absolute; left: 50%; transform: translateX(-50%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .8px; z-index: 2; }
#previewArea.frame-tag-top #previewCanvas::after,
#previewArea.frame-tag-bottom #previewCanvas::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; z-index: 2; }
#previewArea.frame-tag-top #previewCanvas::before { top: 0; background: #111827; padding: 3px 16px; border-radius: 0 0 6px 6px; }
#previewArea.frame-tag-top #previewCanvas::after { top: 24px; border-top: 10px solid #111827; }
#previewArea.frame-tag-bottom #previewCanvas::before { bottom: 8px; background: #111827; padding: 3px 16px; border-radius: 6px 6px 0 0; }
#previewArea.frame-tag-bottom #previewCanvas::after { bottom: 32px; border-bottom: 10px solid #111827; }
#previewArea.frame-panel-bottom #previewCanvas::before { bottom: 8px; background: #111827; left: 0; right: 0; transform: none; text-align: center; padding: 6px 0; border-radius: 0 0 10px 10px; }
#previewArea.frame-panel-top #previewCanvas::before { top: 0; background: #111827; left: 0; right: 0; transform: none; text-align: center; padding: 6px 0; border-radius: 10px 10px 0 0; }
.info { background: linear-gradient(120deg, #ffffff 0%, #f7faff 100%); border: 1px solid #e3ecff; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.info-item { background: #fff; border: 1px solid #e9eef9; border-radius: 12px; padding: 12px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05); }
.info-item h3 { margin: 0 0 8px; color: #1e3a8a; }
.info-item p { margin: 0; color: #334155; }
.info ul { margin: 0; padding-left: 18px; color: #334155; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: #eff6ff; border-radius: 12px; padding: 12px; }
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #eef2f7; padding: 10px; text-align: left; font-size: 14px; }
.danger { background: #ef4444; }
.error { color: #dc2626; background: #fee2e2; padding: 10px; border-radius: 8px; }
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: grid; place-items: center; padding: 16px; z-index: 9999; }
.modal.hidden { display: none !important; }
.modal-card { background: #fff; width: 100%; max-width: 420px; border-radius: 16px; padding: 20px; position: relative; text-align: center; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25); }
.modal-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; margin-top: 0; border-radius: 999px; background: #eef2f7; color: #0f172a; font-size: 22px; line-height: 1; }
.donation-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.donation-method-btn { margin-top: 0; background: #eef2f7; color: #0f172a; box-shadow: none; border: 1px solid #d9e0ec; }
.donation-method-btn.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-color: transparent; }
.donation-method-brand { display: block; font-weight: 800; font-size: 15px; }
.donation-method-label { display: block; font-size: 12px; opacity: 0.9; }
.donation-preview-wrap { display: grid; gap: 12px; justify-items: center; }
.donation-download-btn { max-width: 240px; }
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 10000; display: grid; gap: 8px; max-width: 360px; }
.toast { border-radius: 12px; padding: 10px 12px; color: #fff; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2); animation: up .2s ease; }
.toast.success { background: linear-gradient(135deg, #16a34a, #15803d); }
.toast.error { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.success-note { color: #166534; background: #dcfce7; padding: 10px; border-radius: 8px; margin: 10px 0 0; }
.page-tab-wrapper { padding: 0; overflow: hidden; }
.page-tab-header { display: flex; background: #eef2f7; border-bottom: 1px solid #d9e0ec; }
.page-tab { margin-top: 0; width: auto; background: transparent; color: #64748b; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 14px 24px; font-weight: 600; font-size: 15px; box-shadow: none; }
.page-tab:hover { background: #e2e8f0; color: #1e3a8a; transform: none; filter: none; }
.page-tab.active { background: #fff; color: #2563eb; border-bottom: 3px solid #2563eb; }
.page-tab-body { padding: 20px; }
.main-panel { display: block; }
.main-panel.hidden { display: none !important; }
.hero-inner { background: linear-gradient(120deg,#ffffff 0%,#edf4ff 100%); border: 1px solid #dbe7ff; border-radius: 16px; padding: 20px; }
.img-section { }
.img-editor-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.img-editor-left { display: flex; flex-direction: column; }
.img-editor-right { border: 1px dashed #dbe5f3; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 320px; overflow: hidden; }
.shape-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.shape-tab { margin-top: 0; background: #eef2f7; color: #334155; border-radius: 10px; }
.shape-tab.active { background: #2563eb; color: #fff; }
.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 14px; }
.checkbox-row input { width: auto; margin: 0; }
.checkbox-row.compact { margin: 0; }
.admin-table-tools { margin-bottom: 12px; }
.row-delete-btn { margin-top: 0; width: auto; min-width: 84px; }
.crop-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.crop-stats .stat { background: #f8fbff; border: 1px solid #dbe5f3; border-radius: 12px; padding: 10px 12px; }
.crop-stats .stat-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.crop-stats strong { display: block; font-size: 14px; color: #0f172a; word-break: break-word; }
.img-note { margin: 6px 0 0; font-size: 12px; color: #64748b; line-height: 1.4; }
.img-hint { color: #94a3b8; font-size: 13px; text-align: center; margin: auto; }
#cropWrapper { position: relative; display: inline-block; user-select: none; cursor: crosshair; touch-action: none; }
#cropImg { display: block; max-width: 100%; max-height: 480px; border-radius: 8px; transform-origin: 0 0; cursor: crosshair; -webkit-user-drag: none; user-drag: none; touch-action: none; }
#cropBox { position: absolute; z-index: 2; border: 2px solid #2563eb; box-shadow: 0 0 0 9999px rgba(15,23,42,0.45); cursor: move; box-sizing: border-box; touch-action: none; }
#cropBox.circle-mode { border-radius: 50%; }
#cropBox .resize-handle { position: absolute; z-index: 3; width: 12px; height: 12px; background: #fff; border: 2px solid #2563eb; border-radius: 2px; }
#cropBox .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
#cropBox .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
#cropBox .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
#cropBox .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
#cropBox .resize-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
#cropBox .resize-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
#cropBox .resize-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
#cropBox .resize-handle.w { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
@media (max-width: 900px) { .img-editor-layout { grid-template-columns: 1fr; } }
@keyframes up { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
@keyframes rainSlide { from { transform: translate3d(0, -12%, 0); } to { transform: translate3d(-14%, 14%, 0); } }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frame-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-layout { grid-template-columns: 1fr; text-align: center; } .hero-logo { width: 82px; height: 82px; } .donation-methods { grid-template-columns: 1fr; } }