@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lato:wght@400;600;700&family=Montserrat:wght@400;500;600&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--pf-navy: #162B48;--pf-gold: #B2945B;--pf-gold-light: #C8AB74;--pf-gold-bg: rgba(178, 148, 91, .1);--pf-charcoal: #1A1A1A;--pf-charcoal-dark: #162B48;--pf-footer: #162B48;--pf-footer-dark: #0f1e33;--bg-color: #f5f6f7;--panel-bg: #ffffff;--border-color: #e0e1e2;--text-color: #2c2c2c;--text-muted: #6b7280;--danger-color: #dc2626;--danger-hover: #b91c1c;--success-color: #16a34a;--warning-color: #f59e0b;--panel-header-bg: #f8f9fa;--panel-header-border: #e5e7eb}html,body{height:100%;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--text-color);background:var(--bg-color)}.app-container{display:flex;flex-direction:column;height:100vh}.header{display:flex;align-items:center;justify-content:space-between;padding:0;background:#fff;color:var(--pf-charcoal);border-bottom:3px solid var(--pf-navy);box-shadow:0 2px 4px #0000000d}.header-brand{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem}.header-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}.header-logo svg{width:32px;height:32px}.header-logo-text{font-family:Inter,sans-serif;font-size:1.25rem;font-weight:600;color:var(--pf-navy)}.header-logo-text span{color:var(--pf-gold)}.header-divider{width:1px;height:24px;background:var(--border-color)}.header-title{font-family:Lato,sans-serif;font-size:1rem;font-weight:600;color:var(--pf-charcoal)}.header-controls{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.25rem;border:none;border-radius:3px;cursor:pointer;font-family:Lato,sans-serif;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.025em;transition:all .2s ease}.btn-primary{background:var(--pf-charcoal);color:#fff}.btn-primary:hover:not(:disabled){background:var(--pf-gold)}.btn-secondary{background:#fff;color:var(--pf-charcoal);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--pf-gold);border-color:var(--pf-gold);color:#fff}.btn-icon{padding:.5rem;min-width:36px;min-height:36px}.btn:disabled{opacity:.4;cursor:not-allowed}.file-input-label{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;background:var(--pf-charcoal);color:#fff;border-radius:3px;cursor:pointer;font-family:Lato,sans-serif;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.025em;transition:all .2s ease}.file-input-label:hover{background:var(--pf-gold);color:#fff}.file-input-label input{display:none}.main-content{display:flex;flex:1;overflow:hidden}.left-panel{width:280px;display:flex;flex-direction:column;background:var(--panel-bg);border-right:1px solid var(--border-color);overflow-y:auto}.control-panel{border-bottom:1px solid var(--border-color)}.control-panel:last-child{border-bottom:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--panel-header-bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease}.panel-header:hover{background:var(--pf-gold-bg)}.panel-header-title{display:flex;align-items:center;gap:.5rem;font-family:Lato,sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pf-charcoal)}.panel-header-icon{width:16px;height:16px;color:var(--pf-gold)}.panel-toggle{font-size:.75rem;color:var(--text-muted);transition:transform .2s ease}.control-panel.expanded .panel-toggle{transform:rotate(180deg)}.panel-content{display:none;padding:1rem}.control-panel.expanded .panel-content{display:block}.panel-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.panel-row:last-child{margin-bottom:0}.panel-label{font-family:Lato,sans-serif;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);min-width:80px}.panel-select{flex:1;padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:3px;font-family:Montserrat,sans-serif;font-size:.8125rem;background:#fff;color:var(--text-color)}.panel-select:focus{outline:none;border-color:var(--pf-gold);box-shadow:0 0 0 2px var(--pf-gold-bg)}.panel-input{flex:1;padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:3px;font-family:Montserrat,sans-serif;font-size:.8125rem;background:#fff;color:var(--text-color)}.panel-input:focus{outline:none;border-color:var(--pf-gold);box-shadow:0 0 0 2px var(--pf-gold-bg)}.panel-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer}.panel-checkbox input{width:16px;height:16px;accent-color:var(--pf-gold)}.panel-checkbox span{font-size:.8125rem}.panel-btn{padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:3px;background:#fff;cursor:pointer;font-family:Lato,sans-serif;font-size:.6875rem;font-weight:600;text-transform:uppercase;color:var(--pf-charcoal);transition:all .15s ease}.panel-btn:hover:not(:disabled){background:var(--pf-gold);border-color:var(--pf-gold);color:#fff}.panel-btn:disabled{opacity:.4;cursor:not-allowed}.panel-btn.active{background:var(--pf-gold);border-color:var(--pf-gold);color:#fff}.panel-btn-group{display:flex;gap:.25rem}.color-swatch{width:24px;height:24px;border:1px solid var(--border-color);border-radius:3px;cursor:pointer}.color-swatch:hover{border-color:var(--pf-gold)}.color-swatch.selected{border:2px solid var(--pf-gold)}.viewer-wrapper{flex:1;position:relative;background:gray}#viewer-container{position:absolute;top:0;right:0;bottom:0;left:0}#drop-zone{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}#drop-zone.drag-over{background:var(--pf-gold-bg);border:3px dashed var(--pf-gold);pointer-events:auto}#drop-zone.drag-over:after{content:"Drop molecule files here";font-family:Lato,sans-serif;font-size:1.5rem;color:var(--pf-gold);font-weight:600}.right-panel{width:300px;display:flex;flex-direction:column;background:var(--panel-bg);border-left:1px solid var(--border-color)}.panel-section{padding:1rem 1.25rem;border-bottom:1px solid var(--border-color)}.panel-section:last-child{border-bottom:none}.section-label{display:block;font-family:Lato,sans-serif;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pf-charcoal);margin-bottom:.625rem}#molecule-select{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:3px;font-family:Montserrat,sans-serif;font-size:.8125rem;background:#fff;color:var(--text-color)}#molecule-select:focus{outline:none;border-color:var(--pf-gold);box-shadow:0 0 0 2px var(--pf-gold-bg)}#molecule-select option{padding:.25rem}.nav-buttons{display:flex;gap:.5rem;margin-top:.625rem}.nav-btn{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:3px;background:#fff;cursor:pointer;font-family:Lato,sans-serif;font-size:.8125rem;font-weight:600;color:var(--pf-charcoal);transition:all .15s ease}.nav-btn:hover:not(:disabled){background:var(--pf-gold);border-color:var(--pf-gold);color:#fff}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.action-buttons{display:flex;gap:.5rem;margin-top:.5rem}.action-btn{flex:1;padding:.375rem .5rem;border:1px solid var(--border-color);border-radius:3px;background:#fff;cursor:pointer;font-family:Lato,sans-serif;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);transition:all .15s ease}.action-btn:hover:not(:disabled){background:var(--bg-color);color:var(--pf-charcoal)}.action-btn.danger:hover:not(:disabled){background:#fef2f2;border-color:var(--danger-color);color:var(--danger-color)}.action-btn:disabled{opacity:.4;cursor:not-allowed}#style-select{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:3px;font-family:Montserrat,sans-serif;font-size:.8125rem;background:#fff;color:var(--text-color)}#style-select:focus{outline:none;border-color:var(--pf-gold);box-shadow:0 0 0 2px var(--pf-gold-bg)}.info-panel-content{flex:1;overflow-y:auto;font-family:Montserrat,ui-monospace,monospace;font-size:.75rem}.info-row{display:flex;padding:.25rem 0;border-bottom:1px solid #f0f0f0}.info-row:last-child{border-bottom:none}.info-label{font-weight:600;color:var(--pf-charcoal);min-width:70px;font-size:.6875rem;text-transform:uppercase;letter-spacing:.02em}.info-value{flex:1;word-break:break-word;color:var(--text-color)}.info-divider{height:1px;background:var(--border-color);margin:.625rem 0}.empty-message{color:var(--text-muted);font-style:italic;font-family:Montserrat,sans-serif;font-size:.8125rem}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.25rem;background:var(--pf-footer);color:#a0a0a0;font-family:Lato,sans-serif;font-size:.75rem}.status-left{display:flex;align-items:center;gap:1.5rem}.molecule-count{display:inline-flex;align-items:center;gap:.25rem}.molecule-count .count{font-weight:700;color:var(--pf-gold)}.molecule-index{color:var(--pf-gold)}#status-text{color:silver}.status-bar a{color:var(--pf-gold);text-decoration:none}.status-bar a:hover{text-decoration:underline}.error{display:flex;align-items:center;justify-content:center;height:100%;color:var(--danger-color);font-family:Lato,sans-serif;font-size:1.125rem}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:.375rem .75rem;background:var(--pf-charcoal-dark);color:#fff;font-size:.6875rem;font-family:Lato,sans-serif;white-space:nowrap;border-radius:3px;opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:100}[data-tooltip]:hover:after{opacity:1;visibility:visible}@media (max-width: 1024px){.left-panel{width:240px}.right-panel{width:260px}}@media (max-width: 768px){.header{flex-direction:column;align-items:stretch}.header-brand{justify-content:center;border-bottom:1px solid var(--border-color)}.header-controls{justify-content:center}.main-content{flex-direction:column}.left-panel{display:none}.right-panel{width:100%;max-height:40vh;border-left:none;border-top:1px solid var(--border-color)}.viewer-wrapper{min-height:50vh}.status-bar{flex-direction:column;gap:.25rem;text-align:center}}.left-panel::-webkit-scrollbar,.info-panel-content::-webkit-scrollbar{width:6px}.left-panel::-webkit-scrollbar-track,.info-panel-content::-webkit-scrollbar-track{background:#f1f1f1}.left-panel::-webkit-scrollbar-thumb,.info-panel-content::-webkit-scrollbar-thumb{background:silver;border-radius:3px}.left-panel::-webkit-scrollbar-thumb:hover,.info-panel-content::-webkit-scrollbar-thumb:hover{background:var(--pf-gold)}.measurement-list{max-height:180px;overflow-y:auto;border:1px solid var(--border-color);border-radius:3px;background:#fff}.measurement-list::-webkit-scrollbar{width:4px}.measurement-list::-webkit-scrollbar-track{background:#f1f1f1}.measurement-list::-webkit-scrollbar-thumb{background:silver;border-radius:2px}.measurement-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .625rem;border-bottom:1px solid #f0f0f0;font-size:.75rem}.measurement-item:last-child{border-bottom:none}.measurement-item:hover{background:var(--pf-gold-bg)}.measurement-info{display:flex;flex-direction:column;gap:.125rem}.measurement-type{font-family:Lato,sans-serif;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.measurement-type.distance{color:#b8860b}.measurement-type.angle{color:#008b8b}.measurement-type.dihedral{color:#8b008b}.measurement-value{font-family:Montserrat,monospace;font-weight:600;font-size:.8125rem;color:var(--text-color)}.measurement-atoms{font-size:.625rem;color:var(--text-muted)}.measurement-delete{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;border-radius:3px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.measurement-delete:hover{background:#fef2f2;color:var(--danger-color)}.selection-progress{font-family:Montserrat,monospace;font-size:.8125rem;font-weight:600;color:var(--pf-gold);padding:.25rem .5rem;background:var(--pf-gold-bg);border-radius:3px}.measurement-list .empty-message{padding:1rem;text-align:center;margin:0}.panel-btn svg{vertical-align:middle;margin-right:.125rem}.panel-btn.danger:hover:not(:disabled){background:#fef2f2;border-color:var(--danger-color);color:var(--danger-color)}::selection{background:var(--pf-gold);color:#fff}