/* Code-drawn island scenery and stationery details. */
html{min-height:100%;background:#d7edcc}body{min-height:100vh;background-color:#dff0dc;background-image:url('/ui-leaves.svg'),url('/ui-garden.svg');background-size:180px 150px,cover;background-position:center top,center bottom;background-repeat:repeat,no-repeat;background-attachment:fixed;color:#344c3a}main{padding:24px 36px 65px;max-width:1320px}header{position:relative;margin:0 0 18px;padding:17px 25px;background:#6fac96;border:3px solid #f6ffeb;border-radius:30px 30px 24px 24px;box-shadow:0 5px 0 #88b79d,0 10px 24px #52785c1c}header h1{color:#fffdee;text-shadow:0 2px #507e6c;font-size:29px}header .sub{color:#e7f3cf;letter-spacing:3px;font-weight:700}header .leaf{background:#f8f5d9;border:3px solid #e4ecc6;border-radius:23px 20px 26px 18px;box-shadow:0 3px 0 #4c826e33;width:65px;height:70px}#wallet{background:#ffe29a;border:2px solid #f8d17c;color:#76572c;box-shadow:0 3px 0 #cca95b;padding:9px 18px}#wallet:before{content:'●';color:#d4a33e;margin-right:8px;font-size:13px}#logout{background:#e7efcc;border:1px solid #cee0b1;color:#50705a}#save-tools{background:#fff8e5;border:2px solid #d6cba5;box-shadow:0 3px 0 #c4b996;border-radius:16px;font-size:11px;padding:10px 17px;margin-bottom:20px}#save-now{background:#eff3d5;border-color:#cfd9ae;color:#5b7249}#tabs{padding:0 3px;margin:0 0 24px;gap:12px}#tabs button{background:#fff7dd;border:2px solid #d1c39a;border-radius:17px 17px 13px 13px;box-shadow:0 4px 0 #baae85;color:#697343;padding:11px 19px;font-size:14px}#tabs button:nth-child(2n){transform:rotate(-1deg)}#tabs button:nth-child(3n){transform:rotate(1deg)}#tabs button:hover{background:#fff1be;transform:translateY(-2px)}#tabs button.active{background:#7baf79;border-color:#669861;color:#fffef0;box-shadow:0 4px 0 #527b50}#tabs button.active:after{content:'';display:inline-block;width:11px;height:7px;margin-left:9px;border-radius:11px 0 11px 0;background:#e4efb8;transform:rotate(-30deg)}
.card{background-color:#fffdf1;border:2px solid #d5c9a4;border-bottom:6px solid #c5b78d;border-radius:25px;box-shadow:0 5px 14px #526d3d13;background-image:radial-gradient(#d8cfa12b .7px,transparent .7px);background-size:8px 8px}h2,h3{color:#45633f}.eyebrow{color:#7b9260;font-size:10px;font-weight:700}.hint{color:#73816a}.primary{background:#80a768;border:2px solid #6b9254;box-shadow:0 3px 0 #567b43;border-radius:14px}.primary:hover{background:#6e9756}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #567b43}input,textarea,select{background:#fffff7;border:1px solid #d5d8b9;border-radius:12px}input:focus,textarea:focus,select:focus{outline:3px solid #b5d89166;border-color:#94b475}
#planner{gap:24px;grid-template-columns:minmax(0,1fr) 295px}#planner>.planner{padding:30px 30px 28px;background-color:#fffcf0;border-radius:25px 25px 30px 30px}#planner>.planner:before{width:92px;height:20px;left:42px;top:-10px;background:repeating-linear-gradient(45deg,#d9e7b2bb 0 7px,#e8f0d0bb 7px 14px);box-shadow:0 1px 1px #8c95691c;border:1px solid #c9d69b77}#planner>.planner:after{content:'';position:absolute;right:20px;top:-12px;width:40px;height:40px;background:radial-gradient(circle at 50% 50%,#edc565 0 16%,transparent 17%),radial-gradient(ellipse at 50% 21%,#e8b5a3 0 22%,transparent 23%),radial-gradient(ellipse at 21% 43%,#e8b5a3 0 22%,transparent 23%),radial-gradient(ellipse at 30% 77%,#e8b5a3 0 22%,transparent 23%),radial-gradient(ellipse at 71% 77%,#e8b5a3 0 22%,transparent 23%),radial-gradient(ellipse at 80% 42%,#e8b5a3 0 22%,transparent 23%);transform:rotate(15deg);filter:drop-shadow(0 2px #b68f6744);pointer-events:none}.date-row{position:relative;min-height:86px;padding:10px 0 23px 85px;border-bottom:2px dashed #d7dcb9}.date-row:before{content:attr(data-day);position:absolute;left:0;top:2px;width:62px;height:69px;box-sizing:border-box;border:2px solid #dccba4;border-radius:12px;background:linear-gradient(#e4bca0 0 17px,#fff9de 17px);box-shadow:2px 3px 0 #d9c8a36b;color:#6c7953;font-size:31px;font-weight:bold;line-height:90px;text-align:center;transform:rotate(-6deg)}.date-row label>span{color:#4f6945;font-size:23px}.date-row input{border:1px solid #ddd9b6;background:#f5f2dc;border-radius:15px;font-size:11px;padding:4px 8px}.date-row>button:first-child,.date-row>button:nth-child(3){background:#e8edce;border:1px solid #d3dcb2;color:#7b9868;box-shadow:0 2px 0 #c3cfa8}.date-row>#today{background:#f3e9bd;border-color:#dcd099;color:#8f8356;font-size:12px;padding:8px 10px}#day-progress{color:#6d8754;margin:8px 0 18px}.day-progress-track{height:10px;border:2px solid #d9e1b8;background:#f0f1d8}.day-progress-track span{background:repeating-linear-gradient(60deg,#a5c578 0 8px,#b5d18a 8px 16px)}.planner>.hint{background:#eaf0d0;border:1px dashed #ceda9e;color:#7b8c5b;border-radius:7px;font-size:11px;padding:5px 10px}#todo-form input{border:2px solid #e4dcb7;background:#fffef5;box-shadow:inset 0 2px 3px #b9ad7520}#todos{gap:11px}#todos li{position:relative;background:#f9f4df;border:1px solid #e6dcb6;border-left:5px solid #d9bc87;border-radius:13px;padding:14px 15px;box-shadow:1px 3px 0 #e5d9ae44;min-height:60px}#todos li:nth-child(3n+2){background:#eef3df;border-color:#dae1bb;border-left-color:#b4c78e}#todos li:nth-child(3n){background:#faf0e3;border-color:#ebdcc3;border-left-color:#d9b29b}#todos li.done{background:#edf2d9;border-left-color:#9cb87c;opacity:1}#todos li.done span{color:#8b9976}#todos .check{border-color:#c5cea0;border-radius:40% 50% 44% 48%;background:#fffef2;transform:rotate(-7deg);box-shadow:0 2px 0 #c7cdaa55;color:#fff9d7}#todos .done .check{border-color:#8fac65;background:#a5bd79;box-shadow:0 2px 0 #7c985755;font-size:18px}#todos li:not(.done) .check:hover{background:#e4edc3}
#planner>aside{position:relative;padding:27px 22px;background-color:#f8f5df;border:2px solid #cdbc94;border-bottom:7px solid #bba87d;border-radius:28px 28px 23px 23px}#planner>aside:before{content:'';position:absolute;left:22px;right:22px;top:0;height:7px;background:repeating-linear-gradient(90deg,#c3d5a1 0 12px,#ebeed0 12px 24px);border-radius:0 0 7px 7px}#planner>aside .eyebrow{font-size:9px;letter-spacing:3px}#planner>aside h2{font-size:25px;margin-bottom:12px}.island-art{position:relative;overflow:hidden;border-radius:40% 43% 37% 40%;background:#e1edc1 url('/assets/decor/tree-0.png') no-repeat 4px 45px;background-size:77px 77px;border:2px solid #cfddb1;border-bottom:12px solid #abcab1;height:175px}.island-art:after{content:'';position:absolute;right:0;bottom:27px;width:70px;height:70px;background:url('/assets/decor/flowers-3.png') center/contain no-repeat;image-rendering:pixelated;pointer-events:none}.island-art canvas,.island-art strong{position:relative;z-index:1}.island-art strong{background:#f8f5dbaa;padding:2px 12px;border-radius:15px;color:#617c48;font-size:12px}#show-island{background:#e4eac5;color:#637a4c;border:1px solid #c9d4a6;border-bottom:3px solid #b7c295}.guestbook-entry{background:#f4deb2!important;color:#866c3f!important;border:1px solid #d4b780!important;border-bottom:3px solid #c5a569!important;border-radius:13px;padding:9px 13px;font-size:12px;font-weight:650}.guestbook-entry:hover{background:#ffe9b9!important}#home-guestbook{width:100%;margin-top:10px}#island .section-head>div h2{display:inline-block;margin-right:15px}#my-guestbook{padding:10px 16px;box-shadow:0 2px #c4a97244}#music-card{border-top:2px dashed #dbd2aa;margin-top:24px;padding-top:22px;position:relative}#music-card:after{content:'';position:absolute;right:2px;top:20px;width:30px;height:30px;background:url('/assets/decor/flowerpot-1.png') center/contain no-repeat;image-rendering:pixelated}.record-icon,.friend-record{border-color:#e8ddb9;box-shadow:2px 3px 0 #c4b48255;background:repeating-radial-gradient(#597363 0 3px,#405d4b 4px 6px);color:#e8d5a0}#music-card h3{color:#6c7650}
.social-header{background-color:#fff8e6}.friend-sidebar{background-color:#f6f3df}.friend-row{background:#eeefd6;border:1px dashed #d4d9b1;border-radius:16px;padding:12px 8px}.friend-row.selected{background:#dce8ba;border:2px solid #a6bd7d}.friend-mini-avatar,.friend-badge,.letter-avatar{background:#dce6b4;color:#6a7e4d;border:2px solid #f9f8db;border-radius:43% 48% 38% 47%;box-shadow:0 2px 0 #a7ba7e55}.friend-profile{background-color:#eef0d7}.friend-overview>.card{background-color:#fff9e8}#friend-music{background-color:#f6eed9}.count-pill{background:#e4ebc6;color:#748952;border:1px dashed #bfce95}.shop-item,.resident-card,.bag-piece{background:#f4f1db;border-color:#d8d4ae;border-radius:20px}.note{background:#fff9e7;border:1px solid #e0d3ae;border-radius:14px;border-left:4px solid #d9c491}#friend-map,#island-canvas{border:5px solid #e7dfbd;outline:1px solid #b9bb8d}#friend-map{border-width:3px}.social-workspace{gap:22px}
#own-guestbook{width:min(720px,94vw);max-width:720px;max-height:86vh;padding:0;border:3px solid #c4ae7f;border-bottom:8px solid #af986a;border-radius:24px;background:#fff9e8;color:#3f593e;box-shadow:0 16px 65px #29462d66}#own-guestbook::backdrop{background:#294a3f88;backdrop-filter:blur(3px)}.book-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 25px 18px;background:#e6edc9 url('/ui-leaves.svg') center/180px;border-bottom:2px dashed #c5d09e}.book-top>div{display:block}.book-top h2{font-size:21px;margin:2px 0}.book-top .eyebrow{font-size:9px;letter-spacing:3px}.book-top>button{font-size:11px;padding:8px 12px;background:#f8f4da}.own-book-list{display:block!important;padding:6px 24px 18px}.guestbook-letter{display:block!important;position:relative;margin:18px 0;padding:18px 20px;background:#fffdf2;box-shadow:1px 3px #dccba333;transform:rotate(-.35deg)}.guestbook-letter:nth-child(2n){transform:rotate(.35deg);background:#f5f6e4}.letter-head{display:flex!important;gap:9px;align-items:center;justify-content:flex-start!important}.letter-head strong{font-size:13px}.letter-head small{margin-left:auto;font-size:10px;color:#94a183}.letter-avatar{display:flex;width:29px;height:31px;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}.guestbook-letter p{font-size:14px;line-height:1.9;margin:17px 0;white-space:pre-wrap;overflow-wrap:anywhere}.guestbook-letter>button{font-size:10px;padding:5px 10px;display:block;margin-left:auto;background:#f2efd9}.book-refresh{display:block;margin:0 auto 22px;background:#e6eccd;font-size:12px;padding:9px 20px}.book-empty{padding:45px 15px;text-align:center;font-size:14px;color:#8c9978}footer{color:#607751;background:#e9f0d9aa;border-radius:12px;padding:9px 15px;font-size:10px;width:fit-content}
@media(max-width:1050px){#planner{grid-template-columns:minmax(0,1fr) 255px}.date-row{padding-left:70px}.date-row:before{width:52px;height:62px;font-size:27px;line-height:81px}.date-row label>span{font-size:20px}#tabs{gap:8px}#tabs button{padding:10px 14px}}
@media(max-width:800px){main{padding:18px 18px 50px}header{padding:15px 19px}header h1{font-size:24px}#planner{grid-template-columns:1fr}#planner>aside{display:block}#planner>.planner{padding:25px}.island-art{max-width:260px;margin:15px auto}#tabs{gap:8px}#tabs button{font-size:12px;padding:10px 13px}.letter-head{flex-wrap:wrap}.letter-head small{margin-left:0;flex-basis:100%;padding-left:40px}}
@media(max-width:560px){main{padding:13px 12px 40px}header{padding:12px 14px;border-radius:23px;gap:10px}header h1{font-size:22px}header .sub{font-size:8px;letter-spacing:1.5px}header .leaf{width:45px;height:51px;border-radius:16px}header .leaf canvas{width:39px;height:49px}#wallet{padding:6px 10px;font-size:11px}#wallet:before{margin-right:4px;font-size:8px}#logout{font-size:10px;padding:6px 8px}#save-tools{padding:9px 11px;font-size:10px}#save-tools>div{gap:5px}#tabs{gap:7px;margin-bottom:20px}#tabs button{padding:9px 11px;font-size:11px}#tabs button.active:after{display:none}#planner>.planner{padding:22px 15px}.date-row{padding-left:58px;gap:5px}.date-row:before{width:45px;height:55px;line-height:73px;font-size:24px}.date-row label>span{font-size:17px}.date-row>button:first-child,.date-row>button:nth-child(3){width:29px;height:29px;font-size:21px}.date-row input{width:128px;font-size:10px}#today{padding:6px 8px!important}.date-row{flex-wrap:nowrap}.planner>.hint{font-size:10px}#todos li{padding:12px 10px;font-size:13px}#planner>aside{display:block}#own-guestbook{width:95vw}.book-top{padding:16px 18px}.book-top h2{font-size:18px}.own-book-list{padding:5px 15px 12px}#island-guestbook{margin-bottom:12px}.social-header .section-head{gap:8px}.social-header h2{font-size:21px}.social-header #my-guestbook{font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){button,header{transition:none}}