:root {
    --blue:#2458dc;
    --navy:#142d59;
    --ink:#172b4d;
    --muted:#607089;
    --line:#dce4f0;
    --canvas:#f4f7fc;
    --radius:18px;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font:15px/1.65 'Segoe UI',Arial,sans-serif;
}
a {
    color:var(--blue);
    text-underline-offset:4px;
}
button,input,textarea,select {
    font:inherit;
}
button,a,input,textarea,select {
    touch-action:manipulation;
}
:focus-visible {
    outline:3px solid #ea9b28;
    outline-offset:4px;
}
h1,h2,h3,p {
    margin-top:0;
}
h1 {
    font-size:clamp(28px,3.7vw,46px);
    line-height:1.18;
    letter-spacing:-1.3px;
    margin-bottom:18px;
}
h2 {
    font-size:22px;
    line-height:1.35;
    letter-spacing:-.4px;
}
h3 {
    font-size:18px;
}
p {
    color:var(--muted);
}
hr {
    border:0;
    border-top:1px solid var(--line);
    margin:30px 0;
}
.site-header {
    min-height:88px;
    padding:18px max(24px,calc((100vw - 1200px)/2));
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:32px;
    align-items:center;
}
.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
    color:var(--navy);
    font-size:23px;
    font-weight:800;
    letter-spacing:-.7px;
    white-space:nowrap;
}
.brand>span:last-child {
    color:var(--blue);
}
.brand-mark {
    background:var(--blue);
    color:#fff;
    border-radius:12px 12px 12px 3px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    margin-right:10px;
    font-size:24px;
}
.site-header nav {
    display:flex;
    gap:8px;
    flex:1;
    flex-wrap:wrap;
}
.site-header nav a {
    padding:10px 14px;
    text-decoration:none;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    border-radius:9px;
}
.site-header nav a:hover,.site-header nav a[aria-current] {
    background:#edf3ff;
    color:var(--blue);
}
.account {
    display:flex;
    align-items:center;
    gap:12px;
}
.workspace {
    max-width:1200px;
    padding:44px 24px 64px;
    margin:auto;
    min-height:calc(100vh - 180px);
}
.site-footer {
    max-width:1152px;
    margin:auto;
    border-top:1px solid var(--line);
    padding:22px 0;
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--muted);
    font-size:13px;
}
.eyebrow {
    font-size:12px;
    font-weight:800;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;
}
.page-heading {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    margin-bottom:28px;
}
.page-heading p {
    margin-bottom:0;
}
.btn,button[type=submit] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:11px 20px;
    background:var(--blue);
    color:white;
    border:1px solid transparent;
    border-radius:10px;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
    line-height:1.4;
}
.btn:hover,button[type=submit]:hover {
    background:#1946b8;
}
.btn.secondary,.btn.subtle {
    background:#fff;
    border-color:var(--line);
    color:var(--ink);
}
.btn.secondary:hover,.btn.subtle:hover {
    background:#edf3ff;
}
.btn.danger {
    background:#fff;
    color:#b42332;
    border-color:#f0cbd0;
}
.actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:26px;
}
.card,.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
}
.cards {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.project-card {
    display:flex;
    flex-direction:column;
    transition:border-color .15s,box-shadow .15s;
}
.project-card:hover {
    border-color:#9fb9ee;
    box-shadow:0 10px 30px #163b7610;
}
.project-card h2 {
    margin:18px 0 10px;
}
.project-card h2 a {
    color:var(--navy);
    text-decoration:none;
}
.card-top,.card-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.card-bottom {
    margin-top:auto;
    padding-top:22px;
    border-top:1px solid var(--line);
}
.card-bottom strong {
    display:block;
    font-size:18px;
}
.badge {
    display:inline-flex;
    border-radius:6px;
    background:#edf3ff;
    color:#345da0;
    padding:4px 10px;
    font-size:12px;
    font-weight:700;
}
.badge.open {
    background:#e7f5ef;
    color:#22684b;
}
.badge.closed {
    background:#f0f1f5;
    color:#596375;
}
.description {
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:12px 0 24px;
}
.meta,small {
    font-size:13px;
    color:var(--muted);
}
.empty {
    text-align:center;
    padding:64px 24px;
    grid-column:1/-1;
}
.empty-symbol {
    font-size:38px;
    color:var(--blue);
    margin-bottom:14px;
}
.hero {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:42px;
    background:var(--navy);
    padding:54px;
    border-radius:24px;
    color:white;
    margin-bottom:32px;
    overflow:hidden;
    position:relative;
}
.hero h1 {
    font-size:clamp(32px,4vw,52px);
}
.hero p {
    color:#c4d4ee;
}
.hero .eyebrow {
    color:#9fc2ff;
}
.hero .btn {
    background:#fff;
    color:var(--navy);
}
.hero .btn.secondary {
    background:transparent;
    color:#fff;
    border-color:#7892bb;
}
.hero-art {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
}
.hero-art .mini-card {
    background:#ffffff0e;
    border:1px solid #ffffff26;
    border-radius:14px;
    padding:22px;
}
.mini-card strong {
    display:block;
    font-size:19px;
    margin:5px 0;
}
.mini-card span {
    color:#c4d4ee;
    font-size:13px;
}
.steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:26px;
}
.step-number {
    display:inline-grid;
    place-items:center;
    width:36px;
    height:36px;
    background:#edf3ff;
    color:var(--blue);
    border-radius:10px;
    font-weight:700;
    margin-bottom:18px;
}
.auth-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:1000px;
    margin:8px auto;
    gap:0;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    background:#fff;
}
.auth-story {
    background:var(--navy);
    padding:48px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.auth-story p {
    color:#c4d4ee;
}
.auth-story .eyebrow {
    color:#9fc2ff;
}
.auth-form {
    padding:40px;
}
.auth-form h1 {
    font-size:30px;
}
.auth-form button {
    width:100%;
    margin-top:20px;
}
.auth-form>p:last-child {
    font-size:14px;
    margin:24px 0 0;
}
.field {
    margin-bottom:20px;
}
label {
    display:block;
    font-size:14px;
    font-weight:650;
    margin:18px 0 7px;
}
input,textarea,select {
    width:100%;
    padding:12px 14px;
    border:1px solid #bdcadc;
    border-radius:9px;
    background:#fff;
    color:var(--ink);
    min-height:47px;
}
textarea {
    min-height:150px;
    resize:vertical;
}
input:focus,textarea:focus,select:focus {
    border-color:var(--blue);
}
.error {
    color:#a52234;
    font-size:14px;
}
.notice {
    padding:16px 20px;
    margin-bottom:24px;
    border-radius:12px;
    border:1px solid;
}
.notice.success {
    background:#e9f7ef;
    color:#1e6345;
    border-color:#c7e8d5;
}
.notice.error {
    background:#fff0f1;
    border-color:#efcbd0;
}
.notice ul {
    margin-bottom:0;
}
.form-layout,.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
    gap:26px;
    align-items:start;
}
.guide {
    background:#eaf1ff;
    border:1px solid #d3e0fb;
    border-radius:var(--radius);
    padding:28px;
}
.guide p:last-child {
    margin-bottom:0;
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px;
}
.breadcrumb {
    font-size:13px;
    margin-bottom:22px;
}
.info {
    margin:20px 0;
}
.info strong {
    color:var(--ink);
}
.prose {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.bid-card {
    background:#f6f8fc;
    border:1px solid var(--line);
    padding:24px;
    border-radius:14px;
    margin:18px 0;
}
.section-space {
    margin-top:30px;
}
.pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:30px;
}
.pagination .disabled {
    color:var(--muted);
    padding:10px;
}
.skip-link {
    position:absolute;
    left:20px;
    top:-100px;
    background:#fff;
    padding:12px;
    z-index:10;
}
.skip-link:focus {
    top:10px;
}
h1,h2,h3,.account,.meta,.badge,.card,.panel {
    overflow-wrap:anywhere;
}
@media(max-width:900px) {
    .site-header {
    flex-wrap:wrap;
    gap:14px;
    padding:18px 24px;
}
    .site-header nav {
    order:3;
    flex-basis:100%;
}
    .account {
    margin-left:auto;
}
    .hero {
    padding:32px;
    gap:25px;
    grid-template-columns:1fr;
}
    .hero-art {
    display:none;
}
    .auth-story,.auth-form {
    padding:30px;
}
    .site-footer {
    margin:0 24px;
}
    .detail-layout,.form-layout {
    grid-template-columns:1fr;
}
    .guide {
    order:2;
}
}
@media(max-width:600px) {
    .workspace {
    padding:28px 18px 42px;
}
    .site-header {
    padding:16px 18px;
}
    .site-header nav {
    gap:3px;
}
    .site-header nav a {
    padding:9px;
    font-size:13px;
}
    .account {
    gap:8px;
}
    .account .btn {
    padding:8px 10px;
    min-height:40px;
}
    .brand {
    font-size:20px;
}
    .brand-mark {
    width:32px;
    height:32px;
}
    .cards,.steps,.auth-grid,.form-grid {
    grid-template-columns:1fr;
}
    .page-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
}
    .card,.panel {
    padding:22px;
}
    .hero {
    padding:28px;
    border-radius:18px;
}
    .auth-story {
    padding:28px;
}
    .auth-story h2 {
    font-size:24px;
}
    .auth-story p:last-child {
    margin:0;
}
    .auth-form {
    padding:26px;
    order:-1;
}
    .site-footer {
    flex-direction:column;
    gap:4px;
}
    .card-bottom {
    align-items:flex-start;
    flex-direction:column;
}
    .pagination {
    flex-wrap:wrap;
}
    .actions .btn {
    flex-grow:1;
}
}