:root { --primary-color: #8c433c; --bg-color: #f9f5f0; }
body { font-family: -apple-system, sans-serif; background-color: var(--bg-color); color: #333; padding: 15px; line-height: 1.6; margin: 0;}
.container { max-width: 600px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { text-align: center; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
.notice { font-size: 12px; color: #d9534f; text-align: center; margin-bottom: 20px; font-weight: bold; }
section { margin-bottom: 25px; border: 1px solid #eee; padding: 15px; border-radius: 8px; }
h3 { font-size: 18px; color: var(--primary-color); margin-top: 0; border-left: 4px solid var(--primary-color); padding-left: 10px; }
.item-title { font-weight: bold; margin: 10px 0 5px; display: block; }
.options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
input[type="text"], input[type="number"], input[type="tel"], textarea, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 15px;}

.opt-btn { padding: 8px 12px; border: 1px solid #ddd; border-radius: 20px; font-size: 14px; cursor: pointer; background: #fff; transition: 0.2s; }
.opt-btn.selected { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.btn { width: 100%; background: var(--primary-color); color: #fff; border: none; padding: 15px; font-size: 18px; border-radius: 30px; cursor: pointer; margin-top: 15px; text-align: center; display: block; box-sizing: border-box; }
.btn-green { background: #28a745; }

.record-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; background: #fafafa; }
.status-badge { float: right; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; color: white; }
.bg-red { background: #dc3545; } .bg-orange { background: #fd7e14; } .bg-green { background: #28a745; } .bg-gray { background: #6c757d; }

.has-tip { position: relative; overflow: visible; }
.has-tip .tip-icon { 
    display: inline-block; background: #ccc; color: #fff; 
    border-radius: 50%; width: 14px; height: 14px; 
    text-align: center; line-height: 14px; font-size: 11px; 
    margin-left: 4px; font-style: normal; font-family: sans-serif;
}
.has-tip.selected .tip-icon { background: #fff; color: var(--primary-color); }
.has-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #fff; padding: 8px 12px; 
    border-radius: 6px; font-size: 13px; font-weight: normal; 
    width: max-content; max-width: 240px; white-space: normal;
    pointer-events: none; opacity: 0; transition: opacity 0.2s; 
    z-index: 999; line-height: 1.5; text-align: left;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.has-tip::before {
    content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    border-width: 6px; border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.has-tip:hover::after, .has-tip:hover::before, 
.has-tip:active::after, .has-tip:active::before { opacity: 1; }