.brand-audit{--navy:#0f3d52;--navy2:#1a4a6b;--green:#1a5c3a;--gold:#c9a96e;--gold2:#d4b483;--gold3:#ede0c4;--beige:#f5f0e8;--beige2:#faf7f2;--text:#1c1c1a;--muted:#4a4740;--light:#888078;--danger:#7a2020;--danger-bg:#f8eded;--danger-border:#c04444;--amber:#7a4e00;--amber-bg:#fdf3dc;--amber-border:#d4a030;--ok-bg:#ebf5ee;--ok-text:#1a5c3a;background:var(--beige);color:var(--text);font-family:var(--body-font),system-ui,sans-serif;min-height:100vh;padding:2rem 2.5rem;& .top-bar{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}& h1{color:var(--navy);font-family:var(--heading-font);font-size:14px;font-weight:700}& .subtitle{color:var(--light);font-size:12.5px;font-weight:300;margin-bottom:16px}& .rule{align-items:center;display:flex;gap:8px;margin-bottom:16px}& .rule-line{background:var(--gold);flex:1;height:1px;opacity:.35}& .rule-dot{border:1.5px solid var(--gold);border-radius:50%;flex-shrink:0;height:7px;opacity:.6;width:7px}& .layout{align-items:start;display:grid;gap:16px;grid-template-columns:280px 1fr}& .sidebar{display:flex;flex-direction:column;gap:4px}& .phase-label{color:var(--gold);font-family:var(--heading-font);font-size:9px;font-weight:700;letter-spacing:.12em;padding:10px 0 4px;text-transform:uppercase}& .step-btn{align-items:center;background:#fff;border:1px solid hsla(39,46%,61%,.22);border-left:3px solid transparent;border-radius:3px;cursor:pointer;display:flex;gap:6px;justify-content:space-between;padding:7px 10px;text-align:left;transition:all .13s;&:hover{background:var(--beige2);border-color:hsla(39,46%,61%,.55);border-left-color:var(--gold)}&.active{background:#ebf2f7;border-color:var(--navy2);border-left-color:var(--navy)}&.s-ok{background:var(--ok-bg);border-left-color:var(--green)}&.s-weak{background:var(--amber-bg);border-left-color:var(--amber-border)}&.s-skip{background:var(--danger-bg);border-left-color:var(--danger);opacity:.8}&.s-chain{background:#fffbee;border-left-color:#e8c060}&.s-skip .step-btn-name{color:var(--danger);text-decoration:line-through}&.active .step-btn-name{color:var(--navy)}}& .step-btn-inner{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}& .step-btn-name{color:var(--text);font-size:12px;font-weight:500}& .step-btn-status{color:var(--light);font-family:var(--body-font);font-size:10px;font-weight:300;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& .s-dot{border:1.5px solid rgba(15,61,82,.2);border-radius:50%;flex-shrink:0;height:7px;width:7px;&.ok{background:var(--green);border-color:var(--green)}&.weak{background:var(--amber-border);border-color:var(--amber-border)}&.skip{background:var(--danger);border-color:var(--danger)}&.chain{background:#e8c060;border-color:#d4a030}}& .s-tag{border:1px solid transparent;border-radius:2px;flex-shrink:0;font-family:var(--heading-font);font-size:8.5px;font-weight:700;letter-spacing:.04em;padding:2px 6px;white-space:nowrap;&.t-none{background:transparent;border-color:rgba(136,128,120,.25);color:var(--light)}&.t-input{background:#ebf2f7;border-color:rgba(26,74,107,.2);color:var(--navy2)}&.t-analysed{background:#ede0c4;border-color:hsla(39,46%,61%,.4);color:#7a5200}&.t-ok{background:var(--ok-bg);border-color:rgba(45,107,74,.3);color:var(--ok-text)}&.t-weak{background:var(--amber-bg);border-color:rgba(212,160,48,.3);color:var(--amber)}&.t-skip{background:var(--danger-bg);border-color:rgba(192,68,68,.2);color:var(--danger)}&.t-chain{background:#fffbee;border-color:rgba(232,192,96,.4);color:#7a5200}}& .main-panel{background:#fff;border:1px solid hsla(39,46%,61%,.2);border-radius:6px;overflow:hidden}& .panel-header{align-items:flex-start;background:var(--navy);display:flex;gap:12px;justify-content:space-between;overflow:hidden;padding:16px 20px;position:relative;&:after{border:12px solid hsla(39,46%,61%,.08);border-radius:50%;bottom:-20px;content:"";height:100px;position:absolute;right:-20px;width:100px}}& .panel-title{color:var(--gold2);font-family:var(--heading-font);font-size:15px;font-weight:700}& .panel-sub{color:rgba(245,240,232,.6);font-size:12px;font-weight:300;margin-top:3px}& .status-pills{display:flex;flex-shrink:0;gap:6px}& .pill{border:1px solid transparent;border-radius:20px;cursor:pointer;font-family:var(--heading-font);font-size:10px;font-weight:700;padding:3px 9px;transition:all .12s;&.p-ok{background:rgba(26,92,58,.3);border-color:rgba(26,92,58,.5);color:#8fd4a8}&.p-weak{background:rgba(212,160,48,.25);border-color:rgba(212,160,48,.4);color:#f0c060}&.p-skip{background:rgba(122,32,32,.3);border-color:rgba(192,68,68,.4);color:#f09090}&.p-ok.active{background:var(--green);border-color:var(--green);color:#fff}&.p-weak.active{background:var(--amber-border);border-color:var(--amber-border);color:#fff}&.p-skip.active{background:var(--danger);border-color:var(--danger);color:#fff}}& .panel-body{padding:20px}& .step-desc{color:var(--muted);font-size:13px;font-weight:300;line-height:1.65;margin-bottom:12px}& .check-q{border-left:2px solid var(--gold3);color:var(--light);font-size:12px;font-style:italic;line-height:1.6;margin-bottom:16px;padding-left:10px}& .input-label{color:var(--navy);display:block;font-family:var(--heading-font);font-size:9.5px;font-weight:700;letter-spacing:.1em;margin-bottom:6px;text-transform:uppercase}& textarea{background:var(--beige2);border:1px solid hsla(39,46%,61%,.3);border-radius:4px;color:var(--text);font-family:var(--body-font);font-size:13px;font-weight:300;line-height:1.6;min-height:110px;outline:none;padding:10px 12px;resize:vertical;transition:border-color .15s;width:100%;&:focus{background:#fff;border-color:var(--navy)}&::placeholder{color:var(--light);font-style:italic}}& .analyse-btn{align-items:center;background:var(--navy);border:none;border-radius:3px;color:var(--gold2);cursor:pointer;display:flex;font-family:var(--heading-font);font-size:11px;font-weight:700;gap:8px;letter-spacing:.06em;margin-top:10px;padding:8px 18px;text-transform:uppercase;transition:all .15s;&:hover{background:var(--navy2)}&:disabled{cursor:not-allowed;opacity:.5}& .spinner{animation:spin-animation .7s linear infinite;border:2px solid hsla(39,46%,61%,.3);border-radius:50%;border-top:2px solid var(--gold2);display:none;height:12px;width:12px}&.loading .spinner{display:block}&.loading .btn-text{opacity:.7}}& .img-upload-area{align-items:center;background:var(--beige2);border:1.5px dashed hsla(39,46%,61%,.4);border-radius:4px;cursor:pointer;display:flex;gap:10px;margin-top:10px;padding:10px 14px;transition:border-color .15s;&:hover{border-color:var(--gold)}& input[type=file]{display:none}}& .img-upload-label{color:var(--light);flex:1;font-size:11.5px;font-weight:300}& .img-upload-label strong{color:var(--muted);font-weight:500}& .img-preview{border:1px solid hsla(39,46%,61%,.3);border-radius:3px;flex-shrink:0;height:48px;object-fit:cover;width:48px}& .img-clear{background:var(--danger-bg);border:1px solid rgba(192,68,68,.3);border-radius:2px;color:var(--danger);cursor:pointer;flex-shrink:0;font-family:var(--heading-font);font-size:10px;font-weight:700;padding:2px 6px;&:hover{background:var(--danger);color:#fff}}& .ai-result{background:var(--beige2);border:1px solid hsla(39,46%,61%,.25);border-radius:4px;display:none;margin-top:14px;padding:14px 16px;&.visible{display:block}}& .ai-result-label{align-items:center;color:var(--gold);display:flex;font-family:var(--heading-font);font-size:9px;font-weight:700;gap:6px;letter-spacing:.1em;margin-bottom:8px;text-transform:uppercase}& .ai-suggestion{align-items:center;display:flex;font-size:12px;font-weight:700;gap:8px;margin-bottom:6px;&.sug-ok{color:var(--green)}&.sug-weak{color:var(--amber)}&.sug-miss{color:var(--danger)}}& .ai-reasoning{color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.6;margin-bottom:12px}& .confirm-row{align-items:center;display:flex;flex-wrap:wrap;gap:6px}& .confirm-label{color:var(--light);font-size:11px;font-weight:300;margin-right:4px}& .confirm-btn{background:#fff;border:1px solid rgba(15,61,82,.2);border-radius:2px;color:var(--muted);cursor:pointer;font-family:var(--body-font);font-size:11px;padding:4px 12px;transition:all .12s;&:hover{border-color:var(--navy);color:var(--navy)}&.c-ok{background:var(--green);border-color:var(--green);color:#fff}&.c-weak{background:var(--amber-border);border-color:var(--amber-border);color:#fff}&.c-skip{background:var(--danger);border-color:var(--danger);color:#fff}}& .impact-box{border-radius:4px;display:none;font-size:12.5px;font-weight:300;line-height:1.6;margin-top:14px;padding:12px 14px;&.visible{display:block}&.i-ok{background:var(--ok-bg);border:1px solid rgba(45,107,74,.25);color:var(--ok-text)}&.i-weak{background:var(--amber-bg);border:1px solid rgba(212,160,48,.3);color:var(--amber)}&.i-skip{background:var(--danger-bg);border:1px solid rgba(192,68,68,.25);color:var(--danger)}}& .impact-label{font-family:var(--heading-font);font-size:9px;font-weight:700;letter-spacing:.1em;margin-bottom:4px;opacity:.7;text-transform:uppercase}& .empty-state{color:var(--light);font-size:13px;font-weight:300;line-height:1.7;padding:40px 20px;text-align:center;& .arrow{color:var(--gold3);font-size:24px;margin-bottom:8px}}@media (max-width:720px){padding-bottom:1rem;padding-left:1rem;padding-right:1rem;padding-top:1rem;& .layout{grid-template-columns:1fr}}}@keyframes spin-animation{to{transform:rotate(1turn)}}