:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --cyan:#22d3ee;
    --text:#0f172a;
    --muted:#64748b;
    --line:#dbe7f3;
    --panel:rgba(255,255,255,.86);
    --shadow:0 24px 80px rgba(30,64,175,.14);
    --radius:26px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    min-height:100vh;
    background:
        linear-gradient(120deg,rgba(37,99,235,.08),transparent 30%),
        radial-gradient(circle at 90% 5%,rgba(34,211,238,.18),transparent 28%),
        #f7fbff;
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.38;
    background-image:url("data:image/svg+xml,%3Csvg width='80' height='70' viewBox='0 0 80 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2394a3b8' stroke-width='1'%3E%3Cpath d='M40 1l38 22v44L40 89 2 67V23z'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-orb{position:fixed;border-radius:50%;filter:blur(.2px);pointer-events:none;z-index:-1}
.bg-orb-1{width:360px;height:360px;background:rgba(59,130,246,.16);left:-170px;top:90px}
.bg-orb-2{width:260px;height:260px;background:rgba(34,211,238,.20);right:-80px;top:-60px}
.site-header,.layout{width:min(1180px,calc(100% - 36px));margin-inline:auto;position:relative}
.site-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:42px 0 20px}
.site-header h1{margin:10px 0 8px;font-size:clamp(2rem,4vw,4rem);line-height:.96;letter-spacing:-.06em}
.site-header p{margin:0;color:var(--muted);font-size:1.05rem;max-width:640px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:#eaf3ff;color:#1d4ed8;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.admin-link{display:inline-flex;text-decoration:none;background:#0f172a;color:#fff;padding:13px 18px;border-radius:999px;font-weight:800;box-shadow:0 14px 35px rgba(15,23,42,.18)}
.layout{display:grid;grid-template-columns:390px 1fr;gap:24px;padding:10px 0 44px}
.panel{background:var(--panel);border:1px solid rgba(219,231,243,.9);box-shadow:var(--shadow);border-radius:var(--radius);backdrop-filter:blur(14px)}
.control-panel{padding:24px;align-self:start;position:sticky;top:18px}
.panel h2{margin:0 0 14px;font-size:1.05rem;letter-spacing:-.02em}.control-panel h2:not(:first-child){margin-top:26px}
.template-list{display:grid;grid-template-columns:1fr;gap:12px;max-height:270px;overflow:auto;padding-right:4px}
.template-item{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:10px;cursor:pointer;text-align:left;transition:.22s ease;font:inherit;color:var(--text)}
.template-item:hover,.template-item.active{border-color:#60a5fa;box-shadow:0 12px 30px rgba(37,99,235,.13);transform:translateY(-1px)}
.template-item img{width:72px;height:72px;object-fit:cover;border-radius:14px;background:linear-gradient(45deg,#e2e8f0 25%,transparent 25% 75%,#e2e8f0 75%),linear-gradient(45deg,#e2e8f0 25%,#fff 25% 75%,#e2e8f0 75%);background-position:0 0,8px 8px;background-size:16px 16px}
.template-item span{font-weight:800;font-size:.92rem;line-height:1.25}.empty-box{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:18px;padding:16px;line-height:1.5}
.upload-box{display:grid;gap:8px;border:2px dashed #93c5fd;border-radius:22px;background:linear-gradient(180deg,#eff6ff,#fff);padding:24px;text-align:center;cursor:pointer;transition:.2s ease}.upload-box:hover{border-color:#2563eb;transform:translateY(-1px)}.upload-box input{display:none}.upload-box small,.hint,.preview-note{color:var(--muted);line-height:1.5}.field{display:grid;gap:9px}.field label{font-weight:800;color:#334155}.field input[type=range]{width:100%;accent-color:var(--primary)}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer;transition:.22s ease;font-size:.94rem}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;box-shadow:0 18px 34px rgba(37,99,235,.26)}.btn-soft{background:#eaf3ff;color:#1d4ed8}.preview-panel{padding:24px;min-width:0}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.preview-head h2{font-size:1.5rem;margin:9px 0 0}.canvas-wrap{width:100%;display:grid;place-items:center;background:linear-gradient(45deg,#e2e8f0 25%,transparent 25% 75%,#e2e8f0 75%),linear-gradient(45deg,#e2e8f0 25%,#f8fafc 25% 75%,#e2e8f0 75%);background-position:0 0,12px 12px;background-size:24px 24px;border:1px solid var(--line);border-radius:24px;overflow:hidden;padding:14px;touch-action:none}canvas{display:block;width:100%;max-width:720px;height:auto;border-radius:18px;box-shadow:0 18px 60px rgba(15,23,42,.16);background:transparent;cursor:grab}canvas:active{cursor:grabbing}.preview-note{text-align:center;margin-top:14px;font-size:.92rem}
.alert{border-radius:16px;padding:13px 15px;margin-bottom:16px;font-weight:750}.alert.success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.alert.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
@media(max-width:900px){.site-header{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr}.control-panel{position:relative;top:auto}.preview-head{align-items:flex-start;flex-direction:column}.btn-primary{width:100%}.template-list{grid-template-columns:1fr 1fr}.template-item{grid-template-columns:1fr}.template-item img{width:100%;height:120px}}
@media(max-width:520px){.site-header,.layout{width:min(100% - 22px,1180px)}.panel{border-radius:20px}.control-panel,.preview-panel{padding:16px}.template-list{grid-template-columns:1fr}.canvas-wrap{padding:8px;border-radius:18px}.site-header h1{font-size:2.15rem}}