/* 1.1 — GENERAL APPEARANCE */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 26px 18px;
            background: #0e1d29;
            color: #dcecf1;
            font-family: "Segoe UI", Tahoma, sans-serif;
            font-size: 15px;
        }

        header {
            text-align: center;
            margin-bottom: 26px;
        }

        h1 {
            color: #62c9ca;
            font-size: 30px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        h2 {
            color: #62c9ca;
            font-size: 20px;
            margin: 0 0 14px;
        }

        h3 {
            color: #9acfd8;
            font-size: 15px;
            margin: 20px 0 10px;
        }

        p {
            line-height: 1.5;
        }

        a {
            color: #8bcde6;
        }

        .subtitle,
        .muted,
        .small {
            color: #9bb4bf;
        }

        .small {
            font-size: 12px;
        }


        /* 1.2 — DASHBOARD LAYOUT */

        .layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 1220px;
            margin: auto;
        }

        .panel {
            padding: 22px;
            background: #172b39;
            border: 1px solid #365565;
            border-radius: 9px;
        }

        .full {
            grid-column: 1 / -1;
        }


        /* 1.3 — INPUTS AND BUTTONS */

        button {
            padding: 9px 13px;
            background: #216d82;
            border: 1px solid #4da6b7;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background: #2c8299;
        }

        .secondary {
            background: #263d4b;
            border-color: #4a6876;
        }

        .danger {
            padding: 5px 9px;
            background: transparent;
            border-color: #855b68;
            color: #f39aab;
        }

        input,
        textarea,
        select {
            width: 100%;
            padding: 10px;
            background: #102431;
            color: #e4f1f5;
            border: 1px solid #456575;
            border-radius: 5px;
            font: inherit;
        }

        textarea {
            min-height: 120px;
            resize: vertical;
        }

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

        .flex input {
            flex: 1;
        }


        /* 1.4 — DAILY CHECKLIST */

        .notice {
            padding: 9px 12px;
            margin-bottom: 18px;
            background: #1c3b48;
            border-left: 3px solid #62c9ca;
            font-size: 13px;
        }

        .group {
            margin-top: 18px;
            border-top: 1px solid #34515e;
        }

        .checkrow {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 11px 0;
            line-height: 1.45;
        }

        .checkrow input {
            width: 17px;
            height: 17px;
            margin-top: 3px;
            accent-color: #62c9ca;
        }

        .checkrow label {
            flex: 1;
        }


        /* 1.5 — TASK LIST */

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 11px 0;
            border-bottom: 1px solid #314e5b;
            overflow-wrap: anywhere;
        }

        .item span {
            flex: 1;
        }

        .item input {
            width: auto;
            accent-color: #62c9ca;
        }

        #tasklist {
            margin-top: 14px;
        }


        /* 1.6 — RULEBOOK LINKS */

        .rulelinks {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .rulelinks a {
            display: block;
            padding: 15px;
            background: #203a48;
            border: 1px solid #4a6876;
            border-radius: 6px;
            color: #a2dbe1;
            text-decoration: none;
        }

        .rulelinks a:hover {
            border-color: #62c9ca;
            background: #294b59;
        }


        /* 1.7 — TRADING LEDGER */

        .formgrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .field label {
            display: block;
            margin-bottom: 5px;
            color: #9bb5c1;
            font-size: 12px;
        }

        .tablewrap {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            white-space: nowrap;
        }

        th,
        td {
            padding: 10px 8px;
            text-align: left;
            border-bottom: 1px solid #34515e;
        }

        th {
            color: #92d4df;
        }



        /* Mac-inspired execution date/time picker with scrollable time wheels. */
        .datetime-picker { position: relative; }
        #when { cursor: pointer; }
        .datetime-popup {
            position: absolute; top: calc(100% + 7px); left: 0;
            z-index: 100; width: min(340px, 90vw);
            padding: 15px; border: 1px solid #4a6876;
            border-radius: 13px; background: #213a48;
            box-shadow: 0 14px 40px rgba(0, 0, 0, .65);
            color: #e4f1f5;
        }
        .datetime-popup[hidden] { display: none; }
        .datetime-header, .datetime-actions, .datetime-time {
            display: flex; align-items: center; justify-content: space-between;
            gap: 9px;
        }
        .datetime-header { margin-bottom: 12px; font-weight: 600; }
        .datetime-header button { padding: 4px 12px; font-size: 22px; }
        .datetime-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
        .datetime-days .weekday { text-align: center; color: #9bb5c1; font-size: 11px; padding: 7px 0; }
        .datetime-days button {
            padding: 8px 0; background: transparent; border: none;
            border-radius: 7px; color: #e4f1f5; font-size: 13px;
        }
        .datetime-days button:hover { background: #355b69; }
        .datetime-days button.selected { background: #62c9ca; color: #111; font-weight: 700; }
        .datetime-days button.today { outline: 1px solid #62c9ca; }
        .datetime-time-label { margin: 14px 0 7px; font-size: 12px; color: #9bb5c1; }
        .datetime-time { justify-content: center; gap: 10px; }
        .datetime-time select {
            width: 78px; max-height: 100px; text-align: center;
            border-radius: 8px; background: #314e5b; font-size: 17px;
        }
        .datetime-actions { justify-content: flex-end; margin-top: 14px; }

        /* 1.8 — NOTEBOOK */

        #notelist {
            margin-top: 18px;
        }

        .note {
            padding: 12px 0;
            border-bottom: 1px solid #34515e;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .noteheader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            color: #9bb5c1;
            font-size: 12px;
        }


        /* 1.9 — SERVER STATUS */

        #savestatus {
            color: #92d4df;
        }

        #retry {
            margin-left: 10px;
        }

        #retry[hidden] {
            display: none;
        }

        footer {
            margin: 25px auto;
            text-align: center;
            color: #9bb4bf;
            font-size: 12px;
            line-height: 1.7;
        }


        /* 1.10 — MOBILE LAYOUT */

        @media (max-width: 850px) {

            .layout {
                grid-template-columns: 1fr;
            }

            .full {
                grid-column: 1;
            }

            .formgrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

        }

        @media (max-width: 650px) {

            .rulelinks {
                grid-template-columns: 1fr;
            }

        }

        @media (max-width: 450px) {

            .formgrid {
                grid-template-columns: 1fr;
            }

            .flex {
                flex-wrap: wrap;
            }

        }


/* Account value snapshot summary: full-width bar above the two dashboard columns. */
.profit-summary { padding: 17px 22px; }
.profit-summary-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: 12px; }
.profit-summary-heading h2 { margin: 0; }
.profit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.profit-metric { background: #102431; border: 1px solid #365565; border-radius: 6px; padding: 13px; }
.profit-metric span { display: block; color: #9bb5c1; font-size: 12px; margin-bottom: 7px; }
.profit-metric strong { display: block; font-size: clamp(16px, 2.3vw, 23px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profit-metric strong.positive { color: #83d8b5; }
.profit-metric strong.negative { color: #f39aab; }
@media (max-width: 650px) { .profit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================
   CALMING OCEAN THEME — DEPTH, SOFTNESS AND FOCUS
   ===================================================== */

body {
    background: radial-gradient(ellipse at 50% -20%, #1b4050 0%, #0e1d29 58%);
    min-height: 100vh;
}

header { padding: 12px 0 6px; }
h1 { color: #7ad8d8; text-shadow: 0 0 24px rgba(98, 201, 202, 0.10); }
h2 { color: #85d6dc; }
h3 { color: #b1dce5; }
a { color: #a1dbe9; }

.panel {
    background: rgba(23, 43, 57, 0.96);
    border-color: #355663;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(2, 15, 24, 0.14);
}

button {
    background: #256f82;
    border-color: #448fa1;
    border-radius: 7px;
    transition: background-color 140ms ease, border-color 140ms ease;
}
button:hover { background: #32869b; border-color: #6bc5cc; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid #88dadd;
    outline-offset: 2px;
}
.secondary { background: #294555; border-color: #527282; }
.secondary:hover { background: #365969; }
.danger { background: transparent; color: #f3a1b0; border-color: #865d69; }
.danger:hover { background: #563947; }

input, textarea, select { background: #102632; border-color: #41616f; color: #e6f1f4; }
input::placeholder, textarea::placeholder { color: #8ca8b6; }
.notice { background: #1d3b48; border-left-color: #79cdd2; color: #c5e0e7; border-radius: 0 6px 6px 0; }
.rulelinks a { background: #1b3946; border-color: #416676; color: #a4dfe6; }
.rulelinks a:hover { background: #28505c; border-color: #7dd4d9; }
th { color: #9ddbe5; }
.datetime-popup { background: #203b49; border-color: #527582; color: #e5f0f4; }
.datetime-days button.selected { background: #80d6d7; color: #102632; }
.datetime-days button.today { outline-color: #80d6d7; }
.datetime-time select { background: #284a58; }
.profit-summary { border-color: #4b7b87; background: #1a3542; }
.profit-metric { background: #112b38; border-color: #416471; border-radius: 9px; }
.profit-metric strong.positive { color: #83d8b5; }
.profit-metric strong.negative { color: #f39aab; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Single cumulative realized-profit tracker */
.profit-grid { grid-template-columns: minmax(0, 1fr); }
.profit-metric { max-width: 420px; }


/* Market Intelligence — right-hand dashboard panel only */
.market-panel { min-width:0; }
.market-heading { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.market-heading h2 { margin-bottom:3px; }
.market-tag { background:#284958; border:1px solid #456a77; padding:4px 8px; border-radius:16px; color:#b7dce2; font-size:11px; }
.market-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.market-metrics>div { padding:10px; border:1px solid #355663; background:#102632; border-radius:8px; min-width:0; }
.market-metrics span { display:block; font-size:12px; color:#9bb5c1; margin-bottom:6px; }
.market-metrics strong { display:block; font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.market-metrics .mi-negative { color:#f39aab; }
.market-metrics .mi-positive { color:#83d8b5; }
.market-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 18px; }
.market-tabs button { background:transparent; border-color:transparent; color:#b2c8d1; font-size:13px; }
.market-tabs button.active { background:#294b59; color:#e7f5f6; border-color:#47717b; }
.market-panel h3 { margin:14px 0 6px; }
.market-chart { width:100%; min-height:180px; margin:12px 0; overflow:hidden; }
.market-chart svg { width:100%; height:auto; display:block; }
.market-observation-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.market-observation-form label { color:#aac8d2; font-size:12px; min-width:0; }
.market-observation-form input { margin-top:5px; font-size:13px; min-width:0; }
.market-observation-form label:nth-child(3),.market-observation-form button { grid-column:1/-1; }
.market-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.market-actions button { font-size:12px; }
.market-observations { max-height:200px; overflow:auto; }
.market-entry { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid #34515e; font-size:12px; }
.market-entry small { display:block; color:#9bb5c1; margin-top:3px; overflow-wrap:anywhere; }
.market-entry button { padding:4px 7px; flex-shrink:0; }
.market-panel [hidden] { display:none !important; }
@media(max-width:450px) { .market-observation-form { grid-template-columns:1fr; } .market-observation-form label { grid-column:1/-1; } }

/* Authorized cryptocurrency trading list — uses existing Deep Ocean panel styling. */
.authorized-crypto-list { margin: 12px 0 0; line-height: 1.9; overflow-wrap: anywhere; color: #a2dbe1; font-size: 0.95rem; }