/* Root variables & reset */
:root{
  --header-height:64px;
  --container-width:1100px;
  --accent:#ff4d6d;
  --brand-color:#ff4d6d;
  --bg:#f7fafc;
  --surface:#ffffff;
  --text:#0f1724;
  --muted:#55606a;
  --shadow: rgba(11,23,40,0.06);
}
*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
  color:var(--text);
  background:var(--bg);
  padding-top:var(--header-height);
  line-height:1.45;
}

/* Container (fixed: previously missing dot) */
.container{max-width:var(--container-width);margin:0 auto;padding:24px}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:1000;background:var(--surface);box-shadow:0 2px 12px var(--shadow);border-bottom:1px solid rgba(11,23,40,0.02)}
.topbar .container{display:flex;align-items:center;gap:16px;height:100%}
.brand{font-weight:800;color:var(--brand-color);font-size:20px;letter-spacing:0.2px}
.topbar nav{margin-left:24px;flex:1}
.topbar nav a{margin-right:16px;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .18s, color .18s}
.topbar nav a:hover{background:rgba(15,23,36,0.04);color:var(--text)}
.auth{display:flex;gap:8px}

/* Buttons */
.btn{border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;transition:transform .12s ease, box-shadow .12s ease, background-color .12s}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(255,77,109,0.14)}
.btn.primary:hover{filter:brightness(.98)}
.btn.small{padding:6px 8px;border-radius:6px;font-size:13px}

/* Hero */
.hero{display:flex;gap:32px;align-items:flex-start;padding:48px 24px}
.hero-left{flex:1}
.hero h1{margin:0 0 12px;font-size:40px;color:var(--text);line-height:1.08}
.hero p{margin:0 0 18px;color:#5b6b76;font-size:16px}
.search{display:flex;gap:12px;align-items:center}
.search input,.search select{padding:12px;border-radius:10px;border:1px solid #e6eef4;flex:1;background:#fff}
.search button{white-space:nowrap}
.hero-right{width:380px;flex-shrink:0}

/* Card */
.card{background:var(--surface);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(11,23,40,0.06)}
.card .sample-preview{display:flex;justify-content:center;align-items:center;padding:12px 0}
.card .sample-preview img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 12px 30px rgba(11,23,40,0.12)}
.job-list{list-style:none;padding:0;margin:8px 0}
.job-list li{padding:10px 0;border-bottom:1px dashed rgba(14,42,61,0.04);cursor:pointer;transition:color .12s}
.job-list li:hover{color:var(--text)}

/* Jobs grid */
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:18px}
.job{background:var(--surface);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(11,23,40,0.04);transition:transform .14s ease, box-shadow .14s ease}
.job:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,23,40,0.08)}
.job-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.job-title{font-weight:700}
.job-price{color:var(--accent);font-weight:700}
.job-desc{color:#546e7a;margin:0 0 12px}
.job-meta{display:flex;justify-content:space-between;align-items:center}
.badge{background:#eef7ff;color:#0366d6;padding:6px 8px;border-radius:8px;font-size:12px}
.site-footer{padding:24px;text-align:center;color:#7b8790;margin-top:24px}

/* Utilities */
.muted{color:#98a2a8;font-size:13px}

/* Accessibility focus states */
a:focus, button:focus, input:focus, select:focus{outline:3px solid rgba(255,77,109,0.12);outline-offset:2px}

/* Mobile-specific improvements */
@media (max-width: 600px) {
  /* Slightly more horizontal breathing room and slightly smaller UI */
  .container { padding: 12px 20px; }

  /* Topbar compact */
  .topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 6px; }
  .topbar nav { display: none; }
  .brand { font-size: 16px; }
  
  .auth { gap: 6px; }

  /* Buttons scaled down for mobile */
  .btn { padding: 8px 10px; min-height: 40px; font-size: 14px; }
  .btn.primary { padding: 8px 12px; }

  /* Hero stacks vertically and is slightly smaller */
  /* Add horizontal padding so hero contents don't touch screen edges */
  .hero { flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 12px; }
  .hero-left, .hero-right { width: 100%; }
  .hero-left { padding: 0; }
  .hero-right { padding: 0 4px; }
  .hero h1 { font-size: 18px; text-align: center; margin-bottom: 8px; }
  .hero p { font-size: 13px; text-align: center; margin-bottom: 10px; }

  /* Make search friendly for touch with slightly smaller inputs */
  .search { flex-direction: column; gap: 8px; }
  .search input, .search select { width: 100%; padding: 10px; font-size: 14px; border-radius: 10px; }
  .search button { width: 100%; padding: 10px; font-size: 14px; }

  /* Featured card smaller and full width */
  .hero-right { margin-top: 6px; }
  .card { padding: 12px; }
  .card .sample-preview{padding:6px}
  .card .sample-preview img{max-height:140px;object-fit:cover}
  .job-list li { padding: 10px 0; }

  /* Jobs list: single column for readability */
  .jobs-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .job { padding: 12px; border-radius: 10px; }
  .job-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .job-price { align-self: flex-start; }
  .job-desc { font-size: 14px; }
  .job-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn.small { padding: 8px 10px; }

  /* Footer smaller and compact */
  .site-footer { padding: 18px 12px; font-size: 13px; }
}

/* Auth modal styles */
.auth-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2000}
.auth-modal.show{display:flex}
.auth-backdrop{position:absolute;inset:0;background:rgba(4,10,20,0.6)}
.auth-dialog{position:relative;background:var(--surface);padding:18px;border-radius:12px;box-shadow:0 18px 40px rgba(11,23,40,0.2);width:420px;max-width:92vw;z-index:2}
.auth-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:22px;cursor:pointer}
.auth-tabs{display:flex;gap:8px;margin-bottom:12px}
.auth-tabs .tab{padding:8px 12px;border-radius:8px;border:1px solid rgba(11,23,40,0.04);background:transparent;cursor:pointer}
.auth-tabs .tab.active{background:var(--accent);color:#fff;border-color:transparent}
.auth-form label{display:block;margin-bottom:8px;font-size:14px}
.auth-form input{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef4;margin-top:6px}
.auth-actions{margin-top:12px}
.auth-note{margin-top:10px;color:#ff4d6d;font-weight:600}

@media (max-width:420px){
  .auth-dialog{padding:12px}
  .auth-tabs{gap:6px}
}