/* Личная страница поездки. Сначала телефон, потом широкие экраны.
   Радиусы: кнопки pill, карточки 28px, внутренние блоки 20px, поля 16px. */
:root{
  --bg:#f1c9cc; --bg2:#f8dede; --paper:#fffaf8; --cream:#fbebe8;
  --choc:#3b1f1c; --choc2:#512b26; --ink:#2f1a17; --muted:#765c52;
  --rose:#d9807c; --rose-soft:#ecb7b0; --ok:#4f7a56;
  --sans:'Onest',system-ui,-apple-system,sans-serif; --script:'Marck Script',cursive;
  --r:28px; --r-in:20px; --r-field:16px;
  --shadow:0 18px 44px -18px rgba(59,31,28,.34);
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--choc);outline-offset:3px}
.hide{display:none!important}
.script{font-family:var(--script);font-weight:400}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:6px 6px 6px 24px;border-radius:999px;background:var(--choc);color:var(--paper);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .45s var(--ease),background .3s}
.btn i{font-style:normal;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,250,248,.16);transition:transform .45s var(--ease)}
.btn:active{transform:scale(.97)}
.btn:hover i{transform:translate(2px,-2px)}
.btn.line{background:transparent;color:var(--choc);box-shadow:inset 0 0 0 1.5px var(--choc);padding-right:24px}
.btn.sm{min-height:42px;font-size:14px;padding:4px 4px 4px 18px}
.btn.sm.line{padding-right:18px}
.btn.sm i{width:32px;height:32px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ===== вход ===== */
.login{min-height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;position:relative}
.strip{position:relative;height:min(46dvh,420px);margin:0 16px;padding-top:calc(env(safe-area-inset-top) + 18px)}
.strip .ph{position:absolute;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);outline:6px solid rgba(255,250,248,.55);animation:pop .9s var(--ease) both}
.strip .ph img{width:100%;height:100%;object-fit:cover}
.strip .p1{left:2%;top:calc(env(safe-area-inset-top) + 34px);width:42%;height:62%;transform:rotate(-5deg)}
.strip .p2{left:30%;top:calc(env(safe-area-inset-top) + 10px);width:44%;height:74%;z-index:2;animation-delay:.08s}
.strip .p3{right:1%;top:calc(env(safe-area-inset-top) + 46px);width:38%;height:56%;transform:rotate(5deg);animation-delay:.16s}
.strip .tag{position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%) rotate(-2deg);background:var(--paper);border-radius:999px;padding:6px 20px 8px;font-family:var(--script);font-size:24px;box-shadow:var(--shadow)}
.sheet{margin-top:auto;background:var(--paper);border-radius:36px 36px 0 0;padding:30px 22px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -24px 50px -22px rgba(59,31,28,.38);animation:up .8s var(--ease) both}
.sheet .logo{font-family:var(--script);font-size:26px;line-height:1;color:var(--choc2)}
.sheet h1{font-size:clamp(34px,10vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;margin:10px 0 8px}
.sheet p.lead{color:var(--muted);font-size:16px;margin-bottom:20px}
.codeform{display:grid;gap:12px}
.codeform input{width:100%;text-align:center;font-size:clamp(17px,5vw,22px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:18px 14px;border-radius:var(--r-in);border:0;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--rose-soft)}
.codeform input::placeholder{letter-spacing:0;font-weight:600;font-size:17px;color:#c9a9a2}
.codeform input:focus{outline:2px solid var(--choc);outline-offset:2px}
.codeform.shake{animation:shake .45s}
.codeform .btn{width:100%;justify-content:space-between;padding-left:28px}
.msg{min-height:22px;margin-top:10px;font-size:14px;font-weight:600;color:#8e2a20}
.sheet .alt{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--muted)}
.sheet .alt a{font-weight:700;color:var(--choc)}
@media(min-width:700px){.login{justify-content:center;gap:18px}.sheet{margin-top:0;border-radius:36px}}

/* ===== приложение ===== */
.head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 16px 10px;background:linear-gradient(var(--bg) 72%,rgba(241,201,204,0))}
.head .logo{font-family:var(--script);font-size:24px;line-height:1}
.who{display:flex;align-items:center;gap:10px}
.who b{font-weight:700;font-size:14px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ava{width:42px;height:42px;border-radius:50%;background:var(--choc);color:var(--paper);display:grid;place-items:center;font-weight:800;font-size:17px}
.menu{position:fixed;right:16px;top:calc(env(safe-area-inset-top) + 62px);z-index:40;background:var(--paper);border-radius:var(--r-in);padding:8px;box-shadow:var(--shadow);min-width:200px;animation:pop .35s var(--ease) both}
.menu button,.menu a{display:block;width:100%;text-align:left;padding:13px 14px;border-radius:14px;font-weight:600;font-size:15px;text-decoration:none}
.menu button:active,.menu a:active{background:var(--cream)}
.shell{max-width:560px;margin:0 auto;padding:4px 16px calc(112px + env(safe-area-inset-bottom))}
.shell>*{animation:rise .6s var(--ease) both}
.shell.still>*,.shell.still .day.open .bd{animation:none!important}
.shell>*:nth-child(2){animation-delay:.05s}.shell>*:nth-child(3){animation-delay:.1s}.shell>*:nth-child(4){animation-delay:.15s}.shell>*:nth-child(5){animation-delay:.2s}

.tabs{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;width:min(540px,100% - 20px);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:999px;background:rgba(255,250,248,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(59,31,28,.06),0 14px 34px -12px rgba(59,31,28,.4)}
.tabs button{padding:12px 0;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:background .35s var(--ease),color .3s}
.tabs button.on{background:var(--choc);color:var(--paper)}

h2.sec{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:26px 4px 12px}
.card{background:var(--paper);border-radius:var(--r);padding:20px}
.bez{padding:6px;border-radius:calc(var(--r) + 6px);background:rgba(255,250,248,.5);box-shadow:0 0 0 1px rgba(59,31,28,.07),var(--shadow)}
.bez>.in{border-radius:var(--r);overflow:hidden;background:var(--paper)}
.chip{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(255,250,248,.88);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--choc2)}

/* обложка поездки */
.cover{position:relative;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:var(--paper);background:var(--choc)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cover:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(59,31,28,.05) 25%,rgba(59,31,28,.88))}
.cover>*:not(img){position:relative;z-index:2}
.cover .chip{align-self:flex-start;margin-bottom:auto}
.cover h1{font-size:clamp(28px,8vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:20px 0 6px}
.cover p{color:#f1dcd7;font-size:15px}
.count{margin-top:14px;display:inline-flex;align-items:baseline;gap:8px;font-size:15px;color:#f1dcd7}
.count b{font-size:34px;line-height:1;color:var(--paper);font-weight:800}

.today{margin-top:14px;display:grid;gap:8px}
.today .lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.today h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.today p{color:var(--ink);font-size:16px}
.why{display:block;background:var(--bg2);border-radius:14px;padding:9px 13px;font-size:14px;color:var(--choc2)}
.why:before{content:"почему так: ";font-weight:700}
.prog{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.prog button{text-align:left;background:var(--paper);border-radius:var(--r);padding:18px;display:grid;gap:6px}
.prog small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prog b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.bar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--rose);transition:width .6s var(--ease)}
.linklist{display:grid;gap:8px;margin-top:6px}
.linklist a{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--paper);border-radius:var(--r-in);padding:15px 18px;text-decoration:none;font-weight:600;font-size:15px}
.linklist a:after{content:"↗";color:var(--rose);font-weight:800}
.cta-row{display:grid;gap:10px;margin-top:22px}

/* маршрут по дням */
.day{background:var(--paper);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.day>button.hd{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;padding:16px 18px;text-align:left}
.day .n{font-family:var(--script);font-size:34px;line-height:1;color:var(--rose);min-width:54px}
.day .t{display:block;font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.day .c{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.day .ar{width:34px;height:34px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:15px;transition:transform .45s var(--ease)}
.day.open .ar{transform:rotate(180deg)}
.day .bd{display:none;padding:0 18px 18px;gap:12px}
.day.open .bd{display:grid;animation:rise .5s var(--ease)}
.day .pic{border-radius:var(--r-in);width:100%;aspect-ratio:4/3;object-fit:cover}
.day .tx{font-size:16px}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--rose);color:#fff;font-size:12px;font-weight:800}

.diary{display:grid;gap:10px;border-top:1px dashed var(--rose-soft);padding-top:14px;margin-top:2px}
.diary h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.note{background:var(--cream);border-radius:var(--r-in);padding:12px 14px;font-size:15px;white-space:pre-wrap;word-break:break-word}
.note small{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--muted);font-size:12px;white-space:normal}
.note small button{color:var(--muted);text-decoration:underline;font-size:12px;padding:2px 0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pgrid button{aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--cream)}
.pgrid img{width:100%;height:100%;object-fit:cover}
.add{display:grid;gap:8px}
.add textarea,.rv-form textarea{width:100%;min-height:76px;resize:vertical;padding:13px 15px;border-radius:var(--r-field);border:0;background:var(--cream);font-size:16px;box-shadow:inset 0 0 0 1.5px var(--rose-soft)}
.add textarea:focus,.rv-form textarea:focus{outline:2px solid var(--choc);outline-offset:2px}
.add .row{display:flex;gap:8px;flex-wrap:wrap}
.add .row .btn{flex:1}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;font-size:0;cursor:pointer}

/* бюджет и чек-лист */
.sum{background:var(--choc);color:var(--paper);border-radius:var(--r);padding:22px;display:grid;gap:10px}
.sum small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#dcc3bd;font-weight:700}
.sum b{font-size:clamp(34px,10vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.sum .bar{background:rgba(255,250,248,.18)}.sum .bar i{background:var(--rose-soft)}
.sum p{font-size:14px;color:#dcc3bd}
.list{display:grid;gap:8px;margin-top:12px}
.row-c{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;background:var(--paper);border-radius:var(--r-in);padding:15px 16px;min-height:62px;transition:background .3s}
.row-c.nb{grid-template-columns:30px 1fr;align-items:start}
.cb{width:30px;height:30px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--rose);display:grid;place-items:center;transition:background .3s,box-shadow .3s}
.cb:after{content:"";width:12px;height:6px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .2s}
.row-c.done .cb{background:var(--ok);box-shadow:none}.row-c.done .cb:after{opacity:1}
.row-c.done .lt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(118,92,82,.5)}
.row-c .lt{font-weight:600;font-size:15px;line-height:1.35}
.row-c .lt small{display:block;font-weight:400;color:var(--muted);font-size:13px;text-decoration:none;margin-top:2px}
.row-c.nb .lt b{display:block;font-weight:800;font-size:16px}
.row-c .am{font-weight:800;white-space:nowrap;font-size:15px}
.empty{text-align:center;color:var(--muted);padding:26px 18px;background:var(--paper);border-radius:var(--r)}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}

/* история */
.tripcard{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;width:100%;text-align:left;background:var(--paper);border-radius:var(--r);padding:10px;margin-bottom:10px;transition:transform .4s var(--ease)}
.tripcard:active{transform:scale(.98)}
.tripcard.cur{box-shadow:0 0 0 2px var(--choc)}
.tripcard .im{width:96px;height:96px;border-radius:var(--r-in);overflow:hidden;background:var(--bg2)}
.tripcard .im img{width:100%;height:100%;object-fit:cover}
.tripcard b{display:block;font-weight:800;font-size:16px;line-height:1.2;letter-spacing:-.01em}
.tripcard span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.tl{position:relative;display:grid;gap:14px;padding-left:20px}
.tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--rose-soft);border-radius:2px}
.tl .it{position:relative}
.tl .it:before{content:"";position:absolute;left:-20px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px var(--bg)}
.tl h5{font-size:15px;font-weight:800;margin-bottom:6px}
.stars{display:flex;gap:6px;margin:6px 0 12px}
.stars button{font-size:34px;line-height:1;color:var(--rose-soft);transition:transform .3s var(--ease),color .2s;padding:2px}
.stars button.on{color:var(--rose)}
.stars button:active{transform:scale(1.2)}
.rv-form{display:grid;gap:10px}
.rv-form label.ck{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.rv-form input[type=checkbox]{width:22px;height:22px;accent-color:var(--choc);flex:none;margin-top:1px}

/* просмотр фото */
.lb{position:fixed;inset:0;z-index:60;background:rgba(30,15,13,.92);display:grid;place-items:center;padding:16px;animation:fade .3s both}
.lb img{max-height:78dvh;max-width:100%;border-radius:20px}
.lb .bar2{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center}
.lb .bar2 button{padding:13px 24px;border-radius:999px;background:var(--paper);font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;background:var(--choc);color:var(--paper);padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;max-width:calc(100% - 32px);text-align:center;animation:rise .4s var(--ease) both}
.offline{margin:0 4px 10px;padding:9px 14px;border-radius:14px;background:var(--choc);color:var(--paper);font-size:13px;font-weight:600}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.menu .who-card{padding:10px 16px 12px;border-bottom:1px solid rgba(59,31,28,.1);margin-bottom:4px;display:grid;gap:2px}.menu .who-card b{font-size:16px}.menu .who-card span{font-size:13px;color:var(--muted)}

/* личный кабинет */
.cab-head{display:flex;gap:14px;align-items:center;margin:14px 4px 0}
.cab-head h1{font-size:28px;line-height:1.1;letter-spacing:-.02em}.cab-head p{color:var(--muted)}
.ava.big{width:64px;height:64px;font-size:26px;flex:none}
.cabtrip{display:grid;grid-template-columns:104px 1fr;gap:0;width:100%;text-align:left;background:var(--paper);border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:0 0 0 1px rgba(59,31,28,.07),var(--shadow);position:relative;min-height:120px}
.cabtrip.cur{box-shadow:0 0 0 2px var(--rose),var(--shadow)}
.cabtrip img,.cabtrip .noimg{width:104px;height:100%;object-fit:cover;background:var(--rose-soft)}
.cabtrip .cabin{display:grid;gap:4px;padding:14px 16px 14px 14px;align-content:center;justify-items:start}
.cabtrip .chip{background:var(--cream);padding:3px 10px;font-size:11px}
.cabtrip b{font-size:17px;line-height:1.25}.cabtrip small{color:var(--muted);font-size:13px}.cabtrip em{font-style:normal;font-size:12px;color:var(--ok);font-weight:600}
.cabtrip i{position:absolute;right:14px;bottom:12px;font-style:normal;font-weight:700;font-size:13px;color:var(--rose)}
.cabacc{display:grid;gap:10px}.cabacc .cta-row{margin-top:8px}