:root{
    --bg:#f5f7fb;
    --ink:#172033;
    --muted:#6b7280;
    --line:#e4e8f0;
    --card:#fff;
    --brand:#6d4aff;
    --dark:#121827;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit}
img,svg,video,canvas{max-width:100%;height:auto}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
aside{display:flex;flex-direction:column;gap:30px;padding:28px 20px;background:var(--dark);color:#fff}
.mobile-topbar{display:block}
.brand{font-size:20px;font-weight:900;letter-spacing:.08em}
.brand span{color:#8f78ff}
.menu-toggle{display:none}
nav{display:grid;gap:8px}
nav a,.aside-bottom a{padding:11px 12px;border-radius:10px;color:#d7dcec;text-decoration:none}
nav a:hover{background:#222c41}
.aside-bottom{display:grid;gap:8px;margin-top:auto}

main{min-width:0;padding:0 34px 40px}
main>header{display:flex;align-items:center;justify-content:space-between;gap:16px;height:88px}
h1,h2,h3{margin-top:0}

.pill,.badge{padding:7px 11px;border-radius:999px;background:#eeeaff;color:#5136cc;font-size:12px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}
.stats article,.panel{min-width:0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 25px rgba(20,28,45,.04)}
.stats strong{display:block;margin-top:10px;font-size:34px}
.stats small,.muted,small{color:var(--muted)}
.panel-head,.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head>*,.list-row>*{min-width:0}
.list{display:grid}
.list-row{padding:14px 0;border-bottom:1px solid var(--line)}
.list-row div{display:grid;gap:4px}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px}
.cards,.timeline{display:grid;gap:12px}
.timeline{gap:10px}
.service-card,.workspace-card,.event{min-width:0;padding:16px;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:14px;background:#fff}
.workspace-card h3{margin:12px 0 6px}
.event{display:grid;gap:5px;border-left:4px solid var(--brand)}

form{display:grid;min-width:0;gap:14px}
label{display:grid;min-width:0;gap:7px;font-size:13px;font-weight:700}
input,select,textarea{width:100%;max-width:100%;padding:11px 12px;border:1px solid #d6dce7;border-radius:10px;background:#fff;font:inherit}
textarea{min-height:95px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
button,.button{max-width:100%;padding:12px 15px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}
.button.secondary{background:#ece9ff;color:#4b32bd}

.password-wrapper{position:relative;width:100%}
.password-wrapper input{padding-right:50px}
.password-toggle{position:absolute;top:50%;right:8px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.password-toggle:hover{background:#f1efff;color:var(--brand)}
.password-toggle:focus-visible{outline:2px solid #c7bcff;outline-offset:1px}

.auth{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,#111827,#382c84)}
.auth-card{width:min(420px,92vw);padding:30px;border-radius:22px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.auth-card.wide{width:min(680px,92vw)}
.auth-card .brand{margin-bottom:24px;color:var(--dark)}
.auth-card p{color:var(--muted);text-align:center}
.alert{padding:12px;border-radius:10px;background:#fff0f0;color:#a42424}

.business-preview{display:grid;width:100%;max-width:100%;min-width:0;gap:12px;padding:22px;overflow:hidden;border:1px solid var(--line);border-top:6px solid var(--preview-primary,var(--brand));border-radius:18px;background:#fafbff}
.business-preview h3{margin:0;color:var(--preview-secondary,var(--dark))}
.business-preview hr{width:100%;margin:0;border:0;border-top:1px solid var(--line)}

.current-logo.compact{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:0;padding:8px 0;border:0;background:transparent}
.current-logo.compact img{display:block;width:auto;max-width:120px;max-height:64px;object-fit:contain}

.preview-logo{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;margin-bottom:16px;overflow:hidden}
.preview-logo img{display:block;width:auto;max-width:100%;height:auto;max-height:110px;object-fit:contain}

.appointment-team{display:flex;align-items:center;gap:7px}
.team-color{display:inline-block;width:10px;height:10px;flex:0 0 10px;border-radius:50%}

@media(max-width:850px){
    .shell{display:block;width:100%}
    aside{width:100%;padding:16px 18px;gap:0}
    .mobile-topbar{display:flex;align-items:center;justify-content:space-between;width:100%}
    .menu-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:10px;background:#1b2436;color:#fff;font-size:22px}
    aside nav{display:none;width:100%;margin-top:14px}
    aside.menu-open nav{display:grid;grid-template-columns:1fr;gap:6px}
    aside nav a{width:100%;padding:12px;text-align:left;white-space:normal}
    .aside-bottom{display:none}
    main{width:100%;padding:0 12px 24px}
    main>header{flex-wrap:wrap;height:auto;min-height:72px;padding:16px 0}
    .stats,.split,.grid2{grid-template-columns:minmax(0,1fr)}
    .panel{padding:16px;border-radius:14px}
    .panel-head,.list-row{flex-direction:column;align-items:flex-start}
    .panel-head .button{width:100%;text-align:center}
    .list-row time{width:100%}
    .auth-card,.auth-card.wide{width:calc(100vw - 24px);padding:22px 18px}
}
.portal-page{
    min-height:100vh;
    margin:0;
    background:
        radial-gradient(circle at top,#ffffff 0,#f3f4fa 55%,#e8eaf3 100%);
}

.appointment-portal{
    display:grid;
    place-items:center;
    min-height:100vh;
    padding:24px;
}

.appointment-card{
    width:min(560px,100%);
    overflow:hidden;
    border:1px solid var(--line);
    border-top:7px solid var(--portal-primary);
    border-radius:24px;
    background:#fff;
    box-shadow:0 30px 80px rgba(20,28,45,.14);
}

.portal-brand{
    padding:28px 26px 20px;
    text-align:center;
}

.portal-brand img{
    display:block;
    width:auto;
    max-width:180px;
    max-height:100px;
    margin:0 auto 18px;
    object-fit:contain;
}

.portal-brand h1{
    margin:0;
    color:var(--portal-secondary);
}

.portal-brand p{
    margin:10px 0 0;
    color:var(--muted);
}

.portal-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px;
    font-weight:700;
}

.portal-status.scheduled{
    background:#eef3ff;
    color:#2962ff;
}

.portal-status.confirmed{
    background:#ecfff2;
    color:#15803d;
}

.portal-status.arrived{
    background:#fff8e6;
    color:#b7791f;
}

.portal-status.completed{
    background:#eefbf2;
    color:#0f9d58;
}

.portal-status.cancelled{
    background:#fff0f0;
    color:#c62828;
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
}

.portal-date{
    display:grid;
    gap:6px;
    padding:24px;
    text-align:center;
    border-bottom:1px solid var(--line);
}

.portal-date span{
    color:var(--muted);
}

.portal-date strong{
    color:var(--portal-secondary);
    font-size:34px;
}

.portal-details{
    display:grid;
    gap:0;
    padding:0 24px;
}

.portal-detail{
    display:grid;
    gap:5px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
}

.portal-detail small{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.portal-actions{
    display:grid;
    gap:10px;
    padding:24px;
}

.portal-button{
    display:block;
    padding:13px 16px;
    border-radius:11px;
    background:var(--portal-primary);
    color:#fff;
    font-weight:800;
    text-align:center;
    text-decoration:none;
}

.portal-button.secondary{
    background:#eef0f7;
    color:var(--portal-secondary);
}

.portal-link{
    padding:8px;
    color:var(--portal-primary);
    font-weight:700;
    text-align:center;
    text-decoration:none;
}

.portal-footer{
    padding:0 24px 24px;
    text-align:center;
}
.portal-button.danger,
.button.danger{
    background:#fff0f0;
    color:#a42424;
}

.portal-cancel-form{
    padding:24px;
}
.event-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.appointment-status{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.status-scheduled{
    background:#eef3ff;
    color:#2962ff;
}

.status-confirmed{
    background:#ecfff2;
    color:#15803d;
}

.status-arrived{
    background:#fff8e6;
    color:#a16207;
}

.status-completed{
    background:#ecfdf5;
    color:#047857;
}

.status-cancelled,
.status-no_show{
    background:#fff0f0;
    color:#b42318;
}

.event-status-cancelled{
    border-left-color:#b42318;
    opacity:.72;
}

.event-status-cancelled strong{
    text-decoration:line-through;
}

.cancellation-reason{
    color:#b42318;
}