/* common.css — shared by agency-pivot pages (workspaces, brief, voice, hooks, etc.)
   Existing pages keep their inlined styles; this file is opt-in. */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

[data-theme="dark"] {
    --bg:#0a0a0a; --fg:#f5f5f0; --fg-muted:#d0d0cb; --fg-subtle:#8a8a85; --fg-faint:#5a5a55;
    --border:rgba(245,245,240,0.08); --border-hover:rgba(245,245,240,0.2);
    --card:rgba(245,245,240,0.02); --card-hover:rgba(245,245,240,0.04);
    --nav-bg:rgba(10,10,10,0.7); --input-bg:rgba(245,245,240,0.04);
    --success:#4ade80; --warn:#facc15; --danger:#f87171;
}
[data-theme="light"] {
    --bg:#f5f5f0; --fg:#0a0a0a; --fg-muted:#2a2a25; --fg-subtle:#5a5a55; --fg-faint:#8a8a85;
    --border:rgba(10,10,10,0.08); --border-hover:rgba(10,10,10,0.2);
    --card:rgba(10,10,10,0.02); --card-hover:rgba(10,10,10,0.04);
    --nav-bg:rgba(245,245,240,0.8); --input-bg:rgba(10,10,10,0.04);
    --success:#16a34a; --warn:#ca8a04; --danger:#dc2626;
}

body {
    background:var(--bg); color:var(--fg);
    font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
}
nav {
    position:sticky; top:0; z-index:10; background:var(--nav-bg);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border); padding:1rem 2rem;
}
nav .wrap { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
nav a.brand { color:var(--fg); text-decoration:none; font-weight:600; letter-spacing:-0.01em; }
.nav-right { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.nav-link { color:var(--fg-subtle); text-decoration:none; font-size:0.88rem; }
.nav-link:hover { color:var(--fg); }
.nav-link.active { color:var(--fg); font-weight:600; }
.nav-badge { padding:0.2rem 0.6rem; border:1px solid var(--border); border-radius:100px; font-size:0.7rem; color:var(--fg-subtle); }

.ws-switcher {
    background:var(--input-bg); border:1px solid var(--border); border-radius:6px;
    padding:0.4rem 0.6rem; color:var(--fg); font-size:0.85rem; cursor:pointer;
    min-width:160px;
}

main { max-width:1080px; margin:0 auto; padding:3rem 2rem 6rem; }
h1 { font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:600; letter-spacing:-0.02em; margin-bottom:0.5rem; }
h2 { font-size:1.1rem; font-weight:600; margin-bottom:1rem; letter-spacing:-0.01em; }
.lead { color:var(--fg-subtle); margin-bottom:2rem; max-width:680px; }

.card {
    border:1px solid var(--border); border-radius:12px; background:var(--card);
    padding:1.5rem; margin-bottom:1.25rem; transition:border-color 0.15s;
}
.card:hover { border-color:var(--border-hover); }
.card.flat:hover { border-color:var(--border); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }

label { display:block; color:var(--fg-subtle); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; }
input[type=text], input[type=url], input[type=email], select, textarea {
    width:100%; padding:0.7rem 0.9rem; background:var(--input-bg);
    border:1px solid var(--border); border-radius:8px; color:var(--fg);
    font-size:0.92rem; font-family:inherit;
}
textarea { min-height:80px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--fg-subtle); }

.btn {
    display:inline-block; padding:0.65rem 1.1rem;
    border:1px solid var(--fg); border-radius:8px; background:transparent;
    color:var(--fg); font-size:0.85rem; font-weight:500; cursor:pointer;
    text-decoration:none; transition:all 0.15s; font-family:inherit;
}
.btn:hover { background:var(--fg); color:var(--bg); }
.btn.primary { background:var(--fg); color:var(--bg); }
.btn.primary:hover { background:var(--fg-muted); }
.btn.small { padding:0.4rem 0.8rem; font-size:0.78rem; }
.btn.danger { border-color:var(--danger); color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:var(--bg); }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem; }

.row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.row:last-child { border-bottom:none; }
.row .label { color:var(--fg-subtle); font-size:0.85rem; text-transform:none; letter-spacing:0; margin:0; }
.row .value { font-weight:500; font-size:0.92rem; }

.pill { display:inline-block; padding:0.18rem 0.55rem; border-radius:100px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.pill.success { background:rgba(74,222,128,0.12); color:var(--success); }
.pill.warn { background:rgba(250,204,21,0.12); color:var(--warn); }
.pill.danger { background:rgba(248,113,113,0.12); color:var(--danger); }
.pill.muted { background:var(--card-hover); color:var(--fg-subtle); }

.empty { color:var(--fg-subtle); padding:3rem 0; text-align:center; }
.muted { color:var(--fg-subtle); font-size:0.88rem; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.85rem; }

.banner {
    padding:1rem 1.25rem; border:1px solid var(--border); border-radius:10px;
    margin-bottom:1.5rem; background:var(--card);
}
.banner.success { border-color:rgba(74,222,128,0.3); background:rgba(74,222,128,0.05); }
.banner.warn { border-color:rgba(250,204,21,0.3); background:rgba(250,204,21,0.05); }
.banner.danger { border-color:rgba(248,113,113,0.3); background:rgba(248,113,113,0.05); }

footer {
    max-width:1080px; margin:0 auto; padding:2rem;
    border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    color:var(--fg-subtle); font-size:0.8rem;
}
footer a { color:var(--fg-subtle); text-decoration:none; }
footer a:hover { color:var(--fg); }

@media (max-width:600px) {
    main { padding:2rem 1.25rem 4rem; }
    .row { flex-direction:column; align-items:flex-start; gap:0.25rem; }
    nav { padding:0.8rem 1rem; }
}