/* Basic shared styles for Random Picker (enhanced modern theme) */
:root{--max-width:980px;--primary:#5b21b6;--primary-light:#7c3aed;--primary-dark:#3b0764;--accent:#06b6d4;--accent-light:#22d3ee;--accent-dark:#0891b2;--success:#10b981;--danger:#ef4444;--muted:#6b7280;--bg-light:#f8fafc;--bg-dark:#0f172a;--border-light:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569}
*{box-sizing:border-box}
body{font-family:'Segoe UI','Inter',system-ui,Arial,Helvetica,sans-serif;margin:0;padding:0;line-height:1.6;color:var(--text-primary);background:var(--bg-light)}
header{background:linear-gradient(135deg,#faf5ff 0%,#f0f9ff 100%);padding:56px 16px 40px;border-bottom:5px solid var(--accent-light);box-shadow:0 8px 24px rgba(91,33,182,0.08)}
.header-inner{max-width:var(--max-width);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.header-title-group{flex:1}
.header-inner h1{margin:0;font-size:2.4rem;font-weight:800;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--accent-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
.tagline{margin:10px 0 0;font-size:1.1rem;color:var(--text-secondary);font-weight:500}
.site-nav {
	display: flex;
	gap: 24px;
	justify-content: center;
	padding: 18px 0 18px 0;
	flex-wrap: wrap;
	background: rgba(245,245,255,0.92);
	box-shadow: 0 2px 16px rgba(91,33,182,0.07);
	border-radius: 16px;
	margin: 0 auto 24px auto;
	max-width: 900px;
}
.site-nav a {
	color: var(--primary-dark);
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.2px;
	background: transparent;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	position: relative;
	outline: none;
	box-shadow: none;
}
.site-nav a:focus {
	background: var(--accent-light);
	color: #fff;
	box-shadow: 0 0 0 3px var(--accent-light);
}
.site-nav a:hover {
	background: linear-gradient(90deg, var(--primary-light) 0%, var(--accent-light) 100%);
	color: #fff;
	box-shadow: 0 4px 16px rgba(91,33,182,0.10);
}
.site-nav a.active, .site-nav a[aria-current="page"] {
	background: var(--primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(91,33,182,0.12);
}
.container{max-width:var(--max-width);margin:48px auto;padding:0 20px}
h2{font-size:1.6rem;margin-top:40px;margin-bottom:20px;font-weight:800;color:var(--primary);position:relative;padding-left:0}
.screens{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.screens figure{margin:0;text-align:center;transition:transform 0.3s ease}
.screens figure:hover{transform:translateY(-6px)}
.screens img{display:block;border-radius:12px;box-shadow:0 8px 24px rgba(11,118,239,0.15);border:2px solid #f0f4f8;max-width:100%}
.screens figcaption{font-size:0.9rem;color:var(--accent-dark);margin-top:12px;font-weight:600}
.btn{display:inline-block;padding:14px 28px;border-radius:10px;text-decoration:none;border:none;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-size:1rem;letter-spacing:0.5px}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;box-shadow:0 6px 20px rgba(91,33,182,0.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(91,33,182,0.45)}
.btn-primary:active{transform:translateY(-1px)}
.btn[aria-disabled="true"]{opacity:0.5;pointer-events:none;transform:none}
footer{margin:40px 0;text-align:center;color:var(--muted);padding:24px 20px;border-top:2px solid #e2e8f0;background:#f8fafc}
.muted{color:var(--muted)}
@media (min-width:880px){.header-inner{flex-direction:row;justify-content:space-between}.header-title-group{text-align:left;flex:1}.header-inner h1{font-size:2.6rem}.site-nav{gap:20px}}

/* Accessibility focus states */
a:focus{outline:3px solid var(--accent);outline-offset:2px}

/* List styling */
ul{margin:16px 0;padding-left:24px}
li{margin:8px 0;color:#1e293b;font-weight:500}
li::marker{color:var(--accent);font-weight:bold}

/* Features grid */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.feature-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:20px;transition:all 0.3s ease;text-align:center}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(11,118,239,0.12);border-color:var(--accent-light)}
.feature-icon{font-size:2.4rem;margin-bottom:12px}
.feature-card h3{margin:8px 0;font-size:1.1rem;color:var(--accent-dark)}
.feature-card p{margin:8px 0;font-size:0.95rem;color:var(--muted);line-height:1.5}

.muted{color:var(--muted);font-size:0.9rem}

/* Privacy section in single page */
.privacy-section {
  max-width: 800px;
  margin: 0 auto;
}
.privacy-section h3 {
  font-size: 1.2rem;
  margin-top: 28px;
  margin-bottom: 14px;
  color: var(--primary-dark);
  font-weight: 700;
}
.privacy-section h4 {
  font-size: 1.05rem;
  margin-top: 18px;
  margin-bottom: 10px;
  color: var(--primary);
  font-weight: 600;
}
.privacy-section ul {
  margin: 14px 0;
  padding-left: 24px;
}
.privacy-section li {
  margin: 8px 0;
  color: var(--text-primary);
  line-height: 1.7;
  font-weight: 500;
}
.privacy-section p {
  margin: 12px 0;
  line-height: 1.7;
  color: var(--text-secondary);
}
.privacy-section strong {
  color: var(--primary-dark);
  font-weight: 700;
}
.privacy-section a {
  color: var(--accent);
  text-decoration: none;
}
.privacy-section a:hover {
  text-decoration: underline;
}

/* Top banner styles removed - badge moved to Download section */

/* Coming Soon Banner */
.coming-soon-banner {
	background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
	color: #fff;
	text-align: center;
	padding: 18px 10px;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	box-shadow: 0 4px 16px rgba(91,33,182,0.10);
}
.coming-soon-icon {
	font-size: 1.7rem;
	animation: bounce 1.8s infinite;
}
.coming-soon-text strong {
	color: #fff;
	text-shadow: 0 2px 8px rgba(91,33,182,0.12);
}

/* Coming Soon Download Section */
.coming-soon-section {
	background: #fff;
	border: 2px solid var(--border-light);
	border-radius: 14px;
	padding: 32px 20px 24px 20px;
	margin: 24px 0 32px 0;
	box-shadow: 0 2px 12px rgba(91,33,182,0.06);
	text-align: center;
}
.coming-soon-message {
	font-size: 1.1rem;
	color: var(--primary-dark);
	margin-bottom: 18px;
}
.notify-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.notify-input {
	padding: 12px 16px;
	border: 2px solid var(--accent-light);
	border-radius: 8px;
	font-size: 1rem;
	width: 260px;
	max-width: 100%;
	outline: none;
	transition: border 0.2s;
}
.notify-input:focus {
	border-color: var(--primary);
}