*{box-sizing:border-box}
body{margin:0;padding:30px;background:#06111f;color:#eef4ff;font-family:Inter,"Noto Sans JP",sans-serif}
.shell{max-width:1500px;margin:auto}
.top{display:flex;justify-content:space-between;align-items:center}
.top p{color:#91b3ff;letter-spacing:.15em}
h1{font-size:38px;margin:8px 0}
.top span,p,small{color:#9eabc0}
.updated,.card,.panel{background:#101f33;border:1px solid #203552;border-radius:16px}
.updated{padding:18px 25px}
.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}
.card{padding:22px}
.card strong{display:block;font-size:30px;margin:16px 0}
.panel{padding:22px;margin-top:18px}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.form-grid{display:grid;grid-template-columns:120px 1.3fr 1fr 1fr 1.4fr 120px;gap:14px}
input,select{background:#081321;color:white;border:1px solid #243b5b;border-radius:9px;padding:13px}
button{background:#1768ff;color:white;border:0;border-radius:9px;padding:13px 18px;font-weight:bold}
.table{overflow:auto;margin-top:20px}
.thead,.row{display:grid;grid-template-columns:80px 180px 90px 120px 140px 120px 140px 120px 100px;gap:10px;min-width:1100px;padding:15px}
.thead{color:#9eabc0;background:#15253c}
.row{border-top:1px solid #1d3048}
.up{color:#4cd6a8}.down{color:#ff9b9b}
.note{text-align:center}

.icon{
width:42px;height:42px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:rgba(45,120,255,.18);
color:#69a0ff;
font-size:20px;
margin-bottom:14px;
}
.card{
position:relative;
overflow:hidden;
transition:.2s;
}
.card:hover{
transform:translateY(-3px);
border-color:#3965a0;
}
.panel{
box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.updated strong{
font-size:16px;
color:#fff;
}
button:hover{
filter:brightness(1.15);
}
.row:hover{
background:rgba(80,130,220,.08);
}

.table .row{
grid-template-columns:80px 180px 90px 120px 140px 120px 140px 120px 100px 150px;
}
.row button{
padding:7px 10px;
margin-right:4px;
font-size:12px;
}

.trend{
font-size:13px;
margin:0;
}
.trend.up{color:#4cd6a8}
.trend.down{color:#ff9b9b}
.card strong{
letter-spacing:.02em;
}

/* final polish */
.trend span{font-weight:700}
.card p{margin-bottom:0}
.form-grid button{height:46px}
.row button{background:#172a45;border-radius:8px}
.row button:hover{background:#23466f}
.up{font-weight:bold}
.down{font-weight:bold}

/* visual tuning v5 */
body{
 padding:32px 28px;
 letter-spacing:.02em;
}
.shell{
 max-width:1470px;
}
.top{
 margin-bottom:34px;
}
.eyebrow{
 font-size:13px;
 font-weight:600;
 margin-bottom:14px;
}
.top h1{
 font-size:36px;
 font-weight:800;
}
.updated{
 display:flex;
 align-items:center;
 gap:14px;
 min-width:190px;
}
.calendar{
 width:38px;
 height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:10px;
 background:rgba(70,120,255,.15);
 color:#76a7ff;
}
.summary-cards{
 gap:18px;
 margin-bottom:18px;
}
.card{
 min-height:132px;
 padding:18px 22px;
}
.card small{
 font-size:14px;
}
.card strong{
 font-size:29px;
 margin:14px 0;
}
.panel{
 border-radius:18px;
 padding:20px;
 margin-top:18px;
}
.section-line{
 height:1px;
 margin:8px 0 18px;
 background:rgba(150,180,220,.08);
}
.form-grid{
 align-items:end;
 gap:20px;
}
input,select{
 height:42px;
}
.table{
 border-radius:12px;
}
.thead{
 background:#16263f;
 font-size:13px;
}
.row{
 min-height:56px;
}
.row button{
 width:34px;
 height:34px;
 padding:0;
}

.field{
 display:flex;
 flex-direction:column;
 gap:8px;
 color:#9eabc0;
 font-size:13px;
}
.form-grid{
 align-items:end;
}

/* v7 alignment polish */
.card{
 display:flex;
 flex-direction:column;
}
.card .icon{
 margin-bottom:12px;
}
.panel h2{
 margin-top:0;
}
.form-grid{
 display:grid;
 grid-template-columns:140px 1.4fr 1fr 1fr 1.4fr 130px;
 align-items:end;
}
.form-grid .field{
 min-width:0;
}
.form-grid > button{
 align-self:end;
}
#add{
 grid-column:auto;
}
#updateMarket{
 background:#2563eb;
}
.row{
 align-items:center;
}
.row span{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.action-area{
 display:flex;
 gap:12px;
 align-items:flex-end;
 height:42px;
}
.action-area button{
 height:42px;
 white-space:nowrap;
}
.card .icon{
 flex:none;
}

/* v9 fix */
.form-grid{
 grid-template-columns: 120px 1.25fr 1fr 1fr 1.25fr auto;
 gap:14px;
}
.action-area{
 display:flex;
 gap:10px;
 align-items:flex-end;
}
.action-area button{
 min-width:110px;
}
@media(max-width:900px){
 .form-grid{grid-template-columns:1fr;}
 .action-area{width:100%;}
}

/* v10 form alignment fix */
.form-grid{
    grid-template-columns: 120px 1.25fr 1fr 1fr 1.25fr 230px;
    gap:14px;
}
.action-area{
    width:230px;
    display:flex;
    gap:10px;
}
.action-area button{
    flex:1;
    min-width:0;
    padding:10px 8px;
    font-size:13px;
}
@media(max-width:1100px){
    .form-grid{
        grid-template-columns:1fr;
    }
    .action-area{
        width:100%;
    }
}

/* v11 market display polish */
.market-price{
 color:#69a0ff;
 font-weight:700;
}
.profit-positive{
 color:#4cd6a8;
 font-weight:700;
}
.profit-negative{
 color:#ff9b9b;
 font-weight:700;
}

/* v12 market button */
#updateMarket:disabled{
 opacity:.6;
 cursor:wait;
}

/* v13 holdings polish */
#marketStatus{
 color:#9eabc0;
 white-space:nowrap;
 align-self:center;
}
.table-wrap{
 background:rgba(255,255,255,.015);
 border-radius:14px;
}
.thead{
 font-weight:600;
}
.row{
 background:rgba(255,255,255,.01);
}
.row span{
 display:flex;
 align-items:center;
 min-height:30px;
}
.row span:nth-child(2){
 font-weight:700;
 color:#fff;
}
.market-price{
 font-weight:700;
 color:#7db0ff;
}

/* v14 table operation polish */
.operation-cell{
 display:flex!important;
 gap:8px;
}
.operation-cell button{
 width:44px!important;
 height:32px!important;
 padding:0!important;
 font-size:12px!important;
}
.row span:nth-child(6){
 color:#7db0ff;
 font-weight:700;
}
.row span:nth-child(7){
 font-weight:700;
}

/* v15 operation/table polish */
.operation-cell{
 display:flex!important;
 gap:6px;
 justify-content:center;
}
.operation-cell button{
 background:#203654;
 color:#fff;
}
.market-price{
 color:#79b3ff;
 font-weight:700;
}

/* v16 button fix */
.action-area{
 display:flex;
 flex-direction:column;
 gap:6px;
 width:220px;
}
.action-area button{
 width:220px;
 height:40px;
 padding:8px 12px;
 box-sizing:border-box;
}
#marketStatus{
 width:220px;
 text-align:center;
}

/* holdings readability */
.table-wrap{
 overflow-x:auto;
}
.row span:nth-child(2){
 font-size:15px;
}
.row span:nth-child(6),
.row span:nth-child(7),
.row span:nth-child(8){
 font-weight:700;
}

/* v17 action layout */
.form-grid .action-area{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:center;
}
.form-grid .action-area button{
  width:100%;
  height:40px;
  padding:8px;
  font-size:13px;
}
#marketStatus{
  grid-column:1 / -1;
  width:100%;
  text-align:center;
  font-size:12px;
}

/* table readability */
.table-wrap{overflow-x:auto}
.row span:nth-child(6){color:#79b3ff;font-weight:700}
.row span:nth-child(7){font-weight:700}
.row span:nth-child(8){font-weight:700}

/* v18 final action layout */
.action-area{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
 width:100%;
}
.action-area button{
 width:100%;
 height:40px;
}
#marketStatus{
 grid-column:1 / -1;
 text-align:center;
}


/* manual stock price input */
.form-grid{
  grid-template-columns:120px 1.25fr 1fr 1fr 1.15fr 1.15fr 130px;
  gap:14px;
}
.action-area.manual{
  display:flex;
  width:100%;
  align-items:end;
}
.action-area.manual button{
  width:100%;
  height:42px;
  white-space:nowrap;
}
@media(max-width:1200px){
  .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .action-area.manual{
    grid-column:1 / -1;
  }
}
@media(max-width:720px){
  .form-grid{
    grid-template-columns:1fr;
  }
  .action-area.manual{
    grid-column:auto;
  }
}


/* registration + holdings table alignment fix */
.table-wrap{
  width:100%;
  overflow-x:auto;
}
.table{
  width:max-content;
  min-width:100%;
  overflow:visible;
}
.thead,
.table .row{
  display:grid;
  grid-template-columns:
    80px
    180px
    90px
    110px
    140px
    120px
    140px
    130px
    90px
    120px;
  column-gap:12px;
  align-items:center;
  min-width:1320px;
  padding:14px 16px;
}
.thead span,
.table .row > span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.operation-cell,
.table .row > span:last-child{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  overflow:visible!important;
}
.operation-cell button,
.table .row > span:last-child button{
  width:46px!important;
  min-width:46px!important;
  height:32px!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap;
}


/* annual dividend input */
.form-grid{
  grid-template-columns:120px 1.2fr .9fr .9fr 1fr 1fr 1.15fr 130px;
  gap:12px;
}
.thead,
.table .row{
  grid-template-columns:
    80px 180px 90px 110px 140px 120px 140px 130px 90px 120px 120px;
  min-width:1450px;
}
@media(max-width:1300px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .action-area.manual{grid-column:1 / -1;}
}
@media(max-width:720px){
  .form-grid{grid-template-columns:1fr;}
  .action-area.manual{grid-column:auto;}
}

/* requested holdings column order */
.thead,
.table .row{
  grid-template-columns:
    80px
    110px
    180px
    120px
    110px
    120px
    170px
    130px
    120px
    90px
    120px
    120px;
  min-width:1570px;
}

/* requested holdings list order v2 */
.thead,
.table .row{
  grid-template-columns:
    80px
    110px
    180px
    120px
    110px
    130px
    120px
    150px
    180px
    120px;
  min-width:1350px;
}

/* requested holdings list order v3 */
.thead,
.table .row{
  grid-template-columns:
    80px
    110px
    180px
    120px
    110px
    130px
    120px
    120px
    90px
    180px
    120px;
  min-width:1460px;
}


/* holdings table final responsive optimization */
.table-wrap{
  width:100%;
  overflow-x:auto;
  scrollbar-gutter:stable;
  border-radius:14px;
}

.table{
  width:100%;
  min-width:1180px;
  overflow:visible;
}

.thead,
.table .row{
  display:grid;
  grid-template-columns:
    minmax(64px, .65fr)     /* 種類 */
    minmax(92px, .85fr)     /* 銘柄コード */
    minmax(150px, 1.5fr)    /* 銘柄名 */
    minmax(118px, 1.05fr)   /* 現在株価（円） */
    minmax(96px, .9fr)      /* 保有株数 */
    minmax(120px, 1.1fr)    /* 評価額 */
    minmax(118px, 1.05fr)   /* 取得単価（円） */
    minmax(110px, 1fr)      /* 損益 */
    minmax(82px, .75fr)     /* 損益率 */
    minmax(170px, 1.55fr)   /* 1株あたり年間配当（円） */
    minmax(112px, 1fr);     /* 操作 */
  gap:10px;
  align-items:center;
  min-width:1180px;
  padding:14px 14px;
}

.thead{
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.thead span{
  min-width:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:keep-all;
  overflow-wrap:normal;
}

.table .row > span{
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

.table .row > span:nth-child(3){
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
}

.table .row > span:nth-child(2),
.table .row > span:nth-child(4),
.table .row > span:nth-child(5),
.table .row > span:nth-child(6),
.table .row > span:nth-child(7),
.table .row > span:nth-child(8),
.table .row > span:nth-child(9),
.table .row > span:nth-child(10){
  font-variant-numeric:tabular-nums;
}

.operation-cell,
.table .row > span:last-child{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  overflow:visible!important;
  white-space:nowrap;
}

.operation-cell button,
.table .row > span:last-child button{
  width:46px!important;
  min-width:46px!important;
  height:32px!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap;
}

@media (max-width:1280px){
  .table{
    min-width:1240px;
  }
  .thead,
  .table .row{
    min-width:1240px;
  }
}

@media (max-width:720px){
  .table{
    min-width:1180px;
  }
  .thead,
  .table .row{
    min-width:1180px;
    padding:12px;
  }
}

/* site footer */
.site-footer{
  max-width:1470px;
  margin:28px auto 0;
  padding:20px 4px 6px;
  border-top:1px solid rgba(150,180,220,.14);
  color:#7f90a8;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-brand strong{
  color:#c9d6e8;
  font-size:13px;
  letter-spacing:.04em;
}
.footer-brand span,
.footer-meta{
  color:#71839c;
  font-size:12px;
}
@media(max-width:720px){
  .site-footer{margin-top:22px;}
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .footer-brand{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
}


/* annual dividend total column */
.thead,
.table .row{
  grid-template-columns:
    minmax(64px, .65fr)
    minmax(92px, .85fr)
    minmax(150px, 1.5fr)
    minmax(118px, 1.05fr)
    minmax(96px, .9fr)
    minmax(120px, 1.1fr)
    minmax(118px, 1.05fr)
    minmax(110px, 1fr)
    minmax(82px, .75fr)
    minmax(135px, 1.2fr)
    minmax(112px, 1fr);
}