@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#132421; --muted:#71807d; --line:#e4ebe8; --paper:#f6f9f8; --card:#fff; --mint:#0a9b7a; --mint-dark:#087b65; --mint-pale:#e2f5ef; --gold:#ad7413; --shadow:0 18px 48px rgba(20,56,50,.12); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#dfeae7; color:var(--ink); font-family:'Noto Sans SC',system-ui,sans-serif; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.app-shell { position:relative; max-width:460px; min-height:100vh; margin:0 auto; background:var(--paper); box-shadow:var(--shadow); overflow:hidden; }
.topbar { height:78px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:4; }
.brand-button { display:flex; align-items:center; gap:11px; border:0; padding:0; color:var(--ink); background:transparent; font-size:24px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--mint); background:#e1f4ef; font-family:Georgia,serif; font-size:28px; line-height:1; }
.online-pill { display:flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid #d8e5e1; border-radius:999px; color:#4b5b58; background:#fff; font-size:14px; white-space:nowrap; box-shadow:0 3px 10px rgba(10,90,74,.05); }
.online-pill strong { color:var(--ink); font-size:16px; margin-left:2px; }
.online-dot { width:9px; height:9px; border-radius:50%; background:#28b68d; box-shadow:0 0 0 5px #e6f7f2; }
.hero { position:relative; min-height:286px; overflow:hidden; background:#243b3a; isolation:isolate; }
.hero-image { position:absolute; inset:0; z-index:-2; background-image:url('assets/default-banner.png?v=20261005-2'); background-size:cover; background-position:center; filter:saturate(.94); transform:scale(1.02); }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,27,27,.08) 15%,rgba(10,27,27,.15) 38%,rgba(246,249,248,.98) 100%); }
.hero-copy { position:absolute; left:22px; right:170px; bottom:35px; }
.eyebrow { margin:0 0 8px; color:var(--mint-dark); font:700 10px/1 'Manrope',sans-serif; letter-spacing:.14em; }
.hero-copy .eyebrow { color:#d9fff3; text-shadow:0 1px 9px rgba(0,0,0,.3); }
.hero h1 { margin:0; font-size:28px; line-height:1.18; letter-spacing:-.06em; color:#10211e; text-shadow:0 1px rgba(255,255,255,.6); }
.hero-copy p:last-child { margin:8px 0 0; color:#566561; font-size:14px; }
.primary-button { border:0; border-radius:15px; padding:12px 18px; color:#fff; background:var(--mint); font-weight:800; box-shadow:0 9px 20px rgba(10,155,122,.22); transition:transform .18s,background .18s; }
.primary-button:active { transform:translateY(1px) scale(.98); }
.primary-button:hover { background:var(--mint-dark); }
.hero-publish { position:absolute; right:20px; bottom:38px; min-width:128px; font-size:16px; }
.hero-publish span { font-size:18px; margin-left:4px; }
.ticker { min-height:60px; display:flex; align-items:center; gap:11px; margin:-1px 0 0; padding:10px 20px; border:1px solid var(--line); border-radius:18px; background:#fff; position:relative; z-index:2; box-shadow:0 8px 18px rgba(27,84,72,.06); }
.ticker-badge { flex:0 0 auto; padding:6px 10px; border-radius:10px; color:#006d59; background:#d8f4eb; font-weight:800; font-size:14px; }
.ticker p { margin:0; flex:1; overflow:hidden; white-space:nowrap; font-size:14px; color:#374945; }
.ticker p span { display:inline-block; min-width:100%; white-space:nowrap; animation:ticker-slide 7s linear infinite; }
.ticker p span b { color:var(--gold); font-size:16px; }
@keyframes ticker-slide { 0% { transform:translateX(100%); } 12% { transform:translateX(0); } 80% { transform:translateX(0); } 100% { transform:translateX(-105%); } }
.ticker b { color:var(--gold); font-size:16px; }
.ticker-arrow { color:#a4b4af; font-size:24px; }
.filters { display:flex; gap:11px; overflow:auto; padding:20px 20px 13px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filter-button { flex:0 0 auto; border:1px solid #dce7e4; border-radius:999px; padding:10px 20px; color:#5d6d69; background:#fff; font-size:15px; transition:.18s; }
.filter-button.is-active { border-color:var(--mint); color:#fff; background:var(--mint); box-shadow:0 6px 14px rgba(10,155,122,.17); }
.order-list { display:flex; flex-direction:column; gap:12px; padding:0 18px 100px; }
.order-card { position:relative; padding:17px 16px 16px; border:1px solid #e2eae7; border-radius:20px; background:var(--card); box-shadow:0 6px 18px rgba(28,77,67,.05); overflow:hidden; }
.order-card::after { content:''; position:absolute; width:110px; height:110px; right:-40px; bottom:-54px; border-radius:50%; background:var(--mint-pale); opacity:.5; pointer-events:none; }
.order-head { display:flex; align-items:flex-start; gap:11px; }
.order-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; overflow:hidden; border-radius:13px; background:#06100f; color:#20d1ae; font-weight:800; font-size:19px; }
.order-avatar img { width:100%; height:100%; object-fit:cover; }
.order-meta { flex:1; min-width:0; }
.order-meta h3 { margin:0; font-size:17px; letter-spacing:-.03em; }
.order-type { margin-top:2px; color:#80908c; font-size:12px; }
.order-status { flex:0 0 auto; padding:5px 9px; border-radius:7px; color:#08876b; background:#e8f7f2; font-size:12px; font-weight:700; }
.order-status.done { color:#88928f; background:#edf0ef; }
.order-main { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:10px; }
.order-title { margin:0; font-size:19px; line-height:1.25; letter-spacing:-.04em; }
.order-detail { margin:6px 0 0; color:#72807d; font-size:13px; }
.order-action { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.take-button { min-width:81px; border:0; border-radius:12px; padding:10px 14px; color:#fff; background:#0a9b7a; font-weight:800; }
.take-button.done { color:#6e7d79; background:#e5ebe9; }
.amount { color:var(--gold); font:800 24px/1 'Manrope',sans-serif; white-space:nowrap; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.tag { padding:3px 8px; border:1px solid #d6e8e2; border-radius:6px; color:#277568; background:#f0faf7; font-size:11px; }
.tag.gold { border-color:#e6d8ab; color:#a07420; background:#fffaf0; }
.bottom-nav { position:fixed; bottom:0; left:50%; z-index:5; display:flex; width:min(460px,100%); transform:translateX(-50%); border-top:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(16px); padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
.bottom-item { flex:1; border:0; color:#63736f; background:transparent; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; }
.bottom-item.is-active { color:var(--mint); }
.nav-icon { font-size:26px; line-height:24px; font-family:Georgia,serif; }
.nav-icon.bubble { font-size:24px; }
.toast { position:fixed; left:50%; bottom:90px; z-index:20; transform:translate(-50%,12px); padding:10px 16px; border-radius:999px; color:#fff; background:rgba(15,35,32,.9); opacity:0; pointer-events:none; transition:.2s; font-size:13px; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.editor-backdrop { position:fixed; inset:0; z-index:10; background:rgba(4,22,19,.45); backdrop-filter:blur(3px); }
.editor-drawer { position:fixed; left:50%; bottom:0; z-index:11; display:flex; flex-direction:column; width:min(460px,100%); max-height:min(92vh,820px); transform:translateX(-50%); border-radius:26px 26px 0 0; background:#f7fbfa; box-shadow:0 -20px 70px rgba(0,0,0,.24); overflow:hidden; }
.drawer-handle { width:42px; height:5px; margin:10px auto 4px; border-radius:99px; background:#cbd9d5; }
.drawer-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:10px 20px 15px; border-bottom:1px solid var(--line); }
.drawer-heading h2 { margin:4px 0 0; font-size:23px; letter-spacing:-.05em; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:#63736f; background:#fff; font-size:23px; line-height:1; }
.editor-scroll { overflow:auto; padding:0 20px 125px; }
.editor-section { padding:20px 0 4px; border-bottom:1px solid var(--line); }
.section-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.section-title > span { color:var(--mint); font:800 12px/1 'Manrope',sans-serif; }
.section-title h3 { margin:0; flex:1; font-size:16px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.editor-section label { display:block; margin:0 0 12px; color:#60716d; font-size:12px; }
.editor-section input, .editor-section textarea, .editor-section select { width:100%; margin-top:6px; border:1px solid #d7e3e0; border-radius:10px; padding:10px 11px; color:var(--ink); background:#fff; outline:0; font-size:14px; }
.editor-section textarea { resize:vertical; }
.editor-section input:focus, .editor-section textarea:focus, .editor-section select:focus { border-color:var(--mint); box-shadow:0 0 0 3px #dff5ee; }
.upload-row { display:flex; align-items:center; gap:6px; }
.upload-row input[type=text], .upload-row input:not([type]) { flex:1; }
.upload-row input[type=file] { max-width:120px; padding:7px 5px; font-size:11px; }
.small-button { flex:0 0 auto; border:1px solid #bfe4d9; border-radius:9px; padding:8px 10px; color:var(--mint-dark); background:#edfaf6; font-size:12px; font-weight:700; }
.order-editor-card { margin-bottom:12px; padding:13px; border:1px solid #dce8e4; border-radius:15px; background:#fff; }
.order-editor-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:#40514d; font-size:13px; }
.remove-order { border:0; color:#c05c53; background:transparent; font-size:12px; }
.add-button { margin-left:auto; }
.drawer-actions { position:absolute; left:0; right:0; bottom:0; display:flex; gap:10px; padding:13px 20px max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(247,251,250,.95); backdrop-filter:blur(12px); }
.drawer-actions button { flex:1; }
.secondary-button { border:1px solid #d3e2de; border-radius:14px; color:#60716d; background:#fff; font-weight:700; }
[hidden] { display:none !important; }
@media (min-width:640px) { body { padding:22px 0; } .app-shell { min-height:calc(100vh - 44px); border-radius:28px; } .bottom-nav { bottom:22px; border-radius:0 0 28px 28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }