: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:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;max-width:100%;padding:11px 12px;border:1px solid #d6dce7;border-radius:10px;background:#fff;font:inherit}
input[type="checkbox"],input[type="radio"]{width:auto;max-width:none;padding:0}
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;}
.team-member-photo{display:block;
    width:100%;
    max-width:220px;
    aspect-ratio:4/5;
    margin-bottom:14px;
    border-radius:14px;
    object-fit:cover;}

/* =========================================================
   IANUVI AUTH / LOGIN
   Dedicated styles: isolated from the back-office layout.
========================================================= */

.ianuvi-auth{
    min-height:100vh;
    background:
        radial-gradient(circle at 50% 0%,rgba(86,76,255,.18),transparent 34%),
        radial-gradient(circle at 85% 65%,rgba(0,211,218,.08),transparent 30%),
        linear-gradient(160deg,#07101f 0%,#0a1426 48%,#07101d 100%);
    color:#fff;
}

.ianuvi-login-wrap{
    display:grid;
    place-items:center;
    min-height:100vh;
    padding:34px 18px;
}

.ianuvi-login-card{
    width:min(460px,100%);
    margin:0;
    padding:42px 42px 34px;
    gap:18px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(15,26,46,.93),rgba(8,18,34,.96));
    box-shadow:
        0 28px 90px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(16px);
}

.ianuvi-login-brand{
    display:grid;
    justify-items:center;
    gap:7px;
    margin-bottom:8px;
    text-align:center;
}

.ianuvi-mark{
    width:86px;
    height:72px;
    overflow:visible;
}

.ianuvi-wordmark{
    color:#f7f9ff;
    font-size:35px;
    font-weight:600;
    letter-spacing:.19em;
    line-height:1;
}

.ianuvi-wordmark span{
    color:#31ced7;
}

.ianuvi-login-brand p{
    margin:0;
    color:#c7cfdd;
    font-size:14px;
}

.ianuvi-login-brand p strong{
    color:#9373ff;
    font-weight:600;
}

.ianuvi-login-heading{
    margin:7px 0 4px;
    text-align:center;
}

.ianuvi-login-heading h1{
    margin:0 0 7px;
    color:#fff;
    font-size:29px;
    letter-spacing:-.03em;
}

.ianuvi-login-heading p{
    margin:0;
    color:#909aae;
    font-size:14px;
}

.ianuvi-field{
    gap:8px;
    color:#f4f6fb;
    font-size:13px;
    font-weight:600;
}

.ianuvi-input-shell{
    position:relative;
    display:flex;
    align-items:center;
    min-height:50px;
    border:1px solid rgba(178,190,212,.28);
    border-radius:9px;
    background:rgba(7,16,31,.34);
    color:#8994a9;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.ianuvi-input-shell:focus-within{
    border-color:#4c9ff8;
    background:rgba(7,16,31,.52);
    box-shadow:0 0 0 3px rgba(63,155,246,.10);
}

.ianuvi-input-shell>svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-left:14px;
}

.ianuvi-input-shell input:not([type="checkbox"]):not([type="radio"]){
    width:100%;
    height:48px;
    padding:0 44px 0 12px;
    border:0;
    border-radius:0;
    outline:0;
    background:transparent;
    color:#fff;
    box-shadow:none;
}

.ianuvi-input-shell input::placeholder{
    color:#5f6b80;
}

.ianuvi-password-toggle{
    position:absolute;
    top:50%;
    right:7px;
    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:#7f8ba1;
}

.ianuvi-password-toggle:hover{
    background:rgba(255,255,255,.05);
    color:#fff;
}

.ianuvi-password-toggle svg{
    width:19px;
    height:19px;
}

.ianuvi-login-submit{
    min-height:52px;
    margin-top:4px;
    border-radius:9px;
    background:linear-gradient(90deg,#17c9d2 0%,#4a9ef8 48%,#7946f5 100%);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 12px 28px rgba(81,77,247,.20);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.ianuvi-login-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 34px rgba(81,77,247,.28);
    filter:brightness(1.04);
}

.ianuvi-login-divider{
    display:flex;
    align-items:center;
    gap:13px;
    color:#727d91;
    font-size:12px;
    text-align:center;
}

.ianuvi-login-divider::before,
.ianuvi-login-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.12);
}

.ianuvi-login-divider span{
    white-space:nowrap;
}

.ianuvi-login-register{
    margin:-4px 0 0;
    text-align:center;
}

.ianuvi-login-register a{
    color:#9d72ff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.ianuvi-login-register a:hover{
    color:#b296ff;
    text-decoration:underline;
}

.ianuvi-login-card .alert{
    border:1px solid rgba(248,113,113,.28);
    background:rgba(127,29,29,.24);
    color:#fecaca;
}

@media(max-width:600px){
    .ianuvi-login-wrap{
        padding:18px 12px;
    }

    .ianuvi-login-card{
        width:100%;
        padding:32px 22px 28px;
        border-radius:20px;
    }

    .ianuvi-mark{
        width:76px;
        height:64px;
    }

    .ianuvi-wordmark{
        font-size:30px;
        letter-spacing:.16em;
    }

    .ianuvi-login-heading h1{
        font-size:26px;
    }
}