.orcas-app{
--orcas-bg:#ffffff;
--orcas-card:#ffffff;
--orcas-text:#111827;
--orcas-muted:#6b7280;
--orcas-border:#e5e7eb;
--orcas-primary:#3EA149;
--orcas-accent:#72BA5D;
--orcas-accent-2:#A5CB6C;
--orcas-radius:18px;
--orcas-shadow:0 10px 30px rgba(62,161,73,.10);
--orcas-shadow-2:0 6px 18px rgba(62,161,73,.08);
--orcas-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
font-family:var(--orcas-font);
color:var(--orcas-text);
font-size:15px;
line-height:1.55;
}
.orcas-app *{box-sizing:border-box;}
.orcas-app{
background:#fff;
border-radius:calc(var(--orcas-radius) + 4px);
padding:10px;
}
@media (min-width: 980px){
.orcas-app{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:22px;
align-items:start;
}
}
@media (max-width: 979px){
.orcas-app{
display:block;
}
}
.orcas-main{min-width:0;}
.orcas-sidebar{position:sticky; top:18px;}
@media (max-width: 979px){ .orcas-sidebar{position:relative; top:auto; margin-top:16px;} }
.orcas-panel{
width: 100% !important;
max-width: 100% !important;
background:var(--orcas-card);
border:1px solid var(--orcas-border);
border-radius:var(--orcas-radius);
box-shadow:var(--orcas-shadow);
padding:18px;
}
.orcas-title{
font-size:26px;
line-height:1.2;
margin:0 0 10px;
letter-spacing:-0.02em;
}
.orcas-muted{
color:var(--orcas-muted);
font-size:13px;
line-height:1.35;
}
.orcas-divider{
height:1px;
background:var(--orcas-border);
margin:14px 0;
}
.orcas-kv .row{
display:flex;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:1px dashed rgba(229,231,235,.9);
}
.orcas-kv .row:last-child{border-bottom:none;}
.orcas-kv .key{color:var(--orcas-muted); font-size:12px;}
.orcas-kv .val{font-weight:600; font-size:13px; max-width:220px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.orcas-progress{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.orcas-progressbar{
flex:1;
height:10px;
background:rgba(165,203,108,.18);
border:1px solid rgba(229,231,235,.9);
border-radius:999px;
overflow:hidden;
}
#orcas_progress_bar{
height:100%;
width:0%;
background:linear-gradient(90deg, var(--orcas-accent), var(--orcas-accent-2));
border-radius:999px;
transition:width .25s ease;
}
.orcas-pct{
font-weight:700;
font-size:14px;
color:var(--orcas-primary);
min-width:48px;
text-align:right;
}
.orcas-btn{
appearance:none;
border:1px solid var(--orcas-border);
background:#fff;
color:var(--orcas-primary);
border-radius:12px;
padding:10px 12px;
font-weight:650;
font-size:14px;
line-height:1;
cursor:pointer;
box-shadow:0 2px 8px rgba(62,161,73,.10);
transition:transform .06s ease, box-shadow .12s ease, background .12s ease;
}
.orcas-btn:hover{box-shadow:0 8px 18px rgba(62,161,73,.16);}
.orcas-btn:active{transform:translateY(1px);}
.orcas-btn.primary{
background:var(--orcas-primary);
border-color:var(--orcas-primary);
color:#fff;
}
.orcas-btn.secondary{
background:#fff;
}
.orcas-btn:disabled{
opacity:.55;
cursor:not-allowed;
box-shadow:none;
}
.orcas-footer-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
@media (max-width: 420px){
.orcas-footer-actions{grid-template-columns:1fr;}
}
.orcas-step{display:none;}
.orcas-step.active{display:block;}
.orcas-step-header{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-end;
margin-bottom:12px;
}
.orcas-step-title{
font-size:18px;
font-weight:750;
letter-spacing:-0.01em;
}
.orcas-step-meta{
color:var(--orcas-muted);
font-size:12px;
display:block;
width:100%;
text-align:left;
}
@media (max-width: 700px){
.orcas-step-header{
display:block;
}
.orcas-step-meta{
margin-top:4px;
}
}
.orcas-question{
background:#ffffff;
border:1px solid var(--orcas-border);
border-radius:16px;
padding:14px;
box-shadow:var(--orcas-shadow-2);
margin-bottom:12px;
}
.orcas-question-head{
display:block;
text-align:left;
margin-bottom:10px;
}
.orcas-question-head strong{
font-size:16px;
letter-spacing:-0.01em;
}
.orcas-question-head .orcas-muted{margin-top:2px;}
.orcas-options{
display:grid;
gap:8px;
}
.orcas-measure-other-wrap{
margin:6px 0 12px 30px;
}
.orcas-measure-other-input{
width:min(100%, 420px);
}
.orcas-option{
display:flex;
align-items:flex-start;
gap:10px;
padding:10px 10px;
border:1px solid rgba(229,231,235,.95);
border-radius:14px;
background:#fff;
}
.orcas-option:hover{border-color:#d1d5db;}
.orcas-option input{margin-top:2px;}
.orcas-survey-inputwrap{
margin-top:8px;
}
.orcas-input{
width:100%;
border:1px solid var(--orcas-border);
border-radius:12px;
padding:10px 12px;
font-size:14px;
line-height:1.35;
background:#fff;
}
.orcas-input:focus{
outline:none;
border-color:rgba(62,161,73,.6);
box-shadow:0 0 0 3px rgba(114,186,93,.18);
}
.orcas-notes{
margin-top:10px;
display:none;
}
.orcas-notes.visible{display:block;}
.orcas-alert{
border-radius:14px;
padding:12px;
border:1px solid var(--orcas-border);
background:#fff;
}
.orcas-alert.info{
border-color:rgba(62,161,73,.28);
background:rgba(165,203,108,.16);
}
.orcas-alert.error{
border-color:rgba(220,38,38,.25);
background:rgba(220,38,38,.06);
}
.orcas-missing{
border-color:rgba(220,38,38,.35) !important;
box-shadow:0 6px 18px rgba(220,38,38,.10) !important;
} .orcas-review-missing .orcas-step{display:none;}
.orcas-review-missing .orcas-step.orcas-has-missing{display:block;}
.orcas-review-missing .orcas-step.active{display:block;} .orcas-review-missing .orcas-survey-question:not(.orcas-missing){display:none;} .orcas-toast{
position:fixed;
left:50%;
bottom:22px;
transform:translateX(-50%) translateY(10px);
opacity:0;
background:rgba(17,24,39,.92);
color:#fff;
padding:10px 14px;
border-radius:999px;
font-size:13px;
font-weight:650;
box-shadow:0 14px 40px rgba(17,24,39,.18);
transition:opacity .18s ease, transform .18s ease;
z-index:99999;
}
.orcas-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}