@font-face { font-family:Montserrat; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Montserrat; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
:root { font-family:Montserrat,system-ui,sans-serif; color:#251d2c; background:#efedf2; font-synthesis:none; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; min-height:100vh; background:#efedf2; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
.app-shell { width:min(100%,460px); min-height:100vh; margin:0 auto; background:#f8f7f9; box-shadow:0 0 50px rgba(55,37,73,.09); }
.brand-hero { position:relative; overflow:hidden; padding:34px 24px 30px; color:#fff; background:#372549; }
.brand-hero::after { content:""; position:absolute; width:220px; height:220px; right:-98px; top:-112px; border-radius:54px; transform:rotate(45deg); background:linear-gradient(145deg,rgba(185,186,108,.3),rgba(255,255,255,.05)); }
.brand-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.brand-row img { display:block; width:146px; height:auto; }
.stack-pill { padding:6px 9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#e7e3eb; font-size:.64rem; font-weight:600; }
.brand-hero p { position:relative; z-index:1; margin:34px 0 8px; color:#B9BA6C; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.brand-hero h1 { position:relative; z-index:1; max-width:360px; margin:0; font-size:1.65rem; line-height:1.18; font-weight:600; letter-spacing:-.035em; }
.session-status { position:relative; z-index:1; display:flex; align-items:center; gap:8px; width:max-content; margin-top:18px; color:#ded7e4; font-size:.68rem; }
.session-status>span:first-child { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#B9BA6C; box-shadow:0 0 0 4px rgba(185,186,108,.13); }
.app-content { padding:20px 20px 34px; }
.state-panel { display:flex; min-height:320px; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; text-align:center; }
.state-panel strong { font-size:.96rem; }
.state-panel small { max-width:290px; color:#776f7c; line-height:1.55; }
.spinner { width:28px; height:28px; margin-bottom:8px; border:3px solid #ded9e2; border-top-color:#372549; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.state-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:#8b3241; font-weight:600; }
.primary-button { min-height:44px; margin-top:8px; padding:0 20px; border:0; border-radius:14px; color:#fff; background:#372549; cursor:pointer; font-weight:600; }
.primary-button:disabled,.text-button:disabled { cursor:not-allowed; opacity:.5; }
.auth-card { margin-top:-2px; padding:22px; border:1px solid rgba(55,37,73,.07); border-radius:24px; background:#fff; box-shadow:0 14px 38px rgba(55,37,73,.08); }
.auth-steps { display:flex; align-items:center; width:108px; margin:0 0 22px; }
.auth-steps span { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border:1px solid #dcd6e0; border-radius:50%; color:#8a828e; font-size:.66rem; font-weight:600; }
.auth-steps span.active,.auth-steps span.done { border-color:#372549; color:#fff; background:#372549; }
.auth-steps span.done { border-color:#B9BA6C; color:#372549; background:#B9BA6C; }
.auth-steps i { width:52px; height:1px; background:#dcd6e0; }
.auth-heading h2 { margin:5px 0 8px; color:#372549; font-size:1.25rem; letter-spacing:-.025em; }
.auth-heading p { margin:0 0 20px; color:#6f6674; font-size:.72rem; line-height:1.55; }
.form-field { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.form-field label { color:#372549; font-size:.68rem; font-weight:600; }
.form-field input { width:100%; height:48px; padding:0 14px; border:1px solid #d8d2dc; border-radius:14px; color:#251d2c; background:#fbfafc; outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
.form-field input:focus { border-color:#372549; box-shadow:0 0 0 3px rgba(185,186,108,.26); }
.form-field small { color:#8a828e; font-size:.59rem; line-height:1.45; }
.code-field input { text-align:center; font-size:1.25rem; font-weight:600; letter-spacing:.32em; }
.auth-submit { width:100%; margin-top:20px; }
.auth-actions { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.text-button,.logout-button { padding:6px 0; border:0; color:#5d496c; background:transparent; cursor:pointer; font-size:.62rem; font-weight:600; }
.pilot-hint { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:11px 12px; border-radius:13px; color:#5f5765; background:#f3f0f5; font-size:.6rem; }
.pilot-hint strong { color:#372549; }
.success-hint { color:#555824; background:#eeefd8; }
.auth-error { margin-top:14px; padding:11px 12px; border-radius:12px; color:#7d2938; background:#fff0f2; font-size:.66rem; line-height:1.45; }
.identity-card { display:flex; align-items:center; gap:14px; margin-top:-3px; padding:16px; border:1px solid rgba(55,37,73,.06); border-radius:20px; background:#fff; box-shadow:0 9px 30px rgba(55,37,73,.06); }
.identity-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:4px; }
.identity-card strong { overflow:hidden; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.identity-card small { overflow:hidden; color:#776f7c; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; border-radius:15px; color:#372549; background:#eeefd8; font-size:.78rem; font-weight:600; }
.card-label { color:#867d8b; font-size:.62rem; letter-spacing:.03em; }
.maintenance-section { margin-top:26px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 2px 12px; }
.section-heading h2,.detail-heading h2 { margin:4px 0 0; color:#372549; font-size:1.05rem; font-weight:600; }
.snapshot-pill { padding:7px 10px; border-radius:999px; color:#565925; background:#eeefd8; font-size:.61rem; font-weight:600; }
.maintenance-list { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.maintenance-card { display:flex; width:100%; min-height:92px; align-items:center; gap:13px; padding:13px; border:1px solid transparent; border-radius:20px; text-align:left; background:#fff; box-shadow:0 7px 24px rgba(55,37,73,.055); cursor:pointer; transition:transform .15s ease,border-color .15s ease; }
.maintenance-card:hover { transform:translateY(-1px); border-color:rgba(55,37,73,.12); }
.maintenance-card:focus-visible,.icon-button:focus-visible,.primary-button:focus-visible,.text-button:focus-visible,.logout-button:focus-visible { outline:3px solid rgba(185,186,108,.7); outline-offset:2px; }
.date-tile { display:flex; width:51px; height:60px; flex:0 0 51px; flex-direction:column; align-items:center; justify-content:center; border-radius:15px; color:#372549; background:#f0edf3; }
.date-tile strong { font-size:1.05rem; line-height:1; }
.date-tile small { margin-top:5px; font-size:.55rem; font-weight:600; }
.maintenance-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:5px; }
.maintenance-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.maintenance-copy>span:nth-child(2) { overflow:hidden; color:#5f5765; font-size:.7rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.maintenance-copy small { color:#8a828e; font-size:.62rem; }
.state-badge { flex:0 0 auto; padding:5px 7px; border-radius:999px; color:#555824; background:#eeefd8; font-size:.55rem; font-weight:600; }
.state-badge.claimed { color:#5d496c; background:#eee8f1; }
.chevron { color:#8d8492; font-size:1.45rem; }
.empty-state { padding:28px 18px; border-radius:18px; color:#776f7c; text-align:center; background:#fff; font-size:.76rem; }
.detail-panel { margin-top:18px; padding:19px; border:1px solid rgba(55,37,73,.08); border-radius:22px; background:#fff; box-shadow:0 12px 35px rgba(55,37,73,.08); }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.icon-button { display:grid; width:44px; height:44px; place-items:center; border:0; border-radius:14px; color:#372549; background:#f0edf3; cursor:pointer; font-size:1.3rem; }
.detail-panel>p { margin:13px 0 16px; color:#6f6674; font-size:.72rem; line-height:1.5; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0; }
.detail-grid div { padding:12px; border-radius:14px; background:#f8f7f9; }
.detail-grid dt { color:#8a828e; font-size:.58rem; }
.detail-grid dd { margin:5px 0 0; color:#372549; font-size:.72rem; font-weight:600; }
.safe-read-note { display:flex; align-items:center; gap:8px; margin-top:14px; padding:11px 12px; border-radius:13px; color:#555824; background:#eeefd8; font-size:.62rem; line-height:1.4; }
.safe-read-note span { font-weight:600; }
.detail-error { margin-top:12px; padding:11px 12px; border-radius:12px; color:#7d2938; background:#fff0f2; font-size:.66rem; line-height:1.45; }
.sync-card { margin-top:12px; padding:16px; border:1px solid rgba(55,37,73,.07); border-radius:20px; background:linear-gradient(145deg,#fff,#f7f5f8); box-shadow:0 9px 30px rgba(55,37,73,.055); }
.sync-main { display:flex; align-items:center; gap:11px; }
.sync-main>div { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.sync-main strong { color:#372549; font-size:.8rem; }
.sync-main small { color:#776f7c; font-size:.62rem; line-height:1.4; }
.network-dot { width:12px; height:12px; flex:0 0 12px; border-radius:50%; box-shadow:0 0 0 5px rgba(185,186,108,.18); }
.network-dot.online { background:#96983f; }
.network-dot.offline { background:#b65b69; box-shadow:0 0 0 5px rgba(182,91,105,.12); }
.sync-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.secondary-button { min-height:40px; padding:0 11px; border:1px solid #d8d2dc; border-radius:13px; color:#5d496c; background:#fff; cursor:pointer; font-size:.6rem; font-weight:600; }
.compact-button { min-height:40px; margin:0; padding:0 11px; font-size:.6rem; }
.sync-message { margin-top:11px; padding:9px 11px; border-radius:11px; font-size:.6rem; line-height:1.4; }
.sync-message.success { color:#555824; background:#eeefd8; }
.sync-message.warning { color:#785f1d; background:#fff6d9; }
.sync-message.error { color:#7d2938; background:#fff0f2; }
.conflict-banner { display:flex; flex-direction:column; gap:4px; margin-top:11px; padding:11px 12px; border-left:3px solid #b65b69; border-radius:10px; color:#6f2432; background:#fff0f2; }
.conflict-banner strong { font-size:.66rem; }
.conflict-banner span { font-size:.59rem; line-height:1.45; }
.outbox-history { margin-top:11px; border-top:1px solid #ebe7ed; padding-top:10px; }
.outbox-history summary { color:#5d496c; cursor:pointer; font-size:.61rem; font-weight:600; }
.outbox-history ul { display:flex; flex-direction:column; gap:6px; margin:9px 0 0; padding:0; list-style:none; }
.outbox-history li { display:flex; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:9px; background:#f3f0f5; font-size:.58rem; }
.outbox-history small { color:#7c7381; }
.locked-work { display:flex; flex-direction:column; gap:4px; margin:0 0 16px; padding:11px 12px; border-left:3px solid #B9BA6C; border-radius:11px; color:#555824; background:#eeefd8; }
.locked-work strong { font-size:.66rem; }
.locked-work span { font-size:.59rem; line-height:1.45; }
.action-zone { display:flex; flex-direction:column; margin-top:15px; padding:15px; border-radius:17px; background:#f3f0f5; }
.action-zone>strong { margin-top:4px; color:#372549; font-size:.78rem; }
.action-zone p { margin:6px 0 2px; color:#6f6674; font-size:.62rem; line-height:1.45; }
.full-button { width:100%; }
.queued-note { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px; border-radius:14px; color:#5d496c; background:#eee8f1; }
.queued-note>span { display:grid; width:30px; height:30px; place-items:center; border-radius:10px; color:#fff; background:#5d496c; }
.queued-note div { display:flex; flex-direction:column; gap:3px; }
.queued-note strong { font-size:.67rem; }
.queued-note small { font-size:.57rem; line-height:1.4; }
.detail-conflict { margin-top:14px; }
.draft-form { margin-top:18px; padding-top:17px; border-top:1px solid #ebe7ed; }
.form-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.form-section-heading h3 { margin:4px 0 0; color:#372549; font-size:.86rem; }
.local-save-state { flex:0 0 auto; padding:5px 7px; border-radius:999px; color:#555824; background:#eeefd8; font-size:.53rem; }
.draft-form fieldset { display:flex; flex-direction:column; gap:8px; margin:16px 0 0; padding:0; border:0; }
.draft-form legend { margin-bottom:8px; color:#372549; font-size:.66rem; font-weight:600; }
.operation-choice { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #e3dee6; border-radius:13px; cursor:pointer; background:#fbfafc; }
.operation-choice input { width:18px; height:18px; flex:0 0 18px; accent-color:#372549; }
.operation-choice span { display:flex; flex-direction:column; gap:3px; }
.operation-choice strong { font-size:.63rem; }
.operation-choice small { color:#8b5e32; font-size:.54rem; }
.form-field textarea { width:100%; resize:vertical; padding:12px 14px; border:1px solid #d8d2dc; border-radius:14px; color:#251d2c; background:#fbfafc; outline:none; font-size:.68rem; line-height:1.5; }
.form-field textarea:focus { border-color:#372549; box-shadow:0 0 0 3px rgba(185,186,108,.26); }
.form-field label span { color:#8a828e; font-weight:400; }
.draft-policy { display:flex; align-items:center; gap:8px; margin-top:13px; padding:10px 11px; border-radius:12px; color:#5d496c; background:#f3f0f5; font-size:.58rem; line-height:1.4; }
.draft-policy span { display:grid; width:18px; height:18px; flex:0 0 18px; place-items:center; border-radius:50%; color:#fff; background:#5d496c; font-size:.55rem; font-weight:600; }
.duration-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.media-section,.signature-section { margin-top:18px; padding:15px; border:1px solid #e3dee6; border-radius:17px; background:#fbfafc; }
.media-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.media-heading h4 { margin:4px 0 0; color:#372549; font-size:.76rem; }
.media-heading h4 span { color:#8a828e; font-size:.58rem; font-weight:400; }
.media-rule,.signature-status { max-width:145px; color:#817887; text-align:right; font-size:.53rem; line-height:1.4; }
.media-picker { display:flex; min-height:76px; align-items:center; gap:11px; margin-top:13px; padding:12px; border:1px dashed #bdb3c3; border-radius:14px; cursor:pointer; background:#fff; }
.media-picker>span { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border-radius:12px; color:#372549; background:#eeefd8; font-size:1.2rem; }
.media-picker strong,.media-picker small { display:block; }
.media-picker strong { color:#372549; font-size:.63rem; }
.media-picker small { margin-top:3px; color:#837a88; font-size:.53rem; line-height:1.35; }
.media-picker.disabled { cursor:not-allowed; opacity:.5; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
.media-list { display:flex; flex-direction:column; gap:7px; margin:11px 0 0; padding:0; list-style:none; }
.media-list li { display:flex; align-items:center; gap:9px; padding:9px; border-radius:12px; background:#f1eef3; }
.media-icon { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; border-radius:10px; color:#fff; background:#5d496c; font-size:.74rem; }
.media-list li>div { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.media-list strong { overflow:hidden; font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.media-list small { color:#7b7280; font-size:.5rem; }
.media-list progress { width:100%; height:4px; border:0; accent-color:#B9BA6C; }
.media-remove { width:30px; height:30px; flex:0 0 30px; border:0; border-radius:10px; color:#6d5c75; background:#fff; cursor:pointer; }
.signature-canvas { display:block; width:100%; height:100px; margin-top:12px; border:1px dashed #bdb3c3; border-radius:13px; background:#fff; touch-action:none; }
.consent-choice { display:flex; align-items:flex-start; gap:8px; margin-top:10px; color:#645b69; font-size:.54rem; line-height:1.45; }
.consent-choice input { width:16px; height:16px; flex:0 0 16px; accent-color:#372549; }
.signature-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:8px; }
.completion-policy { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:12px; border-left:3px solid #B9BA6C; border-radius:11px; color:#545724; background:#eeefd8; }
.completion-policy strong { font-size:.63rem; }
.completion-policy span { font-size:.54rem; line-height:1.45; }
.complete-button { min-height:46px; margin-top:9px; border:0; border-radius:14px; color:#372549; background:#B9BA6C; cursor:pointer; font-weight:600; }
.complete-button:disabled,.secondary-button:disabled { cursor:not-allowed; opacity:.5; }
.runtime-card { margin-top:12px; padding:16px; border:1px solid rgba(55,37,73,.07); border-radius:20px; background:#fff; box-shadow:0 9px 30px rgba(55,37,73,.055); }
.runtime-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.runtime-heading>div { display:flex; min-width:0; flex-direction:column; gap:4px; }
.runtime-heading strong { color:#372549; font-size:.72rem; }
.runtime-badge { flex:0 0 auto; padding:5px 7px; border-radius:999px; color:#555824; background:#eeefd8; font-size:.53rem; font-weight:600; }
.runtime-badge.ready { color:#785f1d; background:#fff6d9; }
.runtime-grid { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:6px; margin-top:12px; }
.runtime-grid span { display:flex; min-width:0; flex-direction:column; gap:3px; padding:9px; border-radius:11px; background:#f7f5f8; }
.runtime-grid strong { overflow:hidden; color:#372549; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.runtime-grid small { color:#817887; font-size:.49rem; }
.runtime-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.update-button { width:100%; min-height:42px; margin-top:9px; border:0; border-radius:13px; color:#372549; background:#B9BA6C; cursor:pointer; font-size:.61rem; font-weight:600; }
.update-button:disabled { cursor:not-allowed; opacity:.5; }
.runtime-message { margin-top:9px; color:#6f6674; font-size:.57rem; line-height:1.45; }
.loading-progress { display:block; margin:20vh auto 1rem; }
#blazor-error-ui { display:none; position:fixed; inset:auto 0 0; padding:12px; background:#fff0f0; color:#6e1717; }
@media (max-width:360px) { .brand-hero { padding:30px 18px 26px; } .app-content { padding-inline:14px; } .auth-card { padding:19px 17px; } .pilot-hint { align-items:flex-start; flex-direction:column; } .identity-card small { white-space:normal; } .logout-button { max-width:72px; } .detail-grid,.duration-grid { grid-template-columns:1fr; } .sync-actions,.runtime-actions { grid-template-columns:1fr; } .runtime-grid { grid-template-columns:1fr; } .form-section-heading,.media-heading { flex-direction:column; } .media-rule,.signature-status { max-width:none; text-align:left; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } .spinner { animation:none; } }