/* ==========================================================
   NISA Dashboard Stylesheet
   Refactored (layout preserved)
   ========================================================== */

:root {
    --green:#0f6b4d;
    --green2:#157b58;
    --gold:#ad8a49;
    --text:#202925;
    --muted:#707a75;
    --line:#e3e8e5;
    --bg:#f4f6f5;
    --card:#fff
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

button,input {
    font:inherit
}

.brand {
    display:flex;
    align-items:center;
    gap:12px
}

.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    background:var(--green);
    color:#fff;
    font:700 20px Georgia
}

.brand strong,.brand small {
    display:block
}

.brand strong {
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    letter-spacing:.03em
}

.brand small {
    margin-top:2px;
    color:#728078;
    font-size:8px;
    letter-spacing:.18em
}

.demo-badge {
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 9px;
    border:1px solid #d7dfdb;
    color:#6f7a74;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em
}

.eyebrow {
    margin:0 0 8px;
    color:var(--green);
    font-size:10px;
    font-weight:800;
    letter-spacing:.18em
}

.card {
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 8px 24px rgba(20,48,37,.035)
}

.login-page {
    background:#fff
}

.login-header {
    height:76px;
    padding:0 4vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}

.login-main {
    min-height:calc(100vh - 76px);
    display:grid;
    grid-template-columns:1.15fr minmax(420px,.85fr)
}

.login-visual {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:8vw;
    background:linear-gradient(145deg,#0b5b42,#13805c 58%,#1b8f68);
    color:#fff
}

.login-visual:after {
    content:"";
    position:absolute;
    inset:auto -15% -35% 10%;
    height:70%;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    transform:rotate(-12deg)
}

.visual-copy {
    position:relative;
    z-index:3;
    max-width:560px
}

.visual-copy .eyebrow {
    color:#b9ead8
}

.visual-copy h1 {
    margin:0 0 24px;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:clamp(42px,5vw,72px);
    font-weight:500;
    line-height:1.3
}

.visual-copy p:last-child {
    max-width:470px;
    line-height:2;
    color:#dcece6
}

.visual-orb {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2)
}

.orb-one {
    width:390px;
    height:390px;
    right:-100px;
    top:8%
}

.orb-two {
    width:240px;
    height:240px;
    right:15%;
    bottom:-80px
}

.mini-card {
    position:absolute;
    z-index:4;
    min-width:190px;
    padding:20px;
    background:rgba(255,255,255,.94);
    color:var(--text);
    box-shadow:0 18px 60px rgba(0,45,31,.18)
}

.mini-card span,.mini-card strong,.mini-card em {
    display:block
}

.mini-card span {
    font-size:11px;
    color:#7b8580
}

.mini-card strong {
    margin-top:8px;
    font-size:20px
}

.mini-card em {
    margin-top:7px;
    color:var(--green2);
    font-style:normal;
    font-weight:700
}

.mini-card-a {
    right:8%;
    top:20%
}

.mini-card-b {
    right:20%;
    bottom:18%
}

.login-panel {
    display:grid;
    place-items:center;
    padding:60px 7vw;
    background:#fbfcfb
}

.login-box {
    width:min(100%,440px)
}

.panel-kicker {
    margin:0;
    color:var(--green);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em
}

.login-box h2 {
    margin:10px 0 12px;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:38px;
    font-weight:500
}

.panel-note {
    margin:0 0 28px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8
}

.login-error {
    margin:0 0 18px;
    padding:12px 14px;
    border-left:3px solid #b63c3c;
    background:#fff1f1;
    color:#922f2f;
    font-size:13px
}

.form-field {
    display:block;
    margin-bottom:20px
}

.form-field>span {
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700
}

.form-field input {
    width:100%;
    height:54px;
    padding:0 16px;
    border:1px solid #cfd8d3;
    background:#fff;
    outline:none
}

.form-field input:focus {
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(15,107,77,.1)
}

.password-wrap {
    position:relative
}

.password-wrap input {
    padding-right:75px
}

.password-toggle {
    position:absolute;
    right:8px;
    top:8px;
    height:38px;
    padding:0 12px;
    border:0;
    background:#eef3f0;
    color:var(--green);
    font-size:12px;
    cursor:pointer
}

.check-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0 24px;
    color:#59635e;
    font-size:13px
}

.primary-button,.secondary-button {
    width:100%;
    height:56px;
    border:0;
    cursor:pointer;
    font-weight:700
}

.primary-button {
    background:var(--green);
    color:#fff;
    box-shadow:0 10px 25px rgba(15,107,77,.22)
}

.primary-button:hover {
    background:#0b5d42
}

.demo-login-info {
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    padding:12px 14px;
    background:#eef3f0;
    color:#52615a;
    font-size:12px
}

.security-note {
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #e2e7e4;
    color:#8a928e;
    font-size:11px;
    text-align:center
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px)
}

.header-inner {
    height:76px;
    max-width:1400px;
    margin:auto;
    padding:0 30px;
    display:flex;
    align-items:center
}

.global-nav {
    display:flex;
    align-self:stretch;
    margin-left:70px
}

.global-nav a {
    position:relative;
    display:flex;
    align-items:center;
    padding:0 24px;
    color:#5c6761;
    font-size:13px
}

.global-nav a.is-active {
    color:var(--green);
    font-weight:700
}

.global-nav a.is-active:after {
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:0;
    height:3px;
    background:var(--green)
}

.header-actions {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:18px
}

.logout-link {
    font-size:12px;
    color:#5d6862
}

.dashboard-main {
    max-width:1240px;
    margin:auto;
    padding:48px 30px 70px
}

.welcome-row {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:26px
}

.welcome-row h1 {
    margin:0;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:34px;
    font-weight:500
}

.updated {
    margin:10px 0 0;
    color:#89928d;
    font-size:12px
}

.account-chip {
    min-width:350px;
    padding:15px 18px;
    border-left:3px solid var(--green);
    background:#edf4f0
}

.account-chip span,.account-chip strong {
    display:block
}

.account-chip span {
    font-size:10px;
    color:#78837d
}

.account-chip strong {
    margin-top:5px;
    font-size:13px
}

.summary-grid {
    display:grid;
    grid-template-columns:2.05fr repeat(3,1fr);
    gap:16px
}

.total-card {
    padding:26px 30px
}

.card-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#5f6a64;
    font-size:13px
}

.info-button {
    width:21px;
    height:21px;
    border:1px solid #cfd8d3;
    border-radius:50%;
    background:#fff;
    color:#79837e;
    font:12px Georgia
}

.total-value {
    margin-top:12px;
    font-size:46px;
    letter-spacing:.02em
}

.total-value small {
    margin-left:5px;
    font-size:19px
}

.gain-row {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:9px
}

.gain-row span {
    color:#707a75;
    font-size:12px
}

.gain-row strong,.gain-row em {
    color:var(--green2)
}

.gain-row strong {
    font-size:18px
}

.gain-row em {
    padding:4px 8px;
    background:#e7f4ee;
    font-size:12px;
    font-style:normal;
    font-weight:700
}

.meter {
    height:7px;
    margin-top:22px;
    background:#e8ecea
}

.meter span {
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--green),#42a984)
}

.total-foot {
    display:flex;
    justify-content:space-between;
    margin-top:9px;
    color:#7c8580;
    font-size:10px
}

.stat-card {
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.stat-label {
    color:#6d7772;
    font-size:12px
}

.stat-card strong {
    margin-top:14px;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:22px;
    font-weight:500
}

.stat-card small {
    margin-top:7px;
    color:#949c98;
    font-size:11px
}

.accent-stat {
    border-top:3px solid var(--gold)
}

.content-grid {
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(300px,.8fr);
    gap:16px;
    margin-top:16px
}

.chart-card,.allocation-card,.history-card {
    padding:27px 30px
}

.section-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between
}

.section-heading h2 {
    margin:0;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:22px;
    font-weight:500
}

.chart-controls {
    display:flex;
    border:1px solid #d8e0dc
}

.chart-tab {
    height:34px;
    padding:0 15px;
    border:0;
    background:#fff;
    color:#69736e;
    font-size:11px;
    cursor:pointer
}

.chart-tab.is-active {
    background:var(--green);
    color:#fff
}

.chart-summary {
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:22px
}

.chart-summary strong {
    font-family:Georgia,serif;
    font-size:28px;
    color:var(--green)
}

.chart-summary span {
    font-size:11px;
    color:#79827e
}

.chart-legend {
    display:flex;
    gap:20px;
    margin-top:10px;
    color:#69736e;
    font-size:11px
}

.chart-legend span:before {
    content:"";
    display:inline-block;
    width:18px;
    height:3px;
    margin-right:7px;
    vertical-align:middle
}

.legend-evaluation:before {
    background:var(--green)
}

.legend-principal:before {
    background:#9aa2a8
}

.chart-wrap {
    position:relative;
    height:310px;
    margin-top:8px
}

.chart-wrap canvas {
    width:100%;
    height:100%
}

.chart-tooltip {
    position:absolute;
    z-index:5;
    width:230px;
    padding:12px 14px;
    background:rgba(26,36,31,.94);
    color:#fff;
    pointer-events:none;
    font-size:11px;
    line-height:1.65
}

.chart-tooltip strong,.chart-tooltip span {
    display:block
}

.chart-tooltip strong {
    margin-bottom:4px;
    font-size:12px
}

.chart-tooltip .positive {
    color:#8ee0bd
}

.chart-tooltip .negative {
    color:#ffb0b0
}

.chart-note {
    margin-top:8px;
    color:#87908b;
    font-size:10px
}

.fund-icon {
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    margin:25px auto 18px;
    border-radius:50%;
    background:#e7f2ed;
    color:var(--green);
    font-size:12px;
    font-weight:800
}

.allocation-card h3 {
    margin:0;
    text-align:center;
    font-size:16px;
    line-height:1.6
}

.fund-category {
    margin:5px 0 23px;
    color:#88918d;
    font-size:11px;
    text-align:center
}

.fund-data {
    display:flex;
    justify-content:space-between;
    padding:11px 0;
    border-top:1px solid #edf0ee;
    font-size:12px
}

.fund-data strong {
    font-size:13px
}

.positive {
    color:var(--green2)
}

.donut {
    display:grid;
    place-items:center;
    width:118px;
    height:118px;
    margin:22px auto;
    border-radius:50%;
    background:conic-gradient(var(--green) 0 100%,#e7ece9 0);
    position:relative
}

.donut:after {
    content:"";
    position:absolute;
    inset:13px;
    border-radius:50%;
    background:#fff
}

.donut span {
    position:relative;
    z-index:2;
    font:26px Georgia;
    color:var(--green)
}

.donut small {
    font-size:12px
}

.secondary-button {
    height:45px;
    border:1px solid var(--green);
    background:#fff;
    color:var(--green)
}

.history-card {
    margin-top:16px
}

.text-button {
    border:0;
    background:none;
    color:var(--green);
    font-size:12px;
    cursor:pointer
}

.history-list {
    margin-top:20px
}

.history-row {
    display:grid;
    grid-template-columns:110px 90px 1fr auto;
    align-items:center;
    gap:15px;
    padding:18px 10px;
    border-top:1px solid #e9edeb
}

.history-row time {
    color:#818a85;
    font-size:12px
}

.history-type {
    display:inline-flex;
    justify-content:center;
    padding:5px;
    border:1px solid #d9e2dd;
    color:#607069;
    font-size:10px
}

.history-row div strong,.history-row div small {
    display:block
}

.history-row div strong {
    font-size:13px
}

.history-row div small {
    margin-top:4px;
    color:#8e9692;
    font-size:10px
}

.history-row b {
    font-family:Georgia,serif;
    font-size:16px
}

.history-row.featured {
    background:#fbf8f1;
    border-left:3px solid var(--gold)
}

.history-row.is-extra {
    display:none
}

.demo-disclaimer {
    margin:25px 0 0;
    color:#969d99;
    font-size:10px;
    text-align:center
}

.site-footer {
    border-top:1px solid var(--line);
    background:#fff
}

.footer-inner {
    max-width:1240px;
    margin:auto;
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    color:#8a938e;
    font-size:10px
}

@media(max-width:1000px) {
.login-main {
        grid-template-columns:1fr
}

.login-visual {
        display:none
}

.global-nav {
        display:none
}

.summary-grid {
        grid-template-columns:repeat(3,1fr)
}

.total-card {
        grid-column:1/-1
}

.content-grid {
        grid-template-columns:1fr
}

.history-row {
        grid-template-columns:90px 80px 1fr auto
}

}

@media(max-width:700px) {
.login-header {
        height:64px;
        padding:0 18px
}

.login-panel {
        padding:38px 22px
}

.header-inner {
        height:66px;
        padding:0 16px
}

.header-actions .demo-badge {
        display:none
}

.dashboard-main {
        padding:30px 15px 55px
}

.welcome-row {
        display:block
}

.account-chip {
        min-width:0;
        margin-top:18px
}

.summary-grid {
        grid-template-columns:1fr
}

.total-card {
        padding:23px 20px
}

.total-value {
        font-size:36px
}

.stat-card {
        min-height:115px
}

.content-grid {
        display:block
}

.allocation-card,.history-card {
        margin-top:16px
}

.chart-card,.allocation-card,.history-card {
        padding:23px 18px
}

.chart-card .section-heading {
        display:block
}

.chart-controls {
        width:max-content;
        margin-top:14px
}

.chart-wrap {
        height:250px
}

.history-row {
        grid-template-columns:1fr auto;
        gap:7px 12px;
        padding:16px 4px
}

.history-row div {
        grid-column:1
}

.history-row b {
        grid-column:2;
        grid-row:2
}

.total-foot {
        display:block
}

.total-foot span {
        display:block;
        margin-top:4px
}

.footer-inner {
        padding:18px 15px
}

.demo-login-info {
        display:block
}

.demo-login-info span {
        display:block;
        margin:4px 0
}

}

.account-user {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e5e7eb;
}

.account-user__name {
    font-size:18px;
    font-weight:700;
    color:#1f2937;
}

.account-user__id {
    margin-top:4px;
    font-size:13px;
    color:#6b7280;
    letter-spacing:.08em;
}

.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
}

.brand img {
    display:block;
    height:48px;
    /* 好みで40～60px程度に調整 */
    width:auto;
}

.brand-mark {
    display:none;
}