*{margin:0;padding:0;box-sizing:border-box;font-family:"Hiragino Kaku Gothic Pro"}body{background:#f5f5f5;min-height:100vh;display:flex}.main-content{flex:1;background:#f5f5f5;overflow-y:visible;padding:0 60px;transition:padding-left 0.3s;width:100%;height:auto}.container{margin:0;background:#f5f5f5;max-width:100%;min-width:100%}.header{background:white;color:#333;padding:20px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;margin:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:sticky;top:0;z-index:100}.header h1{font-size:24px;font-weight:600;display:flex;align-items:center;gap:10px}.header-actions{display:flex;gap:10px}.main-header{position:sticky;top:0;z-index:100;background:white;padding:20px 30px;border-bottom:1px solid #e1e8ed;display:flex;justify-content:space-between;align-items:center;margin:20px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.header-left{display:flex;align-items:center;gap:12px}.header-left h1{margin:0;color:#333;font-size:24px;font-weight:600;display:flex;align-items:center;gap:12px}.header-right{display:flex;align-items:center}.header-actions-right{display:flex;gap:12px;align-items:center}.sidebar-toggle{position:fixed;top:12px;left:12px;z-index:1001;width:44px;height:44px;border:none;border-radius:8px;background:#2196F3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:all 0.3s ease}.sidebar-toggle:hover{background:#0c7cd5;transform:scale(1.05)}.sidebar-toggle i{font-size:18px}.sidebar{width:250px;background:white;border-right:1px solid #e0e0e0;height:100vh;overflow-y:auto;position:fixed;top:0;left:0;z-index:1000;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform 0.3s ease;box-shadow:4px 0 16px rgba(0,0,0,0.1)}.sidebar.is-open{transform:translateX(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 68px;min-height:68px;border-bottom:1px solid #e0e0e0;box-sizing:border-box}.sidebar-title{color:#2196F3;font-size:16px;font-weight:600;line-height:1.4}.sidebar-close{width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#6B7280;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}.sidebar-close:hover{background:#f0f0f0;color:#333}.sidebar-close i{font-size:16px}.sidebar-menu{list-style:none;margin:0;padding:12px 0;flex:1;overflow-y:auto}.sidebar-menu li{margin:2px 8px}.sidebar-menu a{display:flex;align-items:center;padding:12px 16px;color:#666;text-decoration:none;font-size:14px;border-radius:8px;transition:all 0.2s ease}.sidebar-menu a:hover{background:#f0f8ff;color:#2196F3}.sidebar-menu a.active{background:#e3f2fd;color:#2196F3}.sidebar-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-right:12px;background:#f5f5f5;border-radius:6px;flex-shrink:0}.sidebar-icon i{color:#6B7280;font-size:14px;transition:color 0.2s ease}.sidebar-menu a:hover .sidebar-icon i,.sidebar-menu a.active .sidebar-icon i{color:#2196F3}.sidebar-menu a.active .sidebar-icon{background:#bbdefb}.sidebar-footer{padding:16px;border-top:1px solid #e0e0e0;margin-top:auto}.user-profile{display:flex;align-items:center;justify-content:space-between}.user-main{display:flex;align-items:center;gap:10px}.user-avatar{width:36px;height:36px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#4a5568;font-weight:500;font-size:15px;text-decoration:none;transition:transform 0.2s}.user-avatar:hover{transform:scale(1.1)}.user-name{font-size:14px;font-weight:500;color:#333;text-decoration:none}.user-name:hover{text-decoration:underline}.user-action{width:36px;height:36px;background:none;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6B7280;padding:0;transition:all 0.2s}.user-action:hover{background:#fee2e2;color:#ef4444}.user-action i{font-size:16px;margin-right:0}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:999;opacity:0;visibility:hidden;transition:all 0.3s ease}.sidebar-overlay.is-visible{opacity:1;visibility:visible}.main-content{flex:1;background:#f5f5f5;overflow-y:visible;padding:0 60px;transition:padding-left 0.3s ease;width:100%}.alert{padding:15px;margin:20px 0;border-radius:8px;font-size:14px}.alert-danger{background:#fee;color:#c53030;border:1px solid #fed7d7}.alert-success{background:#f0fff4;color:#38a169;border:1px solid #c6f6d5}.alert-info{background:#ebf8ff;color:#3182ce;border:1px solid #bee3f8}.flash-messages{position:fixed;top:20px;right:20px;z-index:9999;max-width:400px}.flash-message{position:relative;display:flex;align-items:center;padding:15px 35px 15px 20px;margin-bottom:10px;border-radius:8px;color:white;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.1);opacity:1;animation:slideIn 0.3s ease forwards}.flash-content{flex:1}.flash-close{position:absolute;top:-8px;right:-8px;background:rgba(0,0,0,0.3);border:none;color:white;width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0.9;transition:opacity 0.2s ease, background 0.2s ease}.flash-close:hover{opacity:1;background:rgba(0,0,0,0.5)}.flash-notice{background:#38a169}.flash-alert{background:#e53e3e}.flash-error{background:#e53e3e}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}.port-input-box{width:100%;padding:8px 10px;font-size:14px;cursor:pointer}.port-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.4);z-index:1000}.port-modal.port-modal-active{display:flex}.port-modal-content{background:#fff;padding:20px;border-radius:6px;width:350px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,0.3)}.port-modal-close{position:absolute;top:8px;right:12px;font-size:18px;font-weight:bold;cursor:pointer}.port-modal-input{width:100%;padding:8px 10px;margin:10px 0;font-size:14px}.port-search-results{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto;border-top:1px solid #ddd}.port-search-results li{padding:8px 10px;border-bottom:1px solid #eee;cursor:pointer}.port-search-results li:hover{background-color:#f0f0f0}.breadcrumbs{margin:0px 20px 10px 35px}.breadcrumbs a{color:#2196F3}.finbalance-input-box{width:100%;padding:6px 8px;font-size:13px;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px;box-sizing:border-box}.finbalance-input-box:hover{border-color:#999}.finbalance-input-box::placeholder{color:#999}.finbalance-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.4);z-index:1000}.finbalance-modal.finbalance-modal-active{display:flex}.finbalance-modal-content{background:#fff;padding:20px;border-radius:6px;width:350px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,0.3)}.finbalance-modal-close{position:absolute;top:8px;right:12px;font-size:18px;font-weight:bold;cursor:pointer}.finbalance-modal-input{width:100%;padding:8px 10px;margin:10px 0;font-size:14px;border:1px solid #ccc;border-radius:4px}.finbalance-search-results{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto;border-top:1px solid #ddd}.finbalance-search-results li{padding:8px 10px;border-bottom:1px solid #eee;cursor:pointer}.finbalance-search-results li:hover{background-color:#f0f0f0}
