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

        
        
        :root {
            --bg: #C7EDCC;
            --panel: #ffffff;
            --panel-soft: #f5f8f6;
            --primary: #27ae60;
            --primary-dark: #1e7a47;
            --primary-soft: #eafaf0;
            --accent: #3498db;
            --accent-dark: #2980b9;
            --accent-soft: #e1eefb;
            --text: #2c3e50;
            --muted: #666;
            --border: #e2e8e0;
            --nav-active: #27ae60;
            --shadow: rgba(0,0,0,0.08);
        }
        
        :root[data-theme="blue"] {
            --bg: #d6e6f2; --panel: #ffffff; --panel-soft: #eef5fb;
            --primary: #2e86c1; --primary-dark: #1f5c95; --primary-soft: #e8f1fa;
            --accent: #2980b9; --accent-dark: #1f5c95; --accent-soft: #e1eefb;
            --text: #1b3a4b; --muted: #4a6b7a; --border: #cfe0ee;
            --nav-active: #2e86c1;
        }
        
        :root[data-theme="sepia"] {
            --bg: #efe2c9; --panel: #fdf8ef; --panel-soft: #f4ead6;
            --primary: #b5772f; --primary-dark: #8a5a22; --primary-soft: #f6ecd9;
            --accent: #a9744f; --accent-dark: #7e5436; --accent-soft: #f3e4d6;
            --text: #4a3b2a; --muted: #7a6a52; --border: #e3d4ba;
            --nav-active: #b5772f;
        }
        
        :root[data-theme="dark"] {
            --bg: #1e2430; --panel: #2a3140; --panel-soft: #323a4b;
            --primary: #4a9d8e; --primary-dark: #357a6e; --primary-soft: #2c3b39;
            --accent: #5b9bd5; --accent-dark: #3f7cba; --accent-soft: #2c3b4b;
            --text: #e6e9ef; --muted: #a6b0c0; --border: #3a4252;
            --nav-active: #4a9d8e;
            --shadow: rgba(0,0,0,0.4);
        }
        
        :root[data-theme="dark"] body { background-color: var(--bg) !important; color: var(--text) !important; }
        :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
        :root[data-theme="dark"] h4, :root[data-theme="dark"] .user-detail span,
        :root[data-theme="dark"] .member-name, :root[data-theme="dark"] .member-cultural,
        :root[data-theme="dark"] .panel-title { color: var(--text) !important; }
        :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
            background: var(--panel-soft) !important; color: var(--text) !important; border-color: var(--border) !important;
        }
        :root[data-theme="dark"] .member-item, :root[data-theme="dark"] .member-list,
        :root[data-theme="dark"] .modal-content { border-color: var(--border) !important; }
        
        :root[data-theme="dark"] .member-details { color: var(--muted); }
        :root[data-theme="dark"] .member-item { color: var(--text); }
        
        :root[data-theme="dark"] .cs-panel,
        :root[data-theme="dark"] .cs-panel-header,
        :root[data-theme="dark"] .cs-panel .cs-tabs,
        :root[data-theme="dark"] .cs-panel .cs-body,
        :root[data-theme="dark"] .cs-feedback-box { background: var(--panel); color: var(--text); }
        :root[data-theme="dark"] .cs-panel.cs-panel--page { background: var(--bg); color: var(--text); }
        :root[data-theme="dark"] .cs-tab { color: var(--text); }
        :root[data-theme="dark"] .cs-tab:hover { color: var(--accent); background: var(--accent-soft); }
        :root[data-theme="dark"] .cs-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }
        :root[data-theme="dark"] .profile-tab { color: var(--text); }
        :root[data-theme="dark"] .profile-tab:hover { color: var(--accent); background: var(--accent-soft); }
        :root[data-theme="dark"] .profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }
        :root[data-theme="dark"] .cs-bot-msg { color: var(--text); }
        :root[data-theme="dark"] .cs-bot-msg > div.bot { background: var(--panel-soft); color: var(--text); }
        :root[data-theme="dark"] .cs-fb-item { background: var(--panel-soft); border-color: var(--border); }
        :root[data-theme="dark"] .cs-fb-msg { color: var(--text); }
        
        :root[data-theme="dark"] .cs-fb-del-all { color: var(--muted); border-color: var(--border); background: transparent; }
        :root[data-theme="dark"] .cs-fb-del-all:hover { background: rgba(231, 76, 60, 0.16); color: #ff8073; border-color: #ff8073; }
        :root[data-theme="dark"] .cs-conv-box { background: var(--panel); color: var(--text); }
        :root[data-theme="dark"] .cs-conv-admin .cs-conv-bubble { background: var(--panel-soft); color: var(--text); border-color: var(--border); }
        :root[data-theme="dark"] .cs-conv-meta { color: var(--muted); }
        
        :root[data-theme="dark"] #comsumerCenterPanel { background: var(--bg); color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel h2 { color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel .cc-pane > div { background: var(--panel); color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel .cs-form label { color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel input,
        :root[data-theme="dark"] #comsumerCenterPanel textarea { background: var(--panel-soft); color: var(--text); border-color: var(--border); }
        :root[data-theme="dark"] #comsumerCenterPanel .cs-bot-msg { color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel .cs-bot-msg > div.bot { background: var(--panel-soft); color: var(--text); }
        :root[data-theme="dark"] #comsumerCenterPanel .cs-bot-input { background: var(--panel-soft); color: var(--text); border-color: var(--border); }
        
        :root[data-theme="dark"] .cs-panel-title { color: var(--text); }
        
        :root[data-theme="dark"] .family-history-bar { background: var(--panel-soft); color: var(--text); border-left-color: var(--primary); }
        :root[data-theme="dark"] .family-history-bar .edit-history-btn { color: var(--accent); border-color: var(--accent); }
        :root[data-theme="dark"] .history-editor { background: var(--panel-soft); border-color: var(--border); }
        body {
            background-color: var(--bg);
            color: var(--text);
            min-height: 100vh;
            padding: 20px;
            font-family: 'Segoe UI', 'Microsoft YaHei', 'KaiTi', 'SimSun', serif;
        }
        
        input, select, button { font-family: inherit; }
        
        .sushi-content * , .traditional-content * { font-family: inherit !important; }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-height: 100vh;
        }
        
        .site-footer {
            text-align: center; padding: 24px 0 12px; font-size: 0.9rem;
            border-top: 1px solid var(--border); margin-top: auto; color: var(--muted);
        }
        
        .auth-panel {
            background: var(--panel);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 8px 30px var(--shadow);
            max-width: min(450px, 92vw);
            margin: clamp(16px, 4vh, 40px) auto;
            border-top: 6px solid var(--primary);
        }
        .auth-panel h2 { color: #2c3e50; margin-bottom: 24px; font-size: 2rem; text-align: center; }
        .auth-input-group { margin-bottom: 20px; text-align: left; }
        .auth-input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; }
        .auth-input-group input {
            width: 100%; padding: 14px 18px; border: 1px solid #ddd; border-radius: 40px;
            font-size: 1rem; transition: all 0.3s;
        }
        .auth-input-group input:focus {
            border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none;
        }
        .auth-btn {
            background: var(--primary); color: white; border: none; padding: 14px 28px; border-radius: 40px;
            font-size: 1.1rem; font-weight: 600; width: 100%; cursor: pointer; transition: all 0.3s;
            margin-bottom: 16px;
        }
        .auth-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        .auth-switch { color: #3498db; cursor: pointer; text-decoration: underline; font-size: 0.95rem; }
        .auth-message { margin-top: 16px; padding: 10px; border-radius: 8px; color: white; font-weight: 500; display: none; }
        .auth-success { background: #2ecc71; }
        .auth-error { background: #e74c3c; }

        
        .main-app { display: none; width: 100%; }
        .user-header {
            background: var(--panel); border-radius: 12px; padding: 16px 24px; margin-bottom: 20px;
            display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px var(--shadow);
            border-left: 6px solid var(--primary);
        }
        .user-info { display: flex; align-items: center; gap: 16px; }
        .user-avatar {
            background: var(--primary); width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; color: white;
            font-size: 1.6rem; font-weight: bold;
        }
        .user-detail { font-size: 1.1rem; }
        .user-detail span { font-weight: 600; color: var(--text); }
        .logout-btn {
            background: #e74c3c; color: white; border: none; padding: 10px 24px; border-radius: 30px;
            font-weight: 600; cursor: pointer; transition: all 0.2s;
        }
        .logout-btn:hover { background: #c0392b; transform: scale(1.02); }

        
        #familySelectorPanel {
            background: var(--panel); border-radius: 16px; padding: 30px; box-shadow: 0 8px 30px var(--shadow);
            margin: 20px 0;
        }
        .family-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px;
        }
        .family-card {
            border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: all 0.2s;
            cursor: pointer; background: var(--panel-soft);
        }
        .family-card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
        .family-card h3 { color: var(--text); margin-bottom: 8px; }
        .family-card p { color: #777; font-size: 0.9rem; margin-bottom: 4px; }
        .family-role-badge {
            display: inline-block; padding: 4px 8px; border-radius: 20px; font-size: 0.8rem;
            background: var(--primary); color: white; margin-top: 8px;
        }
        .family-role-badge.admin { background: #3498db; }
        .family-role-badge.viewer { background: #2ecc71; }

        
        .family-history-bar {
            background: var(--panel-soft); border-left: 6px solid var(--primary); padding: 12px 20px; border-radius: 8px;
            margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 1rem; color: var(--text);
        }
        .edit-history-btn {
            background: none; border: 1px solid var(--primary); color: var(--primary); padding: 4px 12px; border-radius: 20px;
            cursor: pointer; font-size: 0.8rem; transition: all 0.2s;
        }
        .edit-history-btn:hover { background: var(--primary); color: #fff; }
        .history-editor {
            background: var(--panel-soft); border-radius: 8px; padding: 18px; margin-bottom: 20px; border: 1px solid var(--border);
        }
        
        .history-editor textarea {
            width: 100%; box-sizing: border-box;
            height: calc(100vh - 340px); min-height: 260px; resize: vertical;
            margin-bottom: 12px; padding: 14px; border-radius: 6px; border: 1px solid var(--border);
            background: var(--panel); color: var(--text);   
            font-size: 1rem; line-height: 1.7; font-family: inherit;
        }
        .history-editor-buttons { display: flex; gap: 10px; justify-content: stretch; }

        
        .main-content { display: flex; gap: 20px; flex-wrap: wrap; }
        .panel {
            background: var(--panel); border-radius: 10px; padding: 25px; box-shadow: 0 4px 15px var(--shadow);
            flex: 1; min-width: 300px;
        }
        .form-panel { flex: 1; min-width: 400px; }
        .visualization-panel { flex: 2; min-width: 500px; display: flex; flex-direction: column; overflow: hidden;            }
        .panel-title {
            font-size: 1.5rem; color: #2c3e50; margin-bottom: 20px; padding-bottom: 10px;
            border-bottom: 2px solid #3498db; display: flex; align-items: center; gap: 10px;
        }
        .panel-title i { color: #3498db; }
        
        .sushi-content { font-family: "KaiTi", "SimSun", "Microsoft YaHei", serif; }
        .sushi-generation { margin-bottom: 20px; }
        .sushi-gen-header {
            background: linear-gradient(135deg, #2c3e50, #34495e); color: #f0e6d3;
            padding: 8px 16px; font-size: 1.05rem; font-weight: bold;
            border-radius: 4px; margin-bottom: 8px; letter-spacing: 2px;
        }
        .sushi-member-row {
            display: flex; border-bottom: 1px solid #e8dcc8; padding: 10px 0;
            background: var(--panel-soft); transition: background 0.2s;
        }
        .sushi-member-row:hover { background: var(--primary-soft); }
        .sushi-member-row:nth-child(even) { background: var(--panel); }
        .sushi-member-row:nth-child(even):hover { background: var(--primary-soft); }
        .sushi-member-name {
            min-width: 80px; font-weight: bold; font-size: 1.1rem; color: var(--text);
            padding: 0 12px; border-right: 2px solid #8e44ad; text-align: center;
            display: flex; align-items: center; justify-content: center;
        }
        .sushi-member-name.male { color: #2471a3; }
        .sushi-member-name.female { color: #c0392b; }
        .sushi-member-detail {
            flex: 1; padding: 0 14px; line-height: 1.8; color: var(--text); font-size: 0.92rem;
        }
        .sushi-member-detail .detail-label { color: #8e44ad; font-weight: 600; margin-right: 4px; }
        .sushi-member-detail .spouse-info { color: #c0392b; margin-left: 8px; }
        
        .sushi-tree-wrap {
            margin: 12px 0 18px;
            padding: 10px;
            border: 1px dashed #d9c7a8;
            border-radius: 8px;
            background: var(--panel-soft);
            text-align: center;
            overflow: visible;
        }
        .sushi-tree-wrap .traditional-tree-svg { max-width: 100%; height: auto; }
        
        .traditional-content { font-family: "KaiTi", "SimSun", "Microsoft YaHei", serif; overflow-x: hidden; }

        
        .sushi-screen-header, .traditional-screen-header {
            margin-bottom: 16px; padding-bottom: 10px;
            border-bottom: 2px solid #8e44ad;
        }
        
        .sushi-screen-header { text-align: center; }
        .sushi-screen-title {
            font-size: 1.8rem; font-weight: bold; color: var(--text); letter-spacing: 4px;
            text-align: center;
        }
        .sushi-screen-intro {
            margin-top: 8px; font-size: 0.95rem; color: var(--muted); line-height: 1.7;
            text-align: center;
        }
        
	
	.intro-page-traditional {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction: row-reverse; 
	    align-items: center; 
	    gap: 40px; 
	    box-sizing: border-box;
	}
	.traditional-screen-title-vertical {
	    writing-mode: vertical-rl;
	    text-orientation: upright; 
	    font-size: 3rem;
	    letter-spacing: 16px;
	    color: var(--text);
	    border: none; 
	    padding: 0;
	    font-weight: bold;
	    flex-shrink: 0; 
	    
	}
	.traditional-screen-intro-content-vertical {
	    writing-mode: vertical-rl;
	    text-orientation: upright;
	    text-indent: 0;
	    line-height: 1.8;
	    font-size: 1.05rem;
	    color: var(--text);
	    letter-spacing: 1px;
	    word-wrap: break-word;
	    overflow-wrap: break-word;
	    flex: 1; 
	}

        
        .chart-watermark {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 20;
            background-repeat: repeat;
            background-position: 0 0;
        }

        
        .traditional-block {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #e8e2d4;
            border-radius: 6px;
            background: var(--panel-soft);
            padding: 8px 10px 10px;
            overflow: visible;
            
            display: flex;
            flex-direction: row-reverse;
            align-items: stretch;
            gap: 12px;
        }
        
        
        .block-gen {
            display: flex;
            
            align-items: center;         
            align-self: stretch;         
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 0.95rem;
            font-weight: bold;
            color: #f0e6d3;
            background: linear-gradient(135deg, #2c3e50, #34495e);
            padding: 6px 4px;
            border-radius: 4px;
            margin-left: 6px;
            letter-spacing: 2px;
        }
        
        .block-info {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: flex-end;
            overflow: visible;
            flex: 0 0 auto;
            min-width: 0;
        }
        .block-info .traditional-details {
            width: 130px;
            flex: 0 0 auto;
            height: auto;
            border-left: 1px solid #ddd;
            padding-left: 8px;
            margin-left: 8px;
        }
        .block-info .traditional-details:last-child {
            border-left: none;
            margin-left: 0;
            padding-left: 0;
        }
        
        .block-tree {
            flex: 0 0 auto;
            min-width: 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            border-right: 1px dashed #ccc;
            padding-right: 10px;
            margin-right: 0;
            overflow: visible;
        }
        .block-tree .traditional-tree-svg { max-width: none; max-height: none; height: auto; }
        
        .block-tree-only .traditional-tree-svg { max-width: none; max-height: none; height: auto; }
        
        .traditional-page .block-tree,
        .traditional-page .block-tree-only {
            max-width: 100%;
        }
        .traditional-page .block-tree .traditional-tree-svg,
        .traditional-page .block-tree-only .traditional-tree-svg {
            max-width: 100%;
            max-height: 100%;
        }
        
        
        .paper-screen .block-tree-only .traditional-tree-svg { max-width: 100%; height: auto; }
        
        .paper-screen .block-members { flex-wrap: nowrap; padding-left: 12px; } 
        .paper-screen .block-info { flex-wrap: nowrap; }
        
        .paper-screen .traditional-block-family .block-info .traditional-details { max-width: 260px; }
        .paper-screen .family-info-solo .block-info .traditional-details {
            max-width: none;
            max-height: calc(var(--screen-page-h, 800px) - 140px);
        }
        
        .paper-screen .traditional-screen-page { width: 100%; box-sizing: border-box; overflow: hidden; }
        
        
        .traditional-block-tree {
            flex-direction: row-reverse;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .block-tree-only {
            flex: 0 0 auto;          
            justify-content: flex-end;
            border-right: none;
            padding-right: 0;
            margin-right: 0;
        }
        
        .block-members {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: flex-end;
            overflow: visible;
        }
        .block-members .traditional-details {
            width: 130px;
            flex: 0 0 auto;
            height: auto;
        }
        .traditional-members-divider {
            width: 1px;
            background: #ccc;
            margin: 0 8px;
            flex-shrink: 0;
            align-self: stretch; 
        }
        
        .traditional-page .block-members .traditional-details,
        .traditional-page .block-info .traditional-details {
            width: auto;
        }
        .traditional-page .traditional-details-content,
        .traditional-page .traditional-details-bio {
            min-width: 0;
        }

        

        
        .traditional-page .block-info,
        .traditional-page .block-members {
            justify-content: flex-start;
        }
        
        .traditional-page .block-members {
            flex-wrap: nowrap;
        }
        
        .traditional-page .traditional-block {
            flex: 1 1 auto;
        }

        
        .traditional-page-body {
            position: relative;
            box-sizing: border-box;
            flex: 1;
            min-width: 0;
            height: 100%;
            padding: 12mm 6mm 16mm 10mm; 
            display: flex;
            flex-direction: column;
            align-items: flex-end;   
            gap: 14px;
            overflow: visible;
        }

        
        .traditional-tree-svg {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        .traditional-tree-node {
            fill: #fff;
            stroke: #2c3e50;
            stroke-width: 1.5;
        }
        .traditional-tree-node.male { fill: #f0f7ff; stroke: #2471a3; }
        .traditional-tree-node.female { fill: #fff5f7; stroke: #c0392b; }
        .traditional-tree-line {
            stroke: #2c3e50;
            stroke-width: 1.5;
            fill: none;
        }
        .traditional-tree-foreign {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .traditional-tree-box {
            writing-mode: vertical-rl;
            text-orientation: upright;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
            text-align: center;
            overflow: hidden;
            letter-spacing: 1px;
        }
        .traditional-tree-box .tree-name {
            font-size: 14px;
            font-weight: bold;
        }
        .traditional-tree-box .tree-role {
            font-size: 10px;
            color: var(--muted);
            margin-top: 2px;
        }

        
        .traditional-details {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            height: 100%;
            width: 100%;
        }
        .traditional-details-name {
            writing-mode: vertical-rl;
            text-orientation: upright;
            
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text);
            letter-spacing: 4px;
            padding: 8px 0;
            border-bottom: 2px solid #8e44ad;
            flex-shrink: 0;
            margin: 0;
            
            min-height: 160px;
            
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .traditional-details-intro-label {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-weight: bold;
            color: #8e44ad;
            font-size: 0.95rem;
            flex-shrink: 0;
            letter-spacing: 2px;
            min-height: 60px;
        }
        .traditional-details-content {
            display: flex;
            flex-direction: row-reverse;
            align-items: stretch;
            gap: 8px;
            flex: 1;
            width: 100%;
            min-height: 0;
            overflow: visible;
        }
        .traditional-details-bio {
            writing-mode: vertical-rl;
            text-orientation: upright;
            color: var(--text);
            font-size: 0.95rem;
            line-height: 1.8;
            padding-right: 8px;
            word-break: break-all;
            flex: 1;
            letter-spacing: 1px;
            overflow: visible;
        }
        
        .traditional-details-bio .detail-label {
            color: #8e44ad;
            font-weight: 600;
            margin-right: 4px; 
        }
        
        .traditional-details-bio .tree-ganzhi { color: #8e44ad; }
        
        .traditional-details-bio .spouse-info { color: #c0392b; }
        .traditional-details-intro-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            color: var(--muted);
            font-size: 0.85rem;
            line-height: 1.6;
            padding-right: 8px;
            word-break: break-all;
            flex-shrink: 0;
            width: 80px;
            letter-spacing: 1px;
            overflow: visible;
        }

        
        .traditional-content.paper-A3 { max-width: 297mm; margin: 0 auto; }
        .traditional-content.paper-A4 { max-width: 210mm; margin: 0 auto; }
        .traditional-content.paper-A5 { max-width: 148mm; margin: 0 auto; }
        
        .traditional-content.paper-screen {
            max-width: 100%;
        }
        
        .paper-screen .cover-page,
        .paper-screen .intro-page {
            height: auto;
            min-height: auto;
        }
        
        .paper-screen .intro-page-traditional.intro-page-screen {
            height: auto !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: row-reverse !important; 
            justify-content: flex-start !important; 
            align-items: center !important;          
            gap: 24px !important;
            margin: 0 0 16px !important;             
            overflow: visible !important;
        }
        .paper-screen .intro-page-screen .traditional-screen-title-vertical {
            display: block !important;
            flex: 0 0 auto !important;               
            max-height: none !important;
            overflow: visible !important;
            visibility: visible !important;
        }
        .paper-screen .intro-page-screen .traditional-screen-intro-content-vertical {
            display: block !important;
            flex: 0 0 auto !important;               
            max-height: none !important;
            overflow: visible !important;
            
        }

        
        .cover-page-traditional {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            position: relative;
        }
        .cover-title-vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 3rem;
            letter-spacing: 16px;
            color: var(--text);
            
            border-bottom: none;
            
            padding-left: 16px;
            font-weight: bold;
        }
        .cover-subtitle-vertical {
            writing-mode: vertical-rl;
            font-size: 1.4rem;
            letter-spacing: 6px;
            color: var(--muted);
            margin-top: 12px;
        }
        .cover-revision-date-vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 0.85rem;
            color: var(--muted);
            position: absolute;
            right: 15%;
            bottom: 15%;
            
            white-space: nowrap;
        }
        .intro-page-traditional {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .intro-page-traditional:not(.intro-page-screen) {
            padding: 12mm 6mm 16mm 10mm;
            box-sizing: border-box;
        }
        
        .intro-card {
            background: var(--panel-soft);
            border: 1px solid #e8e2d4;
            border-radius: 6px;
            padding: 6px 8px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 12px;
        }
        
        .intro-title-col {
            writing-mode: vertical-rl;
            text-orientation: upright;
            flex: 0 0 56px;
            box-sizing: border-box;
            display: flex;
            align-items: center;     
            justify-content: center; 
            font-size: 2.2rem;
            font-weight: bold;
            color: var(--text);
            letter-spacing: 6px;
            border-left: 1px solid #e8e2d4;
            padding-left: 6px;
        }
        .intro-content-vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
            text-indent: 0;
            line-height: 1.8;
            font-size: 1.05rem;
            color: var(--text);
            letter-spacing: 1px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            flex: 1;
            min-width: 0;
            
        }
        .intro-content-vertical p {
            margin: 0 0 0 0.8em;
            vertical-align: top;
            display: inline-block;
        }
        .intro-content-vertical div:not(.intro-title-wrap) {
            display: inline-block;
            vertical-align: top;
        }
        
        .intro-title-wrap {
            writing-mode: vertical-rl;
            text-orientation: upright;
            display: inline-flex !important; 
            justify-content: center;
            align-items: center;
            vertical-align: top;
            margin-left: 20px;
            height: auto !important; 
        }
        .layout-toolbar {
            display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
            padding: 6px 10px; background: var(--panel-soft); border-radius: 6px;
            border: 1px solid var(--border); flex-wrap: wrap;
        }
        .layout-toolbar label {
            font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-bottom: 0;
        }
        .layout-toolbar select {
            padding: 4px 8px; font-size: 0.85rem; border: 1px solid var(--border);
            border-radius: 4px; background: var(--panel); cursor: pointer; width: auto;
        }
        .layout-toolbar .layout-preview {
            font-size: 0.8rem; color: #888; margin-left: 8px;
        }
        .layout-toolbar .layout-pages {
            font-size: 0.8rem; color: #8e44ad; font-weight: 600; margin-left: 4px;
        }
        
        .toolbar-text-btn {
            margin-left: 14px; cursor: pointer; white-space: nowrap; user-select: none;
            font-size: 0.85rem; font-weight: 700; color: #1565c0; text-decoration: underline;
            text-underline-offset: 3px;
        }
        .toolbar-text-btn:hover { color: #0d47a1; }
        
        .sushi-content.paper-A3 { max-width: 420mm; width: max-content; margin: 0 auto; }
        .sushi-content.paper-A4 { max-width: 297mm; width: max-content; margin: 0 auto; }
        .sushi-content.paper-A5 { max-width: 210mm; width: max-content; margin: 0 auto; }
        
        .traditional-content.paper-A3 { max-width: 297mm; margin: 0 auto; }
        .traditional-content.paper-A4 { max-width: 210mm; margin: 0 auto; }
        .traditional-content.paper-A5 { max-width: 148mm; margin: 0 auto; }
        .sushi-content.paper-screen, .traditional-content.paper-screen { max-width: 100%; }
        
        #sushiContainer { overflow-x: auto; }
        
        .sushi-page {
            position: relative; padding: 12mm 10mm; background: var(--panel);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 10px;
            
            overflow: hidden;
        }
        .traditional-page {
            position: relative; background: var(--panel);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 10px;
            
            overflow: hidden;
            box-sizing: border-box;
            
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        
        .traditional-page-body {
            background: var(--panel);
        }
        
        
        .traditional-page-content {
            display: block;
        }
        .sushi-page:first-child, .traditional-page:first-child { margin-top: 0; }
        
        
        .paper-screen .sushi-page, .paper-screen .traditional-page { min-height: auto; box-shadow: none; padding: 10px; overflow: visible; }
        
        .cover-page {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; height: 100%;
        }
        .cover-title {
            font-size: 2.8rem; font-weight: bold; color: var(--text);
            letter-spacing: 12px; margin-bottom: 20px;
            
        }
        .cover-subtitle {
            font-size: 1.1rem; color: var(--muted); margin-top: 10px; letter-spacing: 3px;
        }
        .cover-decoration {
            width: 120px; height: 3px; background: linear-gradient(to right, #8e44ad, #3498db);
            margin: 30px auto; border-radius: 2px;
        }
        
        .cover-page > .cover-decoration:first-child {
            display: none;
        }
        
        .cover-revision-date {
            font-size: 0.85rem;
            color: var(--muted);
            letter-spacing: 1px;
            text-align: center;
            margin-top: 20px;
        }
        
        .intro-page {
            padding: 10mm 8mm;
        }
        .intro-page h2 {
            font-size: 1.5rem; color: var(--text); text-align: center;
            border-bottom: 2px solid #8e44ad; padding-bottom: 10px; margin-bottom: 16px;
            letter-spacing: 4px;
        }
        .intro-page .intro-content {
            font-size: 1rem; line-height: 2; color: var(--text); text-indent: 2em;
        }
        
        .page-footer {
            position: absolute; bottom: 5mm; left: 0; right: 0; text-align: center;
            font-size: 0.7rem; color: #bbb;
            
            background: var(--panel); z-index: 5;
            writing-mode: horizontal-tb;
        }
        
        .traditional-content.paper-A3 .traditional-page::after,
        .traditional-content.paper-A4 .traditional-page::after,
        .traditional-content.paper-A5 .traditional-page::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 16mm;
            background: var(--panel);
            z-index: 4;
            pointer-events: none;
        }
        .form-group { margin-bottom: 20px; }
        .form-row { display: flex; gap: 15px; }
        .form-row .form-group { flex: 1; }
        label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text); }
        input, select, textarea {
            width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px;
            font-size: 1rem; transition: border 0.3s;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #3498db; outline: none; box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
        }

        
        .historical-info {
            background: var(--panel-soft); border-left: 4px solid #9b59b6; padding: 15px; margin-top: 10px;
            border-radius: 4px; display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.95rem;
        }
        .historical-item { display: flex; align-items: baseline; gap: 6px; }
        .historical-label { font-weight: 600; color: var(--muted); }
        .historical-value {
            color: var(--primary); font-weight: 600; background: var(--primary-soft); padding: 4px 10px; border-radius: 20px;
        }

        
        .button-group { display: flex; gap: 10px; margin-top: 25px; }
        button {
            padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;
            font-size: 1rem; transition: all 0.3s; flex: 1;
        }
        .btn-primary { background: #3498db; color: white; }
        .btn-primary:hover { background: #2980b9; transform: translateY(-2px); }
        .btn-secondary { background: #2ecc71; color: white; }
        .btn-secondary:hover { background: #27ae60; transform: translateY(-2px); }
        .btn-danger { background: #e74c3c; color: white; }
        .btn-danger:hover { background: #c0392b; transform: translateY(-2px); }
        .btn-warning { background: #f39c12; color: white; }
        .btn-warning:hover { background: #d68910; transform: translateY(-2px); }
        .btn-encrypt { background: var(--primary); color: white; }
        .btn-encrypt:hover { background: var(--primary-dark); transform: translateY(-2px); }
        .btn-decrypt { background: #1abc9c; color: white; }
        .btn-decrypt:hover { background: #16a085; transform: translateY(-2px); }

        
        .profile-action-btn {
            flex: 0 0 auto !important;
            padding: 6px 18px;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 6px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        
        .member-list { max-height: 350px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-top: 20px; }
        .member-item { padding: 12px 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .member-info { display: flex; flex-direction: column; }
        .member-name { font-weight: 600; font-size: 1.1rem; }
        .member-details { font-size: 0.8rem; color: #777; margin-top: 4px; }
        .member-cultural { font-size: 0.8rem; color: var(--primary); margin-top: 2px; font-style: italic; }
        .member-actions button { padding: 4px 8px; font-size: 0.8rem; }

        
        #familyTreeCanvas {
            border: 1px solid var(--border); border-radius: 6px; background-color: var(--panel-soft);
            flex: 1; min-height: 550px; cursor: grab; width: 100%;
        }
        #familyTreeCanvas.dragging { cursor: grabbing; }
        .controls { display: flex; justify-content: space-between; margin-top: 15px; }
        .legend {
            display: flex; gap: 20px; margin-top: 10px; padding: 10px; background: var(--panel-soft);
            border-radius: 6px; font-size: 0.9rem; flex-wrap: wrap;
        }
        .legend-item { display: flex; align-items: center; gap: 5px; }
        .legend-color { width: 20px; height: 20px; border-radius: 4px; }

        .subscription-info { display: flex; gap: 20px; }
        .subscription-status-icon { font-size: 1.4rem; }
        .btn-renew {
            background: #f39c12; color: white; border: none; padding: 8px 24px; border-radius: 30px;
            font-weight: 600; cursor: pointer;
        }

        
        .json-panel { width: 100%; margin-top: 20px; }
        textarea { width: 100%; height: 200px; padding: 15px; font-family: monospace; resize: vertical; }
        .json-controls, .encrypt-controls {
            display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;
        }
        .encrypt-controls { background: var(--panel-soft); padding: 15px; border-radius: 6px; align-items: center; }
        .password-input { flex: 2; min-width: 200px; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; }

        
        .modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);
            display: flex; align-items: center; justify-content: center; z-index: 1000;
        }
        .modal-content {
            background: var(--panel); padding: 30px; border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;
        }
        .plan-list { display: flex; flex-direction: column; gap: 15px; margin: 20px 0; }
        .plan-card {
            border: 1px solid var(--border); border-radius: 8px; padding: 15px; cursor: pointer; transition: all 0.2s;
        }
        .plan-card.selected { border-color: var(--primary); background: var(--primary-soft); }
        .plan-price { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
        .auto-renewal-option { margin: 20px 0; }

        
        #requestModal .modal-content { max-width: 500px; }

        
        #adminPanel {
            background: var(--panel); border-radius: 10px; padding: 20px; margin-top: 20px;
        }
        .admin-tabs {
            display: flex; gap: 10px; margin-bottom: 20px;
        }
        .admin-tab {
            flex: 1 1 0;             
            text-align: center;
            padding: 10px 20px; background: var(--panel-soft); color: var(--text); border-radius: 4px; cursor: pointer;
        }
        .admin-tab.active { background: var(--accent); color: #fff; }
        .admin-content { min-height: 300px; }
        #requestsList .request-item { margin-bottom: 10px; }

        
        @media (max-width: 1100px) {
            .main-content { flex-direction: column; }
            .panel { width: 100%; }
        }

        
        @media (max-width: 768px) {
            body { padding: 10px; }
            .container { gap: 12px; }
            .main-content { gap: 12px; }
            
            .panel, .visualization-panel, .form-panel {
                min-width: 0 !important;
                width: 100% !important;
                flex: 1 1 100% !important;
                padding: clamp(14px, 4vw, 22px);
            }
            .panel-title { font-size: 1.25rem; margin-bottom: 14px; }
            
            .family-tab-nav, .family-subtab-nav { gap: 8px; padding: 6px 4px; margin: 10px 0 8px; }
            .family-tab-btn, .family-subtab-btn { padding: 8px 14px; font-size: 0.88rem; }
            
            .family-tab-btn, .family-subtab-btn, .profile-tab, .admin-tab { flex: 0 0 auto; }
            
            #canvasContainer { min-height: 52vh; }
            
            .toolbar, .chart-toolbar, .action-bar { flex-wrap: wrap; gap: 8px; }
            
            .family-form input, .family-form select, .family-form textarea { width: 100%; }
            .member-actions { flex-wrap: wrap; }
            
            .profile-panel, .cs-panel--page { padding: 12px !important; }
            .profile-tabs, .cs-tabs { flex-wrap: wrap; gap: 6px; }
            .profile-tab, .cs-tab { padding: 8px 12px; font-size: 0.85rem; }

            
            
            .user-header { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
            .user-info { gap: 10px; }
            .user-avatar { width: 40px; height: 40px; font-size: 1.3rem; }
            
            .subscription-banner { align-items: stretch; padding: 12px 14px; }
            .family-name-row { text-align: left; }
            .subscription-row { justify-content: center; }
            .vip-info-group { gap: 12px; justify-content: center; }
            .subscription-info { gap: 12px; justify-content: center; font-size: 0.95rem; }
            
            .form-row { flex-direction: column; gap: 0; }
            .form-row .form-group { width: 100%; }
            
            .password-input { min-width: 0; }
            
            .history-editor-buttons { flex-wrap: wrap; }
            .history-editor-buttons button { flex: 1 1 auto; }
            
            .modal-content { padding: 20px 16px; }
        }
        @media (max-width: 380px) {
            .panel, .visualization-panel { padding: 12px; }
            .family-tab-btn, .family-subtab-btn { padding: 7px 10px; font-size: 0.82rem; }
            .panel-title { font-size: 1.1rem; }
            #canvasContainer { min-height: 46vh; }
            
            .user-header { flex-direction: column; align-items: stretch; }
            .user-info { justify-content: flex-start; }
            .logout-btn { width: 100%; }
            
            .subscription-info, .vip-info-group { font-size: 0.9rem; gap: 8px; }
            .subscription-status-icon { font-size: 1.2rem; }
        }
		
		
		
		.member-actions {
			display: flex !important;
			align-items: center;
			gap: 5px;
		}

		
		.btn-warning {
			display: inline-block !important;
			visibility: visible !important;
			opacity: 1 !important;
			padding: 6px 12px;
			font-size: 0.9rem;
			white-space: nowrap;
		}

		
		.member-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px;
		}

		.member-info {
			flex: 1;
			min-width: 200px;
		}

		.member-actions {
			flex-shrink: 0;
		}
		
		
		
		
		.member-detail-panel {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			border-radius: 12px;
			box-shadow: 0 8px 30px rgba(0,0,0,0.2);
			width: 400px;
			max-width: 90%;
			z-index: 10001;
			padding: 20px;
		}
		.member-detail-header {
			border-bottom: 1px solid #eee;
			padding-bottom: 10px;
			margin-bottom: 15px;
		}
		.member-detail-content {
			color: #1a1a1a;   
		}
		.member-detail-content table {
			width: 100%;
			border-collapse: collapse;
		}
		.member-detail-content td {
			padding: 8px;
			border-bottom: 1px solid #f0f0f0;
		}
		.member-detail-content td:first-child {
			font-weight: 600;
			width: 100px;
			background: #f9f9f9;
		}
		#closeDetailPanel {
			font-size: 24px;
			color: #999;
		}
		#closeDetailPanel:hover { color: #333; }
		
		.almond-table {
			table-layout: fixed;   
			width: 100%;
		}
		.almond-table td {
			background-color: #FAF9DE !important; 
			color: #000000;                                
			text-align: left;                              
			word-break: break-word;
			overflow-wrap: anywhere;
			white-space: normal;   
			vertical-align: top;
		}
		
		
		.almond-table .bio-row td {
			width: auto !important;
		}
		.bio-block { width: 100%; }
		.bio-label {
			font-weight: 600;
			color: #1a1a1a;
			text-align: left;
			margin-bottom: 6px;
		}
		.bio-text {
			text-align: left;
			white-space: pre-wrap;
			word-break: break-word;
			overflow-wrap: anywhere;
			line-height: 1.7;
			width: 100%;
		}
		

		
		.member-detail-panel {
			background: linear-gradient(160deg, #fffdf5 0%, #fbf3df 100%);  
			border: 1px solid #e7d9b0;
			border-radius: 18px;
			box-shadow: 0 12px 40px rgba(120,90,30,0.25);
			width: 420px;
			max-width: 92%;
			padding: 0;
			
			flex-direction: column;
			overflow: hidden;
		}
		
		.member-detail-scroll {
			flex: 1 1 auto;
			min-height: 0;           
			max-height: 72vh;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
		.member-detail-header { flex: 0 0 auto; }
		.member-detail-panel .member-bg {
			position: absolute;
			inset: 0;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			opacity: 0.5;
			filter: saturate(1.25) contrast(1.05);
			pointer-events: none;
			z-index: 0;
			user-select: none;
			border-radius: 18px;
		}
		.member-detail-panel.male .member-bg::before,
		.member-detail-panel.female .member-bg::before { content: none; }
		
		.member-sunlight {
			position: absolute;
			top: 0;
			left: 0;
			width: 480px;
			height: 480px;
			pointer-events: none;
			
			z-index: 5;
			display: none;
			
			overflow: hidden;
			
			background: radial-gradient(circle at 0% 0%,
				rgba(255,234,140,0.92) 0%,
				rgba(255,206,80,0.5) 22%,
				rgba(255,206,80,0) 60%);
			
			animation: sunGlow 5s ease-in-out infinite;
		}
		.member-sunlight::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			
			background:
				repeating-conic-gradient(from 205deg at 0% 0%,
					rgba(255,168,32,0.9) 0deg 2deg,
					rgba(255,168,32,0) 2deg 9deg),
				repeating-conic-gradient(from 209.5deg at 0% 0%,
					rgba(255,200,80,0.85) 0deg 1.8deg,
					rgba(255,200,80,0) 1.8deg 9deg),
				repeating-conic-gradient(from 214deg at 0% 0%,
					rgba(255,220,110,0.78) 0deg 1.6deg,
					rgba(255,220,110,0) 1.6deg 9deg),
				repeating-conic-gradient(from 218.5deg at 0% 0%,
					rgba(255,236,150,0.7) 0deg 1.5deg,
					rgba(255,236,150,0) 1.5deg 9deg);
			-webkit-mask-image: radial-gradient(circle at 0% 0%, #000 3%, rgba(0,0,0,0.75) 45%, transparent 92%);
			mask-image: radial-gradient(circle at 0% 0%, #000 3%, rgba(0,0,0,0.75) 45%, transparent 92%);
			
			transform-origin: 0% 0%;
			animation: sunSpin 12s linear infinite, sunShimmer 5s ease-in-out infinite;
		}
		
		.member-sunlight::after {
			content: "";
			position: absolute;
			top: -48px;
			left: -48px;
			width: 96px;
			height: 96px;
			border-radius: 50%;
			background: radial-gradient(circle,
				rgba(255,255,236,0.95) 0%,
				rgba(255,224,130,0.5) 42%,
				rgba(255,224,130,0) 70%);
			animation: sunCore 5s ease-in-out infinite;
		}
		@keyframes sunGlow {
			0%, 100% { opacity: 0.22; filter: brightness(1); }
			50%      { opacity: 1;    filter: brightness(1.25); }
		}
		@keyframes sunShimmer {
			0%, 100% { opacity: 0.4;  filter: brightness(1.1); }
			50%      { opacity: 1;    filter: brightness(1.6); }
		}
		@keyframes sunSpin {
			from { transform: rotate(0deg); }
			to   { transform: rotate(360deg); }
		}
		@keyframes sunCore {
			0%, 100% { opacity: 0.06; transform: scale(0.7); }
			50%      { opacity: 1;    transform: scale(1.15); }
		}
		
		@media (prefers-reduced-motion: reduce) {
			.member-sunlight,
			.member-sunlight::before,
			.member-sunlight::after { animation: none; }
			.member-sunlight { opacity: 0.9; }
		}
		.member-detail-panel:not(.deceased) .member-sunlight { display: block; }
		
		.member-detail-panel.deceased {
			background: linear-gradient(160deg, #ededed 0%, #d6d6d6 100%);
			border-color: #bdbdbd;
			box-shadow: 0 12px 40px rgba(0,0,0,0.22);
		}
		.member-detail-panel.deceased .member-bg {
			filter: grayscale(1) brightness(0.5) contrast(0.95);
			opacity: 0.22;
		}
		.member-detail-panel.deceased .member-detail-header {
			border-bottom-color: #cfcfcf;
			background: rgba(255,255,255,0.38);
		}
		.member-detail-header, .member-detail-content { position: relative; z-index: 1; }
		.member-detail-header {
			border-bottom: 1px solid #ecdcae;
			padding: 16px 22px 10px;
			margin-bottom: 0;
			background: rgba(255,255,255,0.5);
		}
		.member-detail-content { padding: 16px 22px 24px; }
		.member-detail-content table { background: transparent; }
		.member-detail-content td:first-child { background: rgba(255,255,255,0.6); }
		.almond-table td { background-color: rgba(255,255,255,0.45) !important; }
		
		
		.member-actions {
			display: flex;
			gap: 5px;
			flex-wrap: wrap;
		}
		
		
		
		.subscription-banner {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: var(--panel-soft); 
			border-left: 6px solid var(--border);
			padding: 12px 20px;
			border-radius: 8px;
			margin-bottom: 20px;
			transition: background-color .3s, border-color .3s;
		}
		
		.subscription-banner.sb-trial { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); }
		.subscription-banner.sb-active { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--panel-soft)); }
		.subscription-banner.sb-active-warn { border-left-color: #f39c12; background: color-mix(in srgb, #f39c12 14%, var(--panel-soft)); }
		.subscription-banner.sb-expired { border-left-color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, var(--panel-soft)); }
		.subscription-banner.sb-frozen { border-left-color: #8e6e3b; background: color-mix(in srgb, #8e6e3b 12%, var(--panel-soft)); }

		.family-name-row {
			width: 100%;
			text-align: center;
			margin-bottom: 12px;
		}

		.subscription-row {
			display: flex;
			justify-content: flex-end; 
			width: 100%;
		}

		.vip-info-group {
			display: flex;
			align-items: center;
			gap: 20px; 
			flex-wrap: wrap; 
		}

		.subscription-status-icon {
			font-size: 1.4rem;
		}

		.subscription-info {
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
		}

		.btn-renew {
			background: #f39c12;
			color: white;
			border: none;
			padding: 8px 24px;
			border-radius: 30px;
			font-weight: 600;
			cursor: pointer;
		}
		
		
		
		.super-tabs {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
			flex-wrap: wrap;
		}
		.super-tab {
			padding: 10px 20px;
			background: #f0f0f0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		.super-tab.active {
			background: #8e44ad;
			color: white;
		}
		.super-content table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.9rem;
		}
		.super-content th, .super-content td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: left;
		}
		.super-content th {
			background: #f2f2f2;
		}
		
		
		.family-freeze-checkbox {
			width: 16px;
			height: 16px;
			margin: 0;
			flex-shrink: 0;
		}

		
		.status-frozen {
			color: #e74c3c;
		}
		.status-normal {
			color: #2ecc71;
		}
		
		
		.user-freeze-checkbox {
			width: 16px;
			height: 16px;
			margin: 0;
			flex-shrink: 0;
		}
		
		
		
		
		#registerModule h3,
		#forgotModule h3 {
			text-align: center;
			margin-bottom: 20px;
			color: #2c3e50;
		}

		
		#loginModule, #registerModule, #forgotModule {
			transition: opacity 0.2s;
		}
		
		.login-type {
			display: flex;
			flex-wrap: nowrap;          
			justify-content: center;    
			gap: 20px;                  
			margin-bottom: 20px;
		}

		.login-type label {
			display: flex;
			align-items: center;        
			white-space: nowrap;        
			cursor: pointer;
		}

		
		@media (max-width: 768px) {
			.auth-panel {
				max-width: 100%;
				margin: 16px auto;
				padding: clamp(18px, 5vw, 26px);
				border-radius: 12px;
			}
			.auth-panel h2 {
				font-size: clamp(1.25rem, 5vw, 1.6rem);
				margin-bottom: 16px;
			}
			
			.login-type {
				flex-wrap: wrap;
				justify-content: center;
				gap: 8px 14px;
				overflow-x: visible;
			}
			.login-type label {
				white-space: normal;
				font-size: 0.9rem;
			}
			.auth-input-group { margin-bottom: 16px; }
			.auth-input-group input {
				padding: 12px 14px;
				font-size: 1rem;
			}
			.auth-btn {
				padding: 12px 20px;
				font-size: 1rem;
				margin-bottom: 12px;
			}
		}

		
		@media (max-width: 380px) {
			.auth-panel { padding: 16px 12px; border-radius: 10px; }
			.login-type { gap: 6px 10px; }
			.login-type label { font-size: 0.82rem; }
			.auth-input-group input { padding: 11px 12px; }
		}

		
		@media (max-width: 480px) {
			.auth-input-group > div[style*="display: flex"] {
				gap: 8px !important;
			}
			.auth-input-group > div[style*="display: flex"] input { flex: 2 1 0; min-width: 0; }
			.auth-input-group > div[style*="display: flex"] button { flex: 1 1 0; min-width: 0; padding: 10px 8px !important; }
		}
		
		#forgotModule div[style*="margin-bottom: 15px"] {
			display: flex;
			align-items: center;
			gap: 15px;
		}
		
		
		#registerModule > div:first-child {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-bottom: 15px;
		}
		
		
		
		.era-convert {
			display: flex;
			gap: 5px;
			margin-bottom: 5px;
			align-items: center;
		}
		.era-convert input {
			flex: 2;
			padding: 6px 10px;
			border: 1px solid #ddd;
			border-radius: 4px;
		}
		.era-convert button {
			flex: 1;
			padding: 6px 10px;
		}
        .era-convert span {
            flex: 1;
            text-align: center;
            background: var(--panel-soft);
            border-radius: 4px;
            padding: 6px 0;
        }
		
		
		
		#agreementModal label {
			display: flex;           
			align-items: center;     
			gap: 8px;                
			white-space: nowrap;     
			width: 100%;             
		}

		#agreementModal input[type="checkbox"] {
			flex-shrink: 0;          
			width: 16px;             
			height: 16px;            
		}
		
		
		#agreementModal hr {
			margin: 20px 0; 
		}

		#agreementModal h4 {
			margin-top: 0;  
		}

		#agreementModal h4:first-of-type {
			margin-top: 0; 
		}

		#agreementModal hr + h4 {
			margin-top: 2.5em; 
		}
		
		
		#agreeBtn:disabled {
			background-color: #cccccc;      
			border: 1px solid #aaaaaa;      
			color: #666666;                 
			cursor: not-allowed;             
			opacity: 0.7;                    
		}

		
		#agreeBtn:not(:disabled) {
			background-color: #3498db;       
			border: none;
			color: white;
			transition: background 0.2s;     
		}

		#agreeBtn:not(:disabled):hover {
			background-color: #2980b9;       
			cursor: pointer;
		}

		
		#encryptJson:disabled, #decryptJson:disabled {
			background-color: #cccccc !important;
			border: 1px solid #aaaaaa !important;
			color: #666666 !important;
			opacity: 0.7;
			cursor: not-allowed !important;
		}
		
		
		
		#authPanel { display: none; }
		
		
		
		#canvasContainer {
		  flex: 1;                     
		  width: 100%;
		  position: relative;          
		  overflow: hidden;
		  background: var(--panel-soft);  
		}

		#familyTreeCanvas {
		  display: block;
		  width: 100%;
		  height: 100%;
		  
		}

		#fullscreenBtn {
		  position: absolute;
		  bottom: 15px;
		  right: 15px;
		  z-index: 100;
		  width: 40px;
		  height: 40px;
		  border: none;
		  border-radius: 50%;
		  background: rgba(0, 0, 0, 0.6);
		  color: white;
		  font-size: 20px;
		  cursor: pointer;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  transition: background 0.2s;
		}
		#fullscreenBtn:hover {
		  background: rgba(0, 0, 0, 0.8);
		}
		
		
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		
		.profile-tabs {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			background: var(--panel);          
			border-radius: 12px 12px 0 0;
			padding: 6px 6px 0;
			border-bottom: 2px solid var(--border, #eee);
			margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		}
		.profile-tab {
			flex: 1 1 0;               
			text-align: center;
			padding: 10px 18px;
			font-size: 0.95rem;
			color: var(--muted, #666);
			cursor: pointer;
			border-bottom: 3px solid transparent;
			border-radius: 8px 8px 0 0;
			white-space: nowrap;
			transition: color 0.2s, background 0.2s;
		}
		.profile-tab i { margin-right: 4px; }
		
		.profile-tab:hover { color: var(--accent); background: var(--accent-soft); }
		.profile-tab.active {
			color: var(--accent);
			font-weight: bold;
			border-bottom-color: var(--accent);
			background: var(--accent-soft);
		}
		@media (max-width: 768px) {
			.profile-tabs { overflow-x: auto; flex-wrap: nowrap; }
			.profile-tab { padding: 10px 12px; font-size: 0.85rem; }
		}

		
		.notice-item {
			border-left: 4px solid #8e44ad;
			background: var(--panel-soft);
			border-radius: 8px;
			padding: 12px 14px;
			margin-bottom: 12px;
		}
		.notice-head {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 10px;
			flex-wrap: wrap;
			margin-bottom: 6px;
		}
		.notice-title { font-weight: bold; color: var(--text); }
		.notice-badge {
			display: inline-block;
			margin-left: 6px;
			min-width: 18px;
			padding: 0 5px;
			background: #e74c3c;
			color: #fff;
			font-size: 0.7rem;
			line-height: 18px;
			text-align: center;
			border-radius: 9px;
			font-weight: normal;
		}
		.notice-time { font-size: 0.8rem; color: var(--muted); }
		.notice-time-wrap { display: flex; align-items: center; gap: 8px; flex: none; }
		.notice-del {
			flex: 0 0 auto !important;
			border: none; background: transparent; color: #bbb;
			cursor: pointer; font-size: 0.8rem; padding: 2px 5px; border-radius: 6px;
			line-height: 1; transition: color .15s, background .15s;
		}
		.notice-del:hover { color: #e74c3c; background: #fbeaea; }
		.notice-content {
			font-size: 0.9rem;
			color: var(--text);
			line-height: 1.7;
			white-space: pre-wrap;
			word-break: break-word;
		}

		
		.cs-panel {
			position: fixed;
			right: 24px;
			bottom: 92px;            
			width: 380px;
			max-width: calc(100vw - 32px);
			max-height: 72vh;
			background: var(--panel);
			border-radius: 12px;
			box-shadow: 0 12px 40px rgba(0,0,0,0.28);
			display: flex;
			flex-direction: column;
			overflow: hidden;
			z-index: 9991;          
		}
		
		.cs-panel-header {
			position: relative;
			text-align: center;
			padding: 16px;
			background: var(--panel);
			border-bottom: 1px solid var(--border, #eee);
			flex: 0 0 auto;
		}
		
		.cs-panel-title {
			margin: 0;
			color: #2c3e50;
			font-size: 1.3rem;
			font-weight: 600;
		}
		.cs-panel-title i { margin-right: 6px; }
		
		.cs-back {
			display: none;
			margin-bottom: 16px;
		}
		
		.cs-backdrop {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.35);
			z-index: 9900;
			display: none;
		}
		.cs-backdrop.show { display: block; }
		
		.cs-panel:not(.cs-panel--page) .cs-feedback-box { display: none; }
		
		.cs-panel:not(.cs-panel--page) .cs-panel-footer { display: none; }
		
		.cs-panel.cs-panel--page {
			
			top: 0; left: 0; right: 0; bottom: 0;
			width: 100%; max-width: 100%;
			height: auto; max-height: none;
			border-radius: 0;
			background: var(--bg);   
			z-index: 9995;          
		}
		
		
		.cs-panel.cs-panel--page .cs-panel-header {
			background: transparent;
			border-bottom: none;
			padding: 40px 16px 16px;
			max-width: 820px;
			margin: 0 auto;
		}
		.cs-panel.cs-panel--page .cs-back { display: inline-flex; }
		.cs-panel.cs-panel--page .cs-panel-body {
			max-width: 820px;
			margin: 0 auto;
			padding: 8px 12px 0;
			
			flex: 0 0 auto;
			overflow: visible;
		}
		.cs-panel.cs-panel--page {
			display: block;            
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
		.cs-panel.cs-panel--page .cs-feedback-box { border-radius: 0; }
		.cs-panel-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
		
		.cs-panel .cs-tabs {
			background: var(--panel);
		}
		.cs-panel .cs-body {
			background: var(--panel);
		}
		
		.cs-panel .cs-bot-faq-list { width: 100%; }
		
		.cs-feedback-box {
			background: var(--panel);
			border-radius: 0 0 12px 12px;
			padding: 16px;
			border-top: 1px solid var(--border, #eee);
		}
		.cs-feedback-box h3 { color: var(--accent); margin-bottom: 15px; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
		.cs-fb-title { display: inline-flex; align-items: center; min-width: 0; }
		.cs-feedback-box h3 i { margin-right: 6px; }
		
		.cs-fb-del-all {
			flex: 0 0 auto !important;
			display: inline-flex;
			align-items: center;
			gap: 4px;
			border: 1px solid var(--border);
			background: transparent;
			color: var(--muted);
			cursor: pointer;
			font-size: 0.75rem;
			font-weight: 500;
			line-height: 1.2;
			padding: 4px 10px;
			border-radius: 999px;
			white-space: nowrap;
			transition: background 0.2s, color 0.2s, border-color 0.2s;
		}
		.cs-fb-del-all i { margin-right: 0; font-size: 0.72rem; }
		.cs-fb-del-all:hover { background: #fdecea; color: #e74c3c; border-color: #e74c3c; }
		.cs-feedback-box p { color: #999; text-align: center; padding: 20px; }
		
		.cs-fb-item {
			border: 1px solid var(--border, #eee);
			border-radius: 8px;
			padding: 12px 14px;
			margin-bottom: 12px;
			background: var(--panel-soft);
		}
		
		.cs-fb-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-bottom: 6px;
			width: 100%;
		}
		.cs-fb-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
		.cs-fb-type {
			background: var(--accent-soft);
			color: var(--accent);
			font-size: 0.78rem;
			padding: 2px 8px;
			border-radius: 10px;
		}
		.cs-fb-time { font-size: 0.78rem; color: #999; }
		.cs-fb-msg {
			font-size: 0.9rem;
			color: #333;
			line-height: 1.6;
			white-space: pre-wrap;
			word-break: break-word;
		}
		.cs-fb-reply {
			margin-top: 10px;
			padding: 10px 12px;
			background: #f4f9f4;
			border-left: 3px solid #27ae60;
			border-radius: 6px;
			font-size: 0.88rem;
			color: #2c3e50;
			line-height: 1.6;
			white-space: pre-wrap;
			word-break: break-word;
		}
		.cs-fb-reply strong { color: #27ae60; margin-right: 8px; }
		.cs-fb-pending {
			margin-top: 8px;
			font-size: 0.8rem;
			color: #f39c12;
		}
		
		.cs-fb-list {
			max-height: 52vh;
			overflow-y: auto;
			padding-right: 4px;
		}
		
		.cs-conv-box {
			background: var(--panel, #fff);
			color: var(--text, #2c3e50);
			max-width: 480px;
			text-align: left;
			padding: 22px 22px 18px;
		}
		.cs-conv-box .wb-m-title { text-align: left; color: var(--accent); margin-bottom: 14px; }
		.cs-conv-thread { max-height: 46vh; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
		.cs-conv-row { display: flex; flex-direction: column; margin-bottom: 12px; }
		.cs-conv-bubble {
			max-width: 85%;
			padding: 9px 12px;
			border-radius: 12px;
			font-size: 0.85rem;
			line-height: 1.55;
			white-space: pre-wrap;
			word-break: break-word;
		}
		.cs-conv-me { align-items: flex-end; }
		.cs-conv-me .cs-conv-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
		.cs-conv-admin { align-items: flex-start; }
		.cs-conv-admin .cs-conv-bubble { background: var(--panel-soft); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
		.cs-conv-admin .cs-conv-wait { color: var(--muted); font-style: italic; }
		.cs-conv-meta { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
		.cs-conv-input { border-top: 1px solid var(--border); padding-top: 12px; }
		.cs-conv-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 10px; }

		
		.cs-fab {
			position: fixed;
			right: 24px;
			bottom: 24px;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			border: none;
			background: linear-gradient(135deg, #8e44ad, #9b59b6);
			color: #fff;
			font-size: 24px;
			cursor: grab;
			box-shadow: 0 4px 14px rgba(142,68,173,0.45);
			z-index: 9990;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 0.2s, box-shadow 0.2s;
			touch-action: none;          
		}
		.cs-fab:hover {
			transform: scale(1.08);
			box-shadow: 0 6px 20px rgba(142,68,173,0.6);
		}
		.cs-fab--dragging {
			cursor: grabbing;
			transition: none !important;
			transform: none !important;  
		}

		
		.cs-panel-footer {
			margin-top: 24px;
			padding-top: 14px;
			border-top: 1px solid #eee;
			text-align: center;
			font-size: 12px;
			color: #666;
		}
		.cs-panel-footer a { color: #666; text-decoration: none; }
		
		.cs-footer-line { line-height: 1.7; font-size: 12px; color: #666; }

		
		
		.cs-tabs {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			background: var(--panel);
			border-radius: 12px 12px 0 0;
			padding: 6px 6px 0;
			border-bottom: 2px solid var(--border, #eee);
			margin-bottom: 16px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		}
		.cs-tab {
			flex: var(--cs-tab-flex, 1);
			text-align: center;
			padding: 10px 12px;
			font-size: 0.9rem;
			color: var(--muted, #666);
			cursor: pointer;
			border-bottom: 3px solid transparent;
			border-radius: 8px 8px 0 0;
			white-space: nowrap;
			transition: color 0.2s, background 0.2s;
		}
		
		.cs-tab:hover { color: var(--accent); background: var(--accent-soft); }
		.cs-tab.active {
			color: var(--accent);
			font-weight: bold;
			border-bottom-color: var(--accent);
			background: var(--accent-soft);
		}
		.cs-body { padding: 16px; }

		
		.cs-bot-body {
			display: flex;
			flex-direction: column;
			height: 380px;
			padding: 10px;
			gap: 10px;
			box-sizing: border-box;
		}
		.cs-bot-msg {
			flex: 1 1 auto;
			overflow-y: auto;
			font-size: 0.85rem;
			line-height: 1.6;
			color: #333;
			padding-right: 4px;
		}
		.cs-bot-msg > div {
			margin: 6px 0;
			padding: 8px 10px;
			border-radius: 10px;
			max-width: 92%;
			white-space: pre-wrap;
			word-break: break-word;
		}
		
		.cs-bot-msg > div.bot { background: var(--panel-soft, #f1f1f5); color: var(--text, #222); }
		.cs-bot-msg > div.user { background: transparent; color: var(--text, #333); margin-left: auto; text-align: right; }
		.cs-bot-msg > div.action { background: transparent; padding: 0; }
		.cs-bot-faq {
			margin: 4px 0;
			align-self: flex-start;
			max-width: 100%;
		}
		
		.cs-bot-faq-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: flex-start;
			gap: 6px 18px;
			width: 100%;
			max-width: 100%;
		}
		.cs-bot-faq-item {
			display: inline-flex;
			flex: 0 0 auto;
			align-items: baseline;
			background: none;
			border: none;
			padding: 2px 0;
			font-size: 0.82rem;
			color: var(--accent);
			text-decoration: underline;
			text-underline-offset: 3px;
			text-decoration-thickness: 1px;
			cursor: pointer;
			text-align: left;
			font-family: inherit;
			line-height: 1.5;
			white-space: normal;
			word-break: break-word;
			transition: color .15s;
		}
		.cs-bot-faq-item:hover { color: var(--accent-dark); }
		.cs-bot-input-row { display: flex; gap: 6px; flex: 0 0 auto; }
		.cs-bot-input {
			flex: 1 1 auto;
			min-width: 0;
			padding: 8px 10px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 0.9rem;
			font-family: inherit;
		}
		.cs-bot-send { flex: 0 0 auto; padding: 8px 16px; }
		.cs-bot-action-btn {
			border: 1px solid #8e44ad;
			color: #8e44ad;
			background: #fff;
			padding: 6px 14px;
			border-radius: 16px;
			cursor: pointer;
			font-size: 0.8rem;
		}
		.cs-bot-action-btn:hover { background: #8e44ad; color: #fff; }

		.cs-form label {
			display: block;
			font-size: 0.85rem;
			color: var(--muted);
			margin: 10px 0 4px;
		}
		.cs-form input, .cs-form textarea {
			width: 100%;
			box-sizing: border-box;
			padding: 8px 10px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 0.9rem;
			font-family: inherit;
		}
		.cs-form textarea { resize: vertical; }
		.cs-form .btn-primary {
			margin-top: 14px;
			width: 100%;
		}
		
		.cc-upload-log {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 10px;
			cursor: pointer;
			color: var(--text);
			font-weight: normal;
			font-size: 13px;
			line-height: 1.4;
			user-select: none;
		}
		.cc-upload-log input[type="checkbox"] {
			margin: 0;
			width: 15px;
			height: 15px;
			flex: 0 0 auto;
			cursor: pointer;
		}
		.cc-upload-log span { display: inline-block; }

.toc-page {
    display: block;
    overflow: hidden;
    background: var(--panel);   
}
.toc-inner {
    padding: 40px 48px;
    height: 100%;
    box-sizing: border-box;
    color: var(--text);         
}
.toc-title {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);   
    letter-spacing: 4px;
    color: var(--text);                       
}
.toc-gen {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);     
    margin: 16px 0 4px;
}
.toc-gen-name::before {
    content: '【';
}
.toc-gen-name::after {
    content: '】';
}
.toc-member {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    padding-left: 26px;
    margin: 5px 0;
}
.toc-link {
    color: var(--text);          
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.toc-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.toc-dots {
    flex: 1;
    border-bottom: 1px dotted var(--border);   
    margin: 0 8px;
    transform: translateY(-3px);
}
.toc-mem-page {
    color: var(--muted);         
    white-space: nowrap;
}

#print-root { display: none !important; }

@media print {
  html, body {
    background: #fff !important;
    margin: 0 !important; padding: 0 !important;
  }
  
  body > *:not(#print-root) {
    display: none !important;
  }
  #print-root {
    display: block !important;
    position: static !important;
    margin: 0 !important; padding: 0 !important;
    width: 100% !important; height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  
  #print-root #traditionalContainer,
  #print-root #sushiContainer,
  #print-root #traditionalContent,
  #print-root #sushiContent,
  #print-root .traditional-content,
  #print-root .sushi-content {
    transform: none !important;
    max-width: none !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    background: #fff !important;
    height: auto !important; overflow: visible !important;
    box-shadow: none !important;
  }
  
  #print-root .sushi-page, #print-root .traditional-page, #print-root .traditional-page-body,
  #print-root .page-footer, #print-root .traditional-page::after,
  #print-root .traditional-block, #print-root .intro-card,
  #print-root .sushi-member-row, #print-root .sushi-tree-wrap,
  #print-root .toc-page {
    background: #fff !important;
  }
  #print-root .sushi-member-name, #print-root .sushi-member-detail,
  #print-root .traditional-tree-box, #print-root .traditional-details-name,
  #print-root .traditional-details-bio, #print-root .traditional-details-intro-text,
  #print-root .cover-title, #print-root .cover-subtitle, #print-root .cover-revision-date,
  #print-root .cover-title-vertical, #print-root .cover-subtitle-vertical,
  #print-root .cover-revision-date-vertical, #print-root .intro-title-col,
  #print-root .intro-content-vertical,
  #print-root .intro-page h2, #print-root .intro-page .intro-content,
  #print-root .sushi-screen-title, #print-root .sushi-screen-intro,
  #print-root .traditional-screen-title-vertical,
  #print-root .traditional-screen-intro-content-vertical,
  #print-root .toc-title, #print-root .toc-gen, #print-root .toc-link,
  #print-root .toc-mem-page, #print-root .toc-inner {
    color: #2c3e50 !important;
  }
  #print-root .traditional-tree-box .tree-role,
  #print-root .traditional-details-intro-text {
    color: #666 !important;
  }
  
  #print-root .layout-toolbar,
  #print-root .layout-toolbar * {
    display: none !important;
  }
  
  #print-root #traditionalContent > *,
  #print-root #sushiContent > *,
  #print-root .traditional-content > *,
  #print-root .sushi-content > * {
    break-after: page; page-break-after: always;
    box-shadow: none !important; margin: 0 !important;
  }
  #print-root #traditionalContent > *:last-child,
  #print-root #sushiContent > *:last-child,
  #print-root .traditional-content > *:last-child,
  #print-root .sushi-content > *:last-child {
    break-after: auto; page-break-after: auto;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

.family-tab-nav {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px;
    padding: 6px; background: #f4f8f5; border-radius: 14px; border: 1px solid #e3efe7;
    align-items: center;
}
.family-tab-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px;
    flex: 1 1 0;                 
    border: 1px solid transparent; background: transparent; color: #4a5b51;
    border-radius: 10px; cursor: pointer; font-size: .94rem; font-weight: 600;
    transition: all .15s; font-family: inherit; line-height: 1.2;
}
.family-tab-btn:hover { background: var(--primary-soft); color: var(--primary-dark); }
.family-tab-btn.active {
    background: linear-gradient(135deg, var(--nav-active), var(--primary-dark)); color: #fff;
    box-shadow: 0 3px 10px var(--shadow);
}

.family-subtab-nav {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px;
    padding: 6px; background: #f0f6fc; border-radius: 14px; border: 1px solid #dcebf7;
    align-items: center;
}
.family-subtab-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px;
    flex: 1 1 0;                 
    border: 1px solid transparent; background: transparent; color: #2c6aa0;
    border-radius: 10px; cursor: pointer; font-size: .94rem; font-weight: 600;
    transition: all .15s; font-family: inherit; line-height: 1.2;
}
.family-subtab-btn:hover { background: var(--accent-soft, #e1eefb); color: var(--accent-dark); }
.family-subtab-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
    box-shadow: 0 3px 10px var(--shadow);
}

.family-tab-nav, .family-subtab-nav { position: relative; }
.family-tab-indicator, .family-subtab-indicator {
    position: absolute; bottom: 6px; left: 0; height: 3px; width: 0;
    border-radius: 3px; pointer-events: none; opacity: 0;
    transition: left .3s ease, width .3s ease, opacity .2s;
}
.family-tab-indicator { background: linear-gradient(90deg, var(--nav-active), var(--primary)); }
.family-subtab-indicator { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }

#adminPanel .admin-tabs { display: none; }

html { font-size: clamp(13.5px, 0.24vw + 12.6px, 16px); }

body { padding: clamp(10px, 0.98vw + 6.3px, 20px); }
.container { gap: clamp(12px, 0.78vw + 9.1px, 20px); }
.main-content { gap: clamp(12px, 0.78vw + 9.1px, 20px); }

.panel, .visualization-panel, .form-panel { padding: clamp(14px, 0.88vw + 10.7px, 25px); }
#familySelectorPanel { padding: clamp(16px, 1.2vw + 11.5px, 30px); }

button { padding: clamp(9px, 0.29vw + 7.9px, 12px) clamp(16px, 0.78vw + 13.1px, 24px); }
input, select, textarea { padding: clamp(10px, 0.2vw + 9.3px, 12px) clamp(12px, 0.29vw + 10.9px, 15px); }
.form-group { margin-bottom: clamp(14px, 0.78vw + 11.1px, 20px); }

.user-header { padding: clamp(12px, 0.68vw + 9.5px, 16px) clamp(16px, 0.68vw + 13.5px, 24px); }
.user-avatar { width: clamp(38px, 0.78vw + 35.1px, 48px); height: clamp(38px, 0.78vw + 35.1px, 48px); font-size: clamp(1.25rem, 0.39vw + 1.16rem, 1.6rem); }

.subscription-banner { padding: clamp(10px, 0.49vw + 8.2px, 12px) clamp(14px, 0.59vw + 11.8px, 20px); }
.btn-renew { padding: clamp(7px, 0.2vw + 6.3px, 8px) clamp(18px, 0.59vw + 15.8px, 24px); }

.family-tab-nav, .family-subtab-nav { gap: clamp(8px, 0.2vw + 7.3px, 10px); padding: clamp(5px, 0.1vw + 4.6px, 6px); }
.family-tab-btn, .family-subtab-btn { padding: clamp(8px, 0.2vw + 7.3px, 10px) clamp(14px, 0.39vw + 12.5px, 18px); }

.family-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 0.59vw + 11.8px, 20px); }
.family-card { padding: clamp(14px, 0.59vw + 11.8px, 20px); }

.modal-content { padding: clamp(18px, 0.88vw + 14.7px, 30px); }
#requestModal .modal-content, .modal-content { max-width: min(92vw, 500px); }

.plan-card { padding: clamp(12px, 0.29vw + 10.9px, 15px); }
.plan-price { font-size: clamp(1.25rem, 0.24vw + 1.2rem, 1.5rem); }

.family-history-bar { padding: clamp(10px, 0.49vw + 8.2px, 12px) clamp(14px, 0.59vw + 11.8px, 20px); }
.toolbar, .chart-toolbar { gap: clamp(8px, 0.2vw + 7.3px, 10px); }

.family-tab-nav, .family-subtab-nav,
.profile-tabs, .cs-tabs, .cs-panel .cs-tabs,
.admin-tabs, .super-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}
.family-tab-btn, .family-subtab-btn,
.profile-tab, .cs-tab, .admin-tab, .super-tab {
    white-space: nowrap;
    flex: 0 0 auto;
}

.user-actions { display: flex; align-items: center; gap: 10px; }
.user-actions, .subscription-row, .vip-info-group, .subscription-info,
.toolbar, .chart-toolbar, .action-bar, .member-actions, .history-editor-buttons,
.button-group, .controls, .json-controls, .encrypt-controls,
.legend, .historical-info, .layout-toolbar, .cs-conv-actions, .stats {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.user-actions > *, .subscription-row > *, .vip-info-group > *, .subscription-info > *,
.toolbar > *, .chart-toolbar > *, .action-bar > *,
.member-actions > *, .history-editor-buttons > *, .button-group > *,
.controls > *, .json-controls > *, .encrypt-controls > *, .legend > *,
.historical-info > *, .layout-toolbar > *, .cs-conv-actions > * {
    flex-shrink: 0;
}

.user-actions button { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 768px) {
    .member-table, .almond-table, .order-table,
    .member-detail-content table, .member-detail-scroll table,
    .super-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .family-history-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 10px;
        max-height: calc(100vh - 200px);
        min-height: 240px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .family-history-text { white-space: normal; word-break: break-word; }
    
    .member-detail-panel {
        width: min(66vw, 440px);     
        max-width: 66vw;
        max-height: 66vh;            
    }
    .member-detail-scroll { max-height: none; }  
    .member-detail-content { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } 
}

@media (orientation: landscape) and (max-height: 560px) {
    .member-list-container {
        height: calc(100vh - 150px) !important;
        min-height: 180px !important;
    }
}

@media print {
    .member-table, .almond-table, .order-table,
    .member-detail-content table, .member-detail-scroll table,
    .super-content table { display: table !important; overflow: visible !important; white-space: normal !important; }
}

.family-tab-nav::-webkit-scrollbar, .family-subtab-nav::-webkit-scrollbar,
.profile-tabs::-webkit-scrollbar, .cs-tabs::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar, .super-tabs::-webkit-scrollbar,
.subscription-row::-webkit-scrollbar, .vip-info-group::-webkit-scrollbar,
.subscription-info::-webkit-scrollbar,
.toolbar::-webkit-scrollbar, .chart-toolbar::-webkit-scrollbar,
.action-bar::-webkit-scrollbar, .member-actions::-webkit-scrollbar,
.history-editor-buttons::-webkit-scrollbar, .button-group::-webkit-scrollbar,
.controls::-webkit-scrollbar, .json-controls::-webkit-scrollbar,
.encrypt-controls::-webkit-scrollbar, .legend::-webkit-scrollbar,
.historical-info::-webkit-scrollbar, .layout-toolbar::-webkit-scrollbar,
.cs-conv-actions::-webkit-scrollbar, .stats::-webkit-scrollbar,
.member-table::-webkit-scrollbar, .almond-table::-webkit-scrollbar,
.user-actions::-webkit-scrollbar, .order-table::-webkit-scrollbar {
    height: 5px;
}
.family-tab-nav::-webkit-scrollbar-thumb, .family-subtab-nav::-webkit-scrollbar-thumb,
.profile-tabs::-webkit-scrollbar-thumb, .cs-tabs::-webkit-scrollbar-thumb,
.admin-tabs::-webkit-scrollbar-thumb, .super-tabs::-webkit-scrollbar-thumb,
.subscription-row::-webkit-scrollbar-thumb, .vip-info-group::-webkit-scrollbar-thumb,
.subscription-info::-webkit-scrollbar-thumb, .family-history-bar::-webkit-scrollbar-thumb,
.toolbar::-webkit-scrollbar-thumb, .chart-toolbar::-webkit-scrollbar-thumb,
.action-bar::-webkit-scrollbar-thumb, .member-actions::-webkit-scrollbar-thumb,
.history-editor-buttons::-webkit-scrollbar-thumb, .button-group::-webkit-scrollbar-thumb,
.controls::-webkit-scrollbar-thumb, .json-controls::-webkit-scrollbar-thumb,
.encrypt-controls::-webkit-scrollbar-thumb, .legend::-webkit-scrollbar-thumb,
.historical-info::-webkit-scrollbar-thumb, .layout-toolbar::-webkit-scrollbar-thumb,
.cs-conv-actions::-webkit-scrollbar-thumb, .stats::-webkit-scrollbar-thumb,
.member-table::-webkit-scrollbar-thumb, .almond-table::-webkit-scrollbar-thumb,
.user-actions::-webkit-scrollbar-thumb, .order-table::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.family-tab-nav::-webkit-scrollbar-track, .family-subtab-nav::-webkit-scrollbar-track,
.profile-tabs::-webkit-scrollbar-track, .cs-tabs::-webkit-scrollbar-track,
.subscription-row::-webkit-scrollbar-track, .toolbar::-webkit-scrollbar-track,
.member-table::-webkit-scrollbar-track, .almond-table::-webkit-scrollbar-track {
    background: transparent;
}