/* CH 04 · РАБОЧИЙ СТОЛ — light 2002 desktop. Square bevelled windows, pixel UI type, brand pink/mint/plum. */
.ch4{
  --desk:#FCE4F0; --face:#F2ECEF; --hi:#FFFFFF; --lo:#BCAAB4; --dk:#5E4654; --soft:#FBF7F9;
  --ink:#210014; --body:#4A3240; --pink:#F9AADB; --pink-l:#FFD0EB; --mint:#96F2B0; --mint-d:#7DD89B; --pink-ink:#B3266F;
  --f-ui:Tahoma,'PT Sans','Segoe UI',sans-serif;
  --logo-color:var(--ink);
  color-scheme:light;color:var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><path d='M30 14c.7 6 3 8.3 9 9-6 .7-8.3 3-9 9-.7-6-3-8.3-9-9 6-.7 8.3-3 9-9zM102 84c.5 4.4 2.2 6.1 6.6 6.6-4.4.5-6.1 2.2-6.6 6.6-.5-4.4-2.2-6.1-6.6-6.6 4.4-.5 6.1-2.2 6.6-6.6z' fill='%23F9AADB' fill-opacity='.55'/></svg>"),
    linear-gradient(180deg,#FFF1F7,var(--desk) 40%,#F8DCEA);
}

/* ---------- bevel kit ---------- */
.ch4 .bevel-in{background:#fff;box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo),inset -2px -2px var(--soft)}
.ch4 .win{position:relative;background:var(--face);padding:3px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--soft),8px 10px 0 rgba(33,0,20,.10)}
.ch4 .win__bar{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 3px 3px 9px;
  background:linear-gradient(90deg,#210014,#7A1E55 58%,#E58BC0);color:#fff;font:600 15px/1.1 var(--f-ui);letter-spacing:.01em}
.ch4 .win__title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch4 .win__ctl{display:flex;gap:2px;flex:none}
.ch4 .win__ctl i{width:22px;height:20px;display:grid;place-items:center;background:var(--face);color:var(--ink);font:600 13px/1 var(--f-ui);font-style:normal;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.ch4 .win__menu{display:flex;flex-wrap:wrap;gap:4px 18px;padding:6px 8px 5px;font:400 15px/1 var(--f-ui)}
.ch4 .win__body{padding:22px 24px 24px}
.ch4 .win__inset{margin-top:3px;padding:16px}
.ch4 .win__status{display:flex;gap:3px;margin-top:3px;font:400 13px/1.2 var(--f-ui)}
.ch4 .win__status span{flex:1 1 auto;min-width:0;padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}

.ch4 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:96px;padding:10px 18px;
  background:var(--face);color:var(--ink);text-decoration:none;font:600 16px/1 var(--f-ui);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--soft)}
.ch4 .btn--default{box-shadow:0 0 0 1px var(--ink),inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--soft)}
.ch4 .btn--pink{background:var(--pink)}
.ch4 .btn:hover{background:#fff}
.ch4 .btn--pink:hover{background:var(--pink-l)}
.ch4 .btn:active{transform:translate(1px,1px);box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.ch4 .btn:disabled{color:var(--lo);text-shadow:1px 1px #fff;cursor:default}
.ch4 .btn:focus-visible,.ch4 a:focus-visible,.ch4 button:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.ch4 .btn svg{width:13px;height:13px;fill:currentColor}
.c4-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.c4-btns--end{justify-content:flex-end;margin:12px 10px 10px}

/* ---------- taskbar + start menu ---------- */
.c4-taskbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--face);
  box-shadow:inset 0 -1px var(--dk),inset 0 1px var(--hi),0 3px 0 rgba(33,0,20,.07)}
.c4-start{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--face);font:600 17px/1 var(--f-ui);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.c4-start .star{width:16px;height:16px;color:var(--pink-ink)}
.c4-start[aria-expanded="true"]{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.c4-tasks{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.c4-tasks a{flex:0 1 180px;min-width:0;padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;
  font:400 15px/1 var(--f-ui);background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi)}
.c4-tasks a:hover{background:#fff}
.c4-tray{display:flex;align-items:center;gap:8px;margin-left:auto;padding:7px 12px;font:400 15px/1 var(--f-ui);font-variant-numeric:tabular-nums;
  box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.c4-tray .star{width:13px;height:13px;color:var(--pink-ink)}
.c4-startmenu{position:absolute;top:calc(100% - 2px);left:6px;display:flex;width:300px;background:var(--face);padding:3px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),6px 8px 0 rgba(33,0,20,.15)}
.c4-startmenu__side{display:flex;align-items:flex-end;justify-content:center;width:32px;padding:10px 0;background:linear-gradient(0deg,#210014,#7A1E55 60%,#E58BC0)}
.c4-startmenu__side span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font:600 17px/1 var(--f-ui);letter-spacing:.08em}
.c4-startmenu ul{list-style:none;margin:0;padding:2px 0;flex:1}
.c4-startmenu a{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;font:400 16px/1.1 var(--f-ui)}
.c4-startmenu a:hover,.c4-startmenu a:focus-visible{background:var(--ink);color:#fff;outline:0}
.c4-startmenu .ico{width:18px;height:18px}
.c4-startmenu .sep{height:2px;margin:4px 6px;box-shadow:inset 0 1px var(--lo),inset 0 -1px var(--hi)}

/* ---------- desk ---------- */
.c4-desk{display:grid;grid-template-columns:92px minmax(0,1fr);gap:28px;max-width:1380px;margin:auto;padding:30px max(16px,3vw) 40px}
.c4-icons{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:20px}
.c4-icons a{display:grid;justify-items:center;gap:6px;text-align:center;text-decoration:none;font:400 14px/1.15 var(--f-ui)}
.c4-icons svg{width:44px;height:44px;filter:drop-shadow(2px 2px 0 rgba(33,0,20,.12))}
.c4-icons span{padding:2px 4px}
.c4-icons a:hover span,.c4-icons a:focus-visible span{background:var(--ink);color:#fff}
.c4-icons a:focus-visible{outline:0}
.c4-main{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;min-width:0}

/* hero: player + welcome dialog overlapping like real windows */
.c4-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;min-width:0}
.c4-welcome{margin:56px 0 0 -14px;z-index:2}
.c4-player__body{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:3px;margin-top:3px}
.c4-screen{padding:2px;background:#000}
.c4-screen video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#120310}
.c4-pl{list-style:none;margin:0;padding:4px;font:400 14px/1.2 var(--f-ui);overflow:auto}
.c4-pl button,.c4-m3u button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:7px 8px}
.c4-pl button:hover,.c4-m3u button:hover{background:var(--pink-l)}
.c4-pl .is-on,.c4-m3u .is-on,.c4-pl .is-on:hover,.c4-m3u .is-on:hover{background:var(--ink);color:#fff}
.c4-transport{display:flex;align-items:center;gap:6px;padding:8px 4px 4px}
.c4-tbtn{min-width:0!important;width:42px;height:34px;padding:0!important}
.c4-seek{order:2;position:relative;flex:1;height:16px}
.c4-seek i{position:absolute;left:3px;top:3px;bottom:3px;width:0;background:repeating-linear-gradient(90deg,var(--mint-d) 0 8px,transparent 8px 10px)}
.c4-transport time{order:1;min-width:84px;text-align:center;font:400 14px/1 var(--f-ui);font-variant-numeric:tabular-nums}

.c4-lockup{width:min(100%,360px)}
.c4-lockup .logo{width:100%}
.c4-lockup .brand-sub{margin-top:10px;color:var(--ink);font-size:12px}
.c4-lockup .brand-sub::before,.c4-lockup .brand-sub::after{background:var(--mint-d);height:2px}
.c4-welcome h1{margin:24px 0 8px;font:800 clamp(28px,2.6vw,38px)/1.06 var(--f-body);letter-spacing:-.02em}
.c4-tag{font:300 italic 21px/1.2 var(--f-display);color:var(--pink-ink)}
.c4-welcome .win__body>p:not(.c4-tag){margin-top:12px;font-size:17px;color:var(--body)}

/* explorer: my clips */
.c4-addr{display:flex;align-items:center;gap:8px;padding:6px 6px 3px;font:400 14px/1 var(--f-ui)}
.c4-addr .field{flex:1;min-width:0;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c4-clips .win__inset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.c4-clips figure{margin:0}
.c4-clips video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#120310;box-shadow:0 0 0 1px var(--lo)}
.c4-clips figcaption{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:2px 4px;font:400 14px/1.2 var(--f-ui)}
.c4-clips figure:hover figcaption{background:var(--ink);color:#fff}

/* playlist */
.c4-playlist{margin-right:10%}
.c4-lcd{display:flex;align-items:center;gap:16px;margin-top:3px;padding:12px 14px;background:#14030f!important;color:var(--mint);overflow:hidden}
.c4-lcd__eq{display:flex;align-items:flex-end;gap:2px;height:30px;flex:none}
.c4-lcd__eq i{width:5px;height:100%;background:linear-gradient(0deg,var(--mint) 0 60%,var(--pink) 60% 85%,#fff 85%);transform-origin:bottom;animation:c4-eq 1.1s ease-in-out infinite}
.c4-lcd__eq i:nth-child(3n){animation-duration:.8s}
.c4-lcd__eq i:nth-child(4n+1){animation-duration:1.4s;animation-delay:-.3s}
.c4-lcd__eq i:nth-child(5n+2){animation-duration:.95s;animation-delay:-.6s}
@keyframes c4-eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.c4-lcd__track{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font:400 18px/1 var(--f-ui)}
.c4-lcd__track span{display:inline-block;padding-left:100%;animation:c4-marquee 14s linear infinite}
@keyframes c4-marquee{to{transform:translateX(-100%)}}
.c4-m3u{list-style:none;margin:3px 0 0;padding:4px;font:400 16px/1.25 var(--f-ui)}
.c4-m3u i{font-style:normal;opacity:.7}

/* wizard */
.c4-wizard{margin-left:8%}
.c4-wiz{display:grid;grid-template-columns:190px minmax(0,1fr);margin-top:3px;background:#fff;min-height:300px}
.c4-wiz__banner{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:22px 18px;color:#fff;
  background:linear-gradient(180deg,#210014,#7A1E55 55%,#F9AADB)}
.c4-wiz__banner .logo{width:100%;--logo-color:var(--pink-l)}
.c4-wiz__banner .star{width:58px;height:58px;color:var(--pink-l)}
.c4-wiz__banner span:last-child{font:600 17px/1.2 var(--f-ui)}
.c4-wiz__main{padding:26px 28px}
.c4-wiz__step{font:400 15px/1 var(--f-ui);color:var(--pink-ink)}
.c4-wiz__main h2{margin:12px 0 10px;font:800 clamp(26px,2.4vw,34px)/1.1 var(--f-body);letter-spacing:-.02em}
.c4-wiz__main>p:not(.c4-wiz__step):not(.c4-wiz__total){max-width:48ch;color:var(--body)}
.c4-prog{display:flex;gap:3px;height:24px;margin-top:26px;padding:4px}
.c4-prog i{flex:1;background:transparent}
.c4-prog i.on{background:repeating-linear-gradient(90deg,var(--mint-d) 0 10px,transparent 10px 12px)}
.c4-wiz__total{margin-top:12px;font:400 14px/1 var(--f-ui);color:var(--dk)}
.c4-wiz__btns{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:3px;padding:12px 10px 10px;box-shadow:inset 0 1px var(--lo),inset 0 2px var(--hi)}

/* properties + recycle bin */
.c4-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.c4-tabs{display:flex;gap:2px;padding:8px 6px 0}
.c4-tabs span{padding:7px 14px 6px;font:400 15px/1 var(--f-ui);box-shadow:inset 1px 1px var(--hi),inset -1px 0 var(--dk)}
.c4-tabs .on{background:#fff;position:relative;top:1px}
.c4-props__body{display:grid;gap:14px;margin-top:0}
.c4-props label{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.35;cursor:pointer}
.c4-props em{color:var(--dk)}
.c4-props input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;background:#fff;cursor:pointer;
  box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.c4-props input:checked{background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' fill='none' stroke='%23210014' stroke-width='2.6' stroke-linecap='square'/></svg>") center/14px no-repeat}
.c4-props input:focus-visible{outline:1px dotted var(--ink);outline-offset:2px}
.c4-files{width:100%;border-collapse:collapse;font:400 15px/1.2 var(--f-ui)}
.c4-files th{padding:5px 8px;text-align:left;font-weight:400;background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi)}
.c4-files td{padding:8px}
.c4-files td:first-child{display:flex;align-items:center;gap:8px}
.c4-files td:last-child{color:var(--dk)}
.c4-files .ico{width:16px;height:16px}
.c4-files.is-emptying tbody tr{animation:c4-poof .45s ease-in forwards}
.c4-files.is-emptying tbody tr:nth-child(2){animation-delay:.08s}
.c4-files.is-emptying tbody tr:nth-child(3){animation-delay:.16s}
.c4-files.is-emptying tbody tr:nth-child(4){animation-delay:.24s}
@keyframes c4-poof{to{opacity:0;transform:translateX(30px)}}
.c4-bin .win__inset{min-height:206px}
.c4-bin__empty{display:grid;place-items:center;min-height:170px;text-align:center;font:600 20px/1.35 var(--f-ui)}
.c4-bin__confirm{margin:3px 0 0;padding:14px 14px 0;background:var(--pink-l)}
.c4-bin__confirm p{font:600 16px/1.3 var(--f-ui)}
.c4-bin__go{margin:12px 10px 10px auto;display:flex!important;width:max-content}
.c4-bin__go[hidden]{display:none!important}

/* help */
.c4-help{margin-right:6%}
.c4-help__body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:3px;margin-top:3px}
.c4-help__topics{display:grid;align-content:start;padding:6px}
.c4-help__topics button{display:flex;align-items:center;gap:8px;padding:9px 8px;text-align:left;font:400 15px/1.2 var(--f-ui)}
.c4-help__topics button::before{content:"?";display:grid;place-items:center;width:16px;height:16px;flex:none;background:var(--mint);box-shadow:0 0 0 1px var(--ink);font-size:12px}
.c4-help__topics button:hover{background:var(--pink-l)}
.c4-help__topics [aria-selected="true"],.c4-help__topics [aria-selected="true"]:hover{background:var(--ink);color:#fff}
.c4-help__pane{padding:24px 26px;min-height:200px}
.c4-help__pane h3{margin-bottom:10px;font:800 24px/1.2 var(--f-body);letter-spacing:-.01em}
.c4-help__pane p{color:var(--body);max-width:56ch}

/* signup dialog */
.c4-dialog{justify-self:center;width:min(100%,600px)}
.c4-dialog__body{display:flex;gap:20px;align-items:flex-start;padding:24px 24px 6px}
.c4-dialog__ico{width:52px;height:52px;flex:none}
.c4-dialog h2{font:800 clamp(22px,2.2vw,28px)/1.15 var(--f-body);letter-spacing:-.01em;margin-bottom:10px}
.c4-dialog p{color:var(--body)}

.c4-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;max-width:1380px;margin:auto;
  padding:14px max(16px,3vw);font:400 15px/1.3 var(--f-ui)}
.c4-foot .logo{width:120px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .c4-desk{grid-template-columns:minmax(0,1fr)}
  .c4-icons{display:none}
  .c4-playlist,.c4-wizard,.c4-help{margin-inline:0}
}
@media (max-width:900px){
  .c4-tasks{display:none}
  .c4-hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .c4-welcome{order:-1;margin:0}
  .c4-row{grid-template-columns:minmax(0,1fr)}
  .c4-clips .win__inset{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .c4-player__body{grid-template-columns:minmax(0,1fr)}
  .c4-pl{display:flex;overflow-x:auto;gap:2px}
  .c4-pl li{flex:none}
  .c4-wiz{grid-template-columns:minmax(0,1fr)}
  .c4-wiz__banner{flex-direction:row;align-items:center;padding:14px 16px}
  .c4-wiz__banner .logo{width:120px}
  .c4-wiz__banner .star{width:28px;height:28px}
  .c4-wiz__banner span:last-child{display:none}
  .c4-wiz__main{padding:20px 18px}
  .c4-help__body{grid-template-columns:minmax(0,1fr)}
  .c4-help__topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch4 .win__menu{display:none}
  .ch4 .win__body{padding:18px 16px 20px}
  .c4-startmenu{width:calc(100vw - 12px)}
  .c4-dialog__body{padding:18px 16px 4px;gap:14px}
}