/* style.css for index.php & live_room.php - Final & Stable Version */

* { 
    box-sizing: border-box; 
} 

html, body { 
    width: 100%; 
    overflow-x: hidden; 
} 

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    background-color: #f4f7f9; 
    margin: 0; 
    padding: 2rem; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 

.main-content { width: 100%; max-width: 1200px; } 
.app-header { text-align: center; margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; justify-content: center; } 
.header-info { font-size: 1rem; color: #6c757d; background-color: #e9ecef; padding: 5px 12px; border-radius: 15px; } 
.io-btn { background-color: #ffffff; color: #495057; border: 1px solid #ced4da; border-radius: 6px; padding: 8px 14px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s; } 
.io-btn:hover { background-color: #f1f3f5; } 
.io-btn:active { transform: scale(0.97); } 
.sync-btn { background: linear-gradient(135deg, #5d862b 0%, #669d4d 100%); color: white; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } 
.sync-btn:hover { background: linear-gradient(135deg, #557b27 0%, #5a8e44 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } 
.sync-btn.syncing { background: linear-gradient(135deg, #36c9dd 0%, #4fb576 100%); animation: syncPulse 1.5s infinite; } 
@keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } 
.intro-section { background-color: #fff; padding: 1.5rem 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top: 2rem; border: 1px solid #e9ecef; overflow-wrap: break-word; } 
.intro-section h2 { margin-top: 0; font-size: 1.2rem; color: #343a40; } 
.intro-section p { margin: 0.5rem 0 0 0; color: #495057; line-height: 1.6; } 
.intro-section strong { color: #007bff; } 
.app-container { display: flex; gap: 2rem; width: 100%; } 
.pipeline { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); width: 32%; flex-grow: 1; padding: 1.5rem; display: flex; flex-direction: column; } 
.pipeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef; } 
.pipeline-title-group { flex-grow: 1; } 
.pipeline-title { font-size: 1.5rem; font-weight: 600; color: #343a40; } 
.add-task-btn { background-color: #f1f3f5; color: #495057; border: none; border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s, transform 0.1s; } 
.add-task-btn:hover { background-color: #e9ecef; } 
.add-task-btn:active { transform: scale(0.97); } 
.add-task-btn:disabled { background-color: #f8f9fa; color: #ced4da; cursor: not-allowed; } 
.block-list { min-height: 300px; flex-grow: 1; } 
.block { background-color: #f8f9fa; border: 1px solid #dee2e6; border-left: 4px solid transparent; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; cursor: grab; user-select: none; transition: all 0.2s ease; font-weight: 500; word-wrap: break-word; position: relative; } 
.block:focus, .block.is-editing .block-text-content { outline: 2px solid #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); background-color: #fff; cursor: text; }
.block.sortable-ghost { opacity: 0.5; background: #d0eaff; border-style: dashed; }
.block.sortable-chosen { cursor: grabbing; }
.block.is-timing { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); } 
.block.block-priority-high { background-color: #ffebee; border-left-color: #f44336; } 
.block.block-priority-medium { background-color: #fff3e0; border-left-color: #ffcc02; } 
.block.block-priority-low { background-color: #e8f5e9; border-left-color: #4CAF50; } 
.task-time-display { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #e9ecef; font-size: 0.85rem; font-weight: 600; color: #343a40; text-align: right; } 
#context-menu { display: none; position: absolute; z-index: 1000; background-color: #ffffff; border: 1px solid #ced4da; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 0.5rem 0; min-width: 180px; } 
#context-menu ul { list-style: none; margin: 0; padding: 0; } 
#context-menu li { padding: 0.75rem 1.25rem; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.75rem; } 
#context-menu li:hover { background-color: #f1f3f5; } 
#context-menu .delete-item { color: #dc3545; } 
#context-menu .delete-item:hover { background-color: #f8d7da; } 
#context-menu .menu-section { border-top: 1px solid #e9ecef; margin: 0.25rem 0; } 
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10000; display: none; backdrop-filter: blur(5px); } 
.timer-mode-selector { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 2rem; z-index: 10001; display: none; width: 90%; max-width: 450px; border: 1px solid rgba(255, 255, 255, 0.8); } 
.timer-mode-selector h3 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; color: #343a40; font-size: 1.4rem; } 
.timer-modes { display: flex; flex-direction: column; gap: 1rem; } 
.timer-mode-option { border: 2px solid #e9ecef; border-radius: 12px; padding: 1.5rem; transition: all 0.3s; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); } 
.timer-mode-option:not([data-mode="custom"]) { cursor: pointer; } 
.timer-mode-option:not([data-mode="custom"]):hover { border-color: #007bff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 123, 255, 0.1); } 
.timer-mode-option[data-mode="custom"] { cursor: default; padding-bottom: 1rem; } 
.timer-mode-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; color: #343a40; } 
.timer-mode-desc { color: #6c757d; font-size: 0.9rem; line-height: 1.4; } 
.timer-mode-time { color: #007bff; font-weight: 600; margin-top: 0.5rem; } 
.custom-time-inputs { display: flex; gap: 1.5rem; margin-top: 1rem; justify-content: space-between; color: #495057; font-size: 0.9rem; } 
.custom-time-inputs div { flex-grow: 1; } 
.custom-time-inputs label { display: block; margin-bottom: 0.25rem; font-weight: 500; } 
.custom-time-inputs input { width: 100%; padding: 8px; border: 1px solid #ced4da; border-radius: 6px; font-size: 1rem; transition: all 0.3s; } 
.custom-time-inputs input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } 
.focus-mode-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 10000; display: none; justify-content: center; align-items: center; color: white; font-family: inherit; } 
.focus-mode-content { text-align: center; max-width: 600px; padding: 2rem; } 
.focus-task-name { font-size: 2rem; font-weight: 300; margin-bottom: 2rem; line-height: 1.4; min-height: 50px; } 
.focus-timer { font-size: 4rem; font-weight: 200; margin: 2rem 0; font-family: 'Courier New', monospace; } 
.focus-controls { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; } 
.focus-btn { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.3s; } 
.focus-btn:hover { background-color: rgba(255, 255, 255, 0.2); } 
.focus-btn.primary { background-color: #007bff; border-color: #007bff; } 
.focus-btn.danger { background-color: #dc3545; border-color: #dc3545; } 
.running-timer-indicator { position: fixed; top: 20px; right: 20px; background-color: #007bff; color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); animation: pulse 2s infinite; z-index: 100; display: none; } 
@keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); } 50% { box-shadow: 0 2px 16px rgba(0, 123, 255, 0.6); } 100% { box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); } } 
.empty-state { text-align: center; color: #6c757d; font-style: italic; padding: 2rem; background-color: #f8f9fa; border-radius: 8px; border: 2px dashed #dee2e6; margin: 1rem 0; } 
.sync-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 2rem; z-index: 10002; display: none; width: 90%; max-width: 400px; border: 1px solid rgba(255, 255, 255, 0.8); } 
.sync-modal h3 { margin-top: 0; text-align: center; color: #343a40; font-size: 1.3rem; background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } 
.sync-id-display { background: linear-gradient(135deg, #f0f4ff 0%, #e8f2ff 100%); border: 2px solid #a8e063; border-radius: 12px; padding: 1.5rem; margin: 1rem 0; text-align: center; } 
.sync-id { font-size: 2rem; font-weight: bold; color: #56ab2f; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace; letter-spacing: 0.2em; } 
.sync-countdown { font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem; } 
.sync-input-section { margin: 1.5rem 0; } 
.sync-input-section label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #495057; } 
.sync-input-section input { width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 1rem; text-align: center; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace; letter-spacing: 0.1em; transition: all 0.3s; } 
.sync-input-section input:focus { outline: none; border-color: #56ab2f; box-shadow: 0 0 0 3px rgba(86, 171, 47, 0.1); } 
.sync-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } 
.sync-btn-secondary { flex: 1; padding: 12px; border: 2px solid #e9ecef; background: white; color: #495057; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.3s; } 
.sync-btn-secondary:hover { border-color: #ced4da; background: #f8f9fa; } 
.sync-btn-primary { flex: 1; padding: 12px; border: none; background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%); color: white; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.3s; } 
.sync-btn-primary:hover { background: linear-gradient(135deg, #99d154 0%, #4a9927 100%); transform: translateY(-1px); } 
.sync-status { text-align: center; margin-top: 1rem; padding: 0.5rem; border-radius: 6px; font-size: 0.9rem; } 
.sync-status.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } 
.sync-status.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } 
.block:active, .block.is-active-touch { background-color: #e9ecef; transform: scale(0.98); transition: all 0.05s ease; } .block.is-long-pressing { background-color: #e1f5fe; border-color: #4fc3f7; box-shadow: 0 0 12px rgba(79, 195, 247, 0.4); transform: scale(1.02); transition: all 0.15s ease; } .block.touch-moved { background-color: #f8f9fa; transform: none; box-shadow: none; transition: none; } .io-btn, .add-task-btn, .sync-btn, .sync-btn-secondary, .sync-btn-primary, .focus-btn, #context-menu li, .timer-mode-option { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#epic-title { font-size: 2.5rem; font-weight: 700; color: #343a40; border: 2px dashed transparent; border-radius: 10px; padding: 0.5rem 1rem; margin: 1rem auto; cursor: text; transition: all 0.3s ease; text-align: center; max-width: 90%; } #epic-title:hover, #epic-title:focus { border-color: #ced4da; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } #epic-title:focus { outline: none; border-color: #007bff; }
.share-modal { display: none; position: fixed; z-index: 10002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); justify-content: center; align-items: center; } .share-modal-content { background: #fff; margin: auto; padding: 2rem; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative; } .close-share-modal { color: #aaa; position: absolute; top: 1rem; right: 1.2rem; font-size: 28px; font-weight: bold; cursor: pointer; } .close-share-modal:hover, .close-share-modal:focus { color: black; } .share-modal h3 { margin-top: 0; color: #343a40; } #share-canvas-container { margin: 1.5rem 0; min-height: 200px; } #share-canvas-container canvas { max-width: 100%; border-radius: 8px; border: 1px solid #e9ecef; } .share-tip { font-size: 0.85rem; color: #6c757d; margin-top: 1rem; } #download-achievement-btn { margin-top: 1rem; display: inline-block; }
#focus-paused-slogan { font-size: 2.8rem; font-weight: 600; line-height: 1.4; margin: 2rem 0; color: #fff; } #focus-paused-info { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); font-family: 'Courier New', monospace; }
.live-room-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 10002; display: none; justify-content: center; align-items: center; }
.live-room-modal-content { background: #fff; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative; max-height: 90vh; overflow-y: auto; }
.close-live-room-modal { color: #aaa; position: absolute; top: 1rem; right: 1.2rem; font-size: 28px; font-weight: bold; cursor: pointer; }
.live-room-modal-content h3 { margin-top: 0; color: #343a40; text-align: center; }
.live-room-desc { font-size: 0.9rem; color: #6c757d; text-align: center; margin: -0.5rem 0 1.5rem 0; }
.privacy-options label { display: block; margin-bottom: 1rem; cursor: pointer; }
.privacy-options input[type="radio"] { display: none; }
.option-card { border: 2px solid #e9ecef; border-radius: 8px; padding: 1rem; transition: all 0.2s ease; }
.privacy-options input[type="radio"]:checked + .option-card { border-color: #007bff; background-color: #f0f8ff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1); }
.option-card h4 { margin: 0 0 0.25rem 0; color: #343a40; }
.option-card p { margin: 0; font-size: 0.85rem; color: #6c757d; line-height: 1.4; }
#password-field-container, #share-options-container, #share-link-container { margin-top: 1rem; display: none; }
.share-option { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
#live-room-password { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 6px; }
.live-room-controls { display: flex; gap: 1rem; margin-top: 1.5rem; }
.live-room-btn { flex: 1; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.3s; border: none; }
.live-room-btn.primary { background: #007bff; color: white; }
.live-room-btn.primary.active { background: #dc3545; }
.live-room-btn.secondary { background: #f1f3f5; color: #495057; }
.share-link-box { background: #e9ecef; padding: 0.75rem; border-radius: 6px; font-family: monospace; word-break: break-all; margin-bottom: 0.5rem; font-size: 0.9em; }
#copy-share-link-btn { width: 100%; margin-top: 0.5rem; }
.share-toggle { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23adb5bd" viewBox="0 0 16 16"><path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; cursor: pointer; border-radius: 50%; transition: all 0.2s; }
.share-toggle:hover { background-color: #e9ecef; }
.share-toggle.shared { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23007bff" viewBox="0 0 16 16"><path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/></svg>'); background-color: #e0f0ff; }

/* Block in detail view (no hover/grab) */
.block.readonly {
    cursor: default;
}
.block.readonly.current-task { 
    border-left: 4px solid #007bff; 
    background-color: #e7f1ff; 
    font-weight: bold; 
}
.block.readonly .share-toggle {
    display: none;
}

@media (max-width: 768px) { 
    body { padding: 1rem; -webkit-text-size-adjust: 100%; }
    #epic-title { font-size: 2rem; }
    .app-container { flex-direction: column; gap: 1.5rem; } 
    .pipeline { width: 100%; } 
    .pipeline-title { font-size: 1.3rem; } 
    .intro-section { padding: 1rem 1.5rem; } 
    .running-timer-indicator { position: relative; top: auto; right: auto; margin: 0 auto 1rem auto; text-align: center; display: block; width: fit-content; } 
    .timer-mode-selector, .sync-modal, .live-room-modal-content { width: 90%; } 
    .custom-time-inputs { flex-direction: column; gap: 0.75rem; } 
    .focus-task-name { font-size: 1.5rem; min-height: 60px; } 
    .focus-timer { font-size: 3rem; } 
    .focus-controls { flex-direction: column; gap: 0.75rem; align-items: center; } 
    .focus-btn { width: 80%; padding: 14px; } 
    #focus-paused-slogan { font-size: 2rem; }
    #focus-paused-info { font-size: 1rem; }
}
/* 新增：星球在线计数器样式 */
.online-counter {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4CAF50; /* 绿色，表示在线 */
    background-color: #e8f5e9;
    padding: 5px 12px;
    border-radius: 15px;
    display: none; /* 默认隐藏 */
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.online-counter::before {
    content: '●';
    font-size: 0.7em;
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}