:root{--bg:#0f1115;--panel:#0b0d12;--ink:#e6e9ef;--grid:rgba(255,255,255,.05);--tile-border:rgba(255,255,255,.25);--shadow:rgba(0,0,0,.45);--handle:rgba(255,255,255,.5);--handle-hover:rgba(124,199,255,.9);--selected:#42f5a1;--accent:#7cc7ff;--border:rgba(255,255,255,.25);--border-light:rgba(255,255,255,.12);--hover-bg:rgba(255,255,255,.05);--selected-bg:rgba(66,245,161,.15);--scrollbar-thumb:rgba(255,255,255,.3);--scrollbar-track:#0b0d12;--input-bg:#1a1d24}
body.light-mode{--bg:#f5f5f5;--panel:#ffffff;--ink:#000;--grid:rgba(0,0,0,.05);--tile-border:rgba(0,0,0,.25);--shadow:rgba(0,0,0,.25);--handle:rgba(0,0,0,.5);--handle-hover:rgba(0,150,255,.9);--selected:#007acc;--accent:#007acc;--border:rgba(0,0,0,.25);--border-light:rgba(0,0,0,.12);--hover-bg:rgba(0,0,0,.05);--selected-bg:rgba(0,122,204,.15);--scrollbar-thumb:rgba(0,0,0,.3);--scrollbar-track:#f0f0f0;--input-bg:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,sans-serif}
#mount{height:100vh}
.marquee{position:absolute;border:1px dashed var(--accent);background:rgba(124,199,255,.1);pointer-events:none}
.tile.selected{outline:2px solid var(--selected); outline-offset:0; box-shadow:0 10px 22px var(--shadow), 0 0 0 3px rgba(66,175,161,.12) inset}
button[disabled]{opacity:.5;cursor:not-allowed}
input,textarea,select,button{border-radius:.25rem}
input,textarea,select{background:var(--input-bg);color:var(--ink);border:1px solid var(--border)}
.icon-btn{display:flex;align-items:center;justify-content:center;font-size:16px;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--panel);color:var(--ink);cursor:pointer}
.icon-btn.selected{outline:2px solid var(--accent);outline-offset:0}
.content-wrapper>header button:hover{background:var(--hover-bg)}
.color-btn.selected{outline:2px solid var(--accent);outline-offset:0}
.linkstyle-btn{display:flex;align-items:center;justify-content:center;font-size:16px;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--panel);color:var(--ink);cursor:pointer}
.linkstyle-btn.selected{outline:2px solid var(--accent);outline-offset:0}
.link-handle{position:absolute;left:50%;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:crosshair;transform:translateX(-50%);display:none}
.link-handle:hover{background:var(--handle-hover)}
.tile:hover .link-handle{display:block}
.detail-icon{position:absolute;bottom:4px;right:4px;font-size:16px;cursor:pointer;display:none;color:var(--handle)}
.tile:hover .detail-icon{display:block}
.detail-editor{position:absolute;min-width:160px;min-height:80px;padding:4px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--ink);z-index:1000;resize:vertical}
.detail-tooltip{position:absolute;z-index:1000;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:6px;padding:4px 8px;box-shadow:0 4px 8px var(--shadow);font-size:16px;max-width:240px;white-space:pre-wrap;word-break:break-word}
.focus-container{position:absolute;left:50%;top:-32px;transform:translateX(-50%);display:none;gap:4px}
.focus-handle,.focus-direct-handle{width:32px;height:32px;border-radius:6px;cursor:pointer;display:none;color:var(--accent);font-size:24px;line-height:32px;text-align:center;background:transparent}
.focus-direct-handle{color:var(--selected)}
.focus-handle:hover,.focus-direct-handle:hover{color:var(--handle-hover)}
.tile.has-link:hover .focus-container{display:flex}
.tile.has-link:hover .focus-direct-handle{display:block}
.tile.has-indirect-link:hover .focus-handle{display:block}
.tile.hidden-by-focus{display:none}
.link-line.hidden-by-focus{display:none}
.link-label.hidden-by-focus,.link-label>.hidden-by-focus{display:none}
.icon-particle{position:absolute;pointer-events:none;font-size:24px;transition:transform .6s ease-out,opacity .6s ease-out}
.link-line{stroke-width:var(--lw,2);fill:none;pointer-events:stroke;stroke-linecap:round;stroke-linejoin:round}
.link-line.selected-link{stroke-width:calc(var(--lw,2) + 2)}
.link-label{pointer-events:none;user-select:none}

.menu{padding:8px;background:var(--panel);border:1px solid var(--border-light);border-radius:.4rem;box-shadow:0 4px 8px rgba(0,0,0,.1);}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;margin:0;background:transparent;border:none;border-bottom:1px solid var(--border-light);color:var(--ink);text-decoration:none;text-align:left;font-size:13px;border-radius:4px;cursor:pointer;}
.menu-item:last-child{border-bottom:none;}
.menu-item .icon{width:20px;text-align:center;font-size:16px;}
.menu-item:hover{background:var(--hover-bg);border-radius:4px;text-decoration:none;}
.menu-item.danger{color:#f44336;}
.menu-item.danger .icon{color:#f44336;}

/* responsive palettes */
.palette-wrapper{position:relative;display:flex;align-items:center}
.palette-toggle{display:none}
.palette-content{display:var(--display)}
.palette-wrapper.popup .palette-content{display:none;position:absolute;top:100%;left:0;margin-top:4px;padding:.4rem;border:1px solid var(--border-light);border-radius:.4rem;background:var(--panel);z-index:100}
.palette-wrapper.popup .palette-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:5px;border:1px solid var(--border);background:var(--panel);color:var(--ink);cursor:pointer}
.palette-wrapper.popup.open .palette-content{display:var(--display)}
@media (max-width:800px){
  .palette-wrapper .palette-content{display:none;position:absolute;top:100%;left:0;margin-top:4px;padding:.4rem;border:1px solid var(--border-light);border-radius:.4rem;background:var(--panel);z-index:100}
  .palette-wrapper .palette-toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--panel);color:var(--ink);cursor:pointer}
  .palette-wrapper.open .palette-content{display:var(--display)}
}

.palette-toggle.icon-palette-toggle{width:36px;height:36px;font-size:21px}

/* New Sidebar Styles */
.main-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 260px;
  background: var(--panel);
  border-right: 1px solid var(--border-light);
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.sidebar.collapsed {
  width: 48px;
  padding: 0.5rem;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sidebar-app-icon {
  width: 32px;
  height: 32px;
}

.sidebar-app-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.logo-system {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  font-weight: 500;
  letter-spacing: 0.02em;
}

.logo-system span:first-child {
  opacity: 0.9;
}

.logo-system span:last-child {
  margin-left: 0.08em;
  letter-spacing: 0.08em;
  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.15);
}

.sidebar-collapse-btn {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
}

.sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-content .charts-list {
  flex: 1 1 auto;
  min-height: 0;
}

.dark-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.dark-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.dark-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.dark-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}
.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

.charts-list {
  overflow-y: auto;
}

.sidebar-footer {
    padding-top: 0.25rem;
    border-top: none;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.user-info {
  overflow: visible;
}

.sidebar-item:hover {
  background: var(--hover-bg);
}

.sidebar-item-icon {
  font-size: 1.2rem;
}

.profile-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.user-name {
  font-weight: 600;
}

.subscription-tier {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.75;
}

.sidebar-item-name {
  flex: 1;
}

.sidebar-item-name-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--ink);
}

.new-chart-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
    width: 100%;
    margin-bottom: 1rem;
}

.sidebar-content .new-chart-btn:first-of-type {
  margin-top: 3rem;
}

/* Infinity mode: place New and Encrypted buttons side by side */
.sidebar.infinity .new-chart-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1em;
}

.sidebar.infinity .new-chart-buttons .new-chart-btn {
  width: auto;
  margin: 0;
}

.sidebar.infinity .new-chart-buttons .new-chart-btn:not(.encrypted-btn) {
  flex: 4;
}

.sidebar.infinity .new-chart-buttons .new-chart-btn.encrypted-btn {
  flex: 6;
}

.sidebar-item .more-options {
    display: none;
    background: transparent;
    border: none;
    color: var(--ink);
    cursor: pointer;
}

.sidebar-item:hover .more-options {
    display: block;
}

.chart-context-menu {
  position: absolute;
  z-index: 1000;
}

.chart-context-menu .menu-item {
  border-bottom: none;
}

.archived-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.archived-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.archived-header .collapse-arrow {
  margin-left: auto;
  font-size: 0.8rem;
}

/* Collapsed Sidebar Styles */
.sidebar.collapsed .sidebar-app-name,
.sidebar.collapsed .sidebar-item-name,
.sidebar.collapsed .gpt-limit-text {
  display: none;
}

.sidebar.collapsed .user-text {
  display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

.sidebar.collapsed .sidebar-collapse-btn {
    transform: rotate(180deg);
    display: none;
}

.sidebar.collapsed .sidebar-header:hover {
    cursor: pointer;
}

.sidebar.collapsed .sidebar-header:hover .sidebar-app-icon {
    display: none;
}

.sidebar.collapsed .sidebar-header:hover .sidebar-collapse-btn {
    display: block;
}

.sidebar.collapsed .new-chart-btn,
.sidebar.collapsed .user-info {
    justify-content: center;
}

.sidebar.collapsed .sidebar-content > :not(.new-chart-btn):not(.new-chart-buttons):not(.charts-list),
.sidebar.collapsed .sidebar-footer > :not(.user-info) {
    display: none;
}

.sidebar.collapsed .encrypted-btn {
    display: none;
}

.sidebar.collapsed .charts-list {
    overflow: hidden;
}

.sidebar.collapsed .charts-list .sidebar-item {
    justify-content: center;
}

.sidebar.collapsed .sidebar-item .more-options {
    display: none;
}

/* GPT Limit Slider */
.gpt-limit-section {
    padding: 0.5rem;
}
.gpt-limit-slider {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.gpt-limit-bar {
    width: 10%; /* Will be updated dynamically */
    height: 100%;
    background: var(--accent);
}
.gpt-limit-text {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.5);
}

.gpt-model-select {
    border: 1px solid var(--border-light);
    background: var(--panel);
    color: var(--ink);
    border-radius: 0.25rem;
}

.sidebar-item.active {
  background: var(--accent);
  color: var(--bg);
}

.sidebar-item.active .more-options {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-radius: 0.25rem;
}

.sidebar-item.active .more-options:hover {
  background: rgba(255, 255, 255, 0.1);
}

.passphrase-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.passphrase-modal .content {
  background: var(--panel);
  color: var(--ink);
  padding: 1rem;
  border-radius: 6px;
  width: 300px;
  font-size: 14px;
}

.passphrase-modal table {
  width: 100%;
  border-collapse: collapse;
}

.passphrase-modal table td {
  padding: 0 0 0.5rem 0;
}

.passphrase-modal table td:first-child {
  white-space: nowrap;
  padding-right: 0.5rem;
}

.passphrase-modal input[type="password"],
.passphrase-modal input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.passphrase-modal .strength {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}

.passphrase-modal .strength-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s;
}

.decryption-error-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  text-align: center;
  pointer-events: none;
}

.decryption-error-overlay .message {
  background: var(--panel);
  color: var(--ink);
  padding: 1rem;
  border-radius: 6px;
  pointer-events: auto;
}

.decryption-error-overlay a {
  color: var(--accent);
}

/* GPT analysis history */
.history-item {
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
}

.history-item[open] {
  background: var(--selected-bg);
}

/* Options popup */
.options-dialog{display:flex;flex-direction:column;}
.options-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--border-light);}
.options-tab{flex:1;padding:.25rem 0;background:none;border:none;color:var(--ink);cursor:pointer;border-bottom:2px solid transparent;}
.options-tab.active{border-bottom-color:var(--accent);font-weight:bold;}
.options-section{display:none;flex:1;}
.options-section.active{display:block;flex:1;}
.options-section[data-tab="general"]{display:none;flex:1;flex-direction:column;align-items:flex-start;gap:5em;padding:5em 0;}
.options-section[data-tab="general"].active{display:flex;}
.options-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;}