:root {
--ts-dark:  #164623;
--ts-green: #129D39;
--ts-light: #f0f7f1;
}
.techsanit-audit-wrapper { font-family: 'Trebuchet MS','Segoe UI',sans-serif; box-sizing: border-box; }
.techsanit-audit-wrapper *, .techsanit-audit-wrapper *::before, .techsanit-audit-wrapper *::after { box-sizing: inherit; } #ts-audit {
background: linear-gradient(135deg, var(--ts-dark) 0%, #1a5c2a 45%, #0d3a1a 100%);
border-radius: 20px;
padding: 36px 28px 40px;
max-width: 640px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
#ts-audit::before, #ts-audit::after {
content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
#ts-audit::before { width:280px;height:280px;top:-80px;right:-80px;background:radial-gradient(circle,rgba(18,157,57,.18) 0%,transparent 70%); }
#ts-audit::after  { width:220px;height:220px;bottom:-60px;left:-60px;background:radial-gradient(circle,rgba(18,157,57,.12) 0%,transparent 70%); } .ts-header { text-align:center; margin-bottom:28px; }
.ts-badge {
display:inline-flex; align-items:center; gap:8px;
background:rgba(255,255,255,.06); border:1px solid rgba(18,157,57,.4);
border-radius:50px; padding:5px 18px; margin-bottom:12px;
color:var(--ts-green); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
}
.ts-logo { display:flex; align-items:center; justify-content:center; gap:3px; }
.ts-logo-white { font-family:Impact,'Arial Narrow',Arial,sans-serif; font-size:28px; color:#fff; letter-spacing:1px; }
.ts-logo-green  { font-family:Impact,'Arial Narrow',Arial,sans-serif; font-size:28px; color:var(--ts-green); letter-spacing:1px; } .ts-progress-wrap { margin-bottom:24px; }
.ts-progress-labels { display:flex; justify-content:space-between; margin-bottom:6px; }
.ts-progress-label { color:#ffffff; font-size:11px; letter-spacing:1px; font-weight:600; }
.ts-progress-pct   { color:var(--ts-green); font-size:11px; font-weight:700; }
.ts-progress-track { height:4px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }
.ts-progress-bar   { height:100%; background:linear-gradient(90deg,var(--ts-green),#22d45a); border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); } .ts-card {
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
border-radius:16px; padding:32px 26px; backdrop-filter:blur(20px);
transition:opacity .3s ease,transform .3s ease;
}
.ts-card.ts-fade { opacity:0; transform:translateY(8px); } .ts-intro { text-align:center; }
.ts-intro-icon { font-size:50px; margin-bottom:14px; }
.ts-intro h2 { font-family:Impact,'Arial Narrow',Arial,sans-serif; color:#fff; font-size:24px; letter-spacing:1px; margin:0 0 6px; }
.ts-intro-sub { color:var(--ts-green); font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin:0 0 18px; }
.ts-intro p { color:#ffffff; font-size:14px; line-height:1.7; margin:0 0 22px; }
.ts-intro p strong { color:#ffffff; }
.ts-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:26px; }
.ts-chip { background:rgba(18,157,57,.15); border:1px solid rgba(18,157,57,.35); border-radius:20px; padding:5px 13px; color:#ffffff; font-size:12px; } .ts-q-title { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.ts-q-icon { font-size:28px; flex-shrink:0; }
.ts-q-title h3 { color:#ffffff; font-size:17px; font-weight:700; margin:0; line-height:1.35; }
.ts-options { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.ts-option {
background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.1);
border-radius:12px; padding:13px 16px; color:#ffffff;
font-size:14px; font-family:inherit; cursor:pointer;
text-align:left; display:flex; align-items:center; justify-content:space-between;
transition:border-color .2s,background .2s,color .2s;
}
.ts-option:hover { border-color:rgba(18,157,57,.5); background:rgba(18,157,57,.08); color:#fff; }
.ts-option.ts-selected { border-color:var(--ts-green); background:rgba(18,157,57,.18); color:#fff; font-weight:700; }
.ts-check { color:var(--ts-green); font-size:18px; } .ts-loading { text-align:center; padding:20px 0; }
.ts-spinner {
display:inline-block; width:42px; height:42px;
border:3px solid rgba(18,157,57,.2);
border-top-color:var(--ts-green);
border-radius:50%;
animation:ts-spin .8s linear infinite;
margin-bottom:14px;
}
@keyframes ts-spin { to { transform:rotate(360deg); } }
.ts-loading p { color:#ffffff; font-size:13px; margin:0; }
.ts-loading strong { color:var(--ts-green); } .ts-result-header { text-align:center; margin-bottom:22px; }
.ts-result-emoji { font-size:44px; margin-bottom:8px; }
.ts-result-sub { color:#ffffff; font-size:11px; letter-spacing:2px; margin:0 0 4px; font-weight:600; }
.ts-result-label { font-family:Impact,'Arial Narrow',Arial,sans-serif; font-size:34px; letter-spacing:2px; margin:0 0 16px; } .ts-score-track {
height:10px;
background:rgba(255,255,255,.25);
border:1px solid rgba(255,255,255,.3);
border-radius:10px;
overflow:hidden;
margin-bottom:8px;
}
.ts-score-bar { height:100%; border-radius:10px; transition:width 1s cubic-bezier(.4,0,.2,1); }
.ts-score-labels { display:flex; justify-content:space-between; margin-bottom:14px; }
.ts-score-edge { color:#ffffff; font-size:10px; font-weight:600; }
.ts-score-value { font-size:12px; font-weight:700; }
.ts-result-desc { color:#ffffff; font-size:13px; line-height:1.6; margin:0; } .ts-diagnostic-box {
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
border-radius:14px; padding:16px 18px; margin-bottom:18px;
}
.ts-diagnostic-title {
color:#ffffff; font-size:10px; font-weight:700;
letter-spacing:2px; text-transform:uppercase; margin:0 0 10px;
display:flex; align-items:center; gap:6px;
}
.ts-diagnostic-text { color:#ffffff; font-size:13px; line-height:1.65; margin:0; } .ts-reco-box {
background:rgba(18,157,57,.08); border:1px solid rgba(18,157,57,.25);
border-radius:14px; padding:16px 18px; margin-bottom:18px;
}
.ts-reco-title { color:var(--ts-green); font-size:11px; font-weight:700; letter-spacing:2px; margin:0 0 14px; }
.ts-reco-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.ts-reco-item:last-child { margin-bottom:0; }
.ts-reco-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.ts-reco-text { color:#ffffff; font-size:13px; line-height:1.55; } .ts-actions-row { display:flex; gap:10px; margin-bottom:12px; }
.ts-actions-row > * { flex:1; } .ts-btn-primary {
background:linear-gradient(135deg,var(--ts-green),#0d8030); color:#fff;
border:none; border-radius:12px; padding:14px 0;
font-size:15px; font-weight:700;
font-family:Impact,'Arial Narrow',Arial,sans-serif;
letter-spacing:2px; text-transform:uppercase;
cursor:pointer; width:100%;
box-shadow:0 4px 20px rgba(18,157,57,.4);
transition:transform .15s,box-shadow .15s;
}
.ts-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(18,157,57,.6); }
.ts-btn-primary:disabled { background:rgba(255,255,255,.1); color:rgba(255,255,255,.3); box-shadow:none; cursor:not-allowed; transform:none; } .ts-btn-pdf {
background:linear-gradient(135deg, var(--ts-green), #0a6e25);
border:none;
color:#ffffff !important;
border-radius:12px; padding:13px 0;
font-size:13px; font-weight:700;
font-family:Impact,'Arial Narrow',Arial,sans-serif;
letter-spacing:1.5px; text-transform:uppercase;
cursor:pointer; width:100%;
display:flex; align-items:center; justify-content:center; gap:7px;
box-shadow:0 4px 16px rgba(18,157,57,.45);
transition:transform .15s, box-shadow .15s;
}
.ts-btn-pdf:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(18,157,57,.6); }
.ts-btn-pdf.ts-loading-pdf { opacity:.7; cursor:not-allowed; transform:none; } .ts-btn-cta {
background:linear-gradient(135deg,var(--ts-green),#0a6e25); color:#ffffff !important;
border:none; border-radius:10px; padding:14px 0;
font-size:14px; font-weight:700;
font-family:Impact,'Arial Narrow',Arial,sans-serif;
letter-spacing:1.5px; text-transform:uppercase;
cursor:pointer; width:100%; text-decoration:none !important;
display:block; text-align:center;
box-shadow:0 4px 20px rgba(18,157,57,.45);
transition:transform .15s,box-shadow .15s;
}
.ts-btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(18,157,57,.65); color:#ffffff !important; text-decoration:none !important; }
.ts-btn-cta:visited { color:#ffffff !important; }
.ts-btn-reset {
background:transparent; color:rgba(255,255,255,.5);
border:1px solid rgba(255,255,255,.2);
border-radius:10px; padding:10px 0;
font-size:12px; font-family:inherit;
cursor:pointer; width:100%; letter-spacing:1px;
transition:color .2s,border-color .2s;
}
.ts-btn-reset:hover { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.4); } .ts-cta-box {
background:linear-gradient(135deg,rgba(22,70,35,.9),rgba(18,157,57,.2));
border:1px solid rgba(18,157,57,.5);
border-radius:14px; padding:20px 20px 22px;
text-align:center; margin-bottom:12px;
}
.ts-cta-title { color:#fff; font-weight:700; font-size:16px; margin:0 0 6px; }
.ts-cta-desc  { color:#ffffff; font-size:13px; margin:0 0 14px; } .ts-error {
background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
border-radius:12px; padding:14px 16px;
color:rgba(255,255,255,.7); font-size:13px; line-height:1.5;
margin-bottom:16px; display:flex; gap:10px; align-items:flex-start;
} .ts-footer { text-align:center; margin-top:20px; color:rgba(255,255,255,.15); font-size:11px; letter-spacing:1px; } @media (max-width:480px) {
#ts-audit { padding:24px 16px 30px; }
.ts-card { padding:24px 16px; }
.ts-logo-white, .ts-logo-green { font-size:22px; }
.ts-result-label { font-size:26px; }
.ts-actions-row { flex-direction:column; }
}