@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --navy:#101d38; --blue:#203b69; --ink:#172033;
    --muted:#788196; --line:#e7eaf0; --paper:#fff;
    --soft:#f5f7fb; --accent:#a8c7ff;
}
* { box-sizing:border-box; }
body { margin:0; font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
h1,h2,.wordmark { font-family:'Manrope',sans-serif; letter-spacing:-.04em; }
.muted { color:var(--muted); line-height:1.65; font-size:14px; }
.eyebrow { font-size:10px; letter-spacing:.18em; font-weight:700; color:#77829a; }
.brand-mark { width:50px;height:50px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;letter-spacing:-.08em;font-size:20px;border-radius:14px; }
.brand-mark span { color:var(--accent); }
.primary-button { border:0;background:var(--navy);color:white;padding:14px 18px;border-radius:9px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:20px; }
.primary-button:hover { background:#263f6d; }
.notice { padding:12px 14px;border-radius:8px;margin:16px 0;font-size:13px; }
.notice.error { background:#fff0f0;color:#a52c38; }
.notice.success { background:#edf9f1;color:#176d40; }

/* Intro animation */
.intro-page { min-height:100vh;background:#f9fafc;overflow:hidden; }
.intro-shell { max-width:1240px;margin:auto;padding:28px 5vw;min-height:100vh;display:flex;flex-direction:column; }
.topline,.intro-bottom { display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.15em;font-weight:700;color:#7b8496; }
.construction { flex:1;display:flex;flex-direction:column;justify-content:center;min-height:600px; }
.scene-label { font-size:10px;letter-spacing:.2em;color:#8892a5;text-align:center;margin:40px 0 22px; }
.skyline { height:270px;position:relative;max-width:690px;width:100%;margin:auto; }
.ground { position:absolute;bottom:12px;left:3%;right:3%;height:2px;background:#dce2ec; }
.building { position:absolute;bottom:14px;left:38%;width:180px;height:0;animation:build-house 3.8s 1.2s forwards; }
.building-roof { height:14px;background:var(--blue);transform:skew(-8deg); }
.building-body { height:175px;background:#e8edf6;border:2px solid var(--navy);position:relative;padding:17px; }
.window-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.window-grid i { display:block;height:28px;background:var(--blue);opacity:0;animation:light-up .35s 2.8s forwards; }
.window-grid i:nth-child(2n) { animation-delay:3s; }
.window-grid i:nth-child(3n) { animation-delay:3.2s; }
.building-door { position:absolute;bottom:0;left:calc(50% - 14px);height:35px;width:28px;background:var(--navy); }
.crane { position:absolute;z-index:2;left:14%;bottom:14px;height:220px;width:300px; }
.crane-tower { position:absolute;left:65px;bottom:0;height:205px;width:9px;background:var(--navy); }
.crane-tower:after { content:"";position:absolute;left:-10px;bottom:0;width:29px;height:6px;background:var(--navy); }
.crane-arm { position:absolute;left:60px;top:10px;width:230px;height:7px;background:var(--navy);transform-origin:left center; }
.crane-arm:before { content:"";position:absolute;left:0;top:0;width:130px;height:36px;border-top:2px solid #8392ad;border-right:2px solid #8392ad;transform:skewY(-14deg); }
.crane-cable { position:absolute;left:265px;top:17px;height:83px;width:2px;background:#526585;animation:lower-cable 3s .6s both; }
.crane-load { position:absolute;left:250px;top:96px;width:32px;height:26px;background:#b5c8e9;border:2px solid var(--navy);animation:lower-load 3s .6s both; }
.brand-reveal { text-align:center;opacity:0;transform:translateY(18px);animation:brand-in 1s 4.6s forwards; }
.brand-reveal .brand-mark { margin:18px auto; }
.brand-reveal h1 { margin:12px 0 6px;font-size:clamp(38px,7vw,70px);color:var(--navy); }
.brand-reveal h1 strong { font-weight:400; }
.brand-reveal p { font-size:10px;letter-spacing:.24em;color:#7a8498; }
.progress-track { height:2px;background:#e7eaf0;margin:35px 0 20px;overflow:hidden; }
.progress-track span { display:block;width:0;height:100%;background:var(--navy);animation:progress 10s linear forwards; }
.intro-bottom { align-items:center;flex-wrap:wrap; }
.enter-link { color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:5px; }
@keyframes build-house { from{height:0} to{height:189px} }
@keyframes light-up { to{opacity:1} }
@keyframes lower-cable { 0%{height:20px} 75%{height:83px} 100%{height:83px} }
@keyframes lower-load { 0%{top:35px} 75%{top:96px} 100%{top:96px} }
@keyframes brand-in { to{opacity:1;transform:translateY(0)} }
@keyframes progress { to{width:100%} }

/* Login */
.login-page { min-height:100vh;background:linear-gradient(135deg,#f5f7fb,#fff);display:grid;place-items:center;padding:24px;position:relative; }
.back-link { position:absolute;left:5vw;top:28px;font-size:13px;color:#53617a; }
.login-card { width:min(100%,420px);background:white;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:0 25px 70px #172c5010; }
.login-card .brand-mark { margin-bottom:28px; }
.login-card h1 { font-size:34px;margin:12px 0 6px; }
.login-card h1 span,.welcome-row h1 span { color:#6e88b6; }
.login-card form { margin-top:28px;display:grid;gap:10px; }
label { display:grid;gap:8px;font-size:12px;font-weight:600;color:#49556c; }
input,select,textarea { width:100%;border:1px solid #dfe4ed;background:#fff;border-radius:8px;padding:12px;color:var(--ink);outline:none; }
input:focus,select:focus,textarea:focus { border-color:#7f9ed2;box-shadow:0 0 0 3px #8aa8dc20; }
.login-card input { margin-bottom:10px; }
.login-card .primary-button { margin-top:8px;width:100%; }
.login-foot { margin-top:27px;padding-top:18px;border-top:1px solid var(--line);font-size:9px;letter-spacing:.14em;color:#9aa2b1; }
.button-link { margin-top:22px; }

/* Workspace */
.dashboard-page { background:#f7f8fb;min-height:100vh; }
.dashboard-header { height:78px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;gap:20px; }
.wordmark { color:var(--navy);font-size:18px;font-weight:800;letter-spacing:-.06em; }
.wordmark b { font-weight:500; }
.header-user { display:flex;align-items:center;gap:12px;font-size:12px; }
.header-user small { display:block;color:var(--muted);font-size:10px;margin-top:4px; }
.avatar { width:36px;height:36px;display:grid;place-items:center;background:#eaf0fa;color:var(--navy);border-radius:50%;font-weight:700; }
.header-user form { margin-left:12px; }
.logout-button { background:none;border:0;color:#65718a;font-size:12px; }
.workspace { max-width:1200px;margin:auto;padding:44px 28px; }
.welcome-row,.section-heading { display:flex;justify-content:space-between;align-items:center;gap:20px; }
.welcome-row h1 { font-size:clamp(28px,4vw,42px);margin:12px 0 6px; }
.date-badge,.status-pill { font-size:9px;letter-spacing:.12em;font-weight:700;color:#67748d;border:1px solid #dfe5ef;padding:10px 12px;border-radius:6px;white-space:nowrap; }
.business-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0; }
.business-card,.panel { background:white;border:1px solid var(--line);border-radius:13px;padding:22px; }
.business-card { position:relative;overflow:hidden; }
.card-index { position:absolute;right:18px;top:17px;font-size:11px;color:#a4adbc; }
.card-icon { width:42px;height:42px;border-radius:11px;background:#edf2fb;display:grid;place-items:center;font-size:23px;color:var(--navy);margin-bottom:24px; }
.business-card h2 { font-size:20px;margin:8px 0; }
.business-card p { min-height:42px; }
.metric-row { display:flex;justify-content:space-between;gap:12px;border-top:1px solid #eef0f5;padding-top:13px;margin-top:13px;font-size:11px;color:#7c8699; }
.metric-row strong { color:var(--navy);font-size:12px; }
.panel { margin:18px 0;padding:25px; }
.section-heading { margin-bottom:22px; }
.section-heading h2 { margin:6px 0 0;font-size:23px; }
.record-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end; }
.record-form .wide-field { grid-column:1/-1; }
.record-form .primary-button { justify-self:start;min-width:170px; }
textarea { resize:vertical; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse;width:100%;font-size:12px; }
th { text-align:left;font-size:9px;letter-spacing:.1em;color:#8892a5;font-weight:700; }
th,td { padding:14px 12px;border-bottom:1px solid #eef0f5;white-space:nowrap; }
td small { display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;color:#8b94a5;margin-top:5px; }
.record-status { display:inline-block;padding:5px 8px;background:#f0f3f9;border-radius:5px;font-size:10px; }
.empty-state { text-align:center;padding:35px;color:#9099aa; }
.workspace-footer { display:flex;justify-content:space-between;gap:20px;padding:30px 0 10px;font-size:10px;letter-spacing:.12em;font-weight:700;color:#9aa2b1; }
@media(max-width:760px) {
    .business-grid { grid-template-columns:1fr; }
    .business-card p { min-height:0; }
    .welcome-row { align-items:flex-start;flex-direction:column; }
    .record-form { grid-template-columns:1fr; }
    .record-form .wide-field { grid-column:auto; }
    .dashboard-header { padding:0 18px; }
    .workspace { padding:30px 16px; }
    .header-user { gap:8px; }
    .header-user form { margin-left:0; }
    .panel { padding:18px; }
    .login-card { padding:28px 22px; }
    .intro-shell { padding:24px; }
    .crane { left:0;transform:scale(.8);transform-origin:bottom left; }
    .building { left:40%; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important; }
}

/* 3PREP HOUSE language selector */
.language-switch {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 9999;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(20, 42, 78, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 18px rgba(10, 25, 50, 0.10);
}
.language-switch button {
    border: 0;
    border-radius: 7px;
    padding: 7px 11px;
    color: #172d50;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.language-switch button.active {
    color: #fff;
    background: #172d50;
}
.language-switch button:focus-visible {
    outline: 2px solid #5278b8;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .language-switch {
        top: 10px;
        right: 10px;
    }
}