:root{--bg:#fffef9;--card:#fff;--ink:#3f4937;--muted:#92a284;--line:#f0efe5;--primary:#e0dd7b;--primarydark:#b8b559;--light:#fefef1;--purple:#dcf2c9;--blue:#90c088;--radius:23px;--shadow:0 18px 48px #cccb9e1c;font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;scroll-behavior:smooth}body{background:radial-gradient(ellipse at 5% 2%,#fef8e1 0,transparent 35%),radial-gradient(ellipse at 100% 25%,#edfae2 0,transparent 35%),linear-gradient(160deg,#fffef9,#fffffd 48%,#fbfef8);font-size:14px;letter-spacing:-.025em}body:has(.story-overlay){overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a6cc85;outline-offset:2px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.hidden{display:none!important}.small{font-size:12px}.muted{color:var(--muted)}.eyebrow{color:#bdbb73;text-transform:uppercase;font-size:10px;letter-spacing:.17em;font-weight:800}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.tight{gap:6px}.pill{border-radius:999px;border:1px solid #ecebdf;padding:7px 12px;background:#fffff8;color:#96956c;font-size:11px;font-weight:750;white-space:nowrap}.pill.blue{background:#f1fbf0;color:#71a369;border-color:#ddf2da}.pill.soft{background:#fffef4;color:#bcba7c}.surface{background:var(--card);border:1px solid #f0efe4;border-radius:var(--radius);box-shadow:var(--shadow)}.main-btn,.ghost-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.35;border-radius:15px;min-height:43px;padding:12px 18px;font-weight:790;border:1px solid transparent;transition:transform .16s,background .16s}.main-btn{background:#e0dd7c;color:white;box-shadow:0 9px 20px #e2df9253}.main-btn:hover{background:#d4d16f;transform:translateY(-1px)}.main-btn.blue{background:#8fc486;box-shadow:0 9px 20px #95ca8c56}.main-btn.blue:hover{background:#83b87a}.ghost-btn{background:#fffef4;border-color:#f0f0dd;color:#b5b369}.outline-btn{background:#fff;border-color:#eae9dc;color:#807e5c}.full{width:100%}.square-btn{width:37px;height:37px;padding:0;min-height:37px;border:1px solid #f0f0e1;background:#fff;border-radius:13px;color:#a6a480;font-size:20px;display:grid;place-items:center}.divider{border-top:1px solid #f0efe5;margin:18px 0}.tiny-count{color:#abaa8a;font-size:12px}.bold{font-weight:800}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.05em}h2{font-size:25px;line-height:1.25;margin-bottom:8px}h3{font-size:16px;line-height:1.35;margin-bottom:7px}.paragraph{font-size:14px;line-height:1.85;color:#80936f;word-break:keep-all}.tiny{font-size:11px}
/* Intro */
.intro{min-height:100dvh;display:grid;place-items:center;padding:28px 16px 44px}.intro-wrap{width:min(100%,975px)}.intro-top{text-align:center;margin:0 auto 26px}.intro-logo{width:68px;height:68px;border-radius:23px;display:grid;place-items:center;margin:0 auto 19px;background:#fff;box-shadow:0 12px 25px #d5d3972b;border:1px solid #fefde6;color:#e9e687;font-size:31px}.intro-top h1{font-size:clamp(34px,5vw,54px);margin:4px 0 13px;color:#52523c}.intro-top p{font-size:14px;color:#a1a07e;line-height:1.85}.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.route-card{position:relative;overflow:hidden;background:#fff;border-radius:30px;border:1px solid #f2f2e5;box-shadow:0 22px 60px #c7c59524;text-align:left;padding:0;transition:transform .2s,box-shadow .2s}.route-card:hover{transform:translateY(-4px);box-shadow:0 28px 65px #c8c6883a}.route-cover{position:relative;height:220px;overflow:hidden;background:#fefaea}.route-cover img{width:100%;height:100%;object-fit:cover}.route-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#fffff8 0%,transparent 55%)}.route-content{padding:18px 24px 27px}.route-identity{display:flex;align-items:center;gap:11px;margin-top:-52px;position:relative;margin-bottom:18px;z-index:1}.avatar{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;overflow:hidden;flex:none;border:2px solid #fff;background:#fff;box-shadow:0 5px 14px #a9943b2c}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avatar.blue{background:linear-gradient(145deg,#d2ecd6,#a4d69b);color:#5b8753}.avatar.md{width:51px;height:51px;border-radius:19px;font-size:21px}.avatar.lg{width:65px;height:65px;border-radius:23px;font-size:28px}.route-content h2{font-size:30px;margin:0}.route-content .paragraph{min-height:52px}.route-action{display:flex;align-items:center;justify-content:space-between;padding-top:17px;border-top:1px solid var(--line);color:#b9b669;font-weight:800}.route-action.blue{color:#73ad68}.intro-foot{font-size:12px;text-align:center;color:#bdbca3;margin-top:25px}
/* Main chrome */
.app-shell{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;min-height:100dvh;padding:24px 22px}.sidebar{background:#fffefaed;border:1px solid #f0efe3;border-radius:27px;padding:21px 14px;box-shadow:0 10px 38px #d4d3a824;position:sticky;align-self:start;top:22px;min-height:calc(100dvh - 48px);display:flex;flex-direction:column}.side-logo{font-size:20px;font-weight:900;letter-spacing:-.06em;color:#66654a;padding:7px 12px 22px}.side-logo span{color:#e1de83}.side-route{display:flex;align-items:center;gap:11px;padding:13px 10px;background:#fefef3;border:1px solid #f1f1e0;border-radius:19px;margin-bottom:22px}.side-route.blue{background:#f2fbf1;border-color:#e1f3dd}.side-route strong{display:block;font-size:14px}.side-route small{display:block;color:#acab8c;font-size:11px;margin-top:2px}.side-nav{display:grid;gap:7px}.nav-btn{width:100%;border:0;background:transparent;color:#9a9974;border-radius:13px;display:flex;align-items:center;gap:11px;padding:13px 12px;text-align:left;font-size:13px;font-weight:750}.nav-btn span:first-child{font-size:19px;width:23px;text-align:center}.nav-btn:hover{background:#fefef1}.nav-btn.active{background:#fefde9;color:#b4b158}.route-blue .nav-btn.active{background:#eaf7e8;color:#69a35f}.side-bottom{margin-top:auto;padding:17px 4px 2px}.side-bottom button{width:100%;text-align:left;border:0;background:transparent;color:#aeac8e;font-size:12px;padding:11px}.side-bottom button:hover{color:#a9a764}.page{width:100%;min-width:0;padding-bottom:60px}.app-top{height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 5px 12px;margin-bottom:19px}.app-top strong{font-size:15px}.app-top .topday{font-size:12px;color:#a8a787;font-weight:600;margin-top:4px}.top-actions{display:flex;gap:9px;align-items:center}.topchip{border:1px solid #efefe1;color:#9f9e70;background:#fffefa;padding:9px 13px;border-radius:999px;font-weight:800;font-size:12px}.mobile-nav{display:none}.mobile-head{display:none}.page-inner{max-width:985px}.page-heading{margin-bottom:20px}.page-heading p{line-height:1.7;color:#a5a482;font-size:13px;margin:7px 0 0}.page-heading h1{font-size:clamp(25px,3vw,31px);margin:5px 0 0}
/* home */
.hero-home{border-radius:29px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(260px,.93fr);background:linear-gradient(140deg,#fefef3,#faf9ef 70%,#effced);border:1px solid #f4f4e0;box-shadow:0 19px 46px #d5d4a81f;min-height:295px}.hero-copy{padding:32px 31px 26px;display:flex;flex-direction:column;align-items:start;justify-content:center}.hero-copy h2{font-size:31px;line-height:1.3;margin:13px 0}.hero-copy p{line-height:1.85;color:#92916a;word-break:keep-all;font-size:14px}.hero-copy .hero-cta{margin-top:10px}.hero-art{position:relative;overflow:hidden;min-height:290px}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-art:after{content:"";inset:0;position:absolute;background:linear-gradient(90deg,#faf9ef 0%,transparent 40%)}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;margin-top:19px}.section-card{padding:22px}.mini-title{font-size:15px;font-weight:850;margin-bottom:17px}.todo-row{display:flex;align-items:center;gap:13px;background:#fffffb;border:1px solid #f2f1e9;border-radius:15px;padding:12px 13px;margin-bottom:9px}.todo-row .num{width:32px;height:32px;border-radius:11px;background:#f9f9e8;display:grid;place-items:center;color:#b8b66d;font-size:17px}.todo-row.done .num{background:#eaf5eb;color:#629a78}.todo-row .todo-copy{flex:1;min-width:0}.todo-row strong{font-size:12px;display:block;margin-bottom:3px}.todo-row small{font-size:11px;color:#a7a685}.todo-row button{font-size:11px;border:0;background:#fefef1;color:#bbb972;border-radius:10px;padding:9px 11px;font-weight:750;white-space:nowrap}.today-event{background:#fffdf5;border:1px solid #f0f0dd;padding:16px;border-radius:18px;margin-top:17px}.today-event small{font-size:11px;color:#a4a382}.today-event strong{display:block;margin:7px 0;font-size:15px}.today-event p{color:#9c9b77;line-height:1.65;font-size:12px}.meter-row{margin:14px 0 18px}.meter-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;margin-bottom:9px}.meter-track{height:9px;border-radius:99px;background:#f3f2ea;overflow:hidden}.meter-track .meter-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f5e8b3,#d4d173);transition:width .45s}.meter-track .meter-fill.blue{background:linear-gradient(90deg,#a6d6ac,#92c48a)}.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px}.mini-cal div{height:28px;display:grid;place-items:center;border:1px solid #f1f0e6;background:#fff;border-radius:8px;color:#b8b79c;font-size:10px}.mini-cal div.past{background:#fefaeb;color:#c4c27d}.mini-cal div.today{background:#dedb80;color:white;border-color:#dedb80;font-weight:800}.route-blue .mini-cal div.today{background:#90c687;border-color:#90c687}
/* chat / dm */
.chat-window{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0;border-radius:24px;overflow:hidden;border:1px solid #ebeadf;background:white;min-height:640px;box-shadow:var(--shadow)}.chat-list{background:#fffffb;border-right:1px solid var(--line);padding:22px 12px}.chat-list .list-title{padding:0 9px 18px;font-size:18px;font-weight:900}.chat-contact{display:flex;align-items:center;gap:10px;width:100%;padding:12px 9px;text-align:left;border:0;border-radius:16px;background:#fefeef;color:#646348}.chat-contact strong{display:block;font-size:13px}.chat-contact small{color:#a6a483;font-size:11px}.chat-main{display:flex;flex-direction:column;min-width:0;background:#f9fcf7;max-height:690px}.chat-head{background:white;display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid #f2f1e8;flex:0 0 auto}.chat-head strong{font-size:14px}.chat-head small{display:block;font-size:10px;color:#adac8e;margin-top:3px}.message-scroll{padding:20px;overflow-y:auto;flex:1;min-height:340px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin}.chat-date{text-align:center;background:#fff;border:1px solid #f0efe7;color:#bbbaa1;font-size:10px;padding:6px 13px;border-radius:999px;margin:15px auto 7px}.bubble-line{display:flex;align-items:flex-end;gap:7px;max-width:88%;align-self:flex-start}.bubble-line.mine{align-self:flex-end;flex-direction:row-reverse}.bubble-text{background:white;border:1px solid #eeede3;color:#515d47;border-radius:17px 17px 17px 5px;padding:12px 14px;line-height:1.65;font-size:13px;word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 4px 10px #c7c6a411}.mine .bubble-text{background:#fefde0;border-color:#f5f4d2;color:#66654a;border-radius:17px 17px 5px 17px}.route-blue .mine .bubble-text{background:#e5f7e1;border-color:#d1edcc}.bubble-tick{font-size:9px;color:#bcbba2;flex:none}.chat-input-area{flex:none;background:#fff;border-top:1px solid #f1f0e4;padding:14px 17px 19px}.reply-hint{color:#a6a483;font-size:11px;font-weight:800;margin-bottom:9px}.quick-choices{display:grid;gap:7px;margin-bottom:11px;max-height:170px;overflow-y:auto}.choice-btn{text-align:left;border:1px solid #efefdd;background:#fffff8;border-radius:13px;padding:10px 12px;line-height:1.5;font-size:12px;color:#6d6c4f}.choice-btn.selected{background:#fefde8;border-color:#d8d596;color:#838145}.route-blue .choice-btn.selected{background:#ebf9e8;border-color:#a1cd99;color:#63965a}.compose-bar{display:flex;align-items:center;gap:10px;border:1px solid #eae9de;border-radius:100px;background:#fff;padding:6px 6px 6px 14px}.compose-bar span{font-size:20px;color:#c9c792}.compose-bar input{border:0;outline:0;min-width:0;flex:1;color:#605f45;font-size:12px;background:transparent;text-overflow:ellipsis}.send-circle{border:0;border-radius:50%;background:#dedb81;width:36px;height:36px;color:white;display:grid;place-items:center;font-size:19px}.route-blue .send-circle{background:#92c38a}.send-circle:disabled{background:#e7e6dc;color:#bbbaa0}.chat-done{padding:14px;text-align:center;font-size:12px;color:#a7a686;background:#fffff9;border-radius:13px;line-height:1.7}.chat-note{font-size:11px;color:#bab9a0;margin-top:11px}
/* instagram */
.social-switch{display:flex;gap:7px;padding:6px;background:#fff;border:1px solid #f0efe6;border-radius:17px;width:max-content;max-width:100%;margin-bottom:18px}.social-switch button{background:transparent;border:0;padding:11px 17px;border-radius:12px;font-weight:800;color:#aaa989;font-size:12px}.social-switch button.active{background:#fefeee;color:#bab767}.route-blue .social-switch button.active{background:#ebf9e8;color:#74ae6a}.social-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,260px);gap:18px;align-items:start}.post{overflow:hidden;background:#fff;border:1px solid #f0efe3;border-radius:23px;box-shadow:var(--shadow)}.post-top{padding:13px 16px;display:flex;align-items:center;gap:10px}.post-top strong{font-size:13px}.post-top small{font-size:10px;color:#b0af91}.post-photo{background:#fefef1;aspect-ratio:4/5}.post-photo img{height:100%;width:100%;object-fit:cover}.post-bottom{padding:10px 16px 17px}.post-actions{display:flex;gap:6px;align-items:center}.icon-btn{background:transparent;border:0;min-width:40px;min-height:40px;color:#898864;font-size:27px;display:grid;place-items:center;padding:0}.icon-btn.liked{color:#d7d36d}.post-caption{font-size:13px;color:#7d7c5a;line-height:1.85;margin:7px 0 0;word-break:keep-all}.post-caption strong{color:#51503b}.post-like-text{font-weight:800;color:#999872;font-size:11px}.social-side{padding:18px}.social-side h3{font-size:14px}.story-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.story-thumb{background:white;border:1px solid #efefe2;border-radius:18px;padding:11px 5px 9px;text-align:center;min-width:0;color:#858460}.story-ring{margin:0 auto 7px;width:66px;height:66px;border:3px solid #e8e69d;padding:3px;border-radius:50%;overflow:hidden}.route-blue .story-ring{border-color:#9fce97}.story-ring img{height:100%;width:100%;border-radius:50%;object-fit:cover}.story-thumb small{font-size:10px;display:block}.story-thumb[disabled]{opacity:.45}.social-day-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding-bottom:5px}.social-day-nav button{white-space:nowrap;background:#fff;border:1px solid #f0efe2;border-radius:999px;color:#a7a685;font-weight:750;font-size:11px;padding:9px 13px}.social-day-nav button.active{background:#e2df82;color:white;border-color:#e2df82}.route-blue .social-day-nav button.active{background:#92c38a;border-color:#92c38a}.reply-list{margin-top:12px;display:grid;gap:8px}.reply-list button{border-radius:12px;border:1px solid #eeede0;padding:11px;background:#fffff8;color:#7e7d5b;text-align:left;font-size:12px}.dm-sheet{max-width:620px}
/* calendar */
.cal-sheet{padding:22px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:15px}.calendar-day{min-width:0;background:#fffffa;border:1px solid #f1f0e4;border-radius:15px;padding:13px 4px;display:grid;gap:5px;place-items:center;color:#b8b79d}.calendar-day span{font-size:11px}.calendar-day strong{font-size:17px}.calendar-day.current{border-color:#e8e58e;background:#fefef2;color:#bab75e}.calendar-day.sel{box-shadow:inset 0 0 0 2px #e5e28b}.route-blue .calendar-day.current{border-color:#9dcf94;background:#effbed;color:#72a26a}.calendar-day.finished{background:#f6fff9;color:#6c9972}.calendar-detail{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:22px;margin-top:19px;padding:20px;border-radius:21px;background:#fffef7;border:1px solid #efefdf}.calendar-detail .art{border-radius:16px;overflow:hidden;align-self:start;aspect-ratio:4/5}.calendar-detail .art img{width:100%;height:100%;object-fit:cover}.event-options{display:flex;gap:9px;flex-wrap:wrap;margin:17px 0 0}.event-summary{background:#fff;padding:15px;border-radius:14px;border:1px solid #f2f1e4;font-size:13px;line-height:1.8;color:#83825f;margin-top:13px}
/* notes */
.notes-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}.note-tabs{padding:13px}.note-link{display:flex;align-items:center;gap:9px;background:transparent;border:0;width:100%;border-radius:12px;padding:14px;color:#a3a17f;font-size:12px;text-align:left}.note-link.active{background:#fefef1;color:#bab768;font-weight:800}.route-blue .note-link.active{background:#f0fbee;color:#73ac69}.note-pad{padding:23px}.note-pad textarea{display:block;width:100%;resize:vertical;min-height:380px;border:0;outline:none;background:transparent;color:#515d46;font-size:14px;line-height:2.1;word-break:keep-all}.note-meta{font-size:11px;color:#afae90;margin-top:15px}.notebook-lines{background:repeating-linear-gradient(transparent 0,transparent 32px,#f4f3e8 33px,#f4f3e8 34px)}.auto-note{background:#fffff8;border:1px solid #efefe2;padding:13px;border-radius:14px;margin:0 0 12px;font-size:12px;color:#989771;line-height:1.8}
/* status & endings */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:17px}.profile-panel{padding:24px}.profile-main{display:flex;gap:14px;align-items:center;margin-bottom:22px}.stat-block{background:#fffffb;padding:15px 17px;border-radius:15px;border:1px solid #f2f1e7;margin:13px 0}.stat-block h3{font-size:12px;color:#a2a17e}.stat-number{font-size:23px;font-weight:900}.status-facts{display:grid;gap:12px}.fact-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #f3f2e8;font-size:12px;color:#96956e}.fact-row strong{color:#605f45}.ending-screen{max-width:750px;margin:25px auto;text-align:center}.ending-cover{height:230px;overflow:hidden;position:relative;border-radius:24px 24px 0 0}.ending-cover img{width:100%;height:100%;object-fit:cover}.ending-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#fff 5%,transparent 88%)}.ending-body{padding:10px 28px 32px}.ending-body h2{font-size:32px;margin:9px 0 13px}.ending-body p{line-height:1.95;color:#999872;font-size:14px;word-break:keep-all}.ending-choices{display:grid;gap:10px;max-width:500px;margin:20px auto 6px}.ending-choices button{background:#fffff8;border:1px solid #edecd0;border-radius:17px;padding:16px;text-align:left;color:#7a7959;font-weight:800}.ending-choices button:hover{background:#fefdea}.ending-caption{font-size:11px;color:#b4b397;margin:20px 0 0}.result-tag{color:#bbb866;background:#fefef1;border:1px solid #efeed7;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:850;display:inline-flex}
/* story fullscreen */
.story-overlay{position:fixed;inset:0;z-index:400;background:#141a0fd9;display:grid;place-items:center;padding:14px;backdrop-filter:blur(9px)}.story-viewer{height:min(94dvh,790px);width:min(100%,448px);border-radius:25px;background:#2c3326;overflow:hidden;position:relative;box-shadow:0 28px 65px #0005;color:white;user-select:none}.story-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,#1e291596,transparent 22%,transparent 48%,#161d0fbb 100%)}.story-top{position:absolute;inset:0 0 auto;padding:12px 13px;z-index:4}.story-progress{display:flex;gap:5px;margin-bottom:11px}.story-progress span{flex:1;height:3px;border-radius:20px;background:#ffffff52;overflow:hidden}.story-progress span i{display:block;height:100%;width:0;background:#fff;border-radius:20px}.story-head{display:flex;align-items:center;gap:9px}.story-head strong{font-size:13px}.story-head small{display:block;color:#ffffffbf;font-size:10px;margin-top:2px}.story-head .avatar{width:36px;height:36px;border-radius:14px;font-size:16px}.story-close,.story-pause{background:#0003;border:1px solid #ffffff3a;border-radius:50%;color:white;width:35px;height:35px;display:grid;place-items:center;flex:none;font-size:18px;padding:0}.story-hit{position:absolute;z-index:2;top:19%;bottom:36%;border:0;background:transparent;width:35%}.story-hit.next{right:0;width:65%}.story-hit.prev{left:0}.story-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:18px 17px 23px}.story-bottom strong{font-size:19px;display:block;text-shadow:0 2px 10px #0005;margin-bottom:8px}.story-bottom p{font-size:13px;line-height:1.65;text-shadow:0 2px 10px #0005;color:#fffff9}.story-options{display:grid;gap:8px;margin-top:15px}.story-options button{background:#ffffffec;color:#4f5b45;border:0;border-radius:13px;padding:13px 14px;text-align:left;font-weight:750;font-size:12px;line-height:1.45}.story-reaction{background:#ffffff35;border:1px solid #ffffff50;border-radius:16px;padding:13px;color:#fff;font-size:12px;line-height:1.75;backdrop-filter:blur(8px)}.story-status{font-size:10px;color:#ffffffc7;margin-top:8px}
/* toast & modals */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);opacity:0;background:#55543d;color:#fff;padding:12px 19px;border-radius:999px;font-size:12px;box-shadow:0 15px 30px #3e4a3430;z-index:900;pointer-events:none;transition:transform .2s,opacity .2s;white-space:nowrap;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}.confirm-overlay{position:fixed;inset:0;background:#20261a88;z-index:490;display:grid;place-items:center;padding:18px}.confirm-box{width:min(100%,440px);background:white;border-radius:23px;padding:25px;box-shadow:0 24px 60px #28281b30}.confirm-box p{line-height:1.75;color:#94936b}.confirm-box .row{justify-content:flex-end}
@media(max-width:950px){.app-shell{grid-template-columns:185px minmax(0,1fr);gap:13px;padding:14px}.sidebar{min-height:calc(100dvh - 28px);top:14px}.home-grid{grid-template-columns:minmax(0,1fr)}.home-grid>.surface:last-child{max-width:none}.social-grid{grid-template-columns:minmax(0,1fr)}.social-side{display:none}.chat-window{grid-template-columns:175px minmax(0,1fr)}.notes-grid{grid-template-columns:170px minmax(0,1fr)}}
@media(max-width:690px){body{font-size:13px}.intro{padding:24px 14px 36px}.intro-top h1{font-size:39px}.intro-top p{font-size:13px}.route-grid{grid-template-columns:1fr;gap:15px}.route-card{border-radius:24px}.route-cover{height:150px}.route-content{padding:17px 19px 20px}.route-content h2{font-size:25px}.route-content .paragraph{min-height:0;font-size:13px}.route-identity{margin-top:-47px;margin-bottom:10px}.intro-foot{line-height:1.7}.app-shell{display:block;padding:0;min-height:100dvh}.sidebar{display:none}.page{padding:0 13px 100px;max-width:690px;margin:0 auto}.mobile-head{display:flex;align-items:center;justify-content:space-between;height:72px;padding:8px 15px;gap:12px;background:#ffffffa8;border-bottom:1px solid #f2f1e5}.mobile-head .row{gap:8px}.mobile-head strong{font-size:14px}.mobile-head small{display:block;font-size:10px;color:#b1b093}.mobile-head .square-btn{width:33px;height:33px;min-height:33px}.app-top{height:auto;margin:0 0 12px;padding:16px 3px 3px}.app-top .topchip{font-size:10px;padding:8px 10px}.page-heading{margin-bottom:16px}.page-heading h1{font-size:24px}.page-heading p{font-size:12px}.mobile-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;z-index:110;bottom:0;left:0;right:0;gap:0;padding:7px 8px calc(8px + env(safe-area-inset-bottom));background:#ffffffed;border-top:1px solid #eeeedf;box-shadow:0 -10px 30px #b9b88b1b;backdrop-filter:blur(14px)}.mobile-nav button{border:0;background:transparent;border-radius:11px;display:grid;justify-items:center;align-content:center;gap:4px;min-width:0;min-height:51px;color:#a3a281;font-size:9px;font-weight:700}.mobile-nav button span{font-size:19px}.mobile-nav button.active{color:#c6c36d;background:#fefef2}.route-blue .mobile-nav button.active{background:#f0fbee;color:#7db374}.hero-home{display:flex;flex-direction:column-reverse;min-height:0;border-radius:23px}.hero-art{height:205px;min-height:0}.hero-art img{object-position:50% 48%}.hero-art:after{background:linear-gradient(0deg,#faf9ef 0%,transparent 45%)}.hero-copy{padding:0 19px 22px}.hero-copy h2{font-size:25px;margin:9px 0}.hero-copy p{font-size:12px}.home-grid{gap:14px;margin-top:14px}.section-card{padding:17px}.mini-title{font-size:14px}.todo-row{padding:11px}.todo-row button{padding:8px 9px}.chat-window{display:flex;flex-direction:column;min-height:min(74dvh,700px);border-radius:21px}.chat-list{display:none}.chat-main{min-height:calc(100dvh - 235px);max-height:calc(100dvh - 180px)}.chat-head{padding:12px 13px}.message-scroll{padding:15px 12px;min-height:230px}.bubble-line{max-width:92%}.bubble-text{font-size:12px;padding:11px 12px}.chat-input-area{padding:12px}.quick-choices{max-height:140px}.choice-btn{padding:10px;font-size:12px}.post{border-radius:19px}.post-photo{aspect-ratio:4/5}.post-bottom{padding:10px 13px 15px}.social-switch{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.social-switch button{padding:11px 4px}.story-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.story-ring{width:59px;height:59px}.calendar-grid{gap:5px}.calendar-day{padding:10px 1px;border-radius:11px}.calendar-day strong{font-size:14px}.calendar-day span{font-size:10px}.cal-sheet{padding:16px}.calendar-detail{grid-template-columns:minmax(0,1fr);padding:16px;gap:14px}.calendar-detail .art{display:none}.event-options{display:grid;grid-template-columns:1fr 1fr}.event-options button{font-size:12px;padding:12px 6px}.notes-grid{grid-template-columns:minmax(0,1fr);gap:9px}.note-tabs{display:flex;gap:5px;padding:7px;overflow-x:auto}.note-link{width:auto;white-space:nowrap;padding:10px 12px;flex:none}.note-pad{padding:19px}.note-pad textarea{min-height:350px;font-size:13px}.profile-grid{grid-template-columns:1fr;gap:12px}.profile-panel{padding:19px}.story-overlay{padding:0;background:#202918}.story-viewer{width:100vw;height:100dvh;max-width:none;border-radius:0}.story-bottom{padding:18px 14px calc(20px + env(safe-area-inset-bottom))}.story-bottom strong{font-size:18px}.story-bottom p{font-size:13px}.story-options button{min-height:49px}.toast{bottom:85px}.ending-screen{margin:10px auto}.ending-cover{border-radius:20px 20px 0 0;height:180px}.ending-body{padding:8px 18px 26px}.ending-body h2{font-size:27px}}
@media(max-width:385px){.mobile-nav{padding-left:4px;padding-right:4px}.mobile-nav button{font-size:9px}.mobile-nav button span{font-size:17px}.story-options button{font-size:11px}.intro-top h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Play-as identity: every route card distinguishes player and love interest. */
.role-pair{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:15px 0 8px;color:#8a8964;font-size:13px;line-height:1.4}
.role-pair strong{background:#fefef1;border:1px solid #ececd9;border-radius:100px;padding:8px 11px;font-size:12px;font-weight:800;color:#9b9956}
.role-pair span{color:#b5b499;font-size:19px}
.route-card:nth-child(2) .role-pair strong{background:#f0fbee;border-color:#ddf2d9;color:#6a9a62}
.role-minilabel{display:block;font-size:11px;color:#a5a37e;font-weight:750;margin-bottom:3px}
.side-route strong{font-size:13px}
.route-content .paragraph{min-height:57px}
@media(max-width:650px){.role-pair{gap:6px}.role-pair strong{font-size:11px;padding:7px 9px}.route-content .paragraph{min-height:0}}


/* LEMON × MATCHA • bright romantic dating sim theme */
:root{
  --bg:#fbfff1;
  --card:#fffef8;
  --ink:#34452e;
  --muted:#758369;
  --line:#e4eacb;
  --primary:#e7bc39;
  --primarydark:#926c20;
  --light:#fff6ce;
  --purple:#dcecae;
  --blue:#8fba78;
  --radius:23px;
  --shadow:0 18px 48px #798c491a;
  color:var(--ink);
}
body{
 background:radial-gradient(ellipse at 4% 0%,#fff0b1 0,transparent 41%),
            radial-gradient(ellipse at 100% 20%,#daf1b9 0,transparent 41%),
            linear-gradient(165deg,#fffcde 0%,#fffef6 42%,#f3fce7 100%);
 color:var(--ink);
}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#94ab4a}
.eyebrow{color:#788f35}
.intro-logo{color:#9b9b32;background:#fffef4;border-color:#e5ebbf;box-shadow:0 12px 26px #adb96528}
.intro-top h1{color:#39472f}
.intro-top p,.intro-foot,.paragraph{color:#7d866d}
.route-card{background:#fffefa;border-color:#e5ebd1;box-shadow:0 22px 60px #849c5424}
.route-card:hover{box-shadow:0 26px 65px #91a65932}
.route-card:first-child .route-cover{background:#fbe5a0}
.route-card:last-child .route-cover{background:#d0ebb0}
.route-card:first-child .route-cover:after{background:linear-gradient(0deg,#fffef7 0%,#f9eab358 48%,transparent 100%)}
.route-card:last-child .route-cover:after{background:linear-gradient(0deg,#fffef7 0%,#bce5b058 48%,transparent 100%)}
.route-cover img{filter:saturate(.9)}
.avatar{background:linear-gradient(145deg,#fff0a0,#e8c851);color:#66551d;box-shadow:0 5px 14px #a9943b2c}
.avatar.blue{background:#f7fff2;box-shadow:0 5px 14px #78ab6828}
.route-action{color:#80661d}
.route-action.blue{color:#4d7b41}
.role-pair{color:#687d40}
.role-pair strong{background:#fff8ce;border:1px solid #eadd9b;color:#7e6227}
.route-card:nth-child(2) .role-pair strong{background:#e9f5d8;border-color:#cbe1b2;color:#49793d}
.role-pair span{color:#7b9859}
.pill{background:#fff9df;border-color:#e9e6c6;color:#7b6939}
.pill.blue{background:#eff8e8;border-color:#d0e6be;color:#497a46}
.pill.soft{background:#f0f7d9;color:#678139}
.surface,.sidebar{background:#fffefa;border-color:#e7ebd5;box-shadow:var(--shadow)}
.main-btn{background:#f1c94d;color:#3d4527;border-color:#eac046;box-shadow:0 9px 19px #d5b6504f}
.main-btn:hover{background:#e6bb3b}
.main-btn.blue{background:#66954e;color:#fff;box-shadow:0 9px 20px #71975a42}
.main-btn.blue:hover{background:#507e3e}
.ghost-btn{background:#fff8de;border-color:#ebdfba;color:#806a26}
.ghost-btn:hover{background:#fff1c0}
.outline-btn{border-color:#dfe7c8;color:#526b3d;background:#fffef8}
.outline-btn:hover{background:#f2f9e7}
.side-logo{color:#3d502d}
.side-logo span{color:#d5ae31}
.side-route{background:#fff7d6;border-color:#eae1bd}
.side-route.blue{background:#eff9e5;border-color:#d4e7c1}
.nav-btn:hover{background:#f7f7da}
.nav-btn.active{background:#fff0b1;color:#766020}
.route-blue .nav-btn.active{background:#ddf2cb;color:#40733e}
.topchip{background:#fff9e4;color:#75652c;border-color:#e5e7c5}
.hero-home{background:linear-gradient(145deg,#fff4c4,#f8f9d9 65%,#e4f4cd);border-color:#e8e7bb;box-shadow:0 18px 46px #95a85e20}
.hero-art:after{background:linear-gradient(90deg,#f8f9d9 0%,transparent 45%)}
.todo-row{background:#fffefa;border-color:#e9ead5}
.todo-row .num{background:#f8ecc2;color:#8e742b}
.todo-row.done .num{background:#e4f5d3;color:#4a8841}
.todo-row button{background:#fff1be;color:#806525}
.today-event{background:#fff9d9;border-color:#eee3b4}
.meter-track{background:#ecf0d9}
.meter-track .meter-fill{background:linear-gradient(90deg,#f4e28a,#dfb933)}
.meter-track .meter-fill.blue{background:linear-gradient(90deg,#c9ebb0,#76b46b)}
.mini-cal div.today{color:#384229;background:#edc545;border-color:#e1ba3b}
.route-blue .mini-cal div.today{color:white;background:#649750;border-color:#649750}
.chat-window,.chat-head{border-color:#e3e8d3;background:#fffef9}
.chat-list{background:#fcfde9}
.chat-contact{background:#f4f7d8;color:#4e653d}
.chat-main,.message-scroll{background:#f5f9ea}
.bubble-text{background:#fffef7;border-color:#e7ead8;color:#455341}
.mine .bubble-text{background:#fff1b8;border-color:#e7d58e;color:#4c492c}
.route-blue .mine .bubble-text{background:#e0f3cd;border-color:#c2dcae;color:#344f37}
.chat-input-area,.dm-compose{background:#fffef8;border-color:#e1e9ce}
.story-overlay{background:#25351f}
.mobile-head{background:#fffef1e8;border-bottom-color:#e5e9d0}
.mobile-nav{background:#fffef4ef;border-top-color:#e3e9cb;box-shadow:0 -10px 30px #849c561b}
.mobile-nav button{color:#708064}
.mobile-nav button.active{background:#fff0bf;color:#79621f}
.route-blue .mobile-nav button.active{background:#e5f4d7;color:#4c7c41}
.toast{background:#435636;color:white}
/* ensure all paragraphs and content boxes stay readable */
input,textarea{color:#39492f}
::selection{background:#e1edb0;color:#31432c}
@media(max-width:690px){
  .hero-art:after{background:linear-gradient(0deg,#f8f9d9 0%,transparent 45%)}
  .mobile-head{background:#fffef4f2;border-bottom-color:#dfe8c5}
  .mobile-nav{background:#fffef3f5;border-top-color:#e2e8c7}
}

/* Lemon × matcha cover tint, without changing any illustration files. */
.route-card:first-child .route-cover img,
.route-blue .hero-art img{filter:sepia(.18) saturate(.86) hue-rotate(8deg)}
.route-card:last-child .route-cover img,
.app-shell:not(.route-blue) .hero-art img{filter:hue-rotate(70deg) saturate(.82) brightness(1.04)}



/* CHAT · Discord-inspired, separate from Instagram DM */
.discord-chat{--dc-dark:#313338;--dc-side:#2b2d31;--dc-rail:#1e1f22;--dc-text:#f2f3f5;--dc-muted:#aeb3bc;display:grid;grid-template-columns:58px 184px minmax(0,1fr);height:min(76dvh,740px);min-height:595px;min-width:0;overflow:hidden;border-radius:22px;border:1px solid #28292d;box-shadow:0 20px 44px #29352b26;background:var(--dc-dark);font-family:inherit}
.dc-server-rail{background:var(--dc-rail);display:flex;align-items:center;flex-direction:column;gap:13px;padding:17px 8px}
.dc-server{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;font-size:21px;color:#9ba4a9;background:#36393f}
.dc-server.active{background:#b7d99e;color:#263f29;border-radius:15px;font-size:26px;box-shadow:0 0 0 2px #cfeaba24}
.dc-server.muted{font-size:18px}.dc-server-divider{height:2px;width:30px;background:#414248;border-radius:2px}
.dc-channel-sidebar{background:var(--dc-side);display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.dc-sidebar-title{font-size:13px;font-weight:850;color:var(--dc-text);height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #222327;white-space:nowrap;gap:8px;box-shadow:0 1px 3px #16161b30}
.dc-sidebar-title span{font-size:18px;color:#a6aab0}.dc-channel-category{font-size:10px;color:#92969c;text-transform:uppercase;font-weight:800;letter-spacing:.06em;padding:0 12px;margin:21px 0 7px}
.dc-channel{border-radius:7px;display:flex;align-items:center;gap:9px;color:#b3b8be;margin:0 8px;padding:10px 11px;font-size:19px;font-weight:700}
.dc-channel span{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dc-channel.active{background:#41434a;color:#eff0f3}
.dc-friend{display:flex;gap:9px;align-items:center;margin:0 7px;padding:8px 7px;color:var(--dc-text);background:#37393f;border-radius:9px}
.dc-friend .avatar,.dc-me-card .avatar{width:31px;height:31px;border-radius:50%;border:0;box-shadow:none}
.dc-friend strong,.dc-me-card strong{display:block;font-size:12px}.dc-friend small,.dc-me-card small{display:block;color:#969ba4;font-size:10px;margin-top:2px}.dc-online-dot{width:8px;height:8px;background:#7eca91;border-radius:50%;margin-left:auto;flex-shrink:0}
.dc-me-card{margin-top:auto;background:#232428;padding:10px 9px;display:flex;align-items:center;gap:9px;color:var(--dc-text)}
.dc-me-card>div:nth-child(2){min-width:0;flex:1}.dc-me-card>span{font-size:16px;color:#b8bcc1}
.dc-conversation{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--dc-dark)}
.dc-chat-header{height:58px;flex:none;display:flex;align-items:center;gap:10px;color:var(--dc-text);padding:0 18px;border-bottom:1px solid #26272b;box-shadow:0 1px 3px #17171c29}
.dc-hash{color:#9298a1;font-size:29px;font-weight:650}.dc-chat-header strong{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dc-chat-header small{color:#b3b6be;font-size:11px;white-space:nowrap}.dc-header-divider{height:22px;border-left:1px solid #52545b}.dc-header-icons{margin-left:auto;font-size:25px;color:#b7bac0}
.dc-messages{flex:1;min-height:0;overflow:auto;padding:18px 0 15px!important;background:var(--dc-dark)!important;display:block!important;scrollbar-color:#1c1d22 transparent}
.dc-welcome{padding:9px 19px 20px;margin-bottom:10px;color:var(--dc-text);border-bottom:1px solid #474950}
.dc-welcome-photo .avatar{width:62px;height:62px;border-radius:50%;border:0;margin-bottom:12px;box-shadow:none}
.dc-welcome strong{font-size:18px;display:block;margin-bottom:5px}.dc-welcome p{font-size:11px;color:var(--dc-muted);line-height:1.6;margin:0}
.dc-day{height:25px;display:flex;align-items:center;text-align:center;gap:10px;color:#a0a5ae;margin:15px 16px 12px;font-size:10px;font-weight:700}
.dc-day:before,.dc-day:after{content:"";height:1px;background:#464850;flex:1}
.dc-day span{white-space:nowrap}
.dc-message{display:flex;gap:13px;align-items:flex-start;padding:6px 17px;margin:0;min-height:50px;color:var(--dc-text);transition:background .16s}
.dc-message:hover{background:#36383e}.dc-userphoto .avatar{width:38px;height:38px;border:0;border-radius:50%;box-shadow:none}
.dc-message-detail{min-width:0;flex:1}.dc-message-info{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.dc-message-name{font-size:13px;color:#d8e9c6}.dc-message.is-self .dc-message-name{color:#f4e7a5}
.dc-message-info time{font-size:10px;color:#90969f;font-weight:400;white-space:nowrap}
.dc-message-content{font-size:13px;line-height:1.65;color:#e8e9ed;word-break:keep-all;overflow-wrap:anywhere}
.dc-composer{flex:none!important;padding:12px 17px 14px!important;background:var(--dc-dark)!important;border-top:0!important}
.dc-composer .reply-hint{color:#b2b5c0;font-size:11px;font-weight:750;margin:0 0 8px 3px}
.dc-composer .quick-choices{display:flex;gap:7px;flex-wrap:wrap;max-height:122px;overflow-y:auto;margin-bottom:11px}
.dc-composer .choice-btn{width:100%;text-align:left;background:#3e4148;color:#e7e8eb;border:1px solid #545761;border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.5}
.dc-composer .choice-btn:hover{background:#4b4d55;border-color:#919b80}
.dc-composer .choice-btn.selected{background:#4b6046;border-color:#a9d296;color:#f7fff5}
.dc-composer .compose-bar{background:#383a40;border:1px solid #4b4d55;border-radius:10px;padding:5px 5px 5px 12px;min-height:47px}
.dc-composer .compose-symbol{color:#aab0b8;font-size:22px}.dc-composer .compose-bar input{color:#f2f3f5;font-size:12px;font-weight:500}
.dc-composer .compose-bar input::placeholder{color:#9298a2}.dc-composer .send-circle{background:#a6cb8a;color:#253624;border-radius:9px;width:38px;height:36px;font-size:18px}
.dc-composer .send-circle:disabled{background:#585b62;color:#898e96}.dc-composer-note{margin:8px 3px 0;color:#a2a6ad;font-size:10px}
.dc-composer .chat-done{border:1px solid #485448;background:#404b40;color:#e0edda;border-radius:9px;padding:13px 12px;text-align:center}

/* INSTAGRAM · Direct Message, separate visual language */
.ig-dm-layout{display:grid;grid-template-columns:minmax(0,590px) minmax(160px,1fr);align-items:start;gap:22px}
.ig-dm-phone{background:#fff;border:1px solid #e4e4e6;border-radius:21px;overflow:hidden;display:flex;flex-direction:column;min-width:0;height:min(76dvh,760px);min-height:585px;box-shadow:0 17px 48px #636b5e17;color:#262626}
.ig-dm-head{height:66px;min-height:66px;display:flex;gap:10px;align-items:center;padding:0 15px;border-bottom:1px solid #eeeeef;background:#fff}
.ig-back{color:#232323;font-size:34px;line-height:1;margin-right:1px}.ig-dm-head .avatar{width:39px;height:39px;border-radius:50%;border:0;box-shadow:none}
.ig-dm-contact{flex:1;min-width:0}.ig-dm-contact strong{display:block;font-size:14px;line-height:1.35;color:#292929}.ig-dm-contact small{font-size:10px;color:#8e8e8e;display:block;margin-top:2px}.ig-chevron{font-size:14px;color:#9b9b9b}
.ig-head-icons{display:flex;align-items:center;gap:16px;color:#2d2d2d;font-size:22px}
.ig-dm-messages{background:#fff!important;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:17px 15px!important;scrollbar-color:#ddd transparent}
.ig-profile-start{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 24px;padding:8px;color:#262626}
.ig-profile-start .avatar{height:74px;width:74px;border-radius:50%;box-shadow:none;border:1px solid #eee;margin-bottom:4px}
.ig-profile-start strong{font-size:15px}.ig-profile-start small{font-size:11px;color:#737373}.ig-profile-label{color:#999;font-size:11px;margin-top:2px}
.ig-date{align-self:center;margin:9px 0 7px;font-size:10px;font-weight:650;color:#969696}
.ig-message{display:flex;align-items:flex-end;gap:7px;max-width:90%;min-width:0}
.ig-message.theirs{align-self:flex-start}.ig-message.mine{align-self:flex-end;justify-content:flex-end}
.ig-message .avatar{width:26px;height:26px;border-radius:50%;border:0;box-shadow:none;flex-shrink:0;margin-bottom:2px}
.ig-bubble{font-size:13px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;padding:11px 14px;border-radius:19px;color:#292929;background:#efefef}
.ig-message.mine .ig-bubble{background:linear-gradient(135deg,#5575ff,#8c4de8);color:#fff;border-bottom-right-radius:6px}
.ig-message.theirs .ig-bubble{border-bottom-left-radius:6px}
.ig-read-receipt{align-self:flex-end;color:#9f9f9f;font-size:10px;margin:-4px 2px 8px}
.ig-composer{flex:none;border-top:1px solid #efefef!important;padding:12px 14px 13px!important;background:white!important}
.ig-composer .reply-hint{color:#777;font-size:11px;margin:0 0 9px 2px}
.ig-composer .quick-choices{display:flex;flex-wrap:wrap;gap:7px;max-height:126px;overflow-y:auto;margin:0 0 11px}
.ig-composer .choice-btn{width:100%;font-size:12px;text-align:left;padding:10px 12px;border:1px solid #e5e5eb;background:#f9f9fb;border-radius:15px;color:#333}
.ig-composer .choice-btn:hover{background:#f2f2fa}.ig-composer .choice-btn.selected{background:#eef0ff;border-color:#8f9bfa;color:#3a4fb0}
.ig-composer .compose-bar{border-radius:999px;border:1px solid #dedee2;background:#fdfdfd;padding:5px 6px 5px 11px;min-height:47px}
.ig-composer .compose-symbol{color:#7b83d9;font-size:22px}.ig-composer .compose-bar input{color:#313131;font-size:12px}
.ig-composer .compose-bar input::placeholder{color:#9c9c9c}.ig-composer .send-circle{width:36px;height:36px;background:#4977ff;color:#fff;border-radius:50%;font-size:23px;line-height:1}
.ig-composer .send-circle:disabled{background:#e3e3e7;color:#a3a3a7}.ig-small-note{color:#9e9ea0;font-size:10px;margin:8px 0 0 2px}
.ig-done{padding:15px 12px;border-radius:13px;background:#f5f5f7;color:#666;text-align:center;font-size:12px}
.ig-side-description{background:#fffef4;border:1px solid #e8eacf;padding:20px 18px;border-radius:19px;color:#5b6b4e}
.ig-side-description h3{font-size:16px;margin:9px 0}.ig-side-description p{font-size:12px;line-height:1.7;color:#829077;margin:6px 0 17px}
.ig-side-card{display:flex;align-items:center;gap:7px;background:#f5f9e5;border-radius:13px;padding:10px 11px;font-size:11px}
.ig-side-card .avatar{width:29px;height:29px;border-radius:50%;border:0}.ig-side-card span{flex:1;white-space:nowrap}.ig-side-card strong{font-size:11px}

@media(max-width:1000px){.ig-dm-layout{grid-template-columns:minmax(0,1fr)}.ig-side-description{display:none}.discord-chat{grid-template-columns:49px 148px minmax(0,1fr)}.dc-server{width:35px;height:35px}.dc-chat-header{padding:0 12px}}
@media(max-width:690px){
 .discord-chat{display:flex;height:calc(100dvh - 249px);min-height:455px;max-height:720px;border-radius:17px}
 .dc-server-rail,.dc-channel-sidebar{display:none}.dc-conversation{width:100%;min-height:0}
 .dc-chat-header{height:52px;min-height:52px;padding:0 12px;gap:7px}.dc-chat-header strong{font-size:13px}.dc-chat-header small{font-size:10px}.dc-hash{font-size:24px}
 .dc-welcome{padding:7px 12px 15px}.dc-welcome-photo .avatar{width:52px;height:52px}.dc-welcome strong{font-size:15px}.dc-welcome p{font-size:11px}
 .dc-message{padding:5px 11px;gap:9px}.dc-userphoto .avatar{width:34px;height:34px}.dc-message-info{gap:6px}.dc-message-name{font-size:12px}.dc-message-info time{font-size:9px}.dc-message-content{font-size:12px;line-height:1.65}
 .dc-composer{padding:9px 10px 11px!important}.dc-composer .quick-choices{max-height:108px;gap:5px;margin-bottom:7px}.dc-composer .choice-btn{font-size:11px;padding:8px 9px}.dc-composer .compose-bar{min-height:44px}.dc-composer .compose-bar input{font-size:11px}
 .ig-dm-phone{height:calc(100dvh - 287px);min-height:440px;max-height:710px;border-radius:17px}.ig-dm-head{height:54px;min-height:54px;padding:0 11px}.ig-dm-contact strong{font-size:13px}.ig-head-icons{font-size:18px;gap:11px}
 .ig-dm-messages{padding:12px 10px!important;gap:7px}.ig-bubble{font-size:12px;padding:10px 12px}.ig-profile-start{margin-bottom:13px}.ig-profile-start .avatar{width:59px;height:59px}.ig-profile-start strong{font-size:13px}
 .ig-composer{padding:9px 10px 10px!important}.ig-composer .quick-choices{max-height:106px;gap:5px;margin-bottom:8px}.ig-composer .choice-btn{font-size:11px;padding:8px 10px}.ig-composer .compose-bar{min-height:43px}.ig-composer .compose-bar input{font-size:11px}
 .ig-small-note{font-size:9px;margin-top:5px}
}
@media(max-width:365px){.dc-header-divider,.dc-chat-header small{display:none}.ig-head-icons{gap:6px}.dc-composer .compose-bar input,.ig-composer .compose-bar input{font-size:10px}}

/* Keep Instagram's composer above the fixed mobile navigation, even on shorter screens. */
@media(max-width:690px){
  .ig-dm-phone{height:max(280px,calc(100dvh - 405px));min-height:0;max-height:none}
  .ig-dm-messages{min-height:0}
}
@media(max-width:690px){
  .discord-chat{height:max(300px,calc(100dvh - 310px));min-height:0;max-height:none}
}


/* Larger, easier-to-read Discord chat (no changes to Instagram DM). */
@media (min-width:691px) {
  .discord-chat {
    height: clamp(730px, 86dvh, 940px);
    min-height: 730px;
    max-height: none;
  }
  .dc-composer .quick-choices { max-height: 205px; }
  .dc-messages { overscroll-behavior: contain; }
}
@media (max-width:690px) {
  /* Give the conversation its own tall, scrollable panel, even on small phones.
     The outer page remains scrollable so the composer can always be reached. */
  .discord-chat {
    height: clamp(700px, 93svh, 860px);
    min-height: 700px;
    max-height: none;
    margin-bottom: 18px;
    overflow: hidden;
  }
  .dc-conversation {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .dc-chat-header {
    min-height: 56px;
    height: 56px;
  }
  .dc-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 22px !important;
    scrollbar-width: thin;
  }
  .dc-welcome { padding: 10px 15px 16px; }
  .dc-message { padding: 9px 13px; gap: 10px; }
  .dc-userphoto .avatar { width: 37px; height: 37px; }
  .dc-message-name { font-size: 13px; }
  .dc-message-info time { font-size: 10px; }
  .dc-message-content { font-size: 14px; line-height: 1.65; }
  .dc-day { font-size: 11px; margin-block: 17px 13px; }
  .dc-composer {
    flex: 0 0 auto !important;
    padding: 13px 13px 15px !important;
    background: var(--dc-dark) !important;
    border-top: 1px solid #42444b !important;
  }
  .dc-composer .reply-hint { font-size: 12px; margin-bottom: 11px; }
  .dc-composer .quick-choices {
    max-height: 260px;
    overflow-y: auto;
    gap: 9px;
    margin-bottom: 13px;
    overscroll-behavior: contain;
  }
  .dc-composer .choice-btn {
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 13px;
    min-height: 46px;
    border-radius: 10px;
  }
  .dc-composer .compose-bar { min-height: 52px; }
  .dc-composer .compose-bar input { font-size: 13px; }
  .dc-composer .send-circle { width: 42px; height: 40px; }
  .dc-composer-note { font-size: 11px; margin-top: 10px; }
}
@media (max-width:365px) {
  .discord-chat { min-height: 690px; height: max(690px, 93svh); }
  .dc-composer .choice-btn { padding: 11px 12px; }
}


/* 2026-10-31 · More space for Instagram DM: tall scrollable conversation,
   comfortable replies, readable chat, no clipping behind mobile navigation. */
@media (min-width: 691px) {
  .ig-dm-layout {
    grid-template-columns: minmax(0, 690px) minmax(160px, 1fr);
  }
  .ig-dm-phone {
    height: clamp(770px, 88dvh, 1020px);
    min-height: 770px;
    max-height: none;
    overflow: hidden;
  }
  .ig-dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    padding-bottom: 24px!important;
  }
  .ig-composer .quick-choices { max-height: 220px; }
}
@media (max-width: 690px) {
  /* The outer page can scroll down to the composer; the actual DM history
     independently scrolls inside a substantially taller conversation area. */
  .ig-dm-phone {
    height: clamp(795px, 97svh, 980px);
    min-height: 795px;
    max-height: none;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 19px;
  }
  .ig-dm-head {
    flex: 0 0 58px;
    height: 58px;
    min-height: 58px;
    padding: 0 13px;
  }
  .ig-dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 18px 13px 25px!important;
    gap: 11px;
  }
  .ig-date { font-size: 11px; margin: 12px 0 9px; }
  .ig-bubble { font-size: 14px; line-height: 1.6; padding: 11px 14px; }
  .ig-message { max-width: 93%; gap: 8px; }
  .ig-message .avatar { width: 31px; height: 31px; }
  .ig-profile-start { margin-bottom: 18px; }
  .ig-composer {
    flex: 0 0 auto;
    padding: 15px 13px 17px!important;
    border-top: 1px solid #ededed!important;
  }
  .ig-composer .reply-hint { font-size: 12px; font-weight: 750; margin-bottom: 12px; }
  .ig-composer .quick-choices {
    max-height: 230px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    gap: 10px;
    margin-bottom: 14px;
  }
  .ig-composer .choice-btn {
    min-height: 48px;
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
  .ig-composer .compose-bar { min-height: 52px; padding: 6px 6px 6px 13px; }
  .ig-composer .compose-bar input { font-size: 13px; }
  .ig-composer .send-circle { width: 40px; height: 40px; }
  .ig-small-note { font-size: 11px; margin: 10px 2px 0; }
}
@media(max-width:365px){
  .ig-dm-phone { min-height: 780px; height: max(780px, 97svh); }
  .ig-composer .choice-btn { font-size: 12.5px; padding: 11px 12px; }
}