:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#0b1f2a;--item-size: 120px;background:radial-gradient(circle at bottom,#e4b2d2,#bde5ee 30%,#d8e8af 55%,#f6f294 75%,#005382);min-height:100vh}*{box-sizing:border-box}body{margin:0}@media(hover:hover)and (pointer:fine){button,[role=button],a[href],input[type=button],input[type=submit],input[type=reset],summary,.modal-backdrop,.drawer-backdrop{cursor:pointer}}.app{min-height:100vh;display:flex;flex-direction:column;padding:24px 18px 96px}.app__header{display:flex;flex-direction:column;gap:16px;color:#f3f8f6}.ghost-button{border:1px solid rgba(255,255,255,.7);background:transparent;color:#f3f8f6;border-radius:999px;padding:6px 12px;font-size:14px}.title-row{display:flex;align-items:center;justify-content:space-between}.title-row h1{margin:0;font-size:30px;font-weight:500;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title-edit{display:flex;gap:8px;align-items:center}.title-edit input{padding:8px 12px;border-radius:12px;border:none;background:#ffffffe6;font-size:14px}.header-actions{display:inline-flex;align-items:center;gap:8px}.connection-indicator{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 1px #ffffffb3}.connection-indicator--online{background:#66f57f}.connection-indicator--offline{background:#ff847f}.connection-indicator--unknown{background:#ffd980}.backend-log-panel{position:fixed;right:12px;bottom:72px;width:min(460px,calc(100% - 24px));max-height:220px;background:#0b1f2ae6;color:#f3f8f6;border-radius:12px;padding:10px;z-index:55;overflow:hidden}.backend-log-panel__title{margin:0 0 8px;font-size:13px;opacity:.85}.backend-log-panel__list{list-style:none;margin:0;padding:0;max-height:170px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.backend-log-panel__entry{font-size:12px;line-height:1.3;padding:6px 8px;border-radius:8px;background:#ffffff14}.backend-log-panel__entry--success{border-left:3px solid #66f57f}.backend-log-panel__entry--error{border-left:3px solid #ff847f}.backend-log-panel__entry--skipped{border-left:3px solid #ffd980}.sync-toast{position:fixed;top:12px;left:50%;transform:translate(-50%);width:min(520px,calc(100% - 24px));background:#0b1f2af2;color:#f3f8f6;border-radius:12px;padding:10px 12px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px}.sync-toast__close{border:none;background:#fff3;color:#f3f8f6;border-radius:999px;padding:4px 10px}.icon-button{background:transparent;border:none;font-size:20px;color:#f3f8f6;display:inline-flex;align-items:center;justify-content:center}.icon-button svg,.bottom-icon svg,.fab svg,.drawer__item-icon svg,.drawer__delete svg,.drawer__settings svg{width:22px;height:22px}.add-panel{width:100%}.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--item-size),var(--item-size)));gap:10px;margin-top:16px;justify-content:flex-start}.item-card{background:#02446194;border:none;border-radius:12px;padding:16px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;height:var(--item-size);width:var(--item-size);color:#f3f8f6;box-shadow:inset 0 0 0 1px #ffffff14;text-align:center;overflow:hidden;transform-origin:center;animation:item-pop .24s cubic-bezier(.2,.9,.25,1.2)}.item-card--exit{animation:item-poof .22s ease-in forwards;pointer-events:none}.item-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.item-icon img{width:42px;height:42px;object-fit:contain;filter:brightness(0) invert(1)}.item-text{display:grid;grid-template-rows:minmax(0,2.4em) auto;gap:4px;align-items:center;width:100%;flex:1;overflow:hidden;min-height:0;justify-content:center}.item-name{font-size:15px;font-weight:500;line-height:1.2;max-width:100%;max-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.item-quantity{font-size:13px;opacity:.8;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes item-pop{0%{transform:scale(.85) rotate(-2deg);opacity:0}60%{transform:scale(1.06) rotate(1.5deg);opacity:1}to{transform:scale(1) rotate(0)}}@keyframes item-poof{0%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.6) rotate(8deg);opacity:0}}@media(prefers-reduced-motion:reduce){.item-card,.item-card--exit{animation:none}}.undo-toast-stack{position:fixed;left:50%;bottom:68px;transform:translate(-50%);width:min(420px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;z-index:40;pointer-events:none}.undo-toast{background:#0b1f2af2;color:#f3f8f6;border-radius:14px;padding:12px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;box-shadow:0 10px 24px #00000040;pointer-events:auto}.undo-toast__text{min-width:0;flex:1;overflow-wrap:anywhere;word-break:break-word}.undo-toast__action{border:none;border-radius:999px;padding:6px 12px;background:#ffffff2e;color:#f3f8f6;font-weight:600;flex-shrink:0}.bottom-bar{position:fixed;bottom:0;left:0;right:0;padding:6px 18px 10px;background:radial-gradient(circle at 50% 2px,transparent 33px,#005382 34px);display:flex;justify-content:space-between;align-items:center;gap:16px;height:56px;overflow:visible;z-index:10}.fab{width:60px;height:60px;border-radius:50%;background:#005382;font-size:28px;color:#fff;box-shadow:0 10px 18px #0003;margin-top:0;transform:translateY(-24px);display:inline-flex;align-items:center;justify-content:center;border:4px solid transparent}.bottom-icon{width:40px;height:40px;border-radius:20px;border:none;background:transparent;color:#f3f8f6;font-size:20px;display:inline-flex;align-items:center;justify-content:center}.modal-backdrop{position:fixed;inset:0;background:#05121c99;display:flex;align-items:center;justify-content:center;padding:24px 20px 80px;z-index:20}.modal{width:min(520px,100%);background:#f7f1f5;border-radius:28px;padding:28px 26px 24px;box-shadow:0 24px 48px #00000040;display:flex;flex-direction:column;gap:18px}.modal__header{display:flex;align-items:center;justify-content:space-between}.modal__header h2{margin:0;font-size:24px;font-weight:500;color:#2f2433}.modal__body{display:flex;flex-direction:column;gap:18px}.modal__field{display:flex;flex-direction:column;gap:6px}.modal__field label{font-size:13px;color:#6f6a77}.modal__body input{border:none;border-bottom:1px solid rgba(47,36,51,.4);padding:6px 2px 8px;font-size:16px;background:transparent;color:#2f2433;outline:none}.settings-language-select{border:none;border-bottom:1px solid rgba(47,36,51,.4);padding:6px 2px 8px;font-size:16px;background:transparent;color:#2f2433;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.modal__actions{display:flex;justify-content:space-between;gap:20px;margin-top:6px}.primary-button{border:none;border-radius:999px;background:#0b3d5c;color:#f4f7f5;padding:8px 16px}.text-button{border:none;background:transparent;color:#6c4a7a;font-size:16px;font-weight:500;padding:6px 4px}.drawer-edge-swipe-zone{position:fixed;inset:0 auto 0 0;width:28px;z-index:29;touch-action:none}.drawer-overlay{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0;visibility:hidden;transition:opacity .3s ease}.drawer-overlay--open{pointer-events:auto;opacity:1;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:#00000073}.drawer{position:absolute;top:0;bottom:0;left:0;width:min(320px,80vw);background:#f4eef5;transform:translate(-100%);transition:transform .3s ease;display:flex;flex-direction:column;touch-action:none}.drawer--open{transform:translate(0)}.drawer__header{background:#005382;color:#fff;padding:24px 120px 24px 18px;font-size:22px;font-weight:500;min-height:180px;display:flex;align-items:flex-start;justify-content:flex-start;background-image:url(/icons/icon_foreground.png);background-repeat:no-repeat;background-position:right bottom;background-size:auto 95%}.drawer__section{padding:18px;flex:1;overflow-y:auto}.drawer__title{margin:0 0 12px;color:#c26a6a;font-weight:500;font-size:16px}.drawer__list{display:flex;flex-direction:column;gap:14px}.drawer__item{display:flex;align-items:center;justify-content:space-between;gap:12px}.drawer__item-button{flex:1;display:flex;align-items:center;gap:12px;background:transparent;border:none;text-align:left;font-size:16px;color:#333;padding:4px 0;min-width:0}.drawer__item-button--active{font-weight:600}.drawer__item-icon{width:24px;height:24px;color:#898989;display:inline-flex;align-items:center;justify-content:center}.drawer__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drawer__delete{width:32px;height:32px;border:none;background:transparent;color:#898989;display:inline-flex;align-items:center;justify-content:center}.drawer__new{border:none;background:transparent;display:flex;align-items:center;gap:12px;font-size:16px;color:#333;padding:6px 0}.drawer__settings{border:none;background:#327955cf;color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;font-size:16px}.drawer__settings .drawer__item-icon{color:#fff}.add-dialog{align-items:flex-start;padding-top:60px}.add-dialog .modal{background:#01141dbf;border-radius:12px;width:min(460px,100%);padding:16px}.add-dialog .add-panel input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.8);background:transparent;color:#fff;font-size:15px}.add-dialog .add-panel input::placeholder{color:#fff}.modal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.item-card--dialog{background:#d5feb563;height:var(--item-size);width:var(--item-size);color:#fff}.add-dialog .item-icon img{filter:brightness(0) invert(1)}.add-dialog .modal__grid{max-height:420px;overflow-y:auto;padding-bottom:4px}.app{padding:16px 14px calc(104px + env(safe-area-inset-bottom))}.app__header{color:#f3f8f6;margin-bottom:8px}.header-card{border-radius:18px;padding:10px 12px;background:linear-gradient(140deg,#ffffff38,#ffffff17);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff42;display:grid;gap:8px;min-width:0}.title-row{gap:8px;min-width:0}.title-row h1{font-size:24px;max-width:100%;min-width:0}.title-edit{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) auto auto}.title-edit input{min-width:0}.header-chip-button{border:1px solid rgba(255,255,255,.7);border-radius:999px;background:#04223147;color:#f3f8f6;padding:7px 10px}.header-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.header-meta{font-size:13px;opacity:.95}.header-status{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.connection-icon{display:inline-flex;width:18px;height:18px}.connection-icon--online{color:#66f57f}.connection-icon--offline{color:#ff847f}.connection-icon--unknown{color:#ffd980}.connection-spinner{width:15px;height:15px;border-radius:999px;border:2px solid rgba(255,255,255,.5);border-top-color:#f3f8f6;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-toast-stack{position:fixed;left:50%;bottom:calc(126px + env(safe-area-inset-bottom));transform:translate(-50%);width:min(460px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;z-index:46;pointer-events:none}.app-toast{pointer-events:auto;border-radius:14px;padding:10px 12px;color:#f3f8f6;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0b1f2af2}.app-toast--error{background:#6e1621f2}.app-toast__text{min-width:0;overflow-wrap:anywhere}.app-toast__close{border:none;border-radius:999px;padding:5px 10px;background:#ffffff2e;color:inherit}.undo-toast-stack{bottom:calc(68px + env(safe-area-inset-bottom))}.bottom-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom));height:calc(56px + env(safe-area-inset-bottom))}.drawer__header{min-height:140px}.drawer__item{align-items:flex-start}.drawer__item-button{align-items:flex-start;padding-right:6px}.drawer__item-copy{display:grid;gap:3px;min-width:0;flex:1}.drawer__item-label{white-space:nowrap}.drawer__item-meta{font-size:12px;color:#67616b;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.drawer__delete{border-radius:8px;background:#0000000d;margin-top:2px}.drawer__delete:disabled{opacity:.45}.drawer__delete--confirm{width:auto;min-width:40px;padding:0 8px;font-size:12px;font-weight:700;color:#a61f2d}.drawer__delete-hint{margin:-4px 0 0;font-size:12px;color:#7a667f}@media(max-width:420px){.app{padding-left:10px;padding-right:10px}.title-row h1{font-size:21px}.title-edit{grid-template-columns:minmax(0,1fr)}.header-chip-button{justify-self:start}.drawer{width:min(336px,88vw)}}