/* 2026 visual system: nature photography, readable type and clear touch targets. */
:root{--green:#204c3e;--ink:#223b32;--muted:#61736a;--line:#e9e3d7;--paper:#fffefb;color:var(--ink);background:#eeeae1}
body{background:radial-gradient(circle at 50% 0,#faf7f0,#eae6dc 72%)}
button{min-height:48px;border-radius:13px;font-weight:600;transition:transform .15s,background .15s}
button:active{transform:scale(.985)}
button:focus-visible,a:focus-visible{outline:3px solid #b58b45;outline-offset:3px}
.phone{max-width:430px;margin:22px auto;min-height:780px;border:1px solid #ddd6ca;border-radius:24px;background:#f8f5ef;box-shadow:0 24px 65px #34483c25}
.phone.nature{background-color:#f8f5ef;background-image:linear-gradient(to bottom,transparent 0,transparent 230px,#f8f5ef 425px),url('/assets/hero-20260924.jpg');background-position:top center,top center;background-size:100% 465px,100% auto;background-repeat:no-repeat}
.appbar{height:61px;padding:8px 18px;background:#fffefb99;backdrop-filter:blur(5px)}
.appbar>strong{font-size:17px;color:#18392f;letter-spacing:.07em}
.appbar button{font-weight:600;color:var(--green)}
.capsule{color:#61736a;background:#fffef988;border-color:#e1d9c6}
.content{padding:19px 17px 30px}
.phone.nature:not(.route-home):not(.route-packages):not(.route-package):not(.route-admin):not(.route-staffLogin) .content{padding-top:120px}
.route-packages .content,.route-package .content{padding-top:15px}
h1,h2,h3,.title{color:#183b31;letter-spacing:.025em}
h1{font-family:STSong,SimSun,serif;font-size:30px;line-height:1.27;font-weight:600}
h2{font-size:23px;font-weight:650}
h3{font-size:19px;font-weight:650}
.muted,small{color:var(--muted)}
.hero{min-height:365px;position:relative;padding:14px 6px 0}
.hero h1{font-size:31px;line-height:1.25;letter-spacing:.04em;margin:11px 0 7px;max-width:310px}
.hero p{font-size:15px;color:#4c6257}
.hero .badge{background:#fffdf0d9;color:#285142;border:1px solid #e7dcc5}
.actions{margin-top:139px;padding:9px;background:#fffdfa;border:1px solid #e9e2d5;border-radius:18px;box-shadow:0 13px 30px #42534a22}
.actions button{min-height:107px;grid-template-columns:56px 1fr;gap:6px;background:transparent;border-radius:12px;padding:10px 6px}
.actions button+button{border-left:1px solid var(--line)}
.actions .icon{transform:scale(1.08)}
.actions b{font-size:19px;color:#173d33}
.actions small{white-space:normal;line-height:1.35;font-size:12px}
.panel,.profile-summary{border:1px solid #ede6d9;background:#fffefa;border-radius:18px;box-shadow:0 7px 22px #5260460d}
.panel{padding:20px;margin-top:15px}
.panel:first-child{margin-top:0}
.panel h3{margin-bottom:5px}
.package-entry{padding:21px}
.package-entry h2{font-size:22px;line-height:1.3;margin:15px 0 7px}
.package-entry .primary{margin-top:17px}
.package-entry small{margin-top:8px}
.badge{background:#edf3ec;color:#2b5547;border:1px solid #dfe9de;font-size:13px;padding:5px 10px}
.hint{background:#f3efe6;border:1px solid #e9e1d1;color:#645d4e;font-size:14px;line-height:1.55;border-radius:12px}
.primary{background:linear-gradient(135deg,#28594b,#1c473b);color:white;box-shadow:0 5px 14px #244c3d22}
.primary:hover{background:#1b4338}
.block{width:100%;margin-top:11px}
.head{gap:10px}
.menu{min-height:65px;padding:17px 4px;border-color:#eee8dd;font-size:17px;color:#263f34}
.menu>span:first-child{font-weight:600}
.menu small{font-size:14px;color:#708176}
.info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;margin-top:10px}
.info dt,.info dd{padding:14px 0;border-bottom:1px solid #f0e9de}
.info dt{font-weight:600}
.info dd{color:#6d7a70;text-align:right}
.field{margin:19px 0}
.field>span,.field label>span{display:block;margin-bottom:8px;font-size:16px;font-weight:600}
input,select,textarea{border-color:#dedfd7;background:#fff;min-height:48px}
.tabs button{background:#f1f3ee;border:1px solid #e3e9df}
.tabs .on{background:#e0ece4;border-color:#90b49e;color:#164b39}
.profile-summary{margin-top:0;padding:21px}
.route-me .profile-summary,.route-profile .profile-summary{margin-top:0}
.route-home .profile-summary{margin-top:0}
.package-hero{min-height:182px;padding:25px 20px;border:1px solid #e9e1d5;border-radius:20px;background:linear-gradient(to bottom,#fffdf966,#fffaf0b0),url('/assets/hero-20260924.jpg') center 56%/cover;box-shadow:0 9px 22px #52604616}
.package-hero h1{margin:15px 0 8px}
.package-hero p{max-width:260px;font-size:15px}
.package-card{position:relative;overflow:hidden;padding:20px 21px;border-left:4px solid #577d6a}
.package-photo{height:116px;margin:-20px -21px 16px;background-image:url('/assets/package-strip-20260924.jpg');background-size:400% auto;background-repeat:no-repeat;border-radius:16px 16px 0 0}
.photo-0{background-position:0 50%}.photo-1{background-position:33.333% 50%}.photo-2{background-position:66.667% 50%}.photo-3{background-position:100% 50%}
.package-card:nth-of-type(2){border-left-color:#9baa81}
.package-card:nth-of-type(3){border-left-color:#b49c6c}
.package-card:nth-of-type(4){border-left-color:#4b7567}
.package-card h2{font-size:21px;line-height:1.35}
.package-card .muted{line-height:1.55}
.package-number{color:#b29c73;font-size:25px}
.package-price{color:#20533e;font-family:Georgia,'Microsoft YaHei',serif;font-size:31px;font-weight:700}
.package-footer{background:#f8f5ef}
.package-footer button{color:#68736c;background:#e6e9e4}
.owned-package .head{align-items:flex-start}
.owned-package .head h3{flex:1}
.owned-package .package-price{margin:13px 0}
.owned-package .primary{margin-top:17px}
.bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:7px 4px 11px;background:#fffefa;border-color:#e7e1d6;box-shadow:0 -4px 20px #4054430c}
.bottom button{min-height:64px;gap:4px;padding:5px 1px;font-size:13px;color:#667269;border-radius:11px}
.bottom .on{color:#174838;background:#eef4ee}
.nav-art{height:27px;width:27px;object-fit:contain;opacity:.58}
.bottom .on .nav-art{opacity:1}
.small{font-size:13px;color:var(--muted)}
@media(max-width:350px){.content{padding:16px 12px}.actions button{grid-template-columns:45px 1fr}.actions b{font-size:17px}.bottom button{font-size:12px}}
@media(max-width:600px){.phone{margin:0 auto;border:0;border-radius:0;max-width:none;min-height:100vh}.phone.nature{background-size:100% 465px,100% auto}}
.admin{max-width:1260px;margin:25px auto;background:#fbfaf6;border-color:#e4dfd5;border-radius:20px;box-shadow:0 18px 50px #34483c17}
.adminbar{min-height:91px;padding:17px 27px;background:linear-gradient(90deg,#fffcf5ed,#fffdf8ad),url('/assets/hero-20260924.jpg') center 32%/cover;border-bottom:1px solid #ebe3d5}
.adminbrand{display:flex;align-items:center;gap:13px}
.adminbrand strong{display:block;font:600 22px/1.3 SimSun,'Microsoft YaHei',serif;color:#19483b}
.adminbrand small{display:block;font-size:12px;letter-spacing:.12em;color:#597366}
.brandmark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c3d6c7;border-radius:13px;background:#eaf1e9;color:#2d6851;font-size:29px}
.adminbody{grid-template-columns:190px minmax(0,1fr);min-height:650px}
.admin aside{padding:20px 12px;background:#204c3e;display:block}
.admin aside button{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0 0 8px;padding:12px 14px;border-radius:11px;color:#ecf3ec;font-size:16px;text-align:left;background:transparent}
.admin aside button.on,.admin aside button:hover{color:#183f31;background:#f0f5ed}
.admin-nav-icon{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.admin aside button.on .admin-nav-icon,.admin aside button:hover .admin-nav-icon{filter:none;opacity:1}
.adminmain{padding:30px 34px 55px;background:linear-gradient(#f6f9f6,#fbfaf6 220px)}
.adminmain>.head:first-child h2,.adminmain>h2:first-child{font:600 27px/1.3 SimSun,'Microsoft YaHei',serif}
.adminmain .panel{padding:22px;margin-top:16px}
.adminmain .hint{background:#f7f2e8}
.adminmain table{background:#fffefa;border:1px solid #e8e5db;border-radius:13px;overflow:hidden;font-size:15px}
.adminmain th{background:#eaf1ea;color:#284f3f;font-weight:700}
.adminmain th,.adminmain td{padding:14px 12px;border-color:#edf0e9}
.adminmain tr:hover td{background:#fbfcf8}
.adminmain .filters{gap:12px}
.adminmain .filters input,.adminmain .filters select{min-height:46px}
@media(max-width:760px){.admin{margin:0;border-radius:0}.adminbar{padding:14px}.adminbody{display:block}.admin aside{display:flex;gap:6px;padding:9px;overflow-x:auto;white-space:nowrap}.admin aside button{width:auto;min-width:max-content;margin:0;padding:9px 11px}.admin-nav-icon{width:20px;height:20px}.adminmain{padding:20px 13px}.adminmain table{font-size:13px}.adminmain td,.adminmain th{padding:9px 5px}}