: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:#eee;
    color:#1e293b;
    line-height:1.6;
  }

          /* ---- Header / Sidebar / Footer (unchanged) ---- */
    .header{background-color:#fff;width:100%;margin:0;border-bottom:2px solid #cfd6ce;}
     h1{border-bottom:1px solid #eee;padding-bottom:20px;font-size:25px;color:#03A9F4;margin-bottom:10px;}
     h2{font-size:20px;color:#222;}
    .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:1000px;
    margin:30px auto;
    padding:20px 24px;
    background:#fff;
  }

  /* 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;
  }


.site-footer{background:#fff;color:#080000;padding:40px 20px 20px;font-family:'Segoe UI',sans-serif;}
    .footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;max-width:1100px;margin:auto;}
    .footer-content h3,.footer-content h4{color:#222;}
    .footer-left p{max-width:300px;font-size:.95em;line-height:1.6;}
    .footer-links ul{list-style:none;padding:0;}
    .footer-links ul li{margin-bottom:8px;}
    .footer-links ul li a{color:#302f31;text-decoration:none;}
    .footer-links ul li a:hover{text-decoration:underline;}
    .footer-social a{color:#555;text-decoration:none;font-size:.95em;}
    .footer-social a:hover{text-decoration:underline;}
    .footer-bottom{text-align:center;margin-top:30px;font-size:.85em;color:#999;border-top:1px solid #333;padding-top:15px;}.site-footer{background:#fff;color:#080000;padding:40px 20px 20px;font-family:'Segoe UI',sans-serif;}
    .footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;max-width:1100px;margin:auto;}
    .footer-content h3,.footer-content h4{color:#222;}
    .footer-left p{max-width:300px;font-size:.95em;line-height:1.6;}
    .footer-links ul{list-style:none;padding:0;}
    .footer-links ul li{margin-bottom:8px;}
    .footer-links ul li a{color:#302f31;text-decoration:none;}
    .footer-links ul li a:hover{text-decoration:underline;}
    .footer-social a{color:#555;text-decoration:none;font-size:.95em;}
    .footer-social a:hover{text-decoration:underline;}
    .footer-bottom{text-align:center;margin-top:30px;font-size:.85em;color:#999;border-top:1px solid #333;padding-top:15px;}
    
  @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;}