/* UgolTech Workspace — desktop-first visual concept, no backend. */
.workspace-page { --ws-bg:#090e10; --ws-panel:#101719; --ws-line:#ffffff16; --ws-muted:#94a6a7; --ws-mint:#cbe8cf; background:var(--ws-bg); color:#eaf0eb; min-width:320px; font-size:14px; line-height:1.5; }
.workspace-page::before { opacity:.35; background-size:64px 64px; }
.workspace-page button, .workspace-page select, .workspace-page input { font:inherit; }
.workspace-page button { cursor:pointer; }
.workspace-page svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ws-symbols, .ws-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; }
.ws-skip { position:fixed; z-index:100; top:-100px; left:16px; padding:10px 16px; background:#dceadb; color:#102018; border-radius:8px; }
.ws-skip:focus { top:16px; }
.ws-shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }
.ws-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:25px 15px 19px; border-right:1px solid var(--ws-line); background:linear-gradient(160deg,#141b1d,#0e1416 62%,#0b1112); z-index:10; }
.ws-brand { display:flex; align-items:center; gap:11px; padding:0 10px; color:#f6faf6; font-weight:690; font-size:1rem; line-height:1.15; letter-spacing:-.03em; }
.ws-brand:hover { color:#fff; }
.ws-brand img { width:37px; height:37px; filter:drop-shadow(0 3px 8px #ffffff21); }
.ws-brand b { color:#c4ccc8; font-weight:520; }
.ws-brand small { display:block; margin-top:4px; color:#788c8b; font-size:.64rem; font-weight:530; letter-spacing:.045em; text-transform:uppercase; }
.ws-sidebar-divider { height:1px; margin:25px 10px 22px; background:linear-gradient(90deg,#d0e4d040,transparent); }
.ws-nav-label { margin:0 14px 11px; color:#708283; font:600 .64rem var(--mono); letter-spacing:.15em; }
.ws-tools-label { margin-top:30px; }
.ws-navigation { display:grid; gap:4px; }
.ws-navigation button, .ws-tool-link { display:flex; align-items:center; gap:12px; width:100%; min-height:43px; padding:0 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:#a4b3b2; text-align:left; font-weight:560; transition:background .18s,border-color .18s,color .18s,transform .18s; }
.ws-navigation button:hover, .ws-tool-link:hover { background:#d3f0d10a; color:#eaf5ed; transform:translateX(2px); }
.ws-navigation button.is-active { background:linear-gradient(90deg,#d7f3da1d,#c8e8d908); color:#ecf8ed; border-color:#d8f1d224; box-shadow:inset 3px 0 #d1ebcc; }
.ws-navigation button svg { color:#9baead; }
.ws-navigation button.is-active svg { color:#d5efce; }
.ws-navigation button i { margin-left:auto; color:#91a2a0; font:500 .7rem var(--mono); font-style:normal; }
.ws-tool-link .ws-tool-glyph { display:grid; place-items:center; width:20px; color:#cfdbc9; font:700 .85rem var(--mono); }
.ws-tool-link span:last-child { margin-left:auto; color:#768888; }
.ws-sidebar-bottom { margin-top:auto; }
.ws-mode-card { display:flex; align-items:start; gap:10px; padding:13px; border:1px solid #d5edcf20; border-radius:11px; background:#d5edcf07; }
.ws-mode-icon { display:grid; place-items:center; width:28px; height:28px; flex:none; border:1px solid #d8edd533; border-radius:8px; color:#d7edd2; background:#d7edd20c; }
.ws-mode-icon svg { width:15px; height:15px; }
.ws-mode-card b { display:block; color:#dcebdc; font-size:.77rem; font-weight:650; line-height:1.3; }
.ws-mode-card p { margin:4px 0 0; color:#839a91; font-size:.68rem; line-height:1.45; }
.ws-back { display:block; margin:16px 10px 0; color:#8ea09e; font-size:.77rem; }
.ws-back:hover { color:#e7efe9; }
.ws-main { min-width:0; }
.ws-topbar { position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; padding:0 clamp(25px,3vw,48px); border-bottom:1px solid var(--ws-line); background:#0b1112e8; backdrop-filter:blur(24px); }
.ws-search-wrap { display:flex; align-items:center; gap:11px; width:min(460px,55%); min-height:39px; padding:0 12px; border:1px solid #ffffff19; border-radius:9px; background:#ffffff06; color:#92a6a2; transition:border-color .2s,background .2s; }
.ws-search-wrap:focus-within { border-color:#d6edd06b; background:#ffffff0a; }
.ws-search-wrap svg { width:17px; height:17px; }
.ws-search-wrap input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#edf5ed; font-size:.8rem; }
.ws-search-wrap input::placeholder { color:#708582; }
.ws-search-wrap kbd { padding:2px 7px; border:1px solid #ffffff1a; border-radius:5px; color:#738885; font:.7rem var(--mono); }
.ws-top-actions { display:flex; align-items:center; gap:16px; }
.ws-local-status { white-space:nowrap; color:#9fb1aa; font-size:.72rem; }
.ws-local-status i, .ws-inspector-live i, .ws-feature-tag span { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#aed5b6; box-shadow:0 0 12px #99d3a579; vertical-align:1px; }
.ws-icon-button { display:grid; place-items:center; width:35px; height:35px; padding:0; border:1px solid #ffffff1b; border-radius:9px; color:#b4c7bf; background:#ffffff05; }
.ws-icon-button:hover { background:#d8efd010; color:#fff; }
.ws-profile { display:grid; place-items:center; width:34px; height:34px; border:1px solid #d9e2d859; border-radius:50%; background:linear-gradient(145deg,#c2d2c0,#697f75); color:#17201a; font-size:.65rem; font-weight:760; }
.ws-content { max-width:1560px; margin:auto; padding:23px clamp(25px,3vw,48px) 24px; }
.ws-crumbs { display:flex; align-items:center; gap:11px; margin-bottom:17px; color:#708684; font-size:.72rem; }
.ws-crumbs strong { color:#b6cac0; font-weight:560; }
.ws-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:19px; }
.ws-eyebrow, .ws-section-kicker { color:#9cb6a2; font:600 .65rem var(--mono); letter-spacing:.14em; }
.ws-heading h1 { margin:5px 0 2px; font-size:clamp(2.2rem,3.35vw,3.1rem); letter-spacing:-.055em; }
.ws-heading p { margin:0; color:#91a6a1; font-size:.86rem; }
.ws-demo-button { display:flex; align-items:center; gap:9px; padding:11px 15px; border:1px solid #d3ecd134; border-radius:9px; background:#d3ecd10d; color:#d9eed8; white-space:nowrap; font-weight:600; font-size:.78rem; transition:background .18s,transform .18s; }
.ws-demo-button:hover { background:#d3ecd11f; transform:translateY(-2px); }
.ws-demo-button svg { width:16px; height:16px; }
.ws-feature { display:flex; align-items:center; gap:18px; min-height:104px; padding:18px 22px; border:1px solid #d7ebd127; border-radius:13px; background:linear-gradient(110deg,#1b2826,#151d1e 72%); }
.ws-feature-mark { display:grid; place-items:center; width:39px; height:39px; flex:none; border:1px solid #cbe8cf38; border-radius:11px; color:#cbe8cf; background:#d6ecd013; }
.ws-feature-mark svg { width:19px; height:19px; }
.ws-feature-copy { flex:1; min-width:0; }
.ws-feature-tag { color:#a1baa8; font:600 .59rem var(--mono); letter-spacing:.12em; }
.ws-feature h2 { margin:4px 0 3px; color:#eef6ec; font-size:1.06rem; font-weight:650; letter-spacing:-.025em; }
.ws-feature p { max-width:670px; margin:0; color:#94aaa1; font-size:.73rem; line-height:1.45; }
.ws-feature a { display:inline-flex; align-items:center; gap:7px; flex:none; align-self:center; color:#c9e6c9; font-size:.72rem; font-weight:620; white-space:nowrap; }
.ws-feature a svg { width:14px; height:14px; transition:transform .2s; }
.ws-feature a:hover svg { transform:translateX(4px); }
.ws-work-area { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:24px; align-items:start; margin-top:27px; }
.ws-files-panel { padding:0; }
.ws-files-panel, .ws-inspector { min-width:0; }
.ws-section-top { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:16px; }
.ws-section-top h2 { margin:5px 0 0; font-size:1.27rem; letter-spacing:-.035em; }
.ws-section-top h2 span { color:#839b91; font-size:.8rem; font-weight:510; }
.ws-section-count { color:#7f9590; font-size:.72rem; }
.ws-folder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.ws-folder { display:flex; flex-direction:column; align-items:start; min-height:96px; padding:13px 15px; border:1px solid #ffffff17; border-radius:11px; background:linear-gradient(145deg,#171f21,#121a1b); color:#e4eee5; text-align:left; transition:transform .18s,border-color .18s,background .18s; }
.ws-folder:hover, .ws-folder.is-active { transform:translateY(-3px); border-color:#cdeac165; background:linear-gradient(145deg,#1f2d29,#151f1d); }
.ws-folder-top { display:flex; align-items:start; justify-content:space-between; width:100%; color:#c0dcbb; }
.ws-folder-top svg { width:20px; height:20px; fill:#b7d6ad16; }
.ws-folder-top span { color:#7e948e; font:.67rem var(--mono); }
.ws-folder b { margin-top:auto; font-size:.83rem; font-weight:640; }
.ws-folder small { margin-top:3px; color:#7e928e; font-size:.68rem; }
.ws-file-heading { margin-top:24px; margin-bottom:10px; }
.ws-filter-note { padding:4px 7px; border:0; border-radius:5px; background:#d8efd10e; color:#b7d3b5; font-size:.72rem; }
.ws-filter-note:hover { background:#d8efd120; }
.ws-file-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:42px; margin-bottom:10px; }
.ws-sort-label { display:flex; align-items:center; gap:8px; color:#7f9790; font-size:.72rem; }
.ws-sort-label select { max-width:150px; padding:5px 20px 5px 6px; border:0; background:transparent; color:#c4d5ca; font-size:.72rem; cursor:pointer; }
.ws-sort-label option { background:#192220; color:#e7f1e8; }
.ws-view-controls { display:flex; gap:2px; padding:3px; border:1px solid #ffffff16; border-radius:9px; background:#ffffff06; }
.ws-view-controls button { display:grid; place-items:center; width:28px; height:27px; padding:0; border:0; border-radius:6px; background:transparent; color:#7f958c; }
.ws-view-controls button.is-active { background:#dcefd015; color:#dcefd0; }
.ws-view-controls svg { width:15px; height:15px; }
.ws-file-list { overflow:hidden; border:1px solid #ffffff17; border-radius:13px; background:#11191a; }
.ws-file-row { display:grid; grid-template-columns:minmax(0,1fr) 27px; gap:12px; align-items:center; width:100%; min-height:64px; padding:0 15px; border-bottom:1px solid #ffffff10; background:transparent; color:#c8d5ce; transition:background .16s; }
.ws-file-row:last-child { border-bottom:0; }
.ws-file-row:hover, .ws-file-row.is-selected { background:#d8eed10c; }
.ws-file-row.is-selected { box-shadow:inset 2px 0 #cde8c7; }
.ws-file-open { display:grid; grid-template-columns:minmax(0,1fr) 100px 96px; gap:12px; align-items:center; width:100%; min-width:0; min-height:64px; padding:10px 0; border:0; background:transparent; color:inherit; text-align:left; }
.ws-file-name { display:flex; align-items:center; gap:12px; min-width:0; }
.ws-file-type { display:grid; place-items:center; width:36px; height:39px; flex:none; border:1px solid #b8d5bf37; border-radius:8px; background:#bfd9c214; color:#d1e8d0; font:700 .57rem var(--mono); letter-spacing:.01em; }
.ws-file-type.type-pdf { color:#e9c8b9; border-color:#e3a99738; background:#c67a5b13; }
.ws-file-type.type-img { color:#d2cdec; border-color:#b8ace83b; background:#9b8cd11b; }
.ws-file-type.type-py { color:#c2d8eb; border-color:#a4c8eb3d; background:#719cca1a; }
.ws-file-name b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e3ece6; font-size:.78rem; font-weight:610; }
.ws-file-name small { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#78908a; font-size:.67rem; }
.ws-file-owner, .ws-file-date { color:#899d97; font-size:.71rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-favorite { display:grid; place-items:center; width:27px; height:27px; padding:0; border:0; border-radius:7px; background:transparent; color:#738883; }
.ws-favorite:hover, .ws-favorite.is-on { color:#dfd9a1; background:#f1e6a10e; }
.ws-favorite.is-on svg { fill:#dfd9a160; }
.ws-favorite svg { width:16px; height:16px; }
.ws-file-list.is-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:9px; }
.ws-file-list.is-grid .ws-file-row { display:block; min-height:130px; padding:14px; border:1px solid #ffffff14; border-radius:10px; }
.ws-file-list.is-grid .ws-file-open { display:flex; flex-direction:column; align-items:start; min-height:100px; padding:0; }
.ws-file-list.is-grid .ws-file-name { align-items:start; flex-direction:column; width:100%; gap:12px; }
.ws-file-list.is-grid .ws-file-owner { display:none; }
.ws-file-list.is-grid .ws-file-date { margin-top:auto; }
.ws-file-list.is-grid .ws-favorite { position:absolute; top:12px; right:12px; }
.ws-file-list.is-grid .ws-file-row { position:relative; }
.ws-empty { padding:42px 22px; text-align:center; color:#829a91; font-size:.79rem; }
.ws-empty strong { display:block; margin-bottom:4px; color:#d7e7d8; font-size:.96rem; }
.ws-inspector { position:sticky; top:84px; overflow:hidden; min-height:480px; border:1px solid #ffffff1c; border-radius:14px; background:linear-gradient(160deg,#182123,#101819); }
.ws-inspector-top { display:flex; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #ffffff14; color:#91a9a3; font:600 .62rem var(--mono); letter-spacing:.13em; }
.ws-inspector-live { color:#8aa89a; letter-spacing:0; text-transform:none; }
.ws-inspector-live i { width:5px; height:5px; }
.ws-detail { padding:18px; }
.ws-detail-preview { position:relative; display:grid; place-items:center; min-height:170px; margin-bottom:19px; border:1px solid #d5ecd119; border-radius:11px; background:radial-gradient(circle at 50% 20%,#c9e5ca13,transparent 65%),#0e1717; overflow:hidden; }
.ws-detail-preview::after { content:"ПРИМЕР"; position:absolute; right:10px; bottom:8px; color:#8ba69a75; font:600 .55rem var(--mono); letter-spacing:.16em; pointer-events:none; }
.ws-detail-preview pre { width:100%; max-height:170px; overflow:hidden; margin:0; padding:18px; color:#b4d2bd; font:500 .72rem/1.65 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.ws-detail-preview.is-document { border-color:#dcebd246; background:linear-gradient(145deg,#e8efe5,#cad9ce); box-shadow:inset 0 0 0 5px #f6faf236; }
.ws-detail-preview.is-document pre { color:#33463b; font-weight:560; }
.ws-detail-preview.is-document::after { color:#5676658f; }
.ws-detail-preview.is-code pre { color:#add2be; }
.ws-detail-preview.is-pdf { background:linear-gradient(145deg,#332920,#1a1d1b); border-color:#d5a9913d; }
.ws-detail-preview.is-pdf pre { color:#e4c7b6; }
.ws-detail-preview img { width:115px; height:115px; object-fit:cover; border-radius:11px; box-shadow:0 14px 30px #0007; }
.ws-preview-placeholder { display:grid; place-items:center; gap:8px; color:#78938b; font-size:.69rem; }
.ws-preview-placeholder .ws-file-type { width:56px; height:62px; font-size:.82rem; }
.ws-detail-meta { color:#89a39a; font:.64rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.ws-detail h3 { margin:7px 0 5px; overflow-wrap:anywhere; color:#f0f5ef; font-size:1.12rem; letter-spacing:-.035em; }
.ws-detail > p { margin:0 0 17px; color:#8fa69d; font-size:.75rem; line-height:1.55; }
.ws-detail-divider { height:1px; margin:15px 0; background:#ffffff15; }
.ws-detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ws-detail-stats span { display:block; color:#6d8580; font-size:.65rem; }
.ws-detail-stats b { display:block; margin-top:4px; color:#c7d8cb; font-size:.74rem; font-weight:590; }
.ws-detail-members { margin-top:20px; }
.ws-detail-members > span { color:#7e9790; font-size:.67rem; }
.ws-member-avatars { display:flex; align-items:center; margin-top:9px; }
.ws-member-avatars i { display:grid; place-items:center; width:29px; height:29px; margin-right:-5px; border:2px solid #15201f; border-radius:50%; background:#8fae9b; color:#13221a; font-size:.56rem; font-style:normal; font-weight:760; }
.ws-member-avatars i:nth-child(2) { background:#b1ada5; }
.ws-member-avatars i:nth-child(3) { background:#a0aeb8; }
.ws-member-avatars small { margin-left:15px; color:#81968f; font-size:.66rem; }
.ws-detail-hint { margin-top:21px; padding:10px 12px; border:1px solid #d8eed31d; border-radius:8px; background:#d8eed309; color:#9eafa4; font-size:.66rem; }
.ws-footer { display:flex; justify-content:space-between; gap:20px; margin-top:31px; padding:17px 0; border-top:1px solid #ffffff12; color:#6b817a; font-size:.67rem; }
.ws-footer a { color:#9cb9a2; white-space:nowrap; }
.ws-dialog { width:min(460px,calc(100vw - 32px)); padding:24px; border:1px solid #d0e8ca4d; border-radius:16px; background:linear-gradient(145deg,#202b29,#101819); color:#e7f1e8; box-shadow:0 30px 100px #000b; }
.ws-dialog::backdrop { background:#020707bc; backdrop-filter:blur(8px); }
.ws-dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.ws-dialog-head button { display:grid; place-items:center; width:32px; height:32px; border:1px solid #ffffff1a; border-radius:8px; background:#ffffff09; color:#c8dbc9; font-size:1.3rem; }
.ws-dialog h2 { margin:8px 0 12px; font-size:1.65rem; }
.ws-dialog p { color:#9fb3a7; font-size:.83rem; line-height:1.6; }
.ws-dialog-next { display:grid; gap:6px; margin:23px 0; padding:15px; border:1px solid #e0f0db1c; border-radius:9px; background:#d9e9d809; }
.ws-dialog-next b { color:#dbecdb; font-size:.77rem; }
.ws-dialog-next span { color:#8ba196; font-size:.72rem; }
@media (max-width:1200px) { .ws-work-area { grid-template-columns:minmax(0,1fr) 270px; gap:17px; } .ws-shell { grid-template-columns:220px minmax(0,1fr); } .ws-file-row { grid-template-columns:minmax(0,1fr) 25px; gap:7px; } .ws-file-open { grid-template-columns:minmax(0,1fr) 75px 75px; gap:7px; } }
@media (max-width:990px) { .ws-work-area { grid-template-columns:1fr; } .ws-inspector { position:static; min-height:0; } .ws-detail { display:grid; grid-template-columns:170px 1fr; column-gap:20px; } .ws-detail-preview { grid-row:span 6; margin:0; } .ws-detail-stats { max-width:420px; } .ws-detail-members { margin-top:10px; } .ws-detail-hint { margin-top:10px; } }
@media (max-width:760px) { .ws-shell { display:block; } .ws-sidebar { position:relative; height:auto; padding:16px; border-right:0; border-bottom:1px solid var(--ws-line); } .ws-brand { padding:0; } .ws-sidebar-divider,.ws-nav-label,.ws-tool-link,.ws-sidebar-bottom { display:none; } .ws-navigation { display:flex; overflow-x:auto; gap:5px; margin-top:15px; } .ws-navigation button { width:auto; min-height:36px; padding:0 10px; white-space:nowrap; font-size:.75rem; } .ws-navigation button svg { width:15px; height:15px; } .ws-navigation button i { display:none; } .ws-topbar { position:relative; height:65px; padding:0 17px; } .ws-local-status { display:none; } .ws-search-wrap { width:min(500px,calc(100% - 92px)); } .ws-content { padding:22px 17px; } .ws-heading { align-items:start; flex-direction:column; } .ws-feature { align-items:start; flex-wrap:wrap; padding:18px; } .ws-feature a { margin-left:57px; } .ws-footer { flex-direction:column; } }
@media (max-width:540px) { .ws-feature { gap:12px; } .ws-feature-mark { width:32px; height:32px; } .ws-feature-copy { flex-basis:calc(100% - 44px); } .ws-feature a { margin-left:44px; } .ws-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ws-file-open { grid-template-columns:minmax(0,1fr) 54px; } .ws-file-owner { display:none; } .ws-file-list.is-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ws-detail { display:block; } .ws-detail-preview { margin-bottom:18px; } .ws-heading h1 { font-size:2rem; } }
@media (prefers-reduced-motion:reduce) { .workspace-page *, .workspace-page *::before, .workspace-page *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important; } }