.tt-app{
    --tt-paper:#FFFBF7;
    --tt-ink:#244440;
    --tt-ink-soft:#7FA39E;
    --tt-line:#E8DCE2;
    --tt-line-soft:#F2E9ED;
    --tt-green:#3AAFA9;
    --tt-green-deep:#2A7F7A;
    --tt-pink:#E8A0B0;
    --tt-pink-deep:#E0798E;
    --tt-amber:#E0A45C;
    --tt-card:#FFFFFF;
    --tt-radius:12px;

    max-width:760px;
    margin:0 auto;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--tt-ink);
}
.tt-app *{box-sizing:border-box;}

.tt-login-gate{
    text-align:center;
    padding:40px 20px;
    background:var(--tt-paper, #FFFBF7);
    border:1px solid var(--tt-line, #E8DCE2);
    border-radius:12px;
}

.tt-tabs{
    display:flex;
    gap:6px;
    margin-bottom:22px;
    border-bottom:1px solid var(--tt-line);
}
.tt-tab{
    flex:1;
    text-align:center;
    padding:11px 6px;
    font-size:14px;
    font-weight:600;
    color:var(--tt-ink-soft);
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
    user-select:none;
}
.tt-tab.tt-active{color:var(--tt-green-deep);border-bottom-color:var(--tt-pink);}
.tt-tab:hover{color:var(--tt-green-deep);}

.tt-panel{display:none;}
.tt-panel.tt-active{display:block;animation:tt-fade .2s ease;}
@keyframes tt-fade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}

.tt-card{
    background:var(--tt-card);
    border:1px solid var(--tt-line);
    border-top:3px solid var(--tt-pink);
    border-radius:var(--tt-radius);
    padding:20px;
    margin-bottom:18px;
}
.tt-card h2{
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--tt-green-deep);
    margin:0 0 16px;
    font-weight:700;
}

.tt-field{margin-bottom:14px;}
.tt-field label{
    display:block;
    font-size:13px;
    color:var(--tt-ink-soft);
    margin-bottom:5px;
    font-weight:600;
}
.tt-field-hint{
    font-size:11.5px;
    color:var(--tt-ink-soft);
    margin:4px 0 0;
}
.tt-row{display:flex;gap:12px;}
.tt-row .tt-field{flex:1;}

.tt-app input, .tt-app select, .tt-app textarea{
    width:100%;
    font-size:15px;
    padding:10px 12px;
    border:1px solid var(--tt-line);
    border-radius:8px;
    background:var(--tt-paper);
    color:var(--tt-ink);
    font-family:inherit;
}
.tt-app input:focus, .tt-app select:focus, .tt-app textarea:focus{
    outline:none;
    border-color:var(--tt-green);
    background:#fff;
}
.tt-app textarea{resize:vertical;min-height:60px;}

.tt-btn{
    font-size:14px;
    font-weight:700;
    padding:11px 20px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    background:var(--tt-green);
    color:#fff;
    transition:background .15s ease;
    text-decoration:none;
    display:inline-block;
}
.tt-btn:hover{background:var(--tt-green-deep); color:#fff;}
.tt-btn-block{width:100%;text-align:center;}

.tt-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.tt-chip{
    font-size:13px;
    padding:8px 14px;
    border-radius:20px;
    border:1px solid var(--tt-line);
    background:var(--tt-paper);
    cursor:pointer;
    color:var(--tt-ink-soft);
    font-weight:600;
}
.tt-chip.tt-selected{background:var(--tt-green);border-color:var(--tt-green);color:#fff;}

.tt-timeline{margin-top:6px;}
.tt-day-group{margin-bottom:22px;}
.tt-day-label{
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--tt-ink-soft);
    font-weight:700;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:1px solid var(--tt-line-soft);
}

.tt-upcoming{ margin-bottom:16px; }
.tt-upcoming:empty{ margin-bottom:0; }
.tt-upcoming-title{
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--tt-ink-soft);
    font-weight:700;
    margin-bottom:8px;
}
.tt-upcoming-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    background:#FFFCF9;
    border:1px solid var(--tt-line);
    border-left:3px solid var(--tt-pink);
    border-radius:10px;
    padding:10px 14px;
    margin-bottom:6px;
    font-size:13.5px;
}
.tt-upcoming-reason{ font-weight:600; color:var(--tt-ink); }
.tt-upcoming-when{ font-size:12px; color:var(--tt-ink-soft); white-space:nowrap; }

.tt-cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}
.tt-cal-title{
    font-size:15px;
    font-weight:700;
    color:var(--tt-ink);
}
.tt-cal-nav{
    background:var(--tt-card);
    border:1px solid var(--tt-line);
    border-radius:8px;
    width:34px;
    height:34px;
    font-size:15px;
    color:var(--tt-green-deep);
    cursor:pointer;
}
.tt-cal-nav:hover{background:var(--tt-line-soft);}
.tt-cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    margin-bottom:8px;
}
.tt-cal-dow{
    text-align:center;
    font-size:11px;
    font-weight:700;
    color:var(--tt-ink-soft);
    padding:4px 0 8px;
    text-transform:uppercase;
}
.tt-cal-cell{
    aspect-ratio:1;
    border-radius:8px;
    border:1px solid var(--tt-line);
    background:var(--tt-card);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    padding:2px;
    min-height:44px;
}
.tt-cal-cell:hover{border-color:var(--tt-green);}
.tt-cal-cell.tt-empty-cell{
    background:transparent;
    border:none;
    cursor:default;
}
.tt-cal-cell.tt-today{border-color:var(--tt-pink-deep);border-width:2px;}
.tt-cal-cell.tt-selected{background:var(--tt-green);border-color:var(--tt-green);}
.tt-cal-cell.tt-selected .tt-cal-daynum{color:#fff;}
.tt-cal-daynum{font-size:13px;font-weight:600;color:var(--tt-ink);}
.tt-cal-dots{display:flex;gap:2px;margin-top:2px;}
.tt-cal-dot{width:5px;height:5px;border-radius:50%;}
.tt-cal-dot.tt-dot-temp{background:var(--tt-amber);}
.tt-cal-dot.tt-dot-pill{background:var(--tt-green);}
.tt-cal-dot.tt-dot-dose{background:var(--tt-pink-deep);}
.tt-cal-dot.tt-dot-hospital{background:#B07AC7;}

.tt-day-detail{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--tt-line-soft);
}
.tt-day-detail-label{
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--tt-ink-soft);
    font-weight:700;
    margin-bottom:10px;
}

.tt-diary-intro{
    font-size:13px;
    color:var(--tt-ink-soft);
    margin:-6px 0 14px;
}
.tt-feed{ margin-top:8px; }
.tt-feed-card{
    background:var(--tt-card);
    border:1px solid var(--tt-line);
    border-radius:var(--tt-radius);
    padding:16px 18px;
    margin-bottom:12px;
    position:relative;
}
.tt-feed-card.tt-diary-card{ border-left:4px solid var(--tt-green); }
.tt-feed-card.tt-msg-card{ border-left:4px solid var(--tt-pink); background:#FFFCF9; }
.tt-feed-body{
    font-size:14.5px;
    color:var(--tt-ink);
    white-space:pre-wrap;
    line-height:1.55;
}
.tt-feed-meta{
    margin-top:10px;
    font-size:12px;
    color:var(--tt-ink-soft);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.tt-feed-del{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--tt-line);
    font-size:15px;
}
.tt-feed-del:hover{ color:var(--tt-pink-deep); }

.tt-reply-toggle{
    background:none;
    border:none;
    cursor:pointer;
    font-size:12px;
    color:var(--tt-ink-soft);
    padding:8px 0 0;
    text-align:left;
}
.tt-reply-toggle:hover{ color:var(--tt-green-deep); }
.tt-reply-count{ font-weight:600; }
.tt-reply-thread{
    margin-top:8px;
    padding:10px 14px;
    background:var(--tt-paper);
    border:1px solid var(--tt-line-soft);
    border-radius:10px;
}

.tt-emoji-row{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin:6px 0 12px;
}
.tt-emoji-btn{
    background:var(--tt-paper);
    border:1px solid var(--tt-line);
    border-radius:8px;
    font-size:16px;
    line-height:1;
    padding:6px 8px;
    cursor:pointer;
}
.tt-emoji-btn:hover{ background:var(--tt-line-soft); }

.tt-reaction-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-top:8px;
}
.tt-reaction-pill{
    background:var(--tt-paper);
    border:1px solid var(--tt-line);
    border-radius:999px;
    font-size:12.5px;
    padding:4px 10px;
    cursor:pointer;
    color:var(--tt-ink);
}
.tt-reaction-pill:hover{ background:var(--tt-line-soft); }
.tt-reaction-pill.tt-reacted{
    background:var(--tt-green);
    border-color:var(--tt-green);
    color:#fff;
    font-weight:600;
}
.tt-reaction-add-toggle{
    background:none;
    border:1px dashed var(--tt-line);
    border-radius:999px;
    font-size:12.5px;
    padding:4px 10px;
    cursor:pointer;
    color:var(--tt-ink-soft);
}
.tt-reaction-add-toggle:hover{ color:var(--tt-green-deep); border-color:var(--tt-green); }
.tt-reaction-picker{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    width:100%;
    margin-top:6px;
    padding:8px;
    background:var(--tt-paper);
    border:1px solid var(--tt-line-soft);
    border-radius:10px;
}

.tt-entry{
    display:flex;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--tt-line-soft);
    align-items:flex-start;
}
.tt-entry:last-child{border-bottom:none;}
.tt-entry-icon{
    width:34px;height:34px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
    flex-shrink:0;
    background:var(--tt-line-soft);
}
.tt-entry-icon.tt-pill{background:#E4F0E9;}
.tt-entry-icon.tt-temp{background:#FBEEDD;}
.tt-entry-icon.tt-dose{background:#F9E1E7;}
.tt-entry-icon.tt-hospital{background:#F2E4F5;}
.tt-entry-body{flex:1;min-width:0;}
.tt-entry-title{font-size:14px;font-weight:700;color:var(--tt-ink);}
.tt-entry-meta{font-size:12.5px;color:var(--tt-ink-soft);margin-top:2px;}
.tt-entry-note{font-size:14px;color:var(--tt-ink-soft);margin-top:4px;font-style:italic;}
.tt-entry-by{font-size:11.5px;color:var(--tt-ink-soft);margin-top:4px;}
.tt-entry-time{font-size:12px;color:var(--tt-ink-soft);white-space:nowrap;flex-shrink:0;}
.tt-entry-edit{background:none;border:none;cursor:pointer;color:var(--tt-line);font-size:15px;padding:0 0 0 6px;flex-shrink:0;}
.tt-entry-edit:hover{color:var(--tt-green-deep);}

.tt-entry-block{ margin-bottom:2px; }
.tt-notes-toggle{
    background:none;
    border:none;
    cursor:pointer;
    font-size:12px;
    color:var(--tt-ink-soft);
    padding:2px 0 10px 46px;
    text-align:left;
    width:100%;
}
.tt-notes-toggle:hover{ color:var(--tt-green-deep); }
.tt-notes-count{ font-weight:600; }
.tt-notes-thread{
    margin:0 0 14px 46px;
    padding:10px 14px;
    background:var(--tt-paper);
    border:1px solid var(--tt-line-soft);
    border-radius:10px;
}
.tt-note-item{
    padding:8px 0;
    border-bottom:1px solid var(--tt-line-soft);
}
.tt-note-item:last-child{ border-bottom:none; }
.tt-note-body{ font-size:13.5px; color:var(--tt-ink); white-space:pre-wrap; }
.tt-note-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4px;
    font-size:11.5px;
    color:var(--tt-ink-soft);
}
.tt-note-del{ background:none; border:none; cursor:pointer; color:var(--tt-line); font-size:13px; }
.tt-note-del:hover{ color:var(--tt-pink-deep); }
.tt-note-add{ margin-top:10px; }
.tt-note-add textarea{ min-height:44px; font-size:13.5px; }
.tt-note-add-row{
    display:flex;
    gap:8px;
    margin-top:6px;
    align-items:center;
}
.tt-note-add-row input[type=datetime-local]{ flex:1; font-size:12.5px; padding:6px 8px; }
.tt-note-add-row .tt-btn{ padding:8px 14px; font-size:12.5px; white-space:nowrap; }
.tt-entry-del{background:none;border:none;cursor:pointer;color:var(--tt-line);font-size:16px;padding:0 0 0 6px;flex-shrink:0;}
.tt-entry-del:hover{color:var(--tt-pink-deep);}

.tt-empty{text-align:center;padding:40px 20px;color:var(--tt-ink-soft);font-size:13.5px;}
.tt-readonly-note{text-align:center;padding:24px;color:var(--tt-ink-soft);font-size:13.5px;}

.tt-temp-flag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:8px;}
.tt-temp-flag.tt-high{background:#F9E1E7;color:var(--tt-pink-deep);}
.tt-temp-flag.tt-normal{background:#E4F0E9;color:var(--tt-green-deep);}

.tt-status-msg{font-size:12.5px;color:var(--tt-green-deep);text-align:center;padding-top:10px;min-height:18px;}

@media (max-width:480px){
    .tt-row{flex-direction:column;gap:0;}
    .tt-tab{font-size:13px;padding:10px 4px;}
}

.tt-game-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.tt-game-score{
    font-size:15px;
    font-weight:700;
    color:var(--tt-green-deep);
}
#tt-gameCanvas{
    border:2px solid var(--tt-line);
    border-radius:10px;
    background:var(--tt-paper);
    max-width:100%;
}
.tt-game-status{
    font-size:13px;
    color:var(--tt-pink-deep);
    font-weight:600;
    min-height:18px;
}
.tt-game-controls{
    display:grid;
    grid-template-columns:repeat(3, 50px);
    grid-template-rows:repeat(2, 50px);
    gap:6px;
    margin-top:4px;
}
.tt-game-btn{
    font-size:20px;
    background:var(--tt-card);
    border:1px solid var(--tt-line);
    border-radius:10px;
    cursor:pointer;
    color:var(--tt-green-deep);
}
.tt-game-btn:hover{ background:var(--tt-line-soft); }

.tt-leaderboard-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 4px;
    border-bottom:1px solid var(--tt-line-soft);
    font-size:14px;
}
.tt-leaderboard-row:last-child{ border-bottom:none; }
.tt-leaderboard-rank{ width:22px; color:var(--tt-ink-soft); font-weight:700; }
.tt-leaderboard-name{ flex:1; color:var(--tt-ink); font-weight:600; }
.tt-leaderboard-score{ color:var(--tt-green-deep); font-weight:700; }

/* Game switcher */
.tt-game-switch{
    display:flex;
    gap:8px;
    margin-bottom:14px;
}
.tt-game-switch-btn{
    flex:1;
    background:var(--tt-card);
    border:1px solid var(--tt-line);
    border-radius:10px;
    padding:10px;
    font-size:14px;
    font-weight:600;
    color:var(--tt-ink-soft);
    cursor:pointer;
}
.tt-game-switch-btn.tt-active{
    background:var(--tt-green);
    border-color:var(--tt-green);
    color:#fff;
}
.tt-game-view{ display:none; }
.tt-game-view.tt-active{ display:block; }

/* Solitaire */
.tt-solitaire-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-size:13px;
    color:var(--tt-ink-soft);
}
.tt-solitaire-toolbar .tt-btn{ padding:8px 16px; font-size:13px; }
.tt-solitaire-board{
    overflow-x:auto;
    padding-bottom:8px;
}
.tt-sol-toprow{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    min-width:460px;
}
.tt-sol-spacer{ flex:1; min-width:20px; }
.tt-sol-pile{
    width:58px;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.tt-sol-tableau{
    display:flex;
    gap:10px;
    min-width:460px;
}
.tt-sol-col{
    position:relative;
    width:58px;
    min-height:230px;
    flex-shrink:0;
}
.tt-sol-cardpos{
    position:absolute;
    left:0;
    right:0;
    cursor:pointer;
    transition:top 0.12s ease;
}
.tt-sol-col-empty{ position:relative; cursor:pointer; }

.tt-card-visual{
    position:relative;
    width:56px;
    height:80px;
    border-radius:8px;
    border:1px solid #E5DDD3;
    background:#FFFEFC;
    box-shadow:0 2px 4px rgba(76,58,42,0.12);
    user-select:none;
}
.tt-card-corner{
    position:absolute;
    font-size:11px;
    font-weight:800;
    line-height:1.05;
    text-align:center;
}
.tt-card-corner-tl{ top:4px; left:5px; }
.tt-card-corner-br{ bottom:4px; right:5px; transform:rotate(180deg); }
.tt-card-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:24px;
    opacity:0.85;
}
.tt-card-red{ color:#C6455A; }
.tt-card-black{ color:#33302B; }
.tt-card-back{
    background:
        repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(255,255,255,0.12) 5px, rgba(255,255,255,0.12) 10px),
        linear-gradient(160deg, var(--tt-green) 0%, var(--tt-green-deep) 100%);
    border-color:var(--tt-green-deep);
}
.tt-card-selected{
    box-shadow:0 0 0 3px var(--tt-pink-deep), 0 4px 8px rgba(76,58,42,0.18);
    transform:translateY(-4px);
}
.tt-pile-empty{
    border:2px dashed #D8CFC2;
    border-radius:8px;
    color:var(--tt-ink-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    background:rgba(255,255,255,0.4);
    box-shadow:none;
}
.tt-solitaire-status{
    margin-top:14px;
    font-size:14px;
    font-weight:700;
    color:var(--tt-pink-deep);
    text-align:center;
}

.tt-tetris-controls{
    display:grid;
    grid-template-columns:repeat(4, 50px);
    gap:6px;
    margin-top:4px;
}
#tt-tetrisCanvas{
    border:2px solid var(--tt-line);
    border-radius:10px;
    background:var(--tt-paper);
    max-width:100%;
}

/* Mahjong */
.tt-mahjong-board{
    overflow-x:auto;
    padding-bottom:8px;
}
.tt-mj-inner{
    position:relative;
    width:340px;
    height:340px;
}
.tt-mj-tile{
    position:absolute;
    width:38px;
    height:38px;
    border-radius:6px;
    background:#FFFEFC;
    border:1px solid #E5DDD3;
    box-shadow:0 2px 4px rgba(76,58,42,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    cursor:pointer;
    transition:transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease, box-shadow 0.15s ease;
}
.tt-mj-tile:hover{ transform:translateY(-1px); }
.tt-mj-locked{
    filter:brightness(0.75) saturate(0.6);
    cursor:default;
}
.tt-mj-locked:hover{ transform:none; }
.tt-mj-selected{
    box-shadow:0 0 0 3px var(--tt-pink-deep), 0 4px 8px rgba(76,58,42,0.2);
    transform:translateY(-2px);
}
.tt-mj-removing{
    opacity:0;
    transform:scale(0.5);
    pointer-events:none;
}