:root{
    --bg:#f6f9ff;
    --bg-soft:#eef5ff;
    --card:#ffffff;
    --line:#d7e3f6;
    --text:#16324f;
    --muted:#5d7188;
    --primary:#2563eb;
    --primary-2:#3b82f6;
    --primary-soft:#dbeafe;
    --success:#0f9f6e;
    --danger:#dc2626;
    --shadow:0 18px 45px rgba(27,70,126,.10);
    --radius:24px;
    --radius-sm:16px;
    --sidebar:290px;
    --max:1180px;
    --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
svg.icon{width:1.1rem;height:1.1rem;flex:0 0 1.1rem}
.wrap{width:min(calc(100% - 2rem),var(--max));margin:0 auto}
.narrow{max-width:760px}
.public-body,.login-body,.install-body{background:
    radial-gradient(circle at top left,#ecf4ff 0,#f8fbff 40%,#f6f9ff 100%)}
.brand{display:flex;align-items:center;gap:.9rem}
.brand-mark{
    width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:800;
    box-shadow:0 12px 22px rgba(37,99,235,.25)
}
.brand-mark.large{width:58px;height:58px;border-radius:18px}
.brand small{display:block;color:var(--muted);margin-top:.15rem}
.public-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(215,227,246,.7)}
.header-row{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:1rem 0}
.public-nav{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.public-nav a,.lang-toggle a{
    padding:.72rem 1rem;border-radius:999px;color:var(--muted);font-weight:600;transition:.2s ease
}
.public-nav a.active,.public-nav a:hover,.lang-toggle a.active,.lang-toggle a:hover{background:var(--primary-soft);color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:.8rem}
.lang-toggle{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.18rem}
.lang-toggle.wide{justify-content:space-between}
.lang-inline{display:flex;gap:1rem;margin-top:.5rem}
.badge{
    display:inline-flex;align-items:center;gap:.4rem;background:var(--primary-soft);color:var(--primary);
    padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.9rem
}
.hero{padding:4.5rem 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:2rem;align-items:center}
.hero h1,.page-hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.03;margin:1rem 0 1rem}
.hero p,.page-hero p{font-size:1.08rem;line-height:1.75;color:var(--muted);max-width:64ch}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:none;cursor:pointer;
    padding:.9rem 1.15rem;border-radius:16px;font-weight:700;transition:.2s ease
}
.btn.wide{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 12px 20px rgba(37,99,235,.22)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{background:#eff6ff;color:var(--primary)}
.btn-light{background:#fff;border:1px solid var(--line);color:var(--text)}
.phone-mockup{display:flex;justify-content:center}
.phone-card{
    width:min(100%,360px);background:linear-gradient(180deg,#fff,#f7fbff);border:1px solid #dce8fb;border-radius:32px;
    padding:1.2rem;box-shadow:var(--shadow)
}
.phone-card-top{display:flex;gap:.9rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.phone-card-top span svg{width:2rem;height:2rem;color:var(--primary)}
.phone-list{display:grid;gap:.9rem;margin-top:1rem}
.phone-list-item{
    display:flex;gap:.8rem;align-items:center;background:var(--bg-soft);padding:1rem;border-radius:18px
}
.phone-list-item span{
    width:36px;height:36px;border-radius:12px;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:800
}
.section,.page-hero{padding:4rem 0}
.section.alt{background:#f1f7ff}
.section-heading{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}
.section-heading h2{font-size:2rem;margin:0}
.section-heading p{color:var(--muted);max-width:70ch;line-height:1.7}
.feature-grid,.metric-grid,.trip-card-grid,.card-grid{display:grid;gap:1rem}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-card,.metric-card,.trip-card,.content-card,.panel-card,.module-card,.trip-admin-card,.install-card,.login-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.feature-card,.content-card,.panel-card,.install-card,.login-card{padding:1.45rem}
.feature-icon,.module-icon,.list-icon{
    width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)
}
.feature-card h3,.content-card h2,.panel-card h2{margin:.9rem 0 .5rem}
.feature-card p,.content-card p,.empty-state{color:var(--muted);line-height:1.7}
.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.5rem}
.metric-card{padding:1.2rem 1.25rem}
.metric-card strong{font-size:1.95rem;display:block;margin:.2rem 0 .25rem}
.metric-head{display:flex;gap:.55rem;align-items:center;color:var(--muted);font-weight:700}
.trip-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.5rem}
.trip-card,.trip-admin-card{padding:1.2rem}
.trip-card.wide{padding:1.4rem}
.trip-card h3,.trip-admin-card h3{margin:.85rem 0 .45rem}
.trip-card p,.trip-admin-card p{color:var(--muted);margin:.3rem 0 .7rem;line-height:1.6}
.trip-card-header,.toolbar-inline,.panel-card-head,.message-head,.step-actions,.split-layout,.split-panel{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:.4rem .8rem;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.85rem;font-weight:700}
.pill.ghost{background:#fff;border:1px solid var(--line);color:var(--muted)}
.trip-meta{display:flex;gap:.7rem;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.trip-meta.compact{font-size:.85rem}
.cta-banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:30px;padding:1.4rem 1.6rem;box-shadow:var(--shadow)}
.page-hero{padding-top:3.5rem;padding-bottom:1rem}
.split-layout,.split-panel{align-items:stretch}
.split-layout > *, .split-panel > *{flex:1 1 320px}
.accent-card{background:linear-gradient(180deg,#ffffff,#f2f7ff)}
.check-list{list-style:none;padding:0;margin:1rem 0 0}
.check-list li{display:flex;gap:.65rem;align-items:flex-start;margin:.75rem 0;color:var(--muted)}
.check-list li::before{content:"✓";color:var(--success);font-weight:800}
.timeline{position:relative;display:grid;gap:1rem}
.timeline::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:var(--line)}
.timeline-card{position:relative;padding-left:3rem}
.timeline-dot{position:absolute;left:8px;top:20px;width:20px;height:20px;border-radius:50%;background:var(--primary-soft);border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}
.timeline-content{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.2rem;box-shadow:var(--shadow)}
.public-footer{border-top:1px solid var(--line);background:#fff;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:2.1rem 0}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);color:var(--muted)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1 / -1}
.field label{font-weight:700}
.field input,.field textarea,.field select{
    width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:.95rem 1rem;font:inherit;color:var(--text)
}
.field textarea{resize:vertical;min-height:120px}
.highlight input{background:var(--bg-soft);font-weight:800;color:var(--primary)}
.toggle-row{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.alert{padding:.95rem 1rem;border-radius:18px;font-weight:600}
.alert.success{background:#e8fff5;color:#0f9f6e;border:1px solid #b8efd8}
.alert.error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.empty-state{padding:2rem;border:1px dashed var(--line);border-radius:22px;background:#fff;text-align:center}

.login-shell,.install-shell{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login-card{width:min(100%,420px)}
.install-card{width:min(100%,920px)}
.login-brand,.install-brand{display:flex;align-items:center;gap:.9rem}
.install-top{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.install-grid{margin-top:1rem}
.login-card .form-grid{grid-template-columns:1fr}
.centered{justify-content:center;margin-top:1rem}

.admin-body{background:linear-gradient(180deg,#f8fbff,#eef5ff)}
.admin-shell{display:flex;min-height:100vh}
.sidebar{
    width:var(--sidebar);padding:1.3rem 1rem;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
    border-right:1px solid rgba(215,227,246,.85);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem
}
.sidebar-brand{padding:.3rem .4rem}
.sidebar-nav{display:grid;gap:.3rem}
.sidebar-nav a,.sidebar-logout{
    display:flex;align-items:center;gap:.8rem;padding:.95rem 1rem;border-radius:18px;color:var(--muted);font-weight:700
}
.sidebar-nav a.active,.sidebar-nav a:hover,.sidebar-logout:hover{background:var(--primary-soft);color:var(--primary)}
.sidebar-footer{margin-top:auto;display:grid;gap:.8rem}
.main-panel{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
    display:flex;align-items:center;gap:1rem;padding:1.4rem 1.4rem 0
}
.topbar h1{margin:0 0 .2rem;font-size:2rem}
.topbar p{margin:0;color:var(--muted)}
.mobile-menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem}
.panel-content{padding:1.4rem;display:grid;gap:1rem;padding-bottom:6rem}
.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.clickable,.module-card,.list-item,.trip-admin-card{transition:.18s ease}
.module-card{padding:1.25rem;display:flex;flex-direction:column;gap:.85rem}
.clickable:hover,.module-card:hover,.list-item:hover,.trip-admin-card:hover{transform:translateY(-2px)}
.list-stack{display:grid;gap:.75rem}
.list-item{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.05rem;
    border:1px solid var(--line);border-radius:18px;background:#fff
}
.list-item.static:hover{transform:none}
.list-right{display:flex;flex-direction:column;align-items:flex-end;color:var(--muted)}
.message-card{border:1px solid var(--line);border-radius:20px;padding:1rem;background:#fff}
.message-head{margin-bottom:.5rem}
.trip-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

.mode-switch{display:inline-flex;background:var(--bg-soft);padding:.25rem;border-radius:999px;margin-bottom:1rem}
.mode-switch button{
    border:none;background:transparent;padding:.8rem 1rem;border-radius:999px;font-weight:700;color:var(--muted);cursor:pointer
}
.mode-switch button.active{background:#fff;color:var(--primary);box-shadow:0 8px 16px rgba(37,99,235,.10)}
.wizard-steps{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}
.wizard-steps button{
    border:1px solid var(--line);background:#fff;padding:.7rem .95rem;border-radius:999px;color:var(--muted);font-weight:700;cursor:pointer
}
.wizard-steps button.active{background:var(--primary-soft);color:var(--primary);border-color:#bfd7ff}
.wizard-step{display:none;background:#fafdff;border:1px solid var(--line);border-radius:26px;padding:1rem}
.wizard-step.active{display:block}
.wizard-step h3{margin-top:.15rem}
.chips-block{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{
    border:none;background:#fff;padding:.62rem .9rem;border-radius:999px;border:1px solid var(--line);font-weight:700;color:var(--muted);cursor:pointer
}
.step-actions{margin-top:1rem}
.mobile-stack{justify-content:flex-start}
.mobile-bottom-nav{
    display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:.8rem;z-index:25;
    width:min(calc(100% - 1rem),740px);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:24px;padding:.4rem;box-shadow:var(--shadow)
}
.mobile-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.6rem .4rem;border-radius:18px;color:var(--muted);font-size:.76rem;font-weight:700;flex:1
}
.mobile-bottom-nav a.active{background:var(--primary-soft);color:var(--primary)}

@media (max-width: 1100px){
    .feature-grid,.trip-card-grid,.card-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero-grid,.footer-grid,.trip-admin-grid{grid-template-columns:1fr}
}
@media (max-width: 900px){
    .public-nav{display:none}
    .hero{padding-top:2.8rem}
    .sidebar{position:fixed;left:-100%;transition:.24s ease;z-index:30;background:#fff}
    .sidebar.open{left:0}
    .mobile-menu-btn{display:inline-flex}
    .card-grid.three,.feature-grid,.metric-grid,.trip-card-grid,.form-grid,.card-grid.four{grid-template-columns:1fr}
    .mobile-bottom-nav{display:flex}
    .panel-content{padding-bottom:7rem}
    .cta-banner,.footer-grid,.footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width: 640px){
    .wrap{width:min(calc(100% - 1rem),var(--max))}
    .header-row{padding:.8rem 0}
    .header-actions .btn{display:none}
    .hero h1,.page-hero h1{font-size:2.25rem}
    .trip-card,.panel-card,.content-card,.feature-card,.login-card,.install-card,.metric-card{border-radius:22px}
    .step-actions.mobile-stack{flex-direction:column}
    .step-actions.mobile-stack .btn{width:100%}
}