:root{--ink-900: #0f1c2e;--ink-700: #3a4a5e;--ink-500: #64748b;--ink-400: #94a3b8;--bg: #f6f8fa;--surface: #ffffff;--surface-2: #f1f5f8;--border: #e4eaf0;--border-strong: #cfd9e3;--brand-700: #0c6e63;--brand-600: #0d9488;--brand-500: #14b8a6;--brand-100: #ccfbf1;--brand-50: #effdfa;--green-700: #067647;--green-100: #d8f5e3;--amber-700: #93540b;--amber-100: #fdeecd;--rose-700: #b42334;--rose-600: #dc3545;--rose-100: #fde3e6;--radius-lg: 16px;--radius-md: 10px;--radius-sm: 8px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);--shadow-md: 0 4px 12px rgba(16, 24, 40, .07);--shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);--font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, monospace;--header-h: 60px;--bottomnav-h: 62px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink-900);background:var(--bg);min-height:100vh}#root{min-height:100vh}h1,h2,h3,h4{line-height:1.25;font-weight:700;letter-spacing:-.01em}h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}a{color:var(--brand-600);text-decoration:none}a:hover{text-decoration:underline}code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);border:1px solid var(--border);padding:.1em .4em;border-radius:6px;color:var(--ink-700);overflow-wrap:anywhere}.muted{color:var(--ink-500);font-size:.9rem}input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;font-family:var(--font);font-size:15px;color:var(--ink-900);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:.6rem .8rem;transition:border-color .15s,box-shadow .15s;min-height:44px}textarea{min-height:90px;resize:vertical;line-height:1.5}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.2rem}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px #14b8a626}input:disabled,textarea:disabled,select:disabled{background:var(--surface-2);color:var(--ink-400);cursor:not-allowed}input::placeholder,textarea::placeholder{color:var(--ink-400)}.field{display:block;margin-bottom:1rem}.field>span{display:block;font-size:.82rem;font-weight:600;color:var(--ink-700);margin-bottom:.35rem}.field .hint{margin-top:.35rem;font-size:.82rem;color:var(--ink-500)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--font);font-size:.92rem;font-weight:600;border:1.5px solid transparent;border-radius:var(--radius-md);padding:.55rem 1.1rem;min-height:42px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background:var(--brand-700)}.btn-secondary{background:var(--surface);color:var(--ink-700);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){border-color:var(--ink-400);color:var(--ink-900)}.btn-ghost{background:transparent;color:var(--ink-500)}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ink-900)}.btn-danger{background:transparent;color:var(--rose-600);border-color:transparent}.btn-danger:hover:not(:disabled){background:var(--rose-100)}.btn-sm{min-height:34px;padding:.3rem .75rem;font-size:.85rem;border-radius:var(--radius-sm)}.btn:focus-visible,.nav-item:focus-visible,.tab:focus-visible{outline:2.5px solid var(--brand-500);outline-offset:2px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--ink-500);cursor:pointer}.icon-btn:hover{background:var(--surface-2);color:var(--ink-900)}.link-button{background:none;border:none;padding:0;color:var(--brand-600);font-size:inherit;font-weight:600;cursor:pointer}.link-button:hover{text-decoration:underline}.alert{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.9rem;margin-bottom:1rem;border:1px solid}.alert-error{background:var(--rose-100);border-color:#f6c6cc;color:var(--rose-700)}.alert-success{background:var(--green-100);border-color:#b8ebcd;color:var(--green-700)}.alert-info{background:var(--amber-100);border-color:#f5ddb0;color:var(--amber-700)}.alert svg{flex-shrink:0;margin-top:2px}.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:capitalize;white-space:nowrap}.chip-green{background:var(--green-100);color:var(--green-700)}.chip-amber{background:var(--amber-100);color:var(--amber-700)}.chip-rose{background:var(--rose-100);color:var(--rose-700)}.chip-teal{background:var(--brand-100);color:var(--brand-700)}.chip-gray{background:var(--surface-2);color:var(--ink-500)}.spinner{animation:spin .9s linear infinite;color:var(--brand-600)}@keyframes spin{to{transform:rotate(360deg)}}.loading-state{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:3rem 1rem;color:var(--ink-500);font-size:.9rem}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1rem}.empty-state .empty-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand-600);border-radius:999px;margin-bottom:1rem}.empty-state h3{margin-bottom:.3rem}.empty-state p{max-width:380px;margin-bottom:1.2rem}.empty-state .empty-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:40;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.25rem;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink-900);background:none;border:none;cursor:pointer;font-family:var(--font)}.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}.brand small{display:block;font-size:.68rem;font-weight:600;color:var(--ink-500);letter-spacing:.04em;text-transform:uppercase}.header-user{display:flex;align-items:center;gap:.75rem;min-width:0}.header-user .user-meta{text-align:right;line-height:1.25;min-width:0}.header-user .user-email{font-size:.85rem;font-weight:600;color:var(--ink-700);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-body{display:flex;flex:1;width:100%;max-width:1280px;margin:0 auto}.sidebar{width:232px;flex-shrink:0;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.15rem}.sidebar .nav-section{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);padding:1.1rem .85rem .35rem}.nav-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .85rem;border:none;background:transparent;border-radius:var(--radius-md);font-family:var(--font);font-size:.92rem;font-weight:600;color:var(--ink-500);cursor:pointer;text-align:left;transition:background .15s,color .15s}.nav-item:hover{background:#ffffffe6;color:var(--ink-900)}.nav-item.active{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-sm)}.nav-item.active svg{color:var(--brand-600)}.main{flex:1;min-width:0;padding:1.75rem 2rem 3rem}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav .nav-item{flex:1;flex-direction:column;gap:2px;padding:.5rem .25rem;font-size:.66rem;font-weight:600;border-radius:0;align-items:center;justify-content:center;min-height:var(--bottomnav-h);color:var(--ink-400)}.bottom-nav .nav-item:hover{background:transparent}.bottom-nav .nav-item.active{background:transparent;color:var(--brand-600);box-shadow:none}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.page-header p{margin-top:.2rem}.page-actions{display:flex;gap:.6rem;flex-wrap:wrap}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);margin-bottom:1.25rem}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}.card-header p{margin-top:.15rem}.tabs{display:flex;gap:.25rem;background:var(--surface-2);border:1px solid var(--border);padding:4px;border-radius:12px;margin-bottom:1.25rem;overflow-x:auto;max-width:100%;width:fit-content}.tab{border:none;background:transparent;font-family:var(--font);font-size:.88rem;font-weight:600;color:var(--ink-500);padding:.45rem 1rem;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;min-height:38px}.tab:hover{color:var(--ink-900)}.tab.active{background:var(--surface);color:var(--ink-900);box-shadow:var(--shadow-sm)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:radial-gradient(60rem 30rem at 110% -10%,rgba(20,184,166,.14),transparent 60%),radial-gradient(50rem 28rem at -20% 110%,rgba(13,148,136,.1),transparent 55%),var(--bg)}.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.25rem 2rem;box-shadow:var(--shadow-lg)}.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-bottom:1.6rem;text-align:center}.auth-brand .brand-mark{width:52px;height:52px;border-radius:14px}.auth-brand h1{font-size:1.35rem}.auth-brand p{color:var(--ink-500);font-size:.9rem}.auth-card .btn-primary{width:100%;margin-top:.4rem;min-height:46px;font-size:1rem}.auth-hint{text-align:center;margin-top:1.4rem;color:var(--ink-500);font-size:.9rem}.search-box{position:relative;max-width:340px;flex:1}.search-box svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--ink-400)}.search-box input{padding-left:2.4rem}.zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem}.zone-card{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;cursor:pointer;text-align:left;font-family:var(--font);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .15s}.zone-card:hover{border-color:var(--brand-500);box-shadow:var(--shadow-md);transform:translateY(-1px)}.zone-card-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center}.zone-card-body{flex:1;min-width:0}.zone-card-name{display:block;font-weight:700;font-size:.95rem;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone-card-sub{display:block;font-size:.8rem;color:var(--ink-500)}.zone-card>svg:last-child{color:var(--ink-400);flex-shrink:0}.modal-overlay{position:fixed;inset:0;z-index:60;background:#0f1c2e73;display:flex;align-items:center;justify-content:center;padding:1.25rem;animation:fadeIn .15s ease}.modal{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:riseIn .2s ease}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem 0}.modal-body{padding:1rem 1.5rem 1.5rem}.modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:0 1.5rem 1.5rem}@keyframes fadeIn{0%{opacity:0}}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}}.claim-input{font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:4px;font-size:1.1rem!important;text-align:center}.choice-group{display:grid;gap:.7rem;margin-bottom:1rem}.choice{display:flex;gap:.8rem;align-items:flex-start;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:.9rem 1rem;cursor:pointer;transition:border-color .15s,background .15s;background:var(--surface)}.choice:hover{border-color:var(--ink-400)}.choice.selected{border-color:var(--brand-600);background:var(--brand-50)}.choice input{width:1.1rem;height:1.1rem;margin-top:.2rem;accent-color:var(--brand-600);flex-shrink:0}.choice-title{font-weight:700;font-size:.92rem}.choice-sub{font-size:.82rem;color:var(--ink-500);margin-top:.1rem}.rec-list{display:flex;flex-direction:column;gap:.7rem;margin:1rem 0}.rec-row{display:grid;grid-template-columns:110px 150px 1fr 38px;gap:.6rem;align-items:start;border:1px solid var(--border);border-radius:var(--radius-md);padding:.7rem;background:var(--surface)}.rec-sub{display:flex;gap:.5rem;flex-wrap:wrap}.rec-field{flex:1;min-width:90px}.rec-field.grow{flex:3;min-width:160px}.rec-field label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-400);margin-bottom:.2rem}.rec-field input,.rec-field select{min-height:40px;font-size:.9rem}.rec-del{justify-self:end;align-self:start;margin-top:1.15rem;color:var(--ink-400)}.rec-del:hover{color:var(--rose-600);background:var(--rose-100)}.editor-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.25rem}.ttl-field{max-width:170px;margin-bottom:0}.save-bar{display:flex;align-items:center;gap:.8rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);flex-wrap:wrap}.code-area{width:100%;font-family:var(--mono);font-size:.82rem;line-height:1.6;background:#f8fafc;color:var(--ink-900);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:1rem;min-height:320px}.table-wrap{border:1px solid var(--border);border-radius:var(--radius-md);overflow-x:auto;background:var(--surface)}table.data{width:100%;border-collapse:collapse;font-size:.88rem}table.data th{text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);background:var(--surface-2);padding:.65rem 1rem;border-bottom:1px solid var(--border);white-space:nowrap}table.data td{padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-700)}table.data td code{white-space:nowrap}table.data tbody tr:last-child td{border-bottom:none}table.data tbody tr:hover{background:#fafcfd}table.data tr.clickable{cursor:pointer}.row-actions{display:flex;gap:.4rem;flex-wrap:wrap}.msg-thread{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.25rem}.msg{max-width:85%;border-radius:14px;padding:.7rem 1rem;background:var(--surface-2);align-self:flex-start}.msg.mine{background:var(--brand-50);border:1px solid var(--brand-100);align-self:flex-end}.msg-meta{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;font-size:.75rem;color:var(--ink-500);margin-bottom:.25rem}.msg-meta strong{color:var(--ink-700);font-size:.8rem}.msg-body{white-space:pre-wrap;font-size:.92rem}.log-list{display:flex;flex-direction:column}.log-item{border-bottom:1px solid var(--border)}.log-item:last-child{border-bottom:none}.log-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem .25rem}.log-row.expandable{cursor:pointer;border-radius:var(--radius-sm)}.log-row.expandable:hover{background:#fafcfd}.log-main{min-width:0;flex:1}.log-line1{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.log-target{font-size:.82rem}.log-line2{font-size:.8rem;color:var(--ink-500);margin-top:.25rem;overflow-wrap:anywhere}.log-side{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.log-date{font-size:.78rem;color:var(--ink-500);white-space:nowrap}.log-chev{color:var(--ink-400);transition:transform .15s}.log-chev.open{transform:rotate(90deg)}.log-detail{margin:0 .25rem .9rem;padding:.75rem 1rem;background:var(--surface-2);border-radius:var(--radius-md)}.diff-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:.85rem}.diff-list li{overflow-wrap:anywhere}.diff-list code{background:var(--surface)}.diff-mark{display:inline-block;width:1.2em;text-align:center;font-weight:800;font-family:var(--mono);margin-right:.2rem}.diff-mark.add{color:var(--green-700)}.diff-mark.del{color:var(--rose-700)}.diff-mark.mod{color:var(--amber-700)}.snap-list{display:flex;flex-direction:column;gap:.6rem}.snap-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--border);border-radius:var(--radius-md);padding:.8rem 1rem;flex-wrap:wrap}.snap-info{min-width:0}.snap-when{font-weight:700;font-size:.9rem}.snap-meta{font-size:.8rem;color:var(--ink-500)}.qr-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;display:inline-block;margin:.75rem 0;box-shadow:var(--shadow-sm)}.otp-input{font-family:var(--mono)!important;letter-spacing:6px;text-align:center;font-size:1.15rem!important;max-width:180px}.pager{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)}details.panel{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:1.25rem;background:var(--surface)}details.panel>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;font-weight:700;font-size:.95rem;border-radius:var(--radius-md)}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary:after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-400);border-bottom:2px solid var(--ink-400);transform:rotate(45deg);transition:transform .15s}details.panel[open]>summary:after{transform:rotate(-135deg)}details.panel .panel-body{padding:0 1.1rem 1.1rem}::-webkit-scrollbar{width:10px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--ink-400)}::selection{background:var(--brand-100)}@media(max-width:900px){body{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}.sidebar{display:none}.bottom-nav{display:flex}.main{padding:1.1rem 1rem 2rem}.app-header{padding:0 1rem}.header-user .user-meta{display:none}h1{font-size:1.35rem}.card{padding:1.1rem;border-radius:14px}input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{font-size:16px}.zone-grid{grid-template-columns:1fr}.modal-overlay{align-items:flex-end;padding:0}.modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}.rec-row{grid-template-columns:1fr 1fr;grid-template-areas:"type host" "value value" "del del";position:relative;padding-top:.8rem}.rec-row>*:nth-child(1){grid-area:type}.rec-row>*:nth-child(2){grid-area:host}.rec-row>*:nth-child(3){grid-area:value}.rec-del{grid-area:del;justify-self:stretch;margin-top:0;width:100%;min-height:38px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm)}table.data.responsive thead{display:none}table.data.responsive,table.data.responsive tbody,table.data.responsive tr,table.data.responsive td{display:block;width:100%}table.data.responsive tr{padding:.5rem 0;border-bottom:1px solid var(--border)}table.data.responsive tr:last-child{border-bottom:none}table.data.responsive td{border:none;padding:.25rem 1rem}table.data.responsive td[data-label]:before{content:attr(data-label);display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-400);margin-bottom:.1rem}.pager{flex-wrap:wrap}.msg{max-width:100%}}@media(min-width:901px){.bottom-nav{display:none}}