* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #0f0f0f; color: #fff; min-height: 100vh; }

    #login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
    .login-box { background: #1a1a1a; border-radius: 20px; padding: 32px; width: 100%; max-width: 360px; }
    .logo { text-align: center; margin-bottom: 28px; }
    .logo h1 { font-size: 26px; color: #4CAF50; }
    .logo p { color: #888; font-size: 13px; margin-top: 4px; }

    input, select { width: 100%; padding: 14px 16px; background: #2a2a2a; border: 1px solid #333; border-radius: 12px; color: #fff; font-size: 16px; margin-bottom: 10px; outline: none; }
    input:focus, select:focus { border-color: #4CAF50; }
    .btn { width: 100%; padding: 14px; border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 6px; }
    .btn-green { background: #4CAF50; }
    .btn-green:hover { background: #45a049; }
    .btn-blue { background: #2196F3; }
    .btn-blue:hover { background: #1976D2; }
    .msg { font-size: 13px; margin-top: 8px; text-align: center; min-height: 20px; }
    .msg.error { color: #ff5555; }
    .msg.success { color: #4CAF50; }
    .link-btn { width: 100%; background: none; border: none; color: #888; font-size: 12px; margin-top: 12px; cursor: pointer; text-decoration: underline; }

    .pin-dots { display: flex; justify-content: center; gap: 14px; margin: 16px 0; }
    .pin-dot { width: 18px; height: 18px; border-radius: 50%; background: #333; border: 2px solid #555; transition: all 0.1s; }
    .pin-dot.filled { background: #4CAF50; border-color: #4CAF50; }
    .pin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
    .pin-key { padding: 18px; background: #2a2a2a; border: none; border-radius: 12px; color: #fff; font-size: 22px; cursor: pointer; }
    .pin-key:active { background: #3a3a3a; }

    .screen { display: none; padding-bottom: 80px; }
    .screen.active { display: block; }
    .header { background: #1a1a1a; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #222; }
    .header h2 { font-size: 17px; }
    .back-btn { background: none; border: none; color: #4CAF50; font-size: 15px; cursor: pointer; }
    .logout-btn { background: none; border: 1px solid #333; color: #888; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; }

    .greeting { padding: 20px 20px 8px; }
    .greeting h3 { font-size: 22px; }
    .greeting p { color: #888; font-size: 13px; margin-top: 3px; }
    .cards { padding: 12px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .card { background: #1a1a1a; border-radius: 16px; padding: 18px; cursor: pointer; transition: transform 0.1s; }
    .card:hover { transform: scale(1.02); }
    .card.span2 { grid-column: span 2; }
    .card-icon { font-size: 30px; margin-bottom: 8px; }
    .card-title { font-size: 14px; font-weight: 600; }
    .card-sub { font-size: 11px; color: #888; margin-top: 3px; }
    .card.green { border-left: 3px solid #4CAF50; }
    .card.blue { border-left: 3px solid #2196F3; }
    .card.orange { border-left: 3px solid #FF9800; }
    .card.purple { border-left: 3px solid #9C27B0; }
    .card.red { border-left: 3px solid #e74c3c; }
    .card.teal { border-left: 3px solid #1abc9c; }

    .section { padding: 14px 20px; }
    .section-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #ccc; }
    .date-label { font-size: 12px; color: #888; margin-bottom: 14px; }
    .add-box { background: #1a1a1a; border-radius: 16px; padding: 14px; margin-bottom: 14px; }
    .row { display: flex; gap: 8px; }
    .row input, .row select { flex: 1; margin-bottom: 0; }
    .btn-small { padding: 10px 14px; background: #4CAF50; border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
    .btn-full { width: 100%; padding: 12px; background: #4CAF50; border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px; }
    .btn-add { width: 100%; padding: 8px; background: #2a2a2a; border: 1px dashed #444; border-radius: 10px; color: #888; font-size: 12px; cursor: pointer; margin-top: 6px; }

    .kbju { background: #1a1a1a; border-radius: 16px; padding: 14px; margin-bottom: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; text-align: center; }
    .kbju-val { font-size: 17px; font-weight: 700; color: #4CAF50; }
    .kbju-lbl { font-size: 10px; color: #888; margin-top: 2px; }

    .item-card { background: #1a1a1a; border-radius: 14px; padding: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
    .item-name { font-size: 14px; font-weight: 600; color: #2196F3; margin-bottom: 3px; }
    .item-sub { font-size: 11px; color: #888; }
    .item-val { font-size: 17px; font-weight: 700; }
    .item-val span { font-size: 10px; color: #888; font-weight: 400; }
    .del-btn { background: none; border: none; color: #555; font-size: 17px; cursor: pointer; padding: 4px; margin-left: 6px; }
    .del-btn:hover { color: #c0392b; }

    .supp-card { background: #1a1a1a; border-radius: 14px; padding: 14px; margin-bottom: 10px; }
    .supp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .supp-name { font-size: 15px; font-weight: 600; color: #FF9800; }
    .supp-prog { font-size: 11px; color: #888; }
    .supp-prog span { color: #FF9800; font-weight: 600; }
    .dose-row { display: flex; justify-content: space-between; align-items: center; background: #2a2a2a; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
    .dose-info { font-size: 12px; color: #ccc; }
    .dose-time { font-size: 10px; color: #888; }
    .check-btn { background: #333; border: 1px solid #444; border-radius: 8px; color: #888; padding: 5px 12px; font-size: 12px; cursor: pointer; }
    .check-btn.done { background: #1e4d1e; border-color: #4CAF50; color: #4CAF50; }

    .profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 14px; border: 3px solid #4CAF50; }
    .stat-card { background: #1a1a1a; border-radius: 14px; padding: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
    .stat-lbl { font-size: 12px; color: #888; }
    .stat-val { font-size: 17px; font-weight: 700; color: #4CAF50; }
    .age-box { background: #1a1a1a; border-radius: 14px; padding: 14px; margin-bottom: 10px; text-align: center; }
    .age-num { font-size: 36px; font-weight: 700; color: #4CAF50; }
    .age-lbl { font-size: 11px; color: #888; }
    .dob-row { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; margin-bottom: 10px; }
    .dob-row input { margin-bottom: 0; }
    .divider { border-top: 1px solid #2a2a2a; margin: 16px 0; }

    .empty { text-align: center; padding: 36px 20px; color: #555; }
    .empty-icon { font-size: 44px; margin-bottom: 10px; }

    .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; display: flex; border-top: 1px solid #2a2a2a; }
    .nav-item { flex: 1; padding: 10px 0; text-align: center; cursor: pointer; color: #666; font-size: 10px; }
    .nav-item.active { color: #4CAF50; }
    .nav-icon { font-size: 20px; display: block; margin-bottom: 2px; }

    .user-card { background: #1a1a1a; border-radius: 14px; padding: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .user-name { font-size: 14px; font-weight: 600; }
    .user-email-txt { font-size: 11px; color: #888; margin-top: 2px; }
    .role-select { background: #2a2a2a; border: 1px solid #333; border-radius: 8px; color: #fff; padding: 6px 10px; font-size: 12px; cursor: pointer; }