:root {
    --bg:#fff;
    --fg:#000;
    --muted:#6b6b6b;
    --border:#ccc;
    --soft:#f7f7f7;
    --accent-grad:linear-gradient(90deg,#6e59ff 0%,#ff4d4d 45%,#ff7cc8 100%);
}
:root.dark {
    --bg:#000;
    --fg:#fff;
    --muted:#b9b9b9;
    --border:#333;
    --soft:#0f0f0f;
    --accent-grad:linear-gradient(90deg,#b7a6ff 0%,#ff7a7a 45%,#ff9ad8 100%);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
    background:var(--bg);
    color:var(--fg);
    font-family:'Helvetica Neue',sans-serif;
    line-height:1.6;
}

.portfolio-header {
    text-align:center;
    padding:3rem 1rem 2rem;
    max-width:800px;
    margin:auto;
}
.portfolio-header h1 {
    font-size:2.5rem;
    margin-bottom:.5rem;
}
.portfolio-header p {
    color:var(--muted);
    margin:0 auto 1.5rem;
    max-width:60ch;
}

.project-filters {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1rem;
}
.project-filters button {
    padding:.55rem 1.1rem;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--soft);
    color:var(--fg);
    font-weight:600;
    cursor:pointer;
    transition:transform .15s ease,background .15s ease,border .15s ease;
}
.project-filters button:hover {
    transform:translateY(-2px);
}
.project-filters button.active {
    background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--accent-grad) border-box;
    border:1px solid transparent;
}

.project-list {
    max-width:760px;
    margin:2rem auto 4rem;
    padding:0 1.5rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.project {
    background:var(--soft);
    border:1px solid var(--border);
    border-radius:12px;
    padding:1.5rem;
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
    text-align:center;
}
.project:hover {
    transform:translateY(-2px);
    background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--accent-grad) border-box;
    border:1px solid transparent;
}
.project h2 {
    margin:0 0 .5rem;
    font-size:1.4rem;
}
.project p {
    margin:0 0 1.2rem;
    color:var(--fg);
}

.links {
    display:flex;
    justify-content:center;
    gap:.8rem;
    flex-wrap:wrap;
}
.links a {
    display:inline-block;
    padding:.55rem 1rem;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--fg);
    font-weight:600;
    text-decoration:none;
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.links a:hover {
    transform:translateY(-2px);
    background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--accent-grad) border-box;
    border:1px solid transparent;
}

.cta-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.btn {
    display: inline-block;
    padding: .8rem 1.2rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    color: var(--fg);
    background: var(--soft);
    border: 1px solid var(--border);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    min-width: 10rem;
    text-align: center;
}
.btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--accent-grad) border-box;
    border: 1px solid transparent;
}

footer {
    text-align:center;
    border-top:1px solid var(--border);
    padding:1.5rem;
    font-size:.9rem;
    color:var(--muted);
}

.dark-toggle {
    position:fixed;
    top:14px;
    right:14px;
    width:46px;
    height:28px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--bg);
    cursor:pointer;
    padding:0;
    z-index:10;
}
.dark-toggle .knob {
    display:block;
    width:22px;
    height:22px;
    margin:2px;
    border-radius:50%;
    background:var(--fg);
    transition:transform .25s ease;
}
:root.dark .dark-toggle .knob {
    transform:translateX(18px);
}