:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;--bg: #f2f2f7;--card: #fff;--text: #1c1c1e;--text2: #636366;--text3: #8e8e93;--accent: #007aff;--accent-light: rgba(0,122,255,.1);--danger: #ff3b30;--danger-light: rgba(255,59,48,.07);--success: #34c759;--warning: #ff9500;--border: #e5e5ea;--border-light: rgba(209,209,214,.45);--fill: #f2f2f7;--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);--shadow-md: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);--shadow-lg: 0 12px 40px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.04);--radius: 14px;--radius-sm: 10px;--radius-lg: 20px;--transition: .2s cubic-bezier(.4,0,.2,1);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{min-height:100%;margin:0;scrollbar-gutter:stable}body{background:var(--bg)}body,p,h1,h2,span,em,div,button{overflow-wrap:anywhere;word-break:break-word}button,input,textarea{font:inherit}button{border:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button:disabled{opacity:.4;cursor:not-allowed}input,textarea{width:100%;min-height:56px;border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;background:var(--card);color:var(--text);outline:none;-webkit-appearance:none;transition:border-color var(--transition),box-shadow var(--transition)}textarea{resize:vertical;line-height:1.5}input:focus,textarea:focus{border-color:var(--accent);box-shadow:none}.app-shell,.main-screen{min-height:100dvh}.login-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;position:relative;background:#f5f5f7;background-image:radial-gradient(ellipse at 15% 25%,rgba(255,180,180,.12) 0%,transparent 45%),radial-gradient(ellipse at 85% 25%,rgba(180,180,255,.12) 0%,transparent 45%),radial-gradient(ellipse at 50% 80%,rgba(180,255,200,.1) 0%,transparent 45%),radial-gradient(ellipse at 30% 60%,rgba(255,220,150,.08) 0%,transparent 40%),radial-gradient(ellipse at 70% 50%,rgba(200,180,255,.08) 0%,transparent 40%);overflow:hidden}.login-card{position:relative;width:100%;max-width:400px;border-radius:28px;padding:44px 32px 36px;display:flex;flex-direction:column;gap:18px;align-items:stretch;margin:0 20px;background:#ffffff80;backdrop-filter:blur(60px) saturate(200%) brightness(1.05);-webkit-backdrop-filter:blur(60px) saturate(200%) brightness(1.05);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 40px #00000012,0 1px 3px #0000000a,inset 0 1px #fff,inset 0 -1px #00000005;overflow:hidden;transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1)}@property --glass-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.login-card:before{content:"";position:absolute;top:-60%;right:-60%;bottom:-60%;left:-60%;background:conic-gradient(from var(--glass-angle) at 50% 50%,rgba(255,120,120,.07),rgba(255,200,100,.07),rgba(100,255,150,.07),rgba(100,200,255,.07),rgba(180,120,255,.07),rgba(255,120,200,.07),rgba(255,120,120,.07));animation:glass-shimmer 12s linear infinite;pointer-events:none;z-index:0}@keyframes glass-shimmer{to{--glass-angle: 360deg}}.login-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:28px;background:radial-gradient(350px circle at var(--mx, 50%) var(--my, 50%),rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 35%,transparent 65%);pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:1}.login-card:hover:after{opacity:1}.login-card:hover{transform:translateY(-2px);box-shadow:0 16px 56px #0000001a,0 2px 8px #0000000d,inset 0 1px #fff,inset 0 -1px #00000005}.login-card:active{transform:translateY(0) scale(.995);transition-duration:.15s}.login-card h1{position:relative;z-index:2;margin:0 0 2px;text-align:center;font-size:24px;line-height:1.3;font-weight:800;color:var(--text);letter-spacing:-.3px}.login-card p{margin:0;text-align:center;color:var(--text3);font-size:15px;position:relative;z-index:2}.lock-icon{align-self:center;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;color:var(--accent);background:var(--accent-light);position:relative;z-index:2}.lock-icon .icon{width:28px;height:28px;flex-basis:28px;stroke-width:2}.empty-icon{align-self:center;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;color:var(--text3);background:#8e8e931a;position:relative}.empty-icon .icon{width:34px;height:34px;flex-basis:34px;stroke-width:2}.copyright{position:absolute;bottom:calc(32px + env(safe-area-inset-bottom));text-align:center;color:#3c3c4359;font-size:11px;line-height:16px;z-index:1}.field{position:relative;z-index:2;border:2px solid var(--border);border-radius:var(--radius);background:var(--card);min-height:56px;transition:border-color .15s cubic-bezier(.4,0,.2,1);outline:none}.field>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--text3);padding:0 4px;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:2;line-height:1;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;outline:none;text-decoration:none}.field:focus-within>span,.field.has-value>span,.field:has(input:not(:placeholder-shown))>span,.field:has(textarea:not(:placeholder-shown))>span{top:0;transform:translateY(-50%);font-size:12px;font-weight:500;color:var(--accent);background:var(--card);letter-spacing:.01em}.field:focus-within{border-color:var(--accent)}.field input,.field textarea{border:none;border-radius:0;background:transparent;padding:16px;min-height:52px;width:100%}.field input:focus,.field textarea:focus{border:none;box-shadow:none}.field textarea{resize:vertical;line-height:1.5}.field .textarea-with-action{position:relative;display:block;width:100%}.field .textarea-with-action textarea{padding-right:58px}.login-card .field{border-color:#0000001f;background:#fff9}.login-card .field>span{color:#3c3c4380}.login-card .field:focus-within>span,.login-card .field.has-value>span,.login-card .field:has(input:not(:placeholder-shown))>span{color:var(--accent);background:#ffffffeb}.login-card .field:focus-within{border-color:var(--accent)}.login-card .password-field input{color:var(--text)}.login-card .password-field .icon-square{color:var(--text3)}.password-field{display:flex;gap:8px;align-items:center;width:100%;min-height:inherit;border:none;border-radius:0;background:transparent;overflow:hidden}.password-field:focus-within{border:none;box-shadow:none}.password-field input{flex:1;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:16px;min-height:auto}.password-field input:focus{border:0;box-shadow:none}.password-field .icon-square{margin-right:4px}.error-text{color:#ff6b6b!important;text-align:left!important;font-size:13px!important;font-weight:500}.icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.primary-button,.secondary-button,.cancel-button,.icon-button,.delete-button,.link-button,.clear-button,.square-add{min-height:44px;border-radius:var(--radius);transition:transform var(--transition),opacity var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition),border-color var(--transition);position:relative;overflow:hidden}.chip,.manage-chip{min-height:44px;border-radius:var(--radius)}.primary-button:active,.secondary-button:active,.cancel-button:active,.icon-button:active,.delete-button:active,.link-button:active,.fab:active{transform:scale(.96)}.chip:active,.manage-chip:active{transform:none}.primary-button{background:var(--accent);color:#fff;padding:0 24px;font-weight:600;font-size:15px;border-radius:var(--radius);box-shadow:0 2px 8px #007aff33;border:none}.primary-button:active{box-shadow:0 1px 4px #007aff26}.primary-button.danger-bg{background:var(--danger);box-shadow:0 2px 8px #ff3b3033}.secondary-button{background:var(--fill);color:var(--text2);padding:0 20px;border:1.5px solid var(--border);font-weight:500;font-size:15px}.secondary-button:active{background:#e8e8ed}.cancel-button{background:transparent;color:var(--text2);padding:0 20px;border:1.5px solid var(--border);font-weight:500;font-size:15px}.cancel-button:hover{background:#00000008;border-color:#c7c7cc}.cancel-button:active{background:#0000000f}.icon-button{background:transparent;color:var(--text2);padding:0 10px;border-radius:12px}.icon-button:active{background:#0000000a}.icon-square{width:40px;min-width:40px;padding:0;display:inline-grid;place-items:center;flex:0 0 40px;border-radius:12px}.icon-square .icon{width:22px;height:22px;flex-basis:22px}.with-icon,.clear-button,.chip-add,.link-button,.delete-button,.date-line,.remaining,.square-add,.fab{display:inline-flex;align-items:center;justify-content:center;gap:6px}.with-icon span,.clear-button span,.icon-only-label span{min-width:0}.danger-text{color:var(--danger)}.modal-title-row .icon-button{background:transparent;color:var(--text2);padding:0 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-weight:500;font-size:14px;min-height:36px}.modal-title-row .icon-button:hover{background:#00000008;border-color:#c7c7cc}.modal-title-row .icon-button:active{background:#0000000f}.modal-title-row .icon-button .icon{width:18px;height:18px;flex-basis:18px}.modal-title-row .icon-square{padding:0;width:36px;min-width:36px;flex:0 0 36px}.main-screen{padding-bottom:calc(88px + env(safe-area-inset-bottom));background:var(--bg)}.top-bar{position:sticky;top:0;z-index:10;min-height:calc(56px + env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f2f2f7e0;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--border)}.top-bar h1{margin:0;font-size:20px;font-weight:800;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.3px}.top-actions{display:flex;align-items:center;gap:2px}.top-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:transparent;border:none;color:var(--accent);transition:all .15s}.top-btn .icon{width:22px;height:22px;flex-basis:22px}.top-btn:hover{background:var(--accent-light)}.top-btn:active{background:#007aff26;transform:scale(.92)}.top-btn.danger:hover{color:var(--danger);background:#ff3b300f}.center-state{min-height:62dvh;display:grid;place-items:center;align-content:center;gap:16px;color:var(--text3)}.loader{width:36px;height:36px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,var(--accent) 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));animation:loader-spin .75s linear infinite}@keyframes loader-spin{to{transform:rotate(360deg)}}.banner{margin:8px 16px;padding:12px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px}.banner.warning{color:#7a5a00;background:#fff8e6;border:1px solid rgba(255,149,0,.15)}.banner.danger{color:var(--danger);background:#fff0f0;border:1px solid rgba(255,59,48,.12);font-weight:600}.search-wrap{margin:8px 16px;display:flex;align-items:center;gap:10px;position:relative;padding:0 14px;min-height:52px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text3);box-shadow:var(--shadow-sm);transition:border-color var(--transition),box-shadow var(--transition)}.search-wrap>span{position:absolute;opacity:0;pointer-events:none}.search-input{flex:1;min-width:0;min-height:50px;border-radius:0;background:transparent;border:0;padding:0}.search-wrap:focus-within{border-color:var(--accent);box-shadow:none}.search-input:focus{box-shadow:none;border:0}.clear-button{background:transparent;color:var(--text3);padding:0 8px}.chip-row{display:flex;gap:8px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.chip,.manage-chip{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;padding:0 16px;min-height:34px;background:var(--card);color:var(--text2);border:1.5px solid var(--border-light);border-radius:20px;flex:0 0 auto;font-weight:500;font-size:13px;transition:all var(--transition);box-shadow:var(--shadow-sm)}.chip .icon,.manage-chip .icon{width:16px;height:16px;flex-basis:16px}.chip.active{color:var(--accent);background:var(--accent-light);border-color:#007aff33;font-weight:600;box-shadow:0 0 0 2px #007aff14}.manage-chip{width:34px;padding:0;border-radius:999px;display:inline-grid;place-items:center}.tab-fade-enter-active{transition:opacity .28s ease,transform .28s ease}.tab-fade-leave-active{transition:opacity .15s ease,transform .15s ease;position:absolute;width:100%}.tab-fade-enter-from{opacity:0;transform:translateY(10px)}.tab-fade-leave-to{opacity:0;transform:translateY(-6px)}.customer-list{padding:12px 16px;display:grid;gap:12px;max-width:1120px;margin:0 auto;position:relative}.customer-list.empty{min-height:calc(100dvh - 210px - env(safe-area-inset-top));display:flex;align-items:center;justify-content:center}.customer-card{border-radius:var(--radius);padding:16px;display:grid;gap:10px;background:var(--card);border:1px solid rgba(0,0,0,.04);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}.card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}.card-head h2{margin:0;font-size:16px;line-height:1.35;font-weight:650;min-width:0;color:var(--text);overflow-wrap:anywhere;word-break:break-word;white-space:normal}.category-pill{flex:none;display:inline-block;max-width:min(180px,38vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;word-break:keep-all;border-radius:10px;padding:4px 10px;background:var(--accent-light);color:var(--accent);font-size:12px;font-weight:600}.category-pill.fit{max-width:100%;width:fit-content}.description{margin:0;color:#3c3c43bf;line-height:20px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.date-line{margin:0;color:var(--text3);font-size:12px;justify-content:flex-start}.date-line .icon{width:14px;height:14px;flex-basis:14px}.remaining{flex-wrap:wrap;justify-content:flex-start;border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;font-weight:600;min-width:0;white-space:normal}.remaining .icon{width:15px;height:15px;flex-basis:15px}.remaining em{font-style:normal;color:var(--text3);font-weight:500}.remaining.danger{background:#ff3b3012;color:var(--danger)}.remaining.warning{background:#ff950014;color:#c46a00}.remaining.success{background:#34c75914;color:#1d8a38}.remaining.muted{background:#8e8e9314;color:var(--text3)}.card-actions{border-top:.5px solid var(--border);padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}.link-button{background:transparent;color:var(--accent);padding:0 4px;min-height:32px;font-size:12px;font-weight:500;justify-content:flex-start;min-width:0}.link-button:before{content:none}.link-button .icon{width:16px;height:16px;flex-basis:16px}.delete-button{min-height:34px;background:#ff3b300f;color:var(--danger);padding:0 12px;border-radius:var(--radius-sm);border:none;font-weight:500;font-size:13px;gap:5px}.delete-button:hover{background:#ff3b301f}.delete-button:active{background:#ff3b302e}.delete-button .icon{width:16px;height:16px;flex-basis:16px}.empty-state{width:min(100%,360px);margin:0 auto;display:grid;justify-items:center;align-content:center;gap:14px;color:var(--text3);text-align:center;transform:translateY(-22px)}.empty-state p{margin:0;font-size:16px;color:var(--text2)}.empty-state span{font-size:13px;color:#3c3c4373}.fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:12;width:56px;height:56px;border-radius:16px;background:var(--accent);color:#fff;box-shadow:0 4px 12px #00000026;transition:transform var(--transition),box-shadow var(--transition)}.fab:active{box-shadow:0 2px 6px #0000001f}.fab .icon{width:28px;height:28px;flex-basis:28px}.snackbar{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:40;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:var(--radius);background:#1c1c1eeb;color:#fff;font-size:14px;font-weight:500;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:#00000040;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .18s ease}.modal,.alert-card{width:min(100%,560px);max-height:min(88dvh,760px);overflow:auto;border-radius:var(--radius);padding:24px 20px;display:grid;gap:16px;animation:popIn .22s cubic-bezier(.2,.9,.25,1.05);background:var(--card);box-shadow:var(--shadow-lg);border:1px solid rgba(0,0,0,.04)}.alert-card{width:min(100%,400px)}.modal h2,.alert-card h2{margin:0;font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.2px}.modal-title-row,.manage-row,.word-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.modal-title-row h2{min-width:0;overflow-wrap:anywhere}.row-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.section-label,.detail-label{margin:0;color:var(--text3);font-size:14px;font-weight:600}.textarea-with-action{position:relative;display:block}.textarea-with-action textarea{padding-right:58px}.field-action{position:absolute;top:8px;right:8px;color:var(--accent);background:#f2f2f7eb}.field-action .icon{width:21px;height:21px;flex-basis:21px}.detail-text{margin:-8px 0 0;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.selectable{-webkit-user-select:text;user-select:text}.in-modal{padding:0}.words-modal{max-height:min(82dvh,620px)}.inline-add{display:flex;align-items:center;gap:8px}.square-add{width:52px;height:52px;background:var(--fill);color:var(--accent);flex:0 0 52px;border-radius:var(--radius)}.square-add .icon{width:24px;height:24px;flex-basis:24px}.word-list{display:grid;gap:8px;overflow:auto}.word-item,.manage-row{min-height:52px;padding:12px 14px;border-radius:var(--radius);background:var(--card);border:1px solid rgba(0,0,0,.04);box-shadow:var(--shadow-sm)}.word-item>span,.manage-row>span{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.empty-words,.muted-text{color:var(--text3);text-align:center;padding:28px 8px}.danger-border{color:var(--danger);border-color:#ff3b304d}@keyframes fadeIn{0%{opacity:0}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}}@media (min-width: 900px){.top-bar{padding-left:max(24px,calc((100vw - 900px)/2));padding-right:max(24px,calc((100vw - 900px)/2))}.customer-list{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-list.empty{display:flex}.customer-list,.search-wrap,.chip-row,.banner{max-width:1120px;margin-left:auto;margin-right:auto}.fab{right:max(32px,calc((100vw - 900px)/2))}}@media (min-width: 1280px){.customer-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 520px){.top-bar h1{font-size:18px}.top-actions{gap:0}.clear-button span,.icon-only-label span{display:none}.card-head{grid-template-columns:1fr}.category-pill{max-width:100%;width:fit-content}.word-item,.manage-row{align-items:stretch;flex-direction:column}.row-actions{justify-content:flex-end}.button-row{grid-template-columns:1fr}.modal-backdrop{align-items:center;padding:16px}.modal,.alert-card{width:100%;max-height:88dvh;border-radius:var(--radius)}.login-card{padding:40px 24px 32px;border-radius:24px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}