:root{
      /* Light theme (default) */
      --bg:#ffffff;
      --text:#0f172a;
      --text-muted:#6b7280;
      --surface:#f8fafc;
      --surface-elevated:#ffffff;
      --border:rgba(0,0,0,0.08);
      --border-light:rgba(0,0,0,0.06);
      --border-hover:rgba(0,0,0,0.12);
      --shadow: 0 6px 18px rgba(16,24,40,0.06);
      --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      --accent:#0ea5ff;
      --accent-600:#0891d9;
      --accent-hover:#0284c7;
      --radius:12px;
      --max-width:1200px;
      --container-padding:clamp(16px, 4vw, 32px);
      --font-system: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      --transition: all 0.15s ease;
      font-family: var(--font-system);
    }

    /* Dark theme */
    [data-theme="dark"], .theme-dark{
      --bg:#0f1419;
      --text:#ffffff;
      --text-muted:#9ca3af;
      --surface:#1a1f2e;
      --surface-elevated:#242938;
      --border:rgba(255,255,255,0.08);
      --border-light:rgba(255,255,255,0.04);
      --border-hover:rgba(255,255,255,0.12);
      --shadow: 0 6px 18px rgba(0,0,0,0.3);
      --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.4), 0 10px 10px -5px rgba(0,0,0,0.2);
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    body{height:100%;margin:0;background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;transition:background-color 0.3s ease,color 0.3s ease}
    .container{max-width:var(--max-width);margin:clamp(12px, 2.5vw, 32px) auto;padding:var(--container-padding)}

    header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(20px, 3.5vw, 40px);padding-bottom: 16px;border-bottom: 1px solid var(--border-light);box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
    .logo{display:flex;align-items:center;gap:16px;height:auto}
    .brand-mark{width:clamp(40px, 8vw, 48px);height:clamp(40px, 8vw, 48px);border-radius:clamp(8px, 2vw, 12px);background:linear-gradient(135deg,var(--accent),var(--accent-600));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:clamp(14px, 3vw, 18px);box-shadow:var(--shadow);padding:clamp(8px, 2vw, 12px)}
    h1{font-size:clamp(18px, 3.5vw, 24px);margin:0;font-weight:700;letter-spacing:-0.025em;color:var(--text)}
    .sub{color:var(--text-muted);font-size:clamp(11px, 2vw, 14px);margin-top:2px}

    .hero{display:grid;grid-template-columns:1fr minmax(280px, 320px);gap:clamp(20px, 3vw, 28px);align-items:start}
    
    /* Large tablet and small desktop */
    @media (max-width:1200px){
      .hero{grid-template-columns:1fr minmax(260px, 300px);gap:clamp(16px, 2.5vw, 24px)}
    }
    
    /* Medium tablet */
    @media (max-width:1024px){
      .hero{grid-template-columns:1fr minmax(240px, 280px);gap:clamp(14px, 2vw, 20px)}
      .card{padding:clamp(14px, 3.5vw, 18px)}
    }
    
    @media (max-width:960px){
      .hero{grid-template-columns:1fr;gap:24px}
      .sidebar{order:2}
      .tabs{justify-content:flex-start;gap:5px}
      .tab{font-size:clamp(12px, 2.3vw, 14px);padding:clamp(8px, 1.9vw, 10px) clamp(10px, 2.9vw, 13px)}
      .container{padding:clamp(14px, 2.8vw, 22px)}
    }
    
    /* Mobile landscape and small tablets */
    @media (max-width:768px){
      .container{padding:14px;margin:16px auto}
      .hero{gap:16px}
      .card{padding:clamp(12px, 3vw, 16px)}
      header{flex-wrap:wrap;gap:14px;margin-bottom:20px}
      .logo{flex:1;min-width:200px;gap:10px;height:auto}
      .brand-mark{width:clamp(36px, 7vw, 44px);height:clamp(36px, 7vw, 44px);font-size:clamp(12px, 3.5vw, 16px);padding:clamp(6px, 1.5vw, 10px)}
      .url-input{flex-wrap:wrap;gap:10px}
      .url-input input{min-width:clamp(120px, 35vw, 180px);flex:1}
      .url-input select{min-width:clamp(100px, 25vw, 120px)}
      .services{gap:6px}
      .service{padding:12px;gap:12px}
    }
    
    /* Stack tabs to prevent text overlap in blue/green zones */
    @media (max-width:768px){
      .tabs{gap:6px;flex-direction:column}
      .tab{width:100%;min-width:0;white-space:normal;line-height:1.3;text-align:center;padding:clamp(10px, 2vw, 12px) clamp(12px, 2.8vw, 14px);font-size:clamp(12px, 2.2vw, 13px)}
    }
    
    /* Mobile portrait */
    @media (max-width:640px){
      .container{padding:14px;margin:6px auto}
      .hero{gap:16px}
      .card{padding:clamp(10px, 2.5vw, 14px)}
      .header{margin-bottom:20px}
      .logo{gap:10px;height:auto}
      .brand-mark{width:clamp(32px, 6vw, 40px);height:clamp(32px, 6vw, 40px);font-size:clamp(10px, 4vw, 14px);padding:clamp(5px, 1.2vw, 8px)}
      .url-input{flex-direction:column;gap:12px}
      .url-input input,.url-input select{min-width:100%;width:100%}
      .form-row{flex-direction:column;align-items:stretch;gap:12px}
      .service{padding:12px;gap:12px}
      .s-ico{width:36px;height:36px;font-size:14px}
    }
    
    /* Small mobile */
    @media (max-width:480px){
      .container{padding:12px;margin:6px auto}
      header{gap:12px;margin-bottom:16px;flex-direction:column;align-items:flex-start}
      .logo{width:100%;gap:8px;height:auto;align-items:center}
      .brand-mark{width:clamp(28px, 5.5vw, 36px);height:clamp(28px, 5.5vw, 36px);font-size:clamp(8px, 4.5vw, 12px);padding:clamp(4px, 1vw, 6px)}
      .hero{gap:16px}
      .card{padding:clamp(10px, 2.5vw, 14px)}
      .tabs{gap:4px;margin-bottom:12px}
      .tab{padding:clamp(5px, 1.2vw, 6px) clamp(6px, 2vw, 8px);font-size:clamp(10px, 1.8vw, 11px);white-space:nowrap;line-height:1.3}
      .trust{gap:6px;flex-wrap:wrap}
      .trust .item{padding:4px 6px;font-size:11px}
      .quick{gap:6px;margin:12px 0;flex-wrap:wrap}
      .pill{padding:4px 8px;font-size:11px}
      .btn-primary,.btn-ghost{padding:10px 14px;font-size:14px}
      .input,.select{padding:10px 12px;font-size:14px}
      .select{padding-right:40px}
    }
    
    
    /* Very small screens */
    @media (max-width:360px){
      .container{padding:8px;margin:4px auto}
      .logo{gap:8px;height:auto}
      .brand-mark{width:clamp(24px, 5vw, 32px);height:clamp(24px, 5vw, 32px);font-size:clamp(6px, 5vw, 10px);padding:clamp(3px, 0.8vw, 5px)}
      .card{padding:clamp(10px, 2.5vw, 14px)}
      .url-input input,.select{font-size:16px} /* Prevent zoom on iOS */
      .url-textarea-wrapper textarea{font-size:16px} /* Prevent zoom on iOS and ensure readability */
      .url-textarea-wrapper textarea::placeholder{font-size:16px} /* Match textarea font size */
      .trust .item{font-size:10px;padding:4px 6px}
      .pill{font-size:10px;padding:4px 8px}
    }

    .card{background:var(--surface);padding:clamp(12px, 4vw, 22px);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border-light);transition:background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
    
    /* Fieldset styling - subtle container */
    fieldset{
      border:1px solid var(--border);
      border-radius:12px;
      padding:16px;
      margin:0;
      background:rgba(0,0,0,0.015);
      transition:all 0.3s ease;
    }
    
    /* Dark theme fieldset */
    [data-theme="dark"] fieldset, .theme-dark fieldset{
      background:rgba(255,255,255,0.02);
      border-color:rgba(255,255,255,0.06);
    }
    
    .form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
    .tabs::-webkit-scrollbar{display:none}
    .tab{background:transparent;border:1px solid var(--border-light);padding:clamp(8px, 2vw, 10px) clamp(10px, 3vw, 14px);border-radius:12px;cursor:pointer;font-size:clamp(13px, 2.5vw, 14px);font-weight:500;white-space:nowrap;color:var(--text-muted);flex:0 0 auto;min-width:max-content;text-align:center;transition:all 0.2s ease}
    .tab:hover{background:var(--border-light);border-color:var(--border)}
    .tab[aria-pressed="true"]{background:var(--surface-elevated);border-color:var(--border-hover);box-shadow:0 1px 3px rgba(0,0,0,0.08);color:var(--text);font-weight:600}

    .input,.select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border-light);background:var(--surface-elevated);color:var(--text);font-size:clamp(14px, 3vw, 15px);transition:all 0.2s ease}
    .input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,165,255,0.1)}
    .input:hover:not(:focus),.select:hover:not(:focus){border-color:var(--border)}
    
    .select{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position:right 12px center;
      background-repeat:no-repeat;
      background-size:16px;
      padding-right:44px;
      cursor:pointer;
    }
    .select:hover{
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }
    .select:focus{
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }
    .url-input{display:flex;gap:10px;flex-wrap:wrap}
    .url-input input{flex:1;min-width:clamp(150px, 40vw, 200px)}
    
    /* URL input with clear button */
    .url-input-wrapper{position:relative;flex:1;min-width:clamp(150px, 40vw, 200px)}
    .url-textarea-wrapper{position:relative;width:100%;flex:1}
    .url-input-wrapper input, .url-textarea-wrapper textarea{padding-right:40px} /* Make room for clear button */
    
    /* Textarea specific styling with responsive font size */
    .url-textarea-wrapper textarea {
      resize: vertical;
      min-height: 70px;
      font-family: var(--font-system);
      line-height: 1.4;
      font-size: clamp(13px, 2.8vw, 15px); /* Responsive font size */
    }
    
    /* Responsive placeholder styling */
    .url-textarea-wrapper textarea::placeholder {
      font-size: clamp(13px, 2.8vw, 15px);
      line-height: 1.4;
      opacity: 0.7;
    }
    
    /* Additional responsive adjustments for mobile devices */
    @media (max-width: 640px) {
      .url-textarea-wrapper textarea {
        font-size: clamp(14px, 3.5vw, 16px);
      }
      
      .url-textarea-wrapper textarea::placeholder {
        font-size: clamp(14px, 3.5vw, 16px);
      }
    }
    .clear-btn{
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      width:20px;
      height:20px;
      border-radius:50%;
      background:rgba(107,114,128,0.1);
      border:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      visibility:hidden;
      transition:opacity 0.2s ease;
      z-index:2;
    }
    .clear-btn:hover{
      background:rgba(107,114,128,0.15);
    }
    .clear-btn.show{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    
    /* Position clear button differently for textarea */
    .url-textarea-wrapper .clear-btn {
      top:20px;
      transform:translateY(0);
    }
    .clear-btn svg{
      width:12px;
      height:12px;
      stroke:rgba(107,114,128,0.8);
      stroke-width:2;
    }
    .upload-area{border:2px dashed var(--border);padding:24px;border-radius:12px;text-align:center;background:var(--border-light);position:relative;overflow:hidden;transition:all 0.2s ease}
    .upload-area:hover{border-color:var(--border-hover);background:var(--border)}
    .upload-area input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;}
    .muted{color:var(--muted);font-size:13px;line-height:1.5}
    .btn-primary{background:var(--accent);color:white;padding:12px 18px;border-radius:12px;border:0;font-weight:600;cursor:pointer;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
    .btn-primary:hover:not(:disabled){background:var(--accent-hover)}
    .btn-primary:disabled{opacity:0.7;cursor:not-allowed}
    .btn-ghost{background:var(--surface-elevated);border:1px solid var(--border);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:500;color:var(--text);transition:all 0.2s ease}
    .btn-ghost:hover{background:var(--border-light);border-color:var(--border-hover)}

    .sidebar{position:sticky;top:32px}
    .services{display:grid;grid-template-columns:1fr;gap:8px}
    .service{padding:14px;border-radius:12px;background:var(--surface-elevated);border:1px solid var(--border-light);display:flex;gap:16px;align-items:center;cursor:pointer;transition: all 0.2s ease;}
    .service:hover{background:var(--surface);border-color:var(--border);transform: translateY(-2px);box-shadow: var(--shadow);}
    
    /* Dark theme service cards */
    [data-theme="dark"] .service:hover, .theme-dark .service:hover{
      background:rgba(255,255,255,0.05);
      border-color:var(--border-hover);
    }
    .s-ico{
      width:40px;
      height:40px;
      border-radius:10px;
      background:linear-gradient(135deg,rgba(14,165,255,0.08),rgba(14,165,255,0.12));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:var(--accent);
      font-size:16px;
      flex-shrink:0;
      transition:background 0.3s ease;
    }
    [data-theme="dark"] .s-ico, .theme-dark .s-ico{
      background:linear-gradient(135deg,rgba(14,165,255,0.15),rgba(14,165,255,0.25));
    }

    .service h3 {
      margin: 0;
      font-size: 1em;
      font-weight: 700;
      color: var(--text);
    }
    
    .sidebar .card h2 {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: var(--text);
    }

    .trust{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
    .trust .item{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(14,165,255,0.03);font-size:13px;font-weight:500;color:#475569;border:1px solid rgba(14,165,255,0.08)}

    .quick{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
    .pill{padding:8px 14px;border-radius:20px;border:1px solid var(--border-light);background:var(--surface-elevated);font-size:13px;cursor:pointer;font-weight:500;white-space:nowrap;color:var(--text);transition:all 0.2s ease}
    .pill:hover{background:var(--border-light);border-color:var(--border)}

    .seo{margin-top:24px}
    .seo h2{margin:0 0 12px 0;font-size:18px;font-weight:700;color:var(--text)}
    .seo p{color:var(--text-muted);line-height:1.6;font-size:15px}

    footer{margin-top:clamp(28px, 5vw, 40px);color:var(--text-muted);font-size:13px;text-align:center;padding-top:24px;border-top:1px solid var(--border-light)}

    .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .hidden{display:none}
    .small{font-size:12px;line-height:1.5}
    .alert{padding:12px 14px;border-radius:12px;background:#f0fdfa;border:1px solid rgba(13,148,136,0.15);color:#065f46;font-size:14px;font-weight:500}
    .alert a{color:#0d9488;text-decoration:underline;font-weight:600}
    .alert code{background:rgba(13,148,136,0.1);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px}
    
    
    /* Additional responsive utilities */
    .button-group{justify-content:stretch}
    @media (max-width:640px){
      .button-group{flex-direction:column}
      .button-group button{width:100%;min-width:100%}
    }
    
    /* Ensure proper text wrapping on small screens */
    @media (max-width:480px){
      .service strong{font-size:13px;line-height:1.3}
      .service .muted{font-size:11px}
      .seo h2{font-size:16px;line-height:1.3}
      .seo p{font-size:14px;line-height:1.5}
    }
    
    @media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    
    /* Theme toggle button */
    .theme-toggle{
      background:var(--surface-elevated);
      border:1px solid var(--border);
      width:44px;
      height:44px;
      border-radius:12px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:all 0.2s ease;
      position:relative;
    }
    .theme-toggle:hover{
      background:var(--border-light);
      border-color:var(--border-hover);
    }
    .theme-toggle svg{
      width:20px;
      height:20px;
      stroke:var(--text);
      transition:all 0.3s ease;
    }
    .theme-toggle .sun-icon{opacity:1}
    .theme-toggle .moon-icon{opacity:0;position:absolute}
    [data-theme="dark"] .theme-toggle .sun-icon, .theme-dark .theme-toggle .sun-icon{opacity:0}
    [data-theme="dark"] .theme-toggle .moon-icon, .theme-dark .theme-toggle .moon-icon{opacity:1}

    /* Debug viewport width indicator */
    .debug-width {
        position: fixed;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-family: monospace;
        font-size: 12px;
        z-index: 9999;
        font-weight: bold;
        box-shadow: var(--shadow);
    }