.workspace-hero { background:#f1f8fc; border-bottom:1px solid #c9dce9; padding:36px 0 30px; }
.workspace-hero h1 { max-width:900px; margin:12px 0; }
.workspace-hero p { max-width:780px; }
.workspace-state { border-left:3px solid #0878e8; padding:8px 0 8px 15px; margin-top:18px; color:#24455f; }
.workspace-state strong { display:block; color:#133d63; }
.workspace-content { padding-top:34px; padding-bottom:62px; }
.workspace-content > section { padding:0 0 35px; margin-bottom:35px; border-bottom:1px solid #c9dce9; }
.workspace-content h2 { margin:6px 0 18px; }
.workspace-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:0; border:0; }
.workspace-mode { display:flex; gap:12px; min-width:0; min-height:195px; padding:20px; border:1px solid #bad2e4; background:white; cursor:pointer; }
.workspace-mode.is-selected { border-color:#0878e8; box-shadow:inset 0 0 0 1px #0878e8; background:#f3f9ff; }
.workspace-mode input { flex:none; align-self:flex-start; margin:5px 0 0; accent-color:#0878e8; }
.workspace-mode span { display:grid; align-content:start; gap:9px; min-width:0; }
.workspace-mode strong { color:#0b3154; font-size:18px; }
.workspace-mode small { color:#35556f; font-size:13px; line-height:1.5; }
.workspace-name { display:grid; gap:7px; max-width:560px; margin-top:24px; }
.workspace-name label { font-weight:700; color:#183e5d; }
.workspace-name input { width:100%; min-width:0; padding:10px 12px; border:1px solid #9ab9cf; color:#153c5d; font:inherit; }
.workspace-picker { display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; margin:20px 0 10px; padding:17px 20px; border:1px solid #a6c9e3; background:#f2f8fd; cursor:pointer; }
.workspace-picker strong { color:#07529a; }
.workspace-picker span,.workspace-help { font-size:13px; color:#4b6175; }
#genome-files { position:absolute; width:1px; height:1px; opacity:0; }
.workspace-picker:has(+ #genome-files:focus-visible) { outline:3px solid #d36b28; outline-offset:3px; }
.workspace-table-wrap { overflow-x:auto; margin-top:22px; }
.workspace-table-wrap table { width:100%; border-collapse:collapse; font-size:14px; }
.workspace-table-wrap th,.workspace-table-wrap td { padding:12px 10px; border-bottom:1px solid #d5e2ea; text-align:left; vertical-align:middle; overflow-wrap:anywhere; }
.workspace-table-wrap th { background:#eaf4fa; color:#173e5e; font-size:13px; }
.workspace-table-wrap input { width:100%; min-width:110px; padding:8px; border:1px solid #9ab9cf; color:#153c5d; }
.workspace-remove { border:0; background:none; color:#07529a; text-decoration:underline; cursor:pointer; font:inherit; }
.workspace-table-wrap td:last-child { white-space:normal; }
.file-attached { color:#245b45; font-weight:700; }
.file-missing { color:#88500c; font-weight:700; }
.workspace-attach { display:inline-flex; position:relative; margin-right:12px; color:#07529a; text-decoration:underline; cursor:pointer; }
.workspace-attach input { position:absolute; width:1px; min-width:0; height:1px; padding:0; border:0; opacity:0; }
.workspace-attach:focus-within { outline:3px solid #d36b28; outline-offset:3px; }
#workspace-message { min-height:1.7em; font-size:14px; }
#workspace-message[data-state="error"] { color:#9b3524; }
#workspace-message[data-state="warning"] { color:#88500c; }
#workspace-message[data-state="ready"] { color:#245b45; }
.workspace-features { display:flex; flex-wrap:wrap; gap:10px 20px; margin:20px 0; padding:0; border:0; }
.workspace-features legend { margin-bottom:10px; font-weight:700; }
.workspace-features label { display:inline-flex; align-items:center; gap:7px; min-width:130px; }
.workspace-gene-label { display:block; margin:15px 0 7px; font-weight:700; }
#custom-genes { width:100%; max-width:700px; padding:10px; border:1px solid #9ab9cf; color:#153c5d; font:inherit; }
.workspace-review { background:#f1f8fc; padding:25px !important; border:1px solid #c9dce9 !important; }
.workspace-review .button { margin:12px 0; }
.workspace-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:18px 0 22px; border-top:1px solid #c9dce9; border-bottom:1px solid #c9dce9; }
.workspace-summary.has-targets { grid-template-columns:repeat(4,minmax(0,1fr)); }
.workspace-summary div { min-width:0; padding:12px 14px; border-right:1px solid #c9dce9; overflow-wrap:anywhere; }
.workspace-summary div:first-child { padding-left:0; }
.workspace-summary div:last-child { border-right:0; }
.workspace-summary dt { color:#405a70; font-size:13px; font-weight:700; }
.workspace-summary dd { margin:3px 0 0; color:#153c5d; font-size:14px; font-weight:700; }
.manifest-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:20px 0 5px; }
.manifest-controls .button { margin:0; }
.manifest-load { display:inline-flex; cursor:pointer; }
#import-project { position:absolute; width:1px; height:1px; opacity:0; }
.manifest-load:has(+ #import-project:focus-visible) { outline:3px solid #d36b28; outline-offset:3px; }
#manifest-message { min-height:1.6em; margin:8px 0; font-size:14px; color:#245b45; }
#manifest-message[data-state="error"] { color:#9b3524; }
.workspace-gate { padding:35px 0; }
.workspace-page :is(input,textarea,button,a):focus-visible,.workspace-mode:focus-within,.workspace-picker:focus-within { outline:3px solid #d36b28; outline-offset:3px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html:lang(bn) .workspace-mode strong { line-height:1.4; }
@media(max-width:900px) { .workspace-modes { grid-template-columns:1fr; } .workspace-mode { min-height:0; } }
@media(max-width:900px) { .workspace-summary,.workspace-summary.has-targets { grid-template-columns:repeat(2,minmax(0,1fr)); } .workspace-summary div:nth-child(2n) { border-right:0; } .workspace-summary div { border-bottom:1px solid #c9dce9; } }
@media(max-width:620px) { .workspace-hero { padding:30px 0; } .workspace-content { padding-top:28px; } .workspace-content > section { margin-bottom:30px; padding-bottom:30px; } .workspace-table-wrap table,.workspace-table-wrap tbody,.workspace-table-wrap tr,.workspace-table-wrap td { display:block; width:100%; } .workspace-table-wrap thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .workspace-table-wrap tr { border:1px solid #c9dce9; margin-bottom:12px; padding:8px; } .workspace-table-wrap td { display:grid; grid-template-columns:minmax(75px,32%) minmax(0,1fr); gap:10px; border:0; padding:6px; } .workspace-table-wrap td::before { content:attr(data-label); font-weight:700; color:#305572; } }