@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
.content-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 22px; align-items: stretch; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 20px rgba(25, 51, 63, .035); }
.details-card { padding: 28px 30px; } .panel-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #eaf0f0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 26px; padding: 27px 0 26px; } .detail-item--wide { grid-column: 1 / -1; }
.detail-label { display: block; margin-bottom: 7px; color: #829099; font-size: 12px; } .detail-item strong { color: #223a4b; font-size: 15px; font-weight: 600; }
.participants { padding-top: 23px; border-top: 1px solid #eaf0f0; } .participants-label { display: flex; align-items: center; gap: 7px; margin-bottom: 17px; color: #54656f; font-size: 12px; font-weight: 700; } .participant-list { display: flex; gap: 16px; }
.participant { display: flex; align-items: center; gap: 8px; min-width: 0; } .participant-avatar { width: 28px; height: 28px; flex: 0 0 auto; background: #edf2f2; color: #45636b; font-size: 9px; } .participant strong, .participant small { display: block; white-space: nowrap; } .participant strong { color: #334854; font-size: 12px; font-weight: 600; } .participant small { margin-top: 3px; color: #829099; font-size: 10px; }
.recording-panel { position: relative; display: flex; min-height: 500px; padding: 27px 30px 24px; flex-direction: column; align-items: center; text-align: center; } .recording-topline { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: auto; color: #95a1a7; }
.status-label { display: flex; align-items: center; gap: 7px; color: #63737b; font-size: 12px; font-weight: 700; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4c2c2; } .recording-panel--recording .status-label { color: #b45d49; } .recording-panel--recording .status-dot { background: #d96e52; }
.recording-panel--completed .status-label { color: #2c8170; } .recording-panel--completed .status-dot { background: #36a286; } .help-button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #95a1a7; }
.recording-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 17px; border-radius: 50%; background: #e8f3f0; color: var(--teal); } .recording-icon--live { background: #fbe9e4; color: #c76249; } .recording-icon--complete { background: #e8f3f0; color: #258673; }
.recording-kicker { margin: 0 0 8px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .recording-panel h2 { margin-bottom: 10px; } .recording-copy { max-width: 280px; margin: 0 0 26px; color: #7a8991; font-size: 13px; line-height: 1.5; }
.primary-button, .stop-button, .upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 3px; font-size: 13px; font-weight: 700; } .primary-button { min-height: 45px; padding: 0 19px; background: var(--navy); color: white; } .stop-button { min-height: 45px; padding: 0 19px; background: #be5d47; color: white; } .stop-square { width: 11px; height: 11px; border-radius: 2px; background: #fff; }
.consent-notice { max-width: 295px; margin: auto 0 0; color: #97a1a6; font-size: 10px; line-height: 1.5; } .upload-button { min-height: 39px; margin-top: 16px; padding: 0 14px; border: 1px solid #d4dfe0; background: #fff; color: #49616b; font-size: 12px; }
.timer { margin: 2px 0 20px; color: var(--navy); font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: 1px; } .waveform { display: flex; align-items: center; justify-content: center; gap: 4px; width: 84%; height: 54px; margin: 0 0 23px; } .waveform span { display: block; width: 4px; min-height: 8px; border-radius: 4px; background: #d9785e; animation: wave .8s ease-in-out infinite alternate; }
.recording-summary { display: grid; gap: 11px; width: min(315px, 100%); margin: 3px 0 22px; padding: 15px 17px; border: 1px solid #edf0f1; border-radius: 3px; text-align: left; } .recording-summary > div { display: flex; align-items: center; gap: 10px; color: #6f8188; font-size: 11px; } .recording-summary span { display: flex; flex: 1; justify-content: space-between; gap: 14px; } .recording-summary strong { color: #334854; font-weight: 600; text-align: right; }
.page-footer { display: flex; justify-content: space-between; margin-top: 26px; color: #97a1a6; font-size: 10px; } .placeholder-page { width: min(580px, 90%); margin: 14vh auto; padding: 48px; background: #fff; border: 1px solid var(--border); border-radius: 4px; text-align: center; } .placeholder-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%; background: #e8f3f0; color: var(--teal); }
@media (max-width: 860px) { .content-grid { grid-template-columns: 1fr; } .recording-panel { min-height: 430px; } .page-shell { width: min(680px, 90%); } .participant-list { flex-wrap: wrap; } } @media (max-width: 520px) { .topbar { padding: 0 5%; } .user-name { display: none; } .page-shell { width: 90%; padding-top: 25px; } .page-intro { align-items: start; gap: 18px; } .details-card, .recording-panel { padding: 22px 19px; } .participant-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; } .page-footer { flex-direction: column; } .page-footer > span:last-child { display: none; } .placeholder-page { padding: 34px 24px; } }
:root { font-family: 'DM Sans', sans-serif; color: #172331; background: #f3f5f5; --navy: #082b49; --yellow: #ffd000; --teal: #007a78; --muted: #6e7e87; --border: #dce5e5; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: #f3f5f5; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button, label { cursor: pointer; }
button:focus-visible, a:focus-visible, label:has(input:focus-visible) { outline: 3px solid rgba(255, 208, 0, .8); outline-offset: 3px; }
.topbar { height: 76px; padding: 0 6.5%; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: white; }.brand { display: inline-flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; }.brand-mark { display: grid; place-items: center; width: 48px; height: 28px; background: var(--yellow); color: var(--navy); font-size: 12px; letter-spacing: .5px; }.brand-divider { width: 1px; height: 23px; background: rgba(255,255,255,.35); }.user-menu { display: flex; align-items: center; gap: 12px; color: #d8e1e4; font-size: 14px; }.avatar, .participant-avatar { display: grid; place-items: center; border-radius: 50%; background: #dcebe8; color: #006d6b; font-size: 11px; font-weight: 700; }.avatar { width: 34px; height: 34px; }
.page-shell { width: min(1160px, 87%); margin: 0 auto; padding: 35px 0 24px; }.breadcrumb { display: flex; align-items: center; gap: 9px; color: #718088; font-size: 13px; }.breadcrumb svg { color: var(--teal); }.breadcrumb b { color: #acb8bc; font-weight: 400; }.breadcrumb strong { color: #334852; font-weight: 500; }.page-intro { display: flex; align-items: end; justify-content: space-between; margin: 39px 0 28px; }.eyebrow { margin: 0 0 9px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } h1, h2 { margin: 0; color: var(--navy); font-family: 'Space Grotesk', sans-serif; letter-spacing: -.7px; } h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; } h2 { font-size: 21px; }.page-intro p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 15px; }.step-indicator { display: flex; align-items: center; gap: 10px; color: #819096; font-size: 12px; line-height: 1.35; }.step-number { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #91bdbc; border-radius: 50%; color: var(--teal); font-weight: 700; }.step-indicator small { color: #334853; font-weight: 600; }
.content-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 22px; align-items: stretch; }.panel { background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 20px rgba(25, 51, 63, .035); }.details-card { padding: 28px 30px; }.panel-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #eaf0f0; }.scheduled-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 3px; background: #e8f3ee; color: #287265; font-size: 11px; font-weight: 700; }.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 26px; padding: 27px 0 26px; }.detail-item--wide { grid-column: 1 / -1; }.detail-label { display: block; margin-bottom: 7px; color: #829099; font-size: 12px; }.detail-item strong { color: #223a4b; font-size: 15px; font-weight: 600; }.icon-value { display: flex; align-items: center; gap: 6px; }.icon-value svg { color: var(--teal); }.participants { padding-top: 23px; border-top: 1px solid #eaf0f0; }.participants-label { display: flex; align-items: center; gap: 7px; margin-bottom: 17px; color: #54656f; font-size: 12px; font-weight: 700; }.participants-label svg { color: var(--teal); }.participant-list { display: flex; gap: 16px; }.participant { display: flex; align-items: center; gap: 8px; min-width: 0; }.participant-avatar { width: 28px; height: 28px; flex: 0 0 auto; background: #edf2f2; color: #45636b; font-size: 9px; }.participant strong, .participant small { display: block; white-space: nowrap; }.participant strong { color: #334854; font-size: 12px; font-weight: 600; }.participant small { margin-top: 3px; color: #829099; font-size: 10px; }
.recording-panel { position: relative; display: flex; min-height: 500px; padding: 27px 30px 24px; flex-direction: column; align-items: center; text-align: center; }.recording-topline { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: auto; color: #95a1a7; }.status-label { display: flex; align-items: center; gap: 7px; color: #63737b; font-size: 12px; font-weight: 700; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4c2c2; }.recording-panel--recording .status-label { color: #b45d49; }.recording-panel--recording .status-dot { background: #d96e52; box-shadow: 0 0 0 4px #fbe9e4; }.recording-panel--completed .status-label { color: #2c8170; }.recording-panel--completed .status-dot { background: #36a286; }.help-button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #95a1a7; }.recording-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 17px; border-radius: 50%; background: #e8f3f0; color: var(--teal); }.recording-icon--live { background: #fbe9e4; color: #c76249; animation: pulse 2s infinite; }.recording-icon--complete { background: #e8f3f0; color: #258673; }.recording-kicker { margin: 0 0 8px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }.recording-panel h2 { margin-bottom: 10px; }.recording-copy { max-width: 280px; margin: 0 0 26px; color: #7a8991; font-size: 13px; line-height: 1.5; }
.primary-button, .stop-button, .upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 3px; font-size: 13px; font-weight: 700; transition: transform .15s ease, background .15s ease; }.primary-button { min-height: 45px; padding: 0 19px; background: var(--navy); color: white; }.primary-button:hover { background: #124465; transform: translateY(-1px); }.stop-button { min-height: 45px; padding: 0 19px; background: #be5d47; color: white; }.stop-button:hover { background: #a84d3b; }.stop-square { width: 11px; height: 11px; border-radius: 2px; background: #fff; }.consent-notice { max-width: 295px; margin: auto 0 0; color: #97a1a6; font-size: 10px; line-height: 1.5; }.upload-button { min-height: 39px; margin-top: 16px; padding: 0 14px; border: 1px solid #d4dfe0; background: #fff; color: #49616b; font-size: 12px; }.upload-button:hover { border-color: #8bbab4; color: var(--teal); }
.timer { margin: 2px 0 20px; color: var(--navy); font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: 1px; }.waveform { display: flex; align-items: center; justify-content: center; gap: 4px; width: 84%; height: 54px; margin: 0 0 23px; }.waveform span { display: block; width: 4px; min-height: 8px; border-radius: 4px; background: #d9785e; animation: wave .8s ease-in-out infinite alternate; }.recording-summary { display: grid; gap: 11px; width: min(315px, 100%); margin: 3px 0 22px; padding: 15px 17px; border: 1px solid #edf0f1; border-radius: 3px; text-align: left; }.recording-summary > div { display: flex; align-items: center; gap: 10px; color: #6f8188; font-size: 11px; }.recording-summary svg { color: #258673; flex: 0 0 auto; }.recording-summary span { display: flex; flex: 1; justify-content: space-between; gap: 14px; }.recording-summary strong { color: #334854; font-weight: 600; text-align: right; }
.page-footer { display: flex; justify-content: space-between; margin-top: 26px; color: #97a1a6; font-size: 10px; }.page-footer b { padding: 0 5px; font-weight: 400; }.placeholder-page { width: min(580px, 90%); margin: 14vh auto; padding: 48px; background: #fff; border: 1px solid var(--border); border-radius: 4px; text-align: center; }.placeholder-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%; background: #e8f3f0; color: var(--teal); }.placeholder-page h1 { margin-bottom: 12px; }.placeholder-page > p:not(.eyebrow) { margin: 0 auto 26px; color: #72808a; font-size: 14px; line-height: 1.5; }
.signout-button { border: 0; background: transparent; color: #d8e1e4; font-size: 12px; }.auth-page { width: min(420px, 90%); margin: 12vh auto; padding: 42px 38px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(8, 43, 73, .08); }.auth-mark { display: grid; place-items: center; width: 62px; height: 38px; margin-bottom: 26px; background: linear-gradient(135deg, #ffd000, #f1c40f); color: var(--navy); font-size: 13px; font-weight: 700; border-radius: 9px; box-shadow: inset 0 -2px 0 rgba(8, 43, 73, .08); }.auth-page h1 { margin-bottom: 10px; }.auth-copy { margin: 0 0 27px; color: var(--muted); font-size: 14px; line-height: 1.5; }.auth-form { display: grid; gap: 8px; }.auth-form label { margin-top: 8px; color: #54656f; font-size: 12px; font-weight: 700; }.auth-form input { height: 46px; padding: 0 12px; border: 1px solid #d4dfe0; border-radius: 10px; background: #f9fbfb; color: #334854; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }.auth-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 122, 120, .08); background: #fff; }.auth-form .primary-button { margin-top: 16px; border-radius: 10px; box-shadow: 0 10px 18px rgba(8, 43, 73, .12); }.auth-form .primary-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }.auth-toggle { border: 0; background: none; color: var(--teal); font-size: 12px; }.auth-message { min-height: 18px; margin: 6px 0 0; color: #b45d49; font-size: 11px; line-height: 1.4; }
.password-rules { display: none; margin-top: 10px; padding: 12px 12px 6px; border: 1px solid #e3eded; border-radius: 10px; background: linear-gradient(180deg, #fbfdfd, #f5f9f9); } .password-rules.is-visible { display: grid; gap: 8px; } .password-rule { display: flex; align-items: center; gap: 8px; color: #73858d; font-size: 11px; font-weight: 600; transition: color .15s ease; } .rule-marker { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e7efef; color: #6d7f8b; font-size: 11px; font-weight: 700; } .password-rule.is-valid { color: #1a7a6b; } .password-rule.is-valid .rule-marker { background: #dff6f2; color: #1a7a6b; } .password-rule.is-invalid { color: #b45d49; } .password-rule.is-invalid .rule-marker { background: #fcefe9; color: #b45d49; }
.main-nav { display: flex; gap: 18px; margin-left: auto; margin-right: 28px; color: #d8e1e4; font-size: 12px; }.main-nav a:hover { color: #fff; }.library-list { display: grid; gap: 18px; }.library-item { padding: 27px 30px; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 20px rgba(25, 51, 63, .035); }.library-item__head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #eaf0f0; }.library-item h2 { margin-bottom: 7px; }.audio-name { margin: 0; color: var(--muted); font-size: 12px; }.library-item audio { width: min(330px, 100%); }.result-block { padding: 20px 0 15px; }.result-block h3 { margin: 0 0 7px; color: #54656f; font-size: 12px; }.result-block p, .transcript p { margin: 0; color: #52656f; font-size: 13px; line-height: 1.6; }.transcript summary { color: var(--teal); cursor: pointer; font-size: 12px; font-weight: 700; }.transcript p { margin-top: 14px; white-space: pre-wrap; }.library-empty { padding: 36px; background: #fff; border: 1px solid var(--border); color: var(--muted); text-align: center; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 98, 73, .13); } 50% { box-shadow: 0 0 0 10px rgba(199, 98, 73, 0); } } @keyframes wave { from { transform: scaleY(.6); opacity: .65; } to { transform: scaleY(1.15); opacity: 1; } }
@media (max-width: 860px) { .content-grid { grid-template-columns: 1fr; }.recording-panel { min-height: 430px; }.page-shell { width: min(680px, 90%); }.page-intro { margin-top: 32px; }.participant-list { flex-wrap: wrap; } }
@media (max-width: 520px) { .topbar { padding: 0 5%; }.user-name { display: none; }.page-shell { width: 90%; padding-top: 25px; }.page-intro { align-items: start; gap: 18px; margin: 27px 0 22px; }.step-indicator { flex-shrink: 0; }.details-card, .recording-panel { padding: 22px 19px; }.detail-grid { gap: 19px 14px; }.participant-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }.participant strong { font-size: 11px; }.participant small { font-size: 9px; }.page-footer { gap: 15px; flex-direction: column; }.page-footer > span:last-child { display: none; }.placeholder-page { padding: 34px 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.interview-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px 18px; padding: 24px 0 25px; border-bottom: 1px solid #eaf0f0; }.form-field { min-width: 0; }.form-field--wide { grid-column: 1 / -1; }.form-field label { display: block; margin-bottom: 7px; color: #54656f; font-size: 12px; font-weight: 700; }.form-field input, .form-field select { width: 100%; border: 1px solid #d4dfe0; border-radius: 3px; background: #fff; color: #334854; font-size: 13px; outline: none; }.form-field input, .form-field select:not([multiple]) { height: 40px; padding: 0 11px; }.form-field select[multiple] { min-height: 96px; padding: 7px 9px; }.form-field input:focus, .form-field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 122, 120, .1); }.field-help { display: block; margin-top: 6px; color: #97a1a6; font-size: 10px; }
@media (max-width: 520px) { .interview-form { grid-template-columns: 1fr; gap: 15px; } }