/* rec.css — screen and voice recorder (with video-studio.css + biz-doc.css) */
.rc{font-size:14px}
.rc [hidden]{display:none!important}
.rc-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}
.rc-main{display:grid;gap:10px;min-width:0}
.rc-stage{position:relative;background:#0f172a;border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.rc-voice .rc-stage{aspect-ratio:auto;height:200px}
.rc-stage canvas{max-width:100%;max-height:100%;display:block}
.rc-voice .rc-stage canvas{width:100%;height:100%}
.rc-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#cbd5e1;text-align:center;padding:20px;gap:6px}
.rc-idle p{margin:0}.rc-mic{font-size:44px}
.rc-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 120px system-ui;color:#fff;background:rgba(15,23,42,.6)}
.rc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rc-rec{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#dc2626;color:#fff;font:700 15px inherit;font-family:inherit;padding:12px 22px;cursor:pointer;width:auto}
.rc-rec span{width:14px;height:14px;border-radius:50%;background:#fff}
.rc-rec:hover{filter:brightness(1.08)}
.rc-time{font:700 18px ui-monospace,monospace;font-variant-numeric:tabular-nums;margin-left:6px}
.rc.recording .rc-time{color:#dc2626}
.rc.recording .rc-time::before{content:'● ';animation:rcblink 1s steps(2,start) infinite}
@keyframes rcblink{to{visibility:hidden}}
.rc-meter{width:90px;height:8px;border-radius:4px;background:var(--field,#f4f6fb);border:1px solid var(--border,#e4e9f2);overflow:hidden}
.rc-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#eab308 70%,#ef4444);transition:width .06s}
.rc-side .vs-panel select,.rc-side .vs-panel input[type=number]{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;font:inherit;background:var(--panel,#fff);color:var(--text,#1e2635)}
.rc-h{font-size:15px;margin:8px 0 2px}.rc-h small{font-weight:500;color:var(--muted,#5a6377);font-size:12.5px}
.rc-list{display:grid;gap:10px}
.rc-item{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--panel,#fff);border:1px solid var(--border,#e4e9f2);border-radius:14px;padding:10px}
.rc-item video{width:240px;max-width:100%;border-radius:8px;background:#000}
.rc-item audio{width:280px;max-width:100%}
.rc-info{display:grid;gap:6px;flex:1;min-width:220px}
.rc-info input{font:600 14px inherit;font-family:inherit;border:1px solid transparent;border-radius:8px;padding:4px 6px;background:transparent;color:inherit}
.rc-info input:hover,.rc-info input:focus{border-color:var(--border-2,#dfe4ee)}
.rc-info span{font-size:12.5px;color:var(--muted,#5a6377)}
.rc-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rc-acts select{padding:7px 8px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;font:inherit;background:var(--panel,#fff);color:var(--text,#1e2635)}
.rc-acts .ps-go{width:auto!important}
@media (max-width:980px){.rc-grid{grid-template-columns:minmax(0,1fr)}}