/* css/layout.css - Universal UI Components */

.container { max-width: 1060px; margin: 0 auto; padding: 0 1rem; }
.main-content { padding: 1.25rem 0 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* ── Header ── */
.header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); transition: background var(--transition); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0; gap:0.75rem; flex-wrap:wrap }
.header-brand { display:flex; align-items:center; gap:0.6rem; }
.logo-icon { width:36px; height:36px; background:var(--primary); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:#fff }
.logo-icon svg { width:20px; height:20px }
.logo-text { display:flex; flex-direction:column; line-height:1.2; }
.logo-title { font-size:1.05rem; font-weight:700; color:var(--text); }
.logo-subtitle { font-size:0.76rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }

.header-actions { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; transition: all var(--transition); font-family: var(--font); }
.btn-icon:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary) }
.btn-icon.active { color: var(--primary); background: var(--primary-light); border-color: var(--primary) }
.btn-random { background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; transition: all var(--transition); font-family: var(--font); }
.btn-random:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Buttons & Cards ── */
.card { background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:28px; transition:all var(--transition) }
.btn-link { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:0.84rem; font-weight:600; color:var(--primary); transition:color var(--transition) }
.btn-link:hover { color:var(--primary-hover) }

/* ── Modals & App Drawer ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 100; animation: fadeIn .2s ease-out; cursor: pointer; }
.modal-wrapper { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:101; pointer-events:none; padding:16px }
.modal-box { position:relative; z-index:105; background:var(--surface); width:100%; max-width:620px; max-height:88vh; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); pointer-events:auto; display:flex; flex-direction:column; border:1px solid var(--border); animation:scaleIn .25s ease-out; overflow:hidden }
.modal-header { padding:18px 24px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between }
.modal-header h2 { font-size:1.12rem; font-weight:700; letter-spacing:-0.01em }
.btn-close { width:34px; height:34px; border-radius:999px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-light); transition:all var(--transition) }
.btn-close:hover { background:var(--bg); color:var(--text) }
.modal-body { padding:24px; overflow-y:auto; flex:1 }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border-light); display:flex; justify-content:space-between; align-items: center; background:var(--bg) }
.btn-modal-close { padding:8px 20px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all var(--transition) }
.btn-modal-close:hover { background:var(--primary-hover) }

/* Privacy Modal Specifics */
.privacy-item { display:flex; gap:10px; margin-bottom:14px }
.privacy-item svg { color:var(--secondary); flex-shrink:0; margin-top:3px }
.privacy-item strong { display:block; font-size:0.88rem; color:var(--text) }
.privacy-item span { font-size:0.8rem; color:var(--text-muted); display: block; line-height: 1.5; }

/* Drawer Hover Effects */
.drawer-app-card:hover { background: var(--bg); border-color: var(--primary-mid); transform: translateY(-1px); }

/* ── Mega Menu Nav Links ── */
.nav-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); padding: 12px 16px 4px; margin-top: 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--text-muted); background: transparent; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem; transition: all var(--transition); border: 1px solid transparent; }
.nav-link:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.nav-link-active { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }
.nav-link-active:hover { background: var(--primary-light); color: var(--primary); }
.nav-link-icon { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; }

/* ── Color Scheme Picker ── */
.scheme-picker-wrap { position:relative; display:flex; align-items:center }
.btn-scheme { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:all var(--transition); position:relative; }
.btn-scheme:hover { border-color:var(--primary); background:var(--primary-light) }
.btn-scheme .swatch-preview { width:16px; height:16px; border-radius:50%; background:var(--primary); transition:background var(--transition); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.scheme-dropdown { position:absolute; top:calc(100% + 8px); right:0; z-index:60; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; min-width:170px; animation:scaleIn .2s ease-out; }
.scheme-dropdown-title { font-size: 0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-light); margin-bottom:8px; padding:0 4px; }
.scheme-option { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer; border:none; background:transparent; width:100%; font-family:var(--font); font-size:0.78rem; font-weight:500; color:var(--text-muted); transition:all var(--transition); text-align:left; }
.scheme-option:hover { background:var(--bg); color:var(--text) }
.scheme-option.active { background:var(--primary-light); color:var(--primary); font-weight:600 }
.scheme-swatch { width:18px; height:18px; border-radius:50%; flex-shrink:0; border:2px solid transparent; transition:all var(--transition); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
.scheme-option.active .scheme-swatch { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light), inset 0 0 0 1px rgba(0,0,0,0.08) }

/* ── Footer ── */
.footer { border-top:1px solid var(--border); margin-top:52px }
.footer-inner { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; padding:28px 0; font-size:0.8rem; color:var(--text-light) }
@media (min-width:640px) { .footer-inner { flex-direction:row } }
.footer-links { display:flex; gap:18px }
.footer-links button { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:0.8rem; color:var(--text-light); transition:color var(--transition) }
.footer-links button:hover { color:var(--primary) }