:root{

--bg:#0f172a;
--card:#1e293b;
--border:#334155;
--text:#f8fafc;
--accent:#38bdf8;
--success:#22c55e;
--danger:#ef4444;
--warning:#f59e0b;

}

.help-center-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
}

.help-center-heading span{color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;}
.help-center-heading h2{margin:6px 0;}
.help-center-heading p{color:#cbd5e1;}
.help-youtube-link{display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--accent);border-radius:6px;color:var(--text);font-weight:700;text-decoration:none;}
.help-video-frame{width:min(100%,1000px);aspect-ratio:16 / 9;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:#020617;}
.help-video-frame iframe{width:100%;height:100%;border:0;}

@media(max-width:640px){
.help-center-heading{align-items:start;flex-direction:column;}
}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;
overflow-x:hidden;

}

body{

background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
min-height:100vh;
overflow-x:hidden;

}

/* LOGIN */

#login{

min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;

}

.login-card{

width:100%;
max-width:420px;

}

.login-card > button{

width:100%;
margin-bottom:10px;

}

.login-wide{

max-width:none;
grid-column:1 / -1;

}

.recovery-card{

max-width:420px;

}

.login-shell{

width:100%;
max-width:1180px;

}

.login-grid{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:16px;
align-items:start;

}

.admin-login-card{

grid-column:1 / -1;
max-width:420px;

}

.login-message{

background:rgba(239,68,68,.14);
border:1px solid rgba(239,68,68,.45);
color:#fecaca;
border-radius:8px;
padding:12px;
margin-bottom:14px;

}

.login-message.is-success{

background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.45);
color:#bbf7d0;

}

.subtitulo{

opacity:.8;
margin-top:8px;
margin-bottom:20px;

}

/* HEADER */

header{

padding:15px;
border-bottom:1px solid var(--border);

}

header h1{

font-size:28px;

}

.session-info{

font-size:13px;
opacity:.78;
margin-top:6px;

}

/* MENU */

nav{

display:flex;
gap:10px;
padding:15px;
overflow-x:auto;
overflow-y:hidden;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:10;
background:var(--bg);
scrollbar-width:thin;
width:100%;
max-width:100vw;
-webkit-overflow-scrolling:touch;
overscroll-behavior-inline:contain;

}

nav button{

min-width:max-content;
white-space:nowrap;
padding:10px 14px;
flex:0 0 auto;

}

/* MAIN */

main{

padding:15px;

}

/* CARDS */

.card{

background:var(--card);
border:1px solid var(--border);
border-radius:8px;
padding:16px;
margin-bottom:16px;

}

.subpanel,
.history-item,
.info-box{

background:#111827;
border:1px solid var(--border);
border-radius:8px;
padding:12px;
margin-top:12px;

}

.history-item{

margin-bottom:12px;

}

/* TÍTULOS */

h1{

margin-bottom:8px;

}

h2{

margin-bottom:15px;

}

h3{

margin-bottom:12px;

}

/* FORMULÁRIOS */

input,
select{

width:100%;
padding:12px;
border-radius:8px;
border:1px solid var(--border);
background:#111827;
color:var(--text);
margin-bottom:10px;

}

input[type="checkbox"]{

width:auto;
margin:0;

}

input[type="file"]{

padding:10px;

}

.checkbox-row{

display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;

}

.form-action{

display:flex;
align-items:flex-end;

}

.field-hint,
.muted{

font-size:12px;
opacity:.75;

}

.field-hint{

margin-top:-6px;
margin-bottom:10px;

}

input:focus,
select:focus{

outline:none;
border-color:var(--accent);

}

/* BOTÕES */

button{

padding:12px;
border:none;
border-radius:8px;
cursor:pointer;
background:var(--accent);
color:white;
font-weight:bold;
transition:.2s;

}

button:hover{

opacity:.9;

}

.btn-danger{

background:var(--danger);

}

.btn-success{

background:var(--success);

}

.btn-warning{

background:var(--warning);

}

.btn-secondary{

background:#475569;

}

.button-row{

display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;

}

.button-row button{

flex:1 1 160px;

}

/* GRID */

.grid{

display:grid;
gap:10px;

}

.grid-2{

display:grid;
grid-template-columns:1fr 1fr;
gap:10px;

}

.grid-3{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;

}

.grid-4{

display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
gap:10px;

}

/* TABELAS */

table{

width:100%;
border-collapse:collapse;
margin-top:10px;

}

thead{

background:#111827;

}

th{

padding:12px;
text-align:left;
border-bottom:1px solid var(--border);

}

td{

padding:10px;
border-bottom:1px solid var(--border);

}

.table-input{

min-width:70px;
margin-bottom:0;

}

.table-actions{

display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap;

}

.admin-actions{

min-width:620px;

}

.access-period-control{

display:flex;
align-items:flex-end;
gap:6px;
padding:7px;
border:1px solid var(--border);
border-radius:8px;
background:#111827;

}

.access-period-control label{

display:grid;
gap:4px;
color:#cbd5e1;
font-size:11px;
font-weight:700;

}

.access-period-control input{

width:140px;
min-height:38px;

}

.access-period-control input[type="number"]{

width:84px;

}

.access-period-control button{

min-height:38px;
white-space:nowrap;

}

.compact-list{

margin:8px 0 0 18px;

}

.compact-table th,
.compact-table td{

padding:8px;
font-size:13px;

}

.report-details{

margin-top:12px;

}

.report-details summary{

cursor:pointer;
font-weight:bold;
margin-bottom:8px;

}

/* RESPONSIVO TABELA */

.table-responsive{

overflow-x:auto;
width:100%;
-webkit-overflow-scrolling:touch;

}

/* BADGES */

.badge{

padding:5px 10px;
border-radius:999px;
font-size:12px;
font-weight:bold;

}

.badge-success{

background:rgba(34,197,94,.2);
color:#22c55e;

}

.badge-warning{

background:rgba(245,158,11,.2);
color:#f59e0b;

}

.badge-danger{

background:rgba(239,68,68,.2);
color:#ef4444;

}

/* DASHBOARD */

.kpi{

background:#111827;
border:1px solid var(--border);
border-radius:10px;
padding:15px;

}

.kpi-label{

font-size:13px;
opacity:.7;

}

.kpi-value{

font-size:24px;
font-weight:bold;
margin-top:5px;

}

.selected-store{

display:flex;
align-items:center;
justify-content:space-between;
gap:12px;

}

.start-panel{

display:flex;
align-items:center;
justify-content:space-between;
gap:12px;

}

.action-grid{

display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;

}

.start-action{

display:grid;
grid-template-columns:auto 1fr auto;
gap:10px;
align-items:center;
text-align:left;
background:#111827;
border:1px solid var(--border);
color:var(--text);

}

.start-action.is-done{

border-color:rgba(34,197,94,.45);

}

.start-action small{

display:block;
font-weight:normal;
opacity:.72;
margin-top:4px;

}

.step-number{

display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:999px;
background:var(--accent);
font-weight:bold;

}

.admin-filter-bar{

margin-bottom:10px;

}

/* SCROLL */

::-webkit-scrollbar{

width:8px;
height:8px;

}

::-webkit-scrollbar-thumb{

background:#475569;
border-radius:999px;

}

/* MOBILE */

@media(max-width:768px){

header h1{

font-size:22px;

}

main{

padding:10px;

}

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.login-grid{

grid-template-columns:1fr;

}

.admin-login-card{

max-width:none;

}

.selected-store{

display:block;

}

.start-panel{

display:block;

}

.selected-store button{

margin-top:10px;

}

.start-panel button{

margin-top:10px;

}

.action-grid{

grid-template-columns:1fr;

}

.start-action{

grid-template-columns:auto 1fr;

}

.start-action .badge{

grid-column:2;
justify-self:start;

}

nav{

gap:8px;
padding:10px;
align-items:center;

}

nav button{

width:auto;
min-width:auto;
min-height:42px;
padding:9px 12px;
font-size:13px;

}

table{

font-size:13px;

}

.table-responsive table{

min-width:720px;

}

.table-responsive table.compact-table{

min-width:640px;

}

.card{

padding:12px;

}

.kpi{

padding:12px;

}

.kpi-value{

font-size:20px;

}

}

/* MOBILE EXTRA */

@media(max-width:480px){

body{

font-size:14px;

}

input,
select,
button{

font-size:14px;

}

nav{

padding:8px;
gap:6px;

}

nav button{

min-height:40px;
padding:8px 10px;
font-size:12px;

}

header{

padding:10px;

}

main{

padding:8px;

}

.card{

padding:10px;
margin-bottom:10px;

}

}