@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --navy: #102e61;
    --blue: #1f5fc4;
    --blue-soft: #edf4ff;
    --green: #35a56f;
    --yellow: #f4b62a;
    --text: #122039;
    --muted: #738096;
    --border: #e5eaf1;
    --bg: #f5f8fc;
    --white: #fff;
}

* { box-sizing: border-box; }
body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--text); background:var(--bg); }
a { text-decoration:none; color:inherit; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:245px; background:linear-gradient(180deg,#0e2b5a,#102f62); color:#fff; padding:24px 16px; position:fixed; inset:0 auto 0 0; z-index:1050; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 25px; }
.brand strong { display:block; font-size:17px; letter-spacing:.2px; }
.brand span { display:block; text-transform:uppercase; font-size:9px; letter-spacing:2px; opacity:.65; margin-top:3px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; font-size:28px; }
.brand-mark.large { width:58px; height:58px; color:var(--blue); font-size:40px; }
.new-trip { background:#fff; color:var(--navy); border-radius:9px; padding:12px 15px; font-weight:600; text-align:center; margin:0 2px 22px; }
.new-trip i { margin-right:8px; }
.main-nav { display:flex; flex-direction:column; gap:5px; }
.main-nav a,.sidebar-bottom a { display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:8px; color:rgba(255,255,255,.82); font-size:13px; }
.main-nav a i,.sidebar-bottom a i { font-size:18px; width:20px; text-align:center; }
.main-nav a:hover,.sidebar-bottom a:hover,.main-nav a.active { background:rgba(255,255,255,.13); color:#fff; }
.sidebar-bottom { margin-top:auto; border-top:1px solid rgba(255,255,255,.15); padding-top:15px; }
.main-content { margin-left:245px; width:calc(100% - 245px); min-height:100vh; padding-bottom:70px; }
.topbar { height:62px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end; gap:18px; padding:0 28px; position:sticky; top:0; z-index:100; }
.searchbox { width:280px; height:38px; border:1px solid var(--border); border-radius:20px; display:flex; align-items:center; gap:8px; padding:0 15px; color:#8792a4; }
.searchbox input { border:0; outline:0; width:100%; font:inherit; font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button { position:relative; border:0; background:none; font-size:20px; color:#1d2b40; }
.icon-button span { position:absolute; right:-3px; top:-5px; background:#e98627; color:#fff; font-size:8px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; }
.avatar { width:35px; height:35px; border-radius:50%; background:linear-gradient(135deg,#8ab1db,#365b84); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; }
.user-name { font-size:13px; font-weight:600; }
.mobile-menu { display:none; border:0; background:none; font-size:25px; }
.dashboard { padding:26px; max-width:1600px; margin:auto; }
.welcome-hero { border-radius:15px; min-height:175px; padding:34px 42px; color:#fff; display:flex; align-items:center; overflow:hidden; position:relative; background:linear-gradient(110deg,rgba(13,50,104,.96),rgba(34,90,150,.72)),url('/assets/img/alps-hero.svg') center/cover; }
.welcome-hero h1 { font-size:32px; margin:7px 0 5px; font-weight:700; }
.welcome-hero p { margin:0; opacity:.9; }
.eyebrow { font-size:11px; letter-spacing:1.7px; opacity:.8; font-weight:700; }
.vacation-card { background:#fff; border:1px solid var(--border); border-radius:15px; padding:14px; margin-top:-30px; position:relative; z-index:2; display:grid; grid-template-columns:230px 1fr 175px; gap:20px; align-items:center; box-shadow:0 10px 30px rgba(24,54,96,.08); }
.vacation-photo { height:140px; border-radius:10px; overflow:hidden; }
.mountain-art { height:100%; background:linear-gradient(180deg,#8bc0ed 0%,#d8efff 48%,#91bf82 49%,#5f9861 100%); position:relative; }
.mountain-art:before,.mountain-art:after { content:""; position:absolute; bottom:30px; width:0; height:0; border-left:90px solid transparent; border-right:90px solid transparent; border-bottom:130px solid #6d899f; }
.mountain-art:before { left:20px; }
.mountain-art:after { right:0; border-bottom-color:#55758c; }
.vacation-info h2 { margin:4px 0 10px; font-size:23px; }
.soft-label { font-size:10px; font-weight:700; color:var(--blue); letter-spacing:1.1px; }
.meta-row { display:flex; gap:18px; color:var(--muted); font-size:12px; }
.meta-row i { color:var(--blue); }
.vacation-info p { color:var(--muted); font-size:12px; margin:12px 0 0; }
.weather-card { border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
.weather-card .sun-icon { font-size:32px; color:var(--yellow); }
.weather-card strong { font-size:24px; display:block; }
.weather-card span { font-size:11px; color:var(--muted); display:block; }
.weather-card a { color:var(--blue); font-size:11px; display:block; margin-top:10px; }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:18px 0; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:12px; min-height:92px; display:flex; align-items:center; gap:12px; padding:15px; }
.stat-card strong { font-size:22px; margin-left:auto; }
.stat-card span { font-size:11px; color:var(--muted); }
.stat-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:20px; }
.stat-icon.blue { background:#eaf2ff; color:var(--blue); }
.stat-icon.green { background:#e7f7ee; color:var(--green); }
.stat-icon.yellow { background:#fff6df; color:#d99b13; }
.content-grid { display:grid; grid-template-columns:1.25fr 1fr .9fr; gap:16px; }
.panel { background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; min-width:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.panel-heading h3 { margin:0; font-size:16px; }
.panel-heading small { color:var(--muted); font-size:10px; display:block; margin-top:3px; }
.panel-heading a { color:var(--blue); font-size:11px; white-space:nowrap; }
.activity-list { display:flex; flex-direction:column; gap:10px; }
.activity-row { display:flex; gap:11px; border:1px solid var(--border); border-radius:10px; padding:8px; }
.activity-thumb { width:100px; min-width:100px; height:72px; border-radius:7px; overflow:hidden; }
.activity-placeholder { width:100%; height:100%; background:linear-gradient(145deg,#6eabd7,#e4f2ff 48%,#6f9b65 49%,#4f7b51); position:relative; }
.activity-placeholder:after { content:""; position:absolute; left:18%; bottom:22%; width:0; height:0; border-left:35px solid transparent; border-right:35px solid transparent; border-bottom:50px solid #456f88; }
.activity-placeholder.ice { background:linear-gradient(145deg,#82bfe6,#edf8ff 45%,#b9d4e4 46%,#7198b0); }
.activity-main { flex:1; min-width:0; }
.activity-title { display:flex; justify-content:space-between; align-items:start; }
.activity-title h4 { margin:2px 0 5px; font-size:12px; }
.favorite-star { color:var(--yellow); font-size:13px; }
.chips { display:flex; gap:5px; flex-wrap:wrap; }
.chip { background:#f0f4f9; color:#5e6d81; border-radius:10px; padding:3px 7px; font-size:9px; }
.chip.gold { background:#fff4d8; color:#a97508; }
.activity-meta { display:flex; gap:13px; margin-top:7px; color:var(--muted); font-size:9px; }
.fake-map { height:320px; border-radius:10px; overflow:hidden; position:relative; background:linear-gradient(145deg,#dcefd9,#b8d9b0 55%,#e5efd8); }
.map-water { position:absolute; width:115px; height:300px; background:#92c9df; border-radius:55% 45% 48% 52%; left:42%; top:30px; transform:rotate(15deg); opacity:.85; }
.map-road { position:absolute; height:3px; background:#f4f1e9; transform-origin:left; box-shadow:0 0 0 1px #d4cdbf; }
.road1 { width:390px; left:-40px; top:160px; transform:rotate(18deg); }
.road2 { width:350px; left:80px; top:245px; transform:rotate(-25deg); }
.map-label { position:absolute; font-size:10px; font-weight:600; color:#46604d; }
.zell { left:43%; top:43%; }.kaprun { left:34%; top:63%; }
.map-marker { position:absolute; width:28px; height:28px; border-radius:50%; color:#fff; display:grid; place-items:center; border:3px solid #fff; box-shadow:0 2px 8px #5672; font-size:11px; }
.map-marker.blue { background:#1f65bd; }.map-marker.green { background:#35a56f; }.map-marker.gold { background:#edae20; }
.m1 { left:47%; top:51%; }.m2 { left:62%; top:28%; }.m3 { left:28%; top:32%; }.m4 { left:65%; top:61%; }
.map-popup { position:absolute; left:52%; top:62%; background:#fff; border-radius:9px; padding:9px 11px; box-shadow:0 8px 20px #38505a22; width:150px; }
.map-popup strong,.map-popup span,.map-popup small { display:block; }.map-popup strong { font-size:11px; }.map-popup span { font-size:8px; color:var(--muted); }.map-popup small { font-size:8px; color:#a67409; margin-top:5px; }
.map-legend { display:flex; gap:13px; font-size:9px; color:var(--muted); margin-top:9px; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:3px; }.dot.blue{background:#1f65bd}.dot.green{background:#35a56f}.dot.gold{background:#edae20}
.planning-list { display:flex; flex-direction:column; gap:7px; }
.plan-item { display:flex; gap:9px; align-items:center; border:1px solid var(--border); border-radius:9px; padding:7px; }
.plan-item.active { background:#eef5ff; border-color:#c9dcfb; }
.date-box { min-width:45px; text-align:center; background:#f4f7fb; border-radius:7px; padding:5px; }
.plan-item.active .date-box { background:#2b68bd; color:#fff; }
.date-box strong,.date-box span { display:block; font-size:9px; }.date-box span { opacity:.75; }
.plan-item > div:last-child { min-width:0; }.plan-item > div:last-child strong { display:block; font-size:10px; }.plan-item > div:last-child span { display:block; color:var(--muted); font-size:8px; margin-top:3px; }
.plan-badge { display:inline-block!important; color:#4b8c69!important; background:#e6f6ed; border-radius:8px; padding:2px 6px; width:max-content; }
.quick-actions { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:16px; }
.quick-actions a { background:#fff; border:1px solid var(--border); border-radius:11px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--text); font-size:10px; }
.quick-actions i { color:var(--blue); font-size:20px; }.quick-actions a:hover { border-color:#b7cff4; transform:translateY(-1px); }
.notes-panel { margin-top:16px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; }
.note-item { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--border); }.note-item i { color:#e8a922; font-size:18px; }.note-item strong { font-size:11px; }.note-item p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.mobile-nav { display:none; }
.login-page { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; background:#edf4fb; }
.login-background { position:absolute; inset:0; background:linear-gradient(120deg,rgba(14,47,96,.9),rgba(42,103,167,.58)),url('/assets/img/alps-hero.svg') center/cover; }
.login-card { width:min(430px,calc(100% - 32px)); position:relative; z-index:2; background:#fff; border-radius:22px; padding:38px; box-shadow:0 25px 70px rgba(9,31,62,.25); }
.login-logo { display:flex; align-items:center; gap:8px; color:var(--navy); margin-bottom:28px; }.login-logo strong { font-size:18px; display:block; }.login-logo span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); }.login-card h1 { font-size:27px; margin-bottom:4px; }.login-intro { color:var(--muted); font-size:13px; margin-bottom:24px; }.login-button { padding:13px; border-radius:10px; }.login-footer { text-align:center; color:#9aa4b3; font-size:10px; margin:22px 0 0; }
.btn-primary { background:var(--blue); border-color:var(--blue); }.btn-primary:hover { background:#174f9f; border-color:#174f9f; }

@media (max-width:1199px) {
    .content-grid { grid-template-columns:1fr 1fr; }
    .planning-panel { grid-column:1/-1; }
    .stats-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:991px) {
    .sidebar { transform:translateX(-100%); transition:.25s; box-shadow:12px 0 35px #001c4328; }.sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; width:100%; }.mobile-menu { display:block; margin-right:auto; }.topbar { justify-content:space-between; padding:0 15px; }.searchbox { width:180px; }.user-name { display:none; }
    .mobile-nav { position:fixed; display:flex; bottom:0; left:0; right:0; height:62px; background:#fff; border-top:1px solid var(--border); z-index:1100; justify-content:space-around; align-items:center; box-shadow:0 -6px 20px #102e6110; }
    .mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; color:#68758a; font-size:9px; }.mobile-nav i { font-size:19px; }.mobile-nav .active { color:var(--blue); }.mobile-add { width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff!important; font-size:20px!important; justify-content:center; margin-top:-20px; box-shadow:0 7px 18px #1f5fc455; }.mobile-add span { display:none; }
    .dashboard { padding:15px; }.welcome-hero { min-height:150px; padding:25px; }.welcome-hero h1 { font-size:25px; }.vacation-card { grid-template-columns:170px 1fr; }.weather-card { display:none; }
}
@media (max-width:767px) {
    .topbar { height:56px; }.searchbox { display:none; }.dashboard { padding:10px; }.welcome-hero { border-radius:12px; padding:22px 18px; min-height:135px; }.welcome-hero h1 { font-size:21px; line-height:1.2; }.welcome-hero p { font-size:11px; }
    .vacation-card { margin-top:-20px; grid-template-columns:1fr; gap:12px; padding:10px; }.vacation-photo { height:115px; }.vacation-info { padding:4px 5px 8px; }.vacation-info h2 { font-size:19px; }.meta-row { flex-direction:column; gap:5px; }.stats-grid { grid-template-columns:repeat(2,1fr); gap:8px; }.stat-card { min-height:78px; padding:10px; }.stat-card strong { font-size:18px; }.stat-icon { width:34px; height:34px; font-size:17px; }
    .content-grid { grid-template-columns:1fr; gap:10px; }.planning-panel { grid-column:auto; }.fake-map { height:260px; }.quick-actions { grid-template-columns:repeat(2,1fr); }.quick-actions a:last-child { grid-column:1/-1; }
    .activity-thumb { width:82px; min-width:82px; height:65px; }.panel { padding:13px; }.panel-heading h3 { font-size:14px; }
    .login-card { padding:28px 22px; }
}