:root { --ink:#101a2d; --muted:#697386; --line:#e5e8ef; --paper:#f7f8fa; --white:#fff; --gold:#f0b34b; --gold-soft:#fff4dc; --blue:#3157c8; --blue-soft:#eaf0ff; --green:#2d8a67; --green-soft:#e7f6ef; --red:#b34c4c; --red-soft:#fff0ef; --shadow:0 14px 40px rgba(16,26,45,.07); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-size:16px; } button, input, select { font:inherit; } button { cursor:pointer; }
.shell { min-height:100vh; } .topbar { height:72px; padding:0 32px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:3; } .brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.03em; } .brand-mark { width:32px; height:32px; border-radius:10px; background:var(--gold); color:var(--ink); display:grid; place-items:center; font-weight:900; } .org { color:#c8cfdd; font-size:.88rem; }
.layout { display:grid; grid-template-columns:220px minmax(0, 1fr); min-height:calc(100vh - 72px); } .sidebar { background:#fff; border-right:1px solid var(--line); padding:26px 16px; } .nav-label { margin:0 12px 10px; color:#9aa2b1; text-transform:uppercase; font-size:.7rem; letter-spacing:.11em; font-weight:800; } .nav button { width:100%; border:0; background:transparent; color:#617085; text-align:left; padding:12px; border-radius:10px; margin-bottom:4px; font-weight:650; } .nav button.active, .nav button:hover { background:var(--blue-soft); color:var(--blue); } .sidebar-footer { margin-top:50px; padding:16px 12px; background:var(--gold-soft); border-radius:14px; font-size:.84rem; line-height:1.45; }
.content { max-width:1360px; width:100%; margin:0 auto; padding:34px 42px 100px; } .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; } h1 { margin:0; font-size:2rem; letter-spacing:-.045em; } h2 { margin:0; font-size:1.25rem; letter-spacing:-.025em; } h3 { margin:0; font-size:1rem; } p { margin:0; } .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; font-weight:800; margin-bottom:7px; } .subtle { color:var(--muted); font-size:.92rem; line-height:1.5; }
.btn { border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:10px 14px; font-weight:750; } .btn:hover { border-color:#b9c2d1; } .btn.primary { border-color:var(--blue); background:var(--blue); color:#fff; } .btn.gold { border-color:var(--gold); background:var(--gold); color:var(--ink); } .btn.small { padding:7px 10px; font-size:.86rem; } .btn.ghost { background:transparent; }
.grid { display:grid; gap:18px; } .grid.kpis { grid-template-columns:repeat(4,1fr); margin-bottom:20px; } .grid.two { grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); } .grid.three { grid-template-columns:repeat(3,1fr); } .card { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 0 rgba(16,26,45,.02); } .kpi strong { display:block; font-size:1.8rem; letter-spacing:-.05em; margin:7px 0 2px; } .kpi .trend { font-size:.82rem; color:var(--green); font-weight:750; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .event-list { display:grid; gap:12px; } .event-card { display:grid; grid-template-columns:8px 1fr auto; gap:14px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:13px; background:#fff; } .event-bar { height:100%; min-height:70px; border-radius:10px; background:var(--gold); } .event-card.blue .event-bar { background:var(--blue); } .event-card.green .event-bar { background:var(--green); } .event-title { font-weight:800; margin-bottom:6px; } .event-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:.86rem; } .event-meta span::before { content:'·'; margin-right:7px; color:#b4bbc7; } .event-meta span:first-child::before { content:''; margin:0; } .event-side { text-align:right; } .event-side strong { display:block; font-size:1.05rem; } .event-side small { color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:5px 9px; font-size:.75rem; font-weight:800; background:#eff1f5; color:#576276; } .pill.green { background:var(--green-soft); color:var(--green); } .pill.gold { background:var(--gold-soft); color:#8e5b0b; } .pill.blue { background:var(--blue-soft); color:var(--blue); } .pill.red { background:var(--red-soft); color:var(--red); }
.stack { display:grid; gap:10px; } .row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .avatar { width:34px; height:34px; border-radius:50%; background:#dce6ff; color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:.78rem; flex:none; } .person { display:flex; align-items:center; gap:10px; } .person-info strong { display:block; font-size:.9rem; } .person-info span { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }
.opportunity { border:1px solid #f2dfb7; background:#fffaf0; padding:14px; border-radius:13px; } .opportunity + .opportunity { margin-top:10px; } .opportunity .actions { display:flex; gap:8px; margin-top:13px; } .progress { height:7px; border-radius:99px; background:#e9edf3; overflow:hidden; margin-top:10px; } .progress span { display:block; height:100%; background:var(--gold); border-radius:inherit; }
.detail-hero { background:var(--ink); color:white; border-radius:18px; padding:26px; margin-bottom:18px; } .detail-hero .subtle { color:#bcc6d7; } .detail-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; } .info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; } .info-label { color:var(--muted); font-size:.78rem; margin-bottom:4px; } .info-value { font-weight:750; } .crew-list { display:grid; gap:12px; margin-top:15px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; } table { width:100%; border-collapse:collapse; min-width:760px; } th, td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; } th { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; } tr:last-child td { border-bottom:0; } .role-tag { display:inline-block; background:var(--blue-soft); color:var(--blue); border-radius:7px; padding:4px 7px; margin:2px 3px 2px 0; font-size:.73rem; font-weight:750; } .row-actions { display:flex; gap:6px; }
.availability { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:16px; } .day { border:1px solid var(--line); border-radius:11px; padding:10px 6px; text-align:center; background:#fff; } .day strong { display:block; font-size:.72rem; color:var(--muted); } .day span { display:block; margin:8px 0; font-size:1.1rem; font-weight:800; } .day button { border:0; background:transparent; color:var(--green); font-size:.76rem; font-weight:750; } .day.unavailable { background:var(--red-soft); border-color:#f0c7c5; } .day.unavailable button { color:var(--red); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#f7f8fa 0%,#fff4dc 100%); } .auth-card { width:min(100%,440px); background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--shadow); } .auth-card .brand { margin-bottom:30px; } .auth-card h1 { font-size:1.8rem; margin-bottom:10px; } .auth-card form { display:grid; gap:14px; margin-top:24px; } .auth-card label, .modal-card label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; font-weight:750; } .auth-card input, .modal-card input, .modal-card select { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; outline:none; } .auth-card input:focus, .modal-card input:focus, .modal-card select:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); } .auth-message { min-height:24px; margin-top:16px; color:var(--muted); font-size:.88rem; } .auth-switch { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; } .auth-switch a { color:var(--blue); font-weight:750; } .modal-backdrop { position:fixed; inset:0; z-index:8; display:grid; place-items:center; padding:20px; background:rgba(16,26,45,.48); } .modal-card { width:min(100%,520px); max-height:90vh; overflow:auto; display:grid; gap:14px; background:#fff; border-radius:18px; padding:24px; box-shadow:var(--shadow); } .bottom-nav { display:none; } .toast { position:fixed; right:22px; bottom:22px; z-index:9; background:var(--ink); color:#fff; border-radius:12px; padding:13px 16px; box-shadow:var(--shadow); font-weight:700; }
@media (max-width: 900px) { .layout { display:block; } .sidebar { display:none; } .content { padding:24px 18px 100px; } .topbar { padding:0 18px; height:64px; } .org { display:none; } .grid.kpis { grid-template-columns:repeat(2,1fr); } .grid.two, .detail-grid { grid-template-columns:1fr; } .grid.three { grid-template-columns:1fr; } .bottom-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); bottom:0; left:0; right:0; height:70px; background:#fff; border-top:1px solid var(--line); z-index:4; padding:7px 6px calc(7px + env(safe-area-inset-bottom)); } .bottom-nav button { border:0; background:transparent; color:#7d8798; font-size:.68rem; font-weight:750; } .bottom-nav button.active { color:var(--blue); } .bottom-nav .nav-icon { display:block; font-size:1.2rem; margin-bottom:3px; } .page-head { margin-bottom:22px; } h1 { font-size:1.65rem; } .event-card { grid-template-columns:6px 1fr; } .event-side { grid-column:2; text-align:left; display:flex; justify-content:space-between; align-items:center; } .availability { gap:4px; } .day { padding:8px 2px; } }
@media (max-width: 500px) { .grid.kpis { gap:10px; } .card { padding:16px; border-radius:14px; } .kpi strong { font-size:1.45rem; } .topbar .brand { font-size:.95rem; } .info-grid { gap:12px; } }
.top-logout { background:transparent; color:#fff; border-color:#536079; }
.page-description { margin-top:6px; max-width:760px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-card { display:flex; gap:10px; margin-bottom:18px; }
.filter-card input, .filter-card select, .form-stack input, .form-stack select, .form-stack textarea, .form-grid input, .form-grid select, .form-grid textarea, .requirement-row input, .requirement-row select, .feed-row input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; outline:none; background:#fff; }
.filter-card input { flex:1; }
.filter-card select { max-width:220px; }
.form-stack { display:grid; gap:14px; }
.form-stack label, .form-grid label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; font-weight:750; }
.form-stack textarea, .form-grid textarea { resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .full { grid-column:1/-1; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .requirement-row input:focus, .requirement-row select:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.auth-alt { width:100%; margin-top:13px; }
.warning-box { border:1px solid #f2dfb7; background:#fffaf0; color:#694b13; border-radius:14px; padding:16px 20px; margin-bottom:18px; }
.warning-box ul { margin:8px 0 0 18px; padding:0; }
.checklist { color:#435066; line-height:1.8; }
.occurrence-editor { display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr 1.2fr 1.5fr; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.occurrence-editor label { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:750; }
.occurrence-editor input, .occurrence-editor select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; background:#fff; }
.requirement-header, .requirement-row { display:grid; grid-template-columns:1.5fr .45fr .8fr 1fr 1.3fr .65fr; gap:8px; align-items:center; }
.requirement-header { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; padding:0 4px 7px; }
.requirement-row { padding:8px; border:1px solid var(--line); border-radius:10px; }
.empty-state { padding:24px; border:1px dashed #cfd6e2; border-radius:12px; color:var(--muted); text-align:center; }
.attention-row, .notification-row, .directory-row, .feed-row { border:1px solid var(--line); background:#fff; border-radius:11px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; }
.attention-row { border:0; background:#fffaf0; }
.attention-row strong, .directory-row strong, .notification-row strong { display:block; }
.attention-row small, .directory-row small, .notification-row small { display:block; color:var(--muted); margin-top:3px; }
.directory-row { align-items:flex-start; }
.directory-row span { display:block; color:var(--muted); font-size:.82rem; margin-top:5px; }
.occurrence-card { display:grid; grid-template-columns:1fr 1.6fr; gap:12px; border:1px solid var(--line); padding:13px; border-radius:12px; }
.feed-row input { flex:1; min-width:0; font-size:.78rem; color:var(--muted); }
.feed-row { align-items:center; }
.modal-card { width:min(100%,620px); }
@media (max-width: 900px) { .form-grid, .occurrence-editor, .requirement-header, .requirement-row, .occurrence-card { grid-template-columns:1fr 1fr; } .requirement-header { display:none; } .filter-card { display:grid; } .filter-card select { max-width:none; } }
@media (max-width: 500px) { .form-grid, .occurrence-editor, .requirement-row, .occurrence-card { grid-template-columns:1fr; } .feed-row { align-items:stretch; flex-direction:column; } }