:root {
      /* Dark theme (default for night time) */
      --bg:#0b1020; 
      --card:#121832; 
      --muted:#99a3b3; 
      --text:#eef1f7; 
      --accent:#7c9cff; 
      --ok:#1ec28b; 
      --warn:#ffcf5b; 
      --err:#ff6b6b;
      --border: rgba(255,255,255,.08);
      /* RGB values for transitions */
      --text-rgb: 238, 241, 247;
      --accent-rgb: 124, 156, 255;
      --card-rgb: 18, 24, 50;
    }
    
    /* Light theme */
    [data-theme="light"] {
      --bg:#f8fafc; 
      --card:#ffffff; 
      --muted:#64748b; 
      --text:#0f172a; 
      --accent:#3b82f6; 
      --ok:#10b981; 
      --warn:#f59e0b; 
      --err:#ef4444;
      --border: rgba(15, 23, 42, 0.1);
      /* RGB values for transitions */
      --text-rgb: 15, 23, 42;
      --accent-rgb: 59, 130, 246;
      --card-rgb: 255, 255, 255;
    }
    
    *{box-sizing:border-box}
    body{margin:0;background: var(--bg);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);
      transition: background-color 0.3s ease, color 0.3s ease;}
    header{padding:24px 16px;text-align:center;margin-top:50px;}
    h1{margin:0 0 6px;font-size:clamp(22px,3.5vw,34px)}
    p.sub{margin:0;color:var(--muted)}
    .wrap{max-width:1200px;margin:0 auto;padding:5px}

    .uploader{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
    @media (max-width:900px){.uploader{grid-template-columns:1fr}} 

    .card{background:linear-gradient(180deg,rgba(var(--card-rgb,124,156,255),.04),rgba(var(--card-rgb,124,156,255),.02));border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition: background 0.3s ease, border 0.3s ease;}
    .pad{padding:18px}

    .drop{display:flex;align-items:center;justify-content:center;min-height:200px;border:2px dashed var(--border);border-radius:14px;cursor:pointer;transition:.2s;border-color: rgba(var(--text-rgb, 238, 241, 247), .2);}
    .drop:hover{border-color:var(--accent);background:rgba(var(--accent-rgb,124,156,255),.05)}
    .drop input{display:none}
    .drop span{opacity:.85}

    .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
    .opt{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}
    .opt label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
    .opt small{display:block;color:var(--muted)}

    .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    button{appearance:none;border:0;background:var(--accent);color:#08102a;font-weight:700;padding:12px 14px;border-radius:12px;cursor:pointer}
    button.secondary{background:var(--card);color:var(--text)}
    button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
    button:disabled{opacity:.5;cursor:not-allowed}

    .preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
    .tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
    .tile canvas{width:64px;height:64px;image-rendering:pixelated}
    .tile b{display:block;margin-top:8px;font-size:13px}
    .tile small{color:var(--muted)}

    .footer{opacity:.7;text-align:center;padding:20px}
    .note{font-size:13px;color:var(--muted)}
    
    /* Header controls */
    .header-controls {
      position: absolute;
      top: 10px;
      right: 20px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    
    /* Language toggle styles */
    .language-toggle {
      display: flex;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .language-toggle:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .lang-option {
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      transition: all 0.3s ease;
    }
    
    .lang-option.active {
      background: var(--accent);
      color: var(--text);
    }
    
    /* Theme toggle styles */
    .theme-toggle {
      position: relative;
      width: 48px;
      height: 28px;
      border-radius: 14px;
      background: var(--card);
      border: 1px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 2px;
      transition: all 0.3s ease;
    }
    
    .theme-toggle:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .theme-toggle::before {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background: var(--accent);
      border-radius: 50%;
      transition: transform 0.3s ease;
      transform: translateX(0);
    }
    
    [data-theme="light"] .theme-toggle::before {
      transform: translateX(20px);
    }
    
    .theme-toggle svg {
      position: absolute;
      width: 16px;
      height: 16px;
      z-index: 1;
      color: var(--text);
      transition: opacity 0.3s ease;
    }
    
    .sun-icon {
      left: 4px;
      opacity: 1;
    }
    
    .moon-icon {
      right: 4px;
      opacity: 0.5;
    }
    
    [data-theme="light"] .sun-icon {
      opacity: 0.5;
    }
    
    [data-theme="light"] .moon-icon {
      opacity: 1;
    }
    .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .lang{margin-left:auto}
    select{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px}
    a.link{color:var(--accent)}
    
    .footer {
            text-align: center;
            color: var(--text-rgb);
            padding: 10px 0;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .footer-link {
            padding: 10px 20px;
            background: var(--bg);
            color: var(--text);
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s;
        }
        .footer-link:hover {
            background: var(--bg);
            transform: translateY(-2px);
        }