* { margin: 0; padding: 0; box-sizing: border-box; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #2f3136; }
::-webkit-scrollbar-thumb { background: #202225; border-radius: 6px; border: 2px solid #2f3136; }
::-webkit-scrollbar-thumb:hover { background: #40444b; }

* { scrollbar-width: thin; scrollbar-color: #202225 #2f3136; }

body { background: #36393f; color: #dcddde; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.5; overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
header { background: #2f3136; padding: 16px; border-bottom: 1px solid #40444b; position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.header-content { display: flex; align-items: center; gap: 16px; max-width: 800px; margin: 0 auto; }
.menu-btn { background: none; border: none; color: #dcddde; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.menu-btn:hover { background: #32353b; color: #00bcd4; }
.menu-btn .material-icons { font-size: 24px; }
.header-info-btn { background: none; border: none; color: #dcddde; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; margin-left: auto; }
.header-info-btn:hover { background: #32353b; color: #00bcd4; }
.header-info-btn .material-icons { font-size: 24px; }
h1 { font-size: 22px; font-weight: 600; color: #00bcd4; flex: 1; }

.info-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100vh; background: #36393f; transition: right 0.3s; z-index: 999; overflow-y: auto; border-left: 4px solid #00bcd4; }
.info-drawer.open { right: 0; }
.info-drawer-header { position: sticky; top: 0; background: #2f3136; padding: 16px; border-bottom: 1px solid #40444b; display: flex; align-items: center; justify-content: space-between; z-index: 10; min-height: 76.67px; box-sizing: border-box; }
.info-drawer-title { color: #dcddde; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.info-drawer-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.info-drawer-close-btn:hover { background: #36393f; color: #26c6da; }
.info-drawer-close-btn .material-icons { font-size: 24px; }
.info-drawer-content { padding: 20px; }
.info-section { margin-bottom: 32px; }
.info-section-title { color: #00bcd4; font-size: 16px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-section-text { color: #b9bbbe; font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.info-community-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 20px; background: #2f3136; border-radius: 8px; border-left: 4px solid #00bcd4; }
.info-community-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #00bcd4 0%, #00d4aa 100%); display: flex; align-items: center; justify-content: center; color: #2f3136; font-size: 28px; font-weight: 700; flex-shrink: 0; }
.info-community-details { flex: 1; }
.info-community-name { color: #dcddde; font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.info-community-stats { color: #72767d; font-size: 13px; }
.info-rule { background: #2f3136; border-radius: 8px; padding: 16px; margin-bottom: 12px; border-left: 3px solid #40444b; }
.info-rule:hover { border-left-color: #00bcd4; }
.info-rule-number { display: inline-block; background: #00bcd4; color: #2f3136; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 12px; font-weight: 700; margin-right: 12px; }
.info-rule-title { color: #dcddde; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.info-rule-description { color: #b9bbbe; font-size: 14px; line-height: 1.5; }
.container { max-width: 800px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; flex: 1; padding-top: 73px; padding-bottom: 80px; padding-left: 12px; padding-right: 12px; width: 100%; box-sizing: border-box; }
.container::-webkit-scrollbar { display: none; }
.container { -ms-overflow-style: none; scrollbar-width: none; }

.sidebar-drawer { position: fixed; top: 0; left: -320px; width: 320px; height: 100vh; background: #2f3136; border-right: 1px solid #40444b; transition: left 0.3s ease; z-index: 101; display: flex; flex-direction: column; }
.sidebar-drawer.open { left: 0; }

@media (min-width: 1200px) {
  .sidebar-drawer { left: 0; }
  .container { margin-left: 320px; margin-right: 600px; padding-top: 73px; padding-left: 24px; padding-right: 24px; max-width: none; width: auto; }
  .menu-btn { display: none; }
  header { left: 320px; right: 600px; }
  
  .info-drawer { right: 0; width: 600px; max-width: 600px; }
  
  .post-detail-drawer { right: 0; width: 600px; max-width: 600px; }
  .post-detail-drawer.open { right: 0; }
  
  .article-reader-drawer { right: 0; width: 600px; max-width: 600px; }
  .article-reader-drawer.open { right: 0; }
  
  .header-info-btn { display: none; }
  
  .drawer-overlay { display: none !important; }
  .sidebar-overlay { display: none !important; }
  .sidebar-close-btn { display: none; }
  .info-drawer-close-btn { display: none; }
}

@media (min-width: 801px) and (max-width: 1199px) {
  .sidebar-drawer { left: 0; }
  .container { margin-left: 320px; padding-top: 73px; padding-left: 12px; padding-right: 12px; }
  .menu-btn { display: none; }
  header { left: 320px; }
}

.sidebar-header { padding: 16px 20px; border-bottom: 1px solid #40444b; display: flex; align-items: center; justify-content: space-between; }
.sidebar-title { color: #dcddde; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.sidebar-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.sidebar-close-btn:hover { background: #36393f; color: #26c6da; }
.sidebar-close-btn .material-icons { font-size: 24px; }

.sidebar-search { padding: 16px 20px; border-bottom: 1px solid #40444b; }
.sidebar-search-input { width: 100%; background: #36393f; border: 1px solid #40444b; border-radius: 6px; padding: 10px 12px; color: #dcddde; font-size: 14px; outline: none; }
.sidebar-search-input:focus { border-color: #00bcd4; }
.sidebar-search-input::placeholder { color: #72767d; }

.sidebar-content { flex: 1; overflow-y: auto; padding: 8px 0 200px 0; }
.sidebar-section { margin-bottom: 20px; }
.sidebar-section-title { color: #dcddde; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 20px; margin-bottom: 8px; }

.sidebar-item-wrapper { display: flex; align-items: center; position: relative; }
.sidebar-item-wrapper:hover .sidebar-item-remove { opacity: 1; }
.sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #b9bbbe; font-size: 15px; cursor: pointer; transition: background 0.15s; text-decoration: none; flex: 1; }
.sidebar-item:hover { background: #36393f; color: #dcddde; }
.sidebar-item.active { background: #36393f; color: #00bcd4; border-left: 3px solid #00bcd4; padding-left: 17px; }
.sidebar-item .material-icons { font-size: 20px; color: #72767d; }
.sidebar-item:hover .material-icons { color: #00bcd4; }
.sidebar-item.active .material-icons { color: #00bcd4; }
.sidebar-item-remove { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, color 0.2s; position: absolute; right: 4px; }
.sidebar-item-remove:hover { color: #f04747; }
.sidebar-item-remove .material-icons { font-size: 18px; }
.sidebar-item-add { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, color 0.2s; position: absolute; right: 4px; }
.sidebar-item-add:hover { color: #43a047; }
.sidebar-item-add .material-icons { font-size: 18px; }

.sidebar-sort-group { display: flex; flex-direction: column; }
.sidebar-time-filters { display: none; padding: 8px 20px 8px 52px; gap: 8px; }
.sidebar-time-filters.visible { display: flex; }
.sidebar-time-btn { background: none; border: 1px solid #40444b; color: #dcddde; cursor: pointer; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; transition: all 0.15s; flex: 1; }
.sidebar-time-btn:hover { background: #36393f; border-color: #00bcd4; color: #00bcd4; }
.sidebar-time-btn.active { background: #00bcd4; border-color: #00bcd4; color: #2f3136; }

.community-icon { width: 28px; height: 28px; border-radius: 50%; background: #00bcd4; display: flex; align-items: center; justify-content: center; color: #2f3136; font-size: 13px; font-weight: 600; flex-shrink: 0; }

body.sidebar-open { overflow: hidden; }
.main-wrapper { transition: transform 0.3s ease; overflow-x: hidden; display: flex; flex-direction: column; flex: 1; }
body.sidebar-open .main-wrapper { transform: translateX(320px); }

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 98; }
body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: all; }

@media (max-width: 800px) {
    body.sidebar-open .main-wrapper { transform: none; }
    .sidebar-overlay { display: block; }
    .container { padding-left: 12px; padding-right: 12px; max-width: 800px; }
}

@media (min-width: 801px) {
    .sidebar-overlay { display: none; }
}
.post-wrapper { position: relative; margin: 8px 0; overflow: hidden; border-radius: 8px; }
.post { background: #2f3136; border: 1px solid #40444b; display: flex; position: relative; transition: transform 0.1s ease-out; touch-action: pan-y; user-select: none; z-index: 2; border-radius: 8px; }
.post:hover { background: #32353b; border-color: #4f545c; }
.post.swiping { transition: none; }
.post.animating { transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
.post-swipe-bg { position: absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 40px; font-size: 20px; font-weight: 600; opacity: 0; transition: opacity 0.15s; pointer-events: none; z-index: 1; border-radius: 8px; }
.post-swipe-bg.left { left: 0; background: #f04747; justify-content: flex-end; }
.post-swipe-bg.right { right: 0; background: #00b0f4; justify-content: flex-start; }
.post-swipe-bg.restore { background: #ffa726; }
.post-swipe-bg.visible { opacity: 1; }
.swipe-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: transform 0.1s ease-out; }
.swipe-icon-emoji { font-size: 52px; transform: scale(0.3); transition: transform 0.15s ease-out; }
.swipe-icon-emoji .material-icons { font-size: 52px; }
.swipe-icon-text { font-size: 15px; font-weight: 600; opacity: 0.95; }
.post > .vote, .post > .content { position: relative; z-index: 1; background: #2f3136; }
.vote { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; background: #36393f; min-width: 60px; border-radius: 8px 0 0 8px; }
.vote-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; font-size: 18px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s; }
.vote-btn:hover { color: #00bcd4; background: #2f3136; }
.post.upvoted .upvote-btn { background: #00bcd4; color: #2f3136; }
.post.downvoted .downvote-btn { background: #f04747; color: #fff; }
.vote-count { font-size: 14px; font-weight: 600; margin: 6px 0; color: #b9bbbe; }
.content { flex: 1; padding: 16px; min-width: 0; background: #2f3136; border-radius: 0 8px 8px 0; }
.post-meta { display: flex; gap: 10px; font-size: 13px; color: #72767d; margin-bottom: 8px; flex-wrap: wrap; }
.subreddit { color: #00bcd4; font-weight: 600; text-decoration: none; }
.subreddit:hover { color: #26c6da; text-decoration: underline; }
.author { color: #b9bbbe; }
.time { color: #72767d; }
.post-title { font-size: 17px; font-weight: 500; margin-bottom: 10px; color: #dcddde; word-wrap: break-word; cursor: pointer; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: #00bcd4; }
.post-text { font-size: 15px; color: #b9bbbe; margin-bottom: 10px; }
.post-actions { display: flex; gap: 20px; font-size: 14px; flex-wrap: wrap; }
.action-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px 4px; font-size: 14px; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.action-btn:hover { color: #00bcd4; }
.action-btn .material-icons { font-size: 18px; }

.loading { display: flex; justify-content: center; align-items: center; padding: 40px; color: #72767d; }

.long-press-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1001; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; }
.long-press-modal.visible { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.long-press-content { background: #2f3136; border-radius: 16px; padding: 8px; min-width: 280px; max-width: 320px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border: 2px solid #40444b; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.long-press-header { padding: 16px; border-bottom: 1px solid #40444b; }
.long-press-post-title { color: #dcddde; font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.long-press-post-meta { color: #72767d; font-size: 12px; }

.long-press-options { padding: 4px; }
.long-press-option { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: none; border: none; color: #dcddde; cursor: pointer; width: 100%; text-align: left; font-size: 15px; border-radius: 8px; transition: background 0.15s; min-height: 48px; }
.long-press-option:hover { background: #36393f; }
.long-press-option:active { background: #32353b; }
.long-press-option .material-icons { font-size: 22px; color: #b9bbbe; }
.long-press-option.danger { color: #f04747; }
.long-press-option.danger .material-icons { color: #f04747; }
.long-press-option.primary { color: #00bcd4; }
.long-press-option.primary .material-icons { color: #00bcd4; }

.long-press-cancel { padding: 8px; border-top: 1px solid #40444b; }
.long-press-cancel-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: none; border: none; color: #72767d; cursor: pointer; width: 100%; font-size: 15px; font-weight: 600; border-radius: 8px; transition: background 0.15s; min-height: 48px; }
.long-press-cancel-btn:hover { background: #36393f; color: #dcddde; }
.long-press-cancel-btn:active { background: #32353b; }

.post.long-pressing { transform: scale(0.98); transition: transform 0.1s; }

.report-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1002; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; }
.report-modal.visible { display: flex; }

.report-content { background: #2f3136; border-radius: 16px; padding: 0; min-width: 320px; max-width: 480px; width: 90%; max-height: 80vh; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border: 2px solid #40444b; animation: slideUp 0.3s ease-out; display: flex; flex-direction: column; }

.report-header { padding: 20px; border-bottom: 2px solid #40444b; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.report-title { color: #f04747; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.report-title .material-icons { font-size: 24px; }
.report-close-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 40px; min-height: 40px; }
.report-close-btn:hover { background: #36393f; color: #dcddde; }
.report-close-btn .material-icons { font-size: 24px; }

.report-body { padding: 20px; overflow-y: auto; flex: 1; }
.report-post-info { background: #36393f; border-left: 3px solid #f04747; padding: 12px 16px; margin-bottom: 20px; border-radius: 4px; }
.report-post-title { color: #dcddde; font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
.report-post-meta { color: #72767d; font-size: 12px; }

.report-field { margin-bottom: 20px; }
.report-label { color: #b9bbbe; font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block; }
.report-label .required { color: #f04747; }
.report-select { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2372767d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 40px; }
.report-select:focus { border-color: #f04747; }
.report-select option { background: #2f3136; color: #dcddde; padding: 12px; }

.report-textarea { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; resize: vertical; min-height: 100px; max-height: 200px; line-height: 1.5; }
.report-textarea:focus { border-color: #f04747; }
.report-textarea::placeholder { color: #72767d; }

.report-footer { padding: 16px 20px; border-top: 2px solid #40444b; display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; background: #2f3136; }
.report-btn { padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; display: flex; align-items: center; gap: 8px; min-height: 44px; transition: all 0.2s; }
.report-btn-cancel { background: none; border: 2px solid #40444b; color: #b9bbbe; }
.report-btn-cancel:hover { background: #36393f; border-color: #72767d; }
.report-btn-submit { background: #f04747; color: white; }
.report-btn-submit:hover { background: #dc3545; }
.report-btn-submit:disabled { background: #40444b; color: #72767d; cursor: not-allowed; }
.report-btn .material-icons { font-size: 18px; }

.report-char-count { color: #72767d; font-size: 12px; text-align: right; margin-top: 6px; }
.report-char-count.warning { color: #faa61a; }
.report-char-count.limit { color: #f04747; }

.compose-drawer { position: fixed; bottom: -100%; left: 0; width: 100%; background: #36393f; border-top: 2px solid #00bcd4; transition: bottom 0.3s ease, transform 0.3s ease; z-index: 1003; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0); }
.compose-drawer.open { bottom: 0; }
.compose-header { background: #2f3136; padding: 12px 16px; border-bottom: 1px solid #40444b; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.compose-header-left { display: flex; align-items: center; gap: 12px; }
.compose-close-btn { background: none; border: none; color: #72767d; cursor: pointer; font-size: 24px; padding: 4px; display: flex; align-items: center; min-width: 36px; min-height: 36px; justify-content: center; border-radius: 4px; }
.compose-close-btn:hover { color: #00bcd4; background: #32353b; }
.compose-close-btn .material-icons { font-size: 24px; }
.compose-context { color: #b9bbbe; font-size: 13px; }
.compose-body { padding: 16px; display: flex; flex-direction: column; flex-shrink: 0; }
.compose-input-wrapper { display: flex; gap: 12px; align-items: flex-end; background: #2f3136; border: 2px solid #40444b; border-radius: 12px; padding: 12px 16px; transition: border-color 0.2s; }
.compose-input-wrapper:focus-within { border-color: #00bcd4; }
.compose-textarea { flex: 1; background: none; border: none; color: #dcddde; font-size: 16px; font-family: inherit; resize: none; outline: none; min-height: 44px; max-height: 200px; line-height: 1.5; }
.compose-textarea::placeholder { color: #72767d; }
.compose-send-btn { background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; gap: 6px; min-height: 44px; transition: background 0.2s; flex-shrink: 0; }
.compose-send-btn:hover { background: #26c6da; }
.compose-send-btn:disabled { background: #40444b; color: #72767d; cursor: not-allowed; }
.compose-send-btn .material-icons { font-size: 18px; }

.drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 998; }
.drawer-overlay.visible { opacity: 1; pointer-events: all; }

.swipe-hint { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(47, 49, 54, 0.95); color: #b9bbbe; padding: 12px 24px; border-radius: 8px; font-size: 14px; border: 1px solid #40444b; z-index: 101; animation: fadeInOut 3s ease-in-out; pointer-events: none; }
@keyframes fadeInOut { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
EOFCSS < /dev/null
.header-signin-btn { background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 8px 16px; display: flex; align-items: center; gap: 8px; border-radius: 6px; min-height: 44px; font-size: 15px; font-weight: 600; margin-left: 8px; }
.header-signin-btn:hover { background: #26c6da; }
.header-signin-btn .material-icons { font-size: 20px; }
.header-user { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #36393f; border-radius: 6px; color: #dcddde; font-size: 15px; font-weight: 500; margin-left: 8px; }

.signin-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1002; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; }
.signin-modal.visible { display: flex; }

.signin-content { background: #2f3136; border-radius: 16px; padding: 0; min-width: 320px; max-width: 400px; width: 90%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border: 2px solid #40444b; animation: slideUp 0.3s ease-out; }

.signin-header { padding: 20px; border-bottom: 2px solid #40444b; display: flex; align-items: center; justify-content: space-between; }
.signin-title { color: #00bcd4; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.signin-title .material-icons { font-size: 24px; }
.signin-close-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 40px; min-height: 40px; }
.signin-close-btn:hover { background: #36393f; color: #dcddde; }
.signin-close-btn .material-icons { font-size: 24px; }

.signin-body { padding: 24px; }
.signin-field { margin-bottom: 20px; }
.signin-label { color: #b9bbbe; font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block; }
.signin-input { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; }
.signin-input:focus { border-color: #00bcd4; }
.signin-input::placeholder { color: #72767d; }
.signin-error { color: #f04747; font-size: 14px; margin-bottom: 16px; display: none; }
.signin-error.visible { display: block; }
.signin-submit-btn { width: 100%; background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; transition: background 0.2s; }
.signin-submit-btn:hover { background: #26c6da; }
.signin-submit-btn:disabled { background: #40444b; color: #72767d; cursor: not-allowed; }
.signin-submit-btn .material-icons { font-size: 20px; }
EOFCSS < /dev/null
.sidebar-auth { padding: 0; padding-bottom: 8px; }
.sidebar-signin-btn { width: 100%; background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; min-height: 44px; font-size: 15px; font-weight: 600; margin: 16px 20px; }
.sidebar-signin-btn:hover { background: #26c6da; }
.sidebar-signin-btn .material-icons { font-size: 20px; }
.sidebar-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin: 0; }
.sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: #00bcd4; display: flex; align-items: center; justify-content: center; color: #2f3136; flex-shrink: 0; }
.sidebar-user-avatar .material-icons { font-size: 24px; }
.sidebar-username { color: #00bcd4; font-size: 18px; font-weight: 600; flex: 1; }
.sidebar-signout-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 40px; min-height: 40px; margin-left: auto; }
.sidebar-signout-btn:hover { background: #36393f; color: #f04747; }
.sidebar-signout-btn .material-icons { font-size: 20px; }

.header-sort-btn { background: none; border: none; color: #dcddde; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.header-sort-btn:hover { background: #32353b; color: #00bcd4; }
.header-sort-btn .material-icons { font-size: 24px; }

.header-browse-btn { background: none; border: none; color: #dcddde; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; margin-left: auto; }
.header-browse-btn:hover { background: #32353b; color: #00bcd4; }
.header-browse-btn .material-icons { font-size: 24px; }

.header-create-btn { background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.header-create-btn:hover { background: #26c6da; }
.header-create-btn .material-icons { font-size: 24px; }


.create-post-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100vh; background: #2f3136; transition: right 0.3s; z-index: 1002; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-left: 4px solid #00bcd4; overscroll-behavior-y: contain; }
.create-post-drawer.open { right: 0; }
.create-post-header { position: sticky; top: 0; background: #2f3136; border-bottom: 1px solid #40444b; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.create-post-title { color: #dcddde; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.drawer-community-badge { background: #00bcd4; color: #2f3136; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; margin-left: 12px; }
.create-post-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.create-post-close-btn:hover { background: #36393f; color: #26c6da; }
.create-post-close-btn .material-icons { font-size: 24px; }

.create-post-drawer .drawer-content { padding: 20px; padding-bottom: 60px; }
.create-post-field { margin-bottom: 20px; }
.create-post-label { color: #b9bbbe; font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block; }
.create-post-label .required { color: #f04747; }
.create-post-input { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; }
.create-post-input:focus { border-color: #00bcd4; }
.create-post-input::placeholder { color: #72767d; }
.create-post-select { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2372767d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 40px; }
.create-post-select:focus { border-color: #00bcd4; }
.create-post-select option { background: #2f3136; color: #dcddde; padding: 12px; }
.create-post-textarea { width: 100%; background: #36393f; border: 2px solid #40444b; border-radius: 8px; padding: 12px 16px; color: #dcddde; font-size: 15px; font-family: inherit; outline: none; resize: vertical; min-height: 100px; max-height: 200px; line-height: 1.5; }
.create-post-textarea:focus { border-color: #00bcd4; }
.create-post-textarea::placeholder { color: #72767d; }
.create-post-error { color: #f04747; font-size: 14px; margin-bottom: 16px; display: none; }
.create-post-error.visible { display: block; }
.create-post-url-wrapper { display: flex; gap: 8px; align-items: center; }
.create-post-url-wrapper .create-post-input { flex: 1; }
.create-post-ai-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: #fff; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; flex-shrink: 0; transition: all 0.2s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }
.create-post-ai-btn:hover { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.create-post-ai-btn:disabled { background: #40444b; color: #72767d; cursor: not-allowed; transform: none; box-shadow: none; }
.create-post-ai-btn .material-icons { font-size: 20px; }
.create-post-url-status { font-size: 13px; margin-top: 6px; padding: 8px; border-radius: 4px; display: none; }
.create-post-url-status.loading { display: block; color: #00bcd4; background: rgba(0, 188, 212, 0.1); }
.create-post-url-status.success { display: block; color: #43a047; background: rgba(67, 160, 71, 0.1); }
.create-post-url-status.error { display: block; color: #f04747; background: rgba(240, 71, 71, 0.1); }
.create-post-content-area { min-height: 200px; max-height: 400px; }
.create-post-community-wrapper { position: relative; }
.create-post-community-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #2f3136; border: 2px solid #40444b; border-radius: 8px; margin-top: 4px; max-height: 300px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.create-post-community-dropdown.visible { display: block; }
.create-post-community-option { padding: 12px 16px; cursor: pointer; color: #dcddde; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #40444b; transition: background 0.1s; }
.create-post-community-option:last-child { border-bottom: none; }
.create-post-community-option:hover { background: #36393f; }
.create-post-community-option.selected { background: #00bcd4; color: #2f3136; }
.create-post-community-option .material-icons { font-size: 20px; color: #72767d; }
.create-post-community-option.selected .material-icons { color: #2f3136; }
.create-post-community-option-name { font-size: 15px; font-weight: 500; }
.create-post-community-option-desc { font-size: 12px; color: #72767d; margin-top: 2px; }
.create-post-community-option.selected .create-post-community-option-desc { color: rgba(47, 49, 54, 0.8); }
.create-post-step-instruction { color: #b9bbbe; font-size: 16px; margin-bottom: 24px; text-align: center; }
.create-post-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: #72767d; font-size: 14px; font-weight: 600; }
.create-post-divider::before, .create-post-divider::after { content: ''; flex: 1; height: 1px; background: #40444b; }
.create-post-actions { display: flex; gap: 12px; margin-top: 20px; }
.create-post-back-btn { flex: 1; background: #36393f; color: #dcddde; border: 2px solid #40444b; cursor: pointer; padding: 14px 20px; font-size: 16px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.create-post-back-btn:hover { background: #40444b; border-color: #00bcd4; }
.create-post-back-btn .material-icons { font-size: 20px; }
.create-post-submit-btn { flex: 2; background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; transition: background 0.2s; }
.create-post-submit-btn:hover { background: #26c6da; }
.create-post-submit-btn:disabled { background: #40444b; color: #72767d; cursor: not-allowed; }
.create-post-submit-btn .material-icons { font-size: 20px; }

.post-detail-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100%; min-height: 100vh; min-height: 100dvh; background: #36393f; transition: right 0.3s; z-index: 1001; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-left: 4px solid #00bcd4; overscroll-behavior-y: contain; }
.post-detail-drawer.open { right: 0; }

.article-reader-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100%; min-height: 100vh; min-height: 100dvh; background: #2f3136; transition: right 0.3s; z-index: 1002; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-left: 4px solid #00bcd4; overscroll-behavior-y: contain; }
.article-reader-drawer.open { right: 0; }

.browse-communities-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100%; min-height: 100vh; min-height: 100dvh; background: #2f3136; transition: right 0.3s; z-index: 1002; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-left: 4px solid #00bcd4; overscroll-behavior-y: contain; }
.browse-communities-drawer.open { right: 0; }
.browse-header { position: sticky; top: 0; background: #2f3136; border-bottom: 1px solid #40444b; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.browse-title { color: #dcddde; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.browse-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.browse-close-btn:hover { background: #36393f; color: #26c6da; }
.browse-close-btn .material-icons { font-size: 24px; }
.browse-search { padding: 16px 20px; border-bottom: 1px solid #40444b; }
.browse-search-input { width: 100%; background: #36393f; border: 1px solid #40444b; border-radius: 6px; padding: 10px 12px; color: #dcddde; font-size: 14px; outline: none; }
.browse-search-input:focus { border-color: #00bcd4; }
.browse-search-input::placeholder { color: #72767d; }
.browse-content { padding: 20px; }
.browse-community-card { background: #36393f; border: 1px solid #40444b; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.browse-community-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.browse-community-info { flex: 1; }
.browse-community-name { color: #dcddde; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.browse-community-name .material-icons { font-size: 24px; color: #00bcd4; }
.browse-community-id { color: #72767d; font-size: 14px; }
.browse-community-subscribe-btn { background: #00bcd4; color: #2f3136; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; min-height: 40px; transition: background 0.2s; }
.browse-community-subscribe-btn:hover { background: #26c6da; }
.browse-community-subscribe-btn.subscribed { background: #36393f; color: #72767d; border: 1px solid #40444b; }
.browse-community-subscribe-btn.subscribed:hover { background: #40444b; }
.browse-community-description { color: #b9bbbe; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.browse-community-rules { border-top: 1px solid #40444b; padding-top: 12px; }
.browse-community-rules-title { color: #dcddde; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.browse-community-rule { color: #b9bbbe; font-size: 13px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid #40444b; }
.browse-community-rule:last-child { border-bottom: none; }
.article-reader-header { position: sticky; top: 0; background: #2f3136; padding: 16px 20px; border-bottom: 2px solid #40444b; display: flex; align-items: center; gap: 16px; z-index: 10; }
.article-reader-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.article-reader-close-btn:hover { background: #32353b; color: #26c6da; }
.article-reader-close-btn .material-icons { font-size: 28px; }
.article-reader-title { color: #dcddde; font-size: 16px; font-weight: 600; flex: 1; }
.article-reader-content { padding: 40px 24px; max-width: 680px; margin: 0 auto; }
.article-reader-article-title { color: #dcddde; font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 24px; }
.article-reader-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #40444b; }
.article-reader-source { color: #00bcd4; font-weight: 600; }
.article-reader-author { color: #b9bbbe; }
.article-reader-date { color: #72767d; }
.article-reader-text { color: #dcddde; font-size: 18px; line-height: 1.8; font-family: Georgia, 'Times New Roman', serif; }
.article-reader-text p { margin-bottom: 24px; }
.article-reader-text p:last-child { margin-bottom: 0; }
.article-reader-text br { content: ""; display: block; margin: 8px 0; }
.article-reader-text h1, .article-reader-text h2, .article-reader-text h3, .article-reader-text h4 { color: #dcddde; margin-top: 32px; margin-bottom: 16px; font-weight: 700; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.article-reader-text h1 { font-size: 26px; }
.article-reader-text h2 { font-size: 22px; }
.article-reader-text h3 { font-size: 19px; }
.article-reader-text h4 { font-size: 17px; }
.article-reader-text strong, .article-reader-text b { color: #00bcd4; font-weight: 600; }
.article-reader-text em, .article-reader-text i { font-style: italic; color: #b9bbbe; }
.article-reader-text a { color: #00bcd4; text-decoration: underline; }
.article-reader-text a:hover { color: #26c6da; }
.article-reader-text ul, .article-reader-text ol { margin-bottom: 24px; padding-left: 32px; }
.article-reader-text li { margin-bottom: 8px; }
.article-reader-text blockquote { border-left: 4px solid #00bcd4; padding-left: 20px; margin: 24px 0; color: #b9bbbe; font-style: italic; }
.article-reader-text code { background: #36393f; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 16px; color: #00bcd4; }
.article-reader-text pre { background: #36393f; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 24px 0; }
.article-reader-text pre code { background: none; padding: 0; }
.article-reader-text img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }
.post-detail-drawer .drawer-content { padding: 20px; padding-bottom: 60px; }
.post-detail-header { position: sticky; top: 0; background: #2f3136; padding: 16px 20px; border-bottom: 2px solid #40444b; display: flex; align-items: center; gap: 16px; z-index: 10; }
.post-detail-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.post-detail-close-btn:hover { background: #32353b; color: #26c6da; }
.post-detail-close-btn .material-icons { font-size: 28px; }
.post-detail-title { color: #dcddde; font-size: 18px; font-weight: 600; }
.post-detail-content { padding: 20px; }
.post-detail-loading { display: flex; align-items: center; justify-content: center; height: 100vh; color: #00bcd4; }
.post-detail-loading .material-icons { font-size: 48px; animation: spin 1s linear infinite; }
.post-detail-error { padding: 20px; color: #f04747; text-align: center; }
.post-detail-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; margin-bottom: 16px; }
.post-detail-subreddit { color: #00bcd4; font-weight: 600; text-decoration: none; }
.post-detail-subreddit:hover { text-decoration: underline; }
.post-detail-author, .post-detail-time { color: #72767d; }
.post-detail-post-title { font-size: 20px; font-weight: 600; color: #dcddde; margin-bottom: 16px; line-height: 1.4; }
.post-detail-source { margin-bottom: 16px; }
.post-detail-source a { display: inline-flex; align-items: center; gap: 8px; color: #00bcd4; text-decoration: none; font-size: 14px; word-break: break-all; }
.post-detail-source a:hover { text-decoration: underline; }
.post-detail-source .material-icons { font-size: 18px; }
.post-detail-summary { color: #b9bbbe; font-size: 15px; line-height: 1.6; margin-bottom: 16px; padding: 12px; background: #2f3136; border-radius: 8px; border-left: 3px solid #00bcd4; }
.post-detail-full-text { margin-bottom: 16px; }
.post-detail-full-text details { background: #2f3136; border-radius: 8px; padding: 12px; }
.post-detail-full-text summary { color: #00bcd4; cursor: pointer; font-weight: 600; font-size: 14px; }
.post-detail-full-text summary:hover { color: #26c6da; }
.post-detail-article-content { color: #b9bbbe; font-size: 14px; line-height: 1.6; margin-top: 12px; max-height: 400px; overflow-y: auto; }
.post-detail-actions { display: flex; gap: 8px; padding: 12px 0; border-top: 1px solid #40444b; border-bottom: 1px solid #40444b; margin-bottom: 20px; }
.post-detail-action-btn { background: #2f3136; border: none; color: #b9bbbe; cursor: pointer; padding: 8px 12px; font-size: 14px; border-radius: 6px; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.post-detail-action-btn:hover { background: #40444b; color: #dcddde; }
.post-detail-action-btn .material-icons { font-size: 18px; }
.post-detail-actions.upvoted .vote-btn:first-child { background: #00bcd4; color: #2f3136; }
.post-detail-actions.downvoted .vote-btn:nth-child(2) { background: #f04747; color: #fff; }
.post-detail-comments-header { color: #dcddde; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.post-detail-no-comments { color: #72767d; text-align: center; padding: 32px; font-size: 14px; }
.post-detail-comment { background: #2f3136; border-radius: 8px; padding: 12px; margin-bottom: 8px; border-left: 2px solid #40444b; }
.post-detail-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-detail-comment-author { color: #00bcd4; font-weight: 600; font-size: 13px; }
.post-detail-comment-time { color: #72767d; font-size: 12px; }
.post-detail-comment-text { color: #dcddde; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.post-detail-comment-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post-detail-comment-action { background: none; border: none; color: #72767d; cursor: pointer; padding: 4px 8px; font-size: 13px; border-radius: 4px; display: flex; align-items: center; gap: 4px; }
.post-detail-comment-action:hover { background: #40444b; color: #dcddde; }
.post-detail-comment-action .material-icons { font-size: 16px; }
.post-detail-comment-reply-count { color: #72767d; font-size: 12px; margin-left: auto; }
.post-detail-comment.upvoted { border-left-color: #00bcd4; }
.post-detail-comment.downvoted { border-left-color: #f04747; }
.post-detail-comment.upvoted .vote-btn:first-child { background: #00bcd4; color: #2f3136; }
.post-detail-comment.downvoted .vote-btn:nth-child(2) { background: #f04747; color: #fff; }

.drawer-header { position: sticky; top: 0; background: #2f3136; padding: 16px 20px; border-bottom: 2px solid #40444b; display: flex; flex-direction: column; gap: 12px; z-index: 10; }
.drawer-header-top { display: flex; align-items: center; gap: 16px; }
.drawer-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.drawer-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 40px; min-height: 40px; }
.drawer-close-btn:hover { background: #32353b; color: #26c6da; }
.drawer-close-btn .material-icons { font-size: 24px; }
.drawer-back-btn { background: none; border: none; color: #00bcd4; cursor: pointer; font-size: 28px; padding: 8px; display: flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; border-radius: 6px; flex-shrink: 0; }
.drawer-back-btn:hover { color: #26c6da; background: #32353b; }
.drawer-back-btn .material-icons { font-size: 28px; }
.drawer-title { color: #dcddde; font-size: 15px; font-weight: 500; flex: 1; }
.drawer-header-parent { background: #36393f; border: 1px solid #40444b; border-radius: 6px; padding: 12px; min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.drawer-header-parent-meta { display: flex; gap: 8px; font-size: 11px; color: #72767d; margin-bottom: 6px; }
.drawer-header-parent-author { color: #00bcd4; font-weight: 600; }
.drawer-header-parent-text { font-size: 13px; color: #b9bbbe; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.drawer-replies-section { padding-top: 0; }
.drawer-replies-header { color: #b9bbbe; font-size: 12px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; justify-content: space-between; }

.comment { padding: 14px; border-left: 4px solid #40444b; margin-bottom: 12px; background: #2f3136; border-radius: 3px; }
.comment:hover { border-left-color: #00bcd4; background: #32353b; }
.comment-meta { display: flex; gap: 10px; font-size: 12px; color: #72767d; margin-bottom: 8px; }
.comment-author { color: #00bcd4; font-weight: 600; }
.comment-text { font-size: 15px; color: #dcddde; line-height: 1.6; margin-bottom: 8px; }
.comment-actions { margin-top: 10px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.comment-vote { display: inline-flex; gap: 4px; align-items: center; }
.comment-vote-btn { background: none; border: none; color: #72767d; cursor: pointer; padding: 6px; font-size: 16px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.comment-vote-btn:hover { color: #00bcd4; background: #32353b; }
.comment-score { color: #b9bbbe; font-size: 14px; font-weight: 600; min-width: 32px; text-align: center; }
.comment-reply { background: none; border: 1px solid #40444b; color: #72767d; cursor: pointer; padding: 8px 16px; font-size: 14px; border-radius: 6px; min-height: 44px; display: flex; align-items: center; }
.comment-reply:hover { color: #00bcd4; border-color: #00bcd4; background: #32353b; }
.comment-delete { background: none; border: 1px solid #40444b; color: #72767d; cursor: pointer; padding: 8px 16px; font-size: 14px; border-radius: 6px; min-height: 44px; display: flex; align-items: center; }
.comment-delete:hover { color: #f04747; border-color: #f04747; background: #32353b; }
.view-replies-btn { background: #32353b; border: 2px solid #00bcd4; color: #00bcd4; cursor: pointer; padding: 8px 18px; font-size: 15px; font-weight: 500; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; }
.view-replies-btn:hover { background: #00bcd4; color: #2f3136; }
.view-replies-btn .material-icons { font-size: 18px; }

.reply-to-post-btn { width: 100%; background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; min-height: 48px; transition: background 0.2s; }
.reply-to-post-btn:hover { background: #26c6da; }
.reply-to-post-btn .material-icons { font-size: 20px; }

.post-detail-actions { display: flex; gap: 12px; margin-bottom: 20px; }
.post-detail-actions .reply-to-post-btn { flex: 1; padding: 10px 16px; font-size: 14px; min-height: 44px; max-height: 44px; height: 44px; }
.post-detail-actions .reply-to-post-btn .material-icons { font-size: 18px; }
.post-detail-delete-btn { flex: 1; background: transparent; border: 2px solid #f04747; color: #f04747; cursor: pointer; padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-height: 44px; height: 44px; transition: all 0.2s; box-sizing: border-box; }
.post-detail-delete-btn:hover { background: #f04747; color: #fff; }
.post-detail-delete-btn .material-icons { font-size: 18px; }

.post-detail-metadata { background: #2f3136; border: 1px solid #40444b; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.post-detail-metadata-title { color: #b9bbbe; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.post-detail-metadata-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #40444b; }
.post-detail-metadata-item:last-child { border-bottom: none; }
.post-detail-metadata-label { color: #72767d; font-size: 14px; min-width: 120px; }
.post-detail-metadata-value { color: #dcddde; font-size: 14px; font-weight: 500; }
.post-detail-metadata-badge { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.post-detail-metadata-badge.left { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.post-detail-metadata-badge.center { background: rgba(0, 188, 212, 0.2); color: #00bcd4; }
.post-detail-metadata-badge.right { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.post-detail-metadata-badge.high { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.post-detail-metadata-badge.medium { background: rgba(250, 166, 26, 0.2); color: #faa61a; }
.post-detail-metadata-badge.low { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.post-detail-metadata-badge.unknown { background: rgba(114, 118, 125, 0.2); color: #72767d; }
.satire-badge { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; background: rgba(255, 152, 0, 0.2); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.4); }
.satire-badge-small { padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(255, 152, 0, 0.2); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.4); margin-left: 8px; display: inline-block; }
.post-detail-summary { background: #2f3136; border-left: 4px solid #00bcd4; padding: 16px; margin-bottom: 20px; border-radius: 4px; }
.post-detail-summary-title { color: #00bcd4; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.post-detail-summary-text { color: #b9bbbe; font-size: 15px; line-height: 1.6; }
.post-detail-expand-btn { background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 20px; transition: background 0.2s; }
.post-detail-expand-btn:hover { background: #26c6da; }
.post-detail-expand-btn .material-icons { font-size: 20px; }
.post-detail-full-article { background: #2f3136; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: none; }
.post-detail-full-article.expanded { display: block; }
.post-detail-full-article-title { color: #dcddde; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.post-detail-full-article-text { color: #b9bbbe; font-size: 15px; line-height: 1.8; white-space: pre-wrap; }

.reply-drawer { position: fixed; bottom: -100%; left: 0; width: 100%; max-height: 50vh; background: #36393f; transition: bottom 0.3s; z-index: 1002; border-top: 4px solid #00bcd4; }
.reply-drawer.open { bottom: 0; }
.reply-drawer-header { background: #2f3136; padding: 16px 20px; border-bottom: 2px solid #40444b; display: flex; align-items: center; gap: 16px; }
.reply-drawer-close-btn { background: none; border: none; color: #00bcd4; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 44px; min-height: 44px; }
.reply-drawer-close-btn:hover { background: #32353b; color: #26c6da; }
.reply-drawer-close-btn .material-icons { font-size: 24px; }
.reply-drawer-title { color: #dcddde; font-size: 16px; font-weight: 600; }
.reply-drawer-content { padding: 20px; }
.reply-drawer-textarea { width: 100%; background: #2f3136; border: 2px solid #40444b; color: #dcddde; padding: 12px; font-size: 15px; border-radius: 8px; resize: vertical; min-height: 100px; font-family: inherit; }
.reply-drawer-textarea:focus { outline: none; border-color: #00bcd4; }
.reply-drawer-submit { width: 100%; background: #00bcd4; border: none; color: #2f3136; cursor: pointer; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 48px; transition: background 0.2s; }
.reply-drawer-submit:hover { background: #26c6da; }
.reply-drawer-submit .material-icons { font-size: 20px; }

.steam-game-info { background: #36393f; border: 1px solid #40444b; border-radius: 8px; padding: 16px; margin: 16px 0; }
.steam-media-carousel { position: relative; width: 100%; margin: 0 0 20px 0; background: #000; overflow: hidden; }
.steam-carousel-container { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
.steam-carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.steam-carousel-item.active { opacity: 1; pointer-events: auto; }
.steam-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; cursor: pointer; }
.steam-video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.steam-video::-webkit-media-controls { display: none !important; }
.steam-video::-webkit-media-controls-panel { display: none !important; }
.steam-video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s; z-index: 2; pointer-events: none; }
.steam-video-wrapper.paused .steam-video-overlay { opacity: 1; background: rgba(0,0,0,0.5); }
.steam-video-wrapper:hover.paused .steam-video-overlay { opacity: 1; }
.steam-play-icon { width: 80px; height: 80px; background: rgba(0,0,0,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; pointer-events: none; }
.steam-video-overlay:hover .steam-play-icon { background: rgba(0,0,0,0.9); transform: scale(1.1); }
.steam-play-icon .material-icons { font-size: 48px; color: #fff; }
.steam-video-controls { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 6px; z-index: 3; opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
.steam-video-wrapper:hover .steam-video-controls { opacity: 1; }
.steam-volume-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.steam-volume-btn:hover { color: #00bcd4; }
.steam-volume-btn .material-icons { font-size: 20px; }
.steam-volume-slider { width: 80px; height: 4px; -webkit-appearance: none; appearance: none; background: #40444b; border-radius: 2px; outline: none; cursor: pointer; }
.steam-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #00bcd4; border-radius: 50%; cursor: pointer; }
.steam-volume-slider::-moz-range-thumb { width: 12px; height: 12px; background: #00bcd4; border-radius: 50%; cursor: pointer; border: none; }
.steam-fullscreen-item video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.steam-fullscreen-item video::-webkit-media-controls-panel { background: rgba(0,0,0,0.7); }
.steam-carousel-btn { display: none; }
.steam-carousel-prev { left: 12px; }
.steam-carousel-next { right: 12px; }
.steam-carousel-btn .material-icons { font-size: 28px; }
.steam-carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.steam-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(220, 221, 222, 0.4); cursor: pointer; transition: background 0.2s; }
.steam-carousel-dot.active { background: #00bcd4; }
.steam-carousel-dot:hover { background: rgba(220, 221, 222, 0.6); }
.steam-price { font-size: 24px; font-weight: 700; color: #00bcd4; margin-bottom: 16px; }
.steam-reviews-section { background: #2f3136; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
.steam-reviews-header { color: #dcddde; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.steam-review-score { color: #00bcd4; font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.steam-review-bar-container { }
.steam-review-bar { width: 100%; height: 8px; background: #40444b; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.steam-review-bar-positive { height: 100%; background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%); transition: width 0.3s; }
.steam-review-stats { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.steam-review-percent { color: #dcddde; font-weight: 600; }
.steam-review-count { color: #72767d; }
.steam-no-reviews { color: #72767d; font-size: 14px; font-style: italic; }
.steam-developer, .steam-publisher, .steam-release { color: #b9bbbe; font-size: 14px; margin-bottom: 8px; }
.steam-early-access { display: inline-block; background: #ffa726; color: #2f3136; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin: 8px 0; }
.steam-view-btn { display: inline-flex; align-items: center; gap: 8px; background: #00bcd4; color: #2f3136; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; margin-top: 12px; min-height: 44px; transition: background 0.2s; }
.steam-view-btn:hover { background: #26c6da; }
.steam-view-btn .material-icons { font-size: 18px; }
.steam-fullscreen-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.steam-fullscreen-modal.visible { opacity: 1; }
.steam-fullscreen-content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.steam-fullscreen-carousel { position: relative; width: 90%; max-width: 1200px; height: 80%; }
.steam-fullscreen-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s; }
.steam-fullscreen-item.active { opacity: 1; }
.steam-fullscreen-close { position: absolute; top: 20px; right: 20px; background: rgba(47, 49, 54, 0.8); border: none; color: #dcddde; cursor: pointer; padding: 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; min-width: 48px; min-height: 48px; transition: background 0.2s; }
.steam-fullscreen-close:hover { background: rgba(47, 49, 54, 0.95); }
.steam-fullscreen-close .material-icons { font-size: 28px; }
.steam-fullscreen-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(47, 49, 54, 0.8); border: none; color: #dcddde; cursor: pointer; padding: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; min-width: 56px; min-height: 56px; transition: background 0.2s; }
.steam-fullscreen-btn:hover { background: rgba(47, 49, 54, 0.95); }
.steam-fullscreen-prev { left: 40px; }
.steam-fullscreen-next { right: 40px; }
.steam-fullscreen-btn .material-icons { font-size: 36px; }
.steam-fullscreen-counter { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(47, 49, 54, 0.8); color: #dcddde; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Recipe Card Styles */
.recipe-card { background: #2f3136; border-radius: 12px; overflow: hidden; margin: 16px 0; border: 2px solid #00bcd4; }

/* Recipe Carousel */
.recipe-carousel { position: relative; width: 100%; height: 400px; background: #36393f; overflow: hidden; }
.recipe-carousel-images { width: 100%; height: 100%; position: relative; }
.recipe-carousel-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; }
.recipe-carousel-image.active { opacity: 1; z-index: 1; }
.recipe-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s; }
.recipe-carousel-btn:hover { background: rgba(0, 0, 0, 0.8); }
.recipe-carousel-prev { left: 12px; }
.recipe-carousel-next { right: 12px; }
.recipe-carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.recipe-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background 0.2s; }
.recipe-carousel-dot.active { background: #00bcd4; }
.recipe-carousel-dot:hover { background: rgba(255, 255, 255, 0.8); }

.recipe-card-content { padding: 20px; }
.recipe-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.recipe-badge { background: #00bcd4; color: #2f3136; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.recipe-badge .material-icons { font-size: 16px; }
.recipe-meta { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.recipe-meta-item { display: flex; align-items: center; gap: 8px; color: #b9bbbe; font-size: 14px; }
.recipe-meta-item .material-icons { font-size: 18px; color: #00bcd4; }

/* Recipe Tabs */
.recipe-tabs { margin-top: 20px; }
.recipe-tab-buttons { display: flex; gap: 8px; border-bottom: 2px solid #36393f; margin-bottom: 20px; }
.recipe-tab-button { background: transparent; border: none; color: #b9bbbe; padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; transition: all 0.2s; }
.recipe-tab-button:hover { color: #dcddde; background: rgba(255, 255, 255, 0.05); }
.recipe-tab-button.active { color: #00bcd4; border-bottom-color: #00bcd4; }
.recipe-tab-button .material-icons { font-size: 18px; }
.recipe-tab-content { display: block; } /* Wrapper should always be visible */

.recipe-section { margin-bottom: 24px; }
.recipe-section-title { color: #00bcd4; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.recipe-section-title .material-icons { font-size: 20px; }
.recipe-ingredients { display: grid; gap: 8px; }
.recipe-ingredient { background: #36393f; padding: 10px 16px; border-radius: 6px; color: #dcddde; font-size: 14px; border-left: 3px solid #00bcd4; display: flex; align-items: center; gap: 12px; }
.recipe-ingredient::before { content: '•'; color: #00bcd4; font-size: 18px; font-weight: bold; }
.recipe-steps { display: grid; gap: 12px; }
.recipe-step { background: #36393f; padding: 14px 16px; border-radius: 8px; color: #dcddde; font-size: 14px; line-height: 1.6; border-left: 4px solid #00bcd4; display: flex; gap: 16px; }
.recipe-step-number { background: #00bcd4; color: #2f3136; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.recipe-step-text { flex: 1; }
.recipe-view-original { display: inline-flex; align-items: center; gap: 8px; background: #00bcd4; color: #2f3136; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; margin-top: 16px; }
.recipe-view-original:hover { background: #26c6da; }
.recipe-view-original .material-icons { font-size: 18px; }

/* Recipe Detail View */
.recipe-media-carousel { position: relative; width: 100%; margin: 0 0 20px 0; background: #000; overflow: hidden; border-radius: 8px; }
.recipe-carousel-container { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
.recipe-carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.recipe-carousel-item.active { opacity: 1; }
.recipe-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s; }
.recipe-carousel-btn:hover { background: rgba(0, 0, 0, 0.8); }
.recipe-media-carousel .recipe-carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.recipe-media-carousel .recipe-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background 0.2s; }
.recipe-media-carousel .recipe-carousel-dot.active { background: #00bcd4; }
.recipe-media-carousel .recipe-carousel-dot:hover { background: rgba(255, 255, 255, 0.8); }

.recipe-detail-content { background: #36393f; border: 1px solid #40444b; border-radius: 8px; padding: 20px; margin: 0 0 20px 0; }
.recipe-detail-meta { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.recipe-detail-badges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.recipe-ingredient-item { background: #2f3136; padding: 10px 16px; border-radius: 6px; color: #dcddde; font-size: 14px; border-left: 3px solid #00bcd4; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; }
.recipe-ingredient-item:hover { background: #36393f; }
.recipe-ingredient-item .material-icons { font-size: 18px; color: #00bcd4; }
.recipe-step-item { background: #2f3136; padding: 14px 16px; border-radius: 8px; color: #dcddde; font-size: 14px; line-height: 1.6; border-left: 4px solid transparent; display: flex; gap: 16px; cursor: pointer; transition: all 0.2s; }
.recipe-step-item:hover { background: #36393f; }
.recipe-step-item .recipe-step-number { background: transparent; border: 2px solid #72767d; color: #72767d; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; transition: all 0.2s; }
.recipe-step-item.completed { border-left-color: #00bcd4; }
.recipe-step-item.completed .recipe-step-number { background: #00bcd4; border-color: #00bcd4; color: #2f3136; }
.recipe-tab-btn { background: transparent; border: none; color: #b9bbbe; padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; transition: all 0.2s; }
.recipe-tab-btn:hover { color: #dcddde; background: rgba(255, 255, 255, 0.05); }
.recipe-tab-btn.active { color: #00bcd4; border-bottom-color: #00bcd4; }
.recipe-tab-btn .material-icons { font-size: 18px; }
.recipe-tab-pane { display: none; }
.recipe-tab-pane.active { display: block; }
.recipe-view-btn { display: inline-flex; align-items: center; gap: 8px; background: #00bcd4; color: #2f3136; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; margin-top: 16px; width: 100%; justify-content: center; }
.recipe-view-btn:hover { background: #26c6da; }
.recipe-view-btn .material-icons { font-size: 18px; }
.recipe-no-data { color: #72767d; text-align: center; padding: 32px; font-size: 14px; }

.edit-post-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 600px; height: 100vh; background: #2f3136; transition: right 0.3s; z-index: 1002; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-left: 4px solid #00bcd4; overscroll-behavior-y: contain; }
.edit-post-drawer.open { right: 0; }
.edit-post-drawer .drawer-content { padding-bottom: 100px; }

.admin-option { color: #ffa500 !important; }
.admin-option .material-icons { color: #ffa500 !important; }
.admin-option:hover { background: rgba(255, 165, 0, 0.1) !important; }

EOFCSS < /dev/null