.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs)}input,select,textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);margin:var(--spacing-xs)0;padding:var(--spacing-sm);width:100%;transition:border-color .2s}:is(input,select,textarea):focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #007bff1a}:is(input,select,textarea)::placeholder{color:#999}select{appearance:none;cursor:pointer;background:#fff}textarea{resize:vertical;font-family:inherit}.btn{border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:var(--spacing-xs)0;padding:var(--spacing-sm);border:none;width:100%;transition:all .2s}.btn:disabled{cursor:not-allowed;opacity:.6;background:#ccc}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--color-secondary);color:#fff;margin-top:var(--spacing-sm)}.btn-secondary:hover:not(:disabled){box-shadow:var(--shadow-sm);background:#5a6268;transform:translateY(-1px)}.btn-tertiary{border:2px solid var(--color-primary);color:var(--color-primary);background:0 0}.btn-tertiary:hover:not(:disabled){background:var(--color-primary);color:#fff}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){box-shadow:var(--shadow-sm);background:#c82333;transform:translateY(-1px)}.btn-small{font-size:var(--font-size-sm);padding:var(--spacing-xs)var(--spacing-sm)}.btn-medium{font-size:var(--font-size-base);padding:var(--spacing-sm)}.btn-large{font-size:var(--font-size-lg);padding:var(--spacing-md)}.btn-loading{opacity:.7;pointer-events:none;position:relative}:root{--color-primary:oklch(.55 .18 250);--color-primary-hover:oklch(.45 .2 250);--color-primary-light:oklch(.85 .08 250);--color-secondary:oklch(.55 .05 240);--color-success:oklch(.6 .16 145);--color-warning:oklch(.75 .15 85);--color-danger:oklch(.6 .2 25);--color-info:oklch(.6 .14 230);--color-connected-bg:oklch(.9 .08 145);--color-connected-text:oklch(.35 .12 145);--color-disconnected-bg:oklch(.9 .1 25);--color-disconnected-text:oklch(.4 .15 25);--color-background:oklch(.97 .01 240);--color-surface:oklch(1 0 0);--color-surface-secondary:oklch(.98 .01 240);--color-text:oklch(.25 .02 240);--color-text-secondary:oklch(.5 .02 240);--color-border:oklch(.88 .01 240);--color-border-hover:oklch(.75 .02 240);--color-log-bg:oklch(.98 .005 240);--color-log-border:var(--color-primary);--color-log-insert:var(--color-success);--color-log-update:var(--color-warning);--color-log-delete:var(--color-danger);--color-scrollbar-track:oklch(.94 .01 240);--color-scrollbar-thumb:oklch(.65 .02 240);--color-scrollbar-thumb-hover:oklch(.5 .02 240);--shadow-color:oklch(0 0 0/.1);--shadow-sm:0 2px 4px var(--shadow-color);--shadow-md:0 4px 6px var(--shadow-color);--spacing-xs:5px;--spacing-sm:10px;--spacing-md:15px;--spacing-lg:20px;--spacing-xl:30px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;--font-family-mono:"Courier New",Consolas,Monaco,monospace;--font-size-base:14px;--font-size-sm:12px;--font-size-xs:11px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--max-width:1200px;--log-height:400px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.2s cubic-bezier(.4,0,.2,1);--transition-slow:.3s cubic-bezier(.4,0,.2,1)}[data-theme=dark]{--color-primary:oklch(.65 .18 250);--color-primary-hover:oklch(.75 .18 250);--color-primary-light:oklch(.3 .08 250);--color-secondary:oklch(.55 .05 240);--color-success:oklch(.7 .16 145);--color-warning:oklch(.8 .15 85);--color-danger:oklch(.65 .2 25);--color-info:oklch(.7 .14 230);--color-connected-bg:oklch(.25 .08 145);--color-connected-text:oklch(.75 .12 145);--color-disconnected-bg:oklch(.25 .1 25);--color-disconnected-text:oklch(.8 .15 25);--color-background:oklch(.15 .01 240);--color-surface:oklch(.2 .01 240);--color-surface-secondary:oklch(.18 .01 240);--color-text:oklch(.9 .01 240);--color-text-secondary:oklch(.65 .01 240);--color-border:oklch(.3 .01 240);--color-border-hover:oklch(.45 .02 240);--color-log-bg:oklch(.18 .01 240);--color-scrollbar-track:oklch(.22 .01 240);--color-scrollbar-thumb:oklch(.4 .01 240);--color-scrollbar-thumb-hover:oklch(.55 .02 240);--shadow-color:oklch(0 0 0/.3)}:root,[data-theme=dark]{transition:background-color var(--transition-base),color var(--transition-base)}.theme-switcher{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;display:flex;padding:var(--spacing-sm);transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);justify-content:center;align-items: center}.theme-switcher:hover{background:var(--color-background);border-color:var(--color-border-hover);transform:scale(1.05)}.theme-switcher:active{transform:scale(.95)}.theme-switcher:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}*{box-sizing:border-box}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-family);max-width:var(--max-width);padding:var(--spacing-lg);margin:0 auto;line-height:1.6}header{margin-bottom:var(--spacing-lg)}.header-content{display:flex;align-items: center;gap:var(--spacing-lg);justify-content:space-between}.header-text{flex:1}.header-text h1{color:var(--color-text);display:flex;align-items: center;gap:var(--spacing-sm);margin:0 0 var(--spacing-sm)0}.header-text p{color:var(--color-text-secondary);margin:0}.logo-icon{color:var(--color-primary);flex-shrink:0}.container{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin-top:var(--spacing-lg)}@media (max-width:768px){.container{grid-template-columns:1fr}}.panel{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg)}.panel h2{color:var(--color-text);display:flex;align-items: center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);margin-top:0}.panel h3{color:var(--color-text);display:flex;align-items: center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);margin-top:0}.panel h3{margin-top:var(--spacing-xl)}.panel-icon{color:var(--color-primary);flex-shrink:0}.status{border-radius:var(--radius-sm);display:flex;font-weight:var(--font-weight-bold);align-items: center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm);justify-content:center;transition:all .3s}.status.connected{background:var(--color-connected-bg);color:var(--color-connected-text)}.status.disconnected{background:var(--color-disconnected-bg);color:var(--color-disconnected-text)}.form-section{margin-top:var(--spacing-xl)}.log{background:var(--color-log-bg);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-sm);height:var(--log-height);overflow-y:auto;padding:var(--spacing-md)}.log::-webkit-scrollbar{width:8px}.log::-webkit-scrollbar-track{background:var(--color-scrollbar-track);border-radius:var(--radius-sm)}.log::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:var(--radius-sm)}.log::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-thumb-hover)}.log-entry{animation:slideIn .3s ease;background:var(--color-surface);border-left:3px solid var(--color-log-border);border-radius:0 var(--radius-sm)var(--radius-sm)0;margin:var(--spacing-xs)0;padding:var(--spacing-xs)}.log-entry.log-insert{border-left-color:var(--color-log-insert)}.log-entry.log-update{border-left-color:var(--color-log-update)}.log-entry.log-delete{border-left-color:var(--color-log-delete)}.log-entry.log-info{border-left-color:var(--color-info)}.log-entry.log-error{background:var(--color-disconnected-bg);border-left-color:var(--color-danger)}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.loading{position:relative}.loading:after{animation:spin .8s linear infinite;border:3px solid var(--color-primary);content:"";position:absolute;border-top-color:#0000;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}.items-list{display:flex;gap:var(--spacing-md);overflow-y:auto;flex-direction:column;max-height:500px}.items-list::-webkit-scrollbar{width:8px}.items-list::-webkit-scrollbar-track{background:var(--color-scrollbar-track);border-radius:var(--radius-sm)}.items-list::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:var(--radius-sm)}.items-list::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-thumb-hover)}.item-card{animation:slideIn .3s ease;background:var(--color-background);border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-sm);padding:var(--spacing-md);transition:transform .2s,box-shadow .2s}.item-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.item-header{display:flex;align-items: center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm);justify-content:space-between}.item-name{color:var(--color-text);font-size:var(--font-size-base,1rem);font-weight:var(--font-weight-bold);flex:1;margin:0}.item-actions{display:flex;align-items: center;gap:var(--spacing-sm)}.item-value{background:var(--color-primary);border-radius:var(--radius-sm);color:var(--color-surface,#fff);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);padding:var(--spacing-xs)var(--spacing-sm)}.item-delete-btn{border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;opacity:.6;padding:var(--spacing-xs);background:0 0;border:1px solid #0000;align-items: center;transition:all .2s;line-height:1}.item-delete-btn:hover{background:var(--color-danger,#ef4444);border-color:var(--color-danger,#ef4444);color:var(--color-surface);opacity:1;transform:scale(1.1)}.item-delete-btn:active{transform:scale(.95)}.item-delete-btn:focus{opacity:1;outline:2px solid var(--color-danger,#ef4444);outline-offset:2px}.item-meta{color:var(--color-text-secondary);display:flex;font-size:var(--font-size-sm);align-items: center;gap:var(--spacing-md);justify-content:space-between}.item-id{font-family:var(--font-family-mono)}.item-date{font-size:var(--font-size-xs,.75rem)}.empty-state{color:var(--color-text-secondary);padding:var(--spacing-xl);text-align:center;font-style:italic}