:root{
  --bg:#0f172a0a;
  --surface:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --brand:#2563eb;
  --brand-600:#1d4ed8;
  --border:#e5e7eb;
  --shadow:0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.03);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --surface:#0f172a;
    --fg:#e5e7eb;
    --muted:#94a3b8;
    --brand:#60a5fa;
    --brand-600:#3b82f6;
    --border:#334155;
    --shadow:0 10px 20px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg, var(--bg), #ffffff00 30%), var(--surface);color:var(--fg);font:16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"}
.container{max-width:980px;margin:0 auto;padding:0 18px}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg, var(--surface), rgba(0,0,0,0));backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border);z-index:10}
.site-header .container{display:flex;align-items:center;gap:16px;justify-content:space-between}
.site-header h1{font-size:28px;margin:10px 0;font-weight:800;letter-spacing:.2px}
.site-header nav a{margin-left:12px;color:var(--brand);text-decoration:none;padding:6px 8px;border-radius:8px}
.site-header nav a:hover{background-color:rgba(37,99,235,.08)}
.site-header nav .lang-switch{border:1px solid var(--border);color:var(--muted)}

/* Layout */
.lead{margin:26px 0 18px}
.lead-list{margin:10px 0 0;padding-left:1.2em}
.lead-list li{margin:6px 0}
.layout{display:flex;gap:28px}
.main{flex:1}
.sidebar{width:300px}

/* Form card */
.main form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px 14px;box-shadow:var(--shadow)}
.field{margin:14px 0}
label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
input[type="text"],input[type="number"],input[type="file"]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--fg);transition:.15s border-color ease}
input[type="text"]:focus, input[type="number"]:focus, input[type="file"]:focus{outline:none;border-color:var(--brand)}
.actions{margin-top:18px}
button{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:11px 16px;cursor:pointer;transition:background-color .15s ease, transform .05s ease}
button:hover{background:var(--brand-600)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.7;cursor:not-allowed}

/* Cards & Ads */
.card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);box-shadow:var(--shadow)}
.ad{margin:26px 0}
.ad-top{min-height:90px}
.ad-sidebar{min-height:250px}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:44px;padding:18px 0;color:var(--muted);font-size:14px}
.site-footer .footer-row{display:flex;gap:28px;align-items:center;flex-wrap:nowrap}
.site-footer .footer-row > *{margin:0}
.site-footer .footer-left,.site-footer .footer-center,.site-footer .footer-right{flex:1 1 0}
.site-footer .footer-center{text-align:center}
.site-footer .footer-right{text-align:right}
.site-footer .btn-link{padding:0}

/* Responsive */
@media (max-width: 960px){
  .layout{flex-direction:column}
  .sidebar{width:100%}
}

/* Mobile-first tweaks */
@media (max-width: 640px){
  .container{padding:0 14px}
  .site-header{padding-top:env(safe-area-inset-top)}
  .site-header .container{flex-wrap:wrap;gap:8px}
  .site-header h1{font-size:20px;margin:8px 0}
  .site-header nav{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .site-header nav a{margin:0;flex:1 1 auto;text-align:center;padding:8px 10px;font-size:14px}
  .lead{margin:18px 0 12px}
  .lead-list li{margin:4px 0}
  .layout{gap:16px}
  .card{padding:12px}
  .main form{padding:14px}
  .field{margin:12px 0}
  input[type="text"],input[type="number"],input[type="file"]{padding:12px 14px}
  .actions button{width:100%;padding:13px 16px;font-size:16px}
  .ad{margin:16px 0}
  .ad-top{min-height:60px}
  .ad-sidebar{min-height:180px}
  .site-footer{margin-top:28px;padding:14px 0;font-size:13px}
  .site-footer .footer-row{gap:12px;flex-direction:column;align-items:flex-start;flex-wrap:wrap}
  .site-footer .footer-left,.site-footer .footer-center,.site-footer .footer-right{flex:unset;text-align:left}
  /* Keep progress visible while uploading */
  #progress.card{position:sticky;top:64px;z-index:5}
}

/* Touch optimizations */
@media (hover: none){
  button:hover{background:var(--brand)}
}

/* Consent banner */
.consent-banner{position:fixed;left:12px;right:12px;bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;z-index:100}
.consent-banner .consent-text{min-width:240px;color:var(--fg)}
.consent-banner .consent-actions{display:flex;gap:10px;justify-content:flex-end}
.consent-manage-link{margin-left:8px;color:var(--muted);text-decoration:underline}
.btn-primary{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:9px 12px;cursor:pointer}
.btn-outline{background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer}
.btn-link{background:transparent;color:var(--brand);border:none;padding:9px 8px;cursor:pointer}

.consent-modal{position:fixed;inset:0;z-index:101}
.consent-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.35)}
.consent-dialog{position:relative;margin:10vh auto 0;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:16px}
.consent-option{display:block;margin:12px 0;color:var(--fg)}
.consent-dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

@media (max-width:640px){
  .consent-dialog{margin:15vh 12px 0}
  .consent-banner{left:8px;right:8px;bottom:8px;grid-template-columns:1fr}
  .consent-banner .consent-actions{width:100%;justify-content:stretch;gap:8px}
  .consent-banner .consent-actions .btn-primary,
  .consent-banner .consent-actions .btn-outline{flex:1 1 50%;padding:12px 14px}
  .consent-manage-link{display:block;margin:6px 0 0 0}
}