:root {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --brand-main: #0f766e;
            /* main hospital color (teal) */
            --brand-main-dark: #115e59;
            --brand-accent: #0ea5e9;
            /* accent (cyan) */
            --bg-page: #f1f5f9;
            --bg-card: #ffffff;
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: radial-gradient(circle at top, #e0f2fe 0, #f9fafb 45%, #e5e7eb 100%);
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .app {
            width: 100%;
            max-width: 960px;
            margin: 14px 10px 20px;
            background: var(--bg-card);
            border-radius: 18px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
            padding: 16px 14px 20px;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .app {
                margin-top: 24px;
                padding: 22px 26px 26px;
            }
        }

        .app-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .title-block h1 {
            margin: 0;
            font-size: 1.4rem;
            letter-spacing: 0.03em;
            color: var(--brand-main-dark);
        }

        .title-block p {
            margin: 4px 0 0;
            font-size: 0.86rem;
            color: #6b7280;
        }

        .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            padding: 5px 10px;
            border-radius: 999px;
            background: #ecfeff;
            color: var(--brand-main-dark);
            border: 1px solid #bae6fd;
            white-space: nowrap;
        }

        .status-indicator {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #9ca3af;
        }

        .status-indicator.recording {
            background: #ef4444;
            box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.25);
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .patient-row {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
            gap: 8px;
            margin-bottom: 12px;
            align-items: center;
        }

        @media (max-width: 700px) {
            .patient-row {
                grid-template-columns: 1fr;
            }
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .field label {
            font-size: 0.78rem;
            font-weight: 600;
            color: #4b5563;
        }

        .field input,
        .field select {
            border-radius: 999px;
            border: 1px solid #e5e7eb;
            padding: 7px 12px;
            font-size: 0.9rem;
            font-family: inherit;
            outline: none;
            min-width: 0;
        }

        .field input:focus,
        .field select:focus {
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.5);
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        button {
            border: none;
            border-radius: 999px;
            padding: 8px 13px;
            font-size: 0.9rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #e5e7eb;
            color: #111827;
            transition: transform 0.05s ease, box-shadow 0.1s ease, background 0.15s ease;
            white-space: nowrap;
        }

        button span.icon {
            font-size: 1.1rem;
        }

        button.primary {
            background: var(--brand-main);
            color: white;
            box-shadow: 0 8px 16px rgba(15, 118, 110, 0.25);
        }

        button.primary:hover {
            background: var(--brand-main-dark);
        }

        button.danger {
            background: #fee2e2;
            color: #b91c1c;
        }

        button.success {
            background: #dcfce7;
            color: #166534;
        }

        button:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 12px rgba(15, 23, 42, 0.15);
        }

        button:active {
            transform: translateY(0);
            box-shadow: 0 3px 7px rgba(15, 23, 42, 0.15);
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

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

        @media (max-width: 800px) {
            .layout {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: #f9fafb;
            border-radius: 14px;
            padding: 10px 10px 9px;
            border: 1px solid #e5e7eb;
            box-sizing: border-box;
            min-height: 110px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .card-title {
            font-size: 0.84rem;
            font-weight: 700;
            color: #374151;
            text-transform: uppercase;
            letter-spacing: 0.09em;
        }

        .card-subtitle {
            font-size: 0.75rem;
            color: #94a3b8;
        }

        #liveText {
            font-size: 0.9rem;
            color: #111827;
            min-height: 44px;
            padding: 7px 9px;
            border-radius: 10px;
            background: white;
            border: 1px dashed #e5e7eb;
            white-space: pre-wrap;
        }

        #liveText.placeholder {
            color: #9ca3af;
            font-style: italic;
        }

        #pointsList {
            margin: 4px 0 0;
            padding-left: 18px;
            max-height: 220px;
            overflow-y: auto;
            font-size: 0.9rem;
        }

        /* layout of each bullet point row */
        #pointsList li.point-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
        }

        #pointsList li::marker {
            color: var(--brand-main);
        }

        .point-text {
            flex: 1;
        }

        .point-actions {
            display: inline-flex;
            gap: 4px;
        }

        .icon-btn {
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 999px;
            font-size: 0.9rem;
        }

        .icon-btn.edit:hover {
            background: #e0f2fe;
        }

        .icon-btn.delete:hover {
            background: #fee2e2;
        }

        textarea#finalText {
            width: 100%;
            min-height: 160px;
            resize: vertical;
            border-radius: 10px;
            padding: 8px 10px;
            border: 1px solid #e5e7eb;
            font-size: 0.9rem;
            box-sizing: border-box;
            font-family: inherit;
        }

        textarea#finalText:focus {
            border-color: var(--brand-main);
            box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.4);
            outline: none;
        }

        .footer-note {
            margin-top: 10px;
            font-size: 0.76rem;
            color: #6b7280;
            display: flex;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .tag {
            font-size: 0.76rem;
            padding: 3px 8px;
            border-radius: 999px;
            background: #fef3c7;
            color: #92400e;
        }