:root { --ink:#172b4d; --muted:#5b6b82; --paper:#f7f9fc; --panel:#fff; --line:#dce4ee; --accent:#0d6b78; --accent-dark:#09515b; --warm:#e8f2f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.55; }
a { color:inherit; }
.development-banner { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; padding:10px 20px; color:#513d00; background:#fff2bd; border-bottom:1px solid #e5cc6b; font-size:.82rem; text-align:center; }
.development-banner strong { letter-spacing:.08em; }
.site-header { max-width:1180px; margin:auto; padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { font-size:1.35rem; font-weight:800; letter-spacing:.08em; text-decoration:none; }
nav { display:flex; align-items:center; gap:24px; font-size:.94rem; }
nav a { text-decoration:none; color:var(--muted); }
nav a:hover { color:var(--ink); }
.staff-login { color:var(--accent); font-size:.86rem; font-weight:700; }
.nav-button, .primary-button { display:inline-block; color:white !important; background:var(--accent); border:0; border-radius:999px; padding:11px 20px; font-weight:700; text-decoration:none; cursor:pointer; }
.nav-button:hover, .primary-button:hover { background:var(--accent-dark); }
main { overflow:hidden; }
.hero { max-width:1180px; margin:44px auto 0; padding:82px 28px 100px; background:linear-gradient(120deg, #eaf3f5 0%, #f7f9fc 60%); border-radius:0 0 48px 48px; }
.hero h1 { max-width:760px; margin:10px 0 22px; font-size:clamp(2.4rem, 6vw, 5.2rem); line-height:1.02; letter-spacing:-.045em; }
.hero-copy { max-width:650px; color:var(--muted); font-size:1.18rem; margin-bottom:30px; }
.eyebrow { margin:0; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:800; }
.section { max-width:1180px; margin:0 auto; padding:92px 28px; }
.section h2 { font-size:clamp(1.8rem, 3vw, 3rem); line-height:1.08; letter-spacing:-.03em; margin:8px 0 18px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.two-column > p { color:var(--muted); font-size:1.15rem; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.section-heading { grid-column:1/-1; }
.card, .contact-panel { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:0 8px 28px rgba(23,43,77,.05); }
.card-number { color:var(--accent); font-size:.78rem; font-weight:800; }
.card h3 { margin:28px 0 10px; font-size:1.3rem; }
.card p { color:var(--muted); margin:0; }
.phases { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; background:#edf5f6; }
.phases .section-heading { grid-column:1/-1; }
.phase-card { background:rgba(255,255,255,.82); border:1px solid #cfe0e3; border-radius:22px; padding:28px; }
.phase-card.phase-current { border-color:var(--accent); box-shadow:0 8px 24px rgba(13,107,120,.12); }
.phase-label { color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:800; }
.phase-card h3 { margin:18px 0 10px; font-size:1.3rem; }
.phase-card p { margin:0; color:var(--muted); }
.section-intro { max-width:700px; color:var(--muted); margin:0; }
.examples { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.examples .section-heading { grid-column:1/-1; }
.example-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.example-list div { display:grid; gap:4px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.example-list span { color:var(--muted); }
.demo-section { background:#f0f5f8; }
.demo-section .section-heading { margin-bottom:28px; }
.demo-panel { padding:26px; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 25px rgba(23,43,77,.04); }
.demo-search { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.demo-label { color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:800; }
.demo-panel h3 { margin:12px 0 16px; font-size:1.25rem; }
.demo-panel label { display:block; }
.demo-results { min-height:80px; display:grid; gap:10px; }
.demo-result { display:grid; gap:4px; padding:14px; border-left:3px solid var(--accent); background:#f5faf9; }
.demo-result span, .muted { color:var(--muted); }
.secondary-button { border:1px solid #b7c9d5; border-radius:999px; padding:10px 16px; color:var(--ink); background:white; font:inherit; font-weight:700; cursor:pointer; }
.secondary-button:hover { border-color:var(--accent); color:var(--accent); }
.demo-hidden { margin-top:16px; padding:14px; background:#f4f8fa; border-radius:12px; color:var(--muted); }
.demo-timeline { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.demo-timeline li { display:grid; gap:2px; padding-left:18px; border-left:3px solid #cbd7df; }
.demo-timeline li.complete { border-color:#3d9a78; }
.demo-timeline li.current { border-color:var(--accent); }
.demo-timeline span { color:var(--muted); font-size:.9rem; }
.interest-demo { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:18px; }
.demo-interest-form { display:grid; gap:8px; }
.contact-panel { display:grid; grid-template-columns:1fr 1fr; gap:60px; background:var(--warm); }
form { display:grid; gap:9px; }
label { font-weight:700; font-size:.9rem; margin-top:6px; }
input, textarea { width:100%; padding:12px 14px; border:1px solid #c9d5e4; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
textarea { resize:vertical; }
.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status { min-height:1.5em; color:var(--muted); margin:4px 0 0; }
.comment-login-prompt { padding:14px; border:1px dashed #b7c9d5; border-radius:10px; color:var(--muted); }
.saved-comment { margin:8px 0 0; padding:10px 12px; border-left:3px solid var(--accent); background:#f5faf9; color:var(--muted); font-size:.9rem; }
.site-footer { max-width:1180px; margin:auto; padding:28px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); }
.staff-feedback-link { color:var(--accent) !important; font-weight:700; }
.staff-feedback-link[hidden] { display:none; }
.staff-inbox-hero { max-width:1180px; margin:44px auto 0; padding:70px 28px 64px; background:linear-gradient(120deg, #eaf3f5 0%, #f7f9fc 60%); border-radius:0 0 40px 40px; }
.staff-inbox-hero h1 { margin:10px 0 12px; font-size:clamp(2.4rem, 6vw, 4.8rem); line-height:1.02; letter-spacing:-.045em; }
.feedback-identity { color:var(--accent); font-weight:700; }
.feedback-toolbar { max-width:1180px; margin:24px auto 0; padding:22px 28px; display:grid; grid-template-columns:minmax(0,1fr) 240px auto; gap:18px; align-items:end; background:var(--panel); border:1px solid var(--line); border-radius:18px; }
.feedback-toolbar label { display:block; margin:0 0 6px; }
.feedback-toolbar select { width:100%; padding:12px 14px; border:1px solid #c9d5e4; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.feedback-list-section { max-width:1180px; margin:auto; padding:70px 28px; }
.feedback-list { display:grid; gap:16px; }
.feedback-card { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 25px rgba(23,43,77,.04); }
.feedback-card-top { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.feedback-tag { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.04em; }
.feedback-tag.interest { color:#6a4a00; background:#fff2bd; }
.feedback-tag.comment { color:var(--accent-dark); background:#dff0ef; }
.feedback-ref, .feedback-meta { color:var(--muted); font-size:.86rem; }
.feedback-card h3 { margin:14px 0 4px; font-size:1.25rem; }
.feedback-meta { margin:0 0 18px; }
.feedback-fields { display:grid; gap:8px; }
.feedback-field { display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; padding:10px 0; border-top:1px solid var(--line); }
.feedback-field span { white-space:pre-wrap; overflow-wrap:anywhere; }
.empty-state { padding:24px; border:1px dashed #b7c9d5; border-radius:14px; color:var(--muted); background:#fbfdfe; }
.feed-compose { max-width:1180px; margin:24px auto 0; padding:28px; background:var(--warm); border:1px solid var(--line); border-radius:20px; }
.feed-compose h2 { margin-top:0; }
.feed-task-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feed-list { display:grid; gap:14px; }
.feed-item { padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 20px rgba(23,43,77,.04); }
.feed-reply { margin-left:42px; border-left:4px solid var(--accent); }
.feed-item h3 { margin:0 0 4px; }
.feed-message { white-space:pre-wrap; margin-bottom:0; }
.feed-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.linked-task-note { color:#765a0c; font-size:.88rem; font-weight:700; }
.reply-form { margin-top:16px; padding:16px; background:#f4f8fa; border-radius:12px; }
.feed-parent { padding:10px 12px; color:var(--muted); background:#f4f8fa; border-radius:10px; font-size:.9rem; }
.task-discussion { margin-top:14px; padding:18px; background:#fbfdfe; border:1px solid var(--line); border-radius:12px; }
.feed-disclosure { margin-top:14px; }
.feed-disclosure summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--accent); font-weight:800; list-style-position:inside; }
.feed-disclosure summary::marker { color:var(--accent); }
.nested-reply { margin:16px 0 0 24px; padding:14px 0 0 18px; border-left:3px solid #cfe0e3; }
.feed-tasks-heading { margin-top:54px !important; }
.task-item { border-left:4px solid #c49a2c; }
.task-open-link { display:inline-block; margin-top:10px; color:var(--ink); text-decoration:none; }
.task-detail-section { max-width:1180px; margin:auto; padding:70px 28px; }
.task-detail-section h2 { margin-top:48px; }
.task-detail-card { max-width:760px; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:18px; }
.task-detail-row { display:grid; grid-template-columns:180px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
@media (max-width:720px) { .site-header, nav, .site-footer { align-items:flex-start; } .site-header, .site-footer { flex-direction:column; } nav { flex-wrap:wrap; gap:14px; } .hero, .staff-inbox-hero { margin-top:10px; padding-top:58px; } .two-column, .cards, .phases, .examples, .example-list, .demo-search, .demo-grid, .interest-demo, .contact-panel, .feedback-toolbar, .feed-task-grid { grid-template-columns:1fr; gap:24px; } .section, .feedback-list-section { padding:64px 22px; } .feedback-field { grid-template-columns:1fr; gap:3px; } .feed-reply { margin-left:12px; } }
.public-boundary {
  border: 1px solid rgba(16, 112, 126, .22);
  background: linear-gradient(135deg, rgba(225, 244, 242, .8), rgba(247, 250, 252, .92));
}

.admin-main { max-width: 1180px; margin: 0 auto; padding: 0 32px 72px; }
.admin-hero { padding: 76px 0 52px; max-width: 820px; }
.admin-hero h1 { max-width: 760px; }
.identity-note { display: inline-block; margin-top: 22px; padding: 10px 14px; border-radius: 999px; background: rgba(16, 112, 126, .09); color: #0b6472; font-size: .92rem; }
.admin-section { padding: 44px 0; border-top: 1px solid rgba(28, 52, 74, .12); }
.content-repository-section { padding-top: 34px; padding-bottom: 42px; }
.repository-action { display:flex; flex-direction:column; gap:8px; max-width:820px; padding:24px 28px; border-radius:16px; background:#e8f3f2; border:2px solid #10707e; color:var(--ink); text-decoration:none; box-shadow:0 8px 24px rgba(16,112,126,.10); }
.repository-action strong { color:#0b6573; font-size:1.08rem; }
.repository-action span { color:#53677b; }
.repository-action:hover { background:#dceeed; transform:translateY(-2px); }
.admin-stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.admin-stage { min-height: 255px; padding: 26px; border: 1px solid rgba(28, 52, 74, .13); border-radius: 18px; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 30px rgba(24, 55, 82, .06); }
.admin-stage.current-stage { border-color: rgba(16, 112, 126, .45); box-shadow: 0 12px 34px rgba(16, 112, 126, .12); }
.admin-stage h3 { margin: 12px 0 10px; }
.admin-stage p { color: #53677b; line-height: 1.6; }
.status-pill { display: inline-block; margin-top: 12px; padding: 6px 10px; border-radius: 999px; background: #edf1f5; color: #53677b; font-size: .82rem; }
.admin-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.admin-tool { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 15px; background: #fff; border: 1px solid rgba(28, 52, 74, .12); color: inherit; text-decoration: none; }
.admin-tool:hover { border-color: #10707e; transform: translateY(-2px); }
.admin-tool span { color: #53677b; line-height: 1.5; }
.admin-next { max-width: 760px; }
.admin-next li { margin: 10px 0; color: #53677b; }
.active-nav { color: #0b6472; font-weight: 700; }
@media (max-width: 800px) { .admin-main { padding: 0 20px 52px; } .admin-stage-grid, .admin-tools { grid-template-columns: 1fr; } .admin-hero { padding-top: 48px; } }