/* Traffic-video studio: align with the dark HI CHUYAN shell and gradient accents. */
.traffic-workspace{display:grid;flex:1;min-height:0;grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:0;height:auto;padding:0;background:#07070a;color:#e4e4e7;font-family:inherit}
.traffic-workspace.hidden{display:none}
.traffic-input-pane{padding:28px 26px 44px;overflow:auto;border-right:1px solid var(--line);background:radial-gradient(circle at 4% 0%,rgba(255,183,200,.07),transparent 35%),#0d0d10}
.traffic-main-pane{min-width:0;overflow:auto;padding:28px clamp(24px,3.2vw,54px) 52px;background:radial-gradient(circle at 85% 0%,rgba(155,232,255,.055),transparent 30%),#09090b}
.traffic-eyebrow{font-size:10px;letter-spacing:.19em;font-weight:750;color:#bcaad8;text-transform:uppercase}
.traffic-eyebrow span{color:#777784;letter-spacing:.08em}
.traffic-input-pane h2{font-size:27px;letter-spacing:-.03em;line-height:1.2;margin:10px 0 11px;color:#fff}
.traffic-intro{font-size:12px;line-height:1.75;color:#a1a1aa;margin:0 0 24px}
#trafficForm{display:grid;gap:17px}
.traffic-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.traffic-count-field{grid-column:1/-1}
.traffic-field{display:grid;gap:8px;font-size:12px;font-weight:650;color:#dedee3}
.traffic-field small,.traffic-field-heading small{font-size:10px;font-weight:400;color:#83838f;line-height:1.5}
.traffic-field-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:650}
.traffic-field input,.traffic-field textarea,.traffic-field select{box-sizing:border-box;width:100%;border:1px solid #ffffff1a;border-radius:10px;background:#17171b;color:#f4f4f5;padding:11px 12px;font:inherit;font-size:12px;outline:none}
.traffic-field input::placeholder,.traffic-field textarea::placeholder{color:#686874}
.traffic-field input:focus,.traffic-field textarea:focus,.traffic-field select:focus{border-color:#a6c6da;box-shadow:0 0 0 3px #9be8ff17}
.traffic-field textarea{resize:vertical;min-height:91px;line-height:1.6}
.traffic-drop{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:112px;background:#15151a;border:1px dashed #4a4a55;border-radius:12px;text-align:center;color:#c8c8d2;cursor:pointer;transition:border-color .18s,background .18s}
.traffic-drop:hover,.traffic-drop.is-dragging{border-color:#b9a9d5;background:#1b1a22}
.traffic-drop strong{font-size:12px;font-weight:600}.traffic-drop small{font-size:10px;color:#898995}
.traffic-drop-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;color:#15151a;background:var(--brand-grad-compact);font-size:18px;font-weight:600}
.traffic-video-drop{position:relative;min-height:142px;overflow:hidden}
#trafficReferenceEmpty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:15px}
#trafficReferencePreview{display:block;width:100%;height:192px;object-fit:contain;background:#050505}#trafficReferencePreview.hidden{display:none}
.traffic-reference-name{position:absolute;bottom:7px;left:8px;right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#050505b8;border-radius:5px;padding:5px 7px;font-size:10px;color:#eee}.traffic-reference-name:empty{display:none}
.traffic-upload-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.traffic-upload-item{position:relative;aspect-ratio:1;background:#17171b;border-radius:8px;border:1px solid #ffffff1a;overflow:hidden}.traffic-upload-item img{width:100%;height:100%;object-fit:cover}.traffic-upload-item button{position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:50%;background:#09090bc9;color:#fff;cursor:pointer;line-height:1}
#viewSocial #trafficSubmit{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;height:44px;width:100%;padding:0 16px;background:var(--brand-grad);border:0;border-radius:8px;color:#0b0b0b;font-size:13px;font-weight:600;line-height:1.3;text-shadow:none;box-shadow:none;cursor:pointer}
#viewSocial #trafficSubmit:hover:not(:disabled){background:var(--brand-grad-hover)}
#viewSocial #trafficSubmit:disabled{background:#5b5862;color:#fff;opacity:1;cursor:not-allowed;box-shadow:none}
.traffic-main-heading,.traffic-history-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.traffic-main-heading h3{font-size:22px;line-height:1.2;margin:7px 0 0;color:#fff}
.traffic-main-heading button,.traffic-row button,.traffic-result-row button{border:1px solid #ffffff20;background:#1c1c21;color:#d4d4d8;border-radius:7px;padding:7px 11px;font-size:11px;cursor:pointer}.traffic-main-heading button:hover,.traffic-row button:hover,.traffic-result-row button:hover{border-color:#a6b3d4}
#trafficNotice{min-height:19px;margin-top:5px;color:#fda4af;font-size:11px}
.traffic-detail{min-height:348px;border:1px solid #ffffff15;border-radius:16px;background:linear-gradient(145deg,#17171c,#101014 72%);overflow:hidden}
.traffic-empty{min-height:348px;display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;padding:24px;color:#8d8d99;font-size:12px;line-height:1.75;margin:0;max-width:none}.traffic-empty-orb{width:54px;height:54px;margin-bottom:18px;border-radius:18px;background:var(--brand-grad);box-shadow:0 12px 35px #d6bcd433;color:#17171b;display:grid;place-items:center;font-size:25px}.traffic-empty strong{font-size:16px;color:#ececf0;margin-bottom:6px}
.traffic-current-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 21px;border-bottom:1px solid #ffffff12}.traffic-current-header h4{font-size:15px;margin:0 0 6px;color:#f5f5f6}.traffic-current-header p{font-size:11px;margin:0;color:#91919b}.traffic-status-pill{font-size:10px;color:#15151a;background:var(--brand-grad-compact);padding:6px 9px;border-radius:30px;white-space:nowrap}
.traffic-progress-area{padding:31px 24px 28px}.traffic-progress-top{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:15px}.traffic-progress-top strong{font-size:24px;line-height:1.1;color:#fff}.traffic-progress-top span{font-size:11px;color:#a1a1aa}.traffic-progress-track{width:100%;height:7px;border-radius:10px;background:#ffffff18;overflow:hidden}.traffic-progress-track i{display:block;height:100%;background:var(--brand-grad);border-radius:10px;transition:width .4s}.traffic-progress-stages{display:flex;justify-content:space-between;gap:8px;margin-top:13px;color:#797984;font-size:10px}.traffic-progress-stages span.is-done{color:#b7dcd6}.traffic-progress-stages span.is-current{color:#e4d4dd}
.traffic-dna{margin:2px 21px 23px;padding:13px 15px;background:#ffffff0b;border:1px solid #ffffff13;border-radius:10px;font-size:11px;line-height:1.55;color:#b7b7c0}.traffic-dna strong{display:block;color:#e9e9ef;font-size:11px;margin-bottom:4px}
.traffic-error{display:flex;align-items:center;justify-content:space-between;gap:16px}.traffic-error button{flex:none;padding:7px 12px;border:1px solid #ffffff32;border-radius:8px;background:#ffffff14;color:#f7f7f9;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer}.traffic-error button:hover{background:#ffffff25}.traffic-error button:disabled{opacity:.55;cursor:wait}
.traffic-preview-area{padding:16px 21px 21px;display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:18px}.traffic-player{aspect-ratio:9/16;background:#050506;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#a1a1aa;font-size:11px}.traffic-player video{width:100%;height:100%;object-fit:contain}.traffic-preview-copy{min-width:0;padding:7px 0}.traffic-preview-copy h5{font-size:17px;color:#fff;margin:0 0 9px}.traffic-preview-copy p{font-size:12px;line-height:1.65;color:#aaaab5}.traffic-preview-copy blockquote{margin:14px 0;padding:10px 12px;border-left:2px solid #cbb6ff;background:#ffffff0a;color:#e6e6eb;font-size:12px}.traffic-current-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.traffic-current-actions button{border:1px solid #ffffff25;color:#f3f3f5;background:#25252b;border-radius:8px;padding:9px 13px;cursor:pointer;font-size:11px}
.traffic-history-section{margin-top:28px}.traffic-history-heading{border-bottom:1px solid #ffffff17;padding-bottom:13px}.traffic-history-heading h3{margin:0;color:#e8e8ed;font-size:15px}.traffic-history-heading span{font-size:10px;color:#777782}.traffic-projects{margin-top:10px;display:grid;gap:7px}
.traffic-row{width:100%;display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid #ffffff12;border-radius:10px;background:#141418;color:#dddde4;text-align:left;cursor:pointer}.traffic-row.is-active{border-color:#cbb6ff8a;background:#1b1a22}.traffic-row-index{width:31px;height:31px;flex:0 0 auto;border-radius:8px;background:#ffffff10;color:#cbb6ff;display:grid;place-items:center;font-size:12px}.traffic-row-info{flex:1;min-width:0}.traffic-row-info strong,.traffic-row-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.traffic-row-info strong{font-size:12px;font-weight:650}.traffic-row-info small{font-size:10px;color:#878791;margin-top:4px}.traffic-row-status{font-size:10px;color:#b5b5c0;white-space:nowrap}
.traffic-result-list{padding:0 21px 22px}.traffic-result-list h5{font-size:12px;color:#e8e8ed;margin:2px 0 9px}.traffic-result-row{display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff12;padding:11px 0}.traffic-result-row .traffic-row-info{flex:1}.traffic-result-row .traffic-row-status{min-width:56px;text-align:right}.traffic-result-actions{display:flex;gap:6px}
@media(max-width:960px){.traffic-workspace{grid-template-columns:1fr;overflow:auto}.traffic-input-pane,.traffic-main-pane{overflow:visible}.traffic-input-pane{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:620px){.traffic-input-pane,.traffic-main-pane{padding:20px 17px 30px}.traffic-preview-area{grid-template-columns:1fr}.traffic-player{max-height:440px;width:100%;aspect-ratio:9/12}.traffic-progress-stages{font-size:9px}}
@media(max-width:360px){.traffic-settings-grid{grid-template-columns:1fr}}
.traffic-progress-stages span.is-blocked{color:#f4a9b8}
.traffic-no-video{margin:0 21px 22px;min-height:168px;border:1px dashed #ffffff23;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#a2a2ac}
.traffic-no-video-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ffffff10;color:#d7c4db;font-size:14px;margin-bottom:12px}
.traffic-no-video strong{font-size:14px;color:#e9e9ee}.traffic-no-video p{margin:7px 0 0;font-size:11px;line-height:1.6}
.traffic-candidate-warning{color:#f7b3c3!important}
