/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --muted: #6b7280;
    --text: #0f172a;
    --brand: #0066cc;
    --accent: #ff8a00;
    --glass: rgba(255,255,255,0.82); /* stronger glass for better contrast */
    --hero-overlay: rgba(0,0,0,0.18);
    --radius: 12px;
    --shadow: 0 6px 24px rgba(15,23,42,0.08);
}

/* Dark theme variables */
html[data-theme='dark'] {
    --bg: #0b1220;
    --surface: #071028;
    --muted: #9aa6bf;
    --text: #e6eef8;
    --brand: #4ea8ff;
    --accent: #ffb86b;
    --glass: rgba(10,16,25,0.6);
    --shadow: 0 8px 30px rgba(2,6,23,0.6);
}

/* Dark-mode specific UI fixes for login visibility */
html[data-theme='dark'] .login-card {
    background: linear-gradient(180deg, rgba(6,10,18,0.96), rgba(6,10,18,0.92));
    border: 1px solid rgba(255,255,255,0.04);
}

html[data-theme='dark'] .card-left h1,
html[data-theme='dark'] .card-left .muted,
html[data-theme='dark'] .card-left .features { color: var(--text); }

html[data-theme='dark'] .form input {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
}

html[data-theme='dark'] .form input::placeholder { color: rgba(230,238,248,0.6); }

/* Override the inline hero background overlay in dark mode to add a stronger dark layer */
html[data-theme='dark'] .hero {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.56), rgba(0,0,0,0.36)) !important;
}

/* Make sure the login card surface uses theme surface color when appropriate */
html[data-theme='dark'] .card-right { background: linear-gradient(180deg, rgba(7,16,36,0.6), rgba(7,16,36,0.5)); }

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* Header */
.site-header {
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}

.brand .logo {
    font-weight: 700;
    color: var(--text);
    font-size: 1.2rem;
    text-decoration: none;
}

.brand .accent { color: var(--brand); }
.brand .tag { display:block; font-size: .8rem; color: var(--muted); }

.header-actions { display:flex; gap:12px; align-items:center; }
.btn-icon { background:transparent; border: none; cursor:pointer; font-size:1.05rem; padding:8px; border-radius:8px; }

/* Hero / login */
.hero { padding: 48px 0; }

/* login card: make background more opaque and text readable over image */
.login-card {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
    padding: 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(15,23,42,0.04);
}

.card-left h1 { font-size: 1.8rem; margin-bottom: 8px; }
.muted { color: var(--muted); }
.features { margin-top: 12px; list-style: none; display:flex; flex-direction:column; gap:8px; color:var(--text); }
.features li::before { content: '•'; color:var(--brand); display:inline-block; width:18px; }

.card-right { background: var(--surface); padding: 20px; border-radius: 12px; }
.form input { width:100%; padding:12px 14px; margin-bottom:12px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); background:transparent; color:var(--text); }
.form input::placeholder { color:var(--muted); }
.btn-primary { width:100%; background: linear-gradient(90deg,var(--brand), #2b9eff); border:none; color:#fff; padding:12px; border-radius:8px; cursor:pointer; font-weight:600; box-shadow: 0 6px 18px rgba(46,125,255,0.12); }
.btn-primary:hover { transform: translateY(-1px); }
.small { font-size: .85rem; }

.form-message { margin-top:10px; min-height:20px; color: #e11d48; }
.form-message.success { color: #10b981; }

/* Footer */
.site-footer { padding:20px 0; text-align:center; color:var(--muted); }

.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

@media (max-width: 880px) {
    .login-card { grid-template-columns: 1fr; }
    .card-right { order: -1; }
}

@media (prefers-reduced-motion: no-preference) {
    .btn-primary { transition: transform .18s ease; }
}

/* Articles page styles */
.article-card { margin: 12px 0; padding: 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.article-card { border-left: 4px solid var(--brand); }
.article-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.article-header h3 { margin:0; font-size:1.05rem; }
.article-actions { display:flex; gap:8px; align-items:center; }
.article-desc { margin-top:10px; color:var(--text); }
.clauses { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
details { background: rgba(0,0,0,0.02); padding:10px 12px; border-radius:8px; }
summary { cursor:pointer; font-weight:600; }
.clause-body { margin-top:8px; color:var(--muted); }

.btn-icon { background:transparent; border:none; cursor:pointer; font-size:1rem; padding:6px; border-radius:6px; }
.btn-icon:hover { background: rgba(15,23,42,0.04); }

@media (max-width:720px){
    .article-header { flex-direction:column; align-items:flex-start; gap:6px; }
}

mark { background: linear-gradient(90deg, rgba(255,230,180,0.6), rgba(255,245,210,0.3)); padding: 0 4px; border-radius:4px; }

#favorites h4 { margin:0 0 8px 0; }
#favList li { padding:6px 0; border-bottom:1px dashed rgba(0,0,0,0.04); }
#favList li a { color:var(--brand); text-decoration:none; }

.no-results { padding:18px; border-radius:12px; text-align:center; }

/* Slightly different visual for preamble */
.preamble-content { font-style:italic; color:var(--muted); }

/* Articles page modern layout */
.controls { display:flex; flex-direction:row; gap:16px; align-items:center; margin:18px 0; flex-wrap:wrap; }
.search-wrap { flex:1; display:flex; gap:12px; align-items:center; }
.search-input { flex:1; padding:12px 14px; border-radius:10px; border:1px solid rgba(15,23,42,0.06); background:var(--surface); color:var(--text); }
.results-count { margin-left:8px; white-space:nowrap; }
.filters { display:flex; gap:10px; align-items:center; }
.filter-item { display:inline-flex; gap:8px; align-items:center; color:var(--muted); }

.layout-grid { display:grid; grid-template-columns: 1fr 320px; gap:22px; align-items:start; }
.articles-list { min-height:200px; }
.articles-content { display:flex; flex-direction:column; gap:12px; }

.favorites { position:sticky; top:92px; padding:16px; }
.fav-list { list-style:none; padding-left:0; margin-top:8px; }
.fav-list li { padding:8px 6px; border-bottom:1px dashed rgba(0,0,0,0.04); }
.no-favs { margin-top:10px; }

.article-card { transition: transform .12s ease, box-shadow .12s ease; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(2,8,23,0.06); }
.article-header h3 { font-size:1.05rem; }
.article-desc p { color:var(--muted); }

@media (max-width: 880px){
    .layout-grid { grid-template-columns: 1fr; }
    .favorites { position:relative; top:auto; }
}