:root{ 
    --primary:#6366f1; 
    --primary-dark:#4f46e5;
    --secondary:#ec4899;
    --dark:#0f172a;
    --light:#f8fafc;
    --gap:20px; 
  }
  
  * { margin:0; padding:0; box-sizing:border-box; }
  body{ 
    font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial; 
    background:#fff;
    color:#1e293b;
    line-height:1.6;
  }

          /* ---- Header / Sidebar / Footer (unchanged) ---- */
    .header{background-color:#fff;width:100%;margin:0;border-bottom:2px solid #cfd6ce;}
    h1{text-align: left;font-size:20px;}
    .main-menu{background-color:#fff;overflow:hidden;margin:0 auto;width:100%;max-width:1130px;color:#222;z-index:9999999;}
    .sidenav{height:100%;width:0;position:fixed;z-index:9999999;top:0;left:0;background-color:#fafafa;overflow-x:hidden;transition:0.5s;padding-top:60px;}
    .sidenav a,.sidenav h3{padding:3px 32px;text-decoration:none;font-size:18px;color:#222;display:block;transition:0.3s;text-align:left;}
    .sidenav a:hover{color:#2A80B9;}
    .sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px;}
    .logo{background: linear-gradient(90deg, #2196F3, #4CAF50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;font-weight:800;}
    
  /* Hero Section */
  .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color:#fff;
    padding:80px 24px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .hero::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity:0.3;
  }
  .hero-content {
    position:relative;
    z-index:1;
    max-width:900px;
    margin:0 auto;
  }
  .hero h1 {
    font-size:56px;
    font-weight:900;
    margin-bottom:20px;
    line-height:1.1;
    letter-spacing:-1px;
  }
  .hero p {
    font-size:20px;
    margin-bottom:40px;
    opacity:0.95;
    font-weight:400;
  }
  .hero-cta {
    display:inline-flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .btn-primary {
    padding:16px 40px;
    background:#fff;
    color:var(--primary);
    border:none;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
  }
  .btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(0,0,0,0.2);
  }
  .btn-secondary {
    padding:16px 40px;
    background:rgba(255,255,255,0.2);
    color:#fff;
    border:2px solid #fff;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s;
    backdrop-filter:blur(10px);
  }
  .btn-secondary:hover {
    background:rgba(255,255,255,0.3);
  }

  /* Main Content */
  .container {
    max-width:1400px;
    margin:0 auto;
    padding:60px 24px;
  }

  /* Controls Section */
  .controls-section {
    background:#fff;
    border-radius:20px;
    padding:32px;
    margin-bottom:48px;
    box-shadow:0 4px 24px rgba(0,0,0,0.06);
    border:1px solid #e2e8f0;
  }
  .controls-header {
    font-size:24px;
    font-weight:700;
    margin-bottom:24px;
    color:var(--dark);
  }
  .controls-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:24px;
    align-items:end;
  }
  .control-group {
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .control-label {
    font-weight:600;
    font-size:14px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  .upload-btn {
    padding:14px 28px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(99,102,241,0.3);
  }
  .upload-btn:hover {
    background:var(--primary-dark);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(99,102,241,0.4);
  }
  .select-box {
    padding:12px 16px;
    border:2px solid #e2e8f0;
    border-radius:10px;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
    background:#fff;
  }
  .select-box:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.1);
  }
  .toggle-group {
    display:flex;
    gap:10px;
  }
  .toggle-btn {
    flex:1;
    padding:12px 20px;
    cursor:pointer;
    border-radius:10px;
    border:2px solid #e2e8f0;
    background:#fff;
    font-weight:600;
    transition:all 0.2s;
  }
  .toggle-btn.active {
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
  }
  .color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .color-picker input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
  }
  .color-picker input[type="color"]::-webkit-color-swatch {
    border: 2px solid #e2e8f0;
    border-radius: 6px;
  }
  .color-picker input[type="color"]::-moz-color-swatch {
    border: 2px solid #e2e8f0;
    border-radius: 6px;
  }

  /* Frames Grid */
  .frames-header {
    text-align:center;
    margin-bottom:48px;
  }
  .frames-header h2 {
    font-size:36px;
    font-weight:800;
    margin-bottom:12px;
    color:var(--dark);
  }
  .frames-header p {
    font-size:18px;
    color:#64748b;
  }
  .grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:var(--gap);
  }
  .frame-wrap {
    position:relative;
    background:#fff;
    border-radius:16px;
    padding:20px;
    transition:all 0.3s;
    cursor:pointer;
    border:2px solid #e2e8f0;
  }
  .frame-wrap:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,0.12);
   
  }
  .dl-btn {
    position:absolute;
    top:30px;
    right:30px;
    padding:10px 16px;
    font-weight:700;
    border-radius:8px;
    border:none;
    background:var(--primary);
    color:#fff;
    display:none;
    z-index:20;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(99,102,241,0.4);
    font-size:14px;
    transition:all 0.2s;
  }
  .dl-btn:hover {
    background:var(--primary-dark);
    transform:scale(1.05);
  }
  .frame-wrap:hover .dl-btn, .frame-wrap.active .dl-btn {
    display:inline-block;
  }
  .export-root {
    width:100%;
    max-width:100%;
    margin:auto;
    transition: all 0.3s ease;
  }
  .frame-img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    background:#fff;
  }
  .frame-box {
    width:100%;
    background:transparent;
    aspect-ratio:4/5;
    display:block;
    overflow:visible;
    position: relative;
  }
  .frame-inner {
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:visible;
  }
  .frame {
    max-height:100%;
    box-sizing:border-box;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .frame-caption {
    font-size:14px;
    color:#475569;
    margin-top:16px;
    text-align:center;
    font-weight:600;
  }

  /* Frame Styles */
  .frame-1 .frame { padding:18px; background: linear-gradient(180deg,#f6efe6,#efe3d4); border:12px solid #8b6951; box-shadow:0 10px 18px rgba(0,0,0,0.25); }
  .frame-2 .frame { padding:14px; background:#fff; border-radius:6px; border:6px solid #e6e6e6; box-shadow:0 10px 28px rgba(0,0,0,0.12); }
  .frame-3 .frame { padding:14px; background:#fff; border:6px solid #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
  .frame-3 .caption { text-align:center; font-size:12px; margin-top:12px; color:#222; position:absolute; bottom:8px; left:0; right:0; }
  .frame-4 .frame { padding:14px; background:#fff; border-radius:18px; border:8px solid #ddd; box-shadow:0 8px 20px rgba(0,0,0,.12); overflow:hidden; }
  .frame-4 .frame-img { border-radius:50%; width:80%; display:block; margin:0 auto; object-fit:cover; }
  .frame-5 .frame { padding:18px; background:#fff; border-left:16px solid #4a4a4a; border-right:6px solid #bfbfbf; border-top:8px solid #cfcfcf; border-bottom:10px solid #9d9d9d; box-shadow:0 8px 20px rgba(0,0,0,0.18); }
  .frame-6 .frame { padding:10px; background:#111; border-radius:6px; display:flex; align-items:center; justify-content:center; }
  .frame-6 .frame-img { width:88%; border:6px solid #111; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04); object-fit:cover; }
  .frame-7 .frame { padding:18px; background:#fff; border:2px solid #efefef; box-shadow:0 6px 14px rgba(0,0,0,0.08); }
  .frame-8 .frame { padding:14px; background:linear-gradient(135deg,#e6e6e6,#bdbdbd); border:10px solid rgba(0,0,0,0.1); box-shadow: 0 12px 26px rgba(0,0,0,0.2); }
  .frame-9 .frame { padding:16px; background:#fff; border:18px solid #333; box-shadow:0 8px 16px rgba(0,0,0,0.25); }
  .frame-10 .frame { padding:18px; background:linear-gradient(180deg,#fff,#eee); border:12px solid #ddd; box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
  .frame-11 .frame { padding:14px; background:#fff; border:8px solid #fafafa; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
  .frame-12 .frame { padding:20px; background:#fff; border:6px solid #d6d6d6; position:relative; box-shadow:0 10px 22px rgba(0,0,0,0.18); }
  .frame-12 .frame:before, .frame-12 .frame:after { content:""; position:absolute; width:28px; height:28px; background:#666; transform:skew(15deg); z-index:2; opacity:0.95; }
  .frame-12 .frame:before { left:-18px; top:-18px; transform:rotate(45deg); } .frame-12 .frame:after { right:-18px; bottom:-18px; transform:rotate(225deg); }
  .frame-13 .frame { padding:16px; background:linear-gradient(135deg,#667eea,#764ba2); border:8px solid #fff; box-shadow:0 12px 28px rgba(102,126,234,0.4); }
  .frame-14 .frame { padding:14px; background:#000; border:4px solid #FFD700; box-shadow:0 8px 20px rgba(255,215,0,0.3); }
  .frame-15 .frame { padding:20px; background:#fff; border-top:20px solid #ff6b6b; border-bottom:20px solid #4ecdc4; border-left:10px solid #45b7d1; border-right:10px solid #f9ca24; }
  .frame-16 .frame { padding:12px; background:linear-gradient(45deg,#fa709a,#fee140); border-radius:20px; box-shadow:0 10px 30px rgba(250,112,154,0.3); }
  .frame-17 .frame { padding:18px; background:#fff; border:12px solid #2c3e50; border-radius:8px; box-shadow:inset 0 0 20px rgba(0,0,0,0.1); }
  .frame-18 .frame { padding:16px; background:linear-gradient(to right,#f857a6,#ff5858); border:6px solid #fff; box-shadow:0 15px 35px rgba(248,87,166,0.4); }
  .frame-19 .frame { padding:14px; background:#fff; border:8px dashed #3498db; box-shadow:0 8px 16px rgba(52,152,219,0.2); }
  .frame-20 .frame { padding:20px; background:linear-gradient(135deg,#667eea,#f093fb); border:10px solid #fff; border-radius:30px; }
  .frame-21 .frame { padding:16px; background:#1a1a1a; border:6px solid #ff0080; box-shadow:0 0 30px rgba(255,0,128,0.5); }
  .frame-22 .frame { padding:18px; background:#fff; border-left:20px solid #e74c3c; border-right:4px solid #95a5a6; box-shadow:0 10px 25px rgba(231,76,60,0.3); }
  .frame-23 .frame { padding:14px; background:linear-gradient(to bottom,#56ccf2,#2f80ed); border:8px solid #fff; border-radius:16px; }
  .frame-24 .frame { padding:16px; background:#fff; border:12px solid; border-image: linear-gradient(45deg,#f093fb,#f5576c) 1; box-shadow:0 12px 24px rgba(0,0,0,0.15); }
  .frame-25 .frame { padding:20px; background:linear-gradient(135deg,#ffecd2,#fcb69f); border:10px solid #fff; box-shadow:0 15px 40px rgba(252,182,159,0.3); }
  .frame-26 .frame { padding:14px; background:#2d3436; border:8px solid #00b894; box-shadow:0 10px 30px rgba(0,184,148,0.4); }
  .frame-27 .frame { padding:18px; background:#fff; border:6px solid #fdcb6e; border-radius:12px; box-shadow:0 8px 20px rgba(253,203,110,0.3); }
  .frame-28 .frame { padding:16px; background:linear-gradient(to right,#6a11cb,#2575fc); border:10px solid #fff; box-shadow:0 12px 35px rgba(106,17,203,0.4); }
  .frame-29 .frame { padding:14px; background:#fff; border-top:16px solid #e056fd; border-bottom:16px solid #686de0; box-shadow:0 10px 25px rgba(224,86,253,0.25); }
  .frame-30 .frame { padding:20px; background:linear-gradient(135deg,#f5f7fa,#c3cfe2); border:12px solid #8395a7; box-shadow:0 15px 30px rgba(131,149,167,0.3); }
  .frame-31 .frame { padding:16px; background:#000; border:8px double #FFD700; box-shadow:0 0 25px rgba(255,215,0,0.4); }
  .frame-32 .frame { padding:18px; background:#fff; border:10px ridge #8e44ad; box-shadow:0 10px 30px rgba(142,68,173,0.3); }
  .frame-33 .frame { padding:14px; background:linear-gradient(to bottom right,#feac5e,#c779d0,#4bc0c8); border:6px solid #fff; border-radius:25px; }
  .frame-34 .frame { padding:20px; background:#ecf0f1; border:14px groove #34495e; box-shadow:0 12px 28px rgba(52,73,94,0.2); }
  .frame-35 .frame { padding:16px; background:linear-gradient(45deg,#ff9a9e,#fad0c4); border:8px solid #fff; box-shadow:0 15px 35px rgba(255,154,158,0.3); }
  .frame-36 .frame { padding:18px; background:#2c3e50; border:10px outset #e74c3c; box-shadow:0 10px 25px rgba(231,76,60,0.4); }
  .frame-37 .frame { padding:14px; background:#fff; border:12px solid #16a085; border-radius:50%; overflow:hidden; box-shadow:0 12px 30px rgba(22,160,133,0.3); }
  .frame-37 .frame-img { border-radius:50%; }
  .frame-38 .frame { padding:16px; background:linear-gradient(to right,#f83600,#f9d423); border:8px solid #2c3e50; box-shadow:0 10px 28px rgba(248,54,0,0.3); }
  .frame-39 .frame { padding:20px; background:#fff; border-left:18px solid #9b59b6; border-right:18px solid #3498db; box-shadow:0 12px 32px rgba(155,89,182,0.25); }
  .frame-40 .frame { padding:14px; background:linear-gradient(135deg,#667eea,#764ba2,#f093fb); border:10px solid #fff; border-radius:20px; }
  .frame-41 .frame { padding:18px; background:#1e272e; border:8px solid #ff6348; box-shadow:0 0 30px rgba(255,99,72,0.5); }
  .frame-42 .frame { padding:16px; background:#fff; border:12px solid; border-image:linear-gradient(to bottom,#00d2ff,#3a7bd5) 1; box-shadow:0 15px 35px rgba(58,123,213,0.3); }
  .frame-43 .frame { padding:20px; background:linear-gradient(to right,#ffeaa7,#fdcb6e); border:10px solid #d63031; box-shadow:0 12px 30px rgba(214,48,49,0.3); }
  .frame-44 .frame { padding:14px; background:#2d3436; border:8px dashed #00b894; border-radius:15px; box-shadow:0 10px 25px rgba(0,184,148,0.4); }
  .frame-45 .frame { padding:18px; background:#fff; border-top:20px solid #6c5ce7; border-bottom:4px solid #a29bfe; box-shadow:0 12px 28px rgba(108,92,231,0.25); }
  .frame-46 .frame { padding:16px; background:linear-gradient(135deg,#f093fb,#f5576c,#4facfe); border:10px solid #fff; border-radius:30px; }
  .frame-47 .frame { padding:20px; background:#fff; border:14px dotted #e17055; box-shadow:0 10px 30px rgba(225,112,85,0.3); }
  .frame-48 .frame { padding:14px; background:linear-gradient(to bottom,#0f2027,#203a43,#2c5364); border:8px solid #00d2ff; box-shadow:0 15px 40px rgba(0,210,255,0.4); }
  .frame-49 .frame { padding:18px; background:#fff; border:12px solid #fd79a8; border-radius:20px; box-shadow:0 12px 32px rgba(253,121,168,0.3); }
  .frame-49 .frame-img { border-radius:20px; }
  .frame-50 .frame { padding:16px; background:linear-gradient(45deg,#fa8bff,#2bd2ff,#2bff88); border:10px solid #fff; box-shadow:0 15px 40px rgba(250,139,255,0.35); }

  /* Footer */
  .footer {
    background:var(--dark);
    color:#fff;
    padding:60px 24px 30px;
    margin-top:80px;
  }
  .footer-content {
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:40px;
    margin-bottom:40px;
  }
  .footer-section h3 {
    font-size:18px;
    margin-bottom:16px;
    font-weight:700;
  }
  .footer-section p {
    color:#94a3b8;
    margin-bottom:12px;
    line-height:1.8;
  }
  .footer-section ul {
    list-style:none;
  }
  .footer-section ul li {
    margin-bottom:10px;
  }
  .footer-section ul li a {
    color:#94a3b8;
    text-decoration:none;
    transition:color 0.2s;
  }
  .footer-section ul li a:hover {
    color:#fff;
  }
  .footer-bottom {
    max-width:1400px;
    margin:0 auto;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,0.1);
    text-align:center;
    color:#94a3b8;
  }

  @media (max-width:768px) {
    .hero h1 { font-size:36px; }
    .hero p { font-size:16px; }
    .controls-grid { grid-template-columns:1fr; }
    .header-nav { display:none; }
  }
  
  /* Enhanced frame styles for image merging */
  .merged-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .merged-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .frame-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
  
  .sharethis-inline-share-buttons{margin:50px auto;max-width:320px;}