*{
box-sizing:border-box;
}
html{
width:100%;
max-width:100%;
overflow-x:hidden;
scroll-behavior:smooth;
}
body{
margin:0;
width:100%;
max-width:100%;
overflow-x:hidden;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color:#172033;
background:#f4f7fb;
}
img,
svg,
video{
max-width:100%;
height:auto;
}
a{
color:#155eef;
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/* ==========================
CONTAINER
========================== */
.container{
width:
min(1180px,calc(100% - 32px));
margin:auto;
}
.narrow{
width:
min(760px,calc(100% - 32px));
}
.public-bg{
min-height:100vh;
background:
linear-gradient(
145deg,
#eef4ff 0,
#f8fafc 45%,
#ecfdf5 100%
);
}
/* ==========================
HERO
========================== */
.hero{
padding:
64px 0 95px;
background:
linear-gradient(
135deg,
#123a7a,
#155eef 60%,
#0e9384
);
color:white;
overflow:hidden;
}
.hero h1{
font-size:
clamp(2rem,5vw,3.5rem);
margin:
.25rem 0 .7rem;
line-height:1.2;
}
.hero p{
font-size:1.08rem;
opacity:.92;
max-width:650px;
line-height:1.7;
}
.eyebrow{
text-transform:uppercase;
letter-spacing:.15em;
font-size:.78rem;
font-weight:800;
}
/* ==========================
CONTENT
========================== */
.content-lift{
margin-top:-55px;
padding-bottom:50px;
}
.card{
width:100%;
max-width:100%;
background:white;
border:
1px solid #e4e7ec;
border-radius:18px;
padding:26px;
box-shadow:
0 12px 38px rgba(16,24,40,.08);
overflow:hidden;
}
h1,
h2,
h3{
line-height:1.2;
}
h1{
margin-top:0;
}
h2{
font-size:1.2rem;
margin-top:0;
}
/* ==========================
FORM
========================== */
.form-stack{
display:grid;
gap:18px;
width:100%;
}
.form-stack label{
display:grid;
gap:7px;
width:100%;
font-weight:650;
color:#344054;
}
.form-stack small{
font-weight:400;
}
input,
select,
textarea{
width:100%;
max-width:100%;
min-width:0;
border:
1px solid #cfd6e4;
background:#fff;
border-radius:10px;
padding:
12px 13px;
font:
inherit;
color:#101828;
outline:none;
}
input:focus,
select:focus,
textarea:focus{
border-color:#155eef;
box-shadow:
0 0 0 4px rgba(21,94,239,.12);
}
textarea{
resize:vertical;
}
/* ==========================
BUTTON
========================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
padding:
11px 16px;
font:inherit;
font-weight:750;
cursor:pointer;
text-decoration:none;
}
.btn:hover{
filter:brightness(.98);
}
.btn.primary{
background:#155eef;
color:#fff;
}
.btn.secondary{
background:#eef2f6;
color:#344054;
}
.btn.danger{
background:#fee4e2;
color:#b42318;
}
.btn.large{
padding:
14px 20px;
font-size:1.05rem;
}
.btn.small{
padding:
7px 10px;
font-size:.85rem;
}
/* ==========================
ALERT
========================== */
.alert{
padding:
13px 15px;
border-radius:10px;
margin-bottom:18px;
}
.alert.error{
background:#fef3f2;
color:#b42318;
border:
1px solid #fecdca;
}
.alert.success{
background:#ecfdf3;
color:#027a48;
border:
1px solid #abefc6;
}
.alert.warning{
background:#fffaeb;
color:#b54708;
border:
1px solid #fedf89;
}
.alert ul{
margin:.5rem 0 0;
padding-left:20px;
}
.muted{
color:#667085;
}
.block{
display:block;
}
/* ==========================
FOOTER
========================== */
.privacy-note,
.public-footer{
font-size:.88rem;
color:#667085;
text-align:center;
}
.public-footer{
padding:25px;
}
/* ==========================
SESSION PUBLIC
========================== */
.session-summary{
padding-bottom:22px;
margin-bottom:24px;
border-bottom:
1px solid #eaecf0;
}
.session-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:10px;
}
.session-chip{
display:grid;
gap:2px;
padding:12px;
background:#eff8ff;
border:
1px solid #b2ddff;
border-radius:11px;
}
.session-chip span{
font-weight:700;
color:#175cd3;
}
.session-chip small{
color:#026aa2;
}
.session-chip.full{
background:#f2f4f7;
border-color:#e4e7ec;
}
.session-chip.full span,
.session-chip.full small{
color:#667085;
}
/* ==========================
SUCCESS PAGE
========================== */
.success-card{
text-align:center;
}
.success-icon{
width:68px;
height:68px;
border-radius:50%;
display:grid;
place-items:center;
background:#dcfae6;
color:#079455;
font-size:2rem;
font-weight:900;
margin:
0 auto 18px;
}
.ticket{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:12px;
text-align:left;
background:#f8fafc;
padding:18px;
border-radius:14px;
margin:22px 0;
}
.ticket div{
display:grid;
gap:3px;
}
.ticket span{
font-size:.82rem;
color:#667085;
}
.ticket strong{
font-size:1rem;
}
/* =================================================
ADMIN AREA
================================================= */
.admin-topbar{
background:#101828;
color:#fff;
}
.admin-nav{
min-height:66px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.admin-nav .brand{
color:#fff;
font-weight:850;
font-size:1.1rem;
}
.admin-nav nav{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.admin-nav nav a{
color:#d0d5dd;
font-weight:650;
font-size:.92rem;
}
.page-heading{
margin-bottom:18px;
}
.page-heading h1{
margin:0;
}
/* ==========================
DASHBOARD
========================== */
.stats-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:16px;
margin-bottom:18px;
}
.stat-card{
background:#fff;
border:
1px solid #e4e7ec;
border-radius:16px;
padding:20px;
display:grid;
gap:8px;
}
.stat-card span{
color:#667085;
font-weight:650;
}
.stat-card strong{
font-size:2rem;
}
/* ==========================
GRID SYSTEM
========================== */
.two-column{
display:grid;
grid-template-columns:
1fr 1fr;
gap:18px;
}
.questions-layout{
display:grid;
grid-template-columns:
minmax(0,.75fr)
minmax(0,1.45fr);
gap:18px;
}
.session-admin-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:16px;
}
.session-edit-card{
border:
1px solid #e4e7ec;
border-radius:14px;
padding:18px;
display:grid;
gap:13px;
}
.session-edit-card h2{
margin:0;
}
.occupancy{
margin:-6px 0 3px;
color:#155eef;
font-weight:800;
}
.time-pair{
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
}
/* ==========================
TABLE
========================== */
.table-wrap{
width:100%;
overflow:auto;
}
table{
width:100%;
border-collapse:collapse;
font-size:.92rem;
}
th,
td{
text-align:left;
padding:12px 10px;
border-bottom:
1px solid #eaecf0;
vertical-align:top;
}
th{
color:#475467;
background:#f9fafb;
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.03em;
}
.actions{
display:flex;
gap:6px;
white-space:nowrap;
}
.actions form{
display:inline;
}
/* ==========================
FILTER
========================== */
.toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin-bottom:16px;
}
.filter-form{
display:flex;
gap:9px;
flex:1;
}
.filter-form input{
max-width:380px;
}
.filter-form select{
max-width:180px;
}
/* =================================================
LOGIN
================================================= */
.login-wrap{
min-height:100vh;
display:grid;
place-items:center;
}
.login-card{
width:min(440px,100%);
}
/* ==========================
ANSWER DETAIL
========================== */
.answer-list{
margin:22px 0 0;
}
.answer-list>div{
display:grid;
grid-template-columns:
220px 1fr;
gap:20px;
padding:13px 0;
border-bottom:
1px solid #eaecf0;
}
.answer-list dt{
font-weight:800;
color:#344054;
}
.answer-list dd{
margin:0;
}
.admin-ticket{
grid-template-columns:
repeat(4,1fr);
}
code{
background:#f2f4f7;
border-radius:6px;
padding:2px 5px;
}
/* =====================================================
MOBILE RESPONSIVE FINAL
===================================================== */
@media(max-width:900px){
.two-column,
.questions-layout{
grid-template-columns:
1fr;
}
.session-admin-grid{
grid-template-columns:
repeat(2,1fr);
}
.admin-ticket{
grid-template-columns:
repeat(2,1fr);
}
}
@media(max-width:650px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.container,
.narrow{
width:
calc(100% - 24px);
}
.hero{
padding:
45px 0 80px;
}
.hero h1{
font-size:28px;
}
.hero p{
font-size:14px;
line-height:1.6;
}
.content-lift{
margin-top:-45px;
}
.card{
padding:18px;
border-radius:16px;
}
/* ==========================
FORM MOBILE
========================== */
.form-stack{
gap:16px;
}
.form-stack label{
gap:8px;
font-size:14px;
}
input,
select,
textarea{
width:100%;
max-width:100%;
min-width:0;
font-size:16px;
padding:
13px 14px;
border-radius:14px;
}
textarea{
min-height:120px;
}
.btn.large,
button[type="submit"]{
width:100%;
height:50px;
}
.privacy-note{
font-size:12px;
line-height:1.6;
}
/* ==========================
WELCOME POPUP MOBILE
========================== */
.welcome-overlay{
width:100vw;
max-width:100vw;
padding:16px;
}
.welcome-box{
width:
calc(100vw - 32px);
max-width:390px;
border-radius:24px;
padding:
28px 20px 24px;
}
.welcome-logo{
width:110px;
height:75px;
}
.welcome-title{
font-size:22px;
line-height:1.3;
}
.welcome-text{
font-size:13px;
line-height:1.6;
}
.welcome-info{
padding:15px;
font-size:12px;
line-height:1.6;
}
.welcome-btn{
height:48px;
font-size:13px;
}
/* ==========================
MOBILE GRID
========================== */
.session-grid,
.stats-grid,
.session-admin-grid{
grid-template-columns:
1fr;
}
.ticket{
grid-template-columns:
1fr;
}
.toolbar,
.filter-form{
flex-direction:column;
align-items:stretch;
}
.filter-form input,
.filter-form select{
max-width:none;
}
.answer-list>div{
grid-template-columns:
1fr;
gap:5px;
}
.admin-nav{
flex-direction:column;
align-items:flex-start;
padding:
16px 0;
}
.admin-nav nav{
gap:12px;
}
.table-wrap{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
table{
min-width:700px;
}
.actions{
flex-wrap:wrap;
}
}
@media(max-width:360px){
.hero h1{
font-size:24px;
}
.welcome-title{
font-size:20px;
}
.welcome-box{
padding:
24px 16px;
}
.btn{
font-size:13px;
}
}