:root { --paper:#fbf7ef; --card:#fffdf8; --ink:#2d2924; --muted:#736b60; --line:#e7ded1; --terracotta:#bd4e2c; --olive:#68724a; --blue:#4e7895; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 ui-sans-serif, system-ui, sans-serif; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:220px minmax(0, 1fr); max-width:1180px; min-height:100vh; margin:auto; background:var(--card); border-inline:1px solid var(--line); }
.side-nav { padding:28px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:34px; }
.brand { color:inherit; text-decoration:none; font:600 20px Georgia, serif; }.brand span { display:block; margin-top:3px; color:var(--muted); font:12px/1.3 ui-sans-serif, system-ui; }
nav { display:grid; gap:7px; }.nav-link { text-align:left; border:0; border-radius:8px; padding:10px 12px; background:transparent; color:var(--ink); }.nav-link:hover,.nav-link.active { background:#f4e4d5; color:#963d24; font-weight:700; }
.people { margin-top:auto; padding:12px; background:#f7f2e8; border-radius:10px; font-size:13px; }.people small { color:var(--blue); }
.content { padding:48px clamp(24px,5vw,68px); }.mobile-header,.bottom-nav { display:none; }
.page-head { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:28px; }.page-head h1 { margin:0; font:500 34px/1.1 Georgia, serif; }.page-head p { margin:6px 0 0; color:var(--muted); }
.primary { border:0; border-radius:8px; padding:11px 18px; color:white; background:var(--terracotta); font-weight:700; }.secondary,.outline { border:1px solid var(--terracotta); border-radius:7px; padding:9px 13px; color:#9d3e24; background:white; font-weight:700; }.secondary { border-color:var(--line); color:var(--ink); }
.trip-list { display:grid; gap:16px; max-width:650px; }.trip-card { display:grid; grid-template-columns:155px 1fr auto; min-height:144px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:white; }.cover { background:linear-gradient(150deg,#dcb992,#8b5e44); }.cover.lisbon { background:linear-gradient(150deg,#d8c27d,#62849a); }.trip-info { padding:19px; }.trip-info h2 { margin:0; font:500 25px Georgia,serif; }.trip-info p,.trip-info small { color:var(--muted); }.trip-card .outline { align-self:center; margin-right:18px; }
.notice { max-width:650px; margin-top:18px; padding:12px 14px; border-radius:8px; background:#f5f1e8; color:var(--muted); }
.selected-chip { border:1px solid #d9ceb9; padding:7px 10px; border-radius:7px; background:#faf6ee; color:var(--muted); }
.day-tabs { display:flex; gap:7px; overflow:auto; margin:4px 0 20px; }.day-tabs button { white-space:nowrap; border:1px solid var(--line); background:white; border-radius:16px; padding:7px 12px; }.day-tabs button.active { background:var(--terracotta); color:white; border-color:var(--terracotta); }
.capture-log { max-width:780px; border-top:1px solid var(--line); }.note-row { display:grid; grid-template-columns:55px 1fr auto; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); }.time { color:var(--muted); font-size:13px; }.note-body strong { font-size:13px; }.note-body p { margin:5px 0; }.tag { display:inline-block; margin-left:7px; border-radius:12px; padding:2px 7px; font-size:11px; font-weight:700; background:#e5edcf; color:#53602d; }.tag.bad { background:#f7ded8; color:#a43d25; }.tag.other { background:#e1e9ef; color:#456b85; }.note-actions { display:flex; align-items:center; gap:7px; }.thumb { width:52px; height:52px; border-radius:6px; background:linear-gradient(135deg,#a87346,#ede0bc); }.thumb.two { background:linear-gradient(135deg,#796642,#d3bd99); }.add-photo { width:52px; height:52px; border:1px dashed #cdbca5; border-radius:6px; color:#8d654f; background:#fffdf8; font-size:11px; }
.map-box { height:330px; border:1px solid var(--line); border-radius:12px 12px 0 0; overflow:hidden; position:relative; background:#e5e4c8; }.map-box::before { content:""; position:absolute; inset:0; opacity:.65; background:repeating-linear-gradient(24deg,transparent 0 45px,#b6c8af 47px 49px),repeating-linear-gradient(115deg,transparent 0 65px,#dbd1b9 67px 69px); }.route { position:absolute; inset:55px 13% 35px 18%; border-left:4px dashed var(--terracotta); border-bottom:4px dashed var(--terracotta); transform:skew(-13deg); }.pin { position:absolute; z-index:1; display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--olive); color:white; font-weight:700; }.p1{left:17%;top:20%}.p2{left:43%;top:32%}.p3{left:69%;top:22%}.p4{left:67%;top:62%}.p5{left:37%;top:67%}
.accordion { max-width:760px; border:1px solid var(--line); border-top:0; }.accordion button { width:100%; display:flex; justify-content:space-between; border:0; border-top:1px solid var(--line); padding:14px 16px; background:white; color:var(--ink); text-align:left; font-weight:700; }.accordion button:first-child { border-top:0; }.itinerary { padding:0 18px 14px; background:#fffdf8; }.itinerary ol { margin:0; padding-left:22px; }.itinerary li { padding:4px 0; color:var(--muted); }
.diary { max-width:760px; }.diary-day { padding:21px 0; border-top:1px solid var(--line); }.diary-day h2 { margin:0 0 14px; font:500 25px Georgia,serif; }.diary-section { margin:14px 0; }.diary-section h3 { margin:0 0 7px; color:var(--olive); font-size:15px; }.diary-section.bad h3 { color:var(--terracotta); }.diary-section.other h3 { color:var(--blue); }.diary-note { display:grid; grid-template-columns:70px 1fr auto; gap:10px; margin:7px 0; }.diary-note small { color:var(--muted); }.diary-note .thumb { width:48px; height:40px; }
dialog { border:0; border-radius:14px; padding:0; width:min(440px,calc(100% - 32px)); box-shadow:0 20px 70px #34271944; }dialog::backdrop { background:#2b211955; }dialog form { position:relative; display:grid; gap:14px; padding:28px; }dialog h2 { margin:0; font:500 27px Georgia,serif; }dialog label { display:grid; gap:6px; font-weight:700; }dialog input,dialog textarea,dialog select { border:1px solid var(--line); border-radius:7px; padding:10px; background:#fffdf8; }dialog textarea { min-height:120px; resize:vertical; }.close { position:absolute; top:12px; right:14px; border:0; background:none; font-size:26px; }
@media (max-width:700px) { .app-shell{display:block;padding-bottom:67px;border:0}.side-nav{display:none}.content{padding:20px 16px 32px}.bottom-nav{position:fixed;z-index:4;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 8px max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fffdf8}.bottom-nav .nav-link{text-align:center;padding:7px 4px;font-size:12px}.page-head h1{font-size:28px}.trip-card{grid-template-columns:104px 1fr;min-height:128px}.trip-card .outline{grid-column:2;justify-self:start;margin:0 0 14px}.trip-info{padding:13px}.trip-info h2{font-size:22px}.note-row{grid-template-columns:38px 1fr}.note-actions{grid-column:2}.map-box{height:275px}.diary-note{grid-template-columns:50px 1fr auto}.diary-note small{font-size:11px} }