1|/* Hexagram - Modern Bright Theme (光猛) */
     2|
     3|*,
     4|*::before,
     5|*::after {
     6|  box-sizing: border-box;
     7|}
     8|
     9|body {
    10|  margin: 0;
    11|  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    12|  background-color: #F8F6F3;
    13|  color: #2D2D2D;
    14|  line-height: 1.6;
    15|}
    16|
    17|h1, h2, h3, h4, h5, h6 {
    18|  margin-top: 0;
    19|  margin-bottom: 0.5rem;
    20|  font-weight: 600;
    21|  line-height: 1.2;
    22|}
    23|
    24|p { margin-top: 0; margin-bottom: 1rem; }
    25|
    26|a {
    27|  color: #D4A574;
    28|  text-decoration: none;
    29|}
    30|
    31|a:hover {
    32|  color: #C49564;
    33|  text-decoration: underline;
    34|}
    35|
    36|.app-container {
    37|  max-width: 480px;
    38|  margin: 0 auto;
    39|  padding: 16px;
    40|}
    41|
    42|.app-header {
    43|  text-align: center;
    44|  padding: 24px 0 16px;
    45|}
    46|
    47|.app-header h1 {
    48|  font-size: 28px;
    49|  font-weight: 700;
    50|  color: #D4A574;
    51|  margin-bottom: 8px;
    52|}
    53|
    54|.app-header .subtitle {
    55|  font-size: 13px;
    56|  color: #888080;
    57|  margin-bottom: 0;
    58|}
    59|
    60|.card {
    61|  background-color: #FFFFFF;
    62|  border-radius: 12px;
    63|  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    64|  padding: 16px;
    65|  margin-bottom: 16px;
    66|  border: 1px solid #F0EAE4;
    67|}
    68|
    69|.card h3 {
    70|  font-size: 15px;
    71|  font-weight: 600;
    72|  color: #2D2D2D;
    73|  margin-bottom: 12px;
    74|  display: flex;
    75|  align-items: center;
    76|  gap: 6px;
    77|}
    78|
    79|.card h3 .badge {
    80|  background-color: #D4A574;
    81|  color: #FFFFFF;
    82|  font-size: 10px;
    83|  padding: 1px 8px;
    84|  border-radius: 10px;
    85|  font-weight: 500;
    86|}
    87|
    88|.form-group { margin-bottom: 14px; }
    89|
    90|.form-group label {
    91|  display: block;
    92|  font-size: 13px;
    93|  font-weight: 500;
    94|  color: #555;
    95|  margin-bottom: 4px;
    96|}
    97|
    98|.form-group input,
    99|.form-group textarea,
   100|.form-group select {
   101|  width: 100%;
   102|  padding: 10px 12px;
   103|  border-radius: 8px;
   104|  border: 1.5px solid #E8E0D8;
   105|  background-color: #FFFFFF;
   106|  font-size: 14px;
   107|  color: #2D2D2D;
   108|  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   109|  font-family: inherit;
   110|}
   111|
   112|.form-group input:focus,
   113|.form-group textarea:focus,
   114|.form-group select:focus {
   115|  outline: none;
   116|  border-color: #D4A574;
   117|  box-shadow: 0 0 0 3px rgba(212,165,116,0.15);
   118|}
   119|
   120|.form-group textarea {
   121|  resize: vertical;
   122|  min-height: 60px;
   123|}
   124|
   125|.lunar-date-display {
   126|  background-color: #FFFAF5;
   127|  border: 1px solid #F0EAE4;
   128|  border-radius: 8px;
   129|  padding: 12px;
   130|  margin-top: 8px;
   131|}
   132|
   133|.lunar-date-grid {
   134|  display: flex;
   135|  flex-wrap: wrap;
   136|  gap: 8px;
   137|}
   138|
   139|.lunar-item {
   140|  flex: 1;
   141|  min-width: 70px;
   142|  padding: 6px 10px;
   143|  background-color: #FFF5EB;
   144|  border-radius: 6px;
   145|  text-align: center;
   146|}
   147|
   148|.lunar-item .label {
   149|  font-size: 10px;
   150|  color: #888080;
   151|  text-transform: uppercase;
   152|  letter-spacing: 0.5px;
   153|  display: block;
   154|}
   155|
   156|.lunar-item .value {
   157|  font-size: 15px;
   158|  font-weight: 600;
   159|  color: #2D2D2D;
   160|  margin-top: 2px;
   161|}
   162|
   163|.kongwang-item {
   164|  flex: 1;
   165|  min-width: 70px;
   166|  padding: 6px 10px;
   167|  background-color: #FFF0F0;
   168|  border-radius: 6px;
   169|  text-align: center;
   170|}
   171|
   172|.kongwang-item .label {
   173|  font-size: 10px;
   174|  color: #B08080;
   175|  text-transform: uppercase;
   176|  letter-spacing: 0.5px;
   177|  display: block;
   178|}
   179|
   180|.kongwang-item .value {
   181|  font-size: 15px;
   182|  font-weight: 600;
   183|  color: #B06060;
   184|  margin-top: 2px;
   185|}
   186|
   187|.line-input-row { margin-bottom: 14px; }
   188|
   189|.line-label {
   190|  font-size: 12px;
   191|  font-weight: 500;
   192|  color: #555;
   193|  margin-bottom: 6px;
   194|  display: flex;
   195|  align-items: center;
   196|  gap: 6px;
   197|}
   198|
   199|.line-btn-group {
   200|  display: flex;
   201|  flex-wrap: wrap;
   202|  gap: 4px;
   203|  flex: 1;
   204|}
   205|
   206|/* ============ LINE BUTTONS - CLEAN REWRITE ============ */
   207|.line-btn {
   208|  flex: 1;
   209|  padding: 8px 4px;
   210|  border-radius: 8px;
   211|  border: 1.5px solid #E8E0D8;
   212|  background-color: #FFFFFF;
   213|  font-size: 11px;
   214|  line-height: 1.3;
   215|  cursor: pointer;
   216|  transition: none;
   217|  color: #2D2D2D;
   218|  white-space: nowrap;
   219|  overflow: hidden;
   220|  text-overflow: ellipsis;
   221|  position: relative;
   222|  -webkit-tap-highlight-color: transparent;
   223|  outline: none;
   224|  box-shadow: none;
   225|}
   226|
   227|.line-btn:focus,
   228|.line-btn:focus-visible,
   229|.line-btn:-moz-focusring {
   230|  outline: none !important;
   231|  box-shadow: none !important;
   232|}
   233|.line-btn:focus:not(.active),
   234|.line-btn:focus-visible:not(.active) {
   235|  background-color: #F8F6F3;
   236|  border-color: #D4A574;
   237|}
   238|.line-btn.active:focus,
   239|.line-btn.active:focus-visible {
   240|  color: #FFFFFF;
   241|}
   242|.line-btn.active:focus[data-value="yang"],
   243|.line-btn.active:focus-visible[data-value="yang"] {
   244|  background-color: #D4A574;
   245|  color: #FFFFFF;
   246|}
   247|.line-btn.active:focus[data-value="yin"],
   248|.line-btn.active:focus-visible[data-value="yin"] {
   249|  background-color: #7B92B0;
   250|  color: #FFFFFF;
   251|}
   252|.line-btn.active:focus[data-value="changing-yang"],
   253|.line-btn.active:focus-visible[data-value="changing-yang"] {
   254|  background-color: #E8835C;
   255|  color: #FFFFFF;
   256|}
   257|.line-btn.active:focus[data-value="changing-yin"],
   258|.line-btn.active:focus-visible[data-value="changing-yin"] {
   259|  background-color: #8B6B9E;
   260|  color: #FFFFFF;
   261|}
   262|
   263|.line-btn:hover {
   264|  background-color: #F8F6F3;
   265|  border-color: #D4A574;
   266|}
   267|
   268|/* Rest state colors */
   269|.line-btn[data-value="yang"] {
   270|  background-color: #F5EDE4;
   271|  border-color: #D4A574;
   272|  color: #2D2D2D;
   273|}
   274|.line-btn[data-value="yin"] {
   275|  background-color: #E8EFF5;
   276|  border-color: #7B92B0;
   277|  color: #2D2D2D;
   278|}
   279|.line-btn[data-value="changing-yang"] {
   280|  background-color: #FDE8E0;
   281|  border-color: #E8835C;
   282|  color: #2D2D2D;
   283|}
   284|.line-btn[data-value="changing-yin"] {
   285|  background-color: #EDE0F0;
   286|  border-color: #8B6B9E;
   287|  color: #2D2D2D;
   288|}
   289|
   290|/* Active state */
   291|.line-btn.active {
   292|  color: #FFFFFF;
   293|  border-color: transparent;
   294|}
   295|.line-btn.active[data-value="yang"] { background-color: #D4A574; }
   296|.line-btn.active[data-value="yin"] { background-color: #7B92B0; }
   297|.line-btn.active[data-value="changing-yang"] { background-color: #E8835C; }
   298|.line-btn.active[data-value="changing-yin"] { background-color: #8B6B9E; }
   299|
   300|/* Press state */
   301|.line-btn:active[data-value="yang"] { background-color: #C49564; color: #FFFFFF; }
   302|.line-btn:active[data-value="yin"] { background-color: #6A82A0; color: #FFFFFF; }
   303|.line-btn:active[data-value="changing-yang"] { background-color: #D0734C; color: #FFFFFF; }
   304|.line-btn:active[data-value="changing-yin"] { background-color: #7B5B8E; color: #FFFFFF; }
   305|
   306|.line-btn .symbol-large {
   307|  font-size: 18px;
   308|  display: block;
   309|  margin-top: 2px;
   310|  font-family: serif;
   311|}
   312|
   313|.action-buttons {
   314|  margin: 20px 0;
   315|  display: flex;
   316|  gap: 10px;
   317|}
   318|
   319|.btn-primary {
   320|  flex: 1;
   321|  padding: 12px 16px;
   322|  border-radius: 8px;
   323|  border: none;
   324|  background-color: #D4A574;
   325|  color: #FFFFFF;
   326|  font-size: 15px;
   327|  font-weight: 600;
   328|  cursor: pointer;
   329|  transition: all 0.15s ease-in-out;
   330|}
   331|
   332|.btn-primary:hover { background-color: #C49564; }
   333|.btn-primary:active { background-color: #B88850; color: #FFFFFF; }
   334|.btn-primary:focus,
   335|.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,165,116,0.3); }
   336|
   337|.btn-secondary {
   338|  padding: 12px 16px;
   339|  border-radius: 8px;
   340|  border: 1.5px solid #E8E0D8;
   341|  background-color: #FFFFFF;
   342|  color: #555;
   343|  font-size: 14px;
   344|  font-weight: 500;
   345|  cursor: pointer;
   346|  transition: all 0.15s ease-in-out;
   347|}
   348|
   349|.btn-secondary:hover {
   350|  background-color: #F8F6F3;
   351|  border-color: #D4A574;
   352|  color: #2D2D2D;
   353|}
   354|
   355|.btn-secondary:active { background-color: #E8E0D8; color: #2D2D2D; }
   356|.btn-secondary:focus,
   357|.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,165,116,0.15); }
   358|
   359|#chartSection { display: none; }
   360|
   361|.chart-header {
   362|  display: flex;
   363|  align-items: center;
   364|  gap: 8px;
   365|  margin-bottom: 16px;
   366|}
   367|
   368|.chart-header .question-text {
   369|  font-size: 14px;
   370|  color: #555;
   371|  font-style: italic;
   372|  flex: 1;
   373|}
   374|
   375|.chart-header .question-text .q-label {
   376|  font-weight: 600;
   377|  color: #2D2D2D;
   378|}
   379|
   380|.export-buttons {
   381|  display: flex;
   382|  gap: 8px;
   383|  margin-bottom: 16px;
   384|}
   385|
   386|.export-buttons .btn-export {
   387|  padding: 8px 14px;
   388|  border-radius: 8px;
   389|  border: 1.5px solid #C8DCC8;
   390|  background-color: #F0F8F0;
   391|  color: #5A8C5A;
   392|  font-size: 12px;
   393|  font-weight: 500;
   394|  cursor: pointer;
   395|  transition: all 0.15s ease-in-out;
   396|}
   397|
   398|.export-buttons .btn-export:hover { background-color: #E0F0E0; border-color: #7BAC7A; }
   399|.export-buttons .btn-export:active { background-color: #5A8C5A; color: #FFFFFF; border-color: #5A8C5A; }
   400|.export-buttons .btn-export:focus,
   401|.export-buttons .btn-export:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90,140,90,0.2); }
   402|
   403|.export-buttons .btn-export.btn-danger {
   404|  padding: 8px 14px;
   405|  border-radius: 8px;
   406|  border: 1.5px solid #E8C8C8;
   407|  background-color: #FFF0F0;
   408|  color: #B06060;
   409|  font-size: 12px;
   410|  font-weight: 500;
   411|}
   412|
   413|.export-buttons .btn-export.btn-danger:hover { background-color: #FFE0E0; border-color: #C08080; }
   414|.export-buttons .btn-export.btn-danger:active { background-color: #B06060; color: #FFFFFF; border-color: #B06060; }
   415|
   416|.chart-container {
   417|  overflow-x: auto;
   418|  border-radius: 8px;
   419|  border: 1px solid #F0EAE4;
   420|  background-color: #FFFFFF;
   421|  position: relative;
   422|}
   423|
   424|.chart-table {
   425|  width: 100%;
   426|  border-collapse: collapse;
   427|  table-layout: auto;
   428|}
   429|
   430|.chart-table th,
   431|.chart-table td {
   432|  padding: 8px 8px;
   433|  text-align: center;
   434|  font-size: 13px;
   435|  border: 1px solid #F0EAE4;
   436|  vertical-align: middle;
   437|}
   438|
   439|.chart-table thead th {
   440|  background-color: #F8F6F3;
   441|  font-weight: 600;
   442|  font-size: 12px;
   443|  color: #555;
   444|}
   445|
   446|.chart-table .changing-row td { background-color: #FFFAF5; }
   447|
   448|.chart-table .changing-label {
   449|  font-size: 11px;
   450|  font-weight: 600;
   451|  color: #E8835C;
   452|}
   453|
   454|.chart-table .fu-shen td {
   455|  background-color: #FFF8F8;
   456|  color: #B08080;
   457|  font-size: 11px;
   458|}
   459|
   460|.chart-table .fu-shen-label {
   461|  font-size: 10px;
   462|  color: #B08080;
   463|  writing-mode: vertical-lr;
   464|  text-orientation: mixed;
   465|}
   466|
   467|.chart-table .yang-line { background-color: #FFF5EB; }
   468|.chart-table .yin-line { background-color: #F0F4FA; }
   469|.chart-table .cyang-line { background-color: #FFF0EB; }
   470|.chart-table .cyin-line { background-color: #F8F0FA; }
   471|
   472|.chart-legend {
   473|  margin-top: 16px;
   474|  padding-top: 12px;
   475|  border-top: 1px solid #F0EAE4;
   476|  display: flex;
   477|  flex-wrap: wrap;
   478|  gap: 12px;
   479|}
   480|
   481|.legend-item {
   482|  display: flex;
   483|  align-items: center;
   484|  gap: 4px;
   485|  font-size: 11px;
   486|  color: #555;
   487|}
   488|
   489|.legend-color {
   490|  width: 12px;
   491|  height: 12px;
   492|  border-radius: 3px;
   493|  border: 1px solid #E8E0D8;
   494|}
   495|
   496|.chart-info {
   497|  margin-top: 12px;
   498|  padding: 10px 12px;
   499|  background-color: #FFFBF5;
   500|  border-radius: 6px;
   501|