/* PAGE INTRO */
.page-intro{background:var(--surface);padding:48px 24px;border-bottom:1px solid var(--border)}
.page-intro .inner{max-width:var(--max-w);margin:0 auto;text-align:center}
.page-intro h1{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--fg);margin-bottom:4px}
.page-intro p{font-size:14px;color:var(--muted);max-width:600px;margin:0 auto}
.cc-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:var(--max-w);margin:0 auto;padding:32px 24px}
.cc-col{border:1px solid var(--border);border-radius:var(--radius);background:#fff;display:flex;flex-direction:column;min-height:200px}
.cc-col-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface);border-radius:var(--radius) var(--radius) 0 0}
.cc-col-header h3{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.cc-col-header .cc-col-count{font-size:12px;color:var(--muted)}
.cc-search-wrap{position:relative;padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.cc-input-wrap{position:relative;flex:1;min-width:0}
.cc-input-wrap .cc-search-input{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font-body);background:#fff;color:var(--fg);outline:none;transition:border-color .2s;box-sizing:border-box}
.cc-input-wrap .cc-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.cc-input-wrap .cc-search-input::placeholder{color:var(--muted)}
.cc-search-results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.10);max-height:260px;overflow-y:auto;display:none;z-index:50;margin-top:4px}
.cc-search-results .item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .1s}
.cc-search-results .item:hover{background:var(--accent);color:#fff}
.cc-search-results .item:hover .s-code,.cc-search-results .item:hover .s-logo,.cc-search-results .item:hover .s-name,.cc-search-results .item:hover .s-market,.cc-search-results .item:hover .s-meta{color:#fff}
.cc-search-results .item:hover .s-logo img{filter:brightness(10)}
.cc-search-results .item .s-logo{width:26px;height:26px;border-radius:4px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted);flex-shrink:0}
.cc-search-results .item .s-logo img{width:26px;height:26px;border-radius:4px;object-fit:contain}
.cc-search-results .item .s-meta{display:flex;align-items:center;gap:8px}
.cc-search-results .item .s-code{font-size:11px;font-weight:600;color:var(--accent)}
.cc-search-results .item .s-market{font-size:10px;color:var(--muted);white-space:nowrap}
.cc-search-results .item .s-name{font-size:13px;color:var(--fg);flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-search-results .item .s-region{font-size:10px;color:var(--muted);background:var(--bg);padding:2px 6px;border-radius:4px;white-space:nowrap;font-weight:450}
.cc-region-select{flex-shrink:0;width:150px;position:relative}
.cc-region-select select{display:none}
.cc-region-select .cs-trigger{height:38px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:var(--font-body);color:var(--fg);background:#fff;outline:none;cursor:pointer;transition:border-color .2s;user-select:none;box-sizing:border-box;display:flex;align-items:center;gap:5px}
.cc-region-select .cs-trigger:hover{border-color:var(--muted)}
.cc-region-select .cs-trigger.cs-open{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.cc-region-select .cs-trigger::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--muted);transition:transform .2s;flex-shrink:0;margin-left:auto}
.cc-region-select .cs-trigger.cs-open::after{transform:rotate(180deg)}
.cc-region-select .cs-options{position:fixed;top:auto;left:auto;width:max-content;white-space:nowrap;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:999;max-height:240px;overflow-y:auto;display:none}
.cc-region-select .cs-options.open{display:block}
.cc-region-select .cs-option{padding:8px 12px;font-size:12px;line-height:1.6;cursor:pointer;transition:background .1s;color:var(--fg);display:flex;align-items:center;gap:6px}
.cc-region-select .cs-option:hover{background:var(--accent);color:#fff}
.cc-region-select .cs-option.cs-selected{font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.cc-region-select .cs-option.cs-selected:hover{color:var(--accent)}
.cc-region-select .cs-flag{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cc-list{padding:8px 12px 12px;flex:1;min-height:0}
.cc-row1,.cc-row2{display:contents}
.cc-item{display:flex;align-items:center;gap:20px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:#fff;transition:box-shadow .15s;font-size:12px;flex-wrap:wrap}
.cc-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}

.cc-item .cc-logo{width:26px;height:26px;border-radius:4px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;flex-shrink:0;transition:background .1s;overflow:hidden}
.cc-item .cc-logo:hover{background:var(--accent);color:#fff}
.cc-item .cc-logo-img{width:26px;height:26px;border-radius:4px;object-fit:contain}
.cc-item .cc-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:1;min-width:0}
.cc-item .cc-info-name{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.cc-item .cc-code{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;flex-shrink:0}
.cc-item .cc-price-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;margin-left:0}
.cc-item .cc-price-row{display:flex;align-items:center;justify-content:center;gap:0}
.cc-item .cc-currency-sym{font-size:12px;font-weight:600;color:var(--muted);user-select:none}
.cc-item .cc-price{font-size:12px;font-weight:600;color:var(--fg);cursor:text;padding:1px 4px;border-radius:4px;transition:border-color .15s;overflow:hidden;white-space:nowrap;text-align:center;width:auto;min-width:4ch;font-variant-numeric:tabular-nums}
.cc-item .cc-price:focus{outline:none;border:1px solid var(--accent);padding:0 3px;caret-color:var(--accent);width:4ch;min-width:0}
.cc-item .cc-update{font-size:9px;color:var(--muted);white-space:nowrap;margin-top:1px;text-align:center}
.cc-item .cc-sector,
.cc-item .cc-industry{display:none}
.cc-item .cc-controls{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.cc-item .cc-select-wrap{position:relative;height:28px}
.cc-item .cc-select-wrap select{display:none}
.cc-cs-trigger{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 8px;border:1px solid var(--border);border-radius:5px;font-size:11px;font-family:var(--font-body);color:var(--fg);background:#fff;cursor:pointer;user-select:none;box-sizing:border-box;min-width:70px;transition:border-color .1s}
.cc-cs-trigger:hover{border-color:var(--muted)}
.cc-cs-trigger.cs-open{border-color:var(--accent)}
.cc-cs-trigger::after{content:'';width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid var(--muted);transition:transform .2s;flex-shrink:0;margin-left:6px}
.cc-cs-trigger.cs-open::after{transform:rotate(180deg)}
.cc-cs-options{position:fixed;top:auto;left:auto;width:max-content;min-width:70px;white-space:nowrap;background:#fff;border:1px solid var(--border);border-radius:5px;box-shadow:0 4px 12px rgba(0,0,0,.08);z-index:999;display:none;max-height:180px;overflow-y:auto}
.cc-cs-options.open{display:block}
.cc-cs-option{padding:5px 10px;font-size:11px;cursor:pointer;transition:background .1s;color:var(--fg)}
.cc-cs-option:hover{background:var(--accent);color:#fff}
.cc-cs-option.cs-selected{font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.cc-cs-option.cs-selected:hover{color:var(--accent)}
.cc-item .cc-select-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.cc-item .cc-avg{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:2px;text-align:center}
.cc-item .cc-avg-currency{font-size:10px;font-weight:600;color:var(--muted);user-select:none;margin-right:1px;vertical-align:middle}
.cc-item .cc-avg-val{color:var(--fg);font-weight:600;cursor:text;padding:1px 2px;border-radius:3px;transition:border-color .15s;border:1px solid transparent;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:middle;width:auto;min-width:4ch}
.cc-item .cc-avg-val:focus{outline:none;border-color:var(--accent);padding:1px 2px;width:4ch;min-width:0}
.cc-item .cc-shares-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.cc-item .cc-shares-label{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:2px;text-align:center}
.cc-item .cc-income-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.cc-item .cc-income-label{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:2px;text-align:center}
.cc-item .cc-shares{width:50px;height:28px;padding:0 6px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:var(--font-body);text-align:center;color:var(--fg);outline:none;transition:border-color .1s;flex-shrink:0}
.cc-item .cc-shares:focus{border-color:var(--accent)}
.cc-item .cc-income{font-size:12px;font-weight:600;color:var(--positive);min-width:50px;text-align:right;flex-shrink:0}
.cc-item .cc-del{border:none;background:transparent;color:var(--negative);cursor:pointer;font-size:20px;padding:2px;line-height:1;flex-shrink:0;opacity:.4;transition:opacity .1s}
.cc-item .cc-del:hover{opacity:1}
.cc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;color:var(--muted);font-size:13px;text-align:center;flex:1}
.cc-empty svg{width:32px;height:32px;stroke:var(--border);margin-bottom:8px}
.cc-col-summary{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
.cc-col-summary .cs-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.cc-col-summary .cs-label{font-size:11px;color:var(--muted)}
.cc-col-summary .cs-value{font-size:13px;font-weight:600;color:var(--fg)}
.note-wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px 60px}
.note-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px}
.note-box h4{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:8px;color:var(--fg)}
.note-box p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:6px}
.note-box p:last-child{margin-bottom:0}
@media(max-width:768px){
  .cc-split{grid-template-columns:1fr;padding:16px}
  .cc-search-wrap{flex-wrap:wrap;gap:6px}
  .cc-region-select{width:100%;order:1}
  .cc-input-wrap{order:2;flex-basis:100%}
  .cc-row1{display:flex;flex:1;align-items:center;gap:10px}
  .cc-row2{display:flex;width:100%;align-items:center;gap:8px;justify-content:space-between;margin-top:8px}
  .cc-item{flex-wrap:wrap;gap:6px;padding:10px 12px}
  .cc-item .cc-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:1;min-width:0}
  .cc-item .cc-info-name{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
  .cc-item .cc-sector,
  .cc-item .cc-industry{display:none}
  .cc-item .cc-price-wrap{flex-shrink:0;flex-direction:column;align-items:center;gap:2px}
  .cc-item .cc-price{font-size:12px}
  .cc-item .cc-controls{flex:1;margin-left:0;justify-content:flex-start;gap:12px;min-width:0}
  .cc-item .cc-select-group{flex:0.6}
  .cc-item .cc-shares-group{flex:0.6}
  .cc-item .cc-income-group{flex:0.6}
  .cc-item .cc-shares{width:44px;font-size:11px}
  .cc-cs-trigger{min-width:60px;font-size:10px}
  .cc-item .cc-income{font-size:11px;min-width:40px}
  .cc-item .cc-del{flex-shrink:0;font-size:24px;padding:4px}
}
@media(max-width:600px){
  .page-intro{padding:36px 16px}
  .note-wrap{padding:0 16px 40px}
}