.dot-workspace { --ws-bg:#101210; --ws-panel:#191d17; --ws-lime:#bded65; --ws-text:#f7f8f4; --ws-muted:#98a18f; color-scheme:dark; width:min(820px,calc(100vw - 48px)); height:min(760px,calc(100svh - 48px)); max-width:none; max-height:none; margin:auto; padding:0; border:1px solid #333c2c; border-radius:16px; background:var(--ws-bg); color:var(--ws-text); box-shadow:0 36px 120px #0008; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:13px; line-height:1.5; overflow:hidden; }
.dot-workspace::backdrop { background:#070907ba; backdrop-filter:blur(5px); }
.dot-workspace * { box-sizing:border-box; }
.dot-workspace button,.dot-workspace input,.dot-workspace select { font:inherit; }
.dot-workspace button { cursor:pointer; }
.dot-workspace button:disabled { opacity:.48; cursor:default; }
.dot-workspace button:focus-visible,.dot-workspace input:focus-visible,.dot-workspace select:focus-visible { outline:2px solid var(--ws-lime); outline-offset:3px; }
.dot-workspace h2,.dot-workspace h3,.dot-workspace p { margin:0; }
.dot-workspace .ws-shell { display:grid; grid-template-columns:190px minmax(0,1fr); height:100%; }
.dot-workspace .ws-sidebar { border-right:1px solid #293124; padding:24px 12px; background:#151912; overflow:auto; }
.dot-workspace .ws-brand { font-size:26px; letter-spacing:-1px; font-weight:650; padding:0 12px 25px; display:flex; gap:8px; align-items:center; }
.dot-workspace .ws-brand::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ws-lime); }
.dot-workspace .ws-nav-label { color:#727e68; letter-spacing:1.2px; text-transform:uppercase; font-size:9px; padding:20px 12px 8px; }
.dot-workspace .ws-nav { display:flex; flex-direction:column; gap:4px; }
.dot-workspace .ws-nav button { text-align:left; border:0; border-radius:6px; padding:11px 12px; color:#aeb9a3; background:none; font-size:12px; }
.dot-workspace .ws-nav button:hover { background:#242c1e; }
.dot-workspace .ws-nav button[aria-current="page"] { background:#2b381d; color:var(--ws-lime); }
.dot-workspace .ws-main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.dot-workspace .ws-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:27px 28px 22px; border-bottom:1px solid #2a3224; flex-shrink:0; }
.dot-workspace .ws-header h2 { font-size:24px; font-weight:550; letter-spacing:-.7px; line-height:1.3; }
.dot-workspace .ws-subtitle { color:var(--ws-muted); font-size:11px; margin-top:7px; max-width:430px; }
.dot-workspace .ws-close { width:32px; height:32px; border:1px solid #35402c; color:#b8c3ae; font-size:24px; line-height:1; background:#1f2719; border-radius:8px; flex-shrink:0; }
.dot-workspace .ws-body { padding:24px 28px 30px; overflow:auto; min-height:0; }
.dot-workspace .ws-notice:empty,.dot-workspace .ws-pending:empty { display:none; }
.dot-workspace .ws-notice,.dot-workspace .ws-pending { padding:13px 15px; border:1px solid #485938; border-radius:8px; background:#242e1b; color:#d8e6c9; font-size:12px; margin:0 0 18px; }
.dot-workspace .ws-notice[data-kind="error"] { color:#f3d3c2; border-color:#694532; background:#302219; }
.dot-workspace .ws-pending p + p { margin-top:7px; }
.dot-workspace .ws-pending .ws-actions { margin-top:12px; }
.dot-workspace .ws-content { display:flex; flex-direction:column; gap:18px; }
.dot-workspace .ws-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dot-workspace .ws-kicker { color:#87967c; font-size:9px; text-transform:uppercase; letter-spacing:1.2px; }
.dot-workspace .ws-card { border:1px solid #303a28; border-radius:10px; padding:20px; background:#191f15; min-width:0; }
.dot-workspace .ws-card h3 { font-size:15px; font-weight:550; margin-bottom:7px; }
.dot-workspace .ws-help { color:var(--ws-muted); font-size:11px; line-height:1.7; }
.dot-workspace .ws-card .ws-help + .ws-actions { margin-top:16px; }
.dot-workspace .ws-list { display:flex; flex-direction:column; border:1px solid #303a28; border-radius:9px; overflow:hidden; }
.dot-workspace .ws-row { padding:16px; display:flex; justify-content:space-between; gap:14px; align-items:center; border-bottom:1px solid #2b3424; min-width:0; }
.dot-workspace .ws-row:last-child { border-bottom:0; }
.dot-workspace .ws-row-main { min-width:0; flex:1; }
.dot-workspace .ws-row-title { font-weight:550; color:#e3ebdc; overflow-wrap:anywhere; }
.dot-workspace .ws-row-meta { color:#8e9b81; font-size:10px; margin-top:5px; overflow-wrap:anywhere; }
.dot-workspace .ws-row .ws-actions { margin:0; flex-shrink:0; }
.dot-workspace .ws-badge { display:inline-block; border:1px solid #465635; color:#b8d69a; background:#25311b; padding:3px 7px; border-radius:4px; font-size:9px; text-transform:capitalize; white-space:nowrap; }
.dot-workspace .ws-badge[data-status="canceled"],.dot-workspace .ws-badge[data-status="expired"],.dot-workspace .ws-badge[data-status="superseded"],.dot-workspace .ws-badge[data-status="failed"] { color:#bdada0; border-color:#514837; background:#28271e; }
.dot-workspace .ws-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; }
.dot-workspace .ws-button { display:inline-flex; justify-content:center; align-items:center; min-height:36px; padding:8px 13px; border:1px solid #435237; background:#26321e; color:#dcebcf; border-radius:6px; font-size:11px; line-height:1.35; text-decoration:none; }
.dot-workspace .ws-button:hover { background:#354529; }
.dot-workspace .ws-button.primary { border-color:var(--ws-lime); background:var(--ws-lime); color:#17200e; font-weight:600; }
.dot-workspace .ws-button.danger { color:#f1bd9e; background:#34271b; border-color:#68472f; }
.dot-workspace .ws-button.subtle { background:none; border-color:transparent; color:#a9c58e; }
.dot-workspace .ws-button.wide { width:100%; }
.dot-workspace .ws-field { display:flex; flex-direction:column; gap:7px; margin-top:17px; }
.dot-workspace .ws-field>label { font-size:11px; font-weight:500; color:#cbd7bf; }
.dot-workspace input,.dot-workspace select { min-width:0; width:100%; border:1px solid #414e34; border-radius:6px; min-height:41px; padding:10px 12px; color:#ebf2e4; background:#11160e; outline-offset:2px; }
.dot-workspace input::placeholder { color:#77846c; }
.dot-workspace input[aria-invalid="true"] { border-color:#a87850; }
.dot-workspace .ws-field-error { color:#e8b494; font-size:11px; }
.dot-workspace .ws-inline { display:flex; align-items:flex-end; gap:10px; }
.dot-workspace .ws-inline>.ws-field { flex:1; }
.dot-workspace .ws-inline>.ws-button { margin-bottom:0; min-height:41px; }
.dot-workspace .ws-lookup-result { border:1px solid #405430; border-radius:7px; background:#202d16; padding:11px 13px; margin-top:14px; }
.dot-workspace .ws-loading,.dot-workspace .ws-empty { text-align:center; border:1px dashed #35412b; padding:40px 24px; border-radius:9px; color:var(--ws-muted); }
.dot-workspace .ws-empty h3 { color:#d3dfc8; font-size:15px; font-weight:500; margin-bottom:9px; }
.dot-workspace .ws-empty .ws-actions { justify-content:center; }
.dot-workspace .ws-confirm { background:#2b271c; border:1px solid #6b5738; border-radius:9px; padding:18px; }
.dot-workspace .ws-confirm h3 { color:#ead8b7; font-size:15px; margin-bottom:9px; }
.dot-workspace .ws-confirm p { color:#c5b696; font-size:12px; line-height:1.7; }
.dot-workspace .ws-uuid { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; overflow-wrap:anywhere; color:#a4b099; }
.dot-workspace .ws-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dot-workspace .ws-datum { padding:12px; background:#12180f; border:1px solid #2b3821; border-radius:6px; }
.dot-workspace .ws-datum .ws-kicker { display:block; margin-bottom:5px; }
.dot-workspace .ws-note { border-left:2px solid #6f8e4b; padding:3px 0 3px 12px; color:#a6b795; font-size:11px; }
.dot-workspace .ws-screenreader { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:700px) { .dot-workspace { width:100vw; height:100svh; margin:0; border-radius:0; border:0; } .dot-workspace .ws-shell { display:flex; flex-direction:column; } .dot-workspace .ws-sidebar { padding:10px 14px; border-right:0; border-bottom:1px solid #293124; overflow-x:auto; flex-shrink:0; } .dot-workspace .ws-brand,.dot-workspace .ws-nav-label { display:none; } .dot-workspace .ws-nav { flex-direction:row; width:max-content; gap:5px; } .dot-workspace .ws-nav button { white-space:nowrap; padding:9px 11px; font-size:10px; } .dot-workspace .ws-main { flex:1; } .dot-workspace .ws-header { padding:20px; } .dot-workspace .ws-header h2 { font-size:22px; } .dot-workspace .ws-body { padding:20px; } .dot-workspace .ws-row { padding:14px 12px; gap:9px; } .dot-workspace .ws-row .ws-actions { flex-direction:column; align-items:flex-end; } .dot-workspace .ws-row-title { font-size:12px; } .dot-workspace .ws-button { font-size:10px; padding:8px 10px; } .dot-workspace .ws-card { padding:17px; } .dot-workspace .ws-detail-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:no-preference) { .dot-workspace[open] { animation:ws-enter .15s ease-out; } @keyframes ws-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } } }